[PayEmbed] Only onramp for required transaction amount

Author: joaquim-verges

.changeset/cyan-kids-hide.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Only onramp for the amount required for transaction flows in PayEmbed

packages/thirdweb/src/bridge/Buy.test.ts

@@ -35,7 +35,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("Bridge.Buy.quote", () => {
   });
 });
 
-describe("Bridge.Buy.prepare", () => {
+describe.runIf(process.env.TW_SECRET_KEY)("Bridge.Buy.prepare", () => {
   it("should get a valid prepared quote", async () => {
     const quote = await Buy.prepare({
       originChainId: 1,

packages/thirdweb/src/bridge/Sell.test.ts

@@ -35,7 +35,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("Bridge.Sell.quote", () => {
   });
 });
 
-describe("Bridge.Sell.prepare", () => {
+describe.runIf(process.env.TW_SECRET_KEY)("Bridge.Sell.prepare", () => {
   it("should get a valid prepared quote", async () => {
     const quote = await Sell.prepare({
       originChainId: 1,

packages/thirdweb/src/pay/buyWithCrypto/getQuote.ts

@@ -259,7 +259,7 @@ export async function getBuyWithCryptoQuote(
         data: data.transactionRequest.data as Hash,
         to: data.transactionRequest.to,
         value: BigInt(data.transactionRequest.value),
-        gas: BigInt(data.transactionRequest.gasLimit),
+        gas: undefined, // ignore gas returned by the quote, we handle it ourselves
         gasPrice: undefined, // ignore gas price returned by the quote, we handle it ourselves
       },
       approvalData,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -625,7 +625,7 @@ function SelectedTokenInfo(props: {
   disabled?: boolean;
 }) {
   const getWidth = () => {
-    const amount = formatNumber(Number(props.tokenAmount), 5).toString();
+    const amount = formatNumber(Number(props.tokenAmount), 6).toString();
     let chars = amount.replace(".", "").length;
     const hasDot = amount.includes(".");
     if (hasDot) {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -334,7 +334,10 @@ export function TransactionModeScreen(props: {
           variant="accent"
           fullWidth
           onClick={() => {
-            let totalCostWei = transactionCostAndData.transactionValueWei;
+            let totalCostWei = insufficientFunds
+              ? transactionCostAndData.transactionValueWei -
+                (balanceQuery.data?.value || 0n)
+              : transactionCostAndData.transactionValueWei;
             if (
               transactionCostAndData.token.address === NATIVE_TOKEN_ADDRESS &&
               !sponsoredTransactionsEnabled