From c6150be299ac7f94d911b58fa18ab41c8529784a Mon Sep 17 00:00:00 2001 From: MananTank Date: Mon, 25 Aug 2025 20:37:52 +0000 Subject: [PATCH] Dashboard: Create Payment link dialog fixes/ui tweaks (#7908) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR updates the `CreatePaymentLinkButton` component to enhance its dialog interface and improve the overall user experience. It replaces the `LinkIcon` with a `PlusIcon`, refines form elements, and cleans up unused code. ### Detailed summary - Replaced `LinkIcon` with `PlusIcon`. - Updated dialog structure and content. - Changed `RequiredFormLabel` to `FormLabel` for consistency. - Improved styling by adding `bg-card` class to input fields. - Removed commented-out code related to image upload functionality. - Enhanced form layout and submission handling. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit - **Refactor** - Streamlined the payment link creation flow with a clearer dialog and improved form handling for a smoother experience. - **Style** - Updated to a plus icon, added a header with title and description, standardized labels, themed inputs, and introduced a bottom action bar. - **Bug Fixes** - Chain and token changes now properly reset related fields. - Improved validation for recipient address and token selection. - Added progress indicator during creation. - Success toast and automatic refresh ensure newly created payment links appear immediately. --- .../CreatePaymentLinkButton.client.tsx | 224 +++++++++--------- 1 file changed, 107 insertions(+), 117 deletions(-) diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx index b46447da466..71b89a91e7a 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx @@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { LinkIcon } from "lucide-react"; +import { PlusIcon } from "lucide-react"; import { type PropsWithChildren, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; @@ -19,18 +19,16 @@ import { Dialog, DialogContent, DialogDescription, - DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Form, - FormDescription, FormField, FormItem, + FormLabel, FormMessage, - RequiredFormLabel, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Spinner } from "@/components/ui/Spinner/Spinner"; @@ -50,7 +48,26 @@ export function CreatePaymentLinkButton( props: PropsWithChildren<{ clientId: string; teamId: string }>, ) { const [open, setOpen] = useState(false); - // const [image, setImage] = useState(); + + return ( + + {props.children} + + + + + ); +} + +function CreatePaymentLinkDialogContent(props: { + clientId: string; + teamId: string; + setOpen: (open: boolean) => void; +}) { const client = getClientThirdwebClient(); const form = useForm>({ @@ -117,108 +134,83 @@ export function CreatePaymentLinkButton( toast.error(parseErrorToMessage(err), { duration: 5000 }); }, }); - // const uploadMutation = useMutation({ - // mutationFn: async (file: File) => { - // const uploadClient = createThirdwebClient({ - // clientId: "f958464759859da7a1c6f9d905c90a43", //7ae789153cf9ecde8f35649f2d8a4333", // Special client ID for uploads only on thirdweb.com - // }); - // const uri = await upload({ - // client: uploadClient, - // files: [file], - // }); - // - // // eslint-disable-next-line no-restricted-syntax - // const resolvedUrl = resolveScheme({ - // client: uploadClient, - // uri, - // }); - // - // form.setValue("imageUrl", resolvedUrl); - // return; - // }, - // onSuccess: () => { - // toast.success("Image uploaded successfully."); - // }, - // onError: (e) => { - // console.error(e); - // // setImage(undefined); - // toast.error(parseErrorToMessage(e), { duration: 5000 }); - // }, - // }); return ( - - {props.children} - -
- - createMutation.mutateAsync(values, { - onSuccess: (result) => { - reportPaymentLinkCreated({ - linkId: result.id, - clientId: props.clientId, - }); +
+ + Create a Payment + + Get paid in any token on any chain. + + - setOpen(false); - form.reset(); - form.clearErrors(); - }, - }), - )} - > - - Create a Payment - - Get paid in any token on any chain. - - + + + createMutation.mutateAsync(values, { + onSuccess: (result) => { + reportPaymentLinkCreated({ + linkId: result.id, + clientId: props.clientId, + }); -
- ( - - Title - - - - )} - /> + props.setOpen(false); + form.reset(); + form.clearErrors(); + }, + }), + )} + > +
+ ( + + Title + + + + )} + /> - ( - - Recipient Address - - Address or ENS - - - )} - /> -
+ ( + + Recipient Address + + + + )} + /> ( - Chain + Chain x.chainId)} chainId={field.value} - className="w-full" + className="w-full bg-card" + disableChainId client={client} disableTestnets - onChange={field.onChange} + onChange={(v) => { + field.onChange(v); + form.resetField("tokenAddress"); + }} /> @@ -229,11 +221,11 @@ export function CreatePaymentLinkButton( name="tokenAddress" render={({ field }) => ( - Token + Token { @@ -258,9 +250,9 @@ export function CreatePaymentLinkButton( name="amount" render={({ field }) => ( - Amount + Amount )} /> +
- -
- -
- - - - -
+
+ +
+ + + ); }