Receive.tsx raw

   1  import { LinkIcon, ZapIcon } from "lucide-react";
   2  import { useEffect } from "react";
   3  import { useNavigate, useSearchParams } from "react-router";
   4  import { toast } from "sonner";
   5  import AppHeader from "src/components/AppHeader";
   6  import Loading from "src/components/Loading";
   7  import { ReceiveToLightning } from "src/components/ReceiveToLightning";
   8  import { ReceiveToOnchain } from "src/components/ReceiveToOnchain";
   9  import {
  10    Tabs,
  11    TabsContent,
  12    TabsList,
  13    TabsTrigger,
  14  } from "src/components/ui/tabs";
  15  import { useAlbyMe } from "src/hooks/useAlbyMe";
  16  import { useInfo } from "src/hooks/useInfo";
  17  
  18  export default function Receive() {
  19    const { data: info } = useInfo();
  20    const { data: me, error: meError } = useAlbyMe();
  21    const navigate = useNavigate();
  22    const [searchParams, setSearchParams] = useSearchParams();
  23  
  24    const activeTab =
  25      searchParams.get("type") === "onchain" ? "onchain" : "lightning";
  26  
  27    const isSpendingTab = activeTab === "lightning";
  28    const isLightningAddressLoading =
  29      isSpendingTab && info?.albyAccountConnected && !me && !meError;
  30  
  31    // TODO: remove this once we have a CTA to connect an Alby Account to use a lightning address
  32    useEffect(() => {
  33      if (!isSpendingTab || !info || isLightningAddressLoading) {
  34        return;
  35      }
  36      if (!info.albyAccountConnected) {
  37        navigate("/wallet/receive/invoice", { replace: true });
  38        return;
  39      }
  40      if (meError) {
  41        toast.error("Failed to load lightning address");
  42        navigate("/wallet/receive/invoice", { replace: true });
  43      }
  44    }, [info, isLightningAddressLoading, isSpendingTab, meError, navigate]);
  45  
  46    if (!info || isLightningAddressLoading) {
  47      return <Loading />;
  48    }
  49  
  50    return (
  51      <div className="grid gap-5">
  52        <AppHeader pageTitle="Receive" title="Receive" />
  53        <div className="w-full max-w-lg">
  54          <Tabs
  55            value={activeTab}
  56            onValueChange={() => {
  57              setSearchParams(isSpendingTab ? { type: "onchain" } : {}, {
  58                replace: true,
  59              });
  60            }}
  61            className="w-full"
  62          >
  63            <TabsList className="w-full mb-2">
  64              <TabsTrigger
  65                value="lightning"
  66                className="flex gap-2 items-center w-full"
  67              >
  68                <ZapIcon className="size-4" />
  69                To Lightning Balance
  70              </TabsTrigger>
  71              <TabsTrigger
  72                value="onchain"
  73                className="flex gap-2 items-center w-full"
  74              >
  75                <LinkIcon className="size-4" />
  76                To On-chain Balance
  77              </TabsTrigger>
  78            </TabsList>
  79            <TabsContent value="lightning">
  80              <ReceiveToLightning />
  81            </TabsContent>
  82            <TabsContent value="onchain">
  83              <ReceiveToOnchain />
  84            </TabsContent>
  85          </Tabs>
  86        </div>
  87      </div>
  88    );
  89  }
  90