feat(refactor): Network as arg for vault & ledger account API (#2083)

package.json

@@ -33,7 +33,7 @@
     "@substrate/connect": "0.7.35",
     "@w3ux/extension-assets": "0.2.6",
     "@w3ux/hooks": "^0.0.3",
-    "@w3ux/react-connect-kit": "^0.1.12",
+    "@w3ux/react-connect-kit": "^0.1.15",
     "@w3ux/react-odometer": "^0.0.3",
     "@w3ux/react-polkicon": "^0.0.2",
     "@w3ux/utils": "^0.0.2",

src/Providers.tsx

@@ -63,8 +63,8 @@ export const Providers = () => {
       ExtensionAccountsProvider,
       { dappName: DappName, network, activeAccount, setActiveAccount },
     ],
-    [VaultAccountsProvider, { network }],
-    [LedgerAccountsProvider, { network }],
+    VaultAccountsProvider,
+    LedgerAccountsProvider,
     ExternalAccountsProvider,
     OtherAccountsProvider,
     ImportedAccountsProvider,

src/contexts/Connect/OtherAccounts/index.tsx

@@ -195,7 +195,7 @@ export const OtherAccountsProvider = ({
       // Finally, fetch any read-only accounts that have been added by `system` or `user`.
       importLocalOtherAccounts(getLocalExternalAccounts);
     }
-  }, [extensionAccountsSynced]);
+  }, [network, extensionAccountsSynced]);
 
   // Account fetching complete, mark accounts as initialised. Does not include read only accounts.
   useEffectIgnoreInitial(() => {

src/library/Hardware/HardwareAddress/index.tsx

@@ -16,6 +16,7 @@ import { ButtonText } from '../../../kits/Buttons/ButtonText';
 import type { HardwareAddressProps } from './types';
 
 export const HardwareAddress = ({
+  network,
   address,
   index,
   initial,
@@ -59,7 +60,8 @@ export const HardwareAddress = ({
     setEditName(val);
   };
 
-  const isImported = existsHandler(address);
+  const isImported = existsHandler(network, address);
+
   return (
     <Wrapper>
       <div className="content">

src/library/Hardware/HardwareAddress/types.ts

@@ -5,6 +5,8 @@ import type { ReactNode } from 'react';
 import type { ComponentBase } from 'types';
 
 export type HardwareAddressProps = ComponentBase & {
+  // the network of the address.
+  network: string;
   // the address to import.
   address: string;
   // the index of the address.
@@ -18,7 +20,7 @@ export type HardwareAddressProps = ComponentBase & {
   // handle rename
   renameHandler: (address: string, newName: string) => void;
   // handle whether address already exists.
-  existsHandler: (address: string) => boolean;
+  existsHandler: (network: string, address: string) => boolean;
   // handle remove UI.
   openRemoveHandler: (address: string) => void;
   // handle confirm import UI.

src/library/Import/Confirm.tsx

@@ -12,9 +12,11 @@ import { NotificationsController } from 'controllers/NotificationsController';
 import { ellipsisFn } from '@w3ux/utils';
 import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert';
 import { ButtonMono } from 'kits/Buttons/ButtonMono';
+import { useNetwork } from 'contexts/Network';
 
 export const Confirm = ({ address, index, addHandler }: ConfirmProps) => {
   const { t } = useTranslation('modals');
+  const { network } = useNetwork();
   const { setStatus } = usePrompt();
   const { addOtherAccounts } = useOtherAccounts();
 
@@ -37,7 +39,12 @@ export const Confirm = ({ address, index, addHandler }: ConfirmProps) => {
         <ButtonMono
           text={t('importAccount')}
           onClick={() => {
-            const account = addHandler(address, index, addAccountCallback);
+            const account = addHandler(
+              network,
+              address,
+              index,
+              addAccountCallback
+            );
             if (account) {
               addOtherAccounts([account]);
             }

src/library/Import/Remove.tsx

@@ -11,9 +11,11 @@ import { ellipsisFn } from '@w3ux/utils';
 import { NotificationsController } from 'controllers/NotificationsController';
 import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert';
 import { ButtonMono } from 'kits/Buttons/ButtonMono';
+import { useNetwork } from 'contexts/Network';
 
 export const Remove = ({ address, getHandler, removeHandler }: RemoveProps) => {
   const { t } = useTranslation('modals');
+  const { network } = useNetwork();
   const { setStatus } = usePrompt();
   const { forgetOtherAccounts } = useOtherAccounts();
 
@@ -34,9 +36,9 @@ export const Remove = ({ address, getHandler, removeHandler }: RemoveProps) => {
         <ButtonMono
           text={t('removeAccount')}
           onClick={() => {
-            const account = getHandler(address);
+            const account = getHandler(network, address);
             if (account) {
-              removeHandler(address, removeAccountCallback);
+              removeHandler(network, address, removeAccountCallback);
               forgetOtherAccounts([account]);
               setStatus(0);
             }

src/library/Import/types.ts

@@ -32,6 +32,7 @@ export interface ConfirmProps {
   address: string;
   index: number;
   addHandler: (
+    network: string,
     address: string,
     index: number,
     callback?: () => void
@@ -40,6 +41,10 @@ export interface ConfirmProps {
 
 export interface RemoveProps {
   address: string;
-  getHandler: (address: string) => ImportedAccount | null;
-  removeHandler: (address: string, callback?: () => void) => void;
+  getHandler: (network: string, address: string) => ImportedAccount | null;
+  removeHandler: (
+    network: string,
+    address: string,
+    callback?: () => void
+  ) => void;
 }

src/modals/ImportLedger/Addresses.tsx

@@ -20,22 +20,22 @@ import { useLedgerAccounts } from '@w3ux/react-connect-kit';
 
 export const Addresess = ({ addresses, onGetAddress }: AnyJson) => {
   const { t } = useTranslation('modals');
-  const { network } = useNetwork();
-
-  const { getIsExecuting } = useLedgerHardware();
-  const isExecuting = getIsExecuting();
-  const { openPromptWith } = usePrompt();
-  const { renameOtherAccount } = useOtherAccounts();
   const {
     ledgerAccountExists,
     getLedgerAccount,
     addLedgerAccount,
     removeLedgerAccount,
     renameLedgerAccount,
   } = useLedgerAccounts();
+  const { network } = useNetwork();
+  const { openPromptWith } = usePrompt();
+  const { getIsExecuting } = useLedgerHardware();
+  const { renameOtherAccount } = useOtherAccounts();
+
+  const isExecuting = getIsExecuting();
 
   const renameHandler = (address: string, newName: string) => {
-    renameLedgerAccount(address, newName);
+    renameLedgerAccount(network, address, newName);
     renameOtherAccount(address, newName);
   };
 
@@ -73,6 +73,7 @@ export const Addresess = ({ addresses, onGetAddress }: AnyJson) => {
           return (
             <HardwareAddress
               key={i}
+              network={network}
               address={address}
               index={index}
               initial={initialName}

src/modals/ImportLedger/Reset.tsx

@@ -13,18 +13,20 @@ import { ButtonMono } from 'kits/Buttons/ButtonMono';
 import { ButtonMonoInvert } from 'kits/Buttons/ButtonMonoInvert';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { useLedgerAccounts } from '@w3ux/react-connect-kit';
+import { useNetwork } from 'contexts/Network';
 
 export const Reset = ({ removeLedgerAddress }: AnyJson) => {
   const { t } = useTranslation('modals');
   const { setStatus } = usePrompt();
+  const { network } = useNetwork();
   const { replaceModal } = useOverlay().modal;
   const { forgetOtherAccounts } = useOtherAccounts();
   const { removeLedgerAccount, ledgerAccounts } = useLedgerAccounts();
 
   const removeAccounts = () => {
     // Remove imported Ledger accounts.
     ledgerAccounts.forEach((account: LedgerAccount) => {
-      removeLedgerAccount(account.address);
+      removeLedgerAccount(network, account.address);
     });
     forgetOtherAccounts(ledgerAccounts);
 

src/modals/ImportVault/Reader.tsx

@@ -17,13 +17,16 @@ import { useVaultAccounts } from '@w3ux/react-connect-kit';
 export const Reader = () => {
   const { t } = useTranslation('modals');
   const {
+    network,
     networkData: { ss58 },
   } = useNetwork();
-  const { addOtherAccounts } = useOtherAccounts();
   const { closePrompt } = usePrompt();
-  const { addVaultAccount, vaultAccountExists, vaultAccounts } =
+  const { addOtherAccounts } = useOtherAccounts();
+  const { addVaultAccount, vaultAccountExists, getVaultAccounts } =
     useVaultAccounts();
 
+  const vaultAccounts = getVaultAccounts(network);
+
   // Store data from QR Code scanner.
   const [qrData, setQrData] = useState<AnyJson>(undefined);
 
@@ -36,7 +39,7 @@ export const Reader = () => {
 
   const valid =
     isValidAddress(qrData) &&
-    !vaultAccountExists(qrData) &&
+    !vaultAccountExists(network, qrData) &&
     !formatAccountSs58(qrData, ss58);
 
   // Reset QR data on open.
@@ -47,7 +50,7 @@ export const Reader = () => {
   useEffect(() => {
     // Add account and close overlay if valid.
     if (valid) {
-      const account = addVaultAccount(qrData, vaultAccounts.length);
+      const account = addVaultAccount(network, qrData, vaultAccounts.length);
       if (account) {
         addOtherAccounts([account]);
       }
@@ -61,7 +64,7 @@ export const Reader = () => {
         : isValidAddress(qrData)
           ? formatAccountSs58(qrData, ss58)
             ? `${t('differentNetworkAddress')}`
-            : vaultAccountExists(qrData)
+            : vaultAccountExists(network, qrData)
               ? `${t('accountAlreadyImported')}`
               : `${t('addressReceived')}`
           : `${t('invalidAddress')}`

src/modals/ImportVault/index.tsx

@@ -21,25 +21,29 @@ import { ButtonText } from 'kits/Buttons/ButtonText';
 import { HardwareAddress } from 'library/Hardware/HardwareAddress';
 import { HardwareStatusBar } from 'library/Hardware/HardwareStatusBar';
 import { useVaultAccounts } from '@w3ux/react-connect-kit';
+import { useNetwork } from 'contexts/Network';
 
 export const ImportVault = () => {
   const { t } = useTranslation();
+  const { network } = useNetwork();
   const { replaceModal } = useOverlay().modal;
   const { renameOtherAccount } = useOtherAccounts();
   const { openPromptWith, status: promptStatus } = usePrompt();
 
   const {
-    vaultAccounts,
+    addVaultAccount,
+    getVaultAccount,
+    getVaultAccounts,
     vaultAccountExists,
     renameVaultAccount,
-    addVaultAccount,
     removeVaultAccount,
-    getVaultAccount,
   } = useVaultAccounts();
   const { setModalResize } = useOverlay().modal;
 
+  const vaultAccounts = getVaultAccounts(network);
+
   const renameHandler = (address: string, newName: string) => {
-    renameVaultAccount(address, newName);
+    renameVaultAccount(network, address, newName);
     renameOtherAccount(address, newName);
   };
 
@@ -63,7 +67,7 @@ export const ImportVault = () => {
 
   useEffect(() => {
     setModalResize();
-  }, [vaultAccounts]);
+  }, [JSON.stringify(vaultAccounts)]);
 
   return vaultAccounts.length === 0 ? (
     <NoAccounts
@@ -89,6 +93,7 @@ export const ImportVault = () => {
         <div className="items">
           {vaultAccounts.map(({ address, name, index }: AnyJson, i) => (
             <HardwareAddress
+              network={network}
               key={i}
               address={address}
               index={index}

yarn.lock

@@ -2675,17 +2675,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@w3ux/react-connect-kit@npm:^0.1.12":
-  version: 0.1.12
-  resolution: "@w3ux/react-connect-kit@npm:0.1.12"
+"@w3ux/react-connect-kit@npm:^0.1.15":
+  version: 0.1.15
+  resolution: "@w3ux/react-connect-kit@npm:0.1.15"
   dependencies:
     "@chainsafe/metamask-polkadot-adapter": "npm:^0.6.0"
     "@polkadot/util": "npm:^12.6.2"
     "@polkagate/extension-dapp": "npm:^0.46.12"
     "@w3ux/extension-assets": "npm:^0.2.3"
     "@w3ux/hooks": "npm:^0.0.3"
     "@w3ux/utils": "npm:^0.0.2"
-  checksum: 10c0/244f3f14e50c301fb4df9df8447be8e4c2ba1340866e583a65c95ecdb8c41a4abf66b28c62abd7da5f30c4bb9a40470f2d93f1cd486318eac54d0913f898c83a
+  checksum: 10c0/4aa288c5dc608394b18d8ac5405ed7bd584719c42661483c8d859d01d174a1bb1bb7acc3abd96bc92aa21e175a294d37e75a6db7176949ef157addc8a70106d0
   languageName: node
   linkType: hard
 
@@ -6629,7 +6629,7 @@ __metadata:
     "@vitejs/plugin-react-swc": "npm:^3.6.0"
     "@w3ux/extension-assets": "npm:0.2.6"
     "@w3ux/hooks": "npm:^0.0.3"
-    "@w3ux/react-connect-kit": "npm:^0.1.12"
+    "@w3ux/react-connect-kit": "npm:^0.1.15"
     "@w3ux/react-odometer": "npm:^0.0.3"
     "@w3ux/react-polkicon": "npm:^0.0.2"
     "@w3ux/utils": "npm:^0.0.2"