WalletLayout.tsx raw

   1  import {
   2    ArrowDownUpIcon,
   3    CalendarSyncIcon,
   4    CreditCardIcon,
   5  } from "lucide-react";
   6  import { Outlet, useMatch } from "react-router";
   7  import AppHeader from "src/components/AppHeader";
   8  import Loading from "src/components/Loading";
   9  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  10  import { LinkButton } from "src/components/ui/custom/link-button";
  11  import { WalletActionsMenu } from "src/components/WalletActionsMenu";
  12  import { useBalances } from "src/hooks/useBalances";
  13  import { useInfo } from "src/hooks/useInfo";
  14  import { useSyncWallet } from "src/hooks/useSyncWallet";
  15  
  16  export default function WalletLayout() {
  17    useSyncWallet();
  18    const { data: info, hasChannelManagement } = useInfo();
  19    const { data: balances } = useBalances(true);
  20    const isOnchain = !!useMatch("/wallet/onchain");
  21  
  22    if (!info || !balances) {
  23      return <Loading />;
  24    }
  25  
  26    return (
  27      <>
  28        <AppHeader
  29          title="Wallet"
  30          pageTitle="Wallet"
  31          description=""
  32          contentRight={
  33            <div className="flex items-center gap-1 sm:gap-2">
  34              {hasChannelManagement && (
  35                <LinkButton
  36                  to="/wallet/swap"
  37                  variant="ghost"
  38                  size="sm"
  39                  className="hidden sm:inline-flex"
  40                >
  41                  <ArrowDownUpIcon />
  42                  Swap
  43                </LinkButton>
  44              )}
  45              <LinkButton
  46                to="/internal-apps/zapplanner"
  47                variant="ghost"
  48                size="sm"
  49                className="hidden sm:inline-flex"
  50              >
  51                <CalendarSyncIcon />
  52                Recurring
  53              </LinkButton>
  54              <ExternalLinkButton
  55                to="https://www.getalby.com/topup"
  56                variant="ghost"
  57                size="sm"
  58                className="hidden sm:inline-flex"
  59              >
  60                <CreditCardIcon />
  61                Buy
  62              </ExternalLinkButton>
  63              <WalletActionsMenu
  64                hasChannelManagement={!!hasChannelManagement}
  65                isOnchain={isOnchain}
  66              />
  67            </div>
  68          }
  69        />
  70        <Outlet />
  71      </>
  72    );
  73  }
  74