thirdweb 5.42.0 → 5.43.0-nightly-75cc5a6434d29dbfe69b6cd6344a7c8426d59fac-20240731000316

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();
+  });
+});

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

@@ -0,0 +1,165 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { getContract } from "../../../../../../contract/contract.js";
+import { getApprovalForTransaction } from "../../../../../../extensions/erc20/write/getApprovalForTransaction.js";
+import {
+  type CreateListingParams,
+  createListing,
+} from "../../../../../../extensions/marketplace/direct-listings/write/createListing.js";
+import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
+import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
+import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
+import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { TransactionButton } from "../../../TransactionButton/index.js";
+
+export type CreateDirectListingButtonProps = Omit<
+  TransactionButtonProps,
+  "transaction"
+> &
+  CreateListingParams & {
+    contractAddress: string;
+    chain: Chain;
+    client: ThirdwebClient;
+  };
+
+/**
+ * This button is used to create Direct listings for the thirdweb Marketplace v3 contract
+ *
+ * It uses the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ * and the [`createListing` extension](https://portal.thirdweb.com/references/typescript/v5/marketplace/createListing) under the hood
+ * which means it inherits all the props of those 2 components.
+ *
+ * @example
+ * ```tsx
+ * import { CreateDirectListingButton } from "thirdweb/react";
+ *
+ * <CreateDirectListingButton
+ *   contractAddress="0x..." // contract address for the marketplace-v3
+ *   chain={...} // the chain which the marketplace contract is deployed on
+ *
+ *   // These props below are the same props for `createListing`
+ *   // to get the full list, check the docs link above
+ *   tokenId={0n}
+ *   assetContractAddress="0x..." // The NFT contract address whose NFT(s) you want to sell
+ *   pricePerToken={"0.1"} // sell for 0.1 <native token>
+ * >
+ *   Sell NFT
+ * </CreateDirectListingButton>
+ * ```
+ * @component
+ */
+export function CreateDirectListingButton(
+  props: CreateDirectListingButtonProps,
+) {
+  const {
+    contractAddress,
+    chain,
+    client,
+    children,
+    payModal,
+    assetContractAddress,
+    tokenId,
+  } = props;
+  const marketplaceContract = getContract({
+    address: contractAddress,
+    chain,
+    client,
+  });
+  const account = useActiveAccount();
+  const defaultPayModalMetadata = payModal ? payModal.metadata : undefined;
+  const { data: payMetadata } = useReadContract(getPayMetadata, {
+    contract: getContract({
+      address: assetContractAddress,
+      chain,
+      client,
+    }),
+    tokenId,
+    queryOptions: {
+      enabled: !defaultPayModalMetadata,
+    },
+  });
+  const { mutateAsync } = useSendAndConfirmTransaction();
+
+  const prepareTransaction = useCallback(async () => {
+    if (!account) {
+      throw new Error("No account detected");
+    }
+    const listingTx = createListing({
+      contract: marketplaceContract,
+      ...props,
+    });
+    const approveTx = await getApprovalForTransaction({
+      transaction: listingTx,
+      account,
+    });
+    if (approveTx) {
+      await mutateAsync(approveTx);
+    }
+    return listingTx;
+  }, [marketplaceContract, props, account, mutateAsync]);
+
+  return (
+    <TransactionButton
+      transaction={() => prepareTransaction()}
+      payModal={{
+        metadata: defaultPayModalMetadata || payMetadata,
+        ...payModal,
+      }}
+      {...props}
+    >
+      {children}
+    </TransactionButton>
+  );
+}
+
+/**
+ * @internal
+ */
+async function getPayMetadata(
+  options: BaseTransactionOptions<{
+    tokenId: bigint;
+  }>,
+): Promise<{ name?: string; image?: string }> {
+  const [
+    { isERC721 },
+    { isERC1155 },
+    { getContractMetadata },
+    { getNFT: getERC721 },
+    { getNFT: getERC1155 },
+  ] = await Promise.all([
+    import("../../../../../../extensions/erc721/read/isERC721.js"),
+    import("../../../../../../extensions/erc1155/read/isERC1155.js"),
+    import("../../../../../../extensions/common/read/getContractMetadata.js"),
+    import("../../../../../../extensions/erc721/read/getNFT.js"),
+    import("../../../../../../extensions/erc1155/read/getNFT.js"),
+  ]);
+  const [is721, is1155, contractMetadata] = await Promise.all([
+    isERC721(options),
+    isERC1155(options),
+    getContractMetadata(options),
+  ]);
+  if (is721) {
+    const nft = await getERC721(options);
+    return {
+      image: nft?.metadata?.image,
+      name: nft?.metadata?.name,
+    };
+  }
+
+  if (is1155) {
+    const nft = await getERC1155(options);
+    return {
+      image: nft?.metadata?.image,
+      name: nft?.metadata?.name,
+    };
+  }
+
+  return {
+    image: contractMetadata?.image,
+    name: contractMetadata?.name,
+  };
+}

package/src/react/web/ui/types.ts

@@ -1,2 +1,8 @@
 // valid combinations of ISO language code and ISO country code
-export type LocaleId = "en_US" | "es_ES" | "ja_JP" | "tl_PH" | "vi_VN";
+export type LocaleId =
+  | "en_US"
+  | "es_ES"
+  | "ja_JP"
+  | "tl_PH"
+  | "vi_VN"
+  | "de_DE";

package/src/react/web/wallets/injected/locale/de.ts

