otterscan/src/components/DecoratedAddressLink.tsx

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
import TokenLogo from "./TokenLogo";
import AddressOrENSName from "./AddressOrENSName";
import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";

type DecoratedAddressLinkProps = {
  address: string;
  ensName?: string;
  selectedAddress?: string;
  text?: string;
  addressCtx?: AddressContext;
  creation?: boolean;
  miner?: boolean;
  selfDestruct?: boolean;
  txFrom?: boolean;
  txTo?: boolean;
  tokenMeta?: TokenMeta;
};

const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
  address,
  ensName,
  selectedAddress,
  text,
  addressCtx,
  creation,
  miner,
  selfDestruct,
  txFrom,
  txTo,
  tokenMeta,
}) => {
  const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
  const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;

  return (
    <div
      className={`flex items-baseline space-x-1 ${txFrom ? "bg-red-50" : ""} ${
        txTo ? "bg-green-50" : ""
      } ${mint ? "italic text-green-500 hover:text-green-700" : ""} ${
        burn ? "line-through text-orange-500 hover:text-orange-700" : ""
      } ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
    >
      {creation && (
        <span className="text-yellow-300" title="Contract creation">
          <FontAwesomeIcon icon={faStar} size="1x" />
        </span>
      )}
      {selfDestruct && (
        <span className="text-red-800" title="Self destruct">
          <FontAwesomeIcon icon={faBomb} size="1x" />
        </span>
      )}
      {mint && (
        <span className="text-green-500" title="Mint address">
          <FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />
        </span>
      )}
      {burn && (
        <span className="text-orange-500" title="Burn address">
          <FontAwesomeIcon icon={faBurn} size="1x" />
        </span>
      )}
      {miner && (
        <span className="text-yellow-400" title="Miner address">
          <FontAwesomeIcon icon={faCoins} size="1x" />
        </span>
      )}
      {tokenMeta && (
        <div className="self-center">
          <TokenLogo address={address} name={tokenMeta.name} />
        </div>
      )}
      <AddressOrENSName
        address={address}
        ensName={ensName}
        selectedAddress={selectedAddress}
        text={text}
        dontOverrideColors={mint || burn}
      />
    </div>
  );
};

export default React.memo(DecoratedAddresssLink);