RegionX-Labs · TopETH · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/package.json b/package.json
@@ -19,12 +19,13 @@
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "^5.15.14",
     "@mui/x-date-pickers": "^6.19.5",
-    "@polkadot/api": "^10.12.6",
-    "@polkadot/api-contract": "^10.13.1",
-    "@polkadot/extension-inject": "^0.46.4",
-    "@polkadot/types": "^10.12.6",
-    "@polkadot/util": "^12.3.1",
-    "@scio-labs/use-inkathon": "^0.0.1-alpha.44",
+    "@polkadot/api": "latest",
+    "@polkadot/api-contract": "latest",
+    "@polkadot/extension-dapp": "latest",
+    "@polkadot/extension-inject": "latest",
+    "@polkadot/types": "latest",
+    "@polkadot/ui-keyring": "latest",
+    "@polkadot/util": "latest",
     "@types/humanize-duration": "^3.27.3",
     "clsx": "^1.1.1",
     "coretime-utils": "^0.2.8",

diff --git a/src/components/Elements/NetworkSelect/index.tsx b/src/components/Elements/NetworkSelect/index.tsx
@@ -1,6 +1,16 @@
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography,
+} from '@mui/material';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 
+import KusamaIcon from '@/assets/networks/relay/kusama.png';
+import RococoIcon from '@/assets/networks/relay/rococo.png';
 import { useNetwork } from '@/contexts/network';
 import { NetworkType } from '@/models';
 
@@ -19,6 +29,19 @@ const RelaySelect = () => {
     );
   };
 
+  const menuItems = [
+    {
+      value: NetworkType.ROCOCO,
+      label: 'Rococo',
+      icon: RococoIcon,
+    },
+    {
+      value: NetworkType.KUSAMA,
+      label: 'Kusama',
+      icon: KusamaIcon,
+    },
+  ];
+
   return network !== NetworkType.NONE ? (
     <FormControl sx={{ m: 2, minWidth: 150 }} fullWidth>
       <InputLabel>Network</InputLabel>
@@ -28,8 +51,24 @@ const RelaySelect = () => {
         label='Relay chain'
         onChange={handleChange}
       >
-        <MenuItem value={NetworkType.ROCOCO}>Rococo</MenuItem>
-        <MenuItem value={NetworkType.KUSAMA}>Kusama</MenuItem>
+        {menuItems.map(({ value, label, icon }, index) => (
+          <MenuItem value={value} key={index}>
+            <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+              <Image
+                src={icon}
+                alt={label.toLowerCase()}
+                style={{
+                  width: '1.5rem',
+                  height: '1.5rem',
+                  borderRadius: '100%',
+                }}
+              />
+              <Typography sx={{ lineHeight: 1.5, fontSize: '1rem' }}>
+                {label}
+              </Typography>
+            </Box>
+          </MenuItem>
+        ))}
       </Select>
     </FormControl>
   ) : (

diff --git a/src/components/Elements/Selectors/AssetSelector/index.module.scss b/src/components/Elements/Selectors/AssetSelector/index.module.scss
@@ -6,4 +6,4 @@
 .option {
   min-width: 250px;
   margin: 1em 5em;
-}
+}
diff --git a/src/components/Elements/Selectors/AssetSelector/index.tsx b/src/components/Elements/Selectors/AssetSelector/index.tsx
@@ -17,6 +17,17 @@ export default function AssetSelector({
   symbol,
 }: AssetSelectorProps) {
   const theme = useTheme();
+  const items = [
+    {
+      value: AssetType.TOKEN,
+      label: symbol,
+    },
+    {
+      value: AssetType.REGION,
+      label: 'Region',
+    },
+  ];
+
   return (
     <FormControl>
       <ToggleButtonGroup
@@ -25,20 +36,19 @@ export default function AssetSelector({
         onChange={(e: any) => setAsset(parseInt(e.target.value) as AssetType)}
         className={styles.options}
       >
-        <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>
+        {items.map(({ label, value }, index) => (
+          <ToggleButton
+            className={styles.option}
+            sx={{
+              color: theme.palette.text.primary,
+              border: `1px solid ${theme.palette.grey['200']}`,
+            }}
+            value={value}
+            key={index}
+          >
+            {label}
+          </ToggleButton>
+        ))}
       </ToggleButtonGroup>
     </FormControl>
   );

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -7,24 +7,27 @@ import {
   ListItemButton,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import React, { useState } from 'react';
 
+import { KeyringState, useAccounts } from '@/contexts/account';
+
 import styles from './index.module.scss';
-import { ActionButton } from '../Elements';
-import { WalletModal } from '../Modals/WalletConnect';
+import { ProgressButton } from '../Elements';
 
 export const Header = () => {
   const theme = useTheme();
+  const {
+    state: { accounts, activeAccount, status },
+    setActiveAccount,
+    disconnectWallet,
+    connectWallet,
+  } = useAccounts();
 
-  const { activeAccount, disconnect, accounts, setActiveAccount } =
-    useInkathon();
   const [accountsOpen, openAccounts] = useState(false);
-  const [walletModalOpen, openWalletModal] = useState(false);
 
   const onDisconnect = () => {
     openAccounts(false);
-    disconnect && disconnect();
+    disconnectWallet();
   };
 
   return (
@@ -49,7 +52,7 @@ export const Header = () => {
                     borderRadius: 4,
                   }}
                 >
-                  {activeAccount.name}
+                  {`${activeAccount.meta.name}(${activeAccount.meta.source})`}
                   <ExpandMore />
                 </ListItemButton>
               )}
@@ -70,15 +73,15 @@ export const Header = () => {
                         <ListItemButton
                           key={index}
                           onClick={() => {
-                            setActiveAccount && setActiveAccount(account);
+                            setActiveAccount(account);
                             openAccounts(false);
                           }}
                           sx={{
                             borderRadius: '0.5rem',
                             background: theme.palette.grey['100'],
                           }}
                         >
-                          {account.name}
+                          {`${account.meta.name}(${account.meta.source})`}
                         </ListItemButton>
                       )
                   )}
@@ -96,17 +99,14 @@ export const Header = () => {
               </Collapse>
             </List>
           ) : (
-            <ActionButton
-              onClick={() => openWalletModal(true)}
+            <ProgressButton
+              onClick={() => connectWallet()}
               label='Connect Wallet'
+              loading={status === KeyringState.LOADING}
             />
           )}
         </Box>
       </Box>
-      <WalletModal
-        open={walletModalOpen}
-        onClose={() => openWalletModal(false)}
-      />
     </>
   );
 };
