refactor: align with other multiProvider hooks

src/features/wallet/SideBarMenu.tsx

@@ -19,9 +19,8 @@ import { useStore } from '../store';
 import { TransfersDetailsModal } from '../transfer/TransfersDetailsModal';
 import { TransferContext } from '../transfer/types';
 
-import { useAccounts, useDisconnectFns } from './hooks/multiProtocol';
+import { useAccounts, useConnectorNames, useDisconnectFns } from './hooks/multiProtocol';
 import { AccountInfo } from './hooks/types';
-import { useConnectorName } from './hooks/useConnectorName';
 
 export function SideBarMenu({
   onConnectWallet,
@@ -145,7 +144,7 @@ export function SideBarMenu({
 }
 
 function AccountSummary({ account, address }: { account: AccountInfo; address: Address }) {
-  const connectorName = useConnectorName(account);
+  const connectorNames = useConnectorNames();
 
   const onClickCopy = async () => {
     if (!address) return;
@@ -163,7 +162,7 @@ function AccountSummary({ account, address }: { account: AccountInfo; address: A
         <Identicon address={address} size={40} />
       </div>
       <div className="flex flex-col mx-3 items-start">
-        <div className="text-gray-800 text-sm font-normal">{connectorName}</div>
+        <div className="text-gray-800 text-sm font-normal">{connectorNames[account.protocol]}</div>
         <div className="text-xs text-left truncate w-64">{address ? address : 'Unknown'}</div>
       </div>
     </button>

src/features/wallet/WalletControlBar.tsx

@@ -10,16 +10,15 @@ import { useIsSsr } from '../../utils/ssr';
 
 import { SideBarMenu } from './SideBarMenu';
 import { WalletEnvSelectionModal } from './WalletEnvSelectionModal';
-import { useAccounts } from './hooks/multiProtocol';
-import { useConnectorName } from './hooks/useConnectorName';
+import { useAccounts, useConnectorNames } from './hooks/multiProtocol';
 
 export function WalletControlBar() {
   const [showEnvSelectModal, setShowEnvSelectModal] = useState(false);
   const [isSideBarOpen, setIsSideBarOpen] = useState(false);
 
   const { readyAccounts } = useAccounts();
   const isSsr = useIsSsr();
-  const connectorName = useConnectorName(readyAccounts[0]);
+  const connectorNames = useConnectorNames();
 
   const numReady = readyAccounts.length;
 
@@ -48,7 +47,9 @@ export function WalletControlBar() {
             <div className="flex items-center justify-center">
               <Identicon address={readyAccounts[0].addresses[0]?.address} size={26} />
               <div className="flex flex-col mx-3 items-start">
-                <div className="text-xs text-gray-500">{connectorName}</div>
+                <div className="text-xs text-gray-500">
+                  {connectorNames[readyAccounts[0].protocol]}
+                </div>
                 <div className="text-xs">
                   {readyAccounts[0].addresses.length
                     ? shortenAddress(readyAccounts[0].addresses[0].address, true)

src/features/wallet/hooks/cosmos.ts

@@ -107,3 +107,9 @@ export function useCosmosTransactionFns(): ChainTransactionFns {
 
   return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork };
 }
+
+export function useCosmosConnectorName() {
+  const account = useCosmosAccount();
+
+  return account.connectorName;
+}

src/features/wallet/hooks/evm.ts

@@ -2,6 +2,7 @@ import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { getNetwork, sendTransaction, switchNetwork, waitForTransaction } from '@wagmi/core';
 import { useCallback, useMemo } from 'react';
 import { useAccount, useDisconnect, useNetwork } from 'wagmi';
+import { InjectedConnector } from 'wagmi/connectors/injected';
 
 import { ProviderType, TypedTransactionReceipt, WarpTypedTransaction } from '@hyperlane-xyz/sdk';
 import { ProtocolType, assert, sleep } from '@hyperlane-xyz/utils';
@@ -103,3 +104,22 @@ export function useEvmTransactionFns(): ChainTransactionFns {
 
   return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork };
 }
+
+export function useEvmConnectorName() {
+  const { connector } = useAccount();
+  const account = useEvmAccount();
+
+  if (connector instanceof InjectedConnector && account?.connectorName === connector.name) {
+    if (window.ethereum?.isOkxWallet || window.ethereum?.isOKExWallet) return 'OKX';
+    if (window.ethereum?.isBackpack) return 'Backpack';
+    if (window.ethereum?.isFrame) return 'Frame';
+    if (window.ethereum?.isPhantom) return 'Phantom';
+
+    const keys = Object.keys({ ...window.ethereum });
+    if (keys.includes('isOkxWallet') || keys.includes('isOKExWallet')) {
+      return 'OKX';
+    }
+  }
+
+  return connector?.name;
+}

src/features/wallet/hooks/multiProtocol.tsx

@@ -11,13 +11,15 @@ import {
   useCosmosAccount,
   useCosmosActiveChain,
   useCosmosConnectFn,
+  useCosmosConnectorName,
   useCosmosDisconnectFn,
   useCosmosTransactionFns,
 } from './cosmos';
 import {
   useEvmAccount,
   useEvmActiveChain,
   useEvmConnectFn,
+  useEvmConnectorName,
   useEvmDisconnectFn,
   useEvmTransactionFns,
 } from './evm';
@@ -27,6 +29,7 @@ import {
   useSolConnectFn,
   useSolDisconnectFn,
   useSolTransactionFns,
+  useSolanaConnectorName,
 } from './solana';
 import { AccountInfo, ActiveChainInfo, ChainTransactionFns } from './types';
 
@@ -195,3 +198,15 @@ export function useTransactionFns(): Record<ProtocolType, ChainTransactionFns> {
     ],
   );
 }
+
+export function useConnectorNames() {
+  const evmConnectorName = useEvmConnectorName();
+  const solanaConnectorName = useSolanaConnectorName();
+  const cosmosConnectorName = useCosmosConnectorName();
+
+  return {
+    [ProtocolType.Ethereum]: evmConnectorName || 'Wallet',
+    [ProtocolType.Sealevel]: solanaConnectorName || 'Wallet',
+    [ProtocolType.Cosmos]: cosmosConnectorName || 'Wallet',
+  };
+}

src/features/wallet/hooks/solana.ts

@@ -98,3 +98,9 @@ export function useSolTransactionFns(): ChainTransactionFns {
 
   return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork };
 }
+
+export function useSolanaConnectorName() {
+  const account = useSolAccount();
+
+  return account.connectorName;
+}