diff --git a/src/components/addresses/ContextualAddress.tsx b/src/components/addresses/ContextualAddress.tsx index 2ee5559..9c8870a 100644 --- a/src/components/addresses/ContextualAddress.tsx +++ b/src/components/addresses/ContextualAddress.tsx @@ -9,6 +9,7 @@ import { KristAddress } from "@api/types"; import { Wallet, useWallets } from "@wallets"; +import { Contact, useContacts } from "@contacts"; import { parseCommonMeta, CommonMeta } from "@utils/commonmeta"; import { useNameSuffix, stripNameSuffix } from "@utils/currency"; import { useBooleanSetting } from "@utils/settings"; @@ -25,6 +26,7 @@ interface Props { address: KristAddress | string | null; wallet?: Wallet | false; + contact?: Contact | false; metadata?: string; source?: boolean; hideNameAddress?: boolean; @@ -34,6 +36,113 @@ className?: string; } +export function ContextualAddress({ + address: origAddress, + wallet: origWallet, + contact: origContact, + metadata, + source, + hideNameAddress, + allowWrap, + neverCopyable, + nonExistent, + className +}: Props): JSX.Element { + const { t } = useTranslation(); + const { walletAddressMap } = useWallets(); + const { contactAddressMap } = useContacts(); + const nameSuffix = useNameSuffix(); + const addressCopyButtons = useBooleanSetting("addressCopyButtons"); + + if (!origAddress) return ( + + {t("contextualAddressUnknown")} + + ); + + const address = typeof origAddress === "object" + ? origAddress.address + : origAddress; + + // If we were given a wallet, use it. Otherwise, look it up, unless it was + // explicitly excluded (e.g. the Wallets table) + const wallet = origWallet !== false + ? (origWallet || walletAddressMap[address]) + : undefined; + const contact = origContact !== false + ? (origContact || contactAddressMap[address]) + : undefined; + + const commonMeta = parseCommonMeta(nameSuffix, metadata); + const hasMetaname = source + ? !!commonMeta?.returnRecipient + : !!commonMeta?.recipient; + + const verified = getVerified(address); + + const showTooltip = !verified && + ((hideNameAddress && !!hasMetaname) || !!wallet?.label || !!contact?.label); + + const copyable = !neverCopyable && addressCopyButtons + ? { text: address } : undefined; + + const classes = classNames("contextual-address", className, { + "contextual-address-allow-wrap": allowWrap, + "contextual-address-non-existent": nonExistent + }); + + /** The label of the wallet or contact, or the address itself (not a metaname) */ + function AddressContent(props: any): JSX.Element { + return wallet?.label + ? {wallet.label} + : (contact?.label + ? {contact.label} + : {address}); + } + + return + {/* If the address definitely doesn't exist, show the 'not yet initialised' + * tooltip on hover instead. */} + + {commonMeta && hasMetaname + ? ( + // Display the metaname and link to the name if possible + + ) + : (verified + // Display the verified address if possible + ? + : ( + // Display the regular address or label + + + + ) + ) + } + + {/* This empty child here forces the Tooltip to change its hover + * behaviour. Pretty funky, needs investigating. */} + <> + + ; +} + interface AddressMetanameProps { nameSuffix: string; address: string; @@ -96,102 +205,3 @@ ); } - -export function ContextualAddress({ - address: origAddress, - wallet: origWallet, - metadata, - source, - hideNameAddress, - allowWrap, - neverCopyable, - nonExistent, - className -}: Props): JSX.Element { - const { t } = useTranslation(); - const { walletAddressMap } = useWallets(); - const nameSuffix = useNameSuffix(); - const addressCopyButtons = useBooleanSetting("addressCopyButtons"); - - if (!origAddress) return ( - - {t("contextualAddressUnknown")} - - ); - - const address = typeof origAddress === "object" - ? origAddress.address - : origAddress; - - // If we were given a wallet, use it. Otherwise, look it up, unless it was - // explicitly excluded (e.g. the Wallets table) - const wallet = origWallet !== false - ? (origWallet || walletAddressMap[address]) - : undefined; - - const commonMeta = parseCommonMeta(nameSuffix, metadata); - const hasMetaname = source - ? !!commonMeta?.returnRecipient - : !!commonMeta?.recipient; - - const verified = getVerified(address); - - const showTooltip = !verified && ((hideNameAddress && !!hasMetaname) || !!wallet?.label); - - const copyable = !neverCopyable && addressCopyButtons - ? { text: address } : undefined; - - const classes = classNames("contextual-address", className, { - "contextual-address-allow-wrap": allowWrap, - "contextual-address-non-existent": nonExistent - }); - - /** The label of the wallet, or the address itself (not a metaname) */ - function AddressContent(props: any): JSX.Element { - return wallet && wallet.label - ? {wallet.label} - : {address}; - } - - return - {/* If the address definitely doesn't exist, show the 'not yet initialised' - * tooltip on hover instead. */} - - {commonMeta && hasMetaname - ? ( - // Display the metaname and link to the name if possible - - ) - : (verified - // Display the verified address if possible - ? - : ( - // Display the regular address or label - - - - ) - ) - } - - {/* This empty child here forces the Tooltip to change its hover - * behaviour. Pretty funky, needs investigating. */} - <> - - ; -}