Merge pull request #10 from darwinia-network/migration_bug_fix

bugFix:account_format_in_different_networks
darwinia-network · Mar 6, 2023 · 86f8995 · 86f8995
2 parents 2f0e602 + 83577ec
commit 86f8995
Show file tree

Hide file tree

Showing 22 changed files with 315 additions and 91 deletions.
diff --git a/packages/app-config/src/chains/crab.ts b/packages/app-config/src/chains/crab.ts
@@ -14,9 +14,9 @@ export const crab: ChainConfig = {
     decimals: 18,
   },
   chainId: 44,
+  prefix: 42,
   substrate: {
     graphQlURL: "https://subql.darwinia.network/subql-apps-crab/",
     wssURL: "wss://crab-rpc.darwinia.network",
-    httpsURL: "https://crab-rpc.darwinia.network",
   },
 };
diff --git a/packages/app-config/src/chains/darwinia.ts b/packages/app-config/src/chains/darwinia.ts
@@ -14,9 +14,9 @@ export const darwinia: ChainConfig = {
     decimals: 18,
   },
   chainId: 46,
+  prefix: 18,
   substrate: {
     graphQlURL: "https://subql.darwinia.network/subql-apps-darwinia/",
     wssURL: "wss://rpc.darwinia.network",
-    httpsURL: "https://rpc.darwinia.network",
   },
 };
diff --git a/packages/app-config/src/chains/pangolin.ts b/packages/app-config/src/chains/pangolin.ts
@@ -14,9 +14,9 @@ export const pangolin: ChainConfig = {
     decimals: 9,
   },
   chainId: 43,
+  prefix: 42,
   substrate: {
-    graphQlURL: "https://api.subquery.network/sq/isunaslabs/pangolin2",
+    graphQlURL: "https://subql.darwinia.network/subql-apps-pangolin",
     wssURL: "wss://pangolin-rpc.darwinia.network/",
-    httpsURL: "https://pangolin-rpc.darwinia.network",
   },
 };
diff --git a/packages/app-config/src/chains/pangoro.ts b/packages/app-config/src/chains/pangoro.ts
@@ -15,9 +15,16 @@ export const pangoro: ChainConfig = {
     decimals: 9,
   },
   chainId: 45,
+  prefix: 18,
   substrate: {
-    graphQlURL: "https://api.subquery.network/sq/isunaslabs/pangoro-2",
-    wssURL: "ws://g1.dev.darwinia.network:20000",
-    httpsURL: "https://pangolin-rpc.darwinia.network",
+    graphQlURL: "https://subql.darwinia.network/subql-apps-pangoro",
+    wssURL: "wss://pangoro-rpc.darwinia.network",
   },
 };
+
+//graphQlURL: "https://subql.darwinia.network/subql-apps-pangoro",
+//wssURL: "wss://pangoro-rpc.darwinia.network",
+
+//dev
+//graphQlURL: "https://api.subquery.network/sq/isunaslabs/pangoro-2",
+//     wssURL: "ws://g1.dev.darwinia.network:20000",
diff --git a/packages/app-locale/src/localeKeys.ts b/packages/app-locale/src/localeKeys.ts
@@ -55,4 +55,5 @@ export const localeKeys = {
   evmAccountNotFree: "evmAccountNotFree",
   noTokensToMigrate: "noTokensToMigrate",
   installWalletReminder: "installWalletReminder",
+  pending: "pending",
 };
diff --git a/packages/app-locale/src/translations/enUS.ts b/packages/app-locale/src/translations/enUS.ts
@@ -55,6 +55,7 @@ const enUs = {
   [localeKeys.evmAccountNotFree]: "This EVM account is not free",
   [localeKeys.noTokensToMigrate]: `Selected account has no tokens to migrate`,
   [localeKeys.installWalletReminder]: `Connection failed. Please install {{walletName}} <a target='_blank' class="link link-primary" href={{downloadURL}}>here</a>.`,
+  [localeKeys.pending]: "Pending",
 };
 
 export default enUs;
diff --git a/packages/app-providers/src/hooks/useLedger.ts b/packages/app-providers/src/hooks/useLedger.ts
@@ -8,6 +8,7 @@ import {
   DepositEncoded,
   PalletVestingVestingInfo,
   DarwiniaAccountMigrationAssetAccount,
+  ChainConfig,
 } from "@darwinia/app-types";
 import BigNumber from "bignumber.js";
 import { ApiPromise } from "@polkadot/api";
