feat(refactor): Remove OtherAccounts context, simplify account import logic

packages/app/src/Providers.tsx

@@ -15,7 +15,6 @@ import { APIProvider } from 'contexts/Api'
 import { BalancesProvider } from 'contexts/Balances'
 import { ExternalAccountsProvider } from 'contexts/Connect/ExternalAccounts'
 import { ImportedAccountsProvider } from 'contexts/Connect/ImportedAccounts'
-import { OtherAccountsProvider } from 'contexts/Connect/OtherAccounts'
 import { CurrencyProvider } from 'contexts/Currency'
 import { EraStakersProvider } from 'contexts/EraStakers'
 import { FiltersProvider } from 'contexts/Filters'
@@ -68,7 +67,6 @@ export const Providers = () => {
 			],
 			HardwareAccountsProvider,
 			ExternalAccountsProvider,
-			OtherAccountsProvider,
 			ImportedAccountsProvider,
 			WalletConnectProvider,
 			ProxiesProvider,

packages/app/src/contexts/Connect/ExternalAccounts/index.tsx

@@ -9,9 +9,10 @@ import { useNetwork } from 'contexts/Network'
 import {
 	addExternalAccount as addExternalAccountBus,
 	externalAccountExists,
+	externalAccounts$,
 	removeExternalAccounts,
 } from 'global-bus'
