chore: add link to etherscan for asset dialog contract address (#2561)

* chore: add link to etherscan for asset dialog contract address

* chore: use useEtherscanLink hook

* chore: fix unused import

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 <ContractAddressLink address={asset.source.contractAddress} />;
+    },
   },
   {
     key: AssetDetail.WITHDRAWAL_THRESHOLD,
@@ -225,7 +234,7 @@ export const AssetDetailsTable = ({
   return (
     <KeyValueTable>
       {details
-        .filter(({ value }) => value && value.length > 0)
+        .filter(({ value }) => Boolean(value))
         .map(({ key, label, value, tooltip, valueTooltip }) => (
           <KeyValueTableRow key={key} {...props}>
             <div
@@ -257,3 +266,16 @@ export const AssetDetailsTable = ({
     </KeyValueTable>
   );
 };
+
+// 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 (
+    <Link href={href} target="_blank">
+      {address}
+    </Link>
+  );
+};