Onchain.tsx raw

   1  import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
   2  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   3  import FormattedFiatAmount from "src/components/FormattedFiatAmount";
   4  import { OnchainTransactionsList } from "src/components/OnchainTransactionsList";
   5  import { LinkButton } from "src/components/ui/custom/link-button";
   6  import { BalanceSwitcher } from "src/components/wallet/BalanceSwitcher";
   7  import { useBalances } from "src/hooks/useBalances";
   8  
   9  export default function Onchain() {
  10    const { data: balances } = useBalances(true);
  11  
  12    if (!balances) {
  13      return null;
  14    }
  15  
  16    return (
  17      <>
  18        <div className="flex w-full flex-col items-center gap-8 pt-12 pb-16 text-center">
  19          <div className="flex flex-col items-center gap-8">
  20            <BalanceSwitcher active="onchain" />
  21            <div className="flex flex-col items-center gap-3">
  22              <div className="text-5xl md:text-6xl font-medium balance sensitive slashed-zero leading-none">
  23                <FormattedBitcoinAmount
  24                  amountMsat={balances.onchain.spendableSat * 1000}
  25                />
  26              </div>
  27              <FormattedFiatAmount
  28                className="text-3xl font-normal leading-9 text-muted-foreground"
  29                amountSat={balances.onchain.spendableSat}
  30              />
  31            </div>
  32          </div>
  33          <div className="grid w-full max-w-100 grid-cols-2 items-center gap-3">
  34            <LinkButton to="/wallet/receive?type=onchain" size="lg">
  35              <ArrowDownIcon />
  36              Receive
  37            </LinkButton>
  38            <LinkButton to="/wallet/send" size="lg">
  39              <ArrowUpIcon />
  40              Send
  41            </LinkButton>
  42          </div>
  43        </div>
  44        <OnchainTransactionsList />
  45      </>
  46    );
  47  }
  48