Skip to content

[SDK] Chore: Remove onrampTokenAddress set to ETH #7441

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 8 commits into from
Jun 25, 2025
Merged

[SDK] Chore: Remove onrampTokenAddress set to ETH #7441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aea2245
chore: remove onrampTokenAddress set to ETH
gregfromstl Jun 25, 2025
61fed8c
fix: onramp step label
gregfromstl Jun 25, 2025
9f42f55
fix: onramp transactions missing chain and client
gregfromstl Jun 25, 2025
3562a50
fix: slight delay after fee and approvals for rpc catch up
gregfromstl Jun 25, 2025
befed30
changeset
gregfromstl Jun 25, 2025
3d8869a
lint
gregfromstl Jun 25, 2025
920c7e0
fix: error message when no onramp quotes exist
gregfromstl Jun 25, 2025
e9a7773
feat: cleanup step preview ui
gregfromstl Jun 25, 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/old-bats-love.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

A number of important fixes for payment widgets
3 changes: 3 additions & 0 deletions packages/thirdweb/src/bridge/Onramp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Address as ox__Address } from "ox";
import { defineChain } from "../chains/utils.js";
import type { ThirdwebClient } from "../client/client.js";
import { getThirdwebBaseUrl } from "../utils/domains.js";
import { getClientFetch } from "../utils/fetch.js";
Expand Down Expand Up @@ -237,6 +238,8 @@
originAmount: BigInt(step.originAmount),
transactions: step.transactions.map((tx) => ({
...tx,
chain: defineChain(tx.chainId),
client,

Check warning on line 242 in packages/thirdweb/src/bridge/Onramp.ts

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/bridge/Onramp.ts#L241-L242 

Added lines #L241 - L242 were not covered by tests
value: tx.value ? BigInt(tx.value) : undefined,
})),
}));
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/pay/buyWithFiat/getQuote.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@
maxSteps: 2,
onramp: onrampProvider,
onrampChainId: params.onrampChainId,
onrampTokenAddress: params.onrampTokenAddress ?? NATIVE_TOKEN_ADDRESS,
onrampTokenAddress: params.onrampTokenAddress,

Check warning on line 329 in packages/thirdweb/src/pay/buyWithFiat/getQuote.ts

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/pay/buyWithFiat/getQuote.ts#L329 

Added line #L329 was not covered by tests
paymentLinkId: params.paymentLinkId,
purchaseData: params.purchaseData,
receiver: params.toAddress, // force onramp to native token to avoid missing gas issues
Expand Down
1 change: 1 addition & 0 deletions packages/thirdweb/src/react/core/hooks/useStepExecutor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@
if (tx.action === "approval" || tx.action === "fee") {
// don't poll status for approval transactions, just wait for confirmation
await waitForReceipt(result);
await new Promise((resolve) => setTimeout(resolve, 1000)); // Add an extra second delay for RPC to catch up to new state

Check warning on line 240 in packages/thirdweb/src/react/core/hooks/useStepExecutor.ts

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/core/hooks/useStepExecutor.ts#L240 

Added line #L240 was not covered by tests
return;
}

