import { useSwapContext } from "@src/context";
import { Transaction } from "@src/models";
import { TxDataCardUI } from "./TxDataCardUI";

interface Props {
  transaction: Transaction;
}

export const TxDataCard = ({ transaction }: Props) => {
  const { supportedChains, findTokenDataByAddressAndChain } = useSwapContext();

  const srcToken = findTokenDataByAddressAndChain(
    transaction.sourceChainId === "mainnet-beta"
      ? transaction.tokenAddress
      : transaction.tokenAddress.toLowerCase(),
    transaction.sourceChainId,
  );
  const dstToken = transaction.tokenOutAddress
    ? findTokenDataByAddressAndChain(
        transaction.sourceChainId === "mainnet-beta"
          ? transaction.tokenOutAddress
          : transaction.tokenOutAddress?.toLowerCase(),
        transaction.targetChainId,
      )
    : undefined;

  return (
    <TxDataCardUI
      transaction={transaction}
      supportedChains={supportedChains}
      srcToken={srcToken}
      dstToken={dstToken}
    />
  );
};