From cd105351fdbad2d865615d6f2564609ef7168a8a Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Sun, 11 May 2025 00:56:46 -0700 Subject: [PATCH 1/2] fix: payment link copy on ios --- .../client/PaymentLinkForm.client.tsx | 97 +++++++++++++------ apps/dashboard/src/app/pay/layout.tsx | 34 +++---- apps/dashboard/src/app/pay/page.tsx | 10 +- .../erc20/read/getCurrencyMetadata.ts | 4 +- 4 files changed, 86 insertions(+), 59 deletions(-) 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..231b64bc35c 100644 --- a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx +++ b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx @@ -2,6 +2,7 @@ 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"; @@ -19,10 +20,23 @@ import { } from "thirdweb"; import { getCurrencyMetadata } from "thirdweb/extensions/erc20"; import { resolveScheme, upload } from "thirdweb/storage"; +import { setThirdwebDomains } from "thirdweb/utils"; +import { getClientThirdwebClient } from "../../../../@/constants/thirdweb-client.client"; 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}`); } } From fdbb5ab71b77f1a1498e9599081c87f093dda031 Mon Sep 17 00:00:00 2001 From: greg Date: Sun, 11 May 2025 01:00:09 -0700 Subject: [PATCH 2/2] Update apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: greg --- .../src/app/pay/components/client/PaymentLinkForm.client.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 231b64bc35c..2fc705d54cd 100644 --- a/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx +++ b/apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx @@ -7,6 +7,7 @@ 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"; @@ -21,7 +22,6 @@ import { import { getCurrencyMetadata } from "thirdweb/extensions/erc20"; import { resolveScheme, upload } from "thirdweb/storage"; import { setThirdwebDomains } from "thirdweb/utils"; -import { getClientThirdwebClient } from "../../../../@/constants/thirdweb-client.client"; import { FileInput } from "../../../../components/shared/FileInput"; import { THIRDWEB_ANALYTICS_DOMAIN,