Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 26, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8af9c1
fix: add unsupported token screen to transaction widget
gregfromstl Jun 26, 2025
ac0f034
Merge branch 'main' into greg/tool-4865-add-fallback-when-we-cant-fet…
gregfromstl Jun 26, 2025
88aa5c5
fix: onramp webhook receiver address is optional
gregfromstl Jun 26, 2025
74f6686
fix: payment links UI
gregfromstl Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/crazy-bushes-stick.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

Adds "Unsupported Token" fallback screen to TransactionWidget
2 changes: 1 addition & 1 deletion apps/dashboard/src/app/pay/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}) {
Expand Down
2 changes: 1 addition & 1 deletion apps/playground-web/src/app/connect/pay/commerce/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions apps/playground-web/src/app/connect/pay/transactions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ function BuyOnchainAsset() {

return (
<TransactionWidget
amount={"0.001"}
client={THIRDWEB_CLIENT}
theme={theme === "light" ? "light" : "dark"}
transaction={claimTo({
Expand Down
2 changes: 1 addition & 1 deletion apps/playground-web/src/components/pay/transaction-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/bridge/Webhook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

❓ Verification inconclusive

Verify impact of making receiver field required.

Making the receiver field required ensures webhook payload integrity but represents a breaking change for webhook consumers. Ensure this change is properly documented and that existing integrations can handle the stricter validation.

🏁 Script executed:

#!/bin/bash
# Search for existing webhook handler code that might expect optional receiver
rg -A 5 -B 5 "receiver.*optional|optional.*receiver" --type ts --type js

Length of output: 74

Verify impact of making receiver field required.

Making the receiver field required ensures webhook payload integrity but represents a breaking change for webhook consumers. Ensure this change is properly documented and that existing integrations can handle the stricter validation.

#!/bin/bash
# Search for existing webhook handler code that might expect optional receiver
rg -A 5 -B 5 "receiver.*optional|optional.*receiver" --type ts --type js
🤖 Prompt for AI Agents 
In packages/thirdweb/src/bridge/Webhook.ts at line 72, the receiver field is
changed to be required, which is a breaking change for existing webhook
consumers. Verify this impact by searching the codebase for any webhook handlers
expecting receiver to be optional using the suggested search command. Document
this change clearly and ensure existing integrations are updated or can handle
the stricter validation before finalizing the change.

sender: z.optional(addressSchema),
status: z.enum(["PENDING", "COMPLETED", "FAILED"]),
token: tokenSchema,
Expand Down
38 changes: 36 additions & 2 deletions packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@
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";
Expand Down Expand Up @@ -297,7 +300,19 @@
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",
};
}

Check warning on line 315 in packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx#L303-L315 

Added lines #L303 - L315 were not covered by tests

erc20Value = {
amountWei: toUnits(props.amount, token.decimals),
Expand All @@ -324,6 +339,7 @@
};
},
queryKey: ["bridgeData", stringify(props)],
retry: 1,

Check warning on line 342 in packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx#L342 

Added line #L342 was not covered by tests
});

let content = null;
Expand All @@ -340,6 +356,24 @@
<Spinner color="secondaryText" size="xl" />
</div>
);
} else if (bridgeDataQuery.error) {
content = (
<div
style={{
alignItems: "center",
display: "flex",
flexDirection: "column",
justifyContent: "center",
minHeight: "350px",
}}

Check warning on line 368 in packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx#L359-L368 

Added lines #L359 - L368 were not covered by tests
>
<AccentFailIcon size={iconSize["3xl"]} />
<Spacer y="lg" />
<Text color="secondaryText" size="md">
{bridgeDataQuery.error.message}
</Text>
</div>

Check warning on line 375 in packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx#L370-L375 

Added lines #L370 - L375 were not covered by tests
);
} else if (bridgeDataQuery.data?.type === "unsupported_token") {
// Show unsupported token screen
content = (
Expand Down
Loading