vega-frontend-monorepo/apps/token/src/routes/contracts/index.tsx

import { t } from '@vegaprotocol/react-helpers';
import { Link, Splash } from '@vegaprotocol/ui-toolkit';
import type { EthereumConfig } from '@vegaprotocol/web3';
import { useEthereumConfig } from '@vegaprotocol/web3';
import { useEnvironment } from '@vegaprotocol/environment';
import { Heading } from '../../components/heading';
import { SplashLoader } from '../../components/splash-loader';
import { ENV } from '../../config/env';

const Contracts = () => {
  const { config } = useEthereumConfig();
  const { ETHERSCAN_URL } = useEnvironment();

  if (!config) {
    return (
      <Splash>
        <SplashLoader />
      </Splash>
    );
  }

  return (
    <section>
      <Heading title={'Contracts'} />
      <hr />
      {[
        'collateral_bridge_contract',
        'multisig_control_contract',
        'staking_bridge_contract',
        'token_vesting_contract',
      ].map((key) => {
        const contract = config[key as keyof EthereumConfig] as {
          address: string;
        };

        return (
          <div
            key={key}
            style={{ display: 'flex', justifyContent: 'space-between' }}
          >
            <div>{key}:</div>
            <Link
              title={t('View address on Etherscan')}
              href={`${ETHERSCAN_URL}/address/${contract.address}`}
            >
              {config.collateral_bridge_contract.address}
            </Link>
          </div>
        );
      })}
      {Object.entries(ENV.addresses).map(([key, value]) => (
        <div
          key={key}
          style={{ display: 'flex', justifyContent: 'space-between' }}
        >
          <div>{key}:</div>
          <Link
            title={t('View address on Etherscan')}
            href={`${ETHERSCAN_URL}/address/${value}`}
          >
            asdfasd
            {value}
          </Link>
        </div>
      ))}
    </section>
  );
};

export default Contracts;