Feature: Add fallback when we cant fetch the token in new widgets (#7452)

Author: gregfromstl

.changeset/crazy-bushes-stick.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds "Unsupported Token" fallback screen to TransactionWidget

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}

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;
 }) {

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"

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({

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}

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,

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 = (