Expand Down
2 changes: 0 additions & 2 deletions packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useEffect } from "react";
import { trackPayEvent } from "../../../../analytics/track/pay.js";
import type { Token } from "../../../../bridge/types/Token.js";
import type { ThirdwebClient } from "../../../../client/client.js";
import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
import { toUnits } from "../../../../utils/units.js";
import {
type BridgePrepareRequest,
Expand Down Expand Up @@ -191,7 +190,6 @@ function getBridgeParams(args: {
currency: paymentMethod.currency,
enabled: !!(destinationToken && amount && client),
onramp: paymentMethod.onramp || "coinbase",
onrampTokenAddress: NATIVE_TOKEN_ADDRESS,
paymentLinkId: args.paymentLinkId,
purchaseData: args.purchaseData,
receiver,
Expand Down
3 changes: 2 additions & 1 deletion packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,8 @@

<Container flex="column" gap="3xs" style={{ flex: 1 }}>
<Text color="primaryText" size="sm">
TEST
{request.onramp.slice(0, 1).toUpperCase() +
request.onramp.slice(1)}

Check warning on line 326 in packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx#L325-L326 

Added lines #L325 - L326 were not covered by tests
</Text>
<Text color="secondaryText" size="xs">
{getStepStatusText(onrampStatus)}
Expand Down
55 changes: 51 additions & 4 deletions packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import { trackPayEvent } from "../../../../../analytics/track/pay.js";
import type { ThirdwebClient } from "../../../../../client/client.js";
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
import { radius, spacing } from "../../../../core/design-system/index.js";
import { useChainsQuery } from "../../../../core/hooks/others/useChainQuery.js";
import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
import {
Expand Down Expand Up @@ -102,6 +104,15 @@
queryKey: ["payment_details", preparedQuote.type],
});

const chainsQuery = useChainsQuery(
preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
10,
);
const chainsMetadata = useMemo(
() => chainsQuery.map((c) => c.data),
[chainsQuery],
).filter((c) => !!c);

Check warning on line 114 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L107-L114 

Added lines #L107 - L114 were not covered by tests
Comment on lines +107 to +114
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

Optimize chain extraction and improve error handling.

The chain extraction logic runs on every render, which could impact performance. Additionally, there's no error handling for failed chain queries, and the memoization dependency could be improved.

Apply this diff to optimize performance and add error handling:

+ const chainList = useMemo(
+   () => preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
+   [preparedQuote.steps],
+ );
+ 
- const chainsQuery = useChainsQuery(
-   preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
-   10,
- );
+ const chainsQuery = useChainsQuery(chainList, 10);
+ 
  const chainsMetadata = useMemo(
-   () => chainsQuery.map((c) => c.data),
-   [chainsQuery],
+ () => chainsQuery.map((c) => c.data).filter((c) => !!c),
+ [chainsQuery.map(q => q.data)],
- ).filter((c) => !!c);
+ );
+ 
+ const hasChainErrors = chainsQuery.some((q) => q.error);
+ const isLoadingChains = chainsQuery.some((q) => q.isLoading);

Consider adding error handling or fallback behavior when hasChainErrors is true.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const chainsQuery = useChainsQuery(
preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
10,
);
const chainsMetadata = useMemo(
() => chainsQuery.map((c) => c.data),
[chainsQuery],
).filter((c) => !!c);
const chainList = useMemo(
() => preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
[preparedQuote.steps],
);
const chainsQuery = useChainsQuery(chainList, 10);
const chainsMetadata = useMemo(
() => chainsQuery.map((c) => c.data).filter((c) => !!c),
[chainsQuery.map((q) => q.data)],
);
const hasChainErrors = chainsQuery.some((q) => q.error);
const isLoadingChains = chainsQuery.some((q) => q.isLoading);
🤖 Prompt for AI Agents 
In packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
around lines 107 to 114, the chain extraction logic runs on every render causing
potential performance issues, and there is no error handling for failed chain
queries. To fix this, memoize the array of chains extracted from
preparedQuote.steps to avoid recalculating on each render, improve the useMemo
dependency to depend on this memoized array, and add error handling logic to
detect if any chain queries have errors (e.g., a hasChainErrors flag) and
provide fallback behavior or error messages accordingly.


// Extract common data based on quote type
const getDisplayData = () => {
switch (preparedQuote.type) {
Expand Down Expand Up @@ -321,12 +332,48 @@
>
<Container flex="column" gap="3xs" style={{ flex: 1 }}>
<Text color="primaryText" size="sm">
{step.originToken.symbol} →{" "}
{step.destinationToken.symbol}
{step.destinationToken.chainId !==
step.originToken.chainId ? (
<>
Bridge{" "}
{step.originToken.symbol ===
step.destinationToken.symbol
? step.originToken.symbol
: `${step.originToken.symbol} to ${step.destinationToken.symbol}`}
</>

Check warning on line 343 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L335-L343 

Added lines #L335 - L343 were not covered by tests
) : (
<>
Swap {step.originToken.symbol} to{" "}
{step.destinationToken.symbol}
</>

Check warning on line 348 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L345-L348 

Added lines #L345 - L348 were not covered by tests
)}
</Text>
<Text color="secondaryText" size="xs">
{step.originToken.name} to{" "}
{step.destinationToken.name}
{step.originToken.chainId !==
step.destinationToken.chainId ? (
<>

Check warning on line 354 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L352-L354 

Added lines #L352 - L354 were not covered by tests
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name
}{" "}
to{" "}

Check warning on line 360 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L356-L360 

Added lines #L356 - L360 were not covered by tests
{
chainsMetadata.find(
(c) =>
c.chainId === step.destinationToken.chainId,
)?.name

Check warning on line 365 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L362-L365 

Added lines #L362 - L365 were not covered by tests
}
</>

Check warning on line 367 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L367 

Added line #L367 was not covered by tests
) : (
<>

Check warning on line 369 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L369 

Added line #L369 was not covered by tests
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name

Check warning on line 373 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L371-L373 

Added lines #L371 - L373 were not covered by tests
}
</>

Check warning on line 375 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L375 

Added line #L375 was not covered by tests
)}
Comment on lines +335 to +376
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

Add fallback handling for missing chain metadata.

The code assumes chain metadata will always be available when rendering, but during loading or error states, chainsMetadata.find() might return undefined, causing the chain names to not display.

Apply this diff to add fallback handling:

                            <>
                              {
-                               chainsMetadata.find(
-                                 (c) => c.chainId === step.originToken.chainId,
-                               )?.name
+                               chainsMetadata.find(
+                                 (c) => c.chainId === step.originToken.chainId,
+                               )?.name ?? `Chain ${step.originToken.chainId}`
                              }{" "}
                              to{" "}
                              {
-                               chainsMetadata.find(
-                                 (c) =>
-                                   c.chainId === step.destinationToken.chainId,
-                               )?.name
+                               chainsMetadata.find(
+                                 (c) =>
+                                   c.chainId === step.destinationToken.chainId,
+                               )?.name ?? `Chain ${step.destinationToken.chainId}`
                              }
                            </>
                          ) : (
                            <>
                              {
-                               chainsMetadata.find(
-                                 (c) => c.chainId === step.originToken.chainId,
-                               )?.name
+                               chainsMetadata.find(
+                                 (c) => c.chainId === step.originToken.chainId,
+                               )?.name ?? `Chain ${step.originToken.chainId}`
                              }
                            </>
                          )}

