Fetch chaindata from Talisman chaindata (#64)

* Fetch chaindata from Talisman chaindata * fix linter errors * add graphql * Native asset transfers * increase performance * add chain logo * revert accidental change * revert * add logo on tranfer page * v-center logo * fix ui bug * fix: don't query all chains * nit fixes * fixes & toast result * Update src/pages/transfer.tsx Co-authored-by: cute0laf <OliverLim818@gmail.com> * fix --------- Co-authored-by: cute0laf <oliverlim818@gmail.com>
TheDotflow · Sep 7, 2023 · 39fdd5c · 39fdd5c
1 parent dfcb1e1
commit 39fdd5c
Show file tree

Hide file tree

Showing 13 changed files with 197 additions and 73 deletions.
diff --git a/chaindata/index.ts b/chaindata/index.ts
@@ -1,39 +1,107 @@
-import { gql, request } from 'graphql-request';
+import { RELAY_CHAIN } from "@/consts";
+import { gql, request } from "graphql-request"
 
-const graphqlUrl = 'https://squid.subsquid.io/chaindata/v/v4/graphql';
+const graphqlUrl = "https://squid.subsquid.io/chaindata/v/v4/graphql"
 
-/// NOTE: this file is copied from the talisman chaindata.
+type Chain = {
+  id: string;
+  name: string;
+  paraId: number | null;
+  relay: {
+    id: string
+  } | null;
+  rpcs: Array<{ url: string }>,
+  logo: string
+}
 
-const chainsQuery = gql`
-  query chains {
-    chains(orderBy: sortIndex_ASC) {
+type Token = {
+  data: {
+    id: string;
+    logo: string;
+    assetId?: any;
+    onChainId?: any;
+    type: string;
+    symbol: string;
+    decimals: number;
+    isTestnet: boolean;
+    evmNetwork?: {
+      id: string;
+    };
+    themeColor: string;
+    coingeckoId: string;
+  }
+}
+
+const chainQuery = gql`
+query ChainByRelay($paraId: Int!, $relayId: String!) {
+  chains(
+    where: {
+      paraId_eq: $paraId
+      relay: { id_eq: $relayId }
+    }
+  ) {
+    id
+    name
+    paraId
+    relay {
       id
-      name
-      paraId
-      relay {
-        id
-      }
-      rpcs {
-        url
-      }
     }
+    rpcs {
+      url
+    }
+    logo
   }
+}
 `;
 
-const tokensQuery = gql`
-  query tokens {
-    tokens(orderBy: id_ASC) {
-      data
+const relayQuery = gql`
+query ChainByParaIdAndRelay($relayId: String!) {
+  chains(where: {paraId_isNull: true, id_eq: $relayId}) {
+    id
+    name
+    relay {
+      id
+    }
+    rpcs {
+      url
     }
+    logo
   }
+}
 `;
 
-export const getChains = async (): Promise<Array<any>> => {
-  const result: any = await request(graphqlUrl, chainsQuery);
-  return result.chains;
-};
+const tokensQuery = gql`
+query tokens {
+  tokens(orderBy: id_ASC) {
+    data
+  }
+}
+`;
+
+export class Chaindata {
+  private tokens: Array<Token> = [];
+
+  public async load(): Promise<void> {
+    const tokensResult: any = await request(graphqlUrl, tokensQuery);
+    this.tokens = tokensResult.tokens;
+  }
 
-export const getTokens = async (): Promise<Array<any>> => {
-  const result: any = await request(graphqlUrl, tokensQuery);
-  return result.tokens;
-};
+  public async getChain(chainId: number): Promise<Chain> {
+    if (chainId === 0) {
+      const result: any = await request(graphqlUrl, relayQuery, {
+        relayId: RELAY_CHAIN
+      });
+      return result.chains[0];
+    } else {
+      const result: any = await request(graphqlUrl, chainQuery, {
+        paraId: chainId,
+        relayId: RELAY_CHAIN
+      });
+      return result.chains[0];
+    }
+  }
+
+  public getTokens(): Array<Token> {
+    return this.tokens;
+  }
+}
diff --git a/chaindata/ss58registry.ts b/chaindata/ss58registry.ts
@@ -12,4 +12,4 @@ const ss58registry = async (chainName: string): Promise<number | null> => {
   return result.prefix;
 }
 
-export default ss58registry;
+export default ss58registry;
diff --git a/src/components/Modals/AddAddress/index.tsx b/src/components/Modals/AddAddress/index.tsx
@@ -8,10 +8,12 @@ import {
   FormControl,
   FormHelperText,
   FormLabel,
+  ListItemIcon,
   MenuItem,
   TextField,
 } from '@mui/material';
 import { contractTx, useInkathon } from '@scio-labs/use-inkathon';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
 import { isValidAddress } from '@/utils';
@@ -91,10 +93,9 @@ 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);
@@ -125,6 +126,9 @@ export const AddAddressModal = ({ open, onClose }: AddAddressModalProps) => {
               >
                 {Object.entries(chains).map(([id, chain], index) => (
                   <MenuItem value={id} key={index}>
+                    <ListItemIcon>
+                      <Image src={chain.logo} alt='logo' width={32} height={32} />
+                    </ListItemIcon>
                     {chain.name}
                   </MenuItem>
                 ))}

diff --git a/src/contracts/identity/context.tsx b/src/contracts/identity/context.tsx
@@ -7,7 +7,7 @@ import {
   useContract,
   useInkathon,
 } from '@scio-labs/use-inkathon';
-import { getChains } from 'chaindata';
+import { Chaindata } from 'chaindata';
 import ss58registry from 'chaindata/ss58registry';
 import {
   createContext,
@@ -17,7 +17,6 @@ import {
   useState,
 } from 'react';
 
-import { RELAY_CHAIN } from '@/consts';
 import { useToast } from '@/contexts/Toast';
 
 import { IdentityMetadata } from '.';
@@ -107,33 +106,27 @@ const IdentityContractProvider = ({ children }: Props) => {
       const rpcIndex = Math.min(Math.floor(Math.random() * count), count - 1);
       const rpc = rpcUrls[rpcIndex];
 
+      const chaindata = new Chaindata();
+
       try {
-        const chainData = (await getChains()).find((chain) =>
-          chain.paraId
-            ? chain.paraId === chainId && chain.relay.id === RELAY_CHAIN
-            : chainId === 0 && chain.id === RELAY_CHAIN
-        );
+        const chain = await chaindata.getChain(chainId);
 
-        if (!chainData) {
+        if (!chain) {
           return null;
         }
 
-        const ss58Result = await ss58registry(chainData.id);
+        const ss58Result = await ss58registry(chain.id);
 
-        const rpcCount = chainData.rpcs.length;
-        const rpcIndex = Math.min(
-          Math.floor(Math.random() * rpcCount),
-          rpcCount - 1
-        );
+        const rpcCount = chain.rpcs.length;
+        const rpcIndex = Math.min(Math.floor(Math.random() * rpcCount), rpcCount - 1);
 
-        const ss58Prefix = ss58Result
-          ? ss58Result
-          : await fetchSs58Prefix(chainData.rpcs[rpcIndex].url);
+        const ss58Prefix = ss58Result ? ss58Result : await fetchSs58Prefix(chain.rpcs[rpcIndex].url);
 
         return {
-          name: chainData.name,
+          name: chain.name,
           ss58Prefix: ss58Prefix,
           paraId: chainId,
+          logo: chain.logo
         };
       } catch (e) {
         toastError && toastError(`Failed to get chain info for ${rpc}`);
@@ -153,7 +146,7 @@ const IdentityContractProvider = ({ children }: Props) => {
       await api.disconnect();
 
       return ss58Prefix;
-    };
+    }
 
     setLoadingChains(true);
     try {

diff --git a/src/contracts/types.ts b/src/contracts/types.ts
@@ -6,6 +6,7 @@ export type ChainConsts = {
   name: string;
   ss58Prefix: number;
   paraId: number;
+  logo: string;
 }
 
 export type ChainInfo = ChainConsts & {

diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx
@@ -6,14 +6,18 @@ import {
   CircularProgress,
   FormControl,
   FormLabel,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
   MenuItem,
   Select,
   TextField,
 } from '@mui/material';
 import { ApiPromise, Keyring, WsProvider } from '@polkadot/api';
 import { useInkathon } from '@scio-labs/use-inkathon';
 import styles from '@styles/pages/transfer.module.scss';
-import { getChains, getTokens } from 'chaindata';
+import { Chaindata } from 'chaindata';
+import Image from 'next/image';
 import { useCallback, useEffect, useState } from 'react';
 import { AccountType } from 'types/types-arguments/identity';
 
@@ -39,7 +43,7 @@ const TransferPage = () => {
     loading: loadingIdentity,
   } = useIdentity();
   const { activeAccount, activeSigner } = useInkathon();
-  const { toastError } = useToast();
+  const { toastError, toastSuccess } = useToast();
   const { identities } = useAddressBook();
 
   const [sourceChainId, setSourceChainId] = useState<number>();
@@ -95,17 +99,15 @@ const TransferPage = () => {
         setAssets(_assets);
       }
     } else {
-      const chainData = (await getChains()).find(
-        (chain) => chain.paraId ?
-          chain.paraId === sourceChainId && chain.relay.id === RELAY_CHAIN
-          :
-          sourceChainId === 0 && chain.id === RELAY_CHAIN
-      );
+      const chaindata = new Chaindata();
+      const chain = await chaindata.getChain(sourceChainId);
+
+      await chaindata.load();
 
       const _assets = [];
-      if (chainData) {
-        const tokens = (await getTokens()).filter((token) => {
-          const prefix = `${chainData.id}-${token.data.type}`;
+      if (chain) {
+        const tokens = chaindata.getTokens().filter((token) => {
+          const prefix = `${chain.id}-${token.data.type}`;
           const isPartOfSourceChain = token.data.id.startsWith(prefix);
           return isPartOfSourceChain;
         });
@@ -258,6 +260,7 @@ const TransferPage = () => {
           amount * Math.pow(10, selectedAsset.decimals),
           activeSigner
         );
+        toastSuccess(`Transfer succeeded`);
       } catch (e: any) {
         toastError(`Transfer failed. Error: ${e.toString()}`);
       } finally {
@@ -316,6 +319,7 @@ const TransferPage = () => {
         },
         activeSigner
       );
+      toastSuccess(`Transfer succeded`);
     } catch (e: any) {
       toastError(`Transfer failed. Error: ${e.toString()}`);
     }
@@ -369,8 +373,19 @@ const TransferPage = () => {
             onChange={(e) => setSourceChainId(Number(e.target.value))}
           >
             {Object.entries(chains).map(([chainId, network], index) => (
-              <MenuItem value={chainId} key={index}>
-                {network.name}
+              <MenuItem
+                value={chainId}
+                key={index}
+                sx={{ display: 'flex', alignItems: 'center' }}
+              >
+                <ListItem >
+                  <ListItemIcon sx={{ mr: '8px' }}>
+                    <Image src={network.logo} alt='logo' width={32} height={32} />
+                  </ListItemIcon>
+                  <ListItemText>
+                    {network.name}
+                  </ListItemText>
+                </ListItem>
               </MenuItem>
             ))}
           </TextField>
@@ -387,7 +402,14 @@ const TransferPage = () => {
           >
             {Object.entries(chains).map(([chainId, network], index) => (
               <MenuItem value={chainId} key={index}>
-                {network.name}
+                <ListItem>
+                  <ListItemIcon sx={{ mr: '8px' }}>
+                    <Image src={network.logo} alt='logo' width={32} height={32} />
+                  </ListItemIcon>
+                  <ListItemText>
+                    {network.name}
+                  </ListItemText>
+                </ListItem>
               </MenuItem>
             ))}
           </TextField>

diff --git a/src/utils/nativeTransfer/assets.ts b/src/utils/nativeTransfer/assets.ts
@@ -29,7 +29,11 @@ class SubstrateAssets {
         const unsub = await transferCall.signAndSend(account, (result: any) => {
           if (result.status.isFinalized) {
             unsub();
-            resolve();
+            if (result.dispatchError !== undefined) {
+              reject(result.dispatchError)
+            } else {
+              resolve(result)
+            }
           }
         })
       } catch (e) {

diff --git a/src/utils/nativeTransfer/native.ts b/src/utils/nativeTransfer/native.ts
@@ -27,7 +27,11 @@ class SubstrateNative {
         const unsub = await transferCall.signAndSend(account, (result: any) => {
           if (result.status.isFinalized) {
             unsub();
-            resolve();
+            if (result.dispatchError !== undefined) {
+              reject(result.dispatchError)
+            } else {
+              resolve(result)
+            }
           }
         });
       } catch (e) {