fix: show wallet info in useWalletInfo hook for ethers and ethers5

.changeset/light-geese-stare.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: show wallet info in useWalletInfo hook for ethers and ethers5

packages/auth-ethers/package.json

@@ -36,6 +36,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@reown/appkit-common-react-native": "1.2.1",
     "@reown/appkit-wallet-react-native": "1.2.1"
   },
   "peerDependencies": {

packages/auth-ethers/src/index.ts

@@ -1,13 +1,13 @@
 import { AppKitFrameProvider, type AppKitFrameTypes } from '@reown/appkit-wallet-react-native';
-
+import { ConstantsUtil, PresetsUtil } from '@reown/appkit-common-react-native';
 interface AuthProviderProps {
   projectId: string;
   metadata: AppKitFrameTypes.Metadata;
 }
 
 export class AuthProvider extends AppKitFrameProvider {
-  readonly id = 'appKitAuth';
-  readonly name = 'AppKit Auth';
+  readonly id = ConstantsUtil.AUTH_CONNECTOR_ID;
+  readonly name = PresetsUtil.ConnectorNamesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!;
 
   constructor(props: AuthProviderProps) {
     super(props.projectId, props.metadata);

packages/auth-wagmi/package.json

@@ -36,6 +36,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@reown/appkit-common-react-native": "1.2.1",
     "@reown/appkit-core-react-native": "1.2.1",
     "@reown/appkit-wallet-react-native": "1.2.1"
   },

packages/auth-wagmi/src/index.ts

@@ -3,6 +3,7 @@ import { SwitchChainError, getAddress, type Address, type Hex } from 'viem';
 
 import { AppKitFrameProvider } from '@reown/appkit-wallet-react-native';
 import { StorageUtil } from '@reown/appkit-core-react-native';
+import { ConstantsUtil, PresetsUtil } from '@reown/appkit-common-react-native';
 
 export type Metadata = {
   name: string;
@@ -26,16 +27,16 @@ type StorageItemMap = {
   recentConnectorId?: string;
 };
 
-authConnector.type = 'appKitAuth' as const;
-authConnector.id = 'appKitAuth' as const;
+authConnector.type = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!;
+authConnector.id = ConstantsUtil.AUTH_CONNECTOR_ID;
 export function authConnector(parameters: AuthConnectorOptions) {
   let _provider: AppKitFrameProvider = {} as AppKitFrameProvider;
   let _currentAddress: Address | null = null;
   let _chainId: number | null = null;
 
   return createConnector<Provider, {}, StorageItemMap>(config => ({
     id: authConnector.id,
-    name: 'AppKit Auth',
+    name: PresetsUtil.ConnectorNamesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!,
     type: authConnector.type,
     async setup() {
       _provider = new AppKitFrameProvider(parameters.projectId, parameters.metadata);

packages/coinbase-ethers/package.json

@@ -36,6 +36,9 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "dependencies": {
+    "@reown/appkit-common-react-native": "1.2.1"
+  },
   "peerDependencies": {
     "@coinbase/wallet-mobile-sdk": ">=1.0.10",
     "ethers": ">=5"

packages/coinbase-ethers/src/index.ts

@@ -1,5 +1,6 @@
 import { configure, WalletMobileSDKEVMProvider } from '@coinbase/wallet-mobile-sdk';
 import type { WalletMobileSDKProviderOptions } from '@coinbase/wallet-mobile-sdk/build/WalletMobileSDKEVMProvider';
+import { ConstantsUtil, PresetsUtil } from '@reown/appkit-common-react-native';
 
 interface RequestArguments {
   readonly method: string;
@@ -12,8 +13,8 @@ type CoinbaseProviderOptions = WalletMobileSDKProviderOptions & {
 };
 
 export class CoinbaseProvider {
-  readonly id = 'coinbaseWallet';
-  readonly name = 'Coinbase Wallet';
+  readonly id = ConstantsUtil.COINBASE_CONNECTOR_ID;
+  readonly name = PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_CONNECTOR_ID]!;
 
   private _provider?: WalletMobileSDKEVMProvider;
   private _initProviderPromise?: Promise<void>;

packages/coinbase-wagmi/package.json

@@ -36,6 +36,9 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "dependencies": {
+    "@reown/appkit-common-react-native": "1.2.1"
+  },
   "peerDependencies": {
     "@coinbase/wallet-mobile-sdk": ">=1.0.10",
     "wagmi": ">=2"

packages/coinbase-wagmi/src/index.ts

@@ -8,20 +8,21 @@ import {
 } from 'viem';
 import { WalletMobileSDKEVMProvider, configure } from '@coinbase/wallet-mobile-sdk';
 import type { WalletMobileSDKProviderOptions } from '@coinbase/wallet-mobile-sdk/build/WalletMobileSDKEVMProvider';
+import { ConstantsUtil, PresetsUtil } from '@reown/appkit-common-react-native';
 
 type CoinbaseConnectorParameters = WalletMobileSDKProviderOptions & {
   redirect: string;
 };
 
 type Provider = WalletMobileSDKEVMProvider;
 
-coinbaseConnector.type = 'coinbaseWallet' as const;
+coinbaseConnector.type = PresetsUtil.ConnectorTypesMap[ConstantsUtil.COINBASE_CONNECTOR_ID]!;
 export function coinbaseConnector(parameters: CoinbaseConnectorParameters) {
   let _provider: Provider;
 
   return createConnector<Provider>(config => ({
-    id: 'coinbaseWallet',
-    name: 'Coinbase Wallet',
+    id: ConstantsUtil.COINBASE_CONNECTOR_ID,
+    name: PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_CONNECTOR_ID]!,
     type: coinbaseConnector.type,
     async connect({ chainId } = {}) {
       try {

packages/common/src/index.ts

@@ -4,6 +4,7 @@ export { DateUtil } from './utils/DateUtil';
 export { NamesUtil } from './utils/NamesUtil';
 export { NetworkUtil } from './utils/NetworkUtil';
 export { NumberUtil } from './utils/NumberUtil';
+export { PresetsUtil } from './utils/PresetsUtil';
 export { StringUtil } from './utils/StringUtil';
 export { ErrorUtil } from './utils/ErrorUtil';
 export { erc20ABI } from './contracts/erc20';

packages/common/src/utils/ConstantsUtil.ts

@@ -1,11 +1,22 @@
 export const ConstantsUtil = {
+  VERSION: '1.2.1',
+
+  EIP155: 'eip155',
+  ADD_CHAIN_METHOD: 'wallet_addEthereumChain',
+
   WC_NAME_SUFFIX: '.reown.id',
   WC_NAME_SUFFIX_LEGACY: '.wcn.id',
+
   BLOCKCHAIN_API_RPC_URL: 'https://rpc.walletconnect.org',
   PULSE_API_URL: 'https://pulse.walletconnect.org',
   API_URL: 'https://api.web3modal.org',
+
+  WALLET_CONNECT_CONNECTOR_ID: 'walletConnect',
   COINBASE_CONNECTOR_ID: 'coinbaseWallet',
+  AUTH_CONNECTOR_ID: 'appKitAuth',
+
   COINBASE_EXPLORER_ID: 'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa',
+
   USDT_CONTRACT_ADDRESSES: [
     // Mainnet
     '0xdac17f958d2ee523a2206206994597c13d831ec7',

packages/scaffold-utils/src/utils/PresetsUtil.ts → packages/common/src/utils/PresetsUtil.ts

@@ -1,4 +1,4 @@
-import type { ConnectorType } from '@reown/appkit-scaffold-react-native';
+import type { ConnectorType } from './TypeUtil';
 import { ConstantsUtil } from './ConstantsUtil';
 
 export const PresetsUtil = {
@@ -48,17 +48,17 @@ export const PresetsUtil = {
     1313161554: '3ff73439-a619-4894-9262-4470c773a100'
   } as Record<string, string>,
 
+  ConnectorNamesMap: {
+    [ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]: 'WalletConnect',
+    [ConstantsUtil.COINBASE_CONNECTOR_ID]: 'Coinbase Wallet',
+    [ConstantsUtil.AUTH_CONNECTOR_ID]: 'AppKit Universal Wallet'
+  } as Record<string, string>,
+
   ConnectorImageIds: {
     [ConstantsUtil.COINBASE_CONNECTOR_ID]: '0c2840c3-5b04-4c44-9661-fbd4b49e1800',
     [ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]: 'ef1a1fcf-7fe8-4d69-bd6d-fda1345b4400'
   } as Record<string, string>,
 
-  ConnectorNamesMap: {
-    [ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]: 'WalletConnect',
-    [ConstantsUtil.COINBASE_CONNECTOR_ID]: 'Coinbase',
-    [ConstantsUtil.AUTH_CONNECTOR_ID]: 'Auth'
-  } as Record<string, string>,
-
   ConnectorTypesMap: {
     [ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]: 'WALLET_CONNECT',
     [ConstantsUtil.COINBASE_CONNECTOR_ID]: 'COINBASE',

packages/common/src/utils/TypeUtil.ts

@@ -93,3 +93,5 @@ export type ThemeMode = 'dark' | 'light';
 export interface ThemeVariables {
   accent?: string;
 }
+
+export type ConnectorType = 'WALLET_CONNECT' | 'COINBASE' | 'AUTH' | 'EXTERNAL';

packages/core/src/controllers/ConnectorController.ts

@@ -1,6 +1,7 @@
+import type { ConnectorType } from '@reown/appkit-common-react-native';
 import { subscribeKey as subKey } from 'valtio/utils';
 import { proxy, ref } from 'valtio';
-import type { Connector, ConnectorType } from '../utils/TypeUtil';
+import type { Connector } from '../utils/TypeUtil';
 import { StorageUtil } from '../utils/StorageUtil';
 
 // -- Types --------------------------------------------- //

packages/core/src/utils/StorageUtil.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import type { ConnectorType, WcWallet } from './TypeUtil';
-import type { SocialProvider } from '@reown/appkit-common-react-native';
+import type { WcWallet } from './TypeUtil';
+import type { SocialProvider, ConnectorType } from '@reown/appkit-common-react-native';
 
 // -- Helpers -----------------------------------------------------------------
 const WC_DEEPLINK = 'WALLETCONNECT_DEEPLINK_CHOICE';

packages/core/src/utils/TypeUtil.ts

@@ -3,7 +3,8 @@ import type {
   Balance,
   SocialProvider,
   ThemeMode,
-  Transaction
+  Transaction,
+  ConnectorType
 } from '@reown/appkit-common-react-native';
 
 export interface BaseError {
@@ -38,8 +39,6 @@ export type ProjectId = string;
 
 export type Platform = 'mobile' | 'web' | 'qrcode' | 'email' | 'unsupported';
 
-export type ConnectorType = 'WALLET_CONNECT' | 'COINBASE' | 'AUTH' | 'EXTERNAL';
-
 export type Connector = {
   id: string;
   type: ConnectorType;

packages/ethers/src/client.ts

@@ -28,10 +28,15 @@ import {
   type AppKitFrameAccountType,
   type EstimateGasTransactionArgs
 } from '@reown/appkit-scaffold-react-native';
-import { erc20ABI, ErrorUtil, NamesUtil, NetworkUtil } from '@reown/appkit-common-react-native';
 import {
-  ConstantsUtil,
+  erc20ABI,
+  ErrorUtil,
+  NamesUtil,
+  NetworkUtil,
   PresetsUtil,
+  ConstantsUtil
+} from '@reown/appkit-common-react-native';
+import {
   HelpersUtil,
   StorageUtil,
   EthersConstantsUtil,
@@ -450,6 +455,10 @@ export class AppKit extends AppKitScaffold {
       this.syncNetwork(chainImages);
     });
 
+    EthersStoreUtil.subscribeKey('provider', provider => {
+      this.syncConnectedWalletInfo(provider);
+    });
+
     this.syncRequestedNetworks(chains, chainImages);
     this.syncConnectors(config);
     this.syncAuthConnector(config);
@@ -953,14 +962,15 @@ export class AppKit extends AppKitScaffold {
             explorerId: PresetsUtil.ConnectorExplorerIds[ConstantsUtil.COINBASE_CONNECTOR_ID],
             imageId: PresetsUtil.ConnectorImageIds[ConstantsUtil.COINBASE_CONNECTOR_ID],
             imageUrl: this.options?.connectorImages?.[ConstantsUtil.COINBASE_CONNECTOR_ID],
-            name: PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_CONNECTOR_ID],
+            name:
+              connector?.name ?? PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_CONNECTOR_ID],
             type: PresetsUtil.ConnectorTypesMap[ConstantsUtil.COINBASE_CONNECTOR_ID]!
           });
           this.checkActiveCoinbaseProvider(connector as Provider);
         } else {
           _connectors.push({
             id: connector.id,
-            name: connector.name,
+            name: connector.name ?? PresetsUtil.ConnectorNamesMap[connector.id],
             type: 'EXTERNAL'
           });
         }
@@ -1002,6 +1012,33 @@ export class AppKit extends AppKitScaffold {
     this.addAuthListeners(this.authProvider);
   }
 
+  private async syncConnectedWalletInfo(provider?: Provider) {
+    if (!provider) {
+      this.setConnectedWalletInfo(undefined);
+
+      return;
+    }
+
+    if ((provider as any)?.session?.peer?.metadata) {
+      const metadata = (provider as unknown as EthereumProvider)?.session?.peer.metadata;
+      if (metadata) {
+        this.setConnectedWalletInfo({
+          ...metadata,
+          name: metadata.name,
+          icon: metadata.icons?.[0]
+        });
+      }
+    } else if (provider?.id) {
+      this.setConnectedWalletInfo({
+        id: provider.id,
+        name: provider?.name ?? PresetsUtil.ConnectorNamesMap[provider.id],
+        icon: this.options?.connectorImages?.[provider.id]
+      });
+    } else {
+      this.setConnectedWalletInfo(undefined);
+    }
+  }
+
   private async addAuthListeners(authProvider: AppKitFrameProvider) {
     authProvider.onSetPreferredAccount(async ({ address, type }) => {
       if (address) {

packages/ethers/src/index.tsx

@@ -1,10 +1,6 @@
 import { useEffect, useState, useSyncExternalStore } from 'react';
 import { useSnapshot } from 'valtio';
-import {
-  ConstantsUtil,
-  EthersStoreUtil,
-  type Provider
-} from '@reown/appkit-scaffold-utils-react-native';
+import { EthersStoreUtil, type Provider } from '@reown/appkit-scaffold-utils-react-native';
 
 export {
   AccountButton,
@@ -14,7 +10,7 @@ export {
   AppKit
 } from '@reown/appkit-scaffold-react-native';
 import type { EventName, EventsControllerState } from '@reown/appkit-scaffold-react-native';
-
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 export { defaultConfig } from './utils/defaultConfig';
 
 import type { AppKitOptions } from './client';

packages/ethers/src/utils/helpers.ts

@@ -1,5 +1,5 @@
 import type { CaipNetworkId } from '@reown/appkit-scaffold-react-native';
-import { PresetsUtil, ConstantsUtil } from '@reown/appkit-scaffold-utils-react-native';
+import { PresetsUtil, ConstantsUtil } from '@reown/appkit-common-react-native';
 import EthereumProvider from '@walletconnect/ethereum-provider';
 
 export async function getWalletConnectCaipNetworks(provider?: EthereumProvider) {