BuyBitcoin.tsx raw
1 import React from "react";
2 import AppHeader from "src/components/AppHeader";
3 import { MempoolAlert } from "src/components/MempoolAlert";
4 import { LoadingButton } from "src/components/ui/custom/loading-button";
5 import { Input } from "src/components/ui/input";
6 import { Label } from "src/components/ui/label";
7 import {
8 Select,
9 SelectContent,
10 SelectItem,
11 SelectTrigger,
12 SelectValue,
13 } from "src/components/ui/select";
14 import { useOnchainAddress } from "src/hooks/useOnchainAddress";
15 import { openLink } from "src/utils/openLink";
16
17 const SUPPORTED_CURRENCIES = [
18 {
19 value: "usd",
20 label: "USD - US Dollar",
21 },
22 {
23 value: "ars",
24 label: "ARS - Argentine Peso",
25 },
26 {
27 value: "aud",
28 label: "AUD - Australian Dollar",
29 },
30 {
31 value: "bgn",
32 label: "BGN - Bulgarian Lev",
33 },
34 {
35 value: "brl",
36 label: "BRL - Brazilian Real",
37 },
38 {
39 value: "cad",
40 label: "CAD - Canadian Dollar",
41 },
42 {
43 value: "chf",
44 label: "CHF - Swiss Franc",
45 },
46 {
47 value: "cop",
48 label: "COP - Colombian Peso",
49 },
50 {
51 value: "czk",
52 label: "CZK - Czech Koruna",
53 },
54 {
55 value: "dkk",
56 label: "DKK - Danish Krone",
57 },
58 {
59 value: "dop",
60 label: "DOP - Dominican Peso",
61 },
62 {
63 value: "egp",
64 label: "EGP - Egyptian Pound",
65 },
66 {
67 value: "eur",
68 label: "EUR - Euro",
69 },
70 {
71 value: "gbp",
72 label: "GBP - Pound Sterling",
73 },
74 {
75 value: "hkd",
76 label: "HKD - Hong Kong Dollar",
77 },
78 {
79 value: "idr",
80 label: "IDR - Indonesian Rupiah",
81 },
82 {
83 value: "ils",
84 label: "ILS - Israeli New Shekel",
85 },
86 {
87 value: "jod",
88 label: "JOD - Jordanian Dollar",
89 },
90 {
91 value: "kes",
92 label: "KES - Kenyan Shilling",
93 },
94 {
95 value: "kwd",
96 label: "KWD - Kuwaiti Dinar",
97 },
98 {
99 value: "lkr",
100 label: "LKR - Sri Lankan Rupee",
101 },
102 {
103 value: "mxn",
104 label: "MXN - Mexican Peso",
105 },
106 {
107 value: "ngn",
108 label: "NGN - Nigerian Naira",
109 },
110 {
111 value: "nok",
112 label: "NOK - Norwegian Krone",
113 },
114 {
115 value: "nzd",
116 label: "NZD - New Zealand Dollar",
117 },
118 {
119 value: "omr",
120 label: "OMR - Omani Rial",
121 },
122 {
123 value: "pen",
124 label: "PEN - Peruvian Sol",
125 },
126 {
127 value: "pln",
128 label: "PLN - Polish Złoty",
129 },
130 {
131 value: "ron",
132 label: "RON - Romanian Leu",
133 },
134 {
135 value: "sek",
136 label: "SEK - Swedish Krona",
137 },
138 {
139 value: "thb",
140 label: "THB - Thai Baht",
141 },
142 {
143 value: "try",
144 label: "TRY - Turkish Lira",
145 },
146 {
147 value: "twd",
148 label: "TWD - Taiwan Dollar",
149 },
150 {
151 value: "vnd",
152 label: "VND - Vietnamese Dong",
153 },
154 {
155 value: "zar",
156 label: "ZAR - South African Rand",
157 },
158 ];
159
160 export default function BuyBitcoin() {
161 const [currency, setCurrency] = React.useState("usd");
162 const [amount, setAmount] = React.useState("250");
163 const { data: onchainAddress } = useOnchainAddress();
164
165 async function launch() {
166 const url = `https://getalby.com/topup?address=${onchainAddress}&amount=${amount}¤cy=${currency}`;
167 openLink(url);
168 }
169
170 return (
171 <div className="grid gap-5">
172 <AppHeader
173 pageTitle="Buy Bitcoin"
174 title="Buy Bitcoin"
175 description="Use one of our partner providers to buy bitcoin and deposit it to your on-chain balance."
176 />
177 <MempoolAlert />
178 <div className="grid grid-cols-1 lg:grid-cols-2 gap-1 lg:gap-10">
179 <div className="flex max-w-lg flex-col gap-4">
180 <div className="grid gap-4">
181 <p className="text-muted-foreground">
182 How much bitcoin would you like to buy?
183 </p>
184 <div className="grid gap-1.5">
185 <Label htmlFor="amount">Enter Amount</Label>
186 <Input
187 name="amount"
188 autoFocus
189 onChange={(e) => setAmount(e.target.value)}
190 value={amount}
191 type="text"
192 placeholder="amount"
193 />
194 </div>
195
196 <div className="grid gap-2">
197 <Label>Currency</Label>
198 <Select
199 name="currency"
200 value={currency}
201 onValueChange={(value) => setCurrency(value)}
202 >
203 <SelectTrigger>
204 <SelectValue placeholder="Currency" />
205 </SelectTrigger>
206 <SelectContent>
207 {SUPPORTED_CURRENCIES.map((currency) => (
208 <SelectItem key={currency.value} value={currency.value}>
209 {currency.label}
210 </SelectItem>
211 ))}
212 </SelectContent>
213 </Select>
214 </div>
215
216 <LoadingButton size="sm" onClick={launch} type="button">
217 Next
218 </LoadingButton>
219 </div>
220 </div>
221 </div>
222 </div>
223 );
224 }
225