diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx index 1e8666f1..3e9cde75 100644 --- a/packages/ui/src/components/common/MultiWalletDropdown.tsx +++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx @@ -101,12 +101,20 @@ export const MultiWalletDropdown: FC = ({ const showDropdown = context !== 'origin' || filteredWallets.length > 0 + const isEnsCapableVmType = + chain?.vmType === 'evm' || + chain?.vmType === 'hypevm' || + selectedWallet?.vmType === 'evm' || + selectedWallet?.vmType === 'hypevm' + + const shouldResolveEns = isEnsCapableVmType && isSupportedSelectedWallet + const { displayName } = useENSResolver(selectedWalletAddress, { - enabled: - (chain?.vmType === 'evm' || chain?.vmType === 'hypevm') && - isSupportedSelectedWallet + enabled: shouldResolveEns }) + const shouldShowEns = isEnsCapableVmType && Boolean(displayName) + return ( = ({ {isSupportedSelectedWallet && selectedWalletAddress && selectedWalletAddress != '' - ? displayName && - (chain?.vmType === 'evm' || chain?.vmType === 'hypevm') + ? shouldShowEns ? displayName : truncateAddress(selectedWalletAddress) : 'Select wallet'} diff --git a/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx b/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx index 28f4075d..c3138f7b 100644 --- a/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx +++ b/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx @@ -35,6 +35,7 @@ import type { DebouncedState } from 'usehooks-ts' import type { AdaptedWallet } from '@relayprotocol/relay-sdk' import type { LinkedWallet } from '../../../../types/index.js' import { + addressesEqual, addressWithFallback, isValidAddress } from '../../../../utils/address.js' @@ -293,22 +294,25 @@ const TokenWidgetRenderer: FC = ({ return defaultAddress } - // Find the first wallet that supports the target chain's VM type - const compatibleWallet = linkedWallets.find((wallet) => { - // Check if wallet VM matches chain VM - if (wallet.vmType !== targetChain.vmType) { - return false - } - - // Additional validation for specific chains - return isValidAddress( + const isCompatibleWallet = (wallet: LinkedWallet) => + wallet.vmType === targetChain.vmType && + isValidAddress( targetChain.vmType, wallet.address, targetChain.id, wallet.connector, connectorKeyOverrides ) - }) + + const activeLinkedWallet = linkedWallets.find((wallet) => + addressesEqual(wallet.vmType, wallet.address, defaultAddress) + ) + + if (activeLinkedWallet && isCompatibleWallet(activeLinkedWallet)) { + return activeLinkedWallet.address + } + + const compatibleWallet = linkedWallets.find(isCompatibleWallet) return compatibleWallet?.address || defaultAddress }, [