@@ -19,11 +20,12 @@ import { FrameSystemAccountInfo } from "@darwinia/api-derive/accounts/types";
 interface Params {
   apiPromise: ApiPromise | undefined;
   selectedAccount: string | undefined;
+  selectedNetwork: ChainConfig | undefined;
 }
 
-const useLedger = ({ apiPromise, selectedAccount }: Params) => {
-  const [isLoadingLedger, setLoadingLedger] = useState<boolean>(true);
-  const [isLoadingMigratedLedger, setLoadingMigratedLedger] = useState<boolean>(true);
+const useLedger = ({ apiPromise, selectedAccount, selectedNetwork }: Params) => {
+  const [isLoadingLedger, setLoadingLedger] = useState<boolean>(false);
+  const [isLoadingMigratedLedger, setLoadingMigratedLedger] = useState<boolean>(false);
   const isInitialLoad = useRef<boolean>(true);
   const isInitialMigratedDataLoad = useRef<boolean>(true);
   /*staking asset distribution*/
@@ -35,28 +37,37 @@ const useLedger = ({ apiPromise, selectedAccount }: Params) => {
   useEffect(() => {
     if (selectedAccount) {
       setStakedAssetDistribution(undefined);
+      setMigratedAssetDistribution(undefined);
       isInitialLoad.current = true;
+      setLoadingMigratedLedger(true);
+      setLoadingLedger(true);
     }
-  }, [selectedAccount]);
+  }, [selectedAccount, selectedNetwork]);
 
   const getAccountAsset = useCallback(
     (accountId: string, parentBlockHash?: string) => {
       const isDataAtPoint = typeof parentBlockHash !== "undefined";
 
       const getStakingLedgerAndDeposits = async () => {
         if (!apiPromise || !currentBlock) {
+          setLoadingMigratedLedger(false);
+          setLoadingLedger(false);
           return;
         }
         const api = isDataAtPoint ? await apiPromise.at(parentBlockHash ?? "") : apiPromise;
 
         if (isInitialLoad.current && !isDataAtPoint) {
           isInitialLoad.current = false;
           setLoadingLedger(true);
+        } else {
+          setLoadingLedger(false);
         }
 
         if (isInitialMigratedDataLoad.current && isDataAtPoint) {
           isInitialMigratedDataLoad.current = false;
           setLoadingMigratedLedger(true);
+        } else {
+          setLoadingMigratedLedger(false);
         }
 
         let transferableKTON = BigNumber(0);
@@ -302,6 +313,7 @@ const useLedger = ({ apiPromise, selectedAccount }: Params) => {
           });
         }
         setLoadingMigratedLedger(false);
+        setLoadingLedger(false);
 
         // console.log(e);
         //ignore
@@ -315,7 +327,7 @@ const useLedger = ({ apiPromise, selectedAccount }: Params) => {
     if (selectedAccount) {
       getAccountAsset(selectedAccount);
     }
-  }, [apiPromise, selectedAccount, currentBlock]);
+  }, [apiPromise, selectedAccount]);
 
   const retrieveMigratedAsset = useCallback(
     (sourceAccountId: string, parentBlockHash: string) => {

diff --git a/packages/app-providers/src/storageProvider.tsx b/packages/app-providers/src/storageProvider.tsx
@@ -38,7 +38,8 @@ export const StorageProvider = ({ children }: PropsWithChildren) => {
     migratedAssetDistribution,
   } = useLedger({
     apiPromise,
-    selectedAccount: selectedAccount?.address,
+    selectedAccount: selectedAccount?.formattedAddress,
+    selectedNetwork,
   });
 
   const isKeyringInitialized = useRef<boolean>(false);

diff --git a/packages/app-providers/src/walletProvider.tsx b/packages/app-providers/src/walletProvider.tsx
@@ -22,6 +22,7 @@ import BigNumber from "bignumber.js";
 import { FrameSystemAccountInfo } from "@darwinia/api-derive/accounts/types";
 import { UnSubscription } from "./storageProvider";
 import { Option, Vec } from "@polkadot/types";
+import { convertToSS58 } from "@darwinia/app-utils";
 
 /*This is just a blueprint, no value will be stored in here*/
 const initialState: WalletCtx = {
@@ -37,6 +38,7 @@ const initialState: WalletCtx = {
   isLoadingTransaction: undefined,
   isAccountMigratedJustNow: undefined,
   walletConfig: undefined,
+  isLoadingBalance: undefined,
   changeSelectedNetwork: () => {
     // do nothing
   },
@@ -73,6 +75,7 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
   const [selectedWallet] = useState<SupportedWallet>("Polkadot JS Extension");
   const [walletConfig, setWalletConfig] = useState<WalletConfig>();
   const [isLoadingTransaction, setLoadingTransaction] = useState<boolean>(false);
+  const [isLoadingBalance, setLoadingBalance] = useState<boolean>(false);
   const [apiPromise, setApiPromise] = useState<ApiPromise>();
   const { getPrettyName } = useAccountPrettyName(apiPromise);
   const DARWINIA_APPS = "darwinia/apps";
@@ -177,8 +180,10 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     const parseAccounts = async () => {
       if (!apiPromise) {
+        setLoadingBalance(false);
         return;
       }
+      setLoadingBalance(true);
       const customAccounts: CustomInjectedAccountWithMeta[] = [];
 
       const accounts = injectedAccountsRef.current;
@@ -189,6 +194,7 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
           ...accounts[i],
           prettyName,
           balance: balance,
+          formattedAddress: convertToSS58(accounts[i].address, selectedNetwork?.prefix ?? 18),
         });
       }
 
@@ -202,18 +208,21 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
           type: "sr25519",
           address: forcedAccountAddress.current,
           meta: { source: "" },
+          formattedAddress: convertToSS58(forcedAccountAddress.current, selectedNetwork?.prefix ?? 18),
         });
       }
       if (customAccounts.length > 0) {
         setSelectedAccount(customAccounts[0]);
       }
       setInjectedAccounts(customAccounts);
