thirdweb 5.42.0 → 5.43.0

package/src/adapters/ethers5.ts

@@ -7,9 +7,9 @@ import type { Chain } from "../chains/types.js";
 import { getRpcUrlForChain } from "../chains/utils.js";
 import type { ThirdwebClient } from "../client/client.js";
 import { type ThirdwebContract, getContract } from "../contract/contract.js";
-import { sendTransaction } from "../transaction/actions/send-transaction.js";
+import { toSerializableTransaction } from "../transaction/actions/to-serializable-transaction.js";
 import { waitForReceipt } from "../transaction/actions/wait-for-tx-receipt.js";
-import { prepareTransaction } from "../transaction/prepare-transaction.js";
+import type { PreparedTransaction } from "../transaction/prepare-transaction.js";
 import { toHex } from "../utils/encoding/hex.js";
 import type { Account } from "../wallets/interfaces/wallet.js";
 
@@ -322,9 +322,17 @@ export async function toEthersSigner(
         throw new Error("Account does not support signTransaction");
       }
       const awaitedTx = await ethers.utils.resolveProperties(transaction);
-      return account.signTransaction(
-        await alignTxFromEthers(awaitedTx, ethers),
+      const alignedTx = await alignTxFromEthers(
+        client,
+        chain,
+        awaitedTx,
+        ethers,
       );
+      const serialized = await toSerializableTransaction({
+        transaction: alignedTx,
+        from: account.address,
+      });
+      return account.signTransaction(serialized);
     }
 
     /**
@@ -340,33 +348,43 @@ export async function toEthersSigner(
         throw new Error("Account does not support sendTransaction");
       }
       const awaitedTx = await ethers.utils.resolveProperties(transaction);
-      const alignedTx = await alignTxFromEthers(awaitedTx, ethers);
-      const tx = prepareTransaction({
-        client: client,
-        chain: chain,
-        accessList: alignedTx.accessList,
-        data: alignedTx.data,
-        nonce: alignedTx.nonce,
-        to: alignedTx.to ?? undefined,
-        value: alignedTx.value,
-      });
-      const result = await sendTransaction({
-        transaction: tx,
-        account: account,
+      const alignedTx = await alignTxFromEthers(
+        client,
+        chain,
+        awaitedTx,
+        ethers,
+      );
+      const serialized = await toSerializableTransaction({
+        transaction: alignedTx,
+        from: account.address,
       });
+      const result = await account.sendTransaction(serialized);
 
       const response: ethers5.ethers.providers.TransactionResponse = {
-        chainId: tx.chain.id,
+        ...serialized,
+        nonce: serialized.nonce ?? 0,
         from: account.address,
-        data: alignedTx.data ?? "0x",
-        nonce: alignedTx.nonce ?? 0,
+        maxFeePerGas: serialized.maxFeePerGas
+          ? ethers.BigNumber.from(serialized.maxFeePerGas)
+          : undefined,
+        maxPriorityFeePerGas: serialized.maxPriorityFeePerGas
+          ? ethers.BigNumber.from(serialized.maxPriorityFeePerGas)
+          : undefined,
+        gasPrice: serialized.gasPrice
+          ? ethers.BigNumber.from(serialized.gasPrice)
+          : undefined,
+        accessList: serialized.accessList as ethers5.ethers.utils.AccessList,
         value: ethers.BigNumber.from(alignedTx.value ?? 0),
         gasLimit: ethers.BigNumber.from(alignedTx.gas ?? 0),
         // biome-ignore lint/style/noNonNullAssertion: TODO: fix later
         hash: result.transactionHash!,
         confirmations: 0,
         wait: async () => {
-          const receipt = await waitForReceipt(result);
+          const receipt = await waitForReceipt({
+            transactionHash: result.transactionHash,
+            chain,
+            client,
+          });
           return {
             ...receipt,
             type:
@@ -491,9 +509,11 @@ function alignTxToEthers(
 }
 
 async function alignTxFromEthers(
+  client: ThirdwebClient,
+  chain: Chain,
   tx: ethers5.ethers.providers.TransactionRequest,
   ethers: Ethers5,
-): Promise<TransactionSerializable> {
+): Promise<PreparedTransaction> {
   const {
     type: ethersType,
     accessList,
@@ -514,8 +534,8 @@ async function alignTxFromEthers(
         throw new Error("ChainId is required for EIP-2930 transactions");
       }
       return {
-        type: "eip2930",
-        chainId,
+        client,
+        chain,
         to,
         data: (data ?? undefined) as Hex | undefined,
         nonce: nonce ? ethers.BigNumber.from(nonce).toNumber() : undefined,
@@ -532,8 +552,8 @@ async function alignTxFromEthers(
         throw new Error("ChainId is required for EIP-1559 transactions");
       }
       return {
-        type: "eip1559",
-        chainId,
+        client,
+        chain,
         to,
         data: (data ?? undefined) as Hex | undefined,
         nonce: nonce ? ethers.BigNumber.from(nonce).toNumber() : undefined,
@@ -549,8 +569,8 @@ async function alignTxFromEthers(
     }
     default: {
       return {
-        type: "legacy",
-        chainId,
+        client,
+        chain,
         to,
         data: (data ?? undefined) as Hex | undefined,
         nonce: nonce ? ethers.BigNumber.from(nonce).toNumber() : undefined,

package/src/cli/bin.ts

@@ -19,11 +19,29 @@ async function main() {
       } else {
         await generate(chainIdPlusContract);
       }
+      break;
+    }
 
+    case "login": {
+      // Not implemented yet
+      console.info(
+        "Please instead pass a secret key to the command directly, learn more: https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
+      );
+      process.exit(1);
       break;
     }
 
     default: {
+      // check several commands for missing -k flag
+      const commands = ["create", "deploy", "publish", "generate", "upload"];
+      if (commands.includes(command) && !rest.includes("-k")) {
+        console.info(
+          "Please include the -k flag with your secret key, learn more: https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
+        );
+        process.exit(1);
+        return;
+      }
+
       const isWindows = /^win/.test(process.platform);
 
       const isBunAvailable = (() => {

package/src/exports/react.ts

@@ -165,5 +165,9 @@ export {
   BuyDirectListingButton,
   type BuyDirectListingButtonProps,
 } from "../react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.js";
+export {
+  CreateDirectListingButton,
+  type CreateDirectListingButtonProps,
+} from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
 export { useConnectionManager } from "../react/core/providers/connection-manager.js";

package/src/extensions/marketplace/direct-listings/write/createListing.ts

@@ -76,7 +76,11 @@ export type CreateListingParams = {
  * import { createListing } from "thirdweb/extensions/marketplace";
  * import { sendTransaction } from "thirdweb";
  *
- * const transaction = createListing({...});
+ * const transaction = createListing({
+ *   assetContractAddress: "0x...", // the NFT contract address that you want to sell
+ *   tokenId={0n}, // the token id you want to sell
+ *   pricePerToken="0.1" // sell for 0.1 <native token>
+ * });
  *
  * await sendTransaction({ transaction, account });
  * ```

package/src/pay/buyWithCrypto/getStatus.ts

@@ -53,7 +53,8 @@ export type BuyWithCryptoSubStatuses =
   | "REVERTED_ON_CHAIN"
   | "SUCCESS"
   | "PARTIAL_SUCCESS"
-  | "UNKNOWN_ERROR";
+  | "UNKNOWN_ERROR"
+  | "REFUNDED";
 
 export type SwapType = "SAME_CHAIN" | "CROSS_CHAIN";
 

package/src/react/core/hooks/wallets/useActiveAccount.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active account
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveAccount() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveAccount");
   const store = manager.activeAccountStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useActiveWallet.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active wallet
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveWallet() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveWallet");
   const store = manager.activeWalletStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useActiveWalletChain.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the chain the active wallet is connected to
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveWalletChain() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveWalletChain");
   const store = manager.activeWalletChainStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useActiveWalletConnectionStatus.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active account's connection status.
@@ -17,7 +17,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveWalletConnectionStatus() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveWalletConnectionStatus");
   const store = manager.activeWalletConnectionStatusStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import { createWallet } from "../../../../wallets/create-wallet.js";
 import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
@@ -7,7 +8,7 @@ import {
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 import { setLastAuthProvider } from "../../utils/storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
 import type { AutoConnectProps } from "../connection/types.js";
@@ -19,7 +20,7 @@ export function useAutoConnectCore(
   props: AutoConnectProps & { wallets: Wallet[] },
   getInstalledWallets?: () => Wallet[],
 ) {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useAutoConnect");
   const setConnectionStatus = useSetActiveWalletConnectionStatus();
   const { connect } = useConnect({
     client: props.client,
@@ -68,7 +69,8 @@ export function useAutoConnectCore(
     const availableWallets = [...wallets, ...(getInstalledWallets?.() ?? [])];
     const activeWallet =
       lastActiveWalletId &&
-      availableWallets.find((w) => w.id === lastActiveWalletId);
+      (availableWallets.find((w) => w.id === lastActiveWalletId) ||
+        createWallet(lastActiveWalletId));
 
     if (activeWallet) {
       try {

package/src/react/core/hooks/wallets/useConnect.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook to set a wallet as active wallet
@@ -34,7 +34,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useConnect(options?: ConnectManagerOptions) {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useConnect");
   const { connect } = manager;
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);

package/src/react/core/hooks/wallets/useConnectedWallets.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns all connected wallets
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useConnectedWallets() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useConnectedWallets");
   const store = manager.connectedWallets;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useDisconnect.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * Disconnect from given account
@@ -21,7 +21,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @returns An object with a function to disconnect an account
  */
 export function useDisconnect() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useDisconnect");
   const disconnect = manager.disconnectWallet;
   return { disconnect };
 }

