fix: send funds address format (#1123)

apps/extension/src/ui/domains/SendFunds/AddressDisplay.tsx

@@ -1,4 +1,5 @@
 import { convertAddress } from "@talisman/util/convertAddress"
+import { shortenAddress } from "@talisman/util/shortenAddress"
 import { Address as TAddress } from "@talismn/balances"
 import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
 import { CopyIcon, ExternalLinkIcon } from "@talismn/icons"
@@ -16,18 +17,18 @@ import urlJoin from "url-join"
 
 import { AccountIcon } from "../Account/AccountIcon"
 import { AccountTypeIcon } from "../Account/AccountTypeIcon"
-import { Address } from "../Account/Address"
 
 const useBlockExplorerUrl = (
   address?: TAddress | null,
   chainId?: ChainId | null,
-  evmNetworkId?: EvmNetworkId | null
+  evmNetworkId?: EvmNetworkId | null,
+  shouldFormatAddress = true
 ) => {
   const chain = useChain(chainId as string)
   const evmNetwork = useEvmNetwork(evmNetworkId as string)
   const resolvedAddress = useMemo(() => {
-    return chain && address ? convertAddress(address, chain.prefix) : address
-  }, [address, chain])
+    return shouldFormatAddress && chain && address ? convertAddress(address, chain.prefix) : address
+  }, [address, chain, shouldFormatAddress])
 
   return useMemo(() => {
     if (resolvedAddress && evmNetwork?.explorerUrl)
@@ -90,7 +91,12 @@ export const AddressDisplay: FC<AddressDisplayProps> = ({
   const account = useAccountByAddress(address)
   const contact = useContact(address)
   const chain = useChain(chainId as string)
-  const blockExplorerUrl = useBlockExplorerUrl(address, chainId, evmNetworkId)
+  const blockExplorerUrl = useBlockExplorerUrl(
+    address,
+    chainId,
+    evmNetworkId,
+    !!account || !!contact
+  )
 
   const resolvedAddress = useMemo(() => {
     return chain && address ? convertAddress(address, chain.prefix) : address
@@ -99,26 +105,21 @@ export const AddressDisplay: FC<AddressDisplayProps> = ({
   const [onChainId] = useOnChainId(resolvedAddress ?? undefined)
 
   const text = useMemo(
-    () =>
-      account?.name ??
-      contact?.name ??
-      (resolvedAddress ? (
-        <Address address={resolvedAddress} startCharCount={6} endCharCount={6} noTooltip />
-      ) : null),
-    [account?.name, contact?.name, resolvedAddress]
+    () => account?.name ?? contact?.name ?? (address ? shortenAddress(address, 6, 6) : null),
+    [account?.name, address, contact?.name]
   )
 
   const handleCopyAddress = useCallback(() => {
-    copyAddress(resolvedAddress as string)
-  }, [resolvedAddress])
+    copyAddress((!!account || !!contact ? resolvedAddress : address) as string)
+  }, [account, address, contact, resolvedAddress])
 
   if (!address || !resolvedAddress || !text) return null
 
   return (
     <Tooltip>
       <TooltipContent>
         <AddressTooltip
-          address={address}
+          address={account ? resolvedAddress : address} // don't show both formats for talisman accounts
           resolvedAddress={resolvedAddress}
           onChainId={onChainId ?? undefined}
           chainName={chain?.name}

apps/extension/src/ui/domains/SendFunds/SendFundsAccountPicker.tsx

@@ -56,6 +56,7 @@ export const SendFundsAccountPicker = () => {
       <ScrollContainer className=" bg-black-secondary border-grey-700 scrollable h-full w-full grow overflow-x-hidden border-t">
         <SendFundsAccountsList
           accounts={accounts}
+          genesisHash={chain?.genesisHash}
           selected={from}
           onSelect={handleSelect}
           showBalances

apps/extension/src/ui/domains/SendFunds/SendFundsAccountsList.tsx

@@ -26,11 +26,13 @@ export type SendFundsAccount = {
 
 type AccountRowProps = {
   account: SendFundsAccount
+  genesisHash?: string | null
   selected: boolean
   showBalances?: boolean
   token?: Token
   onClick?: () => void
   disabled?: boolean
+  noFormat?: boolean
 }
 
 const AccountTokenBalance = ({ token, balance }: { token?: Token; balance?: Balance }) => {
@@ -63,13 +65,23 @@ const AccountTokenBalance = ({ token, balance }: { token?: Token; balance?: Bala
 
 const AccountRow: FC<AccountRowProps> = ({
   account,
+  genesisHash,
+  noFormat,
   selected,
   onClick,
   showBalances,
   token,
   disabled,
 }) => {
-  const formattedAddress = useFormattedAddress(account?.address, account?.genesisHash)
+  const formattedAddress = useFormattedAddress(
+    account?.address,
+    genesisHash ?? account?.genesisHash
+  )
+
+  const displayAddress = useMemo(
+    () => (noFormat ? account?.address : formattedAddress),
+    [noFormat, account?.address, formattedAddress]
+  )
 
   return (
     <button
@@ -93,12 +105,12 @@ const AccountRow: FC<AccountRowProps> = ({
           <div className="flex items-center gap-2">
             <div className="truncate">
               {account.name ?? (
-                <Address address={formattedAddress} startCharCount={6} endCharCount={6} noTooltip />
+                <Address address={displayAddress} startCharCount={6} endCharCount={6} noTooltip />
               )}
             </div>
             <AccountTypeIcon origin={account.origin} className="text-primary" />
           </div>
-          <Address className="text-body-secondary text-xs" address={formattedAddress} />
+          <Address className="text-body-secondary text-xs" address={displayAddress} />
         </div>
         {selected && <CheckCircleIcon className="ml-3 inline shrink-0" />}
       </div>
@@ -109,6 +121,8 @@ const AccountRow: FC<AccountRowProps> = ({
 
 type SendFundsAccountsListProps = {
   accounts: SendFundsAccount[]
+  genesisHash?: string | null
+  noFormat?: boolean
   selected?: string | null
   onSelect?: (address: string) => void
   header?: ReactNode
@@ -121,6 +135,8 @@ type SendFundsAccountsListProps = {
 export const SendFundsAccountsList: FC<SendFundsAccountsListProps> = ({
   selected,
   accounts,
+  noFormat,
+  genesisHash,
   onSelect,
   header,
   allowZeroBalance,
@@ -173,6 +189,8 @@ export const SendFundsAccountsList: FC<SendFundsAccountsListProps> = ({
           selected={account.address === selected}
           key={account.address}
           account={account}
+          genesisHash={genesisHash}
+          noFormat={noFormat}
           onClick={handleAccountClick(account.address)}
           showBalances={showBalances}
           token={token}

apps/extension/src/ui/domains/SendFunds/SendFundsAmountForm.tsx

@@ -43,6 +43,7 @@ import { TokensAndFiat } from "../Asset/TokensAndFiat"
 import { EthFeeSelect } from "../Ethereum/GasSettings/EthFeeSelect"
 import { AddToAddressBookDrawer } from "./AddToAddressBookDrawer"
 import { SendFundsFeeTooltip } from "./SendFundsFeeTooltip"
+import { useGenesisHashFromTokenId } from "./useGenesisHashFromTokenId"
 import { useNetworkDetails } from "./useNetworkDetails"
 import { useSendFunds } from "./useSendFunds"
 
@@ -77,31 +78,48 @@ const Container: FC<ContainerProps> = (props) => {
   )
 }
 
-type AddressPillButtonProps = { address?: string | null; className?: string; onClick?: () => void }
+type AddressPillButtonProps = {
+  address?: string | null
+  genesisHash?: string | null
+  className?: string
+  onClick?: () => void
+}
 
-const AddressPillButton: FC<AddressPillButtonProps> = ({ address, className, onClick }) => {
+const AddressPillButton: FC<AddressPillButtonProps> = ({
+  address,
+  genesisHash,
+  className,
+  onClick,
+}) => {
   const account = useAccountByAddress(address as string)
   const contact = useContact(address)
 
-  const { name, genesisHash } = useMemo(() => {
+  const { name, genesisHash: accountGenesisHash } = useMemo(() => {
     if (account) return account
     if (contact) return { name: contact.name, genesisHash: undefined }
     return { name: undefined, genesisHash: undefined }
   }, [account, contact])
 
-  const formattedAddress = useFormattedAddress(address ?? undefined, genesisHash)
+  const formattedAddress = useFormattedAddress(
+    address ?? undefined,
+    genesisHash ?? accountGenesisHash
+  )
+  const displayAddress = useMemo(
+    () => (account ? formattedAddress : address) ?? undefined,
+    [account, address, formattedAddress]
+  )
 
   if (!address) return null
 
   return (
     <PillButton className={classNames("h-16 max-w-full !px-4", className)} onClick={onClick}>
       <div className="text-body flex h-16 max-w-full flex-nowrap items-center gap-4 overflow-x-hidden text-base">
-        <AccountIcon className="!text-lg" address={address} genesisHash={genesisHash} />
+        <AccountIcon className="!text-lg" address={address} genesisHash={accountGenesisHash} />
         <div className="leading-base grow truncate">
           {name ? (
-            <WithTooltip tooltip={address}>{name}</WithTooltip>
+            <WithTooltip tooltip={displayAddress}>{name}</WithTooltip>
           ) : (
-            <Address address={formattedAddress} startCharCount={6} endCharCount={6} />
+            <Address address={displayAddress} startCharCount={6} endCharCount={6} />
           )}
         </div>
         <AccountTypeIcon origin={account?.origin} className="text-primary-500" />
@@ -631,7 +649,8 @@ const AddContact = () => {
 
 export const SendFundsAmountForm = () => {
   const { t } = useTranslation("send-funds")
-  const { from, to, goto } = useSendFundsWizard()
+  const { from, to, goto, tokenId } = useSendFundsWizard()
+  const genesisHash = useGenesisHashFromTokenId(tokenId)
 
   const handleGotoClick = useCallback(
     (page: SendFundsWizardPage) => () => {
@@ -658,6 +677,7 @@ export const SendFundsAmountForm = () => {
             <AddressPillButton
               className="!max-w-[260px]"
               address={from}
+              genesisHash={genesisHash}
               onClick={handleGotoClick("from")}
             />
           </div>
@@ -668,6 +688,7 @@ export const SendFundsAmountForm = () => {
             <AddressPillButton
               className="!max-w-[260px]"
               address={to}
+              genesisHash={genesisHash}
               onClick={handleGotoClick("to")}
             />
             <AddContact />

apps/extension/src/ui/domains/SendFunds/SendFundsRecipientPicker.tsx

@@ -194,13 +194,15 @@ export const SendFundsRecipientPicker = () => {
           <SendFundsAccountsList
             allowZeroBalance
             accounts={newAddresses}
+            noFormat // preserve user input chain format
             selected={to}
             onSelect={handleSelect}
           />
         )}
         <SendFundsAccountsList
           allowZeroBalance
           accounts={contacts}
+          genesisHash={chain?.genesisHash}
           selected={to}
           onSelect={handleSelect}
           header={
@@ -213,6 +215,7 @@ export const SendFundsRecipientPicker = () => {
         <SendFundsAccountsList
           allowZeroBalance
           accounts={myAccounts}
+          genesisHash={chain?.genesisHash}
           selected={to}
           onSelect={handleSelect}
           header={
@@ -228,6 +231,7 @@ export const SendFundsRecipientPicker = () => {
         <SendFundsAccountsList
           allowZeroBalance
           accounts={watchedAccounts}
+          genesisHash={chain?.genesisHash}
           selected={to}
           onSelect={handleSelect}
           header={

apps/extension/src/ui/domains/SendFunds/useGenesisHashFromTokenId.ts

@@ -0,0 +1,8 @@
+import useChain from "@ui/hooks/useChain"
+import useToken from "@ui/hooks/useToken"
+
+export const useGenesisHashFromTokenId = (tokenId?: string | null) => {
+  const token = useToken(tokenId)
+  const chain = useChain(token?.chain?.id)
+  return chain?.genesisHash
+}