-import type { ReactNode } from 'react'
+import { type ReactNode, useEffect, useState } from 'react'
 import type { AccountAddedBy, ExternalAccount } from 'types'
 import type {
 	AddExternalAccountResult,
@@ -31,6 +32,11 @@ export const ExternalAccountsProvider = ({
 	const { activeAddress, setActiveAccount } = useActiveAccounts()
 	const { ss58 } = getStakingChainData(network)
 
+	// Store external accounts in state
+	const [externalAccounts, setExternalAccounts] = useState<ExternalAccount[]>(
+		[],
+	)
+
 	// Adds an external account to imported accounts
 	const addExternalAccount = (
 		address: string,
@@ -94,9 +100,27 @@ export const ExternalAccountsProvider = ({
 		}
 	}
 
+	// Gets all accounts for a network
+	const getExternalAccounts = (network: string) =>
+		externalAccounts.filter((a) => a.network === network)
+
+	// Subscribe to global bus
+	useEffect(() => {
+		const sub = externalAccounts$.subscribe((result) => {
+			setExternalAccounts(result)
+		})
+		return () => {
+			sub.unsubscribe()
+		}
+	}, [])
+
 	return (
 		<ExternalAccountsContext.Provider
-			value={{ addExternalAccount, forgetExternalAccounts }}
+			value={{
+				getExternalAccounts,
+				addExternalAccount,
+				forgetExternalAccounts,
+			}}
 		>
 			{children}
 		</ExternalAccountsContext.Provider>

packages/app/src/contexts/Connect/ExternalAccounts/types.ts

@@ -4,6 +4,7 @@
 import type { AccountAddedBy, ExternalAccount } from 'types'
 
 export interface ExternalAccountsContextInterface {
+	getExternalAccounts: (network: string) => ExternalAccount[]
 	addExternalAccount: (
 		address: string,
 		addedBy: AccountAddedBy,

packages/app/src/contexts/Connect/ImportedAccounts/index.tsx

@@ -2,20 +2,24 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { createSafeContext, useEffectIgnoreInitial } from '@w3ux/hooks'
-import { useExtensionAccounts } from '@w3ux/react-connect-kit'
+import {
+	useExtensionAccounts,
+	useHardwareAccounts,
+} from '@w3ux/react-connect-kit'
+import type { ExtensionAccount, HardwareAccount } from '@w3ux/types'
 import { ManualSigners } from 'consts'
 import { getStakingChainData } from 'consts/util'
 import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useNetwork } from 'contexts/Network'
 import type { ReactNode } from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import type {
 	ActiveAccount,
 	ExternalAccount,
 	ImportedAccount,
 	MaybeAddress,
 } from 'types'
-import { useOtherAccounts } from '../OtherAccounts'
+import { useExternalAccounts } from '../ExternalAccounts'
 import { getActiveAccountLocal } from '../Utils'
 import type { ImportedAccountsContextInterface } from './types'
 
@@ -28,14 +32,33 @@ export const ImportedAccountsProvider = ({
 	children: ReactNode
 }) => {
 	const { network } = useNetwork()
-	const { otherAccounts } = useOtherAccounts()
-	const { setActiveAccount } = useActiveAccounts()
-	const { getExtensionAccounts } = useExtensionAccounts()
-
+	const { getExternalAccounts } = useExternalAccounts()
+	const { getHardwareAccounts } = useHardwareAccounts()
+	const { setActiveAccount, activeAccount } = useActiveAccounts()
+	const { getExtensionAccounts, extensionsSynced } = useExtensionAccounts()
 	const { ss58 } = getStakingChainData(network)
+
+	// Whether active account import checks have been completed
+	const [accountsInitialised, setAccountsInitialised] = useState<boolean>(false)
+
 	// Get the imported extension accounts formatted with the current network's ss58 prefix
-	const extensionAccounts = getExtensionAccounts(ss58)
-	const allAccounts = extensionAccounts.concat(otherAccounts)
+	const extensionAccounts: ExtensionAccount[] = getExtensionAccounts(ss58)
+
+	// Get the imported hardware accounts for the current network
+	const hardwareAccounts: HardwareAccount[] = getHardwareAccounts(
+		'ledger',
+		network,
+	)
+		.concat(getHardwareAccounts('vault', network))
+		.concat(getHardwareAccounts('wallet_connect', network))
+
+	// Get the imported external accounts for the current network
+	const externalAccounts: ExternalAccount[] = getExternalAccounts(network)
+
+	// Combine all imported accounts
+	const allAccounts: ImportedAccount[] = extensionAccounts
+		.concat(hardwareAccounts)
+		.concat(externalAccounts)
 
 	// Stringify account addresses and account names to determine if they have changed. Ignore other properties including `signer` and `source`
 	const shallowAccountStringify = (accounts: ImportedAccount[]) => {
@@ -141,6 +164,28 @@ export const ImportedAccountsProvider = ({
 		}
 	}, [network, stringifiedAccountsKey])
 
+	// Once extensions are fully initialised, fetch accounts from other sources and re-sync active
+	// account. Only runs once per app load
+	useEffectIgnoreInitial(() => {
+		if (extensionsSynced === 'synced' && !accountsInitialised) {
+			setAccountsInitialised(true)
+
+			// If active account is not yet set, check if it has been imported in other accounts
+			if (!activeAccount) {
+				const activeAccountFound = allAccounts.find(
+					({ address }) =>
+						address === getActiveAccountLocal(network, ss58)?.address,
+				)
+				if (activeAccountFound) {
+					setActiveAccount({
+						address: activeAccountFound.address,
+						source: activeAccountFound.source,
+					})
+				}
+			}
+		}
+	}, [extensionsSynced])
+
 	return (
 		<ImportedAccountsContext.Provider
 			value={{
@@ -150,6 +195,7 @@ export const ImportedAccountsProvider = ({
 				accountHasSigner,
 				requiresManualSign,
 				stringifiedAccountsKey,
+				accountsInitialised,
 			}}
 		>
 			{children}

packages/app/src/contexts/Connect/ImportedAccounts/types.ts

@@ -10,4 +10,5 @@ export interface ImportedAccountsContextInterface {
 	accountHasSigner: (activeAccount: ActiveAccount) => boolean
 	requiresManualSign: (activeAccount: ActiveAccount) => boolean
 	stringifiedAccountsKey: string
+	accountsInitialised: boolean
 }