explore/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsRelatedTx.tsx

import React from 'react';

import { type RelatedCctx, CctxStatusReduced } from '@luxfi/zetachain-cctx-types';

import { Skeleton } from '@luxfi/ui/skeleton';
import TxEntityZetaChainCC from 'ui/shared/entities/tx/TxEntityZetaChainCC';
import ChainIcon from 'ui/shared/externalChains/ChainIcon';
import IconSvg from 'ui/shared/IconSvg';
import ZetaChainCCTXReducedStatus from 'ui/shared/zetaChain/ZetaChainCCTXReducedStatus';
import useZetaChainConfig from 'ui/zetaChain/useZetaChainConfig';

type Props = {
  tx: RelatedCctx;
  isLoading: boolean;
};

const ZetaChainCCTXDetailsRelatedTx = ({ tx, isLoading }: Props) => {
  const { data: chainsConfig } = useZetaChainConfig();
  const chainFrom = chainsConfig?.find((chain) => chain.id === tx.source_chain_id.toString());

  const chainsTo = tx.outbound_params.map((p) => chainsConfig?.find((chain) => chain.id === p.chain_id.toString()));

  const color = (() => {
    if (tx.status_reduced === CctxStatusReduced.Success) {
      return 'text.success';
    }
    if (tx.status_reduced === CctxStatusReduced.Failed) {
      return 'text.error';
    }
    return 'text.secondary';
  })();

  return (
    <Skeleton
      loading={ isLoading }
      className="flex gap-2 items-center max-h-[20px]"
      style={{ color: `var(--color-${color.replace('.', '-')})` }}
    >
      <ChainIcon data={ chainFrom }/>
      <IconSvg name="arrows/east" className="size-5"/>
      { chainsTo.map((chain, index) => <ChainIcon key={ index } data={ chain }/>) }
      <div>CCTX</div>
      <TxEntityZetaChainCC hash={ tx.index } isLoading={ isLoading } noIcon truncation="constant"/>
      <ZetaChainCCTXReducedStatus status={ tx.status_reduced } isLoading={ isLoading } type="full"/>
    </Skeleton>
  );
};

export default ZetaChainCCTXDetailsRelatedTx;