1 import { useLocation } from "react-router";
2 import ExternalLink from "src/components/ExternalLink";
3 4 // The card topup app supports configuration presets selected via a `provider`
5 // query param (e.g. linked from the Cards page). Read it straight from the URL
6 // so the link opens card.albylabs.com pre-configured for the chosen provider.
7 export function BitcoinCardTopupInstallGuide() {
8 const provider = new URLSearchParams(useLocation().search).get("provider");
9 const url = provider
10 ? `https://card.albylabs.com?provider=${encodeURIComponent(provider)}`
11 : "https://card.albylabs.com";
12 13 return (
14 <div>
15 <ul className="list-inside list-decimal text-muted-foreground">
16 <li>
17 Open{" "}
18 <ExternalLink to={url} className="underline">
19 card.albylabs.com
20 </ExternalLink>{" "}
21 on the device you'll top up from.
22 </li>
23 <li>
24 <span className="font-medium text-foreground">
25 Add it to your home screen
26 </span>{" "}
27 (or bookmark it) so you can reopen it later.
28 </li>
29 <li>Enter your card's deposit details to set it up.</li>
30 </ul>
31 </div>
32 );
33 }
34