feat: lazy load wallet adapters part 1

src/context/WalletProvider/Coinbase/config.ts

@@ -1,9 +1,12 @@
-import { CoinbaseAdapter } from '@shapeshiftoss/hdwallet-coinbase'
 import { CoinbaseIcon } from 'components/Icons/CoinbaseIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const CoinbaseConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [CoinbaseAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-coinbase').then(m => m.CoinbaseAdapter),
+    },
+  ],
   supportsMobile: 'browser',
   icon: CoinbaseIcon,
   name: 'Coinbase',

src/context/WalletProvider/DemoWallet/config.ts

@@ -1,9 +1,12 @@
-import { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const DemoConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [NativeAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),
+    },
+  ],
   supportsMobile: 'both',
   icon: FoxIcon,
   name: 'DemoWallet',

src/context/WalletProvider/KeepKey/config.ts

@@ -1,11 +1,16 @@
-import { KkRestAdapter } from '@keepkey/hdwallet-keepkey-rest'
-import { WebUSBKeepKeyAdapter } from '@shapeshiftoss/hdwallet-keepkey-webusb'
 import { KeepKeyIcon } from 'components/Icons/KeepKeyIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const KeepKeyConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  // Allow multiple transports per wallet. order is in first attempt priority, with fail over to next transport
-  adapters: [KkRestAdapter, WebUSBKeepKeyAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@keepkey/hdwallet-keepkey-rest').then(m => m.KkRestAdapter),
+    },
+    {
+      loadAdapter: () =>
+        import('@shapeshiftoss/hdwallet-keepkey-webusb').then(m => m.WebUSBKeepKeyAdapter),
+    },
+  ],
   icon: KeepKeyIcon,
   name: 'KeepKey',
 }

src/context/WalletProvider/Keplr/config.ts

@@ -1,9 +1,12 @@
-import { KeplrAdapter } from '@shapeshiftoss/hdwallet-keplr'
 import { KeplrIcon } from 'components/Icons/KeplrIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const KeplrConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [KeplrAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-keplr').then(m => m.KeplrAdapter),
+    },
+  ],
   icon: KeplrIcon,
   name: 'Keplr',
 }

src/context/WalletProvider/Ledger/config.ts

@@ -1,9 +1,13 @@
-import { WebUSBLedgerAdapter } from '@shapeshiftoss/hdwallet-ledger-webusb'
 import { LedgerIcon } from 'components/Icons/LedgerIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const LedgerConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [WebUSBLedgerAdapter],
+  adapters: [
+    {
+      loadAdapter: () =>
+        import('@shapeshiftoss/hdwallet-ledger-webusb').then(m => m.WebUSBLedgerAdapter),
+    },
+  ],
   icon: LedgerIcon,
   name: 'Ledger',
 }

src/context/WalletProvider/MetaMask/config.ts

@@ -1,12 +1,15 @@
-import { MetaMaskAdapter } from '@shapeshiftoss/hdwallet-metamask'
-import { MetaMaskAdapter as MetaMaskSnapAdapter } from '@shapeshiftoss/hdwallet-shapeshift-multichain'
 import { getConfig } from 'config'
 import { MetaMaskIcon } from 'components/Icons/MetaMaskIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const MetaMaskConfig: Omit<SupportedWalletInfo, 'routes'> = {
   adapters: [
-    getConfig().REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS ? MetaMaskSnapAdapter : MetaMaskAdapter,
+    {
+      loadAdapter: () =>
+        getConfig().REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS
+          ? import('@shapeshiftoss/hdwallet-shapeshift-multichain').then(m => m.MetaMaskAdapter)
+          : import('@shapeshiftoss/hdwallet-metamask').then(m => m.MetaMaskAdapter),
+    },
   ],
   supportsMobile: 'browser',
   icon: MetaMaskIcon,

src/context/WalletProvider/MobileWallet/config.ts

@@ -1,9 +1,13 @@
-import { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const MobileConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [NativeAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),
+    },
+  ],
+
   supportsMobile: 'app',
   icon: FoxIcon,
   name: 'ShapeShift Mobile',

src/context/WalletProvider/NativeWallet/config.ts

@@ -1,9 +1,12 @@
-import { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
-import { FoxIcon } from 'components/Icons/FoxIcon'
+import { FoxIcon } from 'components/Icons/FoxIcon' // Ensure the import path is correct
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const NativeConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [NativeAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),
+    },
+  ],
   supportsMobile: 'browser',
   icon: FoxIcon,
   name: 'ShapeShift',

src/context/WalletProvider/WalletConnectV2/config.ts

@@ -1,5 +1,4 @@
 import { CHAIN_REFERENCE } from '@shapeshiftoss/caip'
