feat: added /account/secretPhrase page

apps/web/app/account/[id]/account-layout.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { AccountType } from "@paybox/common"
+import { accountAtom, accountsAtom } from "@paybox/recoil"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+import { useRecoilValue, useSetRecoilState } from "recoil"
+import { toast } from "sonner"
+
+export const AccountLayout = ({
+    children,
+    account,
+    id
+}: {
+    children: React.ReactNode,
+    account: AccountType,
+    id: string
+}) => {
+    const setAccount = useSetRecoilState(accountAtom);
+    const accounts = useRecoilValue(accountsAtom);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (account) {
+            setAccount(account)
+        } else {
+            const acc = accounts.find(acc => acc.id === id);
+            if(!acc) {
+                toast.error("Account not found");
+                router.push('/account/');
+                return;
+            }
+            if (acc) {
+                setAccount(acc)
+            }
+        }
+    }, [account]);
+
+    return (
+        <>
+            {children}
+        </>
+    );
+}

apps/web/app/account/[id]/layout.tsx

@@ -0,0 +1,65 @@
+import { Metadata } from "next";
+
+import { cookies } from "next/headers";
+import { AccountType, BACKEND_URL, responseStatus } from "@paybox/common";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/util";
+import { redirect } from "next/navigation";
+import { AccountLayout } from "./account-layout";
+
+export const metadata: Metadata = {
+  title: "Account | PayBox",
+  description: "Account | PayBox",
+};
+
+
+interface AccountLayoutProps {
+  children: React.ReactNode;
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+const getAccount = async (jwt: string, id: string): Promise<AccountType | null> => {
+  try {
+    const { status, account }: { status: responseStatus, account: AccountType } = await fetch(`${BACKEND_URL}/account?accountId=${id}`, {
+      method: "get",
+      headers: {
+        "Content-type": "application/json",
+        authorization: `Bearer ${jwt}`,
+      },
+      cache: "no-cache"
+    }).then(res => res.json());
+    if (status == responseStatus.Error) {
+      return null
+    }
+    return account
+  } catch (error) {
+    console.log(error);
+    return null
+  }
+}
+
+export default async function AccountMainLayout({
+  children,
+  params,
+}: AccountLayoutProps) {
+  const {id} = params;
+  const session = await getServerSession(authOptions);
+  if (!session || !session.user || !session.user?.email) {
+    redirect("/signup");
+  }
+
+  //@ts-ignore
+  const account = await getAccount(session.user.jwt, id);
+  return (
+    <>
+        {account && 
+            <AccountLayout
+                account={account}
+                children={children}
+                id={id}
+            />
+        }
+    </>
+  );
+}

apps/web/app/account/[id]/msg-comp.tsx

@@ -0,0 +1,23 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { EyeOff, RocketIcon } from "lucide-react";
+
+export const AlertMsg = ({
+    tab
+}: {
+    tab: string
+}) => {
+    return (
+        <>
+            <Alert variant={"default"}>
+                <RocketIcon className="h-4 w-4" color="#ff4545" />
+                <AlertTitle className="text-[#ff4545]">Heads up!</AlertTitle>
+                <AlertDescription>Your {tab} is the only way to retreive your wallet!</AlertDescription>
+            </Alert>
+            <Alert variant={"default"}>
+                <EyeOff className="h-4 w-4" color="#ff4545" />
+                <AlertTitle className="text-[#ff4545]">Caution!</AlertTitle>
+                <AlertDescription>Don't let anyone see your {tab}.</AlertDescription>
+            </Alert>
+        </>
+    );
+}

apps/web/app/account/[id]/privatekey/components/private-key-form.tsx

@@ -76,10 +76,10 @@ export const PrivateKeyFrom = ({
                     {network: "Ethereum", privateKey: decryptWithPassword(eth.privateKey, hashPassword)}
                 ]);
                 setOpen(true);
-                return toast.success("Private Key Fetched Successfully");
+                return "Private Key Fetched Successfully";
             },
             error: (error) => {
-                return toast.error(error);
+                return error;
             }
         });
     }

apps/web/app/account/[id]/privatekey/page.tsx

