renew page

RegionX-Labs · Oct 2, 2024 · c3f32f3 · c3f32f3
1 parent d6987ca
commit c3f32f3
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@polkadot/ui-keyring": "3.6.6",
     "@polkadot/util": "12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
-    "@region-x/components": "^0.1.4",
+    "@region-x/components": "^0.1.5",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "apexcharts": "^3.49.1",

diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
@@ -77,12 +77,14 @@ export const Header = () => {
                   <HistoryIcon />
                 </IconButton>
               </Stack>
-              <Select
-                options={availableAccounts()}
-                searchable={true}
-                onChange={(acc: InjectedAccountWithMeta | null) => onAccountChange(acc)}
-                selectedValue={activeAccount as any}
-              />
+              <Box width='300px'>
+                <Select
+                  options={availableAccounts()}
+                  searchable={true}
+                  onChange={(acc: InjectedAccountWithMeta | null) => onAccountChange(acc)}
+                  selectedValue={activeAccount as any}
+                />
+              </Box>
             </Box>
           ) : (
             <Button data-cy='connect-wallet' onClick={() => connectWallet()}>

diff --git a/src/components/Renew/action.tsx b/src/components/Renew/action.tsx
@@ -9,6 +9,7 @@ import { ProgressButton } from '@/components';
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useToast } from '@/contexts/toast';
+import { Button } from '@region-x/components';
 
 interface RenewActionProps {
   parachain: RenewableParachain;
@@ -56,14 +57,17 @@ export const RenewAction = ({ parachain, enabled }: RenewActionProps) => {
 
   return (
     <>
-      <Stack direction='row' gap='1rem' marginTop='2em' justifyContent='center'>
-        <ProgressButton
-          disabled={!enabled}
-          label='Renew'
-          onClick={handleRenew}
-          loading={working}
-          width='200px'
-        />
+      <Stack
+        direction='row'
+        gap='1rem'
+        marginTop='2em'
+        justifyContent='center'
+        width='200px'
+        margin='0 auto'
+      >
+        <Button disabled={!enabled} onClick={handleRenew} loading={working} fullWidth>
+          Renew
+        </Button>
       </Stack>
     </>
   );

diff --git a/src/components/Renew/info.tsx b/src/components/Renew/info.tsx
@@ -146,7 +146,7 @@ const ParachainInfo = ({ parachain, expiryTimestamp, expiryLoading }: ParachainI
         mt={'1rem'}
         gap='0.5rem'
         border='1px solid'
-        borderColor={theme.palette.grey[400]}
+        borderColor={theme.palette.grey[100]}
         borderRadius='1rem'
       >
         <Property property='Core number:' value={parachain.core.toString()} />

diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx
@@ -1,20 +1,15 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  Stack,
-  Typography,
-} from '@mui/material';
+import { Stack } from '@mui/material';
 import { useRouter } from 'next/router';
 
 import { RenewableParachain } from '@/hooks';
-import theme from '@/utils/muiTheme';
-
-import { ParaDisplay } from '@/components';
 
 import { useNetwork } from '@/contexts/network';
+import { Select } from '@region-x/components';
+import { SelectOption } from '@region-x/components/dist/types/types';
+import { chainData } from '@/chaindata';
+import Image from 'next/image';
+
+import Unknown from '@/assets/unknown.svg';
 
 interface SelectParachainProps {
   parachains: RenewableParachain[];
@@ -28,11 +23,10 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => {
   const core = router.query.core ? Number(router.query.core) : null;
   const paraId = router.query.paraId ? Number(router.query.paraId) : null;
 
-  const onParaChange = (e: SelectChangeEvent) => {
-    const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core;
-    const selectedParaId = paraId
-      ? parachains[Number(e.target.value)].paraId
-      : parachains[0].paraId;
+  const onParaChange = (_index: number | null) => {
+    const index = _index ?? 0;
+    const selectedCoreId = core ? parachains[index].core : parachains[0].core;
+    const selectedParaId = paraId ? parachains[index].paraId : parachains[0].paraId;
 
     // Update the URL with the new `core` query param
     router.push({
@@ -41,31 +35,58 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => {
     });
   };
 
+  const selectOptions: SelectOption<number>[] = parachains.map((p, i) => {
+    const data = chainData[network][p.paraId];
+
+    if (data === undefined) {
+      return {
+        label: `#${p.paraId} | Core ${p.core}`,
+        value: i,
+        icon: (
+          <Image
+            src={Unknown}
+            width={28}
+            height={28}
+            style={{ borderRadius: '100%', marginRight: '1rem' }}
+            alt=''
+          />
+        ),
+      };
+    }
+
+    return {
+      label: `${data.name} #${p.paraId} | Core ${p.core}`,
+      value: i,
+      icon:
+        data.logo === undefined ? (
+          <Image
+            src={Unknown}
+            width={28}
+            height={28}
+            style={{ borderRadius: '100%', marginRight: '1rem' }}
+            alt=''
+          />
+        ) : (
+          <Image
+            src={data.logo}
+            width={28}
+            height={28}
+            style={{ borderRadius: '100%', marginRight: '1rem' }}
+            alt=''
+          />
+        ),
+    };
+  });
+
   return (
     <Stack direction='column' gap={1} margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
-      <Typography
-        variant='h1'
-        textAlign='center'
-        sx={{ color: theme.palette.common.black, mb: '1rem' }}
-      >
-        Select a parachain to renew
-      </Typography>
-      <FormControl fullWidth sx={{ mt: '1rem' }}>
-        <InputLabel id='label-parachain-select'>Parachain</InputLabel>
-        <Select
-          sx={{ borderRadius: '1rem' }}
-          labelId='label-parachain-select'
-          label='Parachain'
-          value={parachains.findIndex((p) => p.core === core && p.paraId === paraId).toString()}
-          onChange={onParaChange}
-        >
-          {parachains.map(({ paraId, core }, index) => (
-            <MenuItem key={index} value={index.toString()}>
-              <ParaDisplay {...{ network, paraId, core }} />
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
+      <Select
+        label='Select a parachain to renew'
+        selectedValue={parachains.findIndex((p) => p.core === core && p.paraId === paraId)}
+        options={selectOptions}
+        searchable={true}
+        onChange={onParaChange}
+      />
     </Stack>
   );
 };
diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts
@@ -22,7 +22,7 @@ let theme = createTheme({
       main: '#13C296',
     },
     grey: {
-      100: '#eeeff4',
+      100: '#E5E7EB',
       200: '#8c8c8c',
     },
     text: {