thirdweb 5.47.1 → 5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346

package/src/react/web/wallets/shared/PassKeyLogin.tsx

@@ -7,15 +7,14 @@ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wa
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
-import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
 import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
-import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
-import { Text } from "../../ui/components/text.js";
+import { ErrorState } from "./ErrorState.js";
 import { LoadingScreen } from "./LoadingScreen.js";
+import { LoadingState } from "./LoadingState.js";
 
 // is passkey stored?
 // - login
@@ -179,6 +178,7 @@ function LoginScreen(props: {
       <LoadingState
         title="Requesting Passkey"
         subtitle="A pop-up prompt will appear to sign-in and verify your passkey"
+        icon={<FingerPrintIcon size={iconSize.xxl} />}
       />
     );
   }
@@ -252,6 +252,7 @@ function SignupScreen(props: {
       <LoadingState
         title="Creating Passkey"
         subtitle="A pop-up prompt will appear to sign-in and verify your passkey"
+        icon={<FingerPrintIcon size={iconSize.xxl} />}
       />
     );
   }
@@ -297,67 +298,3 @@ function SelectLoginMethod(props: {
     </Container>
   );
 }
-
-function ErrorState(props: {
-  onTryAgain: () => void;
-  title: string;
-}) {
-  return (
-    <Container animate="fadein">
-      <Spacer y="xxl" />
-      <Container flex="row" center="x">
-        <AccentFailIcon size={iconSize["3xl"]} />
-      </Container>
-      <Spacer y="lg" />
-      <Text center color="primaryText" size="md">
-        {props.title}
-      </Text>
-      <Spacer y="xl" />
-      <Spacer y="xxl" />
-      <Button variant="accent" fullWidth onClick={props.onTryAgain}>
-        Try Again
-      </Button>
-    </Container>
-  );
-}
-
-function LoadingState(props: {
-  title: string;
-  subtitle: string;
-}) {
-  return (
-    <Container animate="fadein">
-      <Spacer y="xxl" />
-      <Container
-        flex="row"
-        center="x"
-        style={{
-          position: "relative",
-        }}
-      >
-        <Spinner size="4xl" color="accentText" />
-        <Container
-          color="accentText"
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-          }}
-        >
-          <FingerPrintIcon size={iconSize.xxl} />
-        </Container>
-      </Container>
-      <Spacer y="xl" />
-      <Text center color="primaryText" size="lg">
-        {props.title}
-      </Text>
-      <Spacer y="md" />
-      <Text multiline center>
-        {props.subtitle}
-      </Text>
-      <Spacer y="xxl" />
-      <Spacer y="xxl" />
-    </Container>
-  );
-}

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