package/src/react/core/hooks/wallets/useIsAutoConnecting.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook to check if the auto connect is in progress.
@@ -15,7 +15,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useIsAutoConnecting() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useIsAutoConnecting");
   const store = manager.isAutoConnecting;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useSetActiveWallet.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that lets you set the active wallet.
@@ -15,6 +15,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useSetActiveWallet() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSetActiveWallet");
   return manager.setActiveWallet;
 }

package/src/react/core/hooks/wallets/useSetActiveWalletConnectionStatus.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active wallet's connection status.
@@ -15,6 +15,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @internal
  */
 export function useSetActiveWalletConnectionStatus() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSetActiveWalletConnectionStatus");
   return manager.activeWalletConnectionStatusStore.setValue;
 }

package/src/react/core/hooks/wallets/useSwitchActiveWalletChain.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * Switch to blockchain with given chain id in the active wallet.
@@ -16,6 +16,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useSwitchActiveWalletChain() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSwitchActiveWalletChain");
   return manager.switchActiveWalletChain;
 }

package/src/react/core/providers/connection-manager.tsx

@@ -6,11 +6,24 @@ export const ConnectionManagerCtx = createContext<
 >(undefined);
 
 export function useConnectionManager() {
-  const connectionManager = useContext(ConnectionManagerCtx);
+  const connectionManager = useConnectionManagerCtx("useConnectionManager");
   if (!connectionManager) {
     throw new Error(
-      "useConnectionManager must be used within a ConnectionManager Provider",
+      "useConnectionManager must be used within a <ThirdwebProvider> Provider",
     );
   }
   return connectionManager;
 }
