RegionX components

package.json

@@ -30,6 +30,7 @@
     "@polkadot/ui-keyring": "3.6.6",
     "@polkadot/util": "12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
+    "@region-x/components": "^0.1.14",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "apexcharts": "^3.49.1",

src/assets/networks/relay/index.ts

@@ -1,6 +1,23 @@
+import { NetworkType } from '@/models';
+
 import Kusama from './kusama.png';
 import Polkadot from './polkadot.png';
 import Rococo from './rococo.png';
 import Westend from './westend.png';
 
-export { Kusama, Polkadot, Rococo, Westend };
+const getIcon = (network: NetworkType) => {
+  switch (network) {
+    case NetworkType.POLKADOT:
+      return Polkadot;
+    case NetworkType.KUSAMA:
+      return Kusama;
+    case NetworkType.ROCOCO:
+      return Rococo;
+    case NetworkType.WESTEND:
+      return Westend;
+    default:
+      Polkadot;
+  }
+};
+
+export { getIcon, Kusama, Polkadot, Rococo, Westend };

src/components/Elements/CountDown/index.tsx

@@ -15,7 +15,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
   const timerProps = {
     isPlaying: true,
     size: 96,
-    strokeWidth: 2,
+    strokeWidth: 6,
   };
 
   const theme = useTheme();

src/components/Elements/Selectors/ChainSelector/index.tsx

@@ -1,19 +1,10 @@
-import {
-  Box,
-  CircularProgress,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@mui/material';
+import { FormControl } from '@mui/material';
+import { Select } from '@region-x/components';
 import Image from 'next/image';
 
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
 import { ChainType, NetworkType } from '@/models';
 
-import styles from './index.module.scss';
-
 interface ChainSelectorProps {
   chain: ChainType;
   setChain: (_: ChainType) => void;
@@ -52,65 +43,68 @@ const relayIcons = {
 
 export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
   const { network } = useNetwork();
+
   const {
-    state: { name: coretimeChain, isApiReady: isCoretimeReady },
+    state: { name: coretimeChain },
   } = useCoretimeApi();
   const {
-    state: { name: relayChain, isApiReady: isRelayReady },
+    state: { name: relayChain },
   } = useRelayApi();
-
   const {
-    state: { name: regionXChain, isApiReady: isRegionXReady },
+    state: { name: regionXChain },
   } = useRegionXApi();
 
   const menuItems = [
     {
-      icon: relayIcons[network],
+      icon: (
+        <Image
+          src={relayIcons[network]}
+          alt=''
+          style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
+        />
+      ),
       label: relayChain,
       value: ChainType.RELAY,
-      loading: !isRelayReady,
     },
     {
-      icon: coretimeIcons[network],
+      icon: (
+        <Image
+          src={coretimeIcons[network]}
+          alt=''
+          style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
+        />
+      ),
       label: coretimeChain,
       value: ChainType.CORETIME,
-      loading: !isCoretimeReady,
     },
     ...(enableRegionX(network)
       ? [
           {
-            icon: RegionX,
+            icon: (
+              <Image
+                src={RegionX}
+                alt=''
+                style={{
+                  width: '28px',
+                  height: '28px',
+                  marginRight: '0.5rem',
+                  borderRadius: '100%',
+                }}
+              />
+            ),
             label: regionXChain,
             value: ChainType.REGIONX,
-            loading: isRegionXReady,
           },
         ]
       : []),
   ];
   return (
     <FormControl fullWidth>
-      <InputLabel id='origin-selector-label'>Chain</InputLabel>
       <Select
-        labelId='origin-selector-label'
-        id='origin-selector'
-        value={chain}
-        label='Origin'
-        sx={{ borderRadius: '1rem' }}
-        onChange={(e) => setChain(e.target.value as ChainType)}
-      >
-        {menuItems.map(({ icon, label, value, loading }, index) => (
-          <MenuItem value={value} key={index}>
-            <Box className={styles.chainItem}>
-              <Image src={icon} alt='icon' className={styles.icon} />
-              {loading ? (
-                <CircularProgress size='1.5rem' />
-              ) : (
-                <Typography className={styles.label}>{label}</Typography>
-              )}
-            </Box>
-          </MenuItem>
-        ))}
-      </Select>
+        options={menuItems}
+        selectedValue={chain}
+        onChange={(c) => setChain(c || ChainType.RELAY)}
+      />
     </FormControl>
   );
 };