diff --git a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx index 630240c7237..2fc705d54cd 100644 --- a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx +++ b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx @@ -2,10 +2,12 @@ import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors"; import { TokenSelector } from "@/components/blocks/TokenSelector"; +import { CopyTextButton } from "@/components/ui/CopyTextButton"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { cn } from "@/lib/utils"; import { ChevronDownIcon, CreditCardIcon } from "lucide-react"; import { useCallback, useMemo, useState } from "react"; @@ -19,10 +21,22 @@ import { } from "thirdweb"; import { getCurrencyMetadata } from "thirdweb/extensions/erc20"; import { resolveScheme, upload } from "thirdweb/storage"; +import { setThirdwebDomains } from "thirdweb/utils"; import { FileInput } from "../../../../components/shared/FileInput"; +import { + THIRDWEB_ANALYTICS_DOMAIN, + THIRDWEB_BUNDLER_DOMAIN, + THIRDWEB_INAPP_WALLET_DOMAIN, + THIRDWEB_INSIGHT_API_DOMAIN, + THIRDWEB_PAY_DOMAIN, + THIRDWEB_RPC_DOMAIN, + THIRDWEB_SOCIAL_API_DOMAIN, + THIRDWEB_STORAGE_DOMAIN, +} from "../../../../constants/urls"; import { resolveEns } from "../../../../lib/ens"; +import { getVercelEnv } from "../../../../lib/vercel-utils"; -export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { +export function PaymentLinkForm() { const [chainId, setChainId] = useState(); const [recipientAddress, setRecipientAddress] = useState(""); const [tokenAddressWithChain, setTokenAddressWithChain] = useState(""); @@ -32,8 +46,24 @@ export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { const [imageUri, setImageUri] = useState(""); const [uploadingImage, setUploadingImage] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(); const [showAdvanced, setShowAdvanced] = useState(false); + const [paymentUrl, setPaymentUrl] = useState(""); + + const client = useMemo(() => { + if (getVercelEnv() !== "production") { + setThirdwebDomains({ + rpc: THIRDWEB_RPC_DOMAIN, + pay: THIRDWEB_PAY_DOMAIN, + storage: THIRDWEB_STORAGE_DOMAIN, + insight: THIRDWEB_INSIGHT_API_DOMAIN, + analytics: THIRDWEB_ANALYTICS_DOMAIN, + inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN, + bundler: THIRDWEB_BUNDLER_DOMAIN, + social: THIRDWEB_SOCIAL_API_DOMAIN, + }); + } + return getClientThirdwebClient(); + }, []); const isFormComplete = useMemo(() => { return chainId && recipientAddress && tokenAddressWithChain && amount; @@ -72,7 +102,6 @@ export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { const handleSubmit = useCallback( async (e: React.FormEvent) => { e.preventDefault(); - setError(undefined); setIsLoading(true); try { @@ -112,15 +141,11 @@ export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { params.set("image", imageUri); } - const paymentUrl = `${window.location.origin}/pay?${params.toString()}`; - - // Copy to clipboard - await navigator.clipboard.writeText(paymentUrl); - - // Show success toast - toast.success("Payment link copied to clipboard."); + const url = `${window.location.origin}/pay?${params.toString()}`; + setPaymentUrl(url); + toast.success("Payment link created!"); } catch (err) { - setError(err instanceof Error ? err.message : "An error occurred"); + toast.error(err instanceof Error ? err.message : "An error occurred"); } finally { setIsLoading(false); } @@ -290,7 +315,7 @@ export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { id="title" value={title} onChange={(e) => setTitle(e.target.value)} - placeholder="A title for your payment" + placeholder="Payment for..." className="w-full" /> @@ -318,25 +343,35 @@ export function PaymentLinkForm({ client }: { client: ThirdwebClient }) { - {error &&
{error}
} - -
- - +
+ {paymentUrl && ( + + )} + +
+ + +
diff --git a/apps/dashboard/src/app/pay/layout.tsx b/apps/dashboard/src/app/pay/layout.tsx index 72a8dc5fb50..167fad4f10c 100644 --- a/apps/dashboard/src/app/pay/layout.tsx +++ b/apps/dashboard/src/app/pay/layout.tsx @@ -10,27 +10,27 @@ const fontSans = Inter({ display: "swap", }); -export default async function CheckoutLayout({ +export default async function PayLayout({ children, }: { children: React.ReactNode; }) { return ( - - - + + -
+
{children}
@@ -42,9 +42,9 @@ export default async function CheckoutLayout({ className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0" />
- - - + + + ); } diff --git a/apps/dashboard/src/app/pay/page.tsx b/apps/dashboard/src/app/pay/page.tsx index ff7aded90f2..7424055b731 100644 --- a/apps/dashboard/src/app/pay/page.tsx +++ b/apps/dashboard/src/app/pay/page.tsx @@ -1,4 +1,3 @@ -import { getAuthToken } from "app/(app)/api/lib/getAuthToken"; import type { Metadata } from "next"; import { createThirdwebClient, defineChain, getContract } from "thirdweb"; import { getCurrencyMetadata } from "thirdweb/extensions/erc20"; @@ -32,14 +31,7 @@ export default async function RoutesPage({ !params.tokenAddress && !params.amount ) { - const authToken = await getAuthToken(); - - const client = getClientThirdwebClient({ - jwt: authToken, - teamId: undefined, - }); - - return ; + return ; } // Validate query parameters diff --git a/packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts b/packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts index 4ed76045980..44f731ad3b1 100644 --- a/packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts +++ b/packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts @@ -51,7 +51,7 @@ export async function getCurrencyMetadata( symbol: symbol_, decimals: decimals_, }; - } catch { - throw new Error("Invalid currency token"); + } catch (e) { + throw new Error(`Invalid currency token: ${e}`); } }