+
+/**
+ * Use this instead of `useConnectionManager` to throw a more specific error message when used outside of a provider.
+ * @internal
+ */
+export function useConnectionManagerCtx(hookname: string) {
+  const manager = useContext(ConnectionManagerCtx);
+  if (!manager) {
+    throw new Error(`${hookname} must be used within <ThirdwebProvider>`);
+  }
+
+  return manager;
+}

package/src/react/web/ui/ConnectWallet/locale/de.ts

@@ -0,0 +1,117 @@
+import type { ConnectLocale } from "./types.js";
+
+const connectLocaleDe: ConnectLocale = {
+  id: "de_DE",
+  signIn: "Anmelden",
+  defaultButtonTitle: "Wallet verbinden",
+  connecting: "Anmelden",
+  switchNetwork: "Netzwerk wechseln",
+  switchingNetwork: "Netzwerk wechseln",
+  defaultModalTitle: "Anmelden",
+  recommended: "Empfohlen",
+  installed: "Installiert",
+  buy: "Kaufen",
+  continueAsGuest: "Als Gast fortfahren",
+  connectAWallet: "Wallet verbinden",
+  newToWallets: `Was ist ein "Wallet"?`,
+  getStarted: "Loslegen",
+  guest: "Gast",
+  send: "Senden",
+  receive: "Empfangen",
+  currentNetwork: "Aktuelles Netzwerk",
+  switchAccount: "Account wechseln",
+  requestTestnetFunds: "Testnetz-Geld anfordern",
+  transactions: "Transaktionen",
+  payTransactions: "Fiat Transaktionen",
+  walletTransactions: "Wallet Transaktionen",
+  viewAllTransactions: "Alle Transaktionen anzeigen",
+  backupWallet: "Wallet sichern",
+  guestWalletWarning:
+    "Dies ist ein temporäres Gast-Wallet. Sichere das Wallet, wenn du den Zugriff darauf nicht verlieren möchtest",
+  switchTo: "Wechsle zu", // Used in "Switch to <Wallet-Name>"
+  connectedToSmartWallet: "Smart Account",
+  confirmInWallet: "Im Wallet bestätigen",
+  disconnectWallet: "Wallet trennen",
+  copyAddress: "Adresse kopieren",
+  personalWallet: "Persönliches Wallet",
+  smartWallet: "Smart Wallet",
+  or: "Oder",
+  goBackButton: "Zurück",
+  welcomeScreen: {
+    defaultTitle: "Dein Tor zur dezentralen Welt",
+    defaultSubtitle: "Verbinde ein Wallet, um loszulegen",
+  },
+  agreement: {
+    prefix: "Durch die Verbindung stimmst du diesen zu:",
+    termsOfService: "Nutzungsbedingungen",
+    and: "&",
+    privacyPolicy: "Datenschutzrichtlinien",
+  },
+  networkSelector: {
+    title: "Netzwerk auswählen",
+    mainnets: "Mainnets",
+    testnets: "Testnets",
+    allNetworks: "Alle",
+    addCustomNetwork: "Eigenes Netzwerk hinzufügen",
+    inputPlaceholder: "Netzwerk oder Chain ID suchen",
+    categoryLabel: {
+      recentlyUsed: "Zuletzt verwendet",
+      popular: "Beliebt",
+      others: "Alle Netzwerke",
+    },
+    loading: "Laden",
+    failedToSwitch: "Netzwerkwechsel fehlgeschlagen",
+  },
+  receiveFundsScreen: {
+    title: "Geld empfangen",
+    instruction:
+      "Kopiere die Wallet-Adresse, um Geld an dieses Wallet zu senden",
+  },
+  sendFundsScreen: {
+    title: "Geld senden",
+    submitButton: "Senden",
+    token: "Token",
+    sendTo: "Senden an",
+    amount: "Betrag",
+    successMessage: "Transaktion erfolgreich",
+    invalidAddress: "Ungültige Adresse",
+    noTokensFound: "Keine Token gefunden",
+    searchToken: "Token suchen oder einfügen",
+    transactionFailed: "Transaktion fehlgeschlagen",
+    transactionRejected: "Transaktion abgelehnt",
+    insufficientFunds: "Nicht genügend Guthaben",
+    selectTokenTitle: "Token auswählen",
+    sending: "Sende",
+  },
+  signatureScreen: {
+    instructionScreen: {
+      title: "Anmelden",
+      instruction: "Signiere die Anmeldeanfrage in deinem Wallet",
+      signInButton: "Anmelden",
+      disconnectWallet: "Wallet trennen",
+    },
+    signingScreen: {
+      title: "Signaturanfrage",
+      prompt: "Signiere die Signaturanfrage in deinem Wallet",
+      promptForSafe:
+        "Signiere die Signaturanfrage in deinem Wallet, um fortzufahren",
+      approveTransactionInSafe: "Transaktion im Safe bestätigen",
+      tryAgain: "Erneut versuchen",
+      failedToSignIn: "Anmeldung fehlgeschlagen",
+      inProgress: "Warte auf Bestätigung",
+    },
+  },
+  manageWallet: {
+    title: "Wallet verwalten",
+    connectAnApp: "App verbinden",
+    exportPrivateKey: "PrivateKey exportieren",
+  },
+  viewFunds: {
+    title: "Guthaben anzeigen",
+    viewNFTs: "NFTs anzeigen",
+    viewTokens: "Tokens anzeigen",
+    viewAssets: "Assets anzeigen",
+  },
+};
+
+export default connectLocaleDe;

