Add purchaseData to transfer transactions (#4871)

Author: edwardysun

.changeset/olive-rings-develop.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add purchaseData to direct transfer pay transactions

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

@@ -357,6 +357,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         tokenAmount={tokenAmount}
         receiverAddress={receiverAddress}
         transactionMode={props.payOptions.mode === "transaction"}
+        payOptions={payOptions}
         isEmbed={props.isEmbed}
         onDone={onDone}
         onTryAgain={() => {

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

@@ -11,6 +11,7 @@ import { sendTransaction } from "../../../../../../../transaction/actions/send-t
 import { prepareTransaction } from "../../../../../../../transaction/prepare-transaction.js";
 import { toWei } from "../../../../../../../utils/units.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainSymbol } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -26,7 +27,7 @@ import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
 import type { PayerInfo } from "../types.js";
 import { ConnectorLine } from "./ConfirmationScreen.js";
 
-type TrasnferConfirmationScreenProps = {
+type TransferConfirmationScreenProps = {
   title: string;
   onBack?: () => void;
   setTransactionHash: (txHash: string) => void;
@@ -38,10 +39,11 @@ type TrasnferConfirmationScreenProps = {
   token: ERC20OrNativeToken;
   tokenAmount: string;
   transactionMode?: boolean;
+  payOptions?: PayUIOptions;
 };
 
 export function TransferConfirmationScreen(
-  props: TrasnferConfirmationScreenProps,
+  props: TransferConfirmationScreenProps,
 ) {
   const {
     title,
@@ -55,6 +57,7 @@ export function TransferConfirmationScreen(
     tokenAmount,
     transactionMode,
     setTransactionHash,
+    payOptions,
   } = props;
   const [step, setStep] = useState<"approve" | "transfer" | "execute">(
     "transfer",
@@ -242,7 +245,7 @@ export function TransferConfirmationScreen(
                     ? NATIVE_TOKEN_ADDRESS
                     : token.address,
                   amount: tokenAmount,
-                  purchaseData: undefined, // TODO (pay): add purchase data
+                  purchaseData: payOptions?.purchaseData,
                 });
 
                 if (transferResponse.approval) {

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

@@ -2,12 +2,13 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
+import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import type { PayerInfo } from "../types.js";
 import { SwapStatusScreen } from "./SwapStatusScreen.js";
 import { TransferConfirmationScreen } from "./TransferConfirmationScreen.js";
 
-type TrasnferFlowProps = {
+type TransferFlowProps = {
   title: string;
   onBack?: () => void;
   payer: PayerInfo;
@@ -21,9 +22,10 @@ type TrasnferFlowProps = {
   token: ERC20OrNativeToken;
   tokenAmount: string;
   transactionMode?: boolean;
+  payOptions?: PayUIOptions;
 };
 
-export function TransferFlow(props: TrasnferFlowProps) {
+export function TransferFlow(props: TransferFlowProps) {
   const [transferTxHash, setTransferTxHash] = useState<string | undefined>();
 
   if (transferTxHash) {