thirdweb 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342 → 5.42.0

package/dist/types/wallets/in-app/web/in-app.d.ts

@@ -1,10 +1,27 @@
 import type { Wallet } from "../../interfaces/wallet.js";
 import type { CreateWalletArgs } from "../../wallet-types.js";
 /**
- * Creates an in-app wallet.
+ * Creates an app scoped wallet for users 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.
+ *
  * @param createOptions - configuration options
+ * Refer to [InAppWalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/InAppWalletCreationOptions) to see the available options.
  * @returns The created in-app wallet.
  * @example
+ *
+ * ### Login with socials
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  *
@@ -17,18 +34,90 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  * });
  * ```
  *
- * Enable smart accounts and sponsor gas for your users:
+ * [View all available social auth methods](https://portal.thirdweb.com/references/typescript/v5/InAppWalletSocialAuth)
+ *
+ * * ### Login with email
+ *
+ * ```ts
+ * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+ *
+ * const wallet = inAppWallet();
+ *
+ * // sends a verification code to the provided email
+ * await preAuthenticate({
+ *   client,
+ *   strategy: "email",
+ *   email: "example@example.com",
+ * });
+ *
+ * // login with the verification code
+ * const account = await wallet.connect({
+ *   client,
+ *   chain,
+ *   strategy: "email",
+ *   verificationCode: "123456",
+ * });
+ * ```
+ *
+ * ### Login with phone number
+ * ```ts
+ * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+ *
+ * const wallet = inAppWallet();
+ *
+ * // sends a verification code to the provided phone number
+ * await preAuthenticate({
+ *   client,
+ *   strategy: "phone",
+ *   phoneNumber: "+1234567890",
+ * });
+ *
+ * // login with the verification code
+ * const account = await wallet.connect({
+ *   client,
+ *   chain,
+ *   strategy: "phone",
+ *   verificationCode: "123456",
+ * });
+ *
+ * ### Login with passkey
+ *
+ * ```ts
+ * import { inAppWallet, hasStoredPasskey } from "thirdweb/wallets/in-app";
+ *
+ * const wallet = inAppWallet();
+ *
+ * const wallet = inAppWallet();
+ * const hasPasskey = await hasStoredPasskey(client);
+ * await wallet.connect({
+ *   client,
+ *   strategy: "passkey",
+ *  type: hasPasskey ? "sign-in" : "sign-up",
+ * });
+ * ```
+ *
+ * ### Enable smart accounts and sponsor gas for your users:
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
+ * import { sepolia } from "thirdweb/chains";
+ *
  * const wallet = inAppWallet({
  *  smartAccount: {
  *   chain: sepolia,
  *   sponsorGas: true,
  * },
  * });
+ *
+ * // account will be a smart account with sponsored gas enabled
+ * const account = await wallet.connect({
+ *   client,
+ *   chain,
+ *   strategy: "google",
+ * });
  * ```
  *
- * Specify a logo for your login page
+ * ### Specify a logo for your login page (Connect UI)
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  * const wallet = inAppWallet({
@@ -43,7 +132,8 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  * });
  * ```
  *
- * Hide the ability to export the private key within the Connect Modal
+ * ### Hide the ability to export the private key within the Connect Modal UI
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  * const wallet = inAppWallet({
@@ -51,7 +141,10 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  * });
  * ```
  *
- * Open the Oauth window in the same tab
+ * ### Open the Oauth window in the same tab
+ *
+ * By default, the Oauth window will open in a popup window. You can change this behavior by setting the `auth.mode` option to `"redirect"`.
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  * const wallet = inAppWallet({
@@ -60,6 +153,8 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
  *  }
  * });
  * ```
+ *
+ * @returns The created in-app wallet.
  * @wallet
  */
 export declare function inAppWallet(createOptions?: CreateWalletArgs<"inApp">[1]): Wallet<"inApp">;

package/dist/types/wallets/in-app/web/in-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"in-app.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/in-app/web/in-app.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,wBAAgB,WAAW,CACzB,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,OAAO,CAAC,CAUjB"}
+{"version":3,"file":"in-app.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/in-app/web/in-app.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4JG;AACH,wBAAgB,WAAW,CACzB,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,OAAO,CAAC,CAUjB"}

package/dist/types/wallets/smart/smart-wallet.d.ts

