ReceiveLayout.tsx raw

   1  import { Outlet } from "react-router";
   2  import AppHeader from "src/components/AppHeader";
   3  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   4  import Loading from "src/components/Loading";
   5  import { useBalances } from "src/hooks/useBalances";
   6  import { useChannels } from "src/hooks/useChannels";
   7  
   8  import { useInfo } from "src/hooks/useInfo";
   9  
  10  export default function ReceiveLayout() {
  11    const { hasChannelManagement } = useInfo();
  12    const { data: balances } = useBalances();
  13    const { data: channels } = useChannels();
  14  
  15    if (!balances || !channels) {
  16      return <Loading />;
  17    }
  18  
  19    return (
  20      <div className="grid gap-5">
  21        <AppHeader
  22          title="Receive"
  23          contentRight={
  24            hasChannelManagement && (
  25              <div className="md:flex md:items-center md:gap-4">
  26                <span className="text-muted-foreground">Receive Limit:</span>
  27                <div className="balance sensitive slashed-zero">
  28                  <FormattedBitcoinAmount
  29                    amountMsat={balances.lightning.totalReceivableMsat}
  30                  />
  31                </div>
  32              </div>
  33            )
  34          }
  35        />
  36        <Outlet />
  37      </div>
  38    );
  39  }
  40