OnchainTransactionsList.tsx raw

   1  import { BitcoinIcon } from "lucide-react";
   2  import EmptyState from "src/components/EmptyState";
   3  import Loading from "src/components/Loading";
   4  import OnchainTransactionItem from "src/components/OnchainTransactionItem";
   5  import { useInfo } from "src/hooks/useInfo";
   6  import { useOnchainTransactions } from "src/hooks/useOnchainTransactions";
   7  
   8  export function OnchainTransactionsList() {
   9    const { data: info } = useInfo();
  10    // TODO: add pagination
  11    const { data: transactions, isLoading } = useOnchainTransactions();
  12  
  13    if (isLoading || !transactions) {
  14      return <Loading />;
  15    }
  16  
  17    if (transactions.length === 0) {
  18      return (
  19        <div className="flex w-full flex-1 flex-col">
  20          <EmptyState
  21            icon={BitcoinIcon}
  22            title="No on-chain transactions yet"
  23            description="Your bitcoin transactions will appear here as you start using your wallet."
  24          />
  25        </div>
  26      );
  27    }
  28  
  29    return (
  30      <div className="flex w-full flex-1 flex-col space-y-4">
  31        {transactions.map((tx) => (
  32          <OnchainTransactionItem
  33            key={tx.txId}
  34            tx={tx}
  35            mempoolUrl={info?.mempoolUrl}
  36          />
  37        ))}
  38      </div>
  39    );
  40  }
  41