thirdweb 5.42.0 → 5.43.0

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";

package/src/wallets/in-app/core/authentication/getLoginPath.ts

@@ -8,11 +8,13 @@ export const getSocialAuthLoginPath = ({
   client,
   ecosystem,
   mode = "popup",
+  redirectUrl,
 }: {
   authOption: SocialAuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
-  mode?: "popup" | "redirect";
+  mode?: "popup" | "redirect" | "mobile";
+  redirectUrl?: string;
 }) => {
   let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}?clientId=${client.clientId}`;
   if (ecosystem?.partnerId) {
@@ -22,10 +24,17 @@ export const getSocialAuthLoginPath = ({
   }
 
   if (mode === "redirect") {
-    const redirectUrl = new URL(window.location.href);
-    redirectUrl.searchParams.set("walletId", ecosystem?.id || "inApp");
-    redirectUrl.searchParams.set("authProvider", authOption);
-    baseUrl = `${baseUrl}&redirectUrl=${encodeURIComponent(redirectUrl.toString())}`;
+    const formattedRedirectUrl = new URL(redirectUrl || window.location.href);
+    formattedRedirectUrl.searchParams.set("walletId", ecosystem?.id || "inApp");
+    formattedRedirectUrl.searchParams.set("authProvider", authOption);
+    baseUrl = `${baseUrl}&redirectUrl=${encodeURIComponent(formattedRedirectUrl.toString())}`;
+  }
+
+  if (mode === "mobile") {
+    if (!redirectUrl) {
+      throw new Error("Redirect URL is required for mobile authentication");
+    }
+    baseUrl = `${baseUrl}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
   }
 
   return baseUrl;

package/src/wallets/in-app/native/auth/native-auth.ts

@@ -211,7 +211,8 @@ export async function socialLogin(
   const loginUrl = getSocialAuthLoginPath({
     authOption: auth.strategy,
     client,
-    mode: "popup",
+    mode: "mobile",
+    redirectUrl: auth.redirectUrl,
   });
 
   const result = await WebBrowser.openAuthSessionAsync(

package/src/wallets/in-app/native/helpers/auth/middleware.ts

@@ -11,7 +11,10 @@ import {
   setWallerUserDetails,
 } from "../storage/local.js";
 import { setUpNewUserWallet } from "../wallet/creation.js";
-import { getCognitoRecoveryPasswordV2 } from "../wallet/recoveryCode.js";
+import {
+  getCognitoRecoveryPasswordV1,
+  getCognitoRecoveryPasswordV2,
+} from "../wallet/recoveryCode.js";
 import { setUpShareForNewDevice } from "../wallet/retrieval.js";
 
 export async function preAuth(args: {
@@ -153,7 +156,9 @@ async function getRecoveryCode(
       try {
         return await getCognitoRecoveryPasswordV2(client);
       } catch (e) {
-        throw new Error("Something went wrong getting cognito recovery code");
+        return await getCognitoRecoveryPasswordV1(client).catch(() => {
+          throw new Error("Something went wrong getting cognito recovery code");
+        });
       }
     }
   } else if (

package/src/wallets/in-app/native/native-connector.ts

@@ -113,7 +113,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "apple": {
         const ExpoLinking = require("expo-linking");
         const redirectUrl =
-          params.redirectUrl || (ExpoLinking.createURL("") as string);
+          params.redirectUrl || (ExpoLinking.createURL("") as string); // Will default to the app scheme
         return this.socialLogin({
           strategy,
           redirectUrl,
@@ -167,7 +167,7 @@ export class InAppNativeConnector implements InAppConnector {
         },
       };
     } catch (error) {
-      console.error(`Error while validating otp: ${error}`);
+      console.error(`Error while validating OTP: ${error}`);
       if (error instanceof Error) {
         throw new Error(`Error while validating otp: ${error.message}`);
       }