[SDK] Fix: PayEmbed purchase callback and insufficient funds display (#5918)

Author: joaquim-verges

.changeset/fluffy-rings-kick.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix PayEmbed purchase success callback and insufficient funds displayed when no metadata is passed in

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -7,6 +7,7 @@ import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import type { AssetTabs } from "../../../../react/web/ui/ConnectWallet/screens/ViewAssets.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Hex } from "../../../../utils/encoding/hex.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
@@ -114,6 +115,11 @@ export type PayUIOptions = Prettify<
         | {
             type: "fiat";
             status: BuyWithFiatStatus;
+          }
+        | {
+            type: "transaction";
+            chainId: number;
+            transactionHash: Hex;
           },
     ) => void;
     /**

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -8,6 +8,7 @@ import { sendTransaction } from "../../../../transaction/actions/send-transactio
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { getTransactionGasCost } from "../../../../transaction/utils.js";
+import type { Hex } from "../../../../utils/encoding/hex.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getTokenBalance } from "../../../../wallets/utils/getTokenBalance.js";
@@ -74,6 +75,11 @@ export type SendTransactionPayModalConfig =
           | {
               type: "fiat";
               status: BuyWithFiatStatus;
+            }
+          | {
+              type: "transaction";
+              chainId: number;
+              transactionHash: Hex;
             },
       ) => void;
     }

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

@@ -125,6 +125,10 @@ export function TransactionModeScreen(props: {
     return <LoadingScreen />;
   }
 
+  const insufficientFunds =
+    balanceQuery.data &&
+    balanceQuery.data.value < transactionCostAndData.transactionValueWei;
+
   return (
     <Container p="lg">
       <ModalHeader title={metadata?.name || "Transaction"} />
@@ -144,9 +148,11 @@ export function TransactionModeScreen(props: {
           />
         ) : activeAccount ? (
           <Container flex="column" gap="sm">
-            <Text size="sm" color="danger" style={{ textAlign: "center" }}>
-              Insufficient funds
-            </Text>
+            {insufficientFunds && (
+              <Text size="sm" color="danger" style={{ textAlign: "center" }}>
+                Insufficient funds
+              </Text>
+            )}
             <Container
               flex="row"
               style={{

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -365,7 +365,13 @@ export function PayEmbed(props: PayEmbedProps) {
               onBack={() => {
                 setScreen("buy");
               }}
-              onTxSent={() => {}}
+              onTxSent={(data) => {
+                props.payOptions?.onPurchaseSuccess?.({
+                  type: "transaction",
+                  chainId: data.chain.id,
+                  transactionHash: data.transactionHash,
+                });
+              }}
             />
           )}
       </>