From e8af9c137874fb48a9f64e5c41c1b9821727f606 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Thu, 26 Jun 2025 15:56:24 -0700
Subject: [PATCH 1/3] fix: add unsupported token screen to transaction widget

---
 .../src/app/connect/pay/transactions/page.tsx |  1 +
 .../src/components/pay/transaction-button.tsx |  2 +-
 .../react/web/ui/Bridge/TransactionWidget.tsx | 38 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/playground-web/src/app/connect/pay/transactions/page.tsx b/apps/playground-web/src/app/connect/pay/transactions/page.tsx
index 54e1c391411..fca06299dbf 100644
--- a/apps/playground-web/src/app/connect/pay/transactions/page.tsx
+++ b/apps/playground-web/src/app/connect/pay/transactions/page.tsx
@@ -51,6 +51,7 @@ function BuyOnchainAsset() {
 
           return (
         <TransactionWidget
+          amount={"0.001"}
           client={THIRDWEB_CLIENT}
           theme={theme === "light" ? "light" : "dark"}
           transaction={claimTo({
diff --git a/apps/playground-web/src/components/pay/transaction-button.tsx b/apps/playground-web/src/components/pay/transaction-button.tsx
index 9f30cdcf657..82913537fa2 100644
--- a/apps/playground-web/src/components/pay/transaction-button.tsx
+++ b/apps/playground-web/src/components/pay/transaction-button.tsx
@@ -41,7 +41,7 @@ export function PayTransactionPreview() {
 
   return (
     <TransactionWidget
-      amount={"0.1"}
+      amount={"0.001"}
       client={THIRDWEB_CLIENT}
       description={nft?.metadata?.description}
       image={nft?.metadata?.image}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
index d60856bdab4..293bbcc4148 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
@@ -19,14 +19,17 @@ import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
-import type { Theme } from "../../../core/design-system/index.js";
+import { iconSize, type Theme } from "../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButton_connectModalOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
+import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
+import { Text } from "../components/text.js";
 import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
@@ -297,7 +300,19 @@ export function TransactionWidget(props: TransactionWidgetProps) {
           props.client,
           checksumAddress(tokenAddress),
           props.transaction.chain.id,
-        );
+        ).catch((e) => {
+          if (e instanceof Error && e.message.includes("not supported")) {
+            return null;
+          }
+          throw e;
+        });
+        if (!token) {
+          return {
+            chain: props.transaction.chain,
+            tokenAddress: checksumAddress(tokenAddress),
+            type: "unsupported_token",
+          };
+        }
 
         erc20Value = {
           amountWei: toUnits(props.amount, token.decimals),
@@ -324,6 +339,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
       };
     },
     queryKey: ["bridgeData", stringify(props)],
+    retry: 1,
   });
 
   let content = null;
@@ -340,6 +356,24 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         <Spinner color="secondaryText" size="xl" />
       </div>
     );
+  } else if (bridgeDataQuery.error) {
+    content = (
+      <div
+        style={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          minHeight: "350px",
+        }}
+      >
+        <AccentFailIcon size={iconSize["3xl"]} />
+        <Spacer y="lg" />
+        <Text color="secondaryText" size="md">
+          {bridgeDataQuery.error.message}
+        </Text>
+      </div>
+    );
   } else if (bridgeDataQuery.data?.type === "unsupported_token") {
     // Show unsupported token screen
     content = (

From 88aa5c5dcb7ab4459ee78489737b322b9b922bae Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Thu, 26 Jun 2025 16:05:35 -0700
Subject: [PATCH 2/3] fix: onramp webhook receiver address is optional

---
 .changeset/crazy-bushes-stick.md                          | 5 +++++
 apps/playground-web/src/app/connect/pay/commerce/page.tsx | 2 +-
 packages/thirdweb/src/bridge/Webhook.ts                   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/crazy-bushes-stick.md

diff --git a/.changeset/crazy-bushes-stick.md b/.changeset/crazy-bushes-stick.md
new file mode 100644
index 00000000000..b3c9808bc5a
--- /dev/null
+++ b/.changeset/crazy-bushes-stick.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds "Unsupported Token" fallback screen to TransactionWidget
diff --git a/apps/playground-web/src/app/connect/pay/commerce/page.tsx b/apps/playground-web/src/app/connect/pay/commerce/page.tsx
index 7c90b443061..bff39ec8de3 100644
--- a/apps/playground-web/src/app/connect/pay/commerce/page.tsx
+++ b/apps/playground-web/src/app/connect/pay/commerce/page.tsx
@@ -42,7 +42,7 @@ function BuyMerch() {
         client={THIRDWEB_CLIENT}
         theme="light"
         chain={base}
-        amount={toUnits("2", 6)}
+        amount={"2"}
         tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
         seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
         feePayer="seller"
diff --git a/packages/thirdweb/src/bridge/Webhook.ts b/packages/thirdweb/src/bridge/Webhook.ts
index 79f74ad63f4..1cdf0040562 100644
--- a/packages/thirdweb/src/bridge/Webhook.ts
+++ b/packages/thirdweb/src/bridge/Webhook.ts
@@ -69,7 +69,7 @@ const onrampWebhookSchema = z.discriminatedUnion("version", [
       onramp: z.string(),
       paymentLinkId: z.optional(z.string()),
       purchaseData: z.unknown(),
-      receiver: z.optional(addressSchema),
+      receiver: addressSchema,
       sender: z.optional(addressSchema),
       status: z.enum(["PENDING", "COMPLETED", "FAILED"]),
       token: tokenSchema,

From 74f66867c0f17490e544a095d9f6c64660835978 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Thu, 26 Jun 2025 16:31:48 -0700
Subject: [PATCH 3/3] fix: payment links UI

---
 apps/dashboard/src/app/pay/[id]/page.tsx                        | 2 +-
 .../src/app/pay/components/client/PayPageWidget.client.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/app/pay/[id]/page.tsx b/apps/dashboard/src/app/pay/[id]/page.tsx
index 156f0ac3bfa..6bf7fb4b6ee 100644
--- a/apps/dashboard/src/app/pay/[id]/page.tsx
+++ b/apps/dashboard/src/app/pay/[id]/page.tsx
@@ -57,7 +57,7 @@ export default async function PayPage({
     <PayPageWidget
       amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
       chainId={Number(paymentLink.destinationToken.chainId)}
-      clientId={paymentLink.clientId}
+      clientId={undefined} // Payment links don't need to use the same client ID to be executed
       image={paymentLink.imageUrl}
       name={paymentLink.title}
       paymentLinkId={id}
diff --git a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
index 2b2e3ea5183..1fffd4e9bbe 100644
--- a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
+++ b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
@@ -28,7 +28,7 @@ export function PayPageWidget({
   name?: string;
   image?: string;
   redirectUri?: string;
-  clientId: string;
+  clientId: string | undefined;
   theme?: "light" | "dark";
   purchaseData: Record<string, unknown> | undefined;
 }) {