@@ -56,4 +56,5 @@ export default {
   signInWithPhone: "Mit Telefonnummer anmelden",
   phoneRequired: "Telefonnummer ist erforderlich",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -53,6 +53,7 @@ export default {
   invalidPhone: "Invalid phone number",
   phonePlaceholder: "Phone number",
   signInWithPhone: "Sign in with phone number",
-  phoneRequired: "phone number is required",
+  phoneRequired: "Phone number is required",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -55,4 +55,5 @@ export default {
   phoneRequired: "Se requiere número de teléfono",
   signInWithEmail: "Iniciar sesión con correo electrónico",
   passkey: "Clave de acceso",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -56,4 +56,5 @@ export default {
   signInWithPhone: "Se connecter avec le numéro de téléphone",
   phoneRequired: "Le numéro de téléphone est requis",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -54,4 +54,5 @@ export default {
   signInWithPhone: "電話番号でサインイン",
   phoneRequired: "電話番号は必須です",
   passkey: "パスキー",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -52,4 +52,5 @@ export default {
   signInWithPhone: "전화번호로 로그인",
   phoneRequired: "전화번호가 필요합니다",
   passkey: "비밀번호",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -55,4 +55,5 @@ export default {
   signInWithPhone: "Mag-login gamit ang numero ng telepono",
   phoneRequired: "Kinakailangan ang numero ng telepono",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

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

@@ -50,4 +50,5 @@ export type InAppWalletLocale = {
   submitEmail: string;
   maxAccountsExceeded: string;
   passkey: string;
+  linkWallet: string;
 };

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

@@ -55,4 +55,5 @@ export default {
   signInWithPhone: "Đăng nhập bằng số điện thoại",
   phoneRequired: "Vui lòng nhập số điện thoại",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/transaction/actions/gasless/providers/biconomy.ts

@@ -10,6 +10,9 @@ import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type BiconomyOptions = {
   provider: "biconomy";
   // you can find the correct forwarder for your network here: https://docs-gasless.biconomy.io/misc/contract-addresses

package/src/transaction/actions/gasless/providers/engine.ts

@@ -10,6 +10,9 @@ import {
   waitForReceipt,
 } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type EngineOptions = {
   provider: "engine";
   relayerUrl: string;

package/src/transaction/actions/gasless/providers/openzeppelin.ts

@@ -8,6 +8,9 @@ import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type OpenZeppelinOptions = {
   provider: "openzeppelin";
   relayerUrl: string;

package/src/transaction/actions/gasless/types.ts

@@ -2,6 +2,18 @@ import type { BiconomyOptions } from "./providers/biconomy.js";
 import type { EngineOptions } from "./providers/engine.js";
 import type { OpenZeppelinOptions } from "./providers/openzeppelin.js";
 
+/**
+ * Gasless configs for sending gasless transactions.
+ * This config is used in:
+ * - [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ * - [`sendTransaction`](https://portal.thirdweb.com/references/typescript/v5/sendTransaction)
+ * - [`useSendTransaction`](https://portal.thirdweb.com/references/typescript/v5/useSendTransaction)
+ * - [`sendAndConfirmTransaction`](https://portal.thirdweb.com/references/typescript/v5/sendAndConfirmTransaction)
+ * - [`useSendAndConfirmTransaction`](https://portal.thirdweb.com/references/typescript/v5/useSendAndConfirmTransaction)
+ *
+ * Please refer to the docs of those components above for more info.
+ * @transaction
+ */
 export type GaslessOptions =
   | EngineOptions
   | OpenZeppelinOptions

package/src/transaction/prepare-contract-call.ts

@@ -113,7 +113,7 @@ export type PrepareContractCallOptions<
  * });
  * ```
  *
- * ### Usage with a the ABI defined on the contract:
+ * ### Usage with the ABI defined on the contract:
  *
  * ```ts
  * import { getContract, prepareContractCall } from "thirdweb";

package/src/transaction/read-contract.ts

@@ -70,7 +70,7 @@ export type ReadContractOptions<
 >;
 
 /**
- * Reads state from a deployed smart contract.
+ * ### Reads state from a deployed smart contract.
  *
  * You can use raw read calls or read [extensions](https://portal.thirdweb.com/typescript/v5/extensions/use) to read from a contract.
  *
@@ -111,7 +111,26 @@ export type ReadContractOptions<
  *
  * const { data, isLoading } = useReadContract({
  *   contract,
- *   method: "function tokenURI(uint256 tokenId) returns (string)"});
+ *   method: "function tokenURI(uint256 tokenId) returns (string)"}),
+ *   params: [1n],
+ * });
+ * ```
+ *
+ * ### Using `resolveMethod`
+ * ```ts
+ * import { getContract, resolveMethod } from "thirdweb";
+ * import { sepolia } from "thirdweb/chains";
+ * import { useReadContract } from "thirdweb/react";
+ *
+ * const contract = getContract({
+ *   client,
+ *   address: "0x...",
+ *   chain: sepolia,
+ * });
+ *
+ * const { data, isLoading } = useReadContract({
+ *   contract,
+ *   method: resolveMethod("tokenURI"),
  *   params: [1n],
  * });
  * ```

package/src/utils/bigint.ts

@@ -5,6 +5,7 @@ import { uint8ArrayToHex } from "./encoding/hex.js";
  * @param a - The first BigInt value.
  * @param b - The second BigInt value.
  * @returns The smaller of the two BigInt values.
+ * @utils
  * @example
  * ```ts
  * min(1n, 2n)
@@ -19,6 +20,7 @@ export function min(a: bigint, b: bigint) {
  * @param a - The first BigInt value.
  * @param b - The second BigInt value.
  * @returns The larger of the two BigInt values.
+ * @utils
  * @example
  * ```ts
  * max(1n, 2n)

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.47.1";
+export const version = "5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346";

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

@@ -3,8 +3,8 @@ import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
 import { type AuthOption, authOptions } from "../../../../wallets/types.js";
 import type { Ecosystem } from "../../web/types.js";
 
-const getLoginOptionRoute = (option: AuthOption) => {
-  if (!authOptions.includes(option)) {
+const getLoginOptionRoute = (option: AuthOption | "wallet") => {
+  if (!authOptions.includes(option as AuthOption) && option !== "wallet") {
     throw new Error(`Unknown auth option ${option}`);
   }
   switch (option) {
@@ -22,7 +22,7 @@ export const getLoginUrl = ({
   mode = "popup",
   redirectUrl,
 }: {
-  authOption: AuthOption;
+  authOption: AuthOption | "wallet";
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
   mode?: "popup" | "redirect" | "mobile";
@@ -58,7 +58,7 @@ export const getLoginCallbackUrl = ({
   client,
   ecosystem,
 }: {
-  authOption: AuthOption;
+  authOption: AuthOption | "wallet";
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 }): string => {

package/src/wallets/manager/index.ts

@@ -138,8 +138,6 @@ export function createConnectionManager(storage: AsyncStorage) {
       });
     }
 
-    handleSetActiveWallet(activeWallet);
-
     // add personal wallet to connected wallets list
     addConnectedWallet(personalWallet);
 

package/src/wallets/types.ts

@@ -34,7 +34,6 @@ export const authOptions = [
   "email",
   "phone",
   "passkey",
-  "wallet",
 ] as const;
 export type AuthOption = (typeof authOptions)[number];