AlbyAccount.tsx raw

   1  import {
   2    ArrowLeftRightIcon,
   3    Link2OffIcon,
   4    MailIcon,
   5    SquareArrowOutUpRightIcon,
   6    ZapIcon,
   7  } from "lucide-react";
   8  
   9  import Loading from "src/components/Loading";
  10  import SettingsHeader from "src/components/SettingsHeader";
  11  import { Button } from "src/components/ui/button";
  12  import { Card, CardContent } from "src/components/ui/card";
  13  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  14  import { UnlinkAlbyAccount } from "src/components/UnlinkAlbyAccount";
  15  import UserAvatar from "src/components/UserAvatar";
  16  import { useAlbyMe } from "src/hooks/useAlbyMe";
  17  
  18  export function AlbyAccount() {
  19    const { data: albyMe, error: albyMeError, isLoading } = useAlbyMe();
  20  
  21    return (
  22      <>
  23        <SettingsHeader
  24          pageTitle="Alby Account"
  25          title="Alby Account"
  26          description="Manage the Alby Account linked to your Hub."
  27        />
  28        <div className="flex flex-col gap-6">
  29          {isLoading ? (
  30            <Card>
  31              <CardContent className="flex items-center justify-center">
  32                <Loading />
  33              </CardContent>
  34            </Card>
  35          ) : albyMeError ? (
  36            <Card>
  37              <CardContent className="flex items-center justify-center">
  38                <p className="text-sm text-muted-foreground">
  39                  Failed to load Alby Account details
  40                </p>
  41              </CardContent>
  42            </Card>
  43          ) : albyMe ? (
  44            <Card>
  45              <CardContent className="flex items-center justify-between gap-4">
  46                <div className="flex items-center gap-4 min-w-0">
  47                  <UserAvatar className="h-14 w-14" />
  48                  <div className="flex flex-col min-w-0">
  49                    <span className="font-semibold truncate">
  50                      {albyMe.name || albyMe.email}
  51                    </span>
  52                    {albyMe.name && albyMe.email && (
  53                      <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
  54                        <MailIcon className="size-4 shrink-0" />
  55                        <span className="truncate">{albyMe.email}</span>
  56                      </div>
  57                    )}
  58                    {albyMe.lightning_address && (
  59                      <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
  60                        <ZapIcon className="size-4 shrink-0" />
  61                        <span className="truncate">
  62                          {albyMe.lightning_address}
  63                        </span>
  64                      </div>
  65                    )}
  66                  </div>
  67                </div>
  68                <ExternalLinkButton
  69                  variant="outline"
  70                  size="sm"
  71                  to="https://getalby.com/settings"
  72                  className="gap-2 shrink-0"
  73                >
  74                  Manage on getalby.com <SquareArrowOutUpRightIcon />
  75                </ExternalLinkButton>
  76              </CardContent>
  77            </Card>
  78          ) : null}
  79  
  80          <div className="flex flex-col gap-3">
  81            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
  82              Danger Zone
  83            </h3>
  84            <Card className="border-destructive/40">
  85              <CardContent className="flex items-center justify-between gap-4">
  86                <div className="flex flex-col gap-1 text-sm min-w-0">
  87                  <h3 className="font-semibold">Switch Alby Account</h3>
  88                  <p className="text-muted-foreground">
  89                    Disconnects this account, then prompts you to sign in with
  90                    another.
  91                  </p>
  92                </div>
  93                <UnlinkAlbyAccount
  94                  navigateTo="/alby/auth?force_login=true"
  95                  successMessage="Please login with another Alby Account"
  96                >
  97                  <Button variant="outline" className="gap-2 shrink-0">
  98                    <ArrowLeftRightIcon /> Switch Account
  99                  </Button>
 100                </UnlinkAlbyAccount>
 101              </CardContent>
 102              <div className="border-t" />
 103              <CardContent className="flex items-center justify-between gap-4">
 104                <div className="flex flex-col gap-1 text-sm min-w-0">
 105                  <h3 className="font-semibold">Disconnect Alby Account</h3>
 106                  <p className="text-muted-foreground">
 107                    Stops lightning address, notifications, and subscription
 108                    payments.
 109                  </p>
 110                </div>
 111                <UnlinkAlbyAccount>
 112                  <Button variant="destructive" className="gap-2 shrink-0">
 113                    <Link2OffIcon />
 114                    Disconnect
 115                  </Button>
 116                </UnlinkAlbyAccount>
 117              </CardContent>
 118            </Card>
 119          </div>
 120        </div>
 121      </>
 122    );
 123  }
 124