diff --git a/libs/assets/src/lib/asset-details-table.tsx b/libs/assets/src/lib/asset-details-table.tsx index d22ea2b66..ac2bf8f02 100644 --- a/libs/assets/src/lib/asset-details-table.tsx +++ b/libs/assets/src/lib/asset-details-table.tsx @@ -1,18 +1,21 @@ +import { useEtherscanLink } from '@vegaprotocol/environment'; import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers'; import type * as Schema from '@vegaprotocol/types'; import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit'; +import { Link } from '@vegaprotocol/ui-toolkit'; import { KeyValueTable, KeyValueTableRow, Tooltip, } from '@vegaprotocol/ui-toolkit'; +import type { ReactNode } from 'react'; import type { Asset } from './asset-data-provider'; type Rows = { key: AssetDetail; label: string; tooltip: string; - value: (asset: Asset) => string | null | undefined; + value: (asset: Asset) => ReactNode | undefined; valueTooltip?: (asset: Asset) => string | null | undefined; }[]; @@ -97,7 +100,13 @@ export const rows: Rows = [ tooltip: t( 'The address of the contract for the token, on the ethereum network' ), - value: (asset) => (asset.source as Schema.ERC20).contractAddress, + value: (asset) => { + if (asset.source.__typename !== 'ERC20') { + return; + } + + return ; + }, }, { key: AssetDetail.WITHDRAWAL_THRESHOLD, @@ -225,7 +234,7 @@ export const AssetDetailsTable = ({ return ( {details - .filter(({ value }) => value && value.length > 0) + .filter(({ value }) => Boolean(value)) .map(({ key, label, value, tooltip, valueTooltip }) => (
); }; + +// Separate component for the link as otherwise eslint will complain +// about useEnvironment being used in a component +// named with a lowercase 'value' +const ContractAddressLink = ({ address }: { address: string }) => { + const etherscanLink = useEtherscanLink(); + const href = etherscanLink(`/address/${address}`); + return ( + + {address} + + ); +};