perf: defi only render current step if active

src/components/DeFi/components/Steps.tsx

@@ -49,16 +49,17 @@ export const Steps: React.FC<StepsProps> = ({
             const Step = steps[step as DefiStep]
             if (!Step) return null
             const Component = Step.component
+            const isActive = currentStep === index
             return (
               <StepRow
                 label={Step.label}
                 key={step}
                 description={Step?.description}
                 stepNumber={`${index + 1}`}
                 isComplete={currentStep > index}
-                isActive={currentStep === index}
+                isActive={isActive}
               >
-                <Component onNext={handleNext} {...Step.props} />
+                {isActive && <Component onNext={handleNext} {...Step.props} />}
               </StepRow>
             )
           })}

src/context/WalletProvider/Coinbase/config.ts

@@ -1,7 +1,10 @@
+import type { CoinbaseAdapter } from '@shapeshiftoss/hdwallet-coinbase'
 import { CoinbaseIcon } from 'components/Icons/CoinbaseIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
-export const CoinbaseConfig: Omit<SupportedWalletInfo, 'routes'> = {
+type CoinbaseConfigType = Omit<SupportedWalletInfo<typeof CoinbaseAdapter>, 'routes'>
+
+export const CoinbaseConfig: CoinbaseConfigType = {
   adapters: [
     {
       loadAdapter: () => import('@shapeshiftoss/hdwallet-coinbase').then(m => m.CoinbaseAdapter),

src/context/WalletProvider/DemoWallet/config.ts

@@ -1,7 +1,10 @@
+import type { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
-export const DemoConfig: Omit<SupportedWalletInfo, 'routes'> = {
+type DemoConfigType = Omit<SupportedWalletInfo<typeof NativeAdapter>, 'routes'>
+
+export const DemoConfig: DemoConfigType = {
   adapters: [
     {
       loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),

src/context/WalletProvider/KeepKey/components/Connect.tsx

@@ -6,6 +6,7 @@ import {
   ModalBody,
   ModalHeader,
 } from '@chakra-ui/react'
+import type { KkRestAdapter } from '@keepkey/hdwallet-keepkey-rest'
 import type { Event } from '@shapeshiftoss/hdwallet-core'
 import { useCallback, useState } from 'react'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'
@@ -52,11 +53,12 @@ export const KeepKeyConnect = () => {
     setError(null)
     setLoading(true)
 
-    const firstAdapter = await getAdapter(KeyManager.KeepKey)
+    const firstAdapter = (await getAdapter(KeyManager.KeepKey)) as KkRestAdapter | null
     if (firstAdapter) {
       const wallet = await (async () => {
         try {
           const sdk = await setupKeepKeySDK()
+          if (!sdk) throw new Error('Failed to setup KeepKey SDK')
           const wallet = await firstAdapter.pairDevice(sdk)
           if (!wallet) {
             setErrorLoading('walletProvider.errors.walletNotFound')
@@ -65,7 +67,8 @@ export const KeepKeyConnect = () => {
           return wallet
         } catch (e) {
           const secondAdapter = await getAdapter(KeyManager.KeepKey, 1)
-          const wallet = await secondAdapter?.pairDevice().catch((err: Error) => {
+          // @ts-ignore TODO(gomes): FIXME, most likely borked because of WebUSBKeepKeyAdapter
+          const wallet = await secondAdapter.pairDevice().catch(err => {
             if (err.name === 'ConflictingApp') {
               setErrorLoading('walletProvider.keepKey.connect.conflictingApp')
               return

src/context/WalletProvider/KeepKey/config.ts

@@ -1,7 +1,14 @@
+import type { KkRestAdapter } from '@keepkey/hdwallet-keepkey-rest'
+import type { 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'> = {
+type KeepKeyConfigType = Omit<
+  SupportedWalletInfo<typeof KkRestAdapter | typeof WebUSBKeepKeyAdapter>,
+  'routes'
+>
+
+export const KeepKeyConfig: KeepKeyConfigType = {
   adapters: [
     {
       loadAdapter: () => import('@keepkey/hdwallet-keepkey-rest').then(m => m.KkRestAdapter),

src/context/WalletProvider/Keplr/config.ts

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

src/context/WalletProvider/Ledger/config.ts

@@ -1,7 +1,10 @@
+import type { 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'> = {
+type LedgerConfigType = Omit<SupportedWalletInfo<typeof WebUSBLedgerAdapter>, 'routes'>
+
+export const LedgerConfig: LedgerConfigType = {
   adapters: [
     {
       loadAdapter: () =>

src/context/WalletProvider/MetaMask/config.ts

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

src/context/WalletProvider/MobileWallet/components/MobileLoad.tsx

@@ -62,11 +62,12 @@ export const MobileLoad = ({ history }: RouteComponentProps) => {
       try {
         const revoker = await getWallet(deviceId)
         if (!revoker?.mnemonic) throw new Error(`Mobile wallet not found: ${deviceId}`)
+        if (!revoker?.id) throw new Error(`Revoker ID not found: ${deviceId}`)
 
         const wallet = await adapter.pairDevice(revoker.id)
-        await wallet.loadDevice({ mnemonic: revoker.mnemonic })
-        if (!(await wallet.isInitialized())) {
-          await wallet.initialize()
+        await wallet?.loadDevice({ mnemonic: revoker.mnemonic })
+        if (!(await wallet?.isInitialized())) {
+          await wallet?.initialize()
         }
         dispatch({
           type: WalletActions.SET_WALLET,

src/context/WalletProvider/MobileWallet/config.ts

@@ -1,7 +1,10 @@
+import type { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
-export const MobileConfig: Omit<SupportedWalletInfo, 'routes'> = {
+type MobileConfigType = Omit<SupportedWalletInfo<typeof NativeAdapter>, 'routes'>
+
+export const MobileConfig: MobileConfigType = {
   adapters: [
     {
       loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),

src/context/WalletProvider/NativeWallet/components/NativeLoad.tsx

@@ -75,11 +75,11 @@ export const NativeLoad = ({ history }: RouteComponentProps) => {
       const { name, icon } = NativeConfig
       try {
         const wallet = await adapter.pairDevice(deviceId)
-        if (!(await wallet.isInitialized())) {
+        if (!(await wallet?.isInitialized())) {
           // This will trigger the password modal and the modal will set the wallet on state
           // after the wallet has been decrypted. If we set it now, `getPublicKeys` calls will
           // return null, and we don't have a retry mechanism
-          await wallet.initialize()
+          await wallet?.initialize()
         } else {
           dispatch({
             type: WalletActions.SET_WALLET,

src/context/WalletProvider/NativeWallet/config.ts

@@ -1,7 +1,10 @@
+import type { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
 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'> = {
+type NativeConfigType = Omit<SupportedWalletInfo<typeof NativeAdapter>, 'routes'>
+
+export const NativeConfig: NativeConfigType = {
   adapters: [
     {
       loadAdapter: () => import('@shapeshiftoss/hdwallet-native').then(m => m.NativeAdapter),

src/context/WalletProvider/WalletConnectV2/config.ts

@@ -1,4 +1,5 @@
 import { CHAIN_REFERENCE } from '@shapeshiftoss/caip'
+import type { WalletConnectV2Adapter } from '@shapeshiftoss/hdwallet-walletconnectv2'
 import { getConfig } from 'config'
 import type { Chain } from 'viem/chains'
 import { arbitrum, avalanche, bsc, gnosis, mainnet, optimism, polygon } from 'viem/chains'
@@ -7,7 +8,9 @@ import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 import type { EthereumProviderOptions } from './constants'
 
-export const WalletConnectV2Config: Omit<SupportedWalletInfo, 'routes'> = {
+type WalletConnectV2ConfigType = Omit<SupportedWalletInfo<typeof WalletConnectV2Adapter>, 'routes'>
+
+export const WalletConnectV2Config: WalletConnectV2ConfigType = {
   adapters: [
     {
       loadAdapter: () =>

src/context/WalletProvider/WalletContext.tsx

@@ -3,11 +3,12 @@ import { createContext } from 'react'
 
 import type { ActionTypes } from './actions'
 import type { KeyManager } from './KeyManager'
+import type { GetAdapter } from './types'
 import type { DeviceState, InitialState, KeyManagerWithProvider } from './WalletProvider'
 
 export interface IWalletContext {
   state: InitialState
-  getAdapter: (keyManager: KeyManager, index?: number) => Promise<any>
+  getAdapter: GetAdapter
   dispatch: React.Dispatch<ActionTypes>
   connect: (adapter: KeyManager) => void
   create: (adapter: KeyManager) => void