explore/ui/crossChain/txs/TransactionsCrossChainTableItem.tsx

import React from 'react';

import type { InterchainMessage } from '@luxfi/interchain-indexer-types';

import { route } from 'nextjs-routes';

import config from 'configs/app';
import { Link } from 'toolkit/next/link';
import { Skeleton } from '@luxfi/ui/skeleton';
import { TableCell, TableRow } from '@luxfi/ui/table';
import { mdash } from 'toolkit/utils/htmlEntities';
import AddressFromToIcon from 'ui/shared/address/AddressFromToIcon';
import CrossChainBridgeLink from 'ui/shared/crossChain/CrossChainBridgeLink';
import CrossChainFromToTag from 'ui/shared/crossChain/CrossChainFromToTag';
import AddressEntityInterchain from 'ui/shared/entities/address/AddressEntityInterchain';
import CrossChainMessageEntity from 'ui/shared/entities/crossChainMessage/CrossChainMessageEntity';
import TxEntityInterchain from 'ui/shared/entities/tx/TxEntityInterchain';
import ChainLabel from 'ui/shared/externalChains/ChainLabel';
import CrossChainTxsStatusTag from 'ui/shared/statusTag/CrossChainTxsStatusTag';
import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
import TokenValueInterchain from 'ui/shared/value/TokenValueInterchain';

interface Props {
  data: InterchainMessage;
  isLoading?: boolean;
  currentAddress?: string;
}

const TransactionsCrossChainTableItem = ({ data, isLoading, currentAddress }: Props) => {

  const firstTransfer = data.transfers.length > 0 ? data.transfers[0] : null;
  const txHashWithTransfers = (() => {
    if (data.transfers.length === 0) {
      return;
    }

    if (config.chain.id === data.source_chain?.id) {
      return data.source_transaction_hash;
    }

    if (config.chain.id === data.destination_chain?.id) {
      return data.destination_transaction_hash;
    }
  })();

  const dashElement = <span className="text-[var(--color-text-secondary)] leading-6">{ mdash }</span>;

  return (
    <TableRow>
      <TableCell w="42px">
        <CrossChainTxsStatusTag status={ data.status } loading={ isLoading }/>
      </TableCell>
      { currentAddress && (
        <TableCell>
          <CrossChainFromToTag
            type={ data.sender?.hash.toLowerCase() === currentAddress.toLowerCase() && config.chain.id === data.source_chain?.id ? 'out' : 'in' }
            isLoading={ isLoading }
          />
        </TableCell>
      ) }
      <TableCell>
        <CrossChainMessageEntity id={ data.message_id } isLoading={ isLoading } className="leading-6 font-bold"/>
      </TableCell>
      <TableCell>
        <TimeWithTooltip
          timestamp={ data.send_timestamp || data.receive_timestamp }
          isLoading={ isLoading }
          enableIncrement
          color="text.secondary"
          className="leading-6 whitespace-nowrap"
        />
      </TableCell>
      <TableCell maxW="150px">
        { data.sender ? (
          <AddressEntityInterchain
            chain={ data.source_chain }
            address={ data.sender }
            isLoading={ isLoading }
            truncation="constant"
            noIcon
            currentAddress={ currentAddress }
            className="leading-6 max-w-full w-fit"
          />
        ) : dashElement }
      </TableCell>
      <TableCell maxW="150px">
        <div className="flex flex-col items-start">
          { data.source_transaction_hash ? (
            <TxEntityInterchain
              chain={ data.source_chain }
              hash={ data.source_transaction_hash }
              isLoading={ isLoading }
              noIcon
              truncation="constant"
              className="leading-6"
            />
          ) : dashElement }
          <ChainLabel
            data={ data.source_chain }
            isLoading={ isLoading }
            className="text-[var(--color-text-secondary)] text-xs gap-1"
            fallback={ data.source_transaction_hash ? <span className="text-[var(--color-text-secondary)]">{ mdash }</span> : null }
          />
        </div>
      </TableCell>
      <TableCell maxW="150px">
        <div className="flex flex-col items-start">
          { data.destination_transaction_hash ? (
            <TxEntityInterchain
              chain={ data.destination_chain }
              hash={ data.destination_transaction_hash }
              isLoading={ isLoading }
              noIcon
              truncation="constant"
              className="leading-6"
            />
          ) : dashElement }
          <ChainLabel
            data={ data.destination_chain }
            isLoading={ isLoading }
            className="text-[var(--color-text-secondary)] text-xs gap-1"
            fallback={ data.destination_transaction_hash ? <span className="text-[var(--color-text-secondary)]">{ mdash }</span> : null }
          />
        </div>
      </TableCell>
      <TableCell>
        { txHashWithTransfers ? (
          <Link
            href={ route({ pathname: '/tx/[hash]', query: { hash: txHashWithTransfers, tab: 'token_transfers_cross_chain' } }) }
            loading={ isLoading }
            className="leading-6 min-w-6"
          >
            { data.transfers.length }
          </Link>
        ) : (
          <Skeleton loading={ isLoading } color="text.secondary" className="leading-6">
            <span>
              { data.transfers.length }
            </span>
          </Skeleton>
        ) }
      </TableCell>
      <TableCell maxW="150px">
        <div className="flex flex-col items-start">
          {
            firstTransfer?.sender ? (
              <AddressEntityInterchain
                chain={ firstTransfer.source_chain }
                address={ firstTransfer.sender }
                isLoading={ isLoading }
                truncation="constant"
                noIcon
                currentAddress={ currentAddress }
                className="leading-6 max-w-full"
              />
            ) : dashElement
          }
          { firstTransfer?.source_token && (
            <TokenValueInterchain
              token={ firstTransfer.source_token }
              amount={ firstTransfer.source_amount }
              chain={ firstTransfer.source_chain }
              loading={ isLoading }
              className="text-xs text-[var(--color-text-secondary)]"
            />
          ) }
          { data.transfers.length > 1 && (
            <Link
              variant="secondary"
              href={ route({ pathname: '/cross-chain-tx/[id]', query: { id: data.message_id, tab: 'transfers' } }) }
              className="decoration-dashed underline mt-2 text-xs"
            >
              View all
            </Link>
          ) }
        </div>
      </TableCell>
      <TableCell>
        <AddressFromToIcon type="unspecified" isLoading={ isLoading } className="mt-0.5"/>
      </TableCell>
      <TableCell maxW="150px">
        <div className="flex flex-col items-start">
          {
            firstTransfer?.recipient ? (
              <AddressEntityInterchain
                chain={ firstTransfer.destination_chain }
                address={ firstTransfer.recipient }
                isLoading={ isLoading }
                truncation="constant"
                noIcon
                currentAddress={ currentAddress }
                className="leading-6 max-w-full"
              />
            ) : dashElement
          }
          { firstTransfer?.destination_token && (
            <TokenValueInterchain
              token={ firstTransfer.destination_token }
              amount={ firstTransfer.destination_amount }
              chain={ firstTransfer.destination_chain }
              loading={ isLoading }
              className="text-xs text-[var(--color-text-secondary)]"
            />
          ) }
        </div>
      </TableCell>
      <TableCell>
        <CrossChainBridgeLink data={ data.bridge } isLoading={ isLoading } className="leading-6"/>
      </TableCell>
    </TableRow>
  );
};

export default React.memo(TransactionsCrossChainTableItem);