diff --git a/package.json b/package.json index 8e7f98d18b..05d82577af 100644 --- a/package.json +++ b/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", diff --git a/src/Providers.tsx b/src/Providers.tsx index 80e9005171..a60739656d 100644 --- a/src/Providers.tsx +++ b/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, diff --git a/src/contexts/Connect/OtherAccounts/index.tsx b/src/contexts/Connect/OtherAccounts/index.tsx index 09777d8159..507101dd8b 100644 --- a/src/contexts/Connect/OtherAccounts/index.tsx +++ b/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(() => { diff --git a/src/library/Hardware/HardwareAddress/index.tsx b/src/library/Hardware/HardwareAddress/index.tsx index e0fe8d8c7c..7d95ecdd5d 100644 --- a/src/library/Hardware/HardwareAddress/index.tsx +++ b/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 (
diff --git a/src/library/Hardware/HardwareAddress/types.ts b/src/library/Hardware/HardwareAddress/types.ts index 5fc1446d6c..602a6b2984 100644 --- a/src/library/Hardware/HardwareAddress/types.ts +++ b/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. diff --git a/src/library/Import/Confirm.tsx b/src/library/Import/Confirm.tsx index 43717aae67..72fa7e17bf 100644 --- a/src/library/Import/Confirm.tsx +++ b/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) => { { - const account = addHandler(address, index, addAccountCallback); + const account = addHandler( + network, + address, + index, + addAccountCallback + ); if (account) { addOtherAccounts([account]); } diff --git a/src/library/Import/Remove.tsx b/src/library/Import/Remove.tsx index 22cda15644..60f75a654d 100644 --- a/src/library/Import/Remove.tsx +++ b/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) => { { - const account = getHandler(address); + const account = getHandler(network, address); if (account) { - removeHandler(address, removeAccountCallback); + removeHandler(network, address, removeAccountCallback); forgetOtherAccounts([account]); setStatus(0); } diff --git a/src/library/Import/types.ts b/src/library/Import/types.ts index c5d88f63f4..70c2dc1d34 100644 --- a/src/library/Import/types.ts +++ b/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; } diff --git a/src/modals/ImportLedger/Addresses.tsx b/src/modals/ImportLedger/Addresses.tsx index abf4e5f3cc..668e043b0e 100644 --- a/src/modals/ImportLedger/Addresses.tsx +++ b/src/modals/ImportLedger/Addresses.tsx @@ -20,12 +20,6 @@ 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, @@ -33,9 +27,15 @@ export const Addresess = ({ addresses, onGetAddress }: AnyJson) => { 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 ( { const { t } = useTranslation('modals'); const { setStatus } = usePrompt(); + const { network } = useNetwork(); const { replaceModal } = useOverlay().modal; const { forgetOtherAccounts } = useOtherAccounts(); const { removeLedgerAccount, ledgerAccounts } = useLedgerAccounts(); @@ -24,7 +26,7 @@ export const Reset = ({ removeLedgerAddress }: AnyJson) => { const removeAccounts = () => { // Remove imported Ledger accounts. ledgerAccounts.forEach((account: LedgerAccount) => { - removeLedgerAccount(account.address); + removeLedgerAccount(network, account.address); }); forgetOtherAccounts(ledgerAccounts); diff --git a/src/modals/ImportVault/Reader.tsx b/src/modals/ImportVault/Reader.tsx index 157af4bf8d..15b6355d0b 100644 --- a/src/modals/ImportVault/Reader.tsx +++ b/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(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')}` diff --git a/src/modals/ImportVault/index.tsx b/src/modals/ImportVault/index.tsx index 94ef953d4e..11bdcba60e 100644 --- a/src/modals/ImportVault/index.tsx +++ b/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 ? ( {
{vaultAccounts.map(({ address, name, index }: AnyJson, i) => (