otterscan/src/transaction/decoder/DecodedParamRow.tsx

import React, { ReactNode, useState } from "react";
import { ParamType } from "@ethersproject/abi";
import { Switch } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
import { faQuestionCircle as faQuestionCircleSolid } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
import Uint256Decoder from "./Uint256Decoder";
import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder";
import { TransactionData } from "../../types";

type DecodedParamRowProps = {
  prefix?: ReactNode;
  i?: number | undefined;
  r: any;
  paramType: ParamType;
  txData: TransactionData;
  arrayElem?: number | undefined;
  help?: string | undefined;
};

const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
  prefix,
  i,
  r,
  paramType,
  txData,
  arrayElem,
  help,
}) => {
  const [showHelp, setShowHelp] = useState<boolean>(false);

  return (
    <>
      <tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
        <td className="col-span-3 pl-1">
          <div>
            {prefix && <span className="text-gray-300">{prefix}</span>}
            {arrayElem !== undefined ? (
              <span className="text-gray-400">
                {" "}
                [<span className="text-black">{arrayElem}</span>]
              </span>
            ) : (
              <>
                {paramType.name ?? <span className="italic">param_{i}</span>}{" "}
                {i !== undefined && (
                  <span className="text-gray-400 text-xs">({i})</span>
                )}
              </>
            )}
            {help && (
              <>
                {" "}
                <Switch
                  checked={showHelp}
                  onChange={setShowHelp}
                  className="text-gray-500"
                >
                  <FontAwesomeIcon
                    icon={showHelp ? faQuestionCircleSolid : faQuestionCircle}
                    size="1x"
                  />
                </Switch>
              </>
            )}
          </div>
          {help && showHelp && <div className="mt-2 text-gray-400">{help}</div>}
        </td>
        <td className="col-span-1 text-gray-500">{paramType.type}</td>
        <td className="col-span-8 pr-1 font-code break-all">
          {paramType.baseType === "uint256" ? (
            <Uint256Decoder r={r} />
          ) : paramType.baseType === "address" ? (
            <AddressDecoder r={r} txData={txData} />
          ) : paramType.baseType === "bool" ? (
            <BooleanDecoder r={r} />
          ) : paramType.baseType === "bytes" ? (
            <BytesDecoder r={r} />
          ) : paramType.baseType === "tuple" ||
            paramType.baseType === "array" ? (
            <></>
          ) : (
            r.toString()
          )}
        </td>
      </tr>
      {paramType.baseType === "tuple" &&
        r.map((e: any, idx: number) => (
          <DecodedParamRow
            key={idx}
            prefix={
              paramType.name ? (
                paramType.name + "."
              ) : (
                <span className="italic">param_{i}.</span>
              )
            }
            i={idx}
            r={e}
            paramType={paramType.components[idx]}
            txData={txData}
          />
        ))}
      {paramType.baseType === "array" &&
        r.map((e: any, idx: number) => (
          <DecodedParamRow
            key={idx}
            prefix={paramType.name ?? <span className="italic">param_{i}</span>}
            r={e}
            paramType={paramType.arrayChildren}
            txData={txData}
            arrayElem={idx}
          />
        ))}
    </>
  );
};

export default React.memo(DecodedParamRow);