explore/ui/tx/authorizations/TxAuthorizationsListItem.tsx

import React from 'react';

import type { TxAuthorization } from 'types/api/transaction';

import config from 'configs/app';
import { Skeleton } from '@luxfi/ui/skeleton';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TxAuthorizationStatus from 'ui/shared/statusTag/TxAuthorizationStatus';

interface Props extends TxAuthorization {
  isLoading?: boolean;
}

const TxAuthorizationsListItem = ({ address_hash: addressHash, authority, chain_id: chainId, nonce, isLoading, status }: Props) => {
  return (
    <ListItemMobile>
      <div>
        <Skeleton loading={ isLoading }>Authority</Skeleton>
        <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
      </div>
      <div>
        <Skeleton loading={ isLoading }>Delegated address</Skeleton>
        <AddressEntity address={{ hash: addressHash }} isLoading={ isLoading } noIcon/>
      </div>
      <div>
        <Skeleton loading={ isLoading }>Chain</Skeleton>
        <Skeleton loading={ isLoading } color="text.secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
      </div>
      <div>
        <Skeleton loading={ isLoading }>Nonce</Skeleton>
        <Skeleton loading={ isLoading } color="text.secondary">{ nonce }</Skeleton>
      </div>
      <div>
        <Skeleton loading={ isLoading }>Status</Skeleton>
        <TxAuthorizationStatus status={ status } loading={ isLoading }/>
      </div>
    </ListItemMobile>
  );
};

export default TxAuthorizationsListItem;