chore: simple ui to show all the address

shawakash · Apr 23, 2024 · 05dcfaa · 05dcfaa
1 parent 4cc2344
commit 05dcfaa
Showing 1 changed file with 60 additions and 1 deletion.
diff --git a/apps/web/src/app/profile/settings/page.tsx b/apps/web/src/app/profile/settings/page.tsx
@@ -6,12 +6,13 @@ import { Separator } from "@/src/components/ui/separator";
 import { Badge } from "@/src/components/ui/badge";
 import { Button } from "@/src/components/ui/button"
 
-import { Languages } from "lucide-react";
+import { BookA, Languages } from "lucide-react";
 import TestModeSwitch from "./components/test-mode";
 import LocaleButton from "./components/locale-btn";
 import { BACKEND_URL, ClientWithJwt, Locales, Settings, responseStatus } from "@paybox/common";
 import ChangePassword from "./components/change-password";
 import SetClientJwtWrapper from "@/src/components/set-client-jwt-wrapper";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/src/components/ui/dialog";
 
 
 
@@ -39,6 +40,30 @@ const getSettings = async (jwt: string) => {
     }
 }
 
+const getAddressbook = async (jwt: string) => {
+    try {
+        const { status, book, msg }:
+            { status: responseStatus, book: any, msg?: string }
+            = await fetch(`${BACKEND_URL}/book/`, {
+                method: "GET",
+                headers: {
+                    "Content-type": "application/json",
+                    authorization: `Bearer ${jwt}`,
+                },
+                cache: "no-cache"
+            }).then(res => res.json());
+        if (status === responseStatus.Error) {
+            console.log(msg)
+            return null;
+        }
+        return book;
+    } catch (error) {
+        console.log(error);
+        return null
+    }
+
+}
+
 export default async function Home({
     params,
     searchParams,
@@ -54,6 +79,7 @@ export default async function Home({
         redirect("/signup");
     }
     const settings = await getSettings(jwt);
+    const book = await getAddressbook(jwt);
 
     const layout = cookies().get("react-resizable-panels:layout");
     const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
@@ -88,6 +114,39 @@ export default async function Home({
                         <LocaleButton locale={settings?.locale as Locales} />
                     </div>
                     <ChangePassword />
+                    <div className="">
+                        <Dialog>
+                            <DialogTrigger asChild className="w-2/3">
+                                <Button variant="secondary" className="flex gap-x-2 justify-between">
+                                    Address Book
+                                    <BookA className="w-4 h-4" />
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent className="sm:max-w-[425px]">
+                                <DialogHeader className=" flex flex-row justify-between items-center">
+                                    <div className="w-5/6 flex flex-col gap-y-2">
+                                        <DialogTitle>Address Book</DialogTitle>
+                                        <DialogDescription>
+                                            Save you most used addresses here...
+                                        </DialogDescription>
+                                    </div>
+                                </DialogHeader>
+                                <div className="flex flex-col gap-y-2">
+                                    {book && book.map((b: any) => (
+                                        <Button variant={"secondary"} key={b.id} className="flex justify-between">
+                                            <span>{b.name}</span>
+                                            <span>{b.publicKey}</span>
+                                        </Button>
+                                    ))}
+                                </div>
+                                <DialogClose>
+                                    <Button>
+                                        Close
+                                    </Button>
+                                </DialogClose>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
                 </div>
 
             </main>