@@ -1,22 +1,12 @@
-import {
-    Alert,
-    AlertDescription,
-    AlertTitle,
-} from "@/components/ui/alert"
 import {
     Card,
     CardHeader,
-    CardTitle,
 } from "@/components/ui/card"
-import { EyeOff } from 'lucide-react';
-import { RocketIcon } from "lucide-react"
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/util";
 import { PrivateKeyFrom } from "@/app/account/[id]/privatekey/components/private-key-form";
+import { AlertMsg } from "@/app/account/[id]/msg-comp";
 
-const getEncryptedPrivateKeys = async () => {
-
-}
 
 export default async function Page({ params }: { params: { id: string } }) {
     console.log(params);
@@ -28,16 +18,7 @@ export default async function Page({ params }: { params: { id: string } }) {
                 <Card className="min-w-56 max-w-[500px]">
                     <CardHeader>
                         {/* <CardTitle>Private key</CardTitle> */}
-                        <Alert variant={"default"}>
-                            <RocketIcon className="h-4 w-4" color="#ff4545" />
-                            <AlertTitle className="text-[#ff4545]">Heads up!</AlertTitle>
-                            <AlertDescription>Your private is the only way to retreive your wallet!</AlertDescription>
-                        </Alert>
-                        <Alert variant={"default"}>
-                            <EyeOff className="h-4 w-4" color="#ff4545" />
-                            <AlertTitle className="text-[#ff4545]">Caution!</AlertTitle>
-                            <AlertDescription>Don't let anyone see your private keys.</AlertDescription>
-                        </Alert>
+                        <AlertMsg tab="private key" />
                     </CardHeader>
                     <PrivateKeyFrom
                         accountId={params.id}
@@ -52,4 +33,5 @@ export default async function Page({ params }: { params: { id: string } }) {
         </>
     );
 
-}
+}
+

apps/web/app/account/[id]/secretPhrase/components/secret-dialog-box.tsx

@@ -0,0 +1,103 @@
+import { CopyIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertTriangle } from 'lucide-react';
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea";
+import React, { Suspense } from "react";
+import { useRecoilValue } from "recoil";
+import { accountAtom, accountPrivateKeysAtom } from "@paybox/recoil";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SecretPhraseDialogBox({
+    open,
+    setOpen,
+    seed,
+}: {
+    open: boolean,
+    setOpen: (open: boolean) => void,
+    seed?: string | null
+}) {
+    const account = useRecoilValue(accountAtom);
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        {account?.name} Secret Phrase
+                    </DialogTitle>
+                    <DialogDescription>
+
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Card className="border-none">
+                    <CardHeader>
+                        <Alert variant={"default"}>
+                            <AlertTriangle className="h-4 w-4" color="#ff4545" />
+                            <AlertTitle className="text-[#ff4545]">Caution!</AlertTitle>
+                            <AlertDescription className="text-[#ff4545]">Do not share your Secret Phrase. Indiviual bearing this has full control on this account!</AlertDescription>
+                        </Alert>
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                        {/* Create ui */}
+                        {seed ?
+                            <div className="grid grid-cols-3 gap-3">
+                                {seed.split(" ").map((word, index) => (
+                                    <Label className="flex flex-row justify-around px-4 items-center border border-input rounded-md focus-visible:ring-1 focus-visible:ring-ring">
+                                        <Label className="text-sm">{index + 1}.</Label>
+                                        <Input
+                                            type="text"
+                                            className="text-center min-w-fit border-none hover:border-none focus-visible:ring-0"
+                                            value={word}
+                                            readOnly
+                                        />
+                                    </Label>
+                                ))}
+                            </div>
+                            : <div className="grid grid-cols-3 gap-3">
+                                {Array(24).fill(0).map((index) => (
+                                    <Skeleton
+                                        className="min-w-fit min-h-9"
+                                    />
+                                ))}
+                            </div>
+                        }
+                    </CardContent>
+                    <DialogFooter className="sm:justify-start">
+                        <DialogClose asChild>
+                            <CardFooter className="w-full">
+                                <Button type="button" variant="secondary" className="w-full">
+                                    Close
+                                </Button>
+                            </CardFooter>
+                        </DialogClose>
+                    </DialogFooter>
+                </Card>
+            </DialogContent>
+        </Dialog>
+    )
+}