Investigation: trying to detect overwritten connector names

src/features/wallet/SideBarMenu.tsx

@@ -21,6 +21,7 @@ import { TransferContext } from '../transfer/types';
 
 import { useAccounts, useDisconnectFns } from './hooks/multiProtocol';
 import { AccountInfo } from './hooks/types';
+import { useConnectorName } from './hooks/useConnectorName';
 
 export function SideBarMenu({
   onConnectWallet,
@@ -144,6 +145,8 @@ export function SideBarMenu({
 }
 
 function AccountSummary({ account, address }: { account: AccountInfo; address: Address }) {
+  const connectorName = useConnectorName(account);
+
   const onClickCopy = async () => {
     if (!address) return;
     await tryClipboardSet(address);
@@ -160,7 +163,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">{account.connectorName || 'Wallet'}</div>
+        <div className="text-gray-800 text-sm font-normal">{connectorName}</div>
         <div className="text-xs text-left truncate w-64">{address ? address : 'Unknown'}</div>
       </div>
     </button>

src/features/wallet/WalletControlBar.tsx

@@ -11,13 +11,15 @@ import { useIsSsr } from '../../utils/ssr';
 import { SideBarMenu } from './SideBarMenu';
 import { WalletEnvSelectionModal } from './WalletEnvSelectionModal';
 import { useAccounts } from './hooks/multiProtocol';
+import { useConnectorName } from './hooks/useConnectorName';
 
 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 numReady = readyAccounts.length;
 
@@ -46,9 +48,7 @@ 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">
-                  {readyAccounts[0].connectorName || 'Wallet'}
-                </div>
+                <div className="text-xs text-gray-500">{connectorName}</div>
                 <div className="text-xs">
                   {readyAccounts[0].addresses.length
                     ? shortenAddress(readyAccounts[0].addresses[0].address, true)

src/features/wallet/hooks/useConnectorName.ts

@@ -0,0 +1,37 @@
+import { useAccount } from 'wagmi';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+
+import { ProtocolType } from '@hyperlane-xyz/utils';
+
+import { AccountInfo } from './types';
+
+function useEvmConnectorName(accountInfo: AccountInfo | undefined) {
+  const account = useAccount();
+
+  if (
+    account.connector instanceof InjectedConnector &&
+    accountInfo?.connectorName === account.connector.name
+  ) {
+    if (window.ethereum?.isOkxWallet || window.ethereum?.isOKExWallet)
+      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 account.connector?.name;
+}
+
+export function useConnectorName(account: AccountInfo | undefined) {
+  const evmConnectorName = useEvmConnectorName(account);
+
+  if (account?.protocol === ProtocolType.Ethereum && evmConnectorName) {
+    return evmConnectorName;
+  }
+
+  return account?.connectorName || 'Wallet';
+}