ReceiveToLightning.tsx raw
1 import {
2 ChevronRightIcon,
3 CopyIcon,
4 LinkIcon,
5 ReceiptTextIcon,
6 ZapIcon,
7 } from "lucide-react";
8 import { Link } from "react-router";
9 import FirstChannelJitAlert from "src/components/FirstChannelJitAlert";
10 import Loading from "src/components/Loading";
11 import QRCode from "src/components/QRCode";
12 import {
13 Accordion,
14 AccordionContent,
15 AccordionItem,
16 AccordionTrigger,
17 } from "src/components/ui/accordion";
18 import { Button } from "src/components/ui/button";
19 import { Card, CardContent } from "src/components/ui/card";
20 import { useAlbyMe } from "src/hooks/useAlbyMe";
21 import { useInfo } from "src/hooks/useInfo";
22 import { copyToClipboard } from "src/lib/clipboard";
23
24 export function ReceiveToLightning() {
25 const { data: info } = useInfo();
26 const { data: me } = useAlbyMe();
27
28 if (!info || !me) {
29 return <Loading />;
30 }
31
32 return (
33 <div className="flex flex-col gap-5">
34 <FirstChannelJitAlert />
35 <Card>
36 <CardContent className="flex flex-col items-center gap-6">
37 <QRCode
38 value={me.lightning_address}
39 className="h-auto w-full"
40 frameType="lightning"
41 />
42 <div className="flex max-w-full items-center justify-center gap-1">
43 <p className="min-w-0 text-center font-medium text-lg break-all">
44 {me.lightning_address}
45 </p>
46 <Button
47 variant="ghost"
48 size="icon"
49 aria-label="Copy Lightning Address"
50 className="shrink-0"
51 onClick={() => {
52 copyToClipboard(me.lightning_address);
53 }}
54 >
55 <CopyIcon className="size-4" />
56 </Button>
57 </div>
58 </CardContent>
59 </Card>
60 <Card className="py-2">
61 <CardContent>
62 <Accordion type="single" collapsible className="w-full">
63 <AccordionItem value="more-options">
64 <AccordionTrigger>Other ways to receive</AccordionTrigger>
65 <AccordionContent className="flex flex-col divide-y pb-1">
66 <Link
67 to="/wallet/receive/invoice"
68 className="group flex items-center gap-3 py-3"
69 >
70 <ZapIcon className="size-5 shrink-0 text-muted-foreground" />
71 <div className="flex-1">
72 <p className="text-sm font-medium">Create Invoice</p>
73 <p className="text-xs text-muted-foreground">
74 Request a specific amount with a one-time invoice
75 </p>
76 </div>
77 <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
78 </Link>
79 {info.supportsBolt12 && (
80 <Link
81 to="/wallet/receive/offer"
82 className="group flex items-center gap-3 py-3"
83 >
84 <ReceiptTextIcon className="size-5 shrink-0 text-muted-foreground" />
85 <div className="flex-1">
86 <p className="text-sm font-medium">Lightning Offer</p>
87 <p className="text-xs text-muted-foreground">
88 Share a reusable payment code that never expires
89 </p>
90 </div>
91 <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
92 </Link>
93 )}
94 <Link
95 to="/wallet/receive/onchain"
96 className="group flex items-center gap-3 py-3"
97 >
98 <LinkIcon className="size-5 shrink-0 text-muted-foreground" />
99 <div className="flex-1">
100 <p className="text-sm font-medium">
101 On-chain or Other Cryptocurrency
102 </p>
103 <p className="text-xs text-muted-foreground">
104 Swap funds from on-chain bitcoin or other cryptocurrencies
105 </p>
106 </div>
107 <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
108 </Link>
109 </AccordionContent>
110 </AccordionItem>
111 </Accordion>
112 </CardContent>
113 </Card>
114 </div>
115 );
116 }
117