SubwalletIntro.tsx raw

   1  import {
   2    CirclePlusIcon,
   3    HandCoinsIcon,
   4    HelpCircleIcon,
   5    TriangleAlertIcon,
   6    Wallet2Icon,
   7  } from "lucide-react";
   8  import AppHeader from "src/components/AppHeader";
   9  
  10  import SubWalletDarkSVG from "public/images/illustrations/sub-wallet-dark.svg";
  11  import SubWalletLightSVG from "public/images/illustrations/sub-wallet-light.svg";
  12  import ResponsiveLinkButton from "src/components/ResponsiveLinkButton";
  13  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  14  import { LinkButton } from "src/components/ui/custom/link-button";
  15  
  16  export function SubwalletIntro() {
  17    return (
  18      <div className="grid gap-4">
  19        <AppHeader
  20          title="Sub-wallets"
  21          pageTitle="Sub-wallets"
  22          description="Create sub-wallets for yourself, friends, family or coworkers"
  23          contentRight={
  24            <>
  25              <ExternalLinkButton
  26                to="https://guides.getalby.com/user-guide/alby-hub/sub-wallets"
  27                variant="outline"
  28                size="icon"
  29              >
  30                <HelpCircleIcon className="size-4" />
  31              </ExternalLinkButton>
  32              <ResponsiveLinkButton
  33                to="/sub-wallets/new"
  34                icon={CirclePlusIcon}
  35                text="New Sub-wallet"
  36              />
  37            </>
  38          }
  39        />
  40        <div>
  41          <div className="flex flex-col gap-6 max-w-(--breakpoint-md)">
  42            <div className="mb-2">
  43              <img src={SubWalletDarkSVG} className="w-72 hidden dark:block" />
  44              <img src={SubWalletLightSVG} className="w-72 dark:hidden" />
  45            </div>
  46            <div>
  47              <div className="flex flex-row gap-3">
  48                <Wallet2Icon className="size-6" />
  49                <div className="font-medium">
  50                  Sub-wallets are separate wallets hosted by your Alby Hub
  51                </div>
  52              </div>
  53              <div className="ml-9 text-muted-foreground text-sm">
  54                Each sub-wallet has its own balance and can be used as a separate
  55                wallet that can be connected to Alby Account or any app.
  56              </div>
  57            </div>
  58            <div>
  59              <div className="flex flex-row gap-3">
  60                <HandCoinsIcon className="size-6" />
  61                <div className="font-medium">
  62                  Sub-wallets depend on your Alby Hub lightning balance and
  63                  receive limit
  64                </div>
  65              </div>
  66              <div className="ml-9 text-muted-foreground text-sm">
  67                Sub-wallets are using your Hubs node liquidity. They can receive
  68                funds as long as you have enough receive limit in your channels.
  69              </div>
  70            </div>
  71            <div>
  72              <div className="flex flex-row gap-3">
  73                <TriangleAlertIcon className="size-6" />
  74                <div className="font-medium">
  75                  Be wary of spending sub-wallets funds
  76                </div>
  77              </div>
  78              <div className="ml-9 text-muted-foreground text-sm">
  79                Make sure you always maintain enough funds in your lightning
  80                balance to prevent sub-wallets becoming unspendable. Sub-wallet
  81                payments might fail if the amount isn't available in your
  82                lightning balance.
  83              </div>
  84            </div>
  85            <div>
  86              <LinkButton to="/sub-wallets/new" className="mt-4">
  87                Create Sub-wallet
  88              </LinkButton>
  89            </div>
  90          </div>
  91        </div>
  92      </div>
  93    );
  94  }
  95