+      setLoadingBalance(false);
     };
 
     parseAccounts().catch(() => {
+      setLoadingBalance(false);
       //ignore
     });
-  }, [injectedAccountsRef.current, apiPromise]);
+  }, [injectedAccountsRef.current, apiPromise, selectedNetwork]);
 
   /*Connect to MetaMask*/
   const connectWallet = useCallback(async () => {
@@ -223,6 +232,10 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
 
     try {
       if (!isWalletInstalled()) {
+        setWalletConnected(false);
+        setRequestingWalletConnection(false);
+        setLoadingTransaction(false);
+        setLoadingBalance(false);
         setError({
           code: 1,
           message: "Please Install Polkadot JS Extension",
@@ -239,6 +252,7 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
       api.on("connected", async () => {
         const readyAPI = await api.isReady;
         setApiPromise(readyAPI);
+        setRequestingWalletConnection(false);
       });
       api.on("disconnected", () => {
         // console.log("disconnected");
@@ -273,11 +287,12 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
         if (accounts.length > 0) {
           /* we default using the first account */
           setWalletConnected(true);
-          setRequestingWalletConnection(false);
         }
       }
     } catch (e) {
+      setWalletConnected(false);
       setRequestingWalletConnection(false);
+      setLoadingBalance(false);
       //ignore
     }
   }, [isWalletInstalled, selectedNetwork, isRequestingWalletConnection, apiPromise, getPrettyName]);
@@ -379,6 +394,7 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
         selectedNetwork,
         forceSetAccountAddress,
         onInitMigration,
+        isLoadingBalance,
       }}
     >
       {children}

diff --git a/packages/app-types/src/wallet.ts b/packages/app-types/src/wallet.ts
@@ -16,7 +16,7 @@ export interface Token {
 
 export interface Substrate {
   wssURL: string;
-  httpsURL: string;
+  httpsURL?: string;
   metadata?: string;
   graphQlURL: string;
 }
@@ -27,6 +27,7 @@ export interface ChainConfig {
   chainId: number;
   ring: Token;
   kton: Token;
+  prefix: number;
   substrate: Substrate;
 }
 
@@ -49,6 +50,7 @@ export interface WalletError {
 export interface CustomInjectedAccountWithMeta extends InjectedAccountWithMeta {
   prettyName: string | undefined;
   balance: AssetBalance;
+  formattedAddress: string;
 }
 
 export interface WalletCtx {
@@ -68,6 +70,7 @@ export interface WalletCtx {
   onInitMigration: (from: string, to: string, callback: (isSuccessful: boolean) => void) => void;
   isAccountMigratedJustNow: boolean | undefined;
   walletConfig: WalletConfig | undefined;
+  isLoadingBalance: boolean | undefined;
 }
 
 export interface SpVersionRuntimeVersion extends Struct {

diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@darwinia/app-config": "^1.0.0",
     "@darwinia/app-types": "^1.0.0",
+    "@polkadot/util-crypto": "^10.4.2",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "moment": "^2.29.4"

diff --git a/packages/app-utils/src/others.ts b/packages/app-utils/src/others.ts
@@ -2,6 +2,7 @@ import { Storage } from "@darwinia/app-types";
 import { STORAGE as APP_STORAGE } from "@darwinia/app-config";
 import BigNumber from "bignumber.js";
 import { ethers } from "ethers";
+import { encodeAddress } from "@polkadot/util-crypto";
 
 export const setStore = (key: keyof Storage, value: unknown) => {
   try {
@@ -97,3 +98,21 @@ export const formatToEther = (valueInWei: string): string => {
 export const formatToWei = (valueInEther: string) => {
   return ethers.utils.parseEther(valueInEther);
 };
+
+export function convertToSS58(text: string, prefix: number, isShort = false): string {
+  if (!text) {
+    return "";
+  }
+
+  try {
+    let address = encodeAddress(text, prefix);
+
+    if (isShort) {
+      address = toShortAddress(address);
+    }
+
+    return address;
+  } catch (error) {
+    return "";
+  }
+}
diff --git a/packages/app-utils/src/time.ts b/packages/app-utils/src/time.ts
@@ -12,11 +12,11 @@ export const formatDate = (timestamp: number, outputFormat = "YYYY-MM-DD"): stri
   return moment(timestamp).format(outputFormat);
 };
 
-export const toTimeAgo = (time: string | number, format = "YYYY-MM-DDTHH:mm:ss.SSS") => {
+export const toTimeAgo = (time: string | number, isUTC = false, format = "YYYY-MM-DDTHH:mm:ss.SSS") => {
   if (typeof time === "number") {
-    return moment(time).fromNow();
+    return isUTC ? moment.utc(time).fromNow() : moment(time).fromNow();
   }
-  return moment(time, format).fromNow();
+  return isUTC ? moment.utc(time, format).utc().fromNow() : moment(time, format).utc().fromNow();
 };
 
 export const formatTimeInUTC = (time: string, inputFormat = "YYYY-MM-DDTHH:mm:ss.SSS") => {

diff --git a/packages/app/src/Root.tsx b/packages/app/src/Root.tsx
@@ -1,7 +1,7 @@
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useCallback, useEffect, useState } from "react";
 import { notification, Spinner } from "@darwinia/ui";
-import { useWallet } from "@darwinia/app-providers";
+import { useStorage, useWallet } from "@darwinia/app-providers";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import { getStore, setStore } from "@darwinia/app-utils";
@@ -16,15 +16,30 @@ const Root = () => {
     selectedNetwork,
     isLoadingTransaction,
     walletConfig,
+    isLoadingBalance,
   } = useWallet();
+  const { isLoadingLedger, isLoadingMigratedLedger } = useStorage();
   const [loading, setLoading] = useState<boolean | undefined>(false);
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useAppTranslation();
 
   useEffect(() => {
-    setLoading(isRequestingWalletConnection || isLoadingTransaction);
-  }, [isRequestingWalletConnection, isWalletConnected, isLoadingTransaction]);
+    setLoading(
+      isRequestingWalletConnection ||
+        isLoadingTransaction ||
+        isLoadingLedger ||
+        isLoadingMigratedLedger ||
+        isLoadingBalance
+    );
+  }, [
+    isRequestingWalletConnection,
+    isWalletConnected,
+    isLoadingTransaction,
+    isLoadingLedger,
+    isLoadingMigratedLedger,
+    isLoadingBalance,
+  ]);
 
   const redirect = useCallback(() => {
     setStore("isConnectedToWallet", true);

diff --git a/packages/app/src/assets/images/pending.svg b/packages/app/src/assets/images/pending.svg