package/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts

@@ -15,6 +15,9 @@ export async function getConnectLocale(localeId: LocaleId) {
     case "vi_VN": {
       return (await import("./vi.js")).default;
     }
+    case "de_DE": {
+      return (await import("./de.js")).default;
+    }
     default: {
       return (await import("./en.js")).default;
     }

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -151,6 +151,8 @@ export function ClaimButton(props: ClaimButtonProps) {
 }
 
 /**
+ * We can only get the image and name for Edition Drop
+ * For NFT Drop and Token Drop we fall back to the name & image of the contract
  * @internal
  */
 export async function getPayMetadata(

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/CreateDirectListingButton.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { sepolia } from "../../../../../../chains/chain-definitions/sepolia.js";
+import { CreateDirectListingButton } from "./index.js";
+
+const client = TEST_CLIENT;
+
+// marketplace v3 on sepolia
+const marketplaceAddress = "0xe0eFD6fb388405b67b3E9FaFc02649c70E749f03";
+
+describe.runIf(process.env.TW_SECRET_KEY)("BuyDirectListingButton", () => {
+  it("should render", () => {
+    render(
+      <CreateDirectListingButton
+        client={client}
+        chain={sepolia}
+        contractAddress={marketplaceAddress}
+        assetContractAddress="0x3cf279b3248E164F3e5C341826B878d350EC6AB1"
+        tokenId={0n}
+        pricePerToken="0.1"
+      >
+        Sell NFT
+      </CreateDirectListingButton>,
+    );
+    expect(screen.queryByText("Sell NFT")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});