Transfer page

.env.example

@@ -1,2 +1,3 @@
 CONTRACT_IDENTITY="AddressOfIdentityContract"
-CONTRACT_ADDRESS_BOOK="AddressOfAddressBookContract"
+CONTRACT_ADDRESS_BOOK="AddressOfAddressBookContract"
+RELAY_CHAIN="kusama_or_polkadot"

__tests__/crossChainRouter.test.ts

@@ -4,7 +4,6 @@ import { u8aToHex } from '@polkadot/util';
 
 import TransactionRouter from "../src/utils/transactionRouter";
 import { Fungible, Receiver, Sender } from "../src/utils/transactionRouter/types";
-
 import IdentityContractFactory from "../types/constructors/identity";
 import IdentityContract from "../types/contracts/identity";
 import { AccountType, ChainInfo } from "../types/types-arguments/identity";
@@ -144,7 +143,7 @@ describe("TransactionRouter Cross-chain reserve transfer", () => {
       {
         originApi: assetHubApi,
         destApi: trappistApi
-      }
+      },
     );
 
     const senderBalanceAfter = await getAssetBalance(assetHubApi, USDT_ASSET_ID, alice.address);

next.config.js

@@ -7,6 +7,7 @@ const nextConfig = {
   env: {
     CONTRACT_IDENTITY: process.env.CONTRACT_IDENTITY,
     CONTRACT_ADDRESS_BOOK: process.env.CONTRACT_ADDRESS_BOOK,
+    RELAY_CHAIN: process.env.RELAY_CHAIN,
   },
   async redirects() {
     return [

src/components/Cards/AddressCard/index.module.scss

@@ -13,7 +13,7 @@
   line-height: 1.6;
 }
 
-.networkName {
+.chainName {
   display: flex;
   align-items: center;
   justify-content: space-between;

src/components/Modals/AddAddress/index.tsx

@@ -91,9 +91,10 @@ export const AddAddressModal = ({ open, onClose }: AddAddressModalProps) => {
       onClose();
     } catch (e: any) {
       toastError(
-        `Failed to add address. Error: ${e.errorMessage === 'Error'
-          ? 'Please check your balance.'
-          : e.errorMessage
+        `Failed to add address. Error: ${
+          e.errorMessage === 'Error'
+            ? 'Please check your balance.'
+            : e.errorMessage
         }`
       );
       setWorking(false);
@@ -119,7 +120,7 @@ export const AddAddressModal = ({ open, onClose }: AddAddressModalProps) => {
                 select
                 sx={{ mt: '8px' }}
                 required
-                value={chainId || ""}
+                value={chainId === undefined ? '' : chainId}
                 onChange={(e) => setChainId(Number(e.target.value))}
               >
                 {Object.entries(chains).map(([id, chain], index) => (
@@ -150,7 +151,7 @@ export const AddAddressModal = ({ open, onClose }: AddAddressModalProps) => {
                   maxLength: 64,
                 }}
                 required
-                value={chainAddress || ""}
+                value={chainAddress || ''}
                 error={chainAddress === ''}
                 onChange={(e) => setChainAddress(e.target.value)}
               />

src/consts/index.ts

@@ -0,0 +1,37 @@
+export type RELAY_CHAIN_OPTION = 'polkadot' | 'kusama';
+const RELAY_CHAIN_ENDPOINTS = {
+  polkadot: "wss://polkadot.api.onfinality.io/public-ws",
+  kusama: "wss://kusama.api.onfinality.io/public-ws"
+};
+export const RELAY_CHAIN = (process.env.RELAY_CHAIN || 'polkadot') as RELAY_CHAIN_OPTION;
+export const RELAY_CHAIN_ENDPOINT = RELAY_CHAIN_ENDPOINTS[RELAY_CHAIN];
+export const ZERO = BigInt(0);
+
+// NOTE: we do not need to store the name of these chains, but they are convenient
+// for us while reading to code to see which chains support local XCM execution.
+export const chainsSupportingXcmExecute = [
+  {
+    relayChain: "kusama",
+    paraId: 0
+  },
+  {
+    relayChain: "kusama",
+    name: "crab",
+    paraId: 2105
+  },
+  {
+    relayChain: "kusama",
+    name: "quartz by unique",
+    paraId: 2095
+  },
+  {
+    relayChain: "polkadot",
+    name: "darwinia",
+    paraId: 2046
+  },
+  {
+    relayChain: "polkadot",
+    name: "unique network",
+    paraId: 2037
+  }
+];

src/contexts/RelayApi/index.tsx

@@ -0,0 +1,105 @@
+import { ApiPromise, WsProvider } from '@polkadot/api';
+import jsonrpc from '@polkadot/types/interfaces/jsonrpc';
+import { DefinitionRpcExt } from '@polkadot/types/types';
+import React, { useContext, useEffect, useReducer } from 'react';
+
+import { RELAY_CHAIN_ENDPOINT } from '@/consts';
+
+import { useToast } from '../Toast';
+
+///
+// Initial state for `useReducer`
+
+type State = {
+  socket: string;
+  jsonrpc: Record<string, Record<string, DefinitionRpcExt>>;
+  api: any;
+  apiError: any;
+  apiState: any;
+};
+
+const initialState: State = {
+  // These are the states
+  socket: RELAY_CHAIN_ENDPOINT,
+  jsonrpc: { ...jsonrpc },
+  api: null,
+  apiError: null,
+  apiState: null,
+};
+
+///
+// Reducer function for `useReducer`
+
+const reducer = (state: any, action: any) => {
+  switch (action.type) {
+    case 'CONNECT_INIT':
+      return { ...state, apiState: 'CONNECT_INIT' };
+    case 'CONNECT':
+      return { ...state, api: action.payload, apiState: 'CONNECTING' };
+    case 'CONNECT_SUCCESS':
+      return { ...state, apiState: 'READY' };
+    case 'CONNECT_ERROR':
+      return { ...state, apiState: 'ERROR', apiError: action.payload };
+    default:
+      throw new Error(`Unknown type: ${action.type}`);
+  }
+};
+
+///
+// Connecting to the Substrate node
+
+const connect = (state: any, dispatch: any) => {
+  const { apiState, socket, jsonrpc } = state;
+  // We only want this function to be performed once
+  if (apiState) return;
+
+  dispatch({ type: 'CONNECT_INIT' });
+
+  const provider = new WsProvider(socket);
+  const _api = new ApiPromise({ provider, rpc: jsonrpc });
+
+  // Set listeners for disconnection and reconnection event.
+  _api.on('connected', () => {
+    dispatch({ type: 'CONNECT', payload: _api });
+    // `ready` event is not emitted upon reconnection and is checked explicitly here.
+    _api.isReady.then(() => dispatch({ type: 'CONNECT_SUCCESS' }));
+  });
+  _api.on('ready', () => dispatch({ type: 'CONNECT_SUCCESS' }));
+  _api.on('error', (err) => dispatch({ type: 'CONNECT_ERROR', payload: err }));
+};
+
+const defaultValue = {
+  state: initialState,
+};
+
+const RelayApiContext = React.createContext(defaultValue);
+
+const RelayApiContextProvider = (props: any) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { toastError, toastSuccess } = useToast();
+
+  useEffect(() => {
+    state.apiError &&
+      toastError(
+        `Failed to connect to relay chain: error = ${state.apiError.toString()}`
+      );
+  }, [state.apiError]);
+
+  useEffect(() => {
+    state.apiState === 'READY' &&
+      toastSuccess('Successfully connected to relay chain');
+  }, [state.apiState]);
+
+  useEffect(() => {
+    connect(state, dispatch);
+  }, [process.env.RELAY_CHAIN_ENDPOINT]);
+
+  return (
+    <RelayApiContext.Provider value={{ state }}>
+      {props.children}
+    </RelayApiContext.Provider>
+  );
+};
+const useRelayApi = () => useContext(RelayApiContext);
+
+export { RelayApiContextProvider, useRelayApi };

src/contracts/identity/context.tsx

@@ -34,6 +34,7 @@ interface IdentityContract {
   contract: ContractPromise | undefined;
   fetchIdentityNo: () => Promise<void>;
   fetchAddresses: () => Promise<void>;
+  getAddresses: (_id: number) => Promise<Address[]>;
   loading: boolean;
 }
 
@@ -49,6 +50,9 @@ const defaultIdentity: IdentityContract = {
   fetchAddresses: async () => {
     /* */
   },
+  getAddresses: async (): Promise<Address[]> => {
+    return [];
+  },
   loading: true,
 };
 
@@ -165,14 +169,11 @@ const IdentityContractProvider = ({ children }: Props) => {
     setLoadingChains(false);
   }, [api, contract, toastError]);
 
-  const fetchAddresses = useCallback(async () => {
-    if (!api || !contract || identityNo === null) {
-      setAddresses([]);
-      return;
-    }
+  const getAddresses = async (no: number): Promise<Address[]> => {
+    if (!api || !contract) return [];
     try {
       const result = await contractQuery(api, '', contract, 'identity', {}, [
-        identityNo,
+        no,
       ]);
       const { output, isError, decodedOutput } = decodeOutput(
         result,
@@ -191,8 +192,21 @@ const IdentityContractProvider = ({ children }: Props) => {
           address,
         });
       }
-      setAddresses(_addresses);
+      return _addresses;
     } catch (e) {
+      return [];
+    }
+  };
+
+  const fetchAddresses = useCallback(async () => {
+    if (!api || !contract || identityNo === null) {
+      setAddresses([]);
+      return;
+    }
+    try {
+      const _addresses = await getAddresses(identityNo);
+      setAddresses(_addresses);
+    } catch {
       setAddresses([]);
     }
   }, [api, contract, identityNo]);
@@ -218,6 +232,7 @@ const IdentityContractProvider = ({ children }: Props) => {
         chains,
         fetchAddresses,
         fetchIdentityNo,
+        getAddresses,
         loading: loadingIdentityNo || loadingChains,
       }}
     >

src/pages/_app.tsx

@@ -14,6 +14,7 @@ import theme from '@/utils/muiTheme';
 
 import { Layout } from '@/components/Layout';
 
+import { RelayApiContextProvider } from '@/contexts/RelayApi';
 import { ToastProvider } from '@/contexts/Toast';
 import { IdentityContractProvider } from '@/contracts';
 import { AddressBookContractProvider } from '@/contracts/addressbook/context';
@@ -42,29 +43,29 @@ export default function MyApp(props: MyAppProps) {
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
         <ToastProvider>
-          <UseInkathonProvider
-            appName='DotFlow UI'
-            connectOnInit={false}
-            defaultChain={
-              {
+          <RelayApiContextProvider>
+            <UseInkathonProvider
+              appName='DotFlow UI'
+              connectOnInit={false}
+              defaultChain={{
                 network: 'rocococ-contracts',
                 name: 'Rococo contracts',
                 ss58Prefix: 42,
                 rpcUrls: ['wss://rococo-contracts-rpc.polkadot.io'],
                 explorerUrls: {},
                 testnet: true,
                 faucetUrls: [],
-              }
-            }
-          >
-            <IdentityContractProvider>
-              <AddressBookContractProvider>
-                <ConfirmProvider>
-                  {getLayout(<Component {...pageProps} />)}
-                </ConfirmProvider>
-              </AddressBookContractProvider>
-            </IdentityContractProvider>
-          </UseInkathonProvider>
+              }}
+            >
+              <IdentityContractProvider>
+                <AddressBookContractProvider>
+                  <ConfirmProvider>
+                    {getLayout(<Component {...pageProps} />)}
+                  </ConfirmProvider>
+                </AddressBookContractProvider>
+              </IdentityContractProvider>
+            </UseInkathonProvider>
+          </RelayApiContextProvider>
         </ToastProvider>
       </ThemeProvider>
     </CacheProvider>

src/pages/identity.tsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Typography,
 } from '@mui/material';
+import styles from '@styles/pages/identity.module.scss';
 import { useState } from 'react';
 
 import { CreateIdentity, RemoveIdentity } from '@/components/Buttons';
@@ -34,14 +35,7 @@ const IdentityPage = () => {
 
   return (
     <>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '32px',
-        }}
-      >
+      <Box className={styles.identityContainer}>
         <Typography variant='h4' fontWeight={700}>
           My Identity
         </Typography>