This ensures users see meaningful information even when chain metadata is still loading or failed to load.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{step.destinationToken.chainId !==
step.originToken.chainId ? (
<>
Bridge{" "}
{step.originToken.symbol ===
step.destinationToken.symbol
? step.originToken.symbol
: `${step.originToken.symbol} to ${step.destinationToken.symbol}`}
</>
) : (
<>
Swap {step.originToken.symbol} to{" "}
{step.destinationToken.symbol}
</>
)}
</Text>
<Text color="secondaryText" size="xs">
{step.originToken.name} to{" "}
{step.destinationToken.name}
{step.originToken.chainId !==
step.destinationToken.chainId ? (
<>
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name
}{" "}
to{" "}
{
chainsMetadata.find(
(c) =>
c.chainId === step.destinationToken.chainId,
)?.name
}
</>
) : (
<>
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name
}
</>
)}
<Text color="secondaryText" size="xs">
{step.originToken.chainId !==
step.destinationToken.chainId ? (
<>
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name ?? `Chain ${step.originToken.chainId}`
}{" "}
to{" "}
{
chainsMetadata.find(
(c) =>
c.chainId === step.destinationToken.chainId,
)?.name ?? `Chain ${step.destinationToken.chainId}`
}
</>
) : (
<>
{
chainsMetadata.find(
(c) => c.chainId === step.originToken.chainId,
)?.name ?? `Chain ${step.originToken.chainId}`
}
</>
)}
</Text>
🤖 Prompt for AI Agents 
In packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
between lines 335 and 376, the code assumes chainsMetadata.find() always returns
a valid object, but it can be undefined during loading or error states, causing
chain names not to display. To fix this, add fallback values such as a
placeholder string like "Unknown Chain" or the chainId itself when the find
returns undefined, ensuring meaningful information is shown even if metadata is
missing.

</Text>
</Container>
</Container>
Expand Down
10 changes: 10 additions & 0 deletions packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,16 @@
return quoteQueries.map((q) => q.data).filter((q) => !!q);
}, [quoteQueries]);

if (quoteQueries.every((q) => q.isError)) {
return (
<Container center="both" flex="column" style={{ minHeight: "120px" }}>
<Text color="secondaryText" size="sm">

Check warning on line 77 in packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx#L74-L77 

Added lines #L74 - L77 were not covered by tests
No quotes available
</Text>
</Container>

Check warning on line 80 in packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx#L79-L80 

Added lines #L79 - L80 were not covered by tests
);
}

Check warning on line 82 in packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx#L82 

Added line #L82 was not covered by tests

// TODO: add a "remember my choice" checkbox

return (
Expand Down
Loading