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/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({ | undefined; }) { 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/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 ( { + 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) { ); + } else if (bridgeDataQuery.error) { + content = ( +
+ + + + {bridgeDataQuery.error.message} + +
+ ); } else if (bridgeDataQuery.data?.type === "unsupported_token") { // Show unsupported token screen content = (