Skip to content

Commit

Permalink
chore: address book ui updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@shawakash
shawakash committed Apr 25, 2024
1 parent 05cd266 commit feb980c
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 96 deletions.
2 changes: 1 addition & 1 deletion apps/web/src/actions/book.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const getAddressbook = async (jwt: string) => {
},
cache: "no-cache",
next: {
tags: ["book"]
tags: ["book"],
}
}).then(res => res.json());
if (status === responseStatus.Error) {
Expand Down
8 changes: 3 additions & 5 deletions apps/web/src/app/account/import/book/component/add-address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,11 @@ function AddAddressBook({

toast.promise(call(), {
loading: "Adding address...",
success: ({id}) => {
success: ({ id }) => {
setBook((old) => [...old, { ...data, id } as AddressBook]);
return "Address added";
},
error: ({msg}) => {
error: ({ msg }) => {
return msg;
}
});
Expand Down Expand Up @@ -217,9 +217,7 @@ function AddAddressBook({
<DialogClose className="w-full">
<Button className="w-full" variant="secondary">Cancel</Button>
</DialogClose>
<DialogClose className="w-full">
<Button className="w-full" type="submit">Submit</Button>
</DialogClose>
<Button className="w-full" type="submit">Submit</Button>
</DialogFooter>
</form>
</Form>
Expand Down
10 changes: 8 additions & 2 deletions apps/web/src/app/account/import/book/component/rm-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
import { rmAddress } from '@/src/actions/book';
import { Button } from '@/src/components/ui/button';
import { cn } from '@/src/utils/cn';
import { booksAtom } from '@paybox/recoil';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useSetRecoilState } from 'recoil';
import { toast } from 'sonner';

function RemoveButton({
Expand All @@ -15,16 +17,20 @@ function RemoveButton({
id: string,
}) {
const router = useRouter();
const setBook = useSetRecoilState(booksAtom);
return (
<Button
variant={"link"}
className={cn(
"text-center text-muted-foreground "
"text-center w-full text-muted-foreground "
)}
onClick={() => {
toast.promise(rmAddress(jwt, id), {
loading: 'Removing...',
success: 'Address removed from book',
success: () => {
setBook((old) => old.filter((address) => address.id !== id));
return 'Address removed from book'
},
error: 'Failed to remove address'
});
return;
Expand Down
139 changes: 51 additions & 88 deletions apps/web/src/app/account/import/book/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,106 +9,69 @@ import {
CardHeader,
CardTitle,
} from "@/src/components/ui/card";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/src/components/ui/dialog";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/src/components/ui/avatar"

import { ScrollArea } from "@/src/components/ui/scroll-area";
import { Button, buttonVariants } from "@/src/components/ui/button";
import { AddressBook, Network } from "@paybox/common";
import { Separator } from "@/src/components/ui/separator";
import { getIcon } from "@/src/actions/icon";
import { cn } from "@/src/lib/utils";
import RemoveButton from "./component/rm-button";
import { PlusCircle } from "lucide-react";
import AddAddressBook from "./component/add-address";
import { Wrapper } from "../../warpLayout";
import { redirect } from "next/navigation";
import { toast } from "sonner";
import ShowBook from "./component/show-book";



export default async function Page({
params
}: { params: { id: string } }) {
params,
searchParams
}: {
params: { id: string },
searchParams: { [key: string]: string | string[] | undefined }
}) {
const session = await getServerSession(authOptions);

if (!session) {
redirect('/signup');
}

//@ts-ignore
const jwt = session?.user.jwt as string;

const book = await getAddressbook(jwt);

return (
<div className="flex justify-center items-center h-full">
<Card className="w-[450px]">
<CardHeader>
<CardTitle>Address Book</CardTitle>
<CardDescription>A currated list of your stored address...</CardDescription>
</CardHeader>
<CardContent>
<ScrollArea className="h-72 w-full rounded-md border">
<div className="flex flex-col">
{book && book.map((address: AddressBook) => {
const icon = getIcon(address.chain);
return (

<Dialog>
<DialogTrigger>
<Button
variant={"ghost"}
key={address.id}
className="flex gap-x-4 rounded-none w-full h-fit py-4"
>
<Avatar>
<AvatarImage src="https://github.com/shawakash.pn" alt="@shadcn" />
<AvatarFallback>{address.name.slice(0, 2).toLocaleUpperCase()}</AvatarFallback>
</Avatar>
<div className="">
<p className="text-base h-1/2 font-semibold w-full text-start">{address.name}</p>
<p className="text-muted-foreground w-full h-1/2 text-start font-normal">{address.publicKey.slice(0, 4) + "..." + address.publicKey.slice(address.publicKey.length - 4)}</p>
</div>
<div className="flex flex-grow" />
<div className="">
<icon.icon className="w-6 h-6" />
</div>
</Button>
<Separator />
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit Address</DialogTitle>
</DialogHeader>
<DialogFooter className="w-full h-fit flex sm:flex-col gap-y-2">
<DialogClose>
<RemoveButton jwt={jwt} id={address.id} />
</DialogClose>
<div className="flex w-full flex-row gap-x-4">
<Button variant={"secondary"} className="w-1/2">
Cancel
</Button>
<DialogClose className="w-1/2">
<Button className="w-full">Close</Button>
</DialogClose>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
)
})}
</div>
</ScrollArea>
</CardContent>
<CardFooter>
<p>Made with 💙 love by Paybox</p>
</CardFooter>
</Card>
<Wrapper session={session} >
<div className="flex justify-center items-center h-full">
<Card className="w-[450px] h-fit">
<CardHeader className="pt-4">
<CardTitle className="flex justify-between items-center pt-0">
<p className="text-center text-lg">Address Book</p>
<div className="">
<AddAddressBook type="plus" open={searchParams.open == "true" ? true : false} />
</div>
</CardTitle>
<CardDescription>A currated list of your stored address...</CardDescription>
</CardHeader>
<CardContent>
{book.length > 0 ?
<ShowBook book={book} />
:
<div className="flex flex-col justify-center items-center h-72 w-full gap-y-12">
<div className="flex flex-col items-center justify-center gap-y-4">
<PlusCircle className="w-10 h-10" />
<div className="space-y-1">
<p className="text-center">Your Address Book is empty</p>
<p className="text-center text-muted-foreground">Click on the '+' or 'Add Address' button to save frequently used address...</p>
</div>
</div>
<AddAddressBook type="button" />
</div>
}
</CardContent>
<CardFooter>
<p>Made with 💙 love by Paybox</p>
</CardFooter>
</Card>

</div>
</div>
</Wrapper>
);
}

0 comments on commit feb980c

Please sign in to comment.