thirdweb 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342 → 5.43.0-nightly-75cc5a6434d29dbfe69b6cd6344a7c8426d59fac-20240731000316

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/ConnectWalletSocialOptions.tsx

@@ -234,7 +234,7 @@ export const ConnectWalletSocialOptions = (
     props.select();
   }
 
-  const showOnlyIcons = socialLogins.length > 1;
+  const showOnlyIcons = socialLogins.length > 2;
 
   return (
     <Container
@@ -247,22 +247,33 @@ export const ConnectWalletSocialOptions = (
       {/* Social Login */}
       {hasSocialLogins && (
         <Container
-          flex={showOnlyIcons ? "row" : "column"}
+          flex="row"
           center="x"
-          gap="sm"
+          gap={socialLogins.length > 4 ? "xs" : "sm"}
           style={{
             justifyContent: "space-between",
+            display: "grid",
+            gridTemplateColumns: `repeat(${socialLogins.length}, 1fr)`,
           }}
         >
           {socialLogins.map((loginMethod) => {
-            const imgIconSize = showOnlyIcons ? iconSize.lg : iconSize.md;
+            const imgIconSize = (() => {
+              if (!showOnlyIcons) {
+                return iconSize.md;
+              } else {
+                if (socialLogins.length > 4) {
+                  return iconSize.md;
+                }
+                return iconSize.lg;
+              }
+            })();
+
             return (
               <SocialButton
                 aria-label={`Login with ${loginMethod}`}
                 data-variant={showOnlyIcons ? "icon" : "full"}
                 key={loginMethod}
                 variant={"outline"}
-                fullWidth={!showOnlyIcons}
                 onClick={() => {
                   handleSocialLogin(loginMethod as SocialAuthOption);
                 }}
@@ -274,7 +285,7 @@ export const ConnectWalletSocialOptions = (
                   client={props.client}
                 />
                 {!showOnlyIcons &&
-                  loginMethodsLabel[loginMethod as SocialAuthOption]}
+                  `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
               </SocialButton>
             );
           })}
@@ -379,11 +390,12 @@ export const ConnectWalletSocialOptions = (
 };
 
 const SocialButton = /* @__PURE__ */ styled(Button)({
+  flexGrow: 1,
   "&[data-variant='full']": {
     display: "flex",
     justifyContent: "flex-start",
     padding: spacing.md,
-    gap: spacing.md,
+    gap: spacing.sm,
     fontSize: fontSize.md,
     fontWeight: 500,
     transition: "background-color 0.2s ease",
@@ -393,6 +405,5 @@ const SocialButton = /* @__PURE__ */ styled(Button)({
   },
   "&[data-variant='icon']": {
     padding: spacing.sm,
-    flexGrow: 1,
   },
 });

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-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342";
+export const version = "5.43.0-nightly-75cc5a6434d29dbfe69b6cd6344a7c8426d59fac-20240731000316";

package/src/wallets/create-wallet.ts

@@ -30,9 +30,31 @@ import { createWalletEmitter } from "./wallet-emitter.js";
 
 /**
  * Creates a wallet based on the provided ID and arguments.
+ *
+ * - Supports 350+ wallets
+ * - Handles both injected browser wallets and WalletConnect sessions
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
  * @param args - The arguments for creating the wallet.
+ * @param args.id - The ID of the wallet to create, this will be autocompleted by your IDE.
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ * @param args.createOptions - The options for creating the wallet.
+ * The arguments are different for each wallet type.
+ * Refer to the [WalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/WalletCreationOptions) type for more details.
  * @returns - The created wallet.
  * @example
+ *
+ * ## Connecting the wallet
+ *
+ * Once created, you can connect the wallet to your app by calling the `connect` method.
+ *
+ * The `connect` method returns a promise that resolves to the connected account.
+ *
+ * Each wallet type can have different connect options. [View the different connect options](https://portal.thirdweb.com/references/typescript/v5/WalletConnectionOption)
+ *
+ * ## Connecting to an injected wallet
+ *
  * ```ts
  * import { createWallet } from "thirdweb/wallets";
  *
@@ -42,6 +64,57 @@ import { createWalletEmitter } from "./wallet-emitter.js";
  *  client,
  * });
  * ```
+ *
+ * You can check if a wallet is installed by calling the [injectedProvider](https://portal.thirdweb.com/references/typescript/v5/injectedProvider) method.
+ *
+ * ## Connecting via WalletConnect modal
+ *
+ * ```ts
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * const metamaskWallet = createWallet("io.metamask");
+ *
+ * await metamask.connect({
+ *   client,
+ *   walletConnect: {
+ *     projectId: "YOUR_PROJECT_ID",
+ *     showQrModal: true,
+ *     appMetadata: {
+ *       name: "My App",
+ *       url: "https://my-app.com",
+ *       description: "my app description",
+ *       logoUrl: "https://path/to/my-app/logo.svg",
+ *     },
+ *   },
+ * });
+ * ```
+ * [View ConnectWallet connection options](https://portal.thirdweb.com/references/typescript/v5/WCConnectOptions)
+ *
+ * ## Connecting with coinbase wallet
+ *
+ * ```ts
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * const cbWallet = createWallet("com.coinbase.wallet", {
+ *   appMetadata: {
+ *     name: "My App",
+ *     url: "https://my-app.com",
+ *     description: "my app description",
+ *     logoUrl: "https://path/to/my-app/logo.svg",
+ *   },
+ *   walletConfig: {
+ *     // options: 'all' | 'smartWalletOnly' | 'eoaOnly'
+ *     options: 'all',
+ *   },
+ * });
+ *
+ * const account = await cbWallet.connect({
+ *  client,
+ * });
+ * ```
+ *
+ * [View Coinbase wallet creation options](https://portal.thirdweb.com/references/typescript/v5/CoinbaseWalletCreationOptions)
+ *
  * @wallet
  */
 export function createWallet<const ID extends WalletId>(

package/src/wallets/ecosystem/types.ts

@@ -1,3 +1,4 @@
+import type { Prettify } from "../../utils/type-utils.js";
 import type {
   InAppWalletAutoConnectOptions,
   InAppWalletConnectionOptions,
@@ -11,8 +12,11 @@ export type EcosystemWalletCreationOptions = {
   };
 };
 
-export type EcosystemWalletConnectionOptions = InAppWalletConnectionOptions & {
-  ecosystem: Ecosystem;
-};
-export type EcosystemWalletAutoConnectOptions =
-  InAppWalletAutoConnectOptions & { ecosystem: Ecosystem };
+export type EcosystemWalletConnectionOptions = Prettify<
+  InAppWalletConnectionOptions & {
+    ecosystem: Ecosystem;
+  }
+>;
+export type EcosystemWalletAutoConnectOptions = Prettify<
+  InAppWalletAutoConnectOptions & { ecosystem: Ecosystem }
+>;

package/src/wallets/in-app/web/ecosystem.ts

@@ -7,10 +7,29 @@ import type {
 import { createEcosystemWallet } from "../core/wallet/ecosystem-core.js";
 
 /**
- * Creates an ecosystem wallet.
+ * Creates an [Ecosystem Wallet](https://portal.thirdweb.com/connect/ecosystems/overview) based on various authentication methods.
+ *
+ * Available authentication methods:
+ * - Email
+ * - Phone
+ * - Passkey
+ * - Google
+ * - Apple
+ * - Facebook
+ * - Discord
+ * - Farcaster
+ *
+ * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.
+ *
+ * Refer to [inAppWallet](https://portal.thirdweb.com/references/typescript/v5/inAppWallet) for detailed usage examples.
+ *
  * @param createOptions - configuration options
+ * Refer to [EcosystemWalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/EcosystemWalletCreationOptions) for more details.
  * @returns The created ecosystem wallet.
  * @example
+ *
+ * ### Connect to an ecosystem wallet
+ *
  * ```ts
  * import { ecosystemWallet } from "thirdweb/wallets";
  *
@@ -23,14 +42,21 @@ import { createEcosystemWallet } from "../core/wallet/ecosystem-core.js";
  * });
  * ```
  *
- * Connect to a restricted ecosystem wallet with your designated partner ID
- * @note The parnter ID will be provided to you by the ecosystem with which you're integrating.
+ * [View all connection options](https://portal.thirdweb.com/references/typescript/v5/EcosystemWalletConnectionOptions)
+ *
+ * ### Connect to a restricted ecosystem wallet with your designated partner ID
+ *
+ * The parnter ID will be provided to you by the ecosystem with which you're integrating.
+ *
  * ```ts
  * import { ecosystemWallet } from "thirdweb/wallets";
  * const wallet = ecosystemWallet("ecosystem.hooli", {
  *  partnerId: "..."
  * });
  * ```
+ *
+ * Refer to [inAppWallet](https://portal.thirdweb.com/references/typescript/v5/inAppWallet) for more usage examples.
+ *
  * @wallet
  */
 export function ecosystemWallet(