feat: frontend implementation (wip)

getAlby · Jul 9, 2024 · 6eadd1b · 6eadd1b
1 parent 7fb2a74
commit 6eadd1b
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 5 deletions.
diff --git a/frontend/public/images/illustrations/login-with-alby.png b/frontend/public/images/illustrations/login-with-alby.png
diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -6,6 +6,8 @@ import {
   Link2Icon,
   ZapIcon,
 } from "lucide-react";
+import albyButton from "public/images/illustrations/login-with-alby.png";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading";
@@ -20,16 +22,33 @@ import {
   CardHeader,
   CardTitle,
 } from "src/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "src/components/ui/dialog";
+import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "src/components/ui/select";
 import { Separator } from "src/components/ui/separator";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { LinkStatus, useLinkAccount } from "src/hooks/useLinkAccount";
-import { App } from "src/types";
+import { App, budgetOptions, validBudgetRenewals } from "src/types";
 
 function AlbyConnectionCard({ connection }: { connection?: App }) {
   const { data: albyMe } = useAlbyMe();
   const { loading, linkStatus, loadingLinkStatus, linkAccount } =
     useLinkAccount();
+  const [maxAmount, setMaxAmount] = useState();
 
   return (
     <Card>
@@ -62,10 +81,82 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
             <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
               {loadingLinkStatus && <Loading />}
               {!connection || linkStatus === LinkStatus.SharedNode ? (
-                <LoadingButton onClick={linkAccount} loading={loading}>
-                  {!loading && <Link2Icon className="w-4 h-4 mr-2" />}
-                  Link your Alby Account
-                </LoadingButton>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <LoadingButton loading={loading}>
+                      {!loading && <Link2Icon className="w-4 h-4 mr-2" />}
+                      Link your Alby Account
+                    </LoadingButton>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>Link to Alby Account</DialogHeader>
+                    <DialogDescription className="flex flex-col gap-4">
+                      <p>
+                        After you link your account, every app you access
+                        through your Alby Account will handle payments via the
+                        Hub.
+                      </p>
+                      <img src={albyButton} className="w-56 mx-auto" />
+                      <p>
+                        You can add a budget that will restrict how much can be
+                        spent from the Hub with your Alby Account.
+                      </p>
+                      <div className="grid gap-1.5">
+                        <Label>Budget renewal</Label>
+                        <Select
+                          value={"monthly"}
+                          /*onValueChange={handleBudgetRenewalChange} 
+                        disabled={!canEditPermissions}*/
+                        >
+                          <SelectTrigger className="w-[150px]">
+                            <SelectValue placeholder={"monthly"} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {validBudgetRenewals.map((renewalOption) => (
+                              <SelectItem
+                                key={renewalOption}
+                                value={renewalOption}
+                              >
+                                {renewalOption.charAt(0).toUpperCase() +
+                                  renewalOption.slice(1)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div
+                        id="budget-allowance-limits"
+                        className="grid grid-cols-6 grid-rows-2 md:grid-rows-1 md:grid-cols-6 gap-2 text-xs"
+                      >
+                        {Object.keys(budgetOptions).map((budget) => {
+                          return (
+                            // replace with something else and then remove dark prefixes
+                            <div
+                              key={budget}
+                              onClick={() =>
+                                setMaxAmount(budgetOptions[budget])
+                              }
+                              className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${
+                                maxAmount == budgetOptions[budget]
+                                  ? "border-primary"
+                                  : "border-muted"
+                              } text-center py-4`}
+                            >
+                              {budget}
+                              <br />
+                              {budgetOptions[budget] ? "sats" : "#reckless"}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </DialogDescription>
+                    <DialogFooter>
+                      <LoadingButton onClick={linkAccount} loading={loading}>
+                        <div>Link to Alby Account</div>
+                      </LoadingButton>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
               ) : linkStatus === LinkStatus.ThisNode ? (
                 <Button
                   variant="positive"