From 8bd93fb3e35e4489b23b7a882a655e50accbba99 Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 17:21:23 +0530 Subject: [PATCH 1/7] chore: added auto focus to opt form --- apps/web/app/signup/components/otp.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/web/app/signup/components/otp.tsx b/apps/web/app/signup/components/otp.tsx index 56ac7b6e..39bab03f 100644 --- a/apps/web/app/signup/components/otp.tsx +++ b/apps/web/app/signup/components/otp.tsx @@ -41,13 +41,13 @@ export function OTPForm() { const onSubmit = async (data: z.infer) => { toast.promise( fetch(`${BACKEND_URL}/client/valid?otp=${data.otp}`, { - method: "PATCH", - headers: { - "Content-Type": "application/json", - //@ts-ignore - "Authorization": `Bearer ${session.data?.user?.jwt}` - }, - }).then((res) => res.json()), { + method: "PATCH", + headers: { + "Content-Type": "application/json", + //@ts-ignore + "Authorization": `Bearer ${session.data?.user?.jwt}` + }, + }).then((res) => res.json()), { loading: "Validating OTP", success: async ({ status, msg, valid, walletId, account }) => { // TODO: Add the walletId to the session @@ -58,7 +58,7 @@ export function OTPForm() { } return msg; }, - error: ({status, msg}) => { + error: ({ status, msg }) => { return msg; } }); @@ -74,6 +74,7 @@ export function OTPForm() { ( From 8d376d42a6c62d8fee2f375f23ef6010b61f61fe Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:03:20 +0530 Subject: [PATCH 2/7] chore: added selectedTab state to monitor the tab change for bg change --- apps/web/app/account/components/sidebar.tsx | 16 +++++-- apps/web/app/account/layout.tsx | 5 +- apps/web/app/account/page.tsx | 53 ++------------------- 3 files changed, 19 insertions(+), 55 deletions(-) diff --git a/apps/web/app/account/components/sidebar.tsx b/apps/web/app/account/components/sidebar.tsx index e71e4635..b4262532 100644 --- a/apps/web/app/account/components/sidebar.tsx +++ b/apps/web/app/account/components/sidebar.tsx @@ -10,8 +10,12 @@ import { TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" +import React, { use } from "react" +import { usePathname, useSearchParams, useParams } from 'next/navigation' + export interface LinksProps { + id: string title: string label?: string icon: LucideIcon @@ -22,9 +26,11 @@ export interface LinksProps { interface NavProps { isCollapsed: boolean links: LinksProps[] + selectedTab: string + setSelectedTab: (tab: string) => void } -export function Sidenav({ links, isCollapsed }: NavProps) { +export function Sidenav({ links, isCollapsed, selectedTab, setSelectedTab }: NavProps) { return (
setSelectedTab(link.id)} className={cn( buttonVariants({ variant: link.variant, size: "icon" }), "h-10 w-10", - link.variant === "default" && + link.id === selectedTab && "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white " )} > @@ -61,9 +68,10 @@ export function Sidenav({ links, isCollapsed }: NavProps) { setSelectedTab(link.id)} className={cn( buttonVariants({ variant: link.variant, size: "sm" }), - link.variant === "default" && + link.id === selectedTab && "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white", "justify-start", "h-10 flex gap-x-2" diff --git a/apps/web/app/account/layout.tsx b/apps/web/app/account/layout.tsx index e844aa20..433bb715 100644 --- a/apps/web/app/account/layout.tsx +++ b/apps/web/app/account/layout.tsx @@ -37,7 +37,9 @@ const getAccounts = async (jwt: string): Promise => { } } -export default async function AccountMainLayout({ children }: AccountLayoutProps) { +export default async function AccountMainLayout({ + children, +}: AccountLayoutProps) { const layout = cookies().get("react-resizable-panels:layout"); const defaultLayout = layout ? JSON.parse(layout.value) : undefined; @@ -48,7 +50,6 @@ export default async function AccountMainLayout({ children }: AccountLayoutProps //@ts-ignore const accounts = await getAccounts(session.user.jwt); - return ( <> diff --git a/apps/web/app/account/page.tsx b/apps/web/app/account/page.tsx index 60daa615..02d80fe1 100644 --- a/apps/web/app/account/page.tsx +++ b/apps/web/app/account/page.tsx @@ -1,49 +1,4 @@ -import { Separator } from "@/components/ui/separator"; -import { getServerSession } from "next-auth"; -import { redirect } from "next/navigation"; -import { authOptions } from "@/app/api/auth/[...nextauth]/util"; -import { AccountType, BACKEND_URL, ClientWithJwt, responseStatus } from "@paybox/common"; - -const getAccounts = async (jwt: string): Promise => { - try { - const { status, accounts }: { status: responseStatus, accounts: AccountType[] } = await fetch(`${BACKEND_URL}/account/all`, { - method: "get", - headers: { - "Content-type": "application/json", - authorization: `Bearer ${jwt}`, - }, - cache: "no-cache" - }).then(res => res.json()); - if (status == responseStatus.Error) { - return null - } - return accounts - } catch (error) { - console.log(error); - return null - } -} - -export default async function AccountPage() { - const session = await getServerSession(authOptions); - if (!session || !session.user || !session.user?.email) { - redirect("/signup"); - } - - //@ts-ignore - const accounts = await getAccounts(session.user.jwt); - return ( -
-
-

Profile

-

- This is how others will see you on the site. Fuck ou -

-
- {/* {accounts && - - } */} - -
- ); -} +export default function Page({ params }: { params: { id: string } }) { + console.log(params) + return
My Post: {params.id}
+} \ No newline at end of file From 5dc0497ed3eb91a061b39ca582a459910242270f Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:05:40 +0530 Subject: [PATCH 3/7] Chore: account sidenav links --- apps/web/app/account/components/navLinks.tsx | 107 +++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 apps/web/app/account/components/navLinks.tsx diff --git a/apps/web/app/account/components/navLinks.tsx b/apps/web/app/account/components/navLinks.tsx new file mode 100644 index 00000000..3fc50a22 --- /dev/null +++ b/apps/web/app/account/components/navLinks.tsx @@ -0,0 +1,107 @@ + +import { + Archive, + ArchiveX, + Inbox, + Send, + Trash2, + File, + Wallet, + LayoutDashboard, + Lock, + VenetianMask, + Bitcoin, + PencilLine, + FilePlus, + FilePlus2Icon, + GanttChart +} from "lucide-react"; + +export const commonNavLinks = [ + { + id: "", + title: "Manage Accounts", + label: "", + icon: GanttChart, + variant: "ghost", + link: "/account", + }, + { + id: "create", + title: "Create Account", + label: "128", + icon: FilePlus2Icon, + variant: "ghost", + link: "/account/create", + }, + { + id: "importSecretPhrase", + title: "Import Secret Recovery", + label: "9", + icon: FilePlus, + variant: "ghost", + link: "/account/importSecretPhrase", + }, + { + id: "importPrivate", + title: "Import From Private-Key", + label: "", + icon: Lock, + variant: "ghost", + link: "importPrivate", + }, + +] + +export const getNavLinks = (id: string) => { + return [ + { + id: "dashboard", + title: "Dashboard", + label: "128", + icon: LayoutDashboard, + variant: "ghost", + link: `/account/${id}/#`, + }, + { + id: "statements", + title: "Statements", + label: "9", + icon: Bitcoin, + variant: "ghost", + link: `/account/${id}/statements`, + }, + { + id: "privatekey", + title: "Private-Key", + label: "", + icon: Lock, + variant: "ghost", + link: `/account/${id}/privatekey`, + }, + { + id: "secretPhrase", + title: "Secret", + label: "23", + icon: VenetianMask, + variant: "ghost", + link: `/account/${id}/secretPhrase`, + }, + { + id: "update", + title: "Update", + label: "", + icon: PencilLine, + variant: "ghost", + link: `/account/${id}/update`, + }, + { + id: "remove", + title: "Remove", + label: "", + icon: Trash2, + variant: "ghost", + link: `/account/${id}/remove`, + }, + ] +} \ No newline at end of file From 69207c4bffe5c17b8518f4d61cfcc0b4e0e1c504 Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:06:09 +0530 Subject: [PATCH 4/7] chore: changing layouts --- .../app/account/components/accountLayout.tsx | 82 +++++++------------ 1 file changed, 29 insertions(+), 53 deletions(-) diff --git a/apps/web/app/account/components/accountLayout.tsx b/apps/web/app/account/components/accountLayout.tsx index b7d40ae9..e2eed74e 100644 --- a/apps/web/app/account/components/accountLayout.tsx +++ b/apps/web/app/account/components/accountLayout.tsx @@ -8,13 +8,14 @@ import { ResizablePanelGroup, } from "@/components/ui/resizable"; import { cn } from "@/lib/utils"; -import { Archive, ArchiveX, Inbox, Send, Trash2, File, Wallet } from "lucide-react"; -import { LinksProps, Sidenav } from "./sidebar"; + +import { LinksProps, Sidenav } from "@/app/account/components/sidebar"; import { TooltipProvider } from "@/components/ui/tooltip"; import { Separator } from "@/components/ui/separator"; import { AccountSwitcher } from "@/app/account/components/account-switcher"; import { AccountType } from "@paybox/common"; -import { useRouter } from "next/navigation"; +import { usePathname, useRouter } from "next/navigation"; +import { commonNavLinks, getNavLinks } from "./navLinks"; interface AccountLayoutProps { defaultLayout: number[] | undefined; @@ -24,50 +25,7 @@ interface AccountLayoutProps { accounts: AccountType[] } -const sidenavLinks = [ - { - title: "Inbox", - label: "128", - icon: Inbox, - variant: "default", - link: "/account/create", - }, - { - title: "Drafts", - label: "9", - icon: File, - variant: "ghost", - link: "/account/create", - }, - { - title: "Sent", - label: "", - icon: Send, - variant: "ghost", - link: "/account/create", - }, - { - title: "Junk", - label: "23", - icon: ArchiveX, - variant: "ghost", - link: "/account/create", - }, - { - title: "Trash", - label: "", - icon: Trash2, - variant: "ghost", - link: "/account/create", - }, - { - title: "Archive", - label: "", - icon: Archive, - variant: "ghost", - link: "/account/create", - }, -] + export function AccountLayout({ defaultLayout = [100, 480], @@ -83,7 +41,9 @@ export function AccountLayout({ accounts[0].id ); + const path = usePathname() const router = useRouter(); + const [selectedTab, setSelectedTab] = React.useState(path.split('/')[path.split('/').length - 1]); useEffect(() => { const checkScreenWidth = () => { @@ -100,8 +60,20 @@ export function AccountLayout({ }, []); useEffect(() => { - router.push(`/account?id=${selectedAccount}`); - }, [selectedAccount]); + setSelectedTab(path.split("/")[3] || "dashboard") + router.push(`/account/${selectedAccount}/${path.split("/")[3] || ""}`) + }, [selectedAccount]) + + useEffect(() => { + if (path.split("/").length === 2) { + setSelectedTab(path.split("/")[2] || ""); + router.push(path) + } + if (path.split("/").length === 3) { + setSelectedTab(path.split("/")[3] || "dashboard"); + router.push(path) + } + }, [path]); return ( @@ -127,8 +99,8 @@ export function AccountLayout({ defaultSize={defaultLayout[0]} collapsedSize={navCollapsedSize} collapsible={true} - minSize={isMobile ? 0 : 14} - maxSize={isMobile ? 14 : 20} + minSize={isMobile ? 0 : 18} + maxSize={isMobile ? 18 : 25} onCollapse={() => { setIsCollapsed(true); document.cookie = `react-resizable-panels:collapsed=${JSON.stringify( @@ -161,12 +133,16 @@ export function AccountLayout({ From b7ced9e9ee508494dc25061bd0bd5cc85ef9bbc1 Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:06:30 +0530 Subject: [PATCH 5/7] chore: importPrivate page init --- apps/web/app/account/importPrivate/page.tsx | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 apps/web/app/account/importPrivate/page.tsx diff --git a/apps/web/app/account/importPrivate/page.tsx b/apps/web/app/account/importPrivate/page.tsx new file mode 100644 index 00000000..9e8f64f1 --- /dev/null +++ b/apps/web/app/account/importPrivate/page.tsx @@ -0,0 +1,4 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params) + return
From import Private: {params.id}
+} \ No newline at end of file From 86a45114c7a7bfb6eeba07082ac839598fef446c Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:06:47 +0530 Subject: [PATCH 6/7] chore: import secret page init --- apps/web/app/account/importSecretPhrase/page.tsx | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 apps/web/app/account/importSecretPhrase/page.tsx diff --git a/apps/web/app/account/importSecretPhrase/page.tsx b/apps/web/app/account/importSecretPhrase/page.tsx new file mode 100644 index 00000000..fd457967 --- /dev/null +++ b/apps/web/app/account/importSecretPhrase/page.tsx @@ -0,0 +1,4 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params) + return
From Import Secret: {params.id}
+} \ No newline at end of file From 192f3bda6f363699c5c099c6f3b391dc1c344aac Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Wed, 27 Mar 2024 21:07:03 +0530 Subject: [PATCH 7/7] chore: account/id page layout --- apps/web/app/account/[id]/page.tsx | 4 ++++ apps/web/app/account/[id]/privatekey/page.tsx | 5 +++++ apps/web/app/account/[id]/remove/page.tsx | 5 +++++ apps/web/app/account/[id]/secretPhrase/page.tsx | 5 +++++ apps/web/app/account/[id]/statements/page.tsx | 5 +++++ apps/web/app/account/[id]/update/page.tsx | 4 ++++ 6 files changed, 28 insertions(+) create mode 100644 apps/web/app/account/[id]/page.tsx create mode 100644 apps/web/app/account/[id]/privatekey/page.tsx create mode 100644 apps/web/app/account/[id]/remove/page.tsx create mode 100644 apps/web/app/account/[id]/secretPhrase/page.tsx create mode 100644 apps/web/app/account/[id]/statements/page.tsx create mode 100644 apps/web/app/account/[id]/update/page.tsx diff --git a/apps/web/app/account/[id]/page.tsx b/apps/web/app/account/[id]/page.tsx new file mode 100644 index 00000000..1bcaca4b --- /dev/null +++ b/apps/web/app/account/[id]/page.tsx @@ -0,0 +1,4 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params) + return
From /: {params.id}
+} \ No newline at end of file diff --git a/apps/web/app/account/[id]/privatekey/page.tsx b/apps/web/app/account/[id]/privatekey/page.tsx new file mode 100644 index 00000000..dcad1b3c --- /dev/null +++ b/apps/web/app/account/[id]/privatekey/page.tsx @@ -0,0 +1,5 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params); + //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT + return
From Private key: {params.id}
+} \ No newline at end of file diff --git a/apps/web/app/account/[id]/remove/page.tsx b/apps/web/app/account/[id]/remove/page.tsx new file mode 100644 index 00000000..920d1625 --- /dev/null +++ b/apps/web/app/account/[id]/remove/page.tsx @@ -0,0 +1,5 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params); + //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT + return
From remove account: {params.id}
+} \ No newline at end of file diff --git a/apps/web/app/account/[id]/secretPhrase/page.tsx b/apps/web/app/account/[id]/secretPhrase/page.tsx new file mode 100644 index 00000000..5ad51847 --- /dev/null +++ b/apps/web/app/account/[id]/secretPhrase/page.tsx @@ -0,0 +1,5 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params); + //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT + return
From secret phrase: {params.id}
+} \ No newline at end of file diff --git a/apps/web/app/account/[id]/statements/page.tsx b/apps/web/app/account/[id]/statements/page.tsx new file mode 100644 index 00000000..2512fc71 --- /dev/null +++ b/apps/web/app/account/[id]/statements/page.tsx @@ -0,0 +1,5 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params); + //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT + return
From statements: {params.id}
+} \ No newline at end of file diff --git a/apps/web/app/account/[id]/update/page.tsx b/apps/web/app/account/[id]/update/page.tsx new file mode 100644 index 00000000..02d80fe1 --- /dev/null +++ b/apps/web/app/account/[id]/update/page.tsx @@ -0,0 +1,4 @@ +export default function Page({ params }: { params: { id: string } }) { + console.log(params) + return
My Post: {params.id}
+} \ No newline at end of file