From ab704022f59a44dacd5c805821d5d9bc45d278f7 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Thu, 9 Jan 2025 22:30:28 +1300
Subject: [PATCH] fix: PayEmbed purchase callback and insufficient funds
 display

---
 .changeset/fluffy-rings-kick.md                      |  5 +++++
 .../core/hooks/connection/ConnectButtonProps.ts      |  6 ++++++
 .../core/hooks/transaction/useSendTransaction.ts     |  6 ++++++
 .../screens/Buy/TransactionModeScreen.tsx            | 12 +++++++++---
 packages/thirdweb/src/react/web/ui/PayEmbed.tsx      |  8 +++++++-
 5 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fluffy-rings-kick.md

diff --git a/.changeset/fluffy-rings-kick.md b/.changeset/fluffy-rings-kick.md
new file mode 100644
index 00000000000..3cb50791128
--- /dev/null
+++ b/.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
diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
index 80286ae2274..9bc568ed7a6 100644
--- a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
+++ b/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;
     /**
diff --git a/packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts b/packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts
index 922a213eda5..9c92e413203 100644
--- a/packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts
+++ b/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;
     }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
index 89eaab69ac0..8cf800b48b6 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
+++ b/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={{
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
index fb7caddf1c5..b11afa27ed1 100644
--- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
+++ b/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,
+                });
+              }}
             />
           )}
       </>