-import { WalletConnectV2Adapter } from '@shapeshiftoss/hdwallet-walletconnectv2'
 import type { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
 import { getConfig } from 'config'
 import type { Chain } from 'viem/chains'
@@ -8,12 +7,16 @@ import { WalletConnectIcon } from 'components/Icons/WalletConnectIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const WalletConnectV2Config: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [WalletConnectV2Adapter],
+  adapters: [
+    {
+      loadAdapter: () =>
+        import('@shapeshiftoss/hdwallet-walletconnectv2').then(m => m.WalletConnectV2Adapter),
+    },
+  ],
   icon: WalletConnectIcon,
   name: 'WalletConnect',
   description: 'v2',
 }
-
 type ViemChain = Chain
 type AtLeastOneViemChain = [ViemChain, ...ViemChain[]]
 type AtLeastOneNumber = [number, ...number[]]

src/context/WalletProvider/WalletProvider.tsx

@@ -769,8 +769,12 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }): JSX
             >(async (acc, cur) => {
               const adapters = await acc
               const options = getKeyManagerOptions(keyManager)
-              const adapter = cur.useKeyring(state.keyring, options)
               try {
+                const { loadAdapter } = cur
+                const Adapter = await loadAdapter()
+                // eslint is drunk, this isn't a hook
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                const adapter = Adapter.useKeyring(state.keyring, options)
                 adapters.push(adapter)
               } catch (e) {
                 console.error(e)
@@ -809,28 +813,38 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }): JSX
     setLocalWalletTypeAndDeviceId(KeyManager.Demo, deviceId)
     setLocalNativeWalletName(name)
     dispatch({ type: WalletActions.SET_LOCAL_WALLET_LOADING, payload: true })
-    const adapterInstance = adapters[0].useKeyring(state.keyring)
-    const wallet = (await adapterInstance.pairDevice(deviceId)) as NativeHDWallet
-    const { create } = Dummy.BIP39.Mnemonic
-    await wallet.loadDevice({
-      mnemonic: await create(PublicWalletXpubs),
-      deviceId,
-    })
-    await wallet.initialize()
-    dispatch({
-      type: WalletActions.SET_WALLET,
-      payload: {
-        isDemoWallet: true,
-        wallet,
-        name,
-        icon,
+
+    try {
+      const Adapter = await adapters[0].loadAdapter()
+      // eslint is drunk, this isn't a hook
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const adapterInstance = Adapter.useKeyring(state.keyring)
+
+      const wallet = (await adapterInstance.pairDevice(deviceId)) as NativeHDWallet
+      const { create } = Dummy.BIP39.Mnemonic
+      await wallet.loadDevice({
+        mnemonic: await create(PublicWalletXpubs),
         deviceId,
-        meta: { label: name },
-        connectedType: KeyManager.Demo,
-      },
-    })
-    dispatch({ type: WalletActions.SET_IS_CONNECTED, payload: false })
-    dispatch({ type: WalletActions.SET_LOCAL_WALLET_LOADING, payload: false })
+      })
+      await wallet.initialize()
+      dispatch({
+        type: WalletActions.SET_WALLET,
+        payload: {
+          isDemoWallet: true,
+          wallet,
+          name,
+          icon,
+          deviceId,
+          meta: { label: name },
+          connectedType: KeyManager.Demo,
+        },
+      })
+      dispatch({ type: WalletActions.SET_IS_CONNECTED, payload: false })
+    } catch (error) {
+      console.error(error)
+    } finally {
+      dispatch({ type: WalletActions.SET_LOCAL_WALLET_LOADING, payload: false })
+    }
   }, [state.keyring])
 
   const create = useCallback((type: KeyManager) => {

src/context/WalletProvider/XDEFI/config.ts

@@ -1,9 +1,12 @@
-import { XDEFIAdapter } from '@shapeshiftoss/hdwallet-xdefi'
 import { XDEFIIcon } from 'components/Icons/XDEFIIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const XDEFIConfig: Omit<SupportedWalletInfo, 'routes'> = {
-  adapters: [XDEFIAdapter],
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-xdefi').then(m => m.XDEFIAdapter),
+    },
+  ],
   icon: XDEFIIcon,
   name: 'XDEFI',
 }

src/context/WalletProvider/config.ts

@@ -73,7 +73,10 @@ import { XDEFIFailure } from './XDEFI/components/Failure'
 import { XDEFIConfig } from './XDEFI/config'
 
 export interface SupportedWalletInfo {
-  adapters: any[]
+  adapters: {
+    // TODO(gomes): can we type this?
+    loadAdapter: () => Promise<any>
+  }[]
   supportsMobile?: 'browser' | 'app' | 'both'
   icon: ComponentWithAs<'svg', IconProps>
   name: string
@@ -83,7 +86,6 @@ export interface SupportedWalletInfo {
   connectedWalletMenuInitialPath?: WalletConnectedRoutes
   connectedMenuComponent?: React.ComponentType<any>
 }
-
 export const SUPPORTED_WALLETS: Record<KeyManager, SupportedWalletInfo> = {
   [KeyManager.Mobile]: {
     ...MobileConfig,