@@ -0,0 +1,27 @@
+import type { InjectedWalletLocale } from "./types.js";
+
+/**
+ * @internal
+ */
+const injectedWalletLocaleEn = (wallet: string): InjectedWalletLocale => ({
+  connectionScreen: {
+    inProgress: "Verbindung wird hergestellt",
+    failed: "Verbindung fehlgeschlagen",
+    instruction: `Akzeptiere die Verbindung in ${wallet}`,
+    retry: "Erneut versuchen",
+  },
+  getStartedScreen: {
+    instruction: `Scanne den QR Code um ${wallet} herunterzuladen`,
+  },
+  scanScreen: {
+    instruction: `Scanne den QR Code um ${wallet} zu verbinden`,
+  },
+  getStartedLink: `Du hast ${wallet} nicht?`,
+  download: {
+    chrome: "Chrome Extension installieren",
+    android: "Von Google Play herunterladen",
+    iOS: "Von App Store herunterladen",
+  },
+});
+
+export default injectedWalletLocaleEn;

package/src/react/web/wallets/injected/locale/getInjectedWalletLocale.ts

@@ -16,6 +16,8 @@ export async function getInjectedWalletLocale(
       return (await import("./tl.js")).default;
     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/wallets/shared/locale/de.ts

@@ -0,0 +1,58 @@
+import type { InAppWalletLocale } from "./types.js";
+
+export default {
+  signInWithGoogle: "Google",
+  signInWithFacebook: "Facebook",
+  signInWithApple: "Apple",
+  signInWithDiscord: "Discord",
+  emailPlaceholder: "E-Mail Adresse",
+  submitEmail: "Weiter",
+  signIn: "Anmelden",
+  or: "Oder",
+  emailRequired: "E-Mail Adresse ist erforderlich",
+  invalidEmail: "Ungültige E-Mail Adresse",
+  maxAccountsExceeded:
+    "Maximale Anzahl von Konten überschritten. Bitte informiere den App-Entwickler.",
+  socialLoginScreen: {
+    title: "Anmelden",
+    instruction: "Melde dich im Popup Fenster an",
+    failed: "Anmeldung fehlgeschlagen",
+    retry: "Erneut versuchen",
+  },
+  emailLoginScreen: {
+    title: "Anmelden",
+    enterCodeSendTo: "Gib den Bestätigungscode ein. Gesendet an",
+    newDeviceDetected: "Neues Gerät erkannt",
+    enterRecoveryCode:
+      "Gib den Wiederherstellungscode ein, der dir per E-Mail zugesandt wurde, als du dich zum ersten Mal angemeldet hast",
+    invalidCode: "Ungültiger Bestätigungscode",
+    invalidCodeOrRecoveryCode:
+      "Ungültiger Bestätigungscode oder Wiederherstellungscode",
+    verify: "Bestätigen",
+    failedToSendCode: "Bestätigungscode konnte nicht gesendet werden",
+    sendingCode: "Bestätigungscode wird gesendet",
+    resendCode: "Bestätigungscode erneut senden",
+  },
+  createPassword: {
+    title: "Passwort erstellen",
+    instruction:
+      "Lege ein Passwort für dein Konto fest. Du benötigst dieses Passwort, um dich von einem neuen Gerät aus anzumelden.",
+    saveInstruction: "Stelle sicher, dass du es gespeichert hast",
+    inputPlaceholder: "Gib dein Passwort ein",
+    confirmation: "Ich habe mein Passwort gespeichert",
+    submitButton: "Passwort festlegen",
+    failedToSetPassword: "Passwort festlegen fehlgeschlagen",
+  },
+  enterPassword: {
+    title: "Passwort eingeben",
+    instruction: "Gib das Passwort für dein Konto ein",
+    inputPlaceholder: "Gib dein Passwort ein",
+    submitButton: "Überprüfen",
+    wrongPassword: "Falsches Passwort",
+  },
+  signInWithEmail: "Mit E-Mail Adresse anmelden",
+  invalidPhone: "Ungültige Telefonnummer",
+  phonePlaceholder: "Telefonnummer",
+  signInWithPhone: "Mit Telefonnummer anmelden",
+  phoneRequired: "Telefonnummer ist erforderlich",
+} satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/getConnectLocale.ts

@@ -16,6 +16,8 @@ export async function getInAppWalletLocale(
       return (await import("./tl.js")).default;
     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/wallets/smartWallet/locale/de.ts

@@ -0,0 +1,13 @@
+import type { SmartWalletLocale } from "./types.js";
+
+const smartWalletLocalEn: SmartWalletLocale = {
+  connecting: "Verbindung zum Smart Account wird hergestellt",
+  failedToConnect: "Verbindung zum Smart Account fehlgeschlagen",
+  wrongNetworkScreen: {
+    title: "Falsches Netzwerk",
+    subtitle: "Dein Wallet ist nicht mit dem erforderlichen Netzwerk verbunden",
+    failedToSwitch: "Netzwerkwechsel fehlgeschlagen",
+  },
+};
+
+export default smartWalletLocalEn;

package/src/react/web/wallets/smartWallet/locale/getSmartWalletLocale.ts

@@ -16,6 +16,8 @@ export async function getSmartWalletLocale(
       return (await import("./tl.js")).default;
     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/wallets/walletConnect/locale.ts

@@ -29,4 +29,8 @@ export const walletConnectLocales: Record<LocaleId, WalletConnectLocale> = {
     scanInstruction: "Quét mã QR bằng ứng dụng ví để kết nối",
     openWCModal: "Mở giao diện WalletConnect",
   },
+  de_DE: {
+    scanInstruction: "Scanne dies mit deiner Wallet-App, um zu verbinden",
+    openWCModal: "Offizielles WalletConnect-Modal öffnen",
+  },
 };

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.42.0";
+export const version = "5.43.0-nightly-75cc5a6434d29dbfe69b6cd6344a7c8426d59fac-20240731000316";