diff --git a/src/components/Modals/Interlace/index.tsx b/src/components/Modals/Interlace/index.tsx
@@ -11,12 +11,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { CoreMask } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -36,7 +36,9 @@ export const InterlaceModal = ({
   regionMetadata,
 }: InterlaceModalProps) => {
   const theme = useTheme();
-  const { activeAccount, activeSigner } = useInkathon();
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
 
   const {
     state: { api },
@@ -94,7 +96,7 @@ export const InterlaceModal = ({
   };
 
   useEffect(() => {
-    setPosition(oneStart);
+    open && setPosition(oneStart);
   }, [open, oneStart]);
 
   return (

diff --git a/src/components/Modals/Partition/index.tsx b/src/components/Modals/Partition/index.tsx
@@ -11,11 +11,11 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { useEffect, useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useCommon } from '@/contexts/common';
 import { useRegions } from '@/contexts/regions';
@@ -59,7 +59,9 @@ export const PartitionModal = ({
     },
   ];
 
-  const { activeSigner, activeAccount } = useInkathon();
+  const {
+    state: { activeSigner, activeAccount },
+  } = useAccounts();
 
   const theme = useTheme();
   const {

diff --git a/src/components/Modals/Purchase/index.tsx b/src/components/Modals/Purchase/index.tsx
@@ -6,11 +6,11 @@ import {
   DialogContent,
   Stack,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { useState } from 'react';
 
 import { ListingCard } from '@/components/Elements/ListingCard';
 
+import { useAccounts } from '@/contexts/account';
 import { useToast } from '@/contexts/toast';
 import { Listing } from '@/models';
 
@@ -25,22 +25,23 @@ export const PurchaseModal = ({
   onClose,
   listing,
 }: PurchaseModalProps) => {
-  const { activeAccount, api } = useInkathon();
+  const {
+    state: { activeAccount },
+  } = useAccounts();
 
   const { toastError, toastSuccess } = useToast();
 
   const [working, setWorking] = useState(false);
 
   const purchaseRegion = async () => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 
     try {
       setWorking(true);
 
-      // TODO
-
+      // TODO:
       toastSuccess(`Successfully purchased region from sale.`);
       onClose();
       setWorking(false);

diff --git a/src/components/Modals/Sell/index.tsx b/src/components/Modals/Sell/index.tsx
@@ -8,13 +8,13 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { AmountInput, RegionCard } from '@/components/Elements';
 import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -31,7 +31,9 @@ export const SellModal = ({
   onClose,
   regionMetadata,
 }: SellModalProps) => {
-  const { activeAccount, api } = useInkathon();
+  const {
+    state: { activeAccount },
+  } = useAccounts();
   const {
     state: { symbol },
   } = useCoretimeApi();
@@ -55,14 +57,14 @@ export const SellModal = ({
   };
 
   const approveXcRegion = async (_region: Region) => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 
     try {
       setWorking(true);
 
-      // TODO
+      // TODO:
 
       toastSuccess(`Successfully approved region to the market.`);
       setWorking(false);
@@ -77,7 +79,7 @@ export const SellModal = ({
   };
 
   const listRegion = async (_region: Region) => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }