add wallet info (#2099)

packages/core/src/controllers/AccountController.ts

@@ -1,7 +1,7 @@
 import { subscribeKey as subKey } from 'valtio/utils'
 import { proxy, ref, subscribe as sub } from 'valtio/vanilla'
 import { CoreHelperUtil } from '../utils/CoreHelperUtil.js'
-import type { CaipAddress } from '../utils/TypeUtil.js'
+import type { CaipAddress, ConnectedWalletInfo } from '../utils/TypeUtil.js'
 import type { Balance } from '@web3modal/common'
 import { BlockchainApiController } from './BlockchainApiController.js'
 import { SnackController } from './SnackController.js'
@@ -19,6 +19,7 @@ export interface AccountControllerState {
   addressExplorerUrl?: string
   smartAccountDeployed?: boolean
   tokenBalance?: Balance[]
+  connectedWalletInfo?: ConnectedWalletInfo
 }
 
 type StateKey = keyof AccountControllerState
@@ -86,6 +87,10 @@ export const AccountController = {
     }
   },
 
+  setConnectedWalletInfo(connectedWalletInfo: AccountControllerState['connectedWalletInfo']) {
+    state.connectedWalletInfo = connectedWalletInfo
+  },
+
   async fetchTokenBalance() {
     try {
       if (state.address) {
@@ -110,5 +115,6 @@ export const AccountController = {
     state.profileImage = undefined
     state.addressExplorerUrl = undefined
     state.tokenBalance = []
+    state.connectedWalletInfo = undefined
   }
 }

packages/core/src/utils/TypeUtil.ts

@@ -20,6 +20,14 @@ export interface CaipNetwork {
   imageUrl?: string
 }
 
+export type ConnectedWalletInfo =
+  | {
+      name?: string
+      icon?: string
+      [key: string]: unknown
+    }
+  | undefined
+
 export interface LinkingRecord {
   redirect: string
   href: string
@@ -38,7 +46,12 @@ export type Connector = {
   imageId?: string
   explorerId?: string
   imageUrl?: string
-  info?: { rdns?: string }
+  info?: {
+    uuid?: string
+    name?: string
+    icon?: string
+    rdns?: string
+  }
   provider?: unknown
 }
 

packages/ethers/exports/react.tsx

@@ -81,7 +81,8 @@ export {
   useWeb3ModalTheme,
   useWeb3Modal,
   useWeb3ModalState,
-  useWeb3ModalEvents
+  useWeb3ModalEvents,
+  useWalletInfo
 } from '@web3modal/scaffold-react'
 
 // -- Universal Exports -------------------------------------------------------

packages/ethers/exports/vue.ts

@@ -116,7 +116,8 @@ export {
   useWeb3ModalTheme,
   useWeb3Modal,
   useWeb3ModalState,
-  useWeb3ModalEvents
+  useWeb3ModalEvents,
+  useWalletInfo
 } from '@web3modal/scaffold-vue'
 
 // -- Universal Exports -------------------------------------------------------

packages/ethers/src/client.ts

@@ -70,16 +70,11 @@ interface Info {
   rdns: string
 }
 
-interface Wallet {
+interface EIP6963ProviderDetail {
   info: Info
   provider: Provider
 }
 
-interface IEIP6963Provider {
-  name: string
-  provider: Provider
-}
-
 interface ExternalProvider extends EthereumProvider {
   _addresses?: string[]
 }
@@ -88,7 +83,7 @@ interface ExternalProvider extends EthereumProvider {
 export class Web3Modal extends Web3ModalScaffold {
   private hasSyncedConnectedAccount = false
 
-  private EIP6963Providers: IEIP6963Provider[] = []
+  private EIP6963Providers: EIP6963ProviderDetail[] = []
 
   private walletConnectProvider?: EthereumProvider
 
@@ -516,10 +511,10 @@ export class Web3Modal extends Web3ModalScaffold {
     const currentActiveWallet = window?.localStorage.getItem(EthersConstantsUtil.WALLET_ID)
     if (currentActiveWallet) {
       const currentProvider = this.EIP6963Providers.find(
-        provider => provider.name === currentActiveWallet
+        provider => provider.info.name === currentActiveWallet
       )
       if (currentProvider) {
-        this.setEIP6963Provider(currentProvider.provider, currentProvider.name)
+        this.setEIP6963Provider(currentProvider.provider, currentProvider.info.name)
       }
     }
   }
@@ -831,7 +826,7 @@ export class Web3Modal extends Web3ModalScaffold {
       this.setIsConnected(isConnected)
 
       this.setCaipAddress(caipAddress)
-
+      this.syncConnectedWalletInfo()
       await Promise.all([
         this.syncProfile(address),
         this.syncBalance(address),
@@ -924,6 +919,39 @@ export class Web3Modal extends Web3ModalScaffold {
     }
   }
 
+  private syncConnectedWalletInfo() {
+    const currentActiveWallet = window?.localStorage.getItem(EthersConstantsUtil.WALLET_ID)
+    const providerType = EthersStoreUtil.state.providerType
+
+    if (providerType === ConstantsUtil.EIP6963_CONNECTOR_ID) {
+      if (currentActiveWallet) {
+        const currentProvider = this.EIP6963Providers.find(
+          provider => provider.info.name === currentActiveWallet
+        )
+
+        if (currentProvider) {
+          this.setConnectedWalletInfo({
+            ...currentProvider.info
+          })
+        }
+      }
+    } else if (providerType === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID) {
+      const provider = EthersStoreUtil.state.provider as unknown as EthereumProvider
+
+      if (provider.session) {
+        this.setConnectedWalletInfo({
+          ...provider.session.peer.metadata,
+          name: provider.session.peer.metadata.name,
+          icon: provider.session.peer.metadata.icons?.[0]
+        })
+      }
+    } else if (currentActiveWallet) {
+      this.setConnectedWalletInfo({
+        name: currentActiveWallet
+      })
+    }
+  }
+
   public async switchNetwork(chainId: number) {
     const provider = EthersStoreUtil.state.provider
     const providerType = EthersStoreUtil.state.providerType
@@ -1107,7 +1135,7 @@ export class Web3Modal extends Web3ModalScaffold {
     }
   }
 
-  private eip6963EventHandler(event: CustomEventInit<Wallet>) {
+  private eip6963EventHandler(event: CustomEventInit<EIP6963ProviderDetail>) {
     if (event.detail) {
       const { info, provider } = event.detail
       const connectors = this.getConnectors()
@@ -1127,8 +1155,8 @@ export class Web3Modal extends Web3ModalScaffold {
           })
 
           const eip6963ProviderObj = {
-            name: info.name,
-            provider
+            provider,
+            info
           }
 
           this.EIP6963Providers.push(eip6963ProviderObj)

packages/ethers5/exports/react.tsx

@@ -81,7 +81,8 @@ export {
   useWeb3ModalTheme,
   useWeb3Modal,
   useWeb3ModalState,
-  useWeb3ModalEvents
+  useWeb3ModalEvents,
+  useWalletInfo
 } from '@web3modal/scaffold-react'
 
 // -- Universal Exports -------------------------------------------------------

packages/ethers5/exports/vue.ts

@@ -118,7 +118,8 @@ export {
   useWeb3ModalTheme,
   useWeb3Modal,
   useWeb3ModalState,
-  useWeb3ModalEvents
+  useWeb3ModalEvents,
+  useWalletInfo
 } from '@web3modal/scaffold-vue'
 
 // -- Universal Exports -------------------------------------------------------

packages/ethers5/src/client.ts

@@ -61,16 +61,11 @@ interface Info {
   rdns: string
 }
 
-interface Wallet {
+interface EIP6963ProviderDetail {
   info: Info
   provider: Provider
 }
 
-interface IEIP6963Provider {
-  name: string
-  provider: Provider
-}
-
 interface ExternalProvider extends EthereumProvider {
   _addresses?: string[]
 }
@@ -79,7 +74,7 @@ interface ExternalProvider extends EthereumProvider {
 export class Web3Modal extends Web3ModalScaffold {
   private hasSyncedConnectedAccount = false
 
-  private EIP6963Providers: IEIP6963Provider[] = []
+  private EIP6963Providers: EIP6963ProviderDetail[] = []
 
   private walletConnectProvider?: EthereumProvider
 
@@ -485,10 +480,10 @@ export class Web3Modal extends Web3ModalScaffold {
     const currentActiveWallet = window?.localStorage.getItem(EthersConstantsUtil.WALLET_ID)
     if (currentActiveWallet) {
       const currentProvider = this.EIP6963Providers.find(
-        provider => provider.name === currentActiveWallet
+        provider => provider.info.name === currentActiveWallet
       )
       if (currentProvider) {
-        this.setEIP6963Provider(currentProvider.provider, currentProvider.name)
+        this.setEIP6963Provider(currentProvider.provider, currentProvider.info.name)
       }
     }
   }
@@ -714,6 +709,7 @@ export class Web3Modal extends Web3ModalScaffold {
       this.setIsConnected(isConnected)
 
       this.setCaipAddress(caipAddress)
+      this.syncConnectedWalletInfo()
 
       await Promise.all([
         this.syncProfile(address),
@@ -804,6 +800,39 @@ export class Web3Modal extends Web3ModalScaffold {
     }
   }
 
+  private syncConnectedWalletInfo() {
+    const currentActiveWallet = window?.localStorage.getItem(EthersConstantsUtil.WALLET_ID)
+    const providerType = EthersStoreUtil.state.providerType
+
+    if (providerType === ConstantsUtil.EIP6963_CONNECTOR_ID) {
+      if (currentActiveWallet) {
+        const currentProvider = this.EIP6963Providers.find(
+          provider => provider.info.name === currentActiveWallet
+        )
+
+        if (currentProvider) {
+          this.setConnectedWalletInfo({
+            ...currentProvider.info
+          })
+        }
+      }
+    } else if (providerType === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID) {
+      const provider = EthersStoreUtil.state.provider as unknown as EthereumProvider
+
+      if (provider.session) {
+        this.setConnectedWalletInfo({
+          ...provider.session.peer.metadata,
+          name: provider.session.peer.metadata.name,
+          icon: provider.session.peer.metadata.icons?.[0]
+        })
+      }
+    } else if (currentActiveWallet) {
+      this.setConnectedWalletInfo({
+        name: currentActiveWallet
+      })
+    }
+  }
+
   public async switchNetwork(chainId: number) {
     const provider = EthersStoreUtil.state.provider
     const providerType = EthersStoreUtil.state.providerType
@@ -954,7 +983,7 @@ export class Web3Modal extends Web3ModalScaffold {
     this.setConnectors(w3mConnectors)
   }
 
-  private eip6963EventHandler(event: CustomEventInit<Wallet>) {
+  private eip6963EventHandler(event: CustomEventInit<EIP6963ProviderDetail>) {
     if (event.detail) {
       const { info, provider } = event.detail
       const connectors = this.getConnectors()
@@ -973,7 +1002,7 @@ export class Web3Modal extends Web3ModalScaffold {
           })
 
           const eip6963ProviderObj = {
-            name: info.name,
+            info,
             provider
           }
 

packages/scaffold-react/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 import type {
   W3mAccountButton,
   W3mButton,
@@ -86,6 +86,20 @@ export function useWeb3Modal() {
   return { open, close }
 }
 
+export function useWalletInfo() {
+  if (!modal) {
+    throw new Error('Please call "createWeb3Modal" before using "useWeb3Modal" hook')
+  }
+
+  const walletInfo = useSyncExternalStore(
+    modal.subscribeWalletInfo,
+    modal.getWalletInfo,
+    modal.getWalletInfo
+  )
+
+  return { walletInfo }
+}
+
 export function useWeb3ModalState() {
   if (!modal) {
     throw new Error('Please call "createWeb3Modal" before using "useWeb3ModalState" hook')

packages/scaffold-vue/index.ts

@@ -85,6 +85,24 @@ export function useWeb3Modal() {
   })
 }
 
+export function useWalletInfo() {
+  if (!modal) {
+    throw new Error('Please call "createWeb3Modal" before using "useWeb3Modal" composable')
+  }
+
+  const walletInfo = ref(modal.getWalletInfo())
+
+  const unsubscribe = modal.subscribeWalletInfo(newValue => {
+    walletInfo.value = newValue
+  })
+
+  onUnmounted(() => {
+    unsubscribe?.()
+  })
+
+  return { walletInfo }
+}
+
 export function useWeb3ModalState() {
   if (!modal) {
     throw new Error('Please call "createWeb3Modal" before using "useWeb3ModalState" composable')