@@ -1,23 +1,89 @@
 import type { Wallet } from "../interfaces/wallet.js";
 import type { CreateWalletArgs } from "../wallet-types.js";
 /**
- * Creates a smart wallet.
+ * Creates a ERC4337 smart wallet based on a admin account.
+ *
+ * Smart wallets are smart contract wallets that enable multiple benefits for users:
+ *
+ * - Sponsor gas fees for transactions
+ * - Multiple owners
+ * - Session keys
+ * - Batch transactions
+ * - Predictable addresses
+ * - Programmable features
+ *
+ * [Learn more about account abstraction](https://portal.thirdweb.com/connect/account-abstraction/how-it-works)
+ *
  * @param createOptions - The options for creating the wallet.
+ * Refer to [SmartWalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/SmartWalletCreationOptions) for more details.
  * @returns The created smart wallet.
  * @example
+ *
+ * ## Connect to a smart wallet
+ *
+ * To connect to a smart wallet, you need to provide an admin account as the `personalAccount` option.
+ *
+ * Any wallet can be used as an admin account, including an in-app wallets.
+ *
+ * The `sponsorGas` option is used to enable sponsored gas for transactions automatically.
+ *
  * ```ts
- * import { smartWallet } from "thirdweb/wallets";
+ * import { smartWalletm inAppWallet } from "thirdweb/wallets";
+ * import { sepolia } from "thirdweb/chains";
+ * import { sendTransaction } from "thirdweb";
  *
  * const wallet = smartWallet({
  *  chain: sepolia,
- *  gasless: true,
+ *  sponsorGas: true, // enable sponsored transactions
  * });
  *
- * const account = await wallet.connect({
+ * // any wallet can be used as an admin account
+ * // in this example we use an in-app wallet
+ * const adminWallet = inAppWallet();
+ * const personalAccount = await adminWallet.connect({
  *   client,
- *   personalAccount: account,
+ *   chain: sepolia,
+ *   strategy: "google",
+ * });
+ *
+ * const smartAccount = await wallet.connect({
+ *   client,
+ *   personalAccount, // pass the admin account
+ * });
+ *
+ * // sending sponsored transactions with the smartAccount
+ * await sendTransaction({
+ *   account: smartAccount,
+ *   transaction,
  * });
  * ```
+ *
+ * ## Configuring the smart wallet
+ *
+ * You can pass options to the `smartWallet` function to configure the smart wallet.
+ *
+ * ```ts
+ * import { smartWallet } from "thirdweb/wallets";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const wallet = smartWallet({
+ *  chain: sepolia,
+ *  sponsorGas: true, // enable sponsored transactions
+ *  factoryAddress: "0x...", // custom factory address
+ *  overrides: {
+ *    accountAddress: "0x...", // override account address
+ *    accountSalt: "0x...", // override account salt
+ *    entrypointAddress: "0x...", // override entrypoint address
+ *    erc20Paymaster: { ... }, // enable erc20 paymaster
+ *    bundlerUrl: "https://...", // override bundler url
+ *    paymaster: (userOp) => { ... }, // override paymaster
+ *    ...
+ *  }
+ * });
+ * ```
+ *
+ * Refer to [SmartWalletOptions](https://portal.thirdweb.com/references/typescript/v5/SmartWalletOptions) for more details.
+ *
  * @wallet
  */
 export declare function smartWallet(createOptions: CreateWalletArgs<"smart">[1]): Wallet<"smart">;

