refactor

src/components/elements/AmountInput/index.tsx → src/components/Elements/AmountInput/index.tsx

@@ -10,7 +10,7 @@ interface AmountInputProps {
 
 // TODO: Fetch dot price and show how much is the currency amount worth.
 
-const AmountInput = ({
+export const AmountInput = ({
   amount,
   currency,
   title,
@@ -60,5 +60,3 @@ const AmountInput = ({
     </>
   );
 };
-
-export default AmountInput;

src/components/elements/Banner/index.tsx → src/components/Elements/Banner/index.tsx

@@ -7,7 +7,7 @@ interface BannerProps {
   severity: 'info' | 'error' | 'warning' | 'success';
 }
 
-const Banner = ({ content, severity }: BannerProps) => {
+export const Banner = ({ content, severity }: BannerProps) => {
   const [open, setOpen] = useState(true);
 
   const handleClose = () => {
@@ -36,5 +36,3 @@ const Banner = ({ content, severity }: BannerProps) => {
     </Alert>
   );
 };
-
-export default Banner;

src/components/elements/FeatureCard/index.tsx → src/components/Elements/FeatureCard/index.tsx

@@ -19,7 +19,7 @@ interface FeatureCardProps {
   href: string;
 }
 
-const FeatureCard = ({
+export const FeatureCard = ({
   title,
   buttonText,
   image,
@@ -50,5 +50,3 @@ const FeatureCard = ({
     </Card>
   );
 };
-
-export default FeatureCard;

src/components/elements/MarketFilters/index.tsx → src/components/Elements/MarketFilters/index.tsx

@@ -29,7 +29,7 @@ type Filters = {
   regionEndFilter: (_listing: Listing) => boolean;
 };
 
-const MarketFilters = ({ listings, setFilteredListings }: Props) => {
+export const MarketFilters = ({ listings, setFilteredListings }: Props) => {
   const [filters, setFilters] = useState<Filters>({
     coreOccupancyFilter: () => true,
     durationFilter: () => true,
@@ -112,5 +112,3 @@ const MarketFilters = ({ listings, setFilteredListings }: Props) => {
     </Box>
   );
 };
-
-export default MarketFilters;

src/components/elements/Progress/index.tsx → src/components/Elements/Progress/index.tsx

@@ -30,7 +30,7 @@ interface ProgressProps {
   sections: Section[];
 }
 
-const Progress = ({ progress, sections }: ProgressProps) => {
+export const Progress = ({ progress, sections }: ProgressProps) => {
   return (
     <Box position='relative' width='100%' height='20px'>
       <BorderLinearProgress variant='determinate' value={progress} />
@@ -62,5 +62,3 @@ const Progress = ({ progress, sections }: ProgressProps) => {
     </Box>
   );
 };
-
-export default Progress;

src/components/elements/SaleInfo/index.tsx → src/components/Elements/SaleInfo/index.tsx

@@ -19,7 +19,7 @@ interface SaleInfoGridProps {
   saleEnd: number;
 }
 
-const SaleInfoGrid = ({
+export const SaleInfoGrid = ({
   saleInfo,
   currentPhase,
   currentPrice,
@@ -116,5 +116,3 @@ const SaleInfoGrid = ({
     </Box>
   );
 };
-
-export default SaleInfoGrid;

src/components/elements/StatusIndicator/index.tsx → src/components/Elements/StatusIndicator/index.tsx

@@ -9,6 +9,7 @@ interface StatusIndicatorProps {
   state: ApiState;
   label: string;
 }
+
 export const StatusIndicator = ({ state, label }: StatusIndicatorProps) => {
   const theme = useTheme();
   return (

src/components/Elements/index.ts

@@ -0,0 +1,10 @@
+export * from './AmountInput';
+export * from './Banner';
+export * from './FeatureCard';
+export * from './Label';
+export * from './ListingCard';
+export * from './MarketFilters';
+export * from './Progress';
+export * from './RegionCard';
+export * from './SaleInfo';
+export * from './StatusIndicator';

src/components/Layout/index.tsx

@@ -2,7 +2,7 @@ import { Divider, Paper, useTheme } from '@mui/material';
 import React, { ReactElement } from 'react';
 
 import styles from './index.module.scss';
-import Banner from '../elements/Banner';
+import { Banner } from '../Elements';
 import { Header } from '../Header';
 import { Sidebar } from '../Sidebar';
 

src/components/Modals/Interlace/index.tsx

@@ -15,7 +15,7 @@ import { useInkathon } from '@scio-labs/use-inkathon';
 import { CoreMask } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
-import { RegionCard } from '@/components/elements';
+import { RegionCard } from '@/components/Elements';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';

src/components/Modals/Partition/index.tsx

@@ -14,7 +14,7 @@ import {
 import { useInkathon } from '@scio-labs/use-inkathon';
 import { useEffect, useState } from 'react';
 
-import { RegionCard } from '@/components/elements';
+import { RegionCard } from '@/components/Elements';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { useCommon } from '@/contexts/common';

src/components/Modals/Purchase/index.tsx

@@ -9,7 +9,7 @@ import {
 import { contractTx, useContract, useInkathon } from '@scio-labs/use-inkathon';
 import { useState } from 'react';
 
-import { ListingCard } from '@/components/elements/ListingCard';
+import { ListingCard } from '@/components/Elements/ListingCard';
 
 import { CONTRACT_MARKET } from '@/contexts/apis/consts';
 import { useToast } from '@/contexts/toast';
@@ -65,10 +65,9 @@ export const PurchaseModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to purchase region from sale. Error: ${
-          e.errorMessage === 'Error'
-            ? 'Please check your balance.'
-            : e.errorMessage
+        `Failed to purchase region from sale. Error: ${e.errorMessage === 'Error'
+          ? 'Please check your balance.'
+          : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Modals/Sell/index.tsx

@@ -12,9 +12,8 @@ import { contractTx, useContract, useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
-import { RegionCard } from '@/components/elements';
-import AmountInput from '@/components/elements/AmountInput';
-import { RecipientSelector } from '@/components/elements/RecipientSelector';
+import { AmountInput, RegionCard } from '@/components/Elements';
+import { RecipientSelector } from '@/components/Selectors/RecipientSelector';
 
 import { CONTRACT_MARKET, CONTRACT_XC_REGIONS } from '@/contexts/apis/consts';
 import { useRegions } from '@/contexts/regions';
@@ -86,8 +85,7 @@ export const SellModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to approve the region. Error: ${
-          e.errorMessage === 'Error' ? 'Please check your balance.' : e
+        `Failed to approve the region. Error: ${e.errorMessage === 'Error' ? 'Please check your balance.' : e
         }`
       );
       setWorking(false);
@@ -128,10 +126,9 @@ export const SellModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to list the region. Error: ${
-          e.errorMessage === 'Error'
-            ? 'Please check your balance.'
-            : e.errorMessage
+        `Failed to list the region. Error: ${e.errorMessage === 'Error'
+          ? 'Please check your balance.'
+          : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Modals/TaskAssign/index.tsx

@@ -15,7 +15,7 @@ import {
 import { useInkathon } from '@scio-labs/use-inkathon';
 import { useEffect, useState } from 'react';
 
-import { RegionCard } from '@/components/elements';
+import { RegionCard } from '@/components/Elements';
 
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';

src/components/Modals/Transfer/index.tsx

@@ -18,7 +18,7 @@ import {
   transferRegionOnCoretimeChain,
 } from '@/utils/native/transfer';
 
-import { RegionCard } from '@/components/elements';
+import { RegionCard } from '@/components/Elements';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { CONTRACT_XC_REGIONS } from '@/contexts/apis/consts';

src/components/Modals/Unlist/index.tsx

@@ -10,7 +10,7 @@ import { contractTx, useContract, useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useState } from 'react';
 
-import { RegionCard } from '@/components/elements';
+import { RegionCard } from '@/components/Elements';
 
 import { CONTRACT_MARKET } from '@/contexts/apis/consts';
 import { useMarket } from '@/contexts/market';
@@ -72,10 +72,9 @@ export const UnlistModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to unlist region from sale. Error: ${
-          e.errorMessage === 'Error'
-            ? 'Please check your balance.'
-            : e.errorMessage
+        `Failed to unlist region from sale. Error: ${e.errorMessage === 'Error'
+          ? 'Please check your balance.'
+          : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Modals/index.ts

@@ -1,6 +1,8 @@
 export * from './Interlace';
 export * from './Partition';
+export * from './Purchase';
 export * from './Sell';
 export * from './TaskAssign';
 export * from './Transfer';
+export * from './Unlist';
 export * from './WalletConnect';

src/pages/transfer/ChainSelector.tsx → src/components/Selectors/ChainSelector/index.tsx

@@ -22,9 +22,3 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
     </FormControl>
   );
 };
-
-const page = () => {
-  return <></>;
-};
-
-export default page;

src/pages/transfer/RegionSelector.tsx → src/components/Selectors/RegionSelector/index.tsx

@@ -32,9 +32,3 @@ export const RegionSelector = ({
     </FormControl>
   );
 };
-
-const page = () => {
-  return <></>;
-};
-
-export default page;

src/components/Selectors/index.ts

@@ -0,0 +1,3 @@
+export * from './ChainSelector';
+export * from './RecipientSelector';
+export * from './RegionSelector';

src/components/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import { ApiState } from '@/contexts/apis/types';
 import { TransferIcon } from '@/icons';
 
 import styles from './index.module.scss';
-import { StatusIndicator } from '../elements';
+import { StatusIndicator } from '../Elements';
 
 interface MenuItemProps {
   label: string;
@@ -27,9 +27,8 @@ const MenuItem = ({ label, enabled, route, icon }: MenuItemProps) => {
 
   return (
     <Box
-      className={`${styles.menuItem} ${
-        isActive ? styles.active : styles.inactive
-      } ${!enabled ? styles.disabled : ''}`}
+      className={`${styles.menuItem} ${isActive ? styles.active : styles.inactive
+        } ${!enabled ? styles.disabled : ''}`}
       onClick={() => enabled && route && push(route)}
     >
       {{

src/components/index.ts

@@ -1,5 +1,6 @@
-export * from './elements';
+export * from './Elements';
 export * from './Header';
 export * from './Layout';
 export * from './Modals';
+export * from './Selectors';
 export * from './Sidebar';

src/pages/_app.tsx

@@ -12,7 +12,7 @@ import '../../styles/global.scss';
 import createEmotionCache from '@/utils/createEmotionCache';
 import theme from '@/utils/muiTheme';
 
-import { Layout } from '@/components/Layout';
+import { Layout } from '@/components';
 
 import {
   CoretimeApiContextProvider,

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Typography, useTheme } from '@mui/material';
 
-import FeatureCard from '@/components/elements/FeatureCard';
+import { FeatureCard } from '@/components';
 
 import Chart from '@/assets/chart.png';
 import Config from '@/assets/config.png';

src/pages/market/marketplace.tsx

@@ -3,9 +3,7 @@ import { useEffect, useState } from 'react';
 
 import theme from '@/utils/muiTheme';
 
-import { ListingCard } from '@/components/elements/ListingCard';
-import MarketFilters from '@/components/elements/MarketFilters';
-import { PurchaseModal } from '@/components/Modals/Purchase';
+import { ListingCard, MarketFilters, PurchaseModal } from '@/components';
 
 import { useMarket } from '@/contexts/market';
 import { Listing } from '@/models';

src/pages/purchase.tsx

@@ -15,8 +15,7 @@ import {
   parseHNString,
 } from '@/utils/functions';
 
-import Progress, { Section } from '@/components/elements/Progress';
-import SaleInfoGrid from '@/components/elements/SaleInfo';
+import { Progress, SaleInfoGrid, Section } from '@/components';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
@@ -209,11 +208,11 @@ const Purchase = () => {
       </Box>
       <Box>
         {loading ||
-        !currentPhase ||
-        !saleEnd ||
-        !currentBlockNumber ||
-        !progress ||
-        !saleEndTimestamp ? (
+          !currentPhase ||
+          !saleEnd ||
+          !currentBlockNumber ||
+          !progress ||
+          !saleEndTimestamp ? (
           <>
             <Typography variant='h5' align='center'>
               Connect your wallet

src/pages/transfer/index.tsx

@@ -28,8 +28,7 @@ import {
   transferRegionOnCoretimeChain,
 } from '@/utils/native/transfer';
 
-import { RegionCard } from '@/components';
-import { RecipientSelector } from '@/components/elements/RecipientSelector';
+import { ChainSelector, RecipientSelector, RegionCard, RegionSelector } from '@/components';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { CONTRACT_XC_REGIONS } from '@/contexts/apis/consts';
@@ -39,9 +38,6 @@ import { useToast } from '@/contexts/toast';
 import XcRegionsMetadata from '@/contracts/xc_regions.json';
 import { RegionLocation, RegionMetadata } from '@/models';
 
-import { ChainSelector } from './ChainSelector';
-import { RegionSelector } from './RegionSelector';
-
 const Page = () => {
   const { activeAccount, activeSigner, api: contractsApi } = useInkathon();
   const { contract } = useContract(XcRegionsMetadata, CONTRACT_XC_REGIONS);