fixes

src/components/Elements/Selectors/AssetSelector/index.module.scss

@@ -0,0 +1,9 @@
+.options {
+  display: flex;
+  justify-content: center;
+}
+
+.option {
+  min-width: 250px;
+  margin: 1em 5em;
+}

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

@@ -1,48 +1,42 @@
-import { useTheme } from '@mui/material';
+import { ToggleButton, ToggleButtonGroup, useTheme } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-
+import styles from './index.module.scss';
 import { AssetType } from '@/models';
 
 interface AssetSelectorProps {
   asset: AssetType;
   setAsset: (_: AssetType) => void;
   symbol: string;
-  showRegion?: boolean;
 }
 
 export default function AssetSelector({
   asset,
   setAsset,
   symbol,
-  showRegion = true,
 }: AssetSelectorProps) {
   const theme = useTheme();
   return (
     <FormControl>
-      <FormLabel sx={{ color: theme.palette.text.primary }}>Asset</FormLabel>
-      <RadioGroup
-        row
+      <ToggleButtonGroup
         value={asset}
-        onChange={(e) => setAsset(parseInt(e.target.value) as AssetType)}
-        sx={{ color: theme.palette.text.primary }}
+        exclusive // This ensures only one can be selected at a time
+        onChange={(e: any) => {
+          console.log(e.target.value);
+          setAsset(parseInt(e.target.value) as AssetType)
+        }}
+        className={styles.options}
       >
-        <FormControlLabel
-          value={AssetType.TOKEN}
-          control={<Radio />}
-          label={`${symbol} token`}
-        />
-        {showRegion && (
-          <FormControlLabel
-            value={AssetType.REGION}
-            control={<Radio />}
-            label='Region'
-          />
-        )}
-      </RadioGroup>
+        <ToggleButton className={styles.option}
+          sx={{ color: theme.palette.text.primary }}
+          value={AssetType.TOKEN}>
+          {symbol}
+        </ToggleButton>
+        <ToggleButton className={styles.option}
+          sx={{ color: theme.palette.text.primary }}
+          value={AssetType.REGION}>
+          Region
+        </ToggleButton>
+      </ToggleButtonGroup>
     </FormControl>
   );
 }

src/hooks/balance.tsx

@@ -1,42 +1,53 @@
 import { useInkathon } from '@scio-labs/use-inkathon';
 import { useCallback, useEffect, useState } from 'react';
 
-import { useCoretimeApi } from '@/contexts/apis';
+import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
 import { useToast } from '@/contexts/toast';
+import { ApiPromise } from '@polkadot/api';
+import { parseHNString } from '@/utils/functions';
 
 // React hook for fetching balance.
 const useBalance = () => {
   const {
-    state: { api, apiState, symbol },
+    state: { api: coretimeApi, apiState: coretimeApiState, symbol },
   } = useCoretimeApi();
+  const { state: { api: relayApi, apiState: relayApiState } } = useRelayApi();
+
   const { activeAccount } = useInkathon();
 
-  const [balance, setBalance] = useState(0);
+  const [coretimeBalance, setCoretimeBalance] = useState(0);
+  const [relayBalance, setRelayBalance] = useState(0);
 
   const { toastWarning } = useToast();
 
-  const fetchBalance = useCallback(async () => {
-    if (api && apiState == ApiState.READY && activeAccount) {
-      const accountData: any = (
-        await api.query.system.account(activeAccount.address)
-      ).toHuman();
-      const balance = parseFloat(accountData.data.free.toString());
-      setBalance(balance);
-
-      if (balance === 0) {
-        toastWarning(
-          `The selected account does not have any ${symbol} tokens on the Coretime chain.`
-        );
-      }
-    }
-  }, [api, apiState, activeAccount, toastWarning, symbol]);
+  const fetchBalance = useCallback(async (api: ApiPromise): Promise<number | undefined> => {
+    if (!activeAccount) return;
+
+    const accountData: any = (
+      await api.query.system.account(activeAccount.address)
+    ).toHuman();
+    const balance = parseHNString(accountData.data.free.toString());
+
+    return balance;
+  }, [activeAccount, toastWarning, symbol]);
 
   useEffect(() => {
-    fetchBalance();
-  }, [fetchBalance]);
+    if (coretimeApi && coretimeApiState == ApiState.READY) {
+      fetchBalance(coretimeApi).then((balance) => {
+        balance !== undefined && setCoretimeBalance(balance);
+        balance === 0 && toastWarning(`The selected account does not have any ${symbol} tokens on the Coretime chain.`)
+      });
+    }
+    if (relayApi && relayApiState == ApiState.READY) {
+      fetchBalance(relayApi).then((balance) => {
+        balance !== undefined && setRelayBalance(balance);
+      })
+    }
+
+  }, [fetchBalance, coretimeApi, coretimeApiState, relayApi, relayApiState]);
 
-  return balance;
+  return { coretimeBalance, relayBalance };
 };
 
 export default useBalance;

src/pages/purchase.tsx

@@ -17,6 +17,7 @@ import { ApiState } from '@/contexts/apis/types';
 import { useRegions } from '@/contexts/regions';
 import { useSaleInfo } from '@/contexts/sales';
 import { useToast } from '@/contexts/toast';
+import Balance from '@/components/Elements/Balance';
 
 const Purchase = () => {
   const theme = useTheme();
@@ -35,7 +36,7 @@ const Purchase = () => {
 
   const { fetchRegions } = useRegions();
 
-  const balance = useBalance();
+  const { coretimeBalance, relayBalance } = useBalance();
   const currentPrice = useSalePrice();
   const { currentPhase, progress, saleStartTimestamp, saleEndTimestamp } =
     useSalePhase();
@@ -83,12 +84,7 @@ const Purchase = () => {
             Buy a core straight from the Coretime chain
           </Typography>
         </Box>
-        <Typography variant='h6' sx={{ color: theme.palette.text.primary }}>
-          {`Your balance: ${formatBalance(
-            balance.toString(),
-            false
-          )} ${symbol}`}
-        </Typography>
+        <Balance coretimeBalance={coretimeBalance} relayBalance={relayBalance} symbol={symbol} />
       </Box >
       <Box>
         {loading ||

src/pages/transfer.tsx

@@ -275,13 +275,12 @@ const TransferPage = () => {
             setChain={setDestinationChain}
           />
         </Stack>
-        {originChain !== ChainType.NONE && (
+        {originChain !== ChainType.NONE && destinationChain !== ChainType.NONE && (
           <Stack margin='1em 0' direction='column' gap={1}>
             <AssetSelector
               symbol={symbol}
               asset={asset}
               setAsset={setAsset}
-              showRegion={originChain !== ChainType.RELAY}
             />
           </Stack>
         )}