feat(wallet-management): add support for base account

packages/wallet-management/src/config/baseAccount.ts

@@ -0,0 +1,7 @@
+import type { BaseAccountParameters } from 'wagmi/connectors'
+import { lifiLogoUrl } from '../icons.js'
+
+export const defaultBaseAccountConfig: BaseAccountParameters = {
+  appName: 'LI.FI',
+  appLogoUrl: lifiLogoUrl,
+}

packages/wallet-management/src/connectors/baseAccount.ts

@@ -0,0 +1,7 @@
+import type { BaseAccountParameters } from 'wagmi/connectors'
+import { baseAccount } from 'wagmi/connectors'
+import { extendConnector } from './utils.js'
+
+export const createBaseAccountConnector = /*#__PURE__*/ (
+  params: BaseAccountParameters
+) => extendConnector(baseAccount(params), 'baseAccount', 'Base Account')

packages/wallet-management/src/createDefaultWagmiConfig.ts

@@ -3,11 +3,13 @@ import { mainnet } from 'viem/chains'
 import type { Config, CreateConnectorFn } from 'wagmi'
 import { createConfig } from 'wagmi'
 import type {
+  BaseAccountParameters,
   CoinbaseWalletParameters,
   MetaMaskParameters,
   WalletConnectParameters,
 } from 'wagmi/connectors'
 import { safe } from 'wagmi/connectors'
+import { createBaseAccountConnector } from './connectors/baseAccount.js'
 import { createCoinbaseConnector } from './connectors/coinbase.js'
 import { createMetaMaskConnector } from './connectors/metaMask.js'
 import { createWalletConnectConnector } from './connectors/walletConnect.js'
@@ -17,6 +19,7 @@ export interface DefaultWagmiConfigProps {
   walletConnect?: WalletConnectParameters
   coinbase?: CoinbaseWalletParameters
   metaMask?: MetaMaskParameters
+  baseAccount?: BaseAccountParameters
   wagmiConfig?: {
     ssr?: boolean
     multiInjectedProviderDiscovery?: boolean
@@ -112,6 +115,15 @@ export function createDefaultWagmiConfig(
     }
   }
 
+  if (props?.baseAccount && !isWalletInstalled('baseAccount')) {
+    const recentConnectorId = localStorage?.getItem(
+      `${config.storage?.key}.recentConnectorId`
+    )
+    if (recentConnectorId?.includes?.('baseAccount') || !props.lazy) {
+      connectors.unshift(createBaseAccountConnector(props.baseAccount))
+    }
+  }
+
   return {
     config,
     connectors,

packages/wallet-management/src/hooks/useCombinedWallets.ts

@@ -11,9 +11,11 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { useMemo } from 'react'
 import type { Connector } from 'wagmi'
 import { useConnect } from 'wagmi'
+import { defaultBaseAccountConfig } from '../config/baseAccount.js'
 import { defaultCoinbaseConfig } from '../config/coinbase.js'
 import { defaultMetaMaskConfig } from '../config/metaMask.js'
 import { defaultWalletConnectConfig } from '../config/walletConnect.js'
+import { createBaseAccountConnector } from '../connectors/baseAccount.js'
 import { createCoinbaseConnector } from '../connectors/coinbase.js'
 import { createMetaMaskConnector } from '../connectors/metaMask.js'
 import type { CreateConnectorFnExtended } from '../connectors/types.js'
@@ -172,6 +174,17 @@ export const useCombinedWallets = () => {
         createMetaMaskConnector(walletConfig?.metaMask ?? defaultMetaMaskConfig)
       )
     }
+    if (
+      !evmConnectors.some((connector) =>
+        connector.id.toLowerCase().includes('baseaccount')
+      )
+    ) {
+      evmConnectors.unshift(
+        createBaseAccountConnector(
+          walletConfig?.baseAccount ?? defaultBaseAccountConfig
+        )
+      )
+    }
 
     const includeEcosystem = (chainType: ChainType) =>
       !walletConfig.enabledChainTypes ||

packages/wallet-management/src/icons.ts

@@ -11,6 +11,8 @@ export const getWalletIcon = (id: string): string | undefined => {
     case 'metaMaskSDK':
     case 'io.metamask':
       return 'https://lifinance.github.io/types/src/assets/icons/wallets/metamask.svg'
+    case 'baseAccount':
+      return 'https://lifinance.github.io/types/src/assets/icons/wallets/baseAccount.svg'
     default:
       break
   }

packages/wallet-management/src/types/walletConfig.ts

@@ -1,4 +1,5 @@
 import type {
+  BaseAccountParameters,
   CoinbaseWalletParameters,
   MetaMaskParameters,
   WalletConnectParameters,
@@ -8,4 +9,5 @@ export interface WalletConfig {
   walletConnect?: WalletConnectParameters
   coinbase?: CoinbaseWalletParameters
   metaMask?: MetaMaskParameters
+  baseAccount?: BaseAccountParameters
 }

packages/wallet-management/src/utils/walletTags.ts

@@ -14,7 +14,11 @@ export const getConnectorTagType = (
     return WalletTagType.QrCode
   }
 
-  if (connectorId === 'metaMaskSDK' || connectorId === 'coinbaseWalletSDK') {
+  if (
+    connectorId === 'metaMaskSDK' ||
+    connectorId === 'coinbaseWalletSDK' ||
+    connectorId === 'baseAccount'
+  ) {
     return WalletTagType.GetStarted
   }