[SDK] Fix TransactionWidget when wallet has enough currency

.changeset/lucky-ravens-hope.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix TransactionWidget when wallet has enough currency for the transaction

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -41,7 +41,6 @@ export function PayTransactionPreview() {
 
   return (
     <TransactionWidget
-      amount={"0.001"}
       client={THIRDWEB_CLIENT}
       description={nft?.metadata?.description}
       image={nft?.metadata?.image}

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -361,12 +361,26 @@
           fullWidth
           onClick={() => {
             if (transactionDataQuery.data?.tokenInfo) {
+              if (
+                userBalance &&
+                Number(userBalance) <
+                  Number(transactionDataQuery.data.totalCost)
+              ) {
+                // if user has funds, but not enough, we need to fund the wallet with the difference
+                onContinue(
+                  (
+                    Number(transactionDataQuery.data.totalCost) -
+                    Number(userBalance)
+                  ).toString(),
+                  transactionDataQuery.data.tokenInfo,
+                  getAddress(activeAccount.address),
+                );
+                return;
+              }
+
+              // otherwise, use the full transaction cost
               onContinue(
-                Math.max(
-                  0,
-                  Number(transactionDataQuery.data.totalCost) -
-                    Number(userBalance ?? "0"),
-                ).toString(),
+                transactionDataQuery.data.totalCost,
                 transactionDataQuery.data.tokenInfo,
                 getAddress(activeAccount.address),
               );