feat(refactor): VaultAccountsProvider to w3ux (#2082)

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.8",
+    "@w3ux/react-connect-kit": "^0.1.12",
     "@w3ux/react-odometer": "^0.0.3",
     "@w3ux/react-polkicon": "^0.0.2",
     "@w3ux/utils": "^0.0.2",

src/Providers.tsx

@@ -7,11 +7,11 @@ import {
   ExtensionsProvider,
   ExtensionAccountsProvider,
   LedgerAccountsProvider,
+  VaultAccountsProvider,
 } from '@w3ux/react-connect-kit';
 import { FastUnstakeProvider } from 'contexts/FastUnstake';
 import { FiltersProvider } from 'contexts/Filters';
-import { LedgerHardwareProvider } from 'contexts/Hardware/Ledger/LedgerHardware';
-import { VaultAccountsProvider } from 'contexts/Hardware/Vault/VaultAccounts';
+import { LedgerHardwareProvider } from 'contexts/LedgerHardware';
 import { HelpProvider } from 'contexts/Help';
 import { MenuProvider } from 'contexts/Menu';
 import { MigrateProvider } from 'contexts/Migrate';
@@ -47,26 +47,23 @@ import { OverlayProvider } from 'kits/Overlay/Provider';
 import { JoinPoolsProvider } from 'contexts/Pools/JoinPools';
 
 export const Providers = () => {
-  const {
-    network,
-    networkData: { ss58 },
-  } = useNetwork();
+  const { network } = useNetwork();
   const { activeAccount, setActiveAccount } = useActiveAccounts();
 
   // !! Provider order matters.
   const providers: Provider[] = [
     UIProvider,
     [APIProvider, { network }],
-    VaultAccountsProvider,
     LedgerHardwareProvider,
     [
       ExtensionsProvider,
       { options: { chainSafeSnapEnabled: true, polkagateSnapEnabled: true } },
     ],
     [
       ExtensionAccountsProvider,
-      { dappName: DappName, network, ss58, activeAccount, setActiveAccount },
+      { dappName: DappName, network, activeAccount, setActiveAccount },
     ],
+    [VaultAccountsProvider, { network }],
     [LedgerAccountsProvider, { network }],
     ExternalAccountsProvider,
     OtherAccountsProvider,

src/config/ledger.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { LedgerApp } from 'contexts/Hardware/Ledger/types';
+import type { LedgerApp } from 'contexts/LedgerHardware/types';
 import KusamaSVG from 'img/appIcons/kusama.svg?react';
 import PolkadotSVG from 'img/appIcons/polkadot.svg?react';
 

src/contexts/Connect/ImportedAccounts/index.tsx

@@ -16,6 +16,7 @@ import type { ImportedAccountsContextInterface } from './types';
 import { useOtherAccounts } from '../OtherAccounts';
 import { BalancesController } from 'controllers/BalancesController';
 import { useApi } from 'contexts/Api';
+import { useNetwork } from 'contexts/Network';
 
 export const ImportedAccountsContext =
   createContext<ImportedAccountsContextInterface>(
@@ -30,8 +31,15 @@ export const ImportedAccountsProvider = ({
   children: ReactNode;
 }) => {
   const { isReady, api } = useApi();
+  const {
+    networkData: { ss58 },
+  } = useNetwork();
   const { otherAccounts } = useOtherAccounts();
-  const { extensionAccounts } = useExtensionAccounts();
+  const { getExtensionAccounts } = useExtensionAccounts();
+
+  // Get the imported extension accounts formatted with the current network's ss58 prefix.
+  const extensionAccounts = getExtensionAccounts(ss58);
+
   const allAccounts = extensionAccounts.concat(otherAccounts);
 
   // Stringify account addresses and account names to determine if they have changed. Ignore other properties including `signer` and `source`.

src/contexts/Connect/OtherAccounts/index.tsx

@@ -3,10 +3,6 @@
 
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import {
-  getLocalLedgerAccounts,
-  getLocalVaultAccounts,
-} from 'contexts/Hardware/Utils';
 import type { MaybeAddress, NetworkName } from 'types';
 import { setStateWithRef } from '@w3ux/utils';
 import { useNetwork } from 'contexts/Network';
@@ -22,6 +18,8 @@ import { useEventListener } from 'usehooks-ts';
 import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit';
 import type { ImportedAccount } from '@w3ux/react-connect-kit/types';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
+import { getLocalVaultAccounts } from '@w3ux/react-connect-kit/VaultAccountsProvider/utils';
+import { getLocalLedgerAccounts } from '@w3ux/react-connect-kit/LedgerAccountsProvider/utils';
 
 export const OtherAccountsContext =
   createContext<OtherAccountsContextInterface>(defaultOtherAccountsContext);

src/contexts/Hardware/Utils.tsx → src/contexts/LedgerHardware/Utils.tsx

@@ -3,12 +3,7 @@
 
 import { localStorageOrDefault } from '@w3ux/utils';
 import { LedgerApps } from 'config/ledger';
-import type { MaybeString } from 'types';
-import type {
-  LedgerAccount,
-  VaultAccount,
-} from '@w3ux/react-connect-kit/types';
-import type { LedgerAddress } from './Ledger/types';
+import type { LedgerAddress } from './types';
 
 // Ledger error keyed by type of error.
 const LedgerErrorsByType = {
@@ -61,57 +56,3 @@ export const getLocalLedgerAddresses = (network?: string) => {
     ? localAddresses.filter((a) => a.network === network)
     : localAddresses;
 };
-
-// Gets imported Ledger accounts from local storage.
-export const getLocalLedgerAccounts = (network?: string): LedgerAccount[] => {
-  const localAddresses = localStorageOrDefault(
-    'ledger_accounts',
-    [],
-    true
-  ) as LedgerAccount[];
-
-  return network
-    ? localAddresses.filter((a) => a.network === network)
-    : localAddresses;
-};
-
-// Renames a record from local ledger addresses.
-export const renameLocalLedgerAddress = (
-  address: string,
-  name: string,
-  network: string
-) => {
-  const localLedger = (
-    localStorageOrDefault('ledger_addresses', [], true) as LedgerAddress[]
-  )?.map((i) =>
-    !(i.address === address && i.network === network)
-      ? i
-      : {
-          ...i,
-          name,
-        }
-  );
-  if (localLedger) {
-    localStorage.setItem('ledger_addresses', JSON.stringify(localLedger));
-  }
-};
-
-// Gets imported Vault accounts from local storage.
-export const getLocalVaultAccounts = (network?: string) => {
-  const localAddresses = localStorageOrDefault(
-    'polkadot_vault_accounts',
-    [],
-    true
-  ) as VaultAccount[];
-
-  return network
-    ? localAddresses.filter((a) => a.network === network)
-    : localAddresses;
-};
-
-// Gets whether an address is a local network address.
-export const isLocalNetworkAddress = (
-  chain: string,
-  a: { address: MaybeString; network: string },
-  address: string
-) => a.address === address && a.network === chain;

src/contexts/Hardware/Ledger/LedgerHardware.tsx → src/contexts/LedgerHardware/index.tsx

@@ -7,7 +7,7 @@ import { createContext, useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { AnyJson, MaybeString } from 'types';
 import { useApi } from 'contexts/Api';
-import { getLedgerErrorType } from '../Utils';
+import { getLedgerErrorType } from './Utils';
 import { defaultFeedback, defaultLedgerHardwareContext } from './defaults';
 import type {
   FeedbackMessage,