[SDK] Add erc20Value to buyFromListing transaction (#5630)

CNCT-2555

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces the `erc20Value` parameter to the `buyFromListing` transaction, enhancing the functionality for transactions involving ERC20 tokens. It also includes tests to ensure proper handling of ERC20 transactions in the marketplace.

### Detailed summary
- Added `erc20Value` to `buyFromListing` to handle ERC20 transactions.
- Implemented a test case for the new `erc20Value` functionality.
- Deployed an ERC20 contract for testing purposes.
- Verified the correct approval transaction is generated for ERC20 purchases.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

.changeset/silent-hats-melt.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add erc20Value to buyFromListing transaction

packages/thirdweb/src/extensions/marketplace/direct-listings/direct-listings.test.ts

@@ -12,10 +12,13 @@ import {
   getContract,
 } from "../../../contract/contract.js";
 import { parseEventLogs } from "../../../event/actions/parse-logs.js";
+import { getApprovalForTransaction } from "../../../extensions/erc20/write/getApprovalForTransaction.js";
 import { setApprovalForAll as setApprovalForAll721 } from "../../../extensions/erc721/__generated__/IERC721A/write/setApprovalForAll.js";
 import { mintTo as mintToErc1155 } from "../../../extensions/erc1155/write/mintTo.js";
+import { deployERC20Contract } from "../../../extensions/prebuilts/deploy-erc20.js";
 import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
 import { sendTransaction } from "../../../transaction/actions/send-transaction.js";
+import { resolvePromisedValue } from "../../../utils/promise/resolve-promised-value.js";
 import { balanceOf as balanceOfErc721 } from "../../erc721/__generated__/IERC721A/read/balanceOf.js";
 import { mintTo as mintToErc721 } from "../../erc721/write/mintTo.js";
 import { balanceOf as balanceOfErc1155 } from "../../erc1155/__generated__/IERC1155/read/balanceOf.js";
@@ -256,10 +259,6 @@ describe.runIf(process.env.TW_SECRET_KEY)("Marketplace Direct Listings", () => {
   }, 120_000);
 
   it("should work with ERC1155", async () => {
-    /**
-     * ============ now do the same tests but for ERC1155 =============
-     */
-
     // this should fail because we're listing more than we have
     await expect(
       sendTransaction({
@@ -395,5 +394,55 @@ describe.runIf(process.env.TW_SECRET_KEY)("Marketplace Direct Listings", () => {
     expect(nft1155BalanceOfAccountAAfterPurchase).toBe(1n);
     // expect the seller to have one less 1155 token
     expect(nft1155BalanceOfAccountCAfterPurchase).toBe(99n);
+
+    /**
+     * buyFromListing transaction (for listing with ERC20 currency) should have proper erc20 value
+     * so that getApprovalForTransaction can work properly
+     */
+    const erc20Address = await deployERC20Contract({
+      chain,
+      client,
+      account: TEST_ACCOUNT_C,
+      type: "TokenERC20",
+      params: {
+        name: "MyToken",
+        contractURI: TEST_CONTRACT_URI,
+      },
+    });
+    await sendAndConfirmTransaction({
+      transaction: createListing({
+        contract: marketplaceContract,
+        assetContractAddress: erc1155Contract.address,
+        tokenId: 0n,
+        pricePerToken: "0.01",
+        quantity: 1n,
+        currencyContractAddress: erc20Address,
+      }),
+      account: TEST_ACCOUNT_C,
+    });
+    // get the last listing id
+    const _allListings = await getAllListings({
+      contract: marketplaceContract,
+    });
+    const latestListing = _allListings.at(-1);
+    expect(latestListing).toBeDefined();
+    if (!latestListing) {
+      throw new Error("Cannot get listings");
+    }
+    const buyListingTx = buyFromListing({
+      contract: marketplaceContract,
+      listingId: latestListing.id,
+      quantity: 1n,
+      recipient: TEST_ACCOUNT_C.address,
+    });
+    expect(await resolvePromisedValue(buyListingTx.erc20Value)).toStrictEqual({
+      amountWei: BigInt(1e16),
+      tokenAddress: erc20Address,
+    });
+    const approveTx = await getApprovalForTransaction({
+      transaction: buyListingTx,
+      account: TEST_ACCOUNT_A,
+    });
+    expect(approveTx).not.toBe(null);
   }, 120_000);
 });

packages/thirdweb/src/extensions/marketplace/direct-listings/write/buyFromListing.ts

@@ -66,6 +66,12 @@ export function buyFromListing(
             ? listing.pricePerToken * options.quantity
             : 0n,
           extraGas: 50_000n, // add extra gas to account for router call
+          erc20Value: isNativeTokenAddress(listing.currencyContractAddress)
+            ? undefined
+            : {
+                amountWei: listing.pricePerToken * options.quantity,
+                tokenAddress: listing.currencyContractAddress,
+              },
         },
       };
     },