ConnectAlbyAccount.tsx raw

   1  import {
   2    CreditCardIcon,
   3    DatabaseBackupIcon,
   4    HeadphonesIcon,
   5    LifeBuoyIcon,
   6    MailIcon,
   7    SparklesIcon,
   8    ZapIcon,
   9  } from "lucide-react";
  10  import Container from "src/components/Container";
  11  import ExternalLink from "src/components/ExternalLink";
  12  import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
  13  import { Badge } from "src/components/ui/badge";
  14  import {
  15    Card,
  16    CardDescription,
  17    CardHeader,
  18    CardTitle,
  19  } from "src/components/ui/card";
  20  import { LinkButton } from "src/components/ui/custom/link-button";
  21  
  22  type ConnectAlbyAccountProps = {
  23    connectUrl?: string;
  24  };
  25  
  26  export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
  27    return (
  28      <div className="w-full h-full flex flex-col items-center justify-center gap-5">
  29        <Container>
  30          <TwoColumnLayoutHeader
  31            title="Connect Your Alby Account"
  32            pageTitle="Connect Your Alby Account"
  33            description="Your Alby Account brings several benefits to your Alby Hub"
  34          />
  35          <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-3 mt-5">
  36            <Card className="w-full relative py-2">
  37              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  38                <ZapIcon className="size-6" />
  39                <CardTitle className="text-sm">
  40                  Lightning Address
  41                  <AlbyProIcon />
  42                </CardTitle>
  43                <CardDescription className="text-xs">
  44                  Personalized lightning address to receive payments
  45                </CardDescription>
  46              </CardHeader>
  47            </Card>
  48            <Card className="w-full relative py-2">
  49              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  50                <MailIcon className="size-6" />
  51                <CardTitle className="text-sm">
  52                  Email Notifications
  53                  <AlbyProIcon />
  54                </CardTitle>
  55                <CardDescription className="text-xs">
  56                  Instant notifications about incoming transactions and more
  57                </CardDescription>
  58              </CardHeader>
  59            </Card>
  60            <Card className="w-full relative py-2">
  61              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  62                <DatabaseBackupIcon className="size-6" />
  63                <CardTitle className="text-sm">
  64                  Encrypted Backups
  65                  <AlbyProIcon />
  66                </CardTitle>
  67                <CardDescription className="text-xs">
  68                  Ensures you can always recover funds from lightning channels
  69                </CardDescription>
  70              </CardHeader>
  71            </Card>
  72            <Card className="w-full relative py-2">
  73              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  74                <LifeBuoyIcon className="size-6" />
  75                <CardTitle className="text-sm">
  76                  Support
  77                  <AlbyProIcon />
  78                </CardTitle>
  79                <CardDescription className="text-xs">
  80                  Human support via live chat when you need a helping hand
  81                </CardDescription>
  82              </CardHeader>
  83            </Card>
  84            <Card className="w-full relative py-2">
  85              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  86                <CreditCardIcon className="size-6" />
  87                <CardTitle className="text-sm">Fiat Top ups</CardTitle>
  88                <CardDescription className="text-xs">
  89                  Top up with fiat and get Bitcoin delivered to your Alby Hub
  90                </CardDescription>
  91              </CardHeader>
  92            </Card>
  93            <Card className="w-full relative py-2">
  94              <CardHeader className="flex flex-col justify-center items-center text-center p-4">
  95                <HeadphonesIcon className="size-6" />
  96                <CardTitle className="text-sm">Podcasting 2.0</CardTitle>
  97                <CardDescription className="text-xs">
  98                  Support your favorite creators by streaming sats
  99                </CardDescription>
 100              </CardHeader>
 101            </Card>
 102          </div>
 103          <div className="flex flex-col items-center justify-center gap-2 mt-5">
 104            <LinkButton to={connectUrl || "/alby/auth"} size="lg">
 105              Connect
 106            </LinkButton>
 107            <LinkButton
 108              size="sm"
 109              variant="link"
 110              to="/"
 111              className="text-muted-foreground"
 112            >
 113              Maybe later
 114            </LinkButton>
 115          </div>
 116          <div className="text-muted-foreground flex flex-col items-center text-xs gap-2 mt-5 -mb-10">
 117            <Badge title="Pro" variant="outline">
 118              <SparklesIcon />
 119            </Badge>
 120            <div>
 121              Unlock additional features with{" "}
 122              <ExternalLink
 123                to="https://getalby.com/pricing"
 124                className="underline"
 125              >
 126                Pro
 127              </ExternalLink>
 128            </div>
 129          </div>
 130        </Container>
 131      </div>
 132    );
 133  
 134    function AlbyProIcon() {
 135      return (
 136        <div className="absolute right-2 top-2" title="Pro">
 137          <SparklesIcon className="size-4" />
 138        </div>
 139      );
 140    }
 141  }
 142