Skip to content

Dashboard: Create Payment link dialog fixes/ui tweaks #7908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 25, 2025
Merged

Dashboard: Create Payment link dialog fixes/ui tweaks #7908

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 107 additions & 117 deletions ...ug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -50,7 +48,26 @@ export function CreatePaymentLinkButton(
props: PropsWithChildren<{ clientId: string; teamId: string }>,
) {
const [open, setOpen] = useState(false);
// const [image, setImage] = useState<File>();

return (
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger asChild>{props.children}</DialogTrigger>
<DialogContent className="p-0 !max-w-lg">
<CreatePaymentLinkDialogContent
clientId={props.clientId}
setOpen={setOpen}
teamId={props.teamId}
/>
</DialogContent>
</Dialog>
);
}

function CreatePaymentLinkDialogContent(props: {
clientId: string;
teamId: string;
setOpen: (open: boolean) => void;
}) {
const client = getClientThirdwebClient();

const form = useForm<z.infer<typeof formSchema>>({
Expand Down Expand Up @@ -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 (
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger asChild>{props.children}</DialogTrigger>
<DialogContent className="!max-w-xl">
<Form {...form}>
<form
className="flex flex-col gap-6"
onSubmit={form.handleSubmit((values) =>
createMutation.mutateAsync(values, {
onSuccess: (result) => {
reportPaymentLinkCreated({
linkId: result.id,
clientId: props.clientId,
});
<div>
<DialogHeader className="p-4 lg:p-6">
<DialogTitle>Create a Payment</DialogTitle>
<DialogDescription>
Get paid in any token on any chain.
</DialogDescription>
</DialogHeader>

setOpen(false);
form.reset();
form.clearErrors();
},
}),
)}
>
<DialogHeader>
<DialogTitle>Create a Payment</DialogTitle>
<DialogDescription>
Get paid in any token on any chain.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit((values) =>
createMutation.mutateAsync(values, {
onSuccess: (result) => {
reportPaymentLinkCreated({
linkId: result.id,
clientId: props.clientId,
});

<div className="flex flex-col gap-6 w-full">
<FormField
name="title"
render={({ field }) => (
<FormItem className="">
<RequiredFormLabel>Title</RequiredFormLabel>
<Input {...field} placeholder="Payment for..." />
<FormMessage />
</FormItem>
)}
/>
props.setOpen(false);
form.reset();
form.clearErrors();
},
}),
)}
>
<div className="px-4 lg:px-6 space-y-4 pb-8">
<FormField
name="title"
render={({ field }) => (
<FormItem className="">
<FormLabel>Title</FormLabel>
<Input
{...field}
placeholder="Payment for..."
className="bg-card"
/>
<FormMessage />
</FormItem>
)}
/>

<FormField
name="recipient"
render={({ field }) => (
<FormItem>
<RequiredFormLabel>Recipient Address</RequiredFormLabel>
<Input
className="w-full"
{...field}
onChange={field.onChange}
value={field.value}
placeholder="Address or ENS"
required
/>
<FormDescription>Address or ENS</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
name="recipient"
render={({ field }) => (
<FormItem>
<FormLabel>Recipient Address</FormLabel>
<Input
className="w-full bg-card"
{...field}
onChange={field.onChange}
value={field.value}
placeholder="Address or ENS"
required
/>
<FormMessage />
</FormItem>
)}
/>

<FormField
name="chainId"
render={({ field }) => (
<FormItem>
<RequiredFormLabel>Chain</RequiredFormLabel>
<FormLabel>Chain</FormLabel>
<SingleNetworkSelector
chainIds={chainsQuery.data?.map((x) => 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");
}}
/>
<FormMessage />
</FormItem>
Expand All @@ -229,11 +221,11 @@ export function CreatePaymentLinkButton(
name="tokenAddress"
render={({ field }) => (
<FormItem>
<RequiredFormLabel>Token</RequiredFormLabel>
<FormLabel>Token</FormLabel>
<TokenSelector
addNativeTokenIfMissing={false}
chainId={form.getValues().chainId}
className="w-full"
className="w-full bg-card"
client={client}
disabled={!form.getValues().chainId}
onChange={(token) => {
Expand All @@ -258,9 +250,9 @@ export function CreatePaymentLinkButton(
name="amount"
render={({ field }) => (
<FormItem>
<RequiredFormLabel>Amount</RequiredFormLabel>
<FormLabel>Amount</FormLabel>
<Input
className="w-full"
className="w-full bg-card"
{...field}
placeholder="0.0"
required
Expand All @@ -271,27 +263,25 @@ export function CreatePaymentLinkButton(
</FormItem>
)}
/>
</div>

<DialogFooter>
<div className="flex gap-2">
<Button
size="sm"
className="flex-1 flex gap-2 items-center"
type="submit"
disabled={createMutation.isPending}
>
{createMutation.isPending ? (
<Spinner className="size-4" />
) : (
<LinkIcon className="size-4" />
)}
{createMutation.isPending ? "Creating..." : "Create"}
</Button>
</div>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
<div className="gap-2 border-t p-4 lg:p-6 bg-card flex justify-end rounded-b-lg">
<Button
size="sm"
className="gap-2 items-center"
type="submit"
disabled={createMutation.isPending}
>
{createMutation.isPending ? (
<Spinner className="size-4" />
) : (
<PlusIcon className="size-4" />
)}
{createMutation.isPending ? "Creating..." : "Create"}
</Button>
</div>
</form>
</Form>
</div>
);
}
Loading