Fixes and refactors (#209)

* fix balance subscriptions * reset socket when disconnected * refactor regionx enabled * fix api connection * fix api status * fix wallet disconnect
RegionX-Labs · Aug 9, 2024 · cce8d98 · cce8d98
1 parent 33c2138
commit cce8d98
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 49 deletions.
diff --git a/src/components/Elements/Balance/index.tsx b/src/components/Elements/Balance/index.tsx
@@ -1,13 +1,11 @@
 import { Box, Typography, useTheme } from '@mui/material';
 
-import { getBalanceString } from '@/utils/functions';
+import { enableRegionX, getBalanceString } from '@/utils/functions';
 
-import { EXPERIMENTAL } from '@/consts';
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
 import { useBalances } from '@/contexts/balance';
 import { useNetwork } from '@/contexts/network';
-import { NetworkType } from '@/models';
 
 import styles from './index.module.scss';
 
@@ -34,8 +32,6 @@ export const Balance = ({
   const { state: coretimeState } = useCoretimeApi();
   const { state: regionxState } = useRegionXApi();
 
-  const enableRegionx = network === NetworkType.ROCOCO || EXPERIMENTAL;
-
   const items = [
     ...(rcBalance
       ? [
@@ -57,7 +53,7 @@ export const Balance = ({
           },
         ]
       : []),
-    ...(enableRegionx
+    ...(enableRegionX(network)
       ? [
           // Relay asset:
           ...(rxRcCurrencyBalance

diff --git a/src/components/Elements/Selectors/ChainSelector/index.tsx b/src/components/Elements/Selectors/ChainSelector/index.tsx
@@ -19,6 +19,8 @@ interface ChainSelectorProps {
   setChain: (_: ChainType) => void;
 }
 
+import { enableRegionX } from '@/utils/functions';
+
 import {
   Kusama,
   KusamaCoretime,
@@ -28,7 +30,6 @@ import {
   Westend,
   WestendCoretime,
 } from '@/assets/networks';
-import { EXPERIMENTAL } from '@/consts';
 import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
 
@@ -55,7 +56,6 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
     state: { name: relayChain, apiState: relayState },
   } = useRelayApi();
 
-  const enableRegionX = network === NetworkType.ROCOCO || EXPERIMENTAL;
   const {
     state: { name: regionXChain, apiState: regionXState },
   } = useRegionXApi();
@@ -73,7 +73,7 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
       value: ChainType.CORETIME,
       loading: relayState !== ApiState.READY,
     },
-    ...(enableRegionX
+    ...(enableRegionX(network)
       ? [
           {
             icon: RegionX,

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -12,12 +12,13 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { enableRegionX } from '@/utils/functions';
+
 import Logo from '@/assets/logo.png';
-import { EXPERIMENTAL } from '@/consts';
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
+import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
 import { RenewIcon } from '@/icons';
-import { NetworkType } from '@/models';
 
 import styles from './index.module.scss';
 import { StatusIndicator } from '../Elements';
@@ -79,17 +80,15 @@ export const Sidebar = () => {
 
   const { network } = useNetwork();
   const {
-    state: { apiState: relayApiState },
+    state: { api: relayApi, apiState: relayApiState },
   } = useRelayApi();
   const {
-    state: { apiState: coretimeApiState },
+    state: { api: coretimeApi, apiState: coretimeApiState },
   } = useCoretimeApi();
   const {
-    state: { apiState: regionxApiState },
+    state: { api: regionXApi, apiState: regionxApiState },
   } = useRegionXApi();
 
-  const enableRegionX = network === NetworkType.ROCOCO || EXPERIMENTAL;
-
   const menu = {
     general: [
       {
@@ -143,18 +142,23 @@ export const Sidebar = () => {
       {
         label: 'Explore the Market',
         route: '/marketplace',
-        enabled: enableRegionX,
+        enabled: enableRegionX(network),
         icon: <ExploreIcon />,
       },
       {
         label: 'Orders',
         route: '/orders',
-        enabled: enableRegionX,
+        enabled: enableRegionX(network),
         icon: <ListOutlinedIcon />,
       },
     ],
   };
 
+  const getApiState = (api: any, state: ApiState) => {
+    if (!api) return ApiState.DISCONNECTED;
+    return state;
+  };
+
   return (
     <div className={styles.sidebar}>
       <Box
@@ -203,10 +207,19 @@ export const Sidebar = () => {
           ))}
         </Stack>
         <div className={styles.statusContainer}>
-          <StatusIndicator state={relayApiState} label='Relay chain' />
-          <StatusIndicator state={coretimeApiState} label='Coretime chain' />
-          {enableRegionX && (
-            <StatusIndicator state={regionxApiState} label='RegionX chain' />
+          <StatusIndicator
+            state={getApiState(relayApi, relayApiState)}
+            label='Relay chain'
+          />
+          <StatusIndicator
+            state={getApiState(coretimeApi, coretimeApiState)}
+            label='Coretime chain'
+          />
+          {enableRegionX(network) && (
+            <StatusIndicator
+              state={getApiState(regionXApi, regionxApiState)}
+              label='RegionX chain'
+            />
           )}
         </div>
       </Box>

diff --git a/src/contexts/account/index.tsx b/src/contexts/account/index.tsx
@@ -110,16 +110,20 @@ const AccountProvider = ({ children }: Props) => {
     asyncLoadAccounts();
   };
 
-  const disconnectWallet = () => dispatch({ type: 'DISCONNECT' });
+  const disconnectWallet = () => {
+    localStorage.removeItem(LOCAL_STORAGE_ACCOUNTS);
+    localStorage.removeItem(LOCAL_STORAGE_ACTIVE_ACCOUNT);
+    dispatch({ type: 'DISCONNECT' });
+  };
 
   useEffect(() => {
     const accounts = state.accounts;
 
     if (accounts.length) {
       const activeAccount = localStorage.getItem(LOCAL_STORAGE_ACTIVE_ACCOUNT);
       const account: InjectedAccountWithMeta = activeAccount
-        ? (accounts.find((acc: any) => acc.address == activeAccount) ??
-          accounts[0])
+        ? accounts.find((acc: any) => acc.address == activeAccount) ??
+          accounts[0]
         : accounts[0];
 
       setActiveAccount(account);

diff --git a/src/contexts/apis/CoretimeApi/index.tsx b/src/contexts/apis/CoretimeApi/index.tsx
@@ -77,7 +77,7 @@ const CoretimeApiContextProvider = (props: any) => {
       }
       connect(state, url, dispatch, true, types);
     }
-  }, [network, state]);
+  }, [network, state.socket]);
 
   return (
     <CoretimeApiContext.Provider

diff --git a/src/contexts/apis/RegionXApi/index.tsx b/src/contexts/apis/RegionXApi/index.tsx
@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useReducer } from 'react';
 
-import { EXPERIMENTAL, WS_REGIONX_COCOS_CHAIN } from '@/consts';
+import { enableRegionX } from '@/utils/functions';
+
+import { WS_REGIONX_COCOS_CHAIN } from '@/consts';
 import { useNetwork } from '@/contexts/network';
 import { useToast } from '@/contexts/toast';
 import { NetworkType } from '@/models';
@@ -109,7 +111,7 @@ const RegionXApiContextProvider = (props: any) => {
   };
 
   useEffect(() => {
-    if (network !== NetworkType.ROCOCO && !EXPERIMENTAL) {
+    if (!enableRegionX(network)) {
       return;
     }
     const url = getUrl(network);
@@ -125,7 +127,7 @@ const RegionXApiContextProvider = (props: any) => {
       }
       connect(state, url, dispatch, true, types, customRpc);
     }
-  }, [network, state]);
+  }, [network, state.socket]);
 
   useEffect(() => {
     dispatch({ type: 'DISCONNECTED' });

diff --git a/src/contexts/apis/RelayApi/index.tsx b/src/contexts/apis/RelayApi/index.tsx
@@ -62,7 +62,7 @@ const RelayApiContextProvider = (props: any) => {
       }
       connect(state, url, dispatch, true);
     }
-  }, [network, state]);
+  }, [network, state.socket]);
 
   useEffect(() => {
     const { api, apiState } = state;

diff --git a/src/contexts/apis/common.ts b/src/contexts/apis/common.ts
@@ -66,6 +66,7 @@ export const reducer = (state: any, action: any) => {
         ...state,
         api: null,
         apiState: ApiState.DISCONNECTED,
+        socket: '',
         symbol: '',
         name: '',
         height: 0,

diff --git a/src/contexts/balance/index.tsx b/src/contexts/balance/index.tsx
@@ -1,7 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-import { EXPERIMENTAL } from '@/consts';
-import { NetworkType } from '@/models';
+import { enableRegionX } from '@/utils/functions';
 
 import { useAccounts } from '../account';
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '../apis';
@@ -47,8 +46,6 @@ const BalanceProvider = ({ children }: Props) => {
     state: { api: regionxApi, apiState: regionxApiState },
   } = useRegionXApi();
 
-  const enableRegionx = network === NetworkType.ROCOCO || EXPERIMENTAL;
-
   const [coretimeBalance, setCoretimeBalance] = useState(0);
   const [relayBalance, setRelayBalance] = useState(0);
   const [rxNativeBalance, setRxNativeBalance] = useState(0);
@@ -95,7 +92,7 @@ const BalanceProvider = ({ children }: Props) => {
       );
       let unsubscribeRegionx: any = null;
 
-      if (enableRegionx) {
+      if (enableRegionX(network)) {
         if (!regionxApi || regionxApiState !== ApiState.READY) return;
         unsubscribeRegionx = await regionxApi.queryMulti(
           [
@@ -115,8 +112,8 @@ const BalanceProvider = ({ children }: Props) => {
       }
 
       return () => {
-        unsubscribeCoretime();
-        unsubscribeRelay();
+        if (unsubscribeCoretime) unsubscribeCoretime();
+        if (unsubscribeRelay) unsubscribeRelay();
         if (unsubscribeRegionx) unsubscribeRegionx();
       };
     };
@@ -129,7 +126,7 @@ const BalanceProvider = ({ children }: Props) => {
     relayApiState,
     regionxApi,
     regionxApiState,
-    enableRegionx,
+    network,
   ]);
 
   return (

diff --git a/src/contexts/regions/index.tsx b/src/contexts/regions/index.tsx
@@ -8,7 +8,8 @@ import React, {
   useState,
 } from 'react';
 
-import { EXPERIMENTAL } from '@/consts';
+import { enableRegionX } from '@/utils/functions';
+
 import {
   ContextStatus,
   ISMPRecordStatus,
@@ -118,7 +119,7 @@ const RegionDataProvider = ({ children }: Props) => {
 
     const ctRegions = await collectCoretimeRegions(tasks);
     const rxRegions =
-      EXPERIMENTAL || network === NetworkType.ROCOCO
+      enableRegionX(network)
         ? await collectRegionXRegions(tasks)
         : [];
 
@@ -176,7 +177,7 @@ const RegionDataProvider = ({ children }: Props) => {
     // Only user owned non-expired regions.
     if (
       encodeAddress(region.getOwner(), 42) !==
-        encodeAddress(activeAccount.address, 42) ||
+      encodeAddress(activeAccount.address, 42) ||
       region.consumed({ timeslicePeriod, relayBlockNumber }) > 1
     )
       return null;

diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx
@@ -5,6 +5,7 @@ import { Region } from 'coretime-utils';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
+import { enableRegionX } from '@/utils/functions';
 import theme from '@/utils/muiTheme';
 import {
   coretimeFromRegionXTransfer,
@@ -31,7 +32,6 @@ import {
 } from '@/components';
 import AssetSelector from '@/components/Elements/Selectors/AssetSelector';
 
-import { EXPERIMENTAL } from '@/consts';
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { useRegionXApi } from '@/contexts/apis/RegionXApi';
@@ -44,7 +44,6 @@ import {
   ChainType,
   CORETIME_DECIMALS,
   ISMPRecordStatus,
-  NetworkType,
   RegionLocation,
   RegionMetadata,
 } from '@/models';
@@ -86,8 +85,6 @@ const TransferPage = () => {
   const [asset, setAsset] = useState<AssetType>(AssetType.TOKEN);
   const [transferAmount, setTransferAmount] = useState<number | undefined>();
 
-  const enableRegionX = network === NetworkType.ROCOCO || EXPERIMENTAL;
-
   const defaultHandler = {
     ready: () => toastInfo('Transaction was initiated'),
     inBlock: () => toastInfo('In Block'),
@@ -155,7 +152,7 @@ const TransferPage = () => {
       api = relayApi;
     } else {
       // RegionX
-      if (!enableRegionX) {
+      if (!enableRegionX(network)) {
         toastWarning('Currently not supported');
         return;
       }
@@ -239,7 +236,7 @@ const TransferPage = () => {
       originChain === ChainType.CORETIME &&
       destinationChain === ChainType.REGIONX
     ) {
-      if (!enableRegionX) toastWarning('Currently not supported');
+      if (!enableRegionX(network)) toastWarning('Currently not supported');
       else {
         const receiverKeypair = new Keyring();
         receiverKeypair.addFromAddress(
@@ -263,7 +260,7 @@ const TransferPage = () => {
       originChain === ChainType.REGIONX &&
       destinationChain === ChainType.CORETIME
     ) {
-      if (!enableRegionX || !regionXApi || regionxApiState !== ApiState.READY) {
+      if (!enableRegionX(network) || !regionXApi || regionxApiState !== ApiState.READY) {
         toastWarning('Currently not supported');
         return;
       }

diff --git a/src/utils/functions/api.ts b/src/utils/functions/api.ts
@@ -1,7 +1,8 @@
 import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult, Signer } from '@polkadot/types/types';
 
-import { TxStatusHandlers } from '@/models';
+import { EXPERIMENTAL } from '@/consts';
+import { NetworkType, TxStatusHandlers } from '@/models';
 
 export const sendTx = async (
   tx: SubmittableExtrinsic<'promise', ISubmittableResult>,
@@ -35,3 +36,7 @@ export const sendTx = async (
     handlers.finally && handlers.finally();
   }
 };
+
+export const enableRegionX = (network: NetworkType): boolean => {
+  return network === NetworkType.ROCOCO || EXPERIMENTAL;
+};