package/dist/types/wallets/smart/smart-wallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smart-wallet.d.ts","sourceRoot":"","sources":["../../../../src/wallets/smart/smart-wallet.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAW,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,oBAAoB,CAAC;AAG5B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CACzB,aAAa,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1C,MAAM,CAAC,OAAO,CAAC,CAwFjB"}
+{"version":3,"file":"smart-wallet.d.ts","sourceRoot":"","sources":["../../../../src/wallets/smart/smart-wallet.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAW,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,oBAAoB,CAAC;AAG5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,wBAAgB,WAAW,CACzB,aAAa,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1C,MAAM,CAAC,OAAO,CAAC,CAwFjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342",
+  "version": "5.42.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/adapters/wallet-adapter.ts

@@ -12,7 +12,18 @@ export type AdapterWalletOptions = {
 };
 
 /**
- * Creates a wallet from the given adapted account. Use this to convert a third party library wallet into a thirdweb wallet.
+ * Creates a wallet from the given account.
+ *
+ * You can use this to:
+ *
+ * - convert a third party library wallet (wagmi, viem, ethers) into a thirdweb wallet.
+ * - connect with a private key (for automated tests)
+ *
+ * Available wallet adatpers:
+ * - [Viem](https://portal.thirdweb.com/references/typescript/v5/viemAdapter)
+ * - [Ethers 6](https://portal.thirdweb.com/references/typescript/v5/ethers6Adapter)
+ * - [Ethers 5](https://portal.thirdweb.com/references/typescript/v5/ethers5Adapter)
+ *
  * @param options - The options for the adapter wallet.
  * @returns a wallet instance.
  *

package/src/exports/wallets/in-app.ts

@@ -10,6 +10,12 @@ export {
 } from "../../wallets/in-app/web/lib/auth/index.js";
 
 export { type GetAuthenticatedUserParams } from "../../wallets/in-app/core/authentication/type.js";
+export type {
+  InAppWalletCreationOptions,
+  InAppWalletAuth,
+  InAppWalletSocialAuth,
+  InAppWalletConnectionOptions,
+} from "../../wallets/in-app/core/wallet/types.js";
 
 export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";
 

package/src/exports/wallets.native.ts

@@ -42,6 +42,9 @@ export type {
   WalletCreationOptions,
   WalletConnectionOption,
   CreateWalletArgs,
+  InjectedConnectOptions,
+  DeepLinkSupportedWalletCreationOptions,
+  StandaloneWCConnectOptions,
 } from "../wallets/wallet-types.js";
 
 export type {
@@ -82,7 +85,10 @@ export type {
   InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
 } from "../wallets/in-app/core/wallet/types.js";
 
-export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
+export type {
+  CoinbaseWalletCreationOptions,
+  CoinbaseSDKWalletConnectionOptions,
+} from "../wallets/coinbase/coinbaseWebSDK.js";
 
 export type {
   WalletEmitter,
@@ -94,6 +100,7 @@ export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
 export { type WalletInfo } from "../wallets/wallet-info.js";
 
 export { createWalletAdapter } from "../adapters/wallet-adapter.js";
+export type { AdapterWalletOptions } from "../adapters/wallet-adapter.js";
 
 // wallet connect
 export {

package/src/exports/wallets.ts

@@ -12,6 +12,11 @@ export {
   inAppWallet as embeddedWallet,
 } from "../wallets/in-app/web/in-app.js";
 export { ecosystemWallet } from "../wallets/in-app/web/ecosystem.js";
+export type {
+  EcosystemWalletCreationOptions,
+  EcosystemWalletConnectionOptions,
+  EcosystemWalletAutoConnectOptions,
+} from "../wallets/ecosystem/types.js";
 export { smartWallet } from "../wallets/smart/smart-wallet.js";
 
 export type { Wallet, Account } from "../wallets/interfaces/wallet.js";
@@ -49,6 +54,9 @@ export type {
   WalletCreationOptions,
   WalletConnectionOption,
   CreateWalletArgs,
+  InjectedConnectOptions,
+  DeepLinkSupportedWalletCreationOptions,
+  StandaloneWCConnectOptions,
 } from "../wallets/wallet-types.js";
 
 export type {
@@ -89,7 +97,10 @@ export type {
   InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
 } from "../wallets/in-app/core/wallet/types.js";
 
-export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
+export type {
+  CoinbaseWalletCreationOptions,
+  CoinbaseSDKWalletConnectionOptions,
+} from "../wallets/coinbase/coinbaseWebSDK.js";
 
 export type {
   WalletEmitter,
@@ -101,6 +112,7 @@ export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
 export { type WalletInfo } from "../wallets/wallet-info.js";
 
 export { createWalletAdapter } from "../adapters/wallet-adapter.js";
+export type { AdapterWalletOptions } from "../adapters/wallet-adapter.js";
 
 // wallet connect
 export {

package/src/react/web/ui/AutoConnect/AutoConnect.tsx

@@ -9,6 +9,11 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  * Note: If you are using `ConnectButton` or `ConnectEmbed` components, You don't need to use this component as it is already included.
  *
  * This is useful if you are manually connecting the wallets using the [`useConnect`](https://portal.thirdweb.com/references/typescript/v5/useConnect) hook and want to auto connect the last connected wallets on page reload or revisit.
+ *
+ * You can also use the [`useAutoConnect`](https://portal.thirdweb.com/references/typescript/v5/useAutoConnect) hook to achieve the same result.
+ *
+ * To check if the wallet in in the process of auto connecting, you can use the [`useIsAutoConnecting`](https://portal.thirdweb.com/references/typescript/v5/useIsAutoConnecting) hook.
+ *
  * @param props - Object of type `AutoConnectProps`. Refer to [`AutoConnectProps`](https://portal.thirdweb.com/references/typescript/v5/AutoConnectProps)
  * @example
  * ```tsx

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -33,18 +33,212 @@ import { SignatureScreen } from "./screens/SignatureScreen.js";
 const TW_CONNECT_WALLET = "tw-connect-wallet";
 
 /**
- * A component that allows the user to connect their wallet.
- * It renders a button which when clicked opens a modal to allow users to connect to wallets specified in `wallets` prop.
+ * A fully featured wallet connection component that allows to:
+ *
+ * - Connect to 350+ external wallets
+ * - Connect with email, phone, passkey or socials
+ * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
+ * - Sign in with ethereum (Auth)
+ *
+ * Once connected, the component allows to:
+ *
+ * - Reolve ENS names and avatars
+ * - Manage multipple connected wallets
+ * - Send and receive native tokens and ERC20 tokens
+ * - View ERC20 tokens and NFTs
+ * - Onramp, bridge and swap tokens
+ * - Switch chains
+ * - Connect to another app with WalletConnect
+ *
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectButton } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectButton
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps)
+ *
+ * ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    wallets={[
+ *      createWallet("io.metamask"),
+ *      createWallet("com.coinbase.wallet"),
+ *      createWallet("me.rainbow"),
+ *    ]}
+ * />
+ * ```
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
+ * ### Customizing the default chain to connect to
+ *
+ * ```tsx
+ * import { base } from "thirdweb/chains";
+ *
+ * <ConnectButton
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectButton
+ * client={client}
+ * auth={{
+ *   isLoggedIn: async (address) => {
+ *     console.log("checking if logged in!", { address });
+ *     return await isLoggedIn();
+ *   },
+ *   doLogin: async (params) => {
+ *     console.log("logging in!");
+ *     await login(params);
+ *   },
+ *   getLoginPayload: async ({ address }) =>
+ *     generatePayload({ address }),
+ *   doLogout: async () => {
+ *     console.log("logging out!");
+ *     await logout();
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing the theme
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme={lightTheme({
+ *      colors: {
+ *        modalBg: "red",
+ *      },
+ *    })}
+ * />
+ * ```
+ *
+ * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
+ *
+ * ### Changing the display language
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    locale="ja_JP"
+ * />
+ * ```
+ *
+ * [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
+ *
+ * ### Customizing the connect button UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectButton={{
+ *      label: "Sign in to MyApp",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing the modal UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectModal={{
+ *      title: "Sign in to MyApp",
+ *      titleIcon: https://example.com/logo.png,
+ *      size: "compact",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing details button UI (after connecting)
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    detailsButton={{
+ *      displayBalanceToken: {
+ *        [sepolia.id]: "0x...", // token address to display balance for
+ *        [ethereum.id]: "0x...", // token address to display balance for
+ *      },
+ *    }}
+ * />
+ * ```
+ *
+ * [View all available auth helper functions](https://portal.thirdweb.com/references/typescript/v5/createAuth)
+ *
+ * ### Customizing the Auth sign in button (after connecting, but before authenticating)
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   auth={{ ... }}
+ *   signInButton: {
+ *     label: "Authenticate with MyApp",
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing supported Tokens and NFTs
+ *
+ * These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   supportedTokens={{
+ *     [ethereum.id]: [
+ *       {
+ *         address: "0x...",
+ *         name: "MyToken",
+ *         symbol: "MT",
+ *         icon: "https://example.com/icon.png",
+ *       },
+ *     ],
+ *   }}
+ *   supportedNFTs={{
+ *     [ethereum.id]: [
+ *       "0x...", // nft contract address
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *
  * Refer to [ConnectButtonProps](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps) to see the available props.
+ *
+ * @returns A JSX element that renders the <ConnectButton> component.
+ *
  * @component
  */
 export function ConnectButton(props: ConnectButtonProps) {