thirdweb 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342 → 5.42.0

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -40,21 +40,127 @@ import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
 /**
- * A component that allows the user to connect their wallet.
+ * An inline wallet connection component that allows to:
  *
- * it renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton) component's modal - but directly on the page instead of being in a modal.
+ * - 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)
+ *
+ * It renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v5/ConnectButton) component's modal - but directly inline in the page instead of being in a modal.
+ *
+ * Once connected, the component does not render any UI. It only renders UI if wallet is not connected.
  *
- * It only renders UI if wallet is not connected
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectEmbed } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectEmbed
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps)
+ *
+ *  ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    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";
+ *
+ * <ConnectEmbed
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectEmbed
+ * 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
+ * <ConnectEmbed
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    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)
+ *
  * @param props -
  * The props for the `ConnectEmbed` component.
  *
  * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
+ *
+ * @returns A JSX element that renders the <ConnectEmbed> component.
  * @component
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {

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/version.ts

@@ -1 +1 @@
-export const version = "5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342";
+export const version = "5.42.0";

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(

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

@@ -4,10 +4,27 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
 import { createInAppWallet } from "../core/wallet/in-app-core.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";
  *
@@ -20,18 +37,90 @@ import { createInAppWallet } from "../core/wallet/in-app-core.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({
@@ -46,7 +135,8 @@ import { createInAppWallet } from "../core/wallet/in-app-core.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({
@@ -54,7 +144,10 @@ import { createInAppWallet } from "../core/wallet/in-app-core.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({
@@ -63,6 +156,8 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  *  }
  * });
  * ```
+ *
+ * @returns The created in-app wallet.
  * @wallet
  */
 export function inAppWallet(

package/src/wallets/smart/smart-wallet.ts

@@ -11,23 +11,89 @@ import type {
 import { DEFAULT_ACCOUNT_FACTORY } from "./lib/constants.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 function smartWallet(