LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

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

* chore: use useEtherscanLink hook

* chore: fix unused import
This commit is contained in:
Matthew Russell 2023-01-16 07:11:51 -06:00 committed by GitHub
parent 1f1ca510f4
commit b10effa3c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
libs/assets/src/lib/asset-details-table.tsx
View File

@ -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>
);
};