Version Packages (#2036 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Update typedoc setup, JSDoc improvements (#1842 )
2023-12-05 21:14:32 -08:00 · 2023-12-05 19:00:11 +00:00 · 2023-12-05 15:22:22 +00:00 · 2023-12-05 15:17:24 +00:00 · 2023-12-05 06:08:30 +00:00 · 2023-12-05 05:33:40 +00:00
202 changed files with 5478 additions and 615 deletions
@@ -14,6 +14,7 @@
    "test": "turbo run test --filter=./packages/*",
    "e2e": "turbo run e2e",
    "build": "turbo run build --filter=./packages/*",
+    "typedoc": "turbo run typedoc",
    "build:release": "turbo run build --force --filter=./packages/*",
    "dev": "turbo run dev --no-cache --parallel --continue",
    "fix:repo": "manypkg fix",
@@ -1,5 +1,12 @@
 # @thirdweb-dev/auth

+## 4.1.14
+
+### Patch Changes
+
+- Updated dependencies [[`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56), [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82), [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5), [`7bb054e4`](https://github.com/thirdweb-dev/js/commit/7bb054e45c75450c8f465809d23eb66371f6ef8e)]:
+  - @thirdweb-dev/wallets@2.1.11
+
 ## 4.1.13

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/auth",
-  "version": "4.1.13",
+  "version": "4.1.14",
  "main": "dist/thirdweb-dev-auth.cjs.js",
  "module": "dist/thirdweb-dev-auth.esm.js",
  "browser": {
@@ -1,5 +1,15 @@
 # thirdweb

+## 0.13.22
+
+### Patch Changes
+
+- Updated dependencies [[`cfe81b44`](https://github.com/thirdweb-dev/js/commit/cfe81b443205d84e58128b8d7d5f2dc940b12875), [`72c0bb10`](https://github.com/thirdweb-dev/js/commit/72c0bb10d6d765d1679b2b22ac63d85db101b5c4), [`ca618ea0`](https://github.com/thirdweb-dev/js/commit/ca618ea0c9ac5dc4f65cbfbfd39360e4150c72c7), [`aefc4cda`](https://github.com/thirdweb-dev/js/commit/aefc4cda4c4fad81411d3a9485931e28100b5718), [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56), [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82), [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5), [`7bb054e4`](https://github.com/thirdweb-dev/js/commit/7bb054e45c75450c8f465809d23eb66371f6ef8e), [`d20e7898`](https://github.com/thirdweb-dev/js/commit/d20e7898562a3914841522f2e09f88ca37dfdd4b)]:
+  - @thirdweb-dev/sdk@4.0.19
+  - @thirdweb-dev/storage@2.0.7
+  - @thirdweb-dev/wallets@2.1.11
+  - @thirdweb-dev/auth@4.1.14
+
 ## 0.13.21

 ### Patch Changes
@@ -1,7 +1,7 @@
 {
  "name": "thirdweb",
  "main": "dist/cli/index.js",
-  "version": "0.13.21",
+  "version": "0.13.22",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/cli",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -39,7 +39,14 @@
    "@types/treeify": "^1.0.2",
    "benchmark": "^2.1.4",
    "eslint-config-thirdweb": "workspace:*",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "circomlibjs": "^0.1.7",
+    "crypto": "0.0.3",
+    "ethereum-cryptography": "^1.0.3",
+    "ethereumjs-util": "^7.0.9",
+    "keccak256": "^1.0.6",
+    "sha1": "^1.1.1",
+    "tape": "^4.9.2"
  },
  "scripts": {
    "format": "prettier --write 'src/**/*'",
@@ -48,7 +55,7 @@
    "clean": "rm -rf dist/",
    "build": "tsc && preconstruct build",
    "push": "yalc push",
-    "test": "bun test",
+    "test": "bun test && node test/MerkleTree.js",
    "benchmark:aes-encrypt": "bun benchmark/aes-encrypt.ts",
    "benchmark:aes-decrypt": "bun benchmark/aes-decrypt.ts",
    "benchmark:sha256": "bun benchmark/sha256.ts",
@@ -1,5 +1,25 @@
 # @thirdweb-dev/react-core

+## 4.1.12
+
+### Patch Changes
+
+- [#2043](https://github.com/thirdweb-dev/js/pull/2043) [`34546c24`](https://github.com/thirdweb-dev/js/commit/34546c24c74f4e9e1f5e94567ebe1017ad63aea5) Thanks [@MananTank](https://github.com/MananTank)! - when user clicks on "Switch to personal wallet" when they are connected to smart wallet and reloads the page, auto-connect to smart wallet
+
+- [#1842](https://github.com/thirdweb-dev/js/pull/1842) [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56) Thanks [@MananTank](https://github.com/MananTank)! - JSDoc improvements
+
+- [#1938](https://github.com/thirdweb-dev/js/pull/1938) [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Add OneKey wallet
+
+- [#2042](https://github.com/thirdweb-dev/js/pull/2042) [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5) Thanks [@MananTank](https://github.com/MananTank)! - Improved JSDoc comments and Type exports
+
+- [#2039](https://github.com/thirdweb-dev/js/pull/2039) [`cd87be4a`](https://github.com/thirdweb-dev/js/commit/cd87be4a24a9a3a552fbc4f33da6fcb08b7da88b) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Remove barrel files
+
+- Updated dependencies [[`cfe81b44`](https://github.com/thirdweb-dev/js/commit/cfe81b443205d84e58128b8d7d5f2dc940b12875), [`72c0bb10`](https://github.com/thirdweb-dev/js/commit/72c0bb10d6d765d1679b2b22ac63d85db101b5c4), [`ca618ea0`](https://github.com/thirdweb-dev/js/commit/ca618ea0c9ac5dc4f65cbfbfd39360e4150c72c7), [`aefc4cda`](https://github.com/thirdweb-dev/js/commit/aefc4cda4c4fad81411d3a9485931e28100b5718), [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56), [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82), [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5), [`7bb054e4`](https://github.com/thirdweb-dev/js/commit/7bb054e45c75450c8f465809d23eb66371f6ef8e), [`d20e7898`](https://github.com/thirdweb-dev/js/commit/d20e7898562a3914841522f2e09f88ca37dfdd4b)]:
+  - @thirdweb-dev/sdk@4.0.19
+  - @thirdweb-dev/storage@2.0.7
+  - @thirdweb-dev/wallets@2.1.11
+  - @thirdweb-dev/auth@4.1.14
+
 ## 4.1.11

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react-core",
-  "version": "4.1.11",
+  "version": "4.1.12",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -52,7 +52,8 @@
    "generate-docs:evm": "api-extractor run --local --config ./config/api-extractor-evm.json && api-documenter markdown -i ./temp -o ./docs/evm && rm -rf ./temp-evm && mv ./temp ./temp-evm",
    "generate-snippets": "node ./scripts/generate-snippets-evm.mjs && node ./scripts/generate-feature-snippets-evm.mjs",
    "build": "tsc && preconstruct build",
-    "push": "yalc push"
+    "push": "yalc push",
+    "typedoc": "node scripts/typedoc.mjs"
  },
  "sideEffects:": false,
  "devDependencies": {
@@ -83,7 +84,8 @@
    "ethers": "^5.7.2",
    "prettier": "^3.0.0",
    "react": "^18.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "typedoc-gen": "workspace:*"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.33.0",
@@ -0,0 +1,14 @@
+// @ts-check
+/* eslint-disable better-tree-shaking/no-top-level-side-effects */
+
+import { typedoc } from "typedoc-gen";
+
+typedoc({
+  entryPoints: ["src/index.ts"],
+  exclude: [
+    "**/packages/sdk/**",
+    "**/packages/wallets/**",
+    "**/packages/chains/**",
+  ],
+  output: "both", // TODO: change this to 'json' when old portal is fully migrated to new portal
+});
@@ -12,6 +12,7 @@ import type {
  MagicLink,
  MetaMaskWallet,
  OKXWallet,
+  OneKeyWallet,
  PaperWallet,
  PhantomWallet,
  RabbyWallet,
@@ -47,6 +48,7 @@ type WalletIdToWalletTypeMap = {
  phantom: PhantomWallet;
  walletConnectV1: WalletConnect;
  okx: OKXWallet;
+  oneKey: OneKeyWallet;
  cryptoDefiWallet: CryptoDefiWallet;
  rabby: RabbyWallet;
 };
@@ -3,6 +3,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useMemo } from "react";

 export interface QueryClientProviderProps {
+  /**
+   * If you are using React Query and have your own `QueryClient`, you can pass it as the queryClient prop to use that instead of the SDK's default client.
+   */
  queryClient?: QueryClient;
 }

@@ -56,6 +56,9 @@ export interface ThirdwebProviderCoreProps<TChains extends Chain[]>

  theme?: "light" | "dark";

+  /**
+   * @internal
+   */
  createWalletStorage?: CreateAsyncStorage;

  /**
@@ -68,13 +71,19 @@ export interface ThirdwebProviderCoreProps<TChains extends Chain[]>
   *
   * If wallet fails to connect in this time, it will stop trying to connect and user will have to manually connect
   *
-   * @defaultValue 15000
+   * By default, it is set to `15000` milliseconds (15 seconds)
   */
  autoConnectTimeout?: number;

+  /**
+   * @internal
+   */
  signerWallet?: WalletConfig<SignerWallet>;
 }

+/**
+ * @internal
+ */
 export const ThirdwebProviderCore = <TChains extends Chain[]>({
  createWalletStorage = createAsyncLocalStorage,
  ...props
@@ -303,12 +303,14 @@ export function ThirdwebWalletProvider(

  // Auto Connect
  useEffect(() => {
-    // do not auto connect if signerWallet is given
-    if (props.signerWallet) {
+    if (autoConnectTriggered.current) {
      return;
    }

-    if (autoConnectTriggered.current) {
+    autoConnectTriggered.current = true;
+
+    // do not auto connect if signerWallet is given
+    if (props.signerWallet) {
      return;
    }

@@ -329,8 +331,6 @@ export function ThirdwebWalletProvider(
      return;
    }

-    autoConnectTriggered.current = true;
-
    async function autoconnect() {
      const walletInfo = await getLastConnectedWalletInfo();

@@ -339,7 +339,7 @@ export function ThirdwebWalletProvider(
        return;
      }

-      let walletObj = props.supportedWallets.find(
+      const walletObj = props.supportedWallets.find(
        (W) => W.id === walletInfo.walletId,
      );

@@ -351,23 +351,15 @@ export function ThirdwebWalletProvider(

      let _personalWalletInfo = walletInfo.connectParams?.personalWallet;

-      // when connecting to magicLink with social login, it redirects to other page
-      // before redirecting, we save the walletInfo to local storage so that we can auto connect after redirect back to current page
-      // when using smartWallet + magicLink combination - the walletInfo will only contain info about magicLink and not smartWallet because it was never connected
-      // so if smartWallet + magicLink combination is used, we need to connect magicLink first and then connect smartWallet
-      if (
-        walletInfo.walletId === walletIds.magicLink &&
-        walletInfo.connectParams &&
-        "oauthProvider" in walletInfo.connectParams
-      ) {
-        // if the wallet requires a personal wallet (like smartWallet), but the saved data does not have it
-        if (walletObj.personalWallets && !_personalWalletInfo) {
-          // fix the connectParams by adding the personal wallet info
-          _personalWalletInfo = {
-            walletId: walletInfo.walletId,
-            connectParams: walletInfo.connectParams,
-          };
-        }
+      // if the wallet requires a personal wallet (like smartWallet), but the saved data does not have it
+      // this can happen when user clicks on "switch to personal wallet" and reloads the page
+      // OR when user clicks on magic link social login
+      if (walletObj.personalWallets && !_personalWalletInfo) {
+        // fix the connectParams by adding the personal wallet info
+        _personalWalletInfo = {
+          walletId: walletInfo.walletId,
+          connectParams: walletInfo.connectParams,
+        };
      }

      const personalWalletInfo = _personalWalletInfo;
@@ -410,19 +402,6 @@ export function ThirdwebWalletProvider(
          setConnectionStatus("disconnected");
          return;
        }
-      } else {
-        // if walletObj requires a personal wallet, but the saved data does not have it
-        // connect to personal wallet only ( this happens when user switches to personal wallet and reloads the page )
-        if (walletObj.personalWallets) {
-          // connect the personal wallet instead
-          walletObj = walletObj.personalWallets.find(
-            (w) => w.id === walletInfo.walletId,
-          );
-          if (!walletObj) {
-            setConnectionStatus("disconnected");
-            return;
-          }
-        }
      }

      // create a wallet instance and auto connect it
@@ -18,6 +18,9 @@ export function neverPersist<TKey extends QueryKey>(key: TKey) {
  return [...key, NEVER_PERSIST_QUERY_POSTFIX] as const;
 }

+/**
+ * @internal
+ */
 export function shouldNeverPersistQuery<TKey extends QueryKey>(
  key: TKey,
 ): boolean {
@@ -2,7 +2,6 @@ import invariant from "tiny-invariant";

 /**
 * Makes a parameter required to be passed, but still allows it to be null or undefined.
- *
 * @internal
 */
 export type RequiredParam<T> = T | null | undefined;
@@ -43,13 +43,15 @@ export type WalletConfig<I extends WalletInstance = WalletInstance> = {

  /**
   * If true, this wallet will be tagged as "recommended" in ConnectWallet Modal and will be shown at the top of the list
-   * @defaultValue false
+   *
+   * By default is set to `false`
   */
  recommended?: boolean;

  /**
   * If the wallet can sign transactions without user interaction, set this to true.
-   * @defaultValue false
+   *
+   * By default is set to `false`
   */
  isHeadless?: boolean;
 };
@@ -5,6 +5,9 @@ export interface IPFSResolverOptions {
  gatewayUrl: string;
 }

+/**
+ * @internal
+ */
 export async function resolveMimeType(url?: string) {
  if (!url) {
    return undefined;
@@ -7,7 +7,7 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { useWallet } from "../../core/hooks/wallet-hooks";
 import { WalletData } from "@thirdweb-dev/wallets";
-import { useLogout } from "../hooks/auth";
+import { useLogout } from "../hooks/auth/useLogout";
 import { useSwitchAccount } from "../hooks/auth/useSwitchAccount";

 /**
@@ -31,6 +31,9 @@ export const ThirdwebConnectedWalletContext = /* @__PURE__ */ createContext<
  ThirdwebConnectedWalletContext | undefined
 >(undefined);

+/**
+ * @internal
+ */
 export const ThirdwebConnectedWalletProvider: React.FC<
  PropsWithChildren<{ signer?: Signer }>
 > = ({ signer, children }) => {
@@ -73,6 +73,9 @@ export function useContractType(
  );
 }

+/**
+ * @internal
+ */
 export const contractType = {
  cacheKey: (
    contractAddress: RequiredParam<ContractAddress>,
@@ -121,6 +124,9 @@ export function useCompilerMetadata(
  );
 }

+/**
+ * @internal
+ */
 export const compilerMetadata = {
  cacheKey: (
    contractAddress: RequiredParam<ContractAddress>,
@@ -3,12 +3,6 @@ import { useWallet } from "../../../core/hooks/wallet-hooks";
 import { useThirdwebAuthContext } from "../../contexts/thirdweb-auth";
 import { useMemo } from "react";

-export { useLogin } from "./useLogin";
-export { useLogout } from "./useLogout";
-export type { UserWithData } from "./useUser";
-export { useUser } from "./useUser";
-export { useSwitchAccount } from "./useSwitchAccount";
-
 export function useAuth() {
  const wallet = useWallet();
  const authConfig = useThirdwebAuthContext();
@@ -1,12 +0,0 @@
-export { useEditionDrop } from "./useEditionDrop";
-export { useEdition } from "./useEdition";
-export { useNFTDrop } from "./useNFTDrop";
-export { useMarketplace } from "./useMarketplace";
-export { useNFTCollection } from "./useNFTCollection";
-export { usePack } from "./usePack";
-export { useToken } from "./useToken";
-export { useTokenDrop } from "./useTokenDrop";
-export { useVote } from "./useVote";
-export { useSplit } from "./useSplit";
-export { useMultiwrap } from "./useMultiwrap";
-export { useSignatureDrop } from "./useSignatureDrop";
@@ -1,7 +1,5 @@
 import { useSDK } from "../useSDK";

-export { useStorageUpload } from "./useStorageUpload";
-
 /**
 * Get the configured `ThirdwebStorage` instance
 * @returns The `storageInterface` configured on the `ThirdwebProvider`
@@ -6,6 +6,7 @@ import { useSupportedChains } from "./useSupportedChains";
 import { useWalletContext } from "../../core/providers/thirdweb-wallet-provider";

 /**
+ *
 * @internal
 */
 export function useENS() {
@@ -219,32 +219,30 @@ export {
 // thirdweb hooks (work as long as at least `<ThirdwebSdkProvider>` is used)

 // auth hooks
-export {
-  useLogin,
-  useLogout,
-  useUser,
-  useAuth,
-  useSwitchAccount,
-} from "./hooks/auth";
-export type { UserWithData } from "./hooks/auth";
+export { useAuth } from "./hooks/auth/useAuth";
+export { useLogin } from "./hooks/auth/useLogin";
+export { useLogout } from "./hooks/auth/useLogout";
+export { useUser } from "./hooks/auth/useUser";
+export { useSwitchAccount } from "./hooks/auth/useSwitchAccount";
+
+export type { UserWithData } from "./hooks/auth/useUser";

 // contract hooks
-export {
-  useEditionDrop,
-  useEdition,
-  useNFTDrop,
-  useMarketplace,
-  useNFTCollection,
-  usePack,
-  useToken,
-  useTokenDrop,
-  useVote,
-  useSplit,
-  useMultiwrap,
-  useSignatureDrop,
-} from "./hooks/contracts";
+export { useEditionDrop } from "./hooks/contracts/useEditionDrop";
+export { useEdition } from "./hooks/contracts/useEdition";
+export { useNFTDrop } from "./hooks/contracts/useNFTDrop";
+export { useMarketplace } from "./hooks/contracts/useMarketplace";
+export { useNFTCollection } from "./hooks/contracts/useNFTCollection";
+export { usePack } from "./hooks/contracts/usePack";
+export { useToken } from "./hooks/contracts/useToken";
+export { useTokenDrop } from "./hooks/contracts/useTokenDrop";
+export { useVote } from "./hooks/contracts/useVote";
+export { useSplit } from "./hooks/contracts/useSplit";
+export { useMultiwrap } from "./hooks/contracts/useMultiwrap";
+export { useSignatureDrop } from "./hooks/contracts/useSignatureDrop";

-export { useStorageUpload, useStorage } from "./hooks/storage";
+export { useStorage } from "./hooks/storage/useStorage";
+export { useStorageUpload } from "./hooks/storage/useStorageUpload";
 export { useNetworkMismatch } from "./hooks/useNetworkMismatch";
 export { useReadonlySDK } from "./hooks/useReadonlySDK";
 export { useSigner } from "./hooks/useSigner";
@@ -265,6 +265,9 @@ export type ClaimTokenParams = {

 // Helpers

+/**
+ * @internal
+ */
 export function getErcs(contract: RequiredParam<ValidContractInstance | null>) {
  return {
    erc1155: getErc1155(contract),
@@ -273,6 +276,9 @@ export function getErcs(contract: RequiredParam<ValidContractInstance | null>) {
  };
 }

+/**
+ * @internal
+ */
 export function getErc1155(
  contract: RequiredParam<ValidContractInstance | null>,
 ): Erc1155 | undefined {
@@ -289,6 +295,9 @@ export function getErc1155(
  return undefined;
 }

+/**
+ * @internal
+ */
 export function getErc721(
  contract: RequiredParam<ValidContractInstance | null>,
 ): Erc721 | undefined {
@@ -305,6 +314,9 @@ export function getErc721(
  return undefined;
 }

+/**
+ * @internal
+ */
 export function getErc20(
  contract: RequiredParam<ValidContractInstance | null>,
 ): Erc20 | undefined {
@@ -1,5 +1,8 @@
 import { utils } from "ethers";

+/**
+ * @internal
+ */
 export function shortenString(str: string, extraShort: boolean = true) {
  return `${str.substring(0, extraShort ? 4 : 6)}...${str.substring(
    str.length - (extraShort ? 3 : 4),
@@ -36,6 +39,9 @@ export function shortenAddress(
  }
 }

+/**
+ * @internal
+ */
 export function shortenIfAddress(
  address?: string | null | false,
  extraShort: boolean = true,
@@ -46,10 +52,16 @@ export function shortenIfAddress(
  return address || "";
 }

+/**
+ * @internal
+ */
 export function isEnsName(name: string): boolean {
  return name?.endsWith(".eth");
 }

+/**
+ * @internal
+ */
 export function isPossibleEVMAddress(address?: string, ignoreEns?: boolean) {
  if (!address) {
    return false;
@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-native-compat

+## 0.4.12
+
 ## 0.4.11

 ## 0.4.10
@@ -1,7 +1,7 @@
 {
  "name": "@thirdweb-dev/react-native-compat",
  "description": "Shims for Thirdweb in React Native Projects",
-  "version": "0.4.11",
+  "version": "0.4.12",
  "author": "thirdweb eng <[email protected]>",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
  "license": "Apache-2.0",
@@ -1,5 +1,19 @@
 # @thirdweb-dev/react-native

+## 0.4.12
+
+### Patch Changes
+
+- [#1842](https://github.com/thirdweb-dev/js/pull/1842) [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56) Thanks [@MananTank](https://github.com/MananTank)! - JSDoc improvements
+
+- [#2042](https://github.com/thirdweb-dev/js/pull/2042) [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5) Thanks [@MananTank](https://github.com/MananTank)! - Improved JSDoc comments and Type exports
+
+- Updated dependencies [[`cfe81b44`](https://github.com/thirdweb-dev/js/commit/cfe81b443205d84e58128b8d7d5f2dc940b12875), [`34546c24`](https://github.com/thirdweb-dev/js/commit/34546c24c74f4e9e1f5e94567ebe1017ad63aea5), [`72c0bb10`](https://github.com/thirdweb-dev/js/commit/72c0bb10d6d765d1679b2b22ac63d85db101b5c4), [`ca618ea0`](https://github.com/thirdweb-dev/js/commit/ca618ea0c9ac5dc4f65cbfbfd39360e4150c72c7), [`aefc4cda`](https://github.com/thirdweb-dev/js/commit/aefc4cda4c4fad81411d3a9485931e28100b5718), [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56), [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82), [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5), [`7bb054e4`](https://github.com/thirdweb-dev/js/commit/7bb054e45c75450c8f465809d23eb66371f6ef8e), [`cd87be4a`](https://github.com/thirdweb-dev/js/commit/cd87be4a24a9a3a552fbc4f33da6fcb08b7da88b), [`d20e7898`](https://github.com/thirdweb-dev/js/commit/d20e7898562a3914841522f2e09f88ca37dfdd4b)]:
+  - @thirdweb-dev/sdk@4.0.19
+  - @thirdweb-dev/react-core@4.1.12
+  - @thirdweb-dev/storage@2.0.7
+  - @thirdweb-dev/wallets@2.1.11
+
 ## 0.4.11

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react-native",
-  "version": "0.4.11",
+  "version": "0.4.12",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -17,7 +17,7 @@
    "clean": "rm -rf dist/",
    "build": "tsc",
    "push": "yalc push",
-    "typedoc": "rimraf typedoc && node ./scripts/typedoc.js"
+    "typedoc": "node scripts/typedoc.mjs"
  },
  "keywords": [
    "react-native",
@@ -83,7 +83,7 @@
    "react-native-safe-area-context": "4.7.4",
    "react-native-webview": "12.1.0",
    "rimraf": "^3.0.2",
-    "typedoc": "^0.25.2",
+    "typedoc-gen": "workspace:*",
    "typescript": "^5.1.6"
  },
  "optionalDependencies": {
@@ -1,38 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const TypeDoc = require("typedoc");
-
-async function main() {
-  // Application.bootstrap also exists, which will not load plugins
-  // Also accepts an array of option readers if you want to disable
-  // TypeDoc's tsconfig.json/package.json/typedoc.json option readers
-  const app = await TypeDoc.Application.bootstrapWithPlugins({
-    entryPoints: ["src/index.ts"],
-    excludeInternal: true,
-    externalPattern: [
-      "**/node_modules/**",
-      "**/packages/sdk/**",
-      "**/packages/wallets/**",
-      "**/packages/chains/**",
-    ],
-    exclude: [
-      "**/node_modules/**",
-      "**/packages/sdk/**",
-      "**/packages/wallets/**",
-      "**/packages/chains/**",
-    ],
-  });
-
-  const project = await app.convert();
-
-  if (project) {
-    // Project may not have converted correctly
-    const outputDir = "typedoc/";
-
-    // Rendered docs
-    await app.generateDocs(project, outputDir);
-    // Alternatively generate JSON output
-    await app.generateJson(project, outputDir + "/documentation.json");
-  }
-}
-
-main();
@@ -0,0 +1,13 @@
+// @ts-check
+import { typedoc } from "typedoc-gen";
+
+typedoc({
+  entryPoints: ["src/index.ts"],
+  exclude: [
+    "**/packages/sdk/**",
+    "**/packages/wallets/**",
+    "**/packages/react-core/**",
+    "**/packages/chains/**",
+  ],
+  output: "both", // TODO: change this to 'json' when old portal is fully migrated to new portal
+});
@@ -33,7 +33,9 @@ export class AsyncLocalStorage implements IAsyncStorage {
    );
  }
 }
-
+/**
+ * @internal
+ */
 export class LocalStorage implements SyncStorage {
  name: string;
  asyncStorage: MMKV;
@@ -71,6 +73,8 @@ export class noopStorage implements IAsyncStorage {
 }

 /**
+ * @internal
+ *
 * Returns a new instance of AsyncLocalStorage
 *
 * @param name - Name to namespace the storage with
@@ -81,6 +85,8 @@ export function createAsyncLocalStorage(name: string) {
 }

 /**
+ * @internal
+ *
 * Returns a new instance of LocalStorage
 *
 * @param name - Name to namespace the storage with
@@ -29,6 +29,7 @@ export class SecureStorage implements ISecureStorage {
 }

 /**
+ * @internal
 * Returns a new instance of SecureStorage implemented by Expo SecureStore
 *
 * @param name - Name to namespace the storage with
@@ -36,7 +36,7 @@ export type ConnectWalletProps = {
  /**
   * Hide option to request testnet funds for testnets in dropdown
   *
-   * @defaultValue false
+   * The default is `false`
   */
  hideTestnetFaucet?: boolean;

@@ -47,7 +47,7 @@ export type ConnectWalletProps = {
   * Please, note that if you support multiple networks in your app this prop should
   * be set to `false` to allow users to switch between networks.
   *
-   * @defaultValue false
+   * The default is `false`
   */
  switchToActiveChain?: boolean;

@@ -73,7 +73,7 @@ export type ConnectWalletProps = {
  /**
   * Hide the "switch to Personal wallet" option in the wallet modal which is shown when wallet is connected to a Smart Wallet
   *
-   * @defaultValue false
+   * The default is `false`
   */
  hideSwitchToPersonalWallet?: boolean;
 } & ConnectWalletButtonProps;
@@ -39,7 +39,7 @@ export type ConnectWalletDetailsProps = {
  /**
   * Hide the "switch to Personal wallet" option in the dropdown which is shown when wallet is connected to a Smart Wallet
   *
-   * @defaultValue false
+   * The default is `false`
   */
  hideSwitchToPersonalWallet?: boolean;
 };
@@ -13,12 +13,14 @@ export type ConnectWalletButtonProps = {
  theme?: ThemeProviderProps["theme"];
  /**
   * Set a custom title for the button
-   * @defaultValue "Connect Wallet"
+   *
+   * The default is `"Connect Wallet"`
   */
  buttonTitle?: string;
  /**
   * Set a custom title for the Connect Wallet modal
-   * @defaultValue "Choose your wallet"
+   *
+   * The default is `"Choose your wallet"`
   */
  modalTitle?: string;
  /**
@@ -20,7 +20,7 @@ import { ActivityIndicator, StyleSheet } from "react-native";
 import invariant from "tiny-invariant";
 import { useGlobalTheme, useUIContext } from "../providers/ui-context-provider";

-type ActionFn = (contract: SmartContract) => Promise<any>;
+export type ActionFn = (contract: SmartContract) => Promise<any>;

 interface Web3ButtonProps<TActionFn extends ActionFn> {
  contractAddress: `0x${string}` | `${string}.eth` | string;
@@ -1,5 +1,8 @@
 import { StyleSheet, View } from "react-native";

+/**
+ * @internal
+ */
 export const ActiveDot = ({
  width = 28,
  height = 28,
@@ -2,6 +2,9 @@ import { Theme } from "../../styles/theme";
 import { createBox } from "@shopify/restyle";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";

+/**
+ * @internal
+ */
 const BaseButton = createBox<Theme, TouchableOpacityProps>(TouchableOpacity);

 export default BaseButton;
@@ -1,6 +1,9 @@
 import { Theme } from "../../styles/theme";
 import { createBox } from "@shopify/restyle";

+/**
+ * @internal
+ */
 const Box = createBox<Theme>();

 export default Box;
@@ -9,6 +9,9 @@ export type ChainIconProps = {
  size: number;
 };

+/**
+ * @internal
+ */
 export const ChainIcon = ({ chainIconUrl, size }: ChainIconProps) => {
  const src = chainIconUrl || defaultChainIcon;

@@ -11,6 +11,9 @@ type IconTextProps = {
  onPress: () => void;
 } & React.ComponentProps<typeof BaseButton>;

+/**
+ * @internal
+ */
 export const IconTextButton = ({
  icon,
  onPress,
@@ -5,6 +5,9 @@ import { SvgUri, SvgXml } from "react-native-svg";
 import Box from "./Box";
 import { appBundleId } from "../../utils/version";

+/**
+ * @internal
+ */
 const ImageSvgUri = ({
  imageUrl = "",
  width,
@@ -6,6 +6,9 @@ type LabelProps = {
  text: string;
 } & React.ComponentProps<typeof Text>;

+/**
+ * @internal
+ */
 export const Label = ({ text, ...props }: LabelProps) => {
  return (
    <Box
@@ -8,6 +8,9 @@ type LinkProps = {
  onPress?: () => void;
 } & React.ComponentProps<typeof Text>;

+/**
+ * @internal
+ */
 export const Link = ({
  text,
  variant = "link",
@@ -26,6 +26,9 @@ type NetworkButtonProps = {
  onChainSwitched?: () => void;
 } & React.ComponentProps<typeof Box>;

+/**
+ * @internal
+ */
 export const NetworkButton = ({
  onPress,
  chain,
@@ -1,6 +1,9 @@
 import { Theme } from "../../styles/theme";
 import { createText } from "@shopify/restyle";

+/**
+ * @internal
+ */
 const Text = createText<Theme>();

 export default Text;
@@ -11,6 +11,9 @@ type TextInputProps = {
  leftElement?: ReactNode;
 };

+/**
+ * @internal
+ */
 export const TextInput = ({
  containerProps,
  textInputProps,
@@ -13,6 +13,9 @@ export type ToastProps = {
  translateY?: number;
 };

+/**
+ * @internal
+ */
 export function Toast({
  text,
  icon,
@@ -18,6 +18,9 @@ type WalletButtonProps = {
  iconHeight?: number;
 } & React.ComponentProps<typeof BaseButton>;

+/**
+ * @internal
+ */
 export const WalletButton = ({
  iconWidth = 48,
  iconHeight = 48,
@@ -1,6 +1,9 @@
 import Box from "./Box";
 import ImageSvgUri from "./ImageSvgUri";

+/**
+ * @internal
+ */
 export const WalletIcon = ({
  iconUri,
  size,
@@ -2,6 +2,9 @@ import { useGlobalTheme } from "../../../providers/ui-context-provider";
 import Text from "../Text";
 import { TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";

+/**
+ * @internal
+ */
 export const ModalFooter = ({
  footer,
  isLoading,
@@ -12,6 +12,9 @@ interface ModalHeaderTextCloseProps {
  onBackPress?: () => void;
 }

+/**
+ * @internal
+ */
 export const ModalHeaderTextClose = ({
  headerText,
  subHeaderText,
@@ -3,6 +3,9 @@ import Modal, { ModalProps } from "react-native-modal";
 const MAX_WIDTH = 500;

 // Populate with the data...
+/**
+ * @internal
+ */
 export function TWModal(props: Partial<ModalProps>) {
  return (
    <Modal
@@ -4,6 +4,9 @@ import { _es } from "./es";
 import { _ja } from "./ja";
 import { Locale, LocaleType } from "./types";

+/**
+ * @internal
+ */
 export const setLocale = (locale: Locale): LocaleType => {
  if (typeof locale === "string") {
    switch (locale) {
@@ -38,7 +38,7 @@ export {
  ConnectWallet,
  type ConnectWalletProps,
 } from "./components/ConnectWallet";
-export { Web3Button } from "./components/Web3Button";
+export { Web3Button, type ActionFn } from "./components/Web3Button";

 // utilities
 export * from "./utils/uri";
@@ -52,6 +52,9 @@ export * from "./i18n/types";

 // ui components
 export * from "./components/base";
+/**
+ * @internal
+ */
 export { ConnectWalletHeader } from "./components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";

 // assets / icons
@@ -26,8 +26,16 @@ interface ThirdwebProviderProps<TChains extends Chain[]>
  > {
  /**
   * Wallets that will be supported by the dApp
-   * @defaultValue [MetaMaskWallet, CoinbaseWallet]
   *
+   * If no wallets are set, default wallets are used which is equivalent to the following:
+   *
+   * ```ts
+   * [
+   *  metamaskWallet(),
+   *  rainbowWallet(),
+   *  trustWallet()
+   * ]
+   *```
   * @example
   * ```jsx
   * import { MetaMaskWallet, CoinbaseWallet } from "@thirdweb-dev/react-native";
@@ -41,7 +49,8 @@ interface ThirdwebProviderProps<TChains extends Chain[]>

  /**
   * Locale that the app will be displayed in
-   * @defaultValue en()
+   *
+   * By default it is set to `en()`
   *
   * @example
   * ```jsx
@@ -2,6 +2,8 @@ import { Chain, getValidChainRPCs } from "@thirdweb-dev/chains";
 import { WCMeta } from "../wallets/types/wc";

 /**
+ * @internal
+ *
 * Build a WalletConnect display URI from a wc:// uri + a wallet specific link
 *
 * @param uri - The wc:// uri
@@ -22,6 +24,9 @@ export function formatWalletConnectDisplayUri(
    : `${uri}`;
 }

+/**
+ * @internal
+ */
 export function getValidPublicRPCUrl(chain: Chain) {
  return getValidChainRPCs(chain).map((rpc) => {
    try {
@@ -23,12 +23,14 @@ export type CoinbaseWalletConnectorOptions = WalletMobileSDKProviderOptions &
  ConfigurationParams & {
    /**
     * Fallback Ethereum JSON RPC URL
-     * @defaultValue ""
+     *
+     * By default it is set to `""`
     */
    jsonRpcUrl?: string;
    /**
     * Fallback Ethereum Chain ID
-     * @defaultValue 1
+     *
+     * By default it is set to `1`
     */
    chainId?: number;
  };
@@ -1,5 +1,22 @@
 # @thirdweb-dev/react

+## 4.1.12
+
+### Patch Changes
+
+- [#1842](https://github.com/thirdweb-dev/js/pull/1842) [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56) Thanks [@MananTank](https://github.com/MananTank)! - JSDoc improvements
+
+- [#2045](https://github.com/thirdweb-dev/js/pull/2045) [`a135857c`](https://github.com/thirdweb-dev/js/commit/a135857c7ad73e1a508298858eb0f5fd744ec176) Thanks [@MananTank](https://github.com/MananTank)! - Fix type EmbeddedWalletConfigOptions
+
+- [#1938](https://github.com/thirdweb-dev/js/pull/1938) [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Add OneKey wallet
+
+- [#2042](https://github.com/thirdweb-dev/js/pull/2042) [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5) Thanks [@MananTank](https://github.com/MananTank)! - Improved JSDoc comments and Type exports
+
+- Updated dependencies [[`cfe81b44`](https://github.com/thirdweb-dev/js/commit/cfe81b443205d84e58128b8d7d5f2dc940b12875), [`34546c24`](https://github.com/thirdweb-dev/js/commit/34546c24c74f4e9e1f5e94567ebe1017ad63aea5), [`72c0bb10`](https://github.com/thirdweb-dev/js/commit/72c0bb10d6d765d1679b2b22ac63d85db101b5c4), [`ca618ea0`](https://github.com/thirdweb-dev/js/commit/ca618ea0c9ac5dc4f65cbfbfd39360e4150c72c7), [`aefc4cda`](https://github.com/thirdweb-dev/js/commit/aefc4cda4c4fad81411d3a9485931e28100b5718), [`a36c7e83`](https://github.com/thirdweb-dev/js/commit/a36c7e8331744879a169f84e97b66abf0ab44f56), [`4ae1cd63`](https://github.com/thirdweb-dev/js/commit/4ae1cd63bb7b471cae48a27bf6554c4953c1dc82), [`61c62b3f`](https://github.com/thirdweb-dev/js/commit/61c62b3f07a082ffd7620c949e3bcc6b75c104b5), [`7bb054e4`](https://github.com/thirdweb-dev/js/commit/7bb054e45c75450c8f465809d23eb66371f6ef8e), [`cd87be4a`](https://github.com/thirdweb-dev/js/commit/cd87be4a24a9a3a552fbc4f33da6fcb08b7da88b), [`d20e7898`](https://github.com/thirdweb-dev/js/commit/d20e7898562a3914841522f2e09f88ca37dfdd4b)]:
+  - @thirdweb-dev/sdk@4.0.19
+  - @thirdweb-dev/react-core@4.1.12
+  - @thirdweb-dev/wallets@2.1.11
+
 ## 4.1.11

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/react",
-  "version": "4.1.11",
+  "version": "4.1.12",
  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
  "author": "thirdweb eng <[email protected]>",
  "license": "Apache-2.0",
@@ -68,7 +68,7 @@
    "generate-snippets": "node ./scripts/generate-snippets-evm.mjs && node ./scripts/generate-feature-snippets-evm.mjs",
    "build": "tsc && preconstruct build",
    "push": "yalc push",
-    "typedoc": "rimraf typedoc && node typedoc.js"
+    "typedoc": "node scripts/typedoc.mjs"
  },
  "sideEffects:": false,
  "devDependencies": {
@@ -103,10 +103,9 @@
    "prettier": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
    "stream": "npm:stream-browserify@^3.0.0",
-    "typedoc": "^0.25.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "typedoc-gen": "workspace:*"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
@@ -0,0 +1,15 @@
+/* eslint-disable better-tree-shaking/no-top-level-side-effects */
+
+// @ts-check
+import { typedoc } from "typedoc-gen";
+
+typedoc({
+  entryPoints: ["src/index.ts"],
+  exclude: [
+    "**/packages/sdk/**",
+    "**/packages/wallets/**",
+    "**/packages/react-core/**",
+    "**/packages/chains/**",
+  ],
+  output: "both", // TODO: change this to 'json' when old portal is fully migrated to new portal
+});
@@ -1,6 +1,21 @@
 import { green, mauve, mauveDark, tomato } from "@radix-ui/colors";

-const darkColors = {
+type ThemeColors = {
+  base1: string;
+  base2: string;
+  base3: string;
+  base4: string;
+  primaryText: string;
+  secondaryText: string;
+  danger: string;
+  success: string;
+  overlay: string;
+  accentText: string;
+  accentBg: string;
+  textOnAccent: string;
+};
+
+const darkColors: ThemeColors = {
  base1: "hsl(230deg 11.63% 8.43%)",
  base2: "hsl(230deg 11.63% 12%)",
  base3: "hsl(230deg 11.63% 15%)",
@@ -15,7 +30,7 @@ const darkColors = {
  textOnAccent: mauveDark.mauve12,
 };

-const lightColors: typeof darkColors = {
+const lightColors: ThemeColors = {
  base1: mauve.mauve1,
  base2: mauve.mauve3,
  base3: mauve.mauve5,
@@ -30,7 +45,57 @@ const lightColors: typeof darkColors = {
  textOnAccent: mauve.mauve1,
 };

-function createThemeObj(colors: typeof darkColors) {
+export type Theme = {
+  type: "light" | "dark";
+  colors: {
+    primaryText: string;
+    secondaryText: string;
+    accentText: string;
+
+    danger: string;
+    success: string;
+
+    modalOverlayBg: string;
+
+    accentButtonBg: string;
+    accentButtonText: string;
+
+    primaryButtonBg: string;
+    primaryButtonText: string;
+
+    secondaryButtonBg: string;
+    secondaryButtonText: string;
+    secondaryButtonHoverBg: string;
+
+    modalBg: string;
+    dropdownBg: string;
+
+    tooltipBg: string;
+    tooltipText: string;
+
+    inputAutofillBg: string;
+    scrollbarBg: string;
+    walletSelectorButtonHoverBg: string;
+
+    separatorLine: string;
+
+    secondaryIconColor: string;
+    secondaryIconHoverBg: string;
+    secondaryIconHoverColor: string;
+
+    borderColor: string;
+    skeletonBg: string;
+
+    selectedTextColor: string;
+    selectedTextBg: string;
+
+    connectedButtonBg: string;
+    connectedButtonBgHover: string;
+  };
+  fontFamily: string;
+};
+
+function createThemeObj(colors: ThemeColors): Theme {
  return {
    type: "dark" as "light" | "dark",
    colors: {
@@ -85,8 +150,6 @@ function createThemeObj(colors: typeof darkColors) {
 export const darkThemeObj = /* @__PURE__ */ createThemeObj(darkColors);
 export const lightThemeObj = /* @__PURE__ */ createThemeObj(lightColors);

-export type Theme = typeof darkThemeObj;
-
 export type ThemeObjectOrType = "light" | "dark" | Theme;

 export type ThemeOverrides = {
@@ -142,6 +205,18 @@ export const shadow = {
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
 };

+/**
+ * Create a custom light theme object by using the default dark theme as a base and applying overrides.
+ *
+ * @example
+ * ```ts
+ * const customTheme = lightTheme({
+ *  colors: {
+ *   modalBg: "red",
+ *  }
+ * })
+ * ```
+ */
 export function lightTheme(overrides?: ThemeOverrides): Theme {
  if (!overrides) {
    return lightThemeObj;
@@ -149,6 +224,18 @@ export function lightTheme(overrides?: ThemeOverrides): Theme {
  return applyThemeOverrides(lightThemeObj, overrides);
 }

+/**
+ * Create a custom dark theme object by using the default dark theme as a base and applying overrides.
+ *
+ * @example
+ * ```ts
+ * const customTheme = darkTheme({
+ *  colors: {
+ *   modalBg: "red",
+ *  }
+ * })
+ * ```
+ */
 export function darkTheme(overrides?: ThemeOverrides): Theme {
  if (!overrides) {
    return darkThemeObj;
@@ -3,15 +3,18 @@ import React from "react";
 import type { SharedMediaProps } from "./types";
 import { MediaRenderer } from "./MediaRenderer";

-/**
- * The props for the {@link ThirdwebNftMedia} component.
- */
 export interface ThirdwebNftMediaProps extends SharedMediaProps {
  /**
   * The NFT metadata of the NFT returned by the thirdweb sdk.
   */
  metadata: NFTMetadata;
+  /**
+   * CSS width of the media
+   */
  width?: string;
+  /**
+   * CSS height of the media
+   */
  height?: string;
 }

@@ -24,7 +24,7 @@ import {
 import { useTWLocale } from "../../providers/locale-provider";
 import { WelcomeScreen } from "../../../wallet/ConnectWallet/screens/types";

-type ActionFn = (contract: SmartContract) => any;
+export type ActionFn = (contract: SmartContract) => any;

 const TW_WEB3BUTTON = "tw-web3button";

@@ -130,13 +130,15 @@ export interface Web3ButtonProps<TActionFn extends ActionFn> {

    /**
     * text to render in ConnectWallet button
-     * @defaultValue "Connect Wallet"
+     *
+     * The default is `"Connect Wallet"`.
     */
    btnTitle?: string;

    /**
-     * title of the `ConnectWallet` Modal
-     * @defaultValue "Connect"
+     * title of the `ConnectWallet` Modal.
+     *
+     * The default is `"Connect"`.
     */
    modalTitle?: string;

@@ -161,9 +163,9 @@ export interface Web3ButtonProps<TActionFn extends ActionFn> {
    /**
     * Set the size of the modal - `compact` or `wide` on desktop
     *
-     * Modal size is always `compact` on mobile
+     * Modal size is always `compact` on mobile.
     *
-     * @defaultValue "wide"
+     * By default it is set to `"wide"` for desktop
     */
    modalSize?: "compact" | "wide";

@@ -19,12 +19,14 @@ export interface SharedMediaProps {
  height?: HTMLIFrameElement["height"];
  /**
   * Require user interaction to play the media.
-   * @defaultValue false
+   *
+   * By default it is set to `false`
   */
  requireInteraction?: boolean;
  /**
   * Show the media controls (where applicable)
-   * @defaultValue false
+   *
+   * By default it is set to `false`
   */
  controls?: HTMLVideoElement["controls"];

@@ -36,11 +38,6 @@ export interface SharedMediaProps {
  mimeType?: string;
 }

-/**
- *
- * The props for the {@link MediaRenderer} component.
- * @public
- */
 export interface MediaRendererProps extends SharedMediaProps {
  /**
   * The media source uri.
@@ -1,11 +1,11 @@
 import { useConnect } from "@thirdweb-dev/react-core";
 import { useCallback } from "react";
-import { BloctoAdditionalOptions } from "../../../wallet/wallets/blocto/bloctoWallet";
+import { BloctoWalletConfigOptions } from "../../../wallet/wallets/blocto/bloctoWallet";

 export function useBloctoWallet() {
  const connect = useConnect();
  return useCallback(
-    async (options?: { chainId?: number } & BloctoAdditionalOptions) => {
+    async (options?: { chainId?: number } & BloctoWalletConfigOptions) => {
      const { bloctoWallet } = await import(
        "../../../wallet/wallets/blocto/bloctoWallet"
      );
@@ -16,20 +16,26 @@ export { ConnectModalInline } from "../wallet/ConnectWallet/Modal/ConnectModalIn
 export {
  NetworkSelector,
  type NetworkSelectorProps,
-  type NetworkSelectorChain,
+  type NetworkSelectorChainProps,
 } from "../wallet/ConnectWallet/NetworkSelector";

+export type { DropDownPosition } from "../wallet/ConnectWallet/Details";
+
 // UI components
 export * from "./components/MediaRenderer";
 export * from "./components/NftMedia";
-export { Web3Button, type Web3ButtonProps } from "./components/Web3Button";
+export {
+  Web3Button,
+  type Web3ButtonProps,
+  type ActionFn,
+} from "./components/Web3Button";
 export {
  ThirdwebProvider,
  type DefaultChains,
  type ThirdwebProviderProps,
 } from "./providers/thirdweb-provider";

-export type { MediaRendererProps } from "./components/types";
+export type { MediaRendererProps, SharedMediaProps } from "./components/types";

 // wallet/hooks
 export { useInstalledWallets } from "../wallet/hooks/useInstalledWallets";
@@ -62,8 +68,14 @@ export {
  type SupportedTokens,
 } from "../wallet/ConnectWallet/defaultTokens";

+export {
+  oneKeyWallet,
+  type OneKeyWalletConfigOptions,
+} from "../wallet/wallets/oneKey/oneKeyWallet";
+
 // react-core
 export * from "@thirdweb-dev/react-core";
+
 // wallets
 export {
  LocalWallet,
@@ -86,6 +98,7 @@ export {
  InjectedWallet,
  setWalletAnalyticsEnabled,
  CoreWallet,
+  OneKeyWallet,
  CryptoDefiWallet,
  RabbyWallet,
  Coin98Wallet,
@@ -1,3 +1,4 @@
+import { ThirdwebLocale } from "./types";
 import { DeepPartial, immutableOverride } from "../utils/applyOverrides";

 // wallets that connect via extension and QR scan
@@ -168,6 +169,7 @@ export function enDefault() {
      trustWallet: extensionAndQRScanScreens("Trust"),
      zerionWallet: extensionAndQRScanScreens("Zerion"),
      coreWallet: extensionAndQRScanScreens("Core"),
+      oneKeyWallet: extensionAndQRScanScreens("OneKey"),
      cryptoDefiWallet: extensionAndQRScanScreens("Crypto Defi"),
      rabbyWallet: extensionAndQRScanScreens("Rabby"),
      coin98Wallet: extensionAndQRScanScreens("Coin98"),
@@ -317,8 +319,33 @@ export function enDefault() {
  };
 }

-export type ThirdwebLocale = ReturnType<typeof enDefault>;
-
+/**
+ * Calling this function will return the default English locale object to be set on `ThirdwebProvider` to localize the thirdweb components.
+ *
+ * You can also overrides parts of the default locale object by passing an object with the same structure as the default locale object and only those parts will be overridden.
+ *
+ * @example
+ *
+ * ### Use default English Locale
+ * ```tsx
+ * const english = en(); // default English locale object
+ *
+ * <ThirdwebProvider locale={english}> <App /> </ThirdwebProvider>
+ * ```
+ *
+ * ### Override English Locale
+ * ```tsx
+ * const english = en({
+ *  connectWallet: {
+ *    signIn: "Sign in!"
+ *  }
+ * })
+ *
+ * <ThirdwebProvider locale={english}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ */
 export function en(overrides?: DeepPartial<ThirdwebLocale>) {
  const defaultObj = enDefault();
  if (!overrides) {
@@ -1,5 +1,5 @@
 import { DeepPartial, immutableOverride } from "../utils/applyOverrides";
-import { ThirdwebLocale } from "./en";
+import { ThirdwebLocale } from "./types";

 // ...

@@ -173,6 +173,7 @@ export function esDefault(): ThirdwebLocale {
      rainbowWallet: extensionAndQRScanScreens("Rainbow"),
      trustWallet: extensionAndQRScanScreens("Trust"),
      zerionWallet: extensionAndQRScanScreens("Zerion"),
+      oneKeyWallet: extensionAndQRScanScreens("OneKey"),
      cryptoDefiWallet: extensionAndQRScanScreens("Crypto Defi"),
      rabbyWallet: extensionAndQRScanScreens("Rabby"),
      paperWallet: {
@@ -326,6 +327,33 @@ export function esDefault(): ThirdwebLocale {
  };
 }

+/**
+ * Calling this function will return the default Spanish locale object to be set on `ThirdwebProvider` to localize the thirdweb components.
+ *
+ * You can also overrides parts of the default locale object by passing an object with the same structure as the default locale object and only those parts will be overridden.
+ *
+ * @example
+ *
+ * ### Use default Spanish Locale
+ * ```tsx
+ * const spanish = es(); // default English locale object
+ *
+ * <ThirdwebProvider locale={english}> <App /> </ThirdwebProvider>
+ * ```
+ *
+ * ### Override Spanish Locale
+ * ```tsx
+ * const spanish = es({
+ *  connectWallet: {
+ *    signIn: "Iniciar sesión"
+ *  }
+ * })
+ *
+ * <ThirdwebProvider locale={spanish}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ */
 export function es(overrides?: DeepPartial<ThirdwebLocale>) {
  const defaultObj = esDefault();
  if (!overrides) {
@@ -1,5 +1,5 @@
 import { DeepPartial, immutableOverride } from "../utils/applyOverrides";
-import { ThirdwebLocale } from "./en";
+import { ThirdwebLocale } from "./types";

 // wallets that connect via extension and QR scan
 function extensionAndQRScanScreens(walletName: string) {
@@ -173,6 +173,7 @@ export function jaDefault(): ThirdwebLocale {
      rainbowWallet: extensionAndQRScanScreens("Rainbow"),
      trustWallet: extensionAndQRScanScreens("Trust"),
      zerionWallet: extensionAndQRScanScreens("Zerion"),
+      oneKeyWallet: extensionAndQRScanScreens("OneKey"),
      cryptoDefiWallet: extensionAndQRScanScreens("Crypto Defi"),
      rabbyWallet: extensionAndQRScanScreens("Rabby"),
      paperWallet: {
@@ -320,6 +321,33 @@ export function jaDefault(): ThirdwebLocale {
  };
 }

+/**
+ * Calling this function will return the default Japanese locale object to be set on `ThirdwebProvider` to localize the thirdweb components.
+ *
+ * You can also overrides parts of the default locale object by passing an object with the same structure as the default locale object and only those parts will be overridden.
+ *
+ * @example
+ *
+ * ### Use default Japanese Locale
+ * ```tsx
+ * const japanese = ja(); // default English locale object
+ *
+ * <ThirdwebProvider locale={japanese}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Override Japanese Locale
+ * ```tsx
+ * const japanese = ja({
+ *  connectWallet: {
+ *    signIn: "サインイン"
+ *  }
+ * })
+ *
+ * <ThirdwebProvider locale={japanese}> <App /> </ThirdwebProvider>
+ * ```
+ */
 export function ja(overrides?: DeepPartial<ThirdwebLocale>) {
  const defaultObj = jaDefault();
  if (!overrides) {
@@ -0,0 +1,298 @@
+export type ExtensionAndQRScreensLocale = {
+  connectionScreen: {
+    failed: string;
+    inProgress: string;
+    instruction: string;
+    retry: string;
+  };
+  getStartedLink: string;
+  getStartedScreen: { instruction: string };
+  scanScreen: { instruction: string };
+};
+
+export type ThirdwebLocale = {
+  connectWallet: {
+    agreement: {
+      and: string;
+      prefix: string;
+      privacyPolicy: string;
+      termsOfService: string;
+    };
+    backupWallet: string;
+    confirmInWallet: string;
+    connectAWallet: string;
+    connectedToSmartWallet: string;
+    connecting: string;
+    continueAsGuest: string;
+    copyAddress: string;
+    currentNetwork: string;
+    defaultButtonTitle: string;
+    defaultModalTitle: string;
+    disconnectWallet: string;
+    download: { android: string; chrome: string; iOS: string };
+    getStarted: string;
+    guest: string;
+    guestWalletWarning: string;
+    installed: string;
+    networkSelector: {
+      addCustomNetwork: string;
+      allNetworks: string;
+      categoryLabel: {
+        others: string;
+        popular: string;
+        recentlyUsed: string;
+      };
+      failedToSwitch: string;
+      inputPlaceholder: string;
+      loading: string;
+      mainnets: string;
+      testnets: string;
+      title: string;
+    };
+    newToWallets: string;
+    or: string;
+    personalWallet: string;
+    receive: string;
+    receiveFundsScreen: { instruction: string; title: string };
+    recommended: string;
+    requestTestnetFunds: string;
+    send: string;
+    sendFundsScreen: {
+      amount: string;
+      insufficientFunds: string;
+      invalidAddress: string;
+      noTokensFound: string;
+      searchToken: string;
+      selectTokenTitle: string;
+      sendTo: string;
+      sending: string;
+      submitButton: string;
+      successMessage: string;
+      title: string;
+      token: string;
+      transactionFailed: string;
+      transactionRejected: string;
+    };
+    signIn: string;
+    signatureScreen: {
+      instructionScreen: {
+        instruction: string;
+        signInButton: string;
+        title: string;
+      };
+      signingScreen: {
+        approveTransactionInSafe: string;
+        failedToSignIn: string;
+        inProgress: string;
+        prompt: string;
+        promptForSafe: string;
+        title: string;
+        tryAgain: string;
+      };
+    };
+    smartWallet: string;
+    switchAccount: string;
+    switchNetwork: string;
+    switchTo: string;
+    switchingNetwork: string;
+    transactionHistory: string;
+    welcomeScreen: { defaultSubtitle: string; defaultTitle: string };
+  };
+  wallets: {
+    coin98Wallet: {
+      connectionScreen: {
+        failed: string;
+        inProgress: string;
+        instruction: string;
+        retry: string;
+      };
+      getStartedLink: string;
+      getStartedScreen: { instruction: string };
+      scanScreen: { instruction: string };
+    };
+    coinbaseWallet: ExtensionAndQRScreensLocale;
+    coreWallet: ExtensionAndQRScreensLocale;
+    cryptoDefiWallet: ExtensionAndQRScreensLocale;
+    embeddedWallet: {
+      createPassword: {
+        confirmation: string;
+        failedToSetPassword: string;
+        inputPlaceholder: string;
+        instruction: string;
+        saveInstruction: string;
+        submitButton: string;
+        title: string;
+      };
+      emailLoginScreen: {
+        enterCodeSendTo: string;
+        enterRecoveryCode: string;
+        failedToSendCode: string;
+        invalidCode: string;
+        invalidCodeOrRecoveryCode: string;
+        newDeviceDetected: string;
+        resendCode: string;
+        sendingCode: string;
+        title: string;
+        verify: string;
+      };
+      emailPlaceholder: string;
+      emailRequired: string;
+      enterPassword: {
+        inputPlaceholder: string;
+        instruction: string;
+        submitButton: string;
+        title: string;
+        wrongPassword: string;
+      };
+      invalidEmail: string;
+      signIn: string;
+      signInWithApple: string;
+      signInWithFacebook: string;
+      signInWithGoogle: string;
+      socialLoginScreen: {
+        failed: string;
+        instruction: string;
+        retry: string;
+        title: string;
+      };
+      submitEmail: string;
+    };
+    frameWallet: {
+      connectionFailedScreen: {
+        description: string;
+        downloadFrame: string;
+        supportLink: string;
+        title: string;
+      };
+      connectionScreen: {
+        failed: string;
+        inProgress: string;
+        instruction: string;
+        retry: string;
+      };
+      getStartedLink: string;
+      getStartedScreen: { instruction: string };
+      scanScreen: { instruction: string };
+    };
+    localWallet: {
+      confirmPasswordLabel: string;
+      createScreen: {
+        connecting: string;
+        createNewWallet: string;
+        importWallet: string;
+        instruction: string;
+      };
+      enterYourPassword: string;
+      exportScreen: {
+        description1: string;
+        description2: string;
+        download: string;
+        title: string;
+        walletAddress: string;
+      };
+      importScreen: {
+        description1: string;
+        description2: string;
+        import: string;
+        title: string;
+        uploadJSON: string;
+        uploadedSuccessfully: string;
+      };
+      passwordLabel: string;
+      reconnectScreen: {
+        continue: string;
+        createNewWallet: string;
+        savedWallet: string;
+        title: string;
+      };
+      warningScreen: {
+        backupWallet: string;
+        title: string;
+        warning: string;
+      };
+    };
+    magicLink: {
+      countryCodeMissing: string;
+      emailOrPhoneRequired: string;
+      emailPlaceholder: string;
+      emailRequired: string;
+      invalidEmail: string;
+      invalidEmailOrPhone: string;
+      invalidPhone: string;
+      loginWith: string;
+      loginWithEmailOrPhone: string;
+      loginWithPhone: string;
+      phoneRequired: string;
+      signIn: string;
+      submitEmail: string;
+    };
+    metamaskWallet: ExtensionAndQRScreensLocale;
+    okxWallet: ExtensionAndQRScreensLocale;
+    oneKeyWallet: ExtensionAndQRScreensLocale;
+    paperWallet: {
+      emailLoginScreen: {
+        enterCodeSendTo: string;
+        enterRecoveryCode: string;
+        failedToSendCode: string;
+        invalidCode: string;
+        invalidCodeOrRecoveryCode: string;
+        newDeviceDetected: string;
+        resendCode: string;
+        sendingCode: string;
+        title: string;
+        verify: string;
+      };
+      emailPlaceholder: string;
+      emailRequired: string;
+      googleLoginScreen: {
+        failed: string;
+        instruction: string;
+        retry: string;
+        title: string;
+      };
+      invalidEmail: string;
+      signIn: string;
+      signInWithGoogle: string;
+      submitEmail: string;
+    };
+    phantomWallet: ExtensionAndQRScreensLocale;
+    rabbyWallet: ExtensionAndQRScreensLocale;
+    rainbowWallet: ExtensionAndQRScreensLocale;
+    safeWallet: {
+      accountDetailsScreen: {
+        connectToSafe: string;
+        connecting: string;
+        dashboardLink: string;
+        failedToConnect: string;
+        failedToSwitch: string;
+        findSafeAddressIn: string;
+        invalidChainConfig: string;
+        mainnets: string;
+        network: string;
+        safeAddress: string;
+        selectNetworkPlaceholder: string;
+        switchNetwork: string;
+        switchingNetwork: string;
+        testnets: string;
+        title: string;
+      };
+      connectWalletScreen: {
+        learnMoreLink: string;
+        subtitle: string;
+        title: string;
+      };
+    };
+    smartWallet: {
+      connecting: string;
+      failedToConnect: string;
+      wrongNetworkScreen: {
+        failedToSwitch: string;
+        subtitle: string;
+        title: string;
+      };
+    };
+    trustWallet: ExtensionAndQRScreensLocale;
+    walletConnect: { scanInstruction: string };
+    zerionWallet: ExtensionAndQRScreensLocale;
+  };
+};
@@ -1,5 +1,6 @@
 import { createContext, useContext } from "react";
-import { ThirdwebLocale, enDefault } from "../locales/en";
+import { enDefault } from "../locales/en";
+import { ThirdwebLocale } from "../locales/types";

 export const ThirdwebLocaleContext = /* @__PURE__ */ (() =>
  createContext<ThirdwebLocale>(enDefault()))();
@@ -12,41 +12,155 @@ import { defaultWallets } from "../../wallet/wallets/defaultWallets";
 import { CustomThemeProvider } from "../../design-system/CustomThemeProvider";
 import { signerWallet } from "../../wallet/wallets/signerWallet";
 import { Signer } from "ethers";
-import { ThirdwebLocale, en } from "../locales/en";
+import { en } from "../locales/en";
 import { ThirdwebLocaleContext } from "./locale-provider";
 import { walletIds } from "@thirdweb-dev/wallets";
+import { ThirdwebLocale } from "../locales/types";

 export interface ThirdwebProviderProps<TChains extends Chain[]>
  extends Omit<
    ThirdwebProviderCoreProps<TChains>,
-    "createWalletStorage" | "supportedWallets" | "theme"
+    "createWalletStorage" | "supportedWallets" | "theme" | "signerWallet"
  > {
  /**
   * Wallets supported by the dApp
-   * @defaultValue `[ metamaskWallet(), coinbaseWallet(), walletConnect() ]`
+   *
+   * If no wallets are provided, the default wallets will be used which is equivalent to the following:
+   *
+   * ```tsx
+   * [
+   *  metamaskWallet(),
+   *  coinbaseWallet(),
+   *  walletConnect(),
+   *  trustWallet(),
+   *  rainbowWallet(),
+   *  zerionWallet(),
+   *  phantomWallet(),
+   * ]
+   * ```
   *
   * @example
   * ```jsx
   * import { metamaskWallet, coinbaseWallet, walletConnect } from "@thirdweb-dev/react";
   *
   * <ThirdwebProvider
-   *  supportedWallets={[metamaskWallet(), coinbaseWallet(), walletConnect()]}
+   *  supportedWallets={[
+   *    metamaskWallet(),
+   *    coinbaseWallet(),
+   *    walletConnect()
+   *  ]}
   * />
   * ```
   */
  supportedWallets?: WalletConfig<any>[];

  /**
-   * theme to use for all thirdweb components
-   * @defaultValue "dark"
+   * Set the theme for all thirdweb components
+   *
+   * By default it is set to "dark".
+   *
+   * theme can be set to either "dark" or "light" or a custom theme object.
+   *
+   * You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it.
+   *
+   * @example
+   * ```ts
+   * import { lightTheme } from "@thirdweb-dev/react";
+   * const customTheme = lightTheme({
+   *  colors: {
+   *    modalBg: 'red'
+   *  }
+   * })
+   * ```
   */
  theme?: ThemeObjectOrType;

+  /**
+   * Use a signer instead of `supportedWallets` if you want to provide your own wallet connection logic.
+   */
  signer?: Signer;

+  /**
+   * locale object contains text used for all thirdweb components
+   *
+   * it allows you to change the language used in UI components or override the texts used in the UI
+   *
+   * React SDK comes out of the box with Spanish and Japanese locale functions, but you can add support for any language you want just by passing an object with the required strings
+   *
+   * @example
+   *
+   * ## Using Built-in Locales
+   *
+   * ### Using the Spanish locale
+   * ```tsx
+   * import { ThirdwebProvider, es } from "@thirdweb-dev/react";
+   *
+   * const spanish = es();
+   *
+   * <ThirdwebProvider locale={spanish}> <App /> </ThirdwebProvider>
+   * ```
+   *
+   * ### Using the Japanese locale
+   * ```tsx
+   * import { ThirdwebProvider, jp } from "@thirdweb-dev/react";
+   *
+   * const japanese = jp();
+   *
+   * <ThirdwebProvider locale={japanese}> <App /> </ThirdwebProvider>
+   * ```
+   *
+   * ### Using English locale ( default )
+   * ```tsx
+   * import { ThirdwebProvider, en } from "@thirdweb-dev/react";
+   *
+   * const english = en();
+   *
+   * <ThirdwebProvider locale={english}> <App /> </ThirdwebProvider>
+   * ```
+   *
+   * ## Overriding the locale
+   *
+   * ```tsx
+   * import { ThirdwebProvider, en } from "@thirdweb-dev/react";
+   *
+   * // override some texts
+   * const english = en({
+   *   connectWallet: {
+   *     confirmInWallet: "Confirm in your wallet",
+   *   },
+   *   wallets: {
+   *     metamaskWallet: {
+   *       connectionScreen: {
+   *         inProgress: "Awaiting Confirmation",
+   *         instruction: "Accept connection request in your MetaMask wallet",
+   *       },
+   *     },
+   *   },
+   * });
+   *
+   * <ThirdwebProvider locale={english}>
+   *   <App />
+   * </ThirdwebProvider>;
+   *
+   * ```
+   *
+   * ### Custom locale object
+   *
+   * ```tsx
+   * import { ThirdwebProvider } from "@thirdweb-dev/react";
+   *
+   * <ThirdwebProvider locale={{ .... }}>
+   *   <App />
+   * </ThirdwebProvider>;
+   *```
+   *
+   */
  locale?: ThirdwebLocale;
 }

+/**
+ * Array of default supported chains by the thirdweb SDK
+ */
 export type DefaultChains = typeof defaultChains;

 /**
@@ -1,35 +1,115 @@
-export { defaultTokens } from "./wallet/ConnectWallet/defaultTokens";
+export {
+  defaultTokens,
+  type TokenInfo,
+} from "./wallet/ConnectWallet/defaultTokens";
+
 export { defaultWallets } from "./wallet/wallets/defaultWallets";

 export { useSmartWallet } from "./evm/hooks/wallets/useSmartWallet";
-export { bloctoWallet } from "./wallet/wallets/blocto/bloctoWallet";
-export { coinbaseWallet } from "./wallet/wallets/coinbase/coinbaseWallet";
+
+export {
+  bloctoWallet,
+  type BloctoWalletConfigOptions,
+} from "./wallet/wallets/blocto/bloctoWallet";
+export {
+  coinbaseWallet,
+  type CoinbaseWalletConfigOptions,
+} from "./wallet/wallets/coinbase/coinbaseWallet";
 export { embeddedWallet } from "./wallet/wallets/embeddedWallet/embeddedWallet";
-export { frameWallet } from "./wallet/wallets/frame/frameWallet";
+export type { EmbeddedWalletConfigOptions } from "./wallet/wallets/embeddedWallet/types";
+
+export {
+  frameWallet,
+  type FrameWalletConfigOptions,
+} from "./wallet/wallets/frame/frameWallet";
+
 export { localWallet } from "./wallet/wallets/localWallet/localWallet";
-export { magicLink } from "./wallet/wallets/magic/magicLink";
-export { metamaskWallet } from "./wallet/wallets/metamask/metamaskWallet";
+export type { LocalWalletConfigOptions } from "./wallet/wallets/localWallet/types";
+
+export {
+  magicLink,
+  type MagicWalletConfigOptions,
+} from "./wallet/wallets/magic/magicLink";
+export {
+  metamaskWallet,
+  type MetamaskWalletConfigOptions,
+} from "./wallet/wallets/metamask/metamaskWallet";
+
 export { paperWallet } from "./wallet/wallets/paper/paperWallet";
-export { phantomWallet } from "./wallet/wallets/phantom/phantomWallet";
-export { rainbowWallet } from "./wallet/wallets/rainbow/RainbowWallet";
-export { safeWallet } from "./wallet/wallets/safe/safeWallet";
+export type { PaperWalletConfigOptions } from "./wallet/wallets/paper/types";
+
+export {
+  phantomWallet,
+  type PhantomWalletConfigOptions,
+} from "./wallet/wallets/phantom/phantomWallet";
+
+export {
+  rainbowWallet,
+  type RainbowWalletConfigOptions,
+} from "./wallet/wallets/rainbow/RainbowWallet";
+
+export {
+  safeWallet,
+  type SafeWalletConfigOptions,
+} from "./wallet/wallets/safe/safeWallet";
+
 export { smartWallet } from "./wallet/wallets/smartWallet/smartWallet";
-export { trustWallet } from "./wallet/wallets/trustWallet/TrustWallet";
-export { walletConnect } from "./wallet/wallets/walletConnect/walletConnect";
+export type { SmartWalletConfigOptions } from "./wallet/wallets/smartWallet/types";
+
+export {
+  trustWallet,
+  type TrustWalletConfigOptions,
+} from "./wallet/wallets/trustWallet/TrustWallet";
+
+export {
+  walletConnect,
+  type walletConnectConfigOptions,
+} from "./wallet/wallets/walletConnect/walletConnect";
+
 export { walletConnectV1 } from "./wallet/wallets/walletConnectV1";
-export { zerionWallet } from "./wallet/wallets/zerion/zerionWallet";
-export { okxWallet } from "./wallet/wallets/okx/okxWallet";
-export { coreWallet } from "./wallet/wallets/coreWallet/coreWallet";
-export { cryptoDefiWallet } from "./wallet/wallets/defiWallet/cryptoDefiWallet";
-export { rabbyWallet } from "./wallet/wallets/rabby/rabbyWallet";
-export { coin98Wallet } from "./wallet/wallets/coin98/coin98Wallet";
+export {
+  zerionWallet,
+  type ZerionkWalletConfigOptions,
+} from "./wallet/wallets/zerion/zerionWallet";
+
+export {
+  okxWallet,
+  type OKXWalletConfigOptions,
+} from "./wallet/wallets/okx/okxWallet";
+
+export {
+  coreWallet,
+  type CoreWalletConfigOptions,
+} from "./wallet/wallets/coreWallet/coreWallet";
+
+export {
+  cryptoDefiWallet,
+  type CryptoDefiWalletConfigOptions,
+} from "./wallet/wallets/defiWallet/cryptoDefiWallet";
+
+export {
+  rabbyWallet,
+  type RabbyWalletConfigOptions,
+} from "./wallet/wallets/rabby/rabbyWallet";
+
+export {
+  coin98Wallet,
+  type Coin98WalletConfigOptions,
+} from "./wallet/wallets/coin98/coin98Wallet";
+
+// theming
 export { darkTheme, lightTheme } from "./design-system/index";
 export type { Theme, ThemeOverrides } from "./design-system/index";

-// at the moment we'll re-export everything from the evm package
-export * from "./evm";
-
 // locales
 export { en } from "./evm/locales/en";
 export { ja } from "./evm/locales/ja";
 export { es } from "./evm/locales/es";
+
+export type {
+  ThirdwebLocale,
+  ExtensionAndQRScreensLocale,
+} from "./evm/locales/types";
+
+// at the moment we'll re-export everything from the evm package
+export * from "./evm";
@@ -38,13 +38,53 @@ import { Modal } from "../../components/Modal";
 import { useTWLocale } from "../../evm/providers/locale-provider";

 export type ConnectWalletProps = {
+  /**
+   * CSS class to apply to the button element
+   *
+   * For some CSS properties, you may need to use the !important to override the default styles
+   *
+   * ```tsx
+   * <ConnectWallet className="my-custom-class" />
+   * ```
+   */
  className?: string;
+
+  /**
+   * Set the theme for the button and modal.
+   *
+   * By default it is set to "dark" if `theme` is not set on `ThirdWebProvider`
+   * If a `theme` is set on `ThirdWebProvider` then that theme will be used by default which can be overridden by setting `theme` prop on `ConnectWallet` component
+   *
+   * theme can be set to either "dark" or "light" or a custom theme object. You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it.
+   *
+   * @example
+   * ```ts
+   * import { lightTheme } from "@thirdweb-dev/react";
+   * const customTheme = lightTheme({
+   *  colors: {
+   *    modalBg: 'red'
+   *  }
+   * })
+   * ```
+   */
  theme?: "dark" | "light" | Theme;

-  btnTitle?: string;
  /**
-   * Set a custom title for the modal
-   * @defaultValue "Connect"
+   * set custom label for the button.
+   *
+   * The default is `"Connect"`
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet btnTitle="Sign in" />
+   * ```
+   */
+  btnTitle?: string;
+
+  /**
+   * Change the title of ConnectWallet Modal
+   *
+   * The default is `"Connect"`
   */
  modalTitle?: string;

@@ -56,27 +96,84 @@ export type ConnectWalletProps = {
  modalTitleIconUrl?: string;

  /**
-   * render a custom button to display the connected wallet details instead of the default button
+   * Render a custom button to display connected wallet details instead of the default one
+   *
+   * ```tsx
+   * const address = useAddress();
+   *
+   * <ConnectWallet
+   *  detailsBtn={() => {
+   *    return (
+   *      <button>
+   *        connected to {address}
+   *      </button>
+   *    )
+   *  }}
+   * />
+   * ```
   */
  detailsBtn?: () => JSX.Element;
+
+  /**
+   * When user connects the wallet using ConnectWallet Modal, a "Details Button" is rendered. Clicking on this button opens a dropdown which opens in a certain direction relative to the Details button.
+   *
+   * `dropdownPosition` prop allows you to customize the direction the dropdown should open relative to the Details button.
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  dropdownPosition={{
+   *    side: "bottom", // or use:  "top" | "bottom" | "left" | "right"
+   *    align: "end", // or use:  "start" | "center" | "end";
+   *  }}
+   *  />
+   * ```
+   */
  dropdownPosition?: DropDownPosition;
+
+  /**
+   * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/auth) after connecting their wallet.
+   *
+   * This requires the `authConfig` prop to be set on the `ThirdWebProvider` component.
+   */
  auth?: {
+    /**
+     * specify whether signing in is optional or not.
+     *
+     * By default it is `true` if `authConfig` is set on `ThirdWebProvider`
+     */
    loginOptional?: boolean;
+    /**
+     * Callback to be called after user signs in with their wallet
+     */
    onLogin?: (token: string) => void;
+    /**
+     * Callback to be called after user signs out
+     */
    onLogout?: () => void;
  };

+  /**
+   * CSS styles to apply to the button element
+   */
  style?: React.CSSProperties;

+  /**
+   * customize the Network selector shown
+   */
  networkSelector?: Omit<
    NetworkSelectorProps,
    "theme" | "onClose" | "chains" | "open"
  >;

  /**
-   * Hide option to request testnet funds for testnets in dropdown
+   * Hide the "Request Testnet funds" link in ConnectWallet dropdown which is shown when user is connected to a testnet.
   *
-   * @defaultValue false
+   * By default it is `false`
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet hideTestnetFaucet={false} />
+   * ```
   */
  hideTestnetFaucet?: boolean;

@@ -87,7 +184,7 @@ export type ConnectWalletProps = {
   * Please, note that if you support multiple networks in your app this prop should
   * be set to `false` to allow users to switch between networks.
   *
-   * @defaultValue false
+   * By default it is `false`
   */
  switchToActiveChain?: boolean;

@@ -96,52 +193,119 @@ export type ConnectWalletProps = {
   *
   * Modal size is always `compact` on mobile
   *
-   * @defaultValue "wide"
+   * By default it is `"wide"` for desktop.
   */
  modalSize?: "compact" | "wide";

  /**
   * If provided, Modal will show a Terms of Service message at the bottom with below link
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet termsOfServiceUrl="https://your-terms-of-service-url.com" />
+   * ```
   */
  termsOfServiceUrl?: string;

  /**
   * If provided, Modal will show a Privacy Policy message at the bottom with below link
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet privacyPolicyUrl="https://your-privacy-policy-url.com" />
+   * ```
   */
  privacyPolicyUrl?: string;

  /**
-   * Customize the welcome screen
+   * Customize the welcome screen. This prop is only applicable when modalSize prop is set to "wide". On "wide" Modal size, a welcome screen is shown on the right side of the modal.
   *
-   * Either provide a component to replace the default screen entirely
+   * This screen can be customized in two ways
   *
-   * or an object with title, subtitle and imgSrc to change the content of the default screen
+   * ### 1. Customize Metadata and Image
+   *
+   * ```tsx
+   * <ConnectWallet welcomeScreen={{
+   *  title: "your title",
+   *  subtitle: "your subtitle",
+   *  img: {
+   *   src: "https://your-image-url.png",
+   *   width: 300,
+   *   height: 50,
+   *  },
+   * }} />
+   * ```
+   *
+   * ### 2. Render Custom Component
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  welcomeScreen={() => {
+   *  return <YourCustomComponent />
+   * }}
+   * />
+   * ```
   */
  welcomeScreen?: WelcomeScreen;

  /**
-   * Override the default supported tokens for each network
+   * Customize the tokens shown in the "Send Funds" screen for various networks.
   *
-   * These tokens will be displayed in "Send Funds" Modal
+   * By default, The "Send Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token.
+   *
+   * @example
+   *
+   * supportedTokens prop allows you to customize this list as shown below which shows  "Dai Stablecoin" when users wallet is connected to the "Base" mainnet.
+   *
+   * ```tsx
+   * import { ConnectWallet } from '@thirdweb-dev/react';
+   * import { Base } from '@thirdweb-dev/chains';
+   *
+   * function Example() {
+   *   return (
+   * 		<ConnectWallet
+   * 			supportedTokens={{
+   * 				[Base.chainId]: [
+   * 					{
+   * 						address: '0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb', // token contract address
+   * 						name: 'Dai Stablecoin',
+   * 						symbol: 'DAI',
+   * 						icon: 'https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508',
+   * 					},
+   * 				],
+   * 			}}
+   * 		/>
+   * 	);
+   * }
+   * ```
   */
  supportedTokens?: SupportedTokens;

  /**
-   * Show balance of ERC20 token instead of the native token  in the "Connected" button when connected to certain network
+   * Display the balance of a token instead of the native token in ConnectWallet details button.
   *
   * @example
   * ```tsx
+   * import { Base } from "@thirdweb-dev/chains";
+   *
   * <ConnectWallet balanceToken={{
-   *  1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599" // show USDC balance when connected to Ethereum mainnet
-   * }} />
+   *    1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599" // show USDC balance when connected to Ethereum mainnet
+   *    [Base.chainId]: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // show Dai stablecoin token balance when connected to Base mainnet
+   *  }}
+   * />
   * ```
   */
  displayBalanceToken?: Record<number, string>;

  /**
-   * Hide the "switch to Personal wallet" option in the dropdown which is shown when wallet is connected to either Smart Wallet or Safe
+   * Hide the "Switch to Personal wallet" option in the wallet modal which is shown when wallet is connected to either Smart Wallet or Safe.
   *
-   * @defaultValue false
+   * By default it is `false`
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet hideSwitchToPersonalWallet={true} />
+   * ```
   */
  hideSwitchToPersonalWallet?: boolean;
 };
@@ -151,9 +315,11 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
 /**
 * A component that allows the user to connect their wallet.
 *
- * The button must be descendant of `ThirdwebProvider` in order to function.
+ * it renders a button which when clicked opens a modal to allow users to connect to wallets specified in the `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * This component must be descendant of `ThirdwebProvider`
 */
-export const ConnectWallet: React.FC<ConnectWalletProps> = (props) => {
+export function ConnectWallet(props: ConnectWalletProps) {
  const activeWallet = useWallet();
  const contextTheme = useCustomTheme();
  const theme = props.theme || contextTheme || "dark";
@@ -354,7 +520,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = (props) => {
      })()}
    </CustomThemeProvider>
  );
-};
+}

 function SwitchNetworkButton(props: {
  style?: React.CSSProperties;
@@ -25,6 +25,9 @@ import { ConnectWalletProps } from "../ConnectWallet";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { StyledDiv } from "../../../design-system/elements";

+/**
+ * @internal
+ */
 export const ConnectModalInline = (
  props: Omit<
    ConnectWalletProps,
@@ -34,7 +34,7 @@ import {
 import { useTWLocale } from "../../evm/providers/locale-provider";
 import { StyledButton, StyledP, StyledUl } from "../../design-system/elements";

-export type NetworkSelectorChain = React.FC<{
+export type NetworkSelectorChainProps = {
  /**
   * `Chain` object for the chain to be displayed
   */
@@ -55,7 +55,7 @@ export type NetworkSelectorChain = React.FC<{
   * function to close the modal
   */
  close?: () => void;
-}>;
+};

 export type NetworkSelectorProps = {
  /**
@@ -103,13 +103,7 @@ export type NetworkSelectorProps = {
  /**
   * Override how the chain button is rendered in the Modal
   */
-  renderChain?: React.FC<{
-    chain: Chain;
-    switchChain: () => void;
-    switching: boolean;
-    switchFailed: boolean;
-    close?: () => void;
-  }>;
+  renderChain?: React.FC<NetworkSelectorChainProps>;

  /**
   * Callback to be called when a chain is successfully switched
@@ -139,7 +133,7 @@ const fuseConfig = {
 };

 /**
- * Renders a Network Switcher Modal that allows users to switch their wallet to a different network
+ * Renders a Network Switcher Modal that allows users to switch their wallet to a different network.
 *
 * @example
 * ```tsx
@@ -156,7 +150,7 @@ const fuseConfig = {
 * }
 * ```
 */
-export const NetworkSelector: React.FC<NetworkSelectorProps> = (props) => {
+export function NetworkSelector(props: NetworkSelectorProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const deferredSearchTerm = useDeferredValue(searchTerm);
  const themeFromContext = useCustomTheme();
@@ -398,7 +392,7 @@ export const NetworkSelector: React.FC<NetworkSelectorProps> = (props) => {
      </Modal>
    </CustomThemeProvider>
  );
-};
+}

 const filterChainByType = (
  chains: Chain[],
@@ -421,7 +415,7 @@ const NetworkTab = (props: {
  popularChains?: Chain[];
  type: "testnet" | "mainnet" | "all";
  onSwitch: (chain: Chain) => void;
-  renderChain?: NetworkSelectorChain;
+  renderChain?: React.FC<NetworkSelectorChainProps>;
  close?: () => void;
 }) => {
  const allChains = useMemo(
@@ -496,7 +490,7 @@ const NetworkTab = (props: {
 const NetworkList = /* @__PURE__ */ memo(function NetworkList(props: {
  chains: Chain[];
  onSwitch: (chain: Chain) => void;
-  renderChain?: NetworkSelectorChain;
+  renderChain?: React.FC<NetworkSelectorChainProps>;
  close?: () => void;
 }) {
  const switchChain = useSwitchChain();
@@ -31,6 +31,31 @@ const fantomIcon =

 export type SupportedTokens = Record<number, TokenInfo[]>;

+/**
+ * Default tokens shown in `ConnectWallet`'s SendFunds screen for each network.
+ *
+ * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
+ *
+ * @example
+ * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
+ *
+ * ```tsx
+ * const ethereumChainId = 1;
+ *
+ * <ConnectWallet supportedTokens={{
+ *  ...defaultTokens,
+ *  [ethereumChainId]: [
+ *    {
+ *      address: 'YOUR_TOKEN_ADDRESS',
+ *      name: 'YOUR_TOKEN_NAME',
+ *      symbol: 'YOUR_TOKEN_SYMBOL',
+ *      icon: 'YOUR_TOKEN_ICON_URL'
+ *    },
+ *    ...defaultTokens[ethereumChainId],
+ *  ]
+ * }} />
+ * ```
+ */
 export const defaultTokens: SupportedTokens = {
  "1": [
    {
@@ -1,10 +1,59 @@
+/**
+ * Render custom Welcome Screen in "wide" ConnectWallet Modal either by passing a custom React component or by passing an object with custom title, subtitle and image
+ *
+ * @example
+ *
+ * ### Custom React component
+ * ```tsx
+ * <ConnectWallet
+ *  welcomeScreen={() => <div style={{
+ *    height: '100%',
+ *  }}>
+ *    ...
+ *  </div>}
+ * />
+ * ```
+ *
+ * ### Custom title, subtitle and image
+ * ```tsx
+ * <ConnectWallet
+ *  welcomeScreen={{
+ *    title: 'Custom Title',
+ *    subtitle: 'Custom Subtitle',
+ *    img: {
+ *      src: 'https://example.com/image.png',
+ *      width: 100,
+ *      height: 100,
+ *    }
+ *  })
+ * />
+ * ```
+ */
 export type WelcomeScreen =
  | {
+      /**
+       * Custom title
+       */
      title?: string;
+      /**
+       * Custom subtitle
+       */
      subtitle?: string;
+      /**
+       * Custom image
+       */
      img?: {
+        /**
+         * Image source
+         */
        src: string;
+        /**
+         * Image width
+         */
        width?: number;
+        /**
+         * Image height
+         */
        height?: number;
      };
    }
@@ -1,23 +1,58 @@
 import type { WalletConfig, WalletOptions } from "@thirdweb-dev/react-core";
 import { BloctoWallet } from "@thirdweb-dev/wallets";

-export type BloctoAdditionalOptions = {
+export type BloctoWalletConfigOptions = {
  /**
-   * Your app’s unique identifier that can be obtained at https://developers.blocto.app,
-   * To get advanced features and support with Blocto.
-   *
-   * https://docs.blocto.app/blocto-sdk/register-app-id
+   * To get advanced features and support from Blocto, you can create an appId from [blocto dashboard](https://docs.blocto.app/blocto-sdk/register-app-id)
   */
  appId?: string;

  /**
-   * If true, the wallet will be tagged as "reccomended" in ConnectWallet Modal
+   * If true, the wallet will be tagged as "reccomended" in `ConnectWallet` Modal
   */
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Blocto Wallet](https://blocto.io/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[bloctoWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const bloctoWalletConfig = bloctoWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(bloctoWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const bloctoWallet = (
-  options?: BloctoAdditionalOptions,
+  options?: BloctoWalletConfigOptions,
 ): WalletConfig<BloctoWallet> => ({
  id: BloctoWallet.id,
  recommended: options?.recommended,
@@ -2,7 +2,7 @@ import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
 import { Coin98Wallet, getInjectedCoin98Provider } from "@thirdweb-dev/wallets";
 import { Coin98ConnectUI } from "./Coin98ConnectUI";

-type Coin98WalletOptions = {
+export type Coin98WalletConfigOptions = {
  /**
   * When connecting Coin98 using the QR Code - Wallet Connect connector is used which requires a project id.
   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
@@ -17,8 +17,46 @@ type Coin98WalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Coin98 Wallet](https://coin98.com/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[coin98Wallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const coin98Config = coin98Wallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(coin98Config, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const coin98Wallet = (
-  options?: Coin98WalletOptions,
+  options?: Coin98WalletConfigOptions,
 ): WalletConfig<Coin98Wallet> => {
  return {
    id: Coin98Wallet.id,
@@ -12,10 +12,11 @@ import {
 } from "@thirdweb-dev/react-core";
 import { useEffect, useRef } from "react";

-type CoinbaseWalletOptions = {
+export type CoinbaseWalletConfigOptions = {
  /**
   * Whether to use the Coinbase's default QR Code modal or show the custom UI in ConnectWallet Modal
-   * @defaultValue "custom"
+   *
+   * The default is `"custom"`
   */
  qrmodal?: "coinbase" | "custom";

@@ -25,8 +26,46 @@ type CoinbaseWalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Coinbase Wallet](https://www.coinbase.com/wallet) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[coinbaseWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const coinbaseWalletConfig = coinbaseWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(coinbaseWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const coinbaseWallet = (
-  options?: CoinbaseWalletOptions,
+  options?: CoinbaseWalletConfigOptions,
 ): WalletConfig<CoinbaseWallet> => {
  const qrmodal = options?.qrmodal || "custom";

@@ -5,7 +5,7 @@ import {
 } from "@thirdweb-dev/wallets";
 import { CoreWalletConnectUI } from "./CoreWalletConnectUI";

-type CoreWalletOptions = {
+export type CoreWalletConfigOptions = {
  /**
   * When connecting Core using the QR Code - Wallet Connect connector is used which requires a project id.
   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
@@ -20,8 +20,46 @@ type CoreWalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Core Wallet](https://core.app/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[coreWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const coreWalletConfig = coreWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(coreWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const coreWallet = (
-  options?: CoreWalletOptions,
+  options?: CoreWalletConfigOptions,
 ): WalletConfig<CoreWallet> => {
  return {
    id: CoreWallet.id,
@@ -7,6 +7,18 @@ import { zerionWallet } from "./zerion/zerionWallet";
 import { rainbowWallet } from "./rainbow/RainbowWallet";
 import { phantomWallet } from "./phantom/phantomWallet";

+/**
+ * The default wallets that are used by the `ThirdwebProvider` if no `supportedWallets` prop is provided.
+ *
+ * The defaults wallets are:
+ * - Metamask
+ * - Coinbase
+ * - WalletConnect
+ * - TrustWallet
+ * - RainbowWallet
+ * - ZerionWallet
+ * - PhantomWallet
+ */
 export const defaultWallets: WalletConfig<any>[] = /* @__PURE__ */ (() => [
  metamaskWallet(),
  coinbaseWallet(),
@@ -5,7 +5,7 @@ import {
 } from "@thirdweb-dev/wallets";
 import { CryptoDefiWalletConnectUI } from "./CryptoDefiWalletConnectUI";

-type CryptoDefiWalletOptions = {
+export type CryptoDefiWalletConfigOptions = {
  /**
   * When connecting Defi wallet using the QR Code - Wallet Connect connector is used which requires a project id.
   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
@@ -20,8 +20,46 @@ type CryptoDefiWalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Crypto.com Defi Wallet](https://crypto.com/defi-wallet) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[cryptoDefiWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const cryptoDefiWalletConfig = cryptoDefiWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(cryptoDefiWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const cryptoDefiWallet = (
-  options?: CryptoDefiWalletOptions,
+  options?: CryptoDefiWalletConfigOptions,
 ): WalletConfig<CryptoDefiWallet> => {
  return {
    id: CryptoDefiWallet.id,
@@ -18,7 +18,7 @@ import { EmbeddedWalletSocialLogin } from "./EmbeddedWalletSocialLogin";
 import { EmbeddedWalletOTPLoginUI } from "./EmbeddedWalletOTPLoginUI";
 import {
  AuthOption,
-  EmbeddedWalletConfig,
+  EmbeddedWalletConfigOptions,
  EmbeddedWalletLoginType,
 } from "./types";

@@ -29,36 +29,139 @@ const DEFAULT_AUTH_OPTIONS: AuthOption[] = [
  "facebook",
 ];

+/**
+ * A wallet configurator for [Embedded Wallet](https://portal.thirdweb.com/wallet/embedded-wallet) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[embeddedWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useEmbeddedWallet
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The hook will return all the necessary functions you'll need to authenticate and connect to the embedded wallet.
+ *
+ * ### Connect with Google/Facebook/Apple sign in
+ *
+ * ```tsx
+ * import { useEmbeddedWallet } from "@thirdweb-dev/react";
+ *
+ * function App() {
+ *   const { connect } = useEmbeddedWallet();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect({
+ *       strategy: "google", // or "facebook" or "apple"
+ *     });
+ *
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ *
+ * ### Connect with Email verification
+ *
+ * ```tsx
+ * function App() {
+ *   const { connect, sendVerificationEmail } = useEmbeddedWallet();
+ *
+ *   const preLogin = async (email: string) => {
+ *     // send email verification code
+ *     await sendVerificationEmail({ email });
+ *   };
+ *
+ *   const handleLogin = async (email: string, verificationCode: string) => {
+ *     // verify email and connect
+ *     await connect({
+ *       strategy: "email_verification",
+ *       email,
+ *       verificationCode,
+ *     });
+ *   };
+ *
+ *   return <div> ... </div>;
+ * }
+ * ```
+ *
+ * ### Connecting with Iframe
+ *
+ * ```tsx
+ * function App() {
+ *   const { connect } = useEmbeddedWallet();
+ *
+ *   const handleConnect = async () => {
+ *     await connect({
+ *       strategy: "iframe",
+ *     });
+ *   };
+ *
+ *   return <div> ... </div>;
+ * }
+ * ```
+ *
+ * ### Connect with your own auth with JWT
+ *
+ * ```tsx
+ *  function App() {
+ *   const { connect } = useEmbeddedWallet();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect({
+ *       strategy: "jwt",
+ *       jwt: "your_jwt_token",
+ *     });
+ *
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+
+ */
 export const embeddedWallet = (
-  _config?: EmbeddedWalletConfig,
+  options?: EmbeddedWalletConfigOptions,
 ): WalletConfig<EmbeddedWallet> => {
-  const defaultConfig: EmbeddedWalletConfig = {
+  const defaultConfig: EmbeddedWalletConfigOptions = {
    auth: {
      options: DEFAULT_AUTH_OPTIONS,
    },
  };

-  const config: EmbeddedWalletConfig = _config
-    ? { ...defaultConfig, ..._config }
+  const finalOptions: EmbeddedWalletConfigOptions = options
+    ? { ...defaultConfig, ...options }
    : defaultConfig;

-  const { auth } = config;
+  const { auth } = finalOptions;

  return {
    category: "socialLogin",
    isHeadless: true,
    id: EmbeddedWallet.id,
-    recommended: config?.recommended,
+    recommended: finalOptions?.recommended,
    meta: {
      ...EmbeddedWallet.meta,
      name: "Email",
      iconURL: emailIcon,
    },
-    create(options: WalletOptions) {
+    create(walletOptions: WalletOptions) {
      return new EmbeddedWallet({
-        ...options,
-        ...config,
-        clientId: options?.clientId ?? "",
+        ...walletOptions,
+        ...finalOptions,
+        clientId: walletOptions?.clientId ?? "",
      });
    },
    selectUI(props) {
@@ -5,7 +5,7 @@ import type {

 export type AuthOption = EmbeddedWalletOauthStrategy | "email";

-export type EmbeddedWalletConfig = Omit<
+export type EmbeddedWalletConfigOptions = Omit<
  EmbeddedWalletAdditionalOptions,
  "chain" | "clientId"
 > & {
@@ -16,7 +16,14 @@ export type EmbeddedWalletConfig = Omit<

  /**
   * Choose which auth providers to show in the wallet connection UI
-   * @defaultValue `auth: { options: ["email", "google", "apple", "facebook"] }`
+   *
+   * By default, all auth methods are enabled, which is equivalent to setting the following:
+   *
+   * ```ts
+   * {
+   *  options: ["email", "google", "apple", "facebook"]
+   * }
+   * ```
   */
  auth?: {
    options: AuthOption[];
@@ -2,15 +2,53 @@ import type { WalletConfig, WalletOptions } from "@thirdweb-dev/react-core";
 import { FrameWallet, assertWindowEthereum } from "@thirdweb-dev/wallets";
 import { FrameConnectUI } from "./FrameConnectUI";

-type FrameConfig = {
+export type FrameWalletConfigOptions = {
  /**
   * If true, the wallet will be tagged as "reccomended" in ConnectWallet Modal
   */
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [Frame Wallet](https://frame.sh/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[frameWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const frameWalletConfig = frameWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(frameWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const frameWallet = (
-  config?: FrameConfig,
+  config?: FrameWalletConfigOptions,
 ): WalletConfig<FrameWallet> => ({
  id: FrameWallet.id,
  recommended: config?.recommended,
@@ -8,6 +8,44 @@ const desktopIcon =

 const phoneIcon = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiByeD0iMTIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl80NF8yKSIvPgo8cGF0aCBkPSJNNDguNjE1NCAxNkgzMS4zODQ2QzI4LjQxMjMgMTYgMjYgMTguMzkyNyAyNiAyMS4zNDA5VjU3LjY1OTFDMjYgNjAuNjA3MyAyOC40MTIzIDYzIDMxLjM4NDYgNjNINDguNjE1NEM1MS41ODc3IDYzIDU0IDYwLjYwNzMgNTQgNTcuNjU5MVYyMS4zNDA5QzU0IDE4LjM5MjcgNTEuNTg3NyAxNiA0OC42MTU0IDE2Wk00MCA2MC44NjM2QzM4LjIxMjMgNjAuODYzNiAzNi43NjkyIDU5LjQzMjMgMzYuNzY5MiA1Ny42NTkxQzM2Ljc2OTIgNTUuODg1OSAzOC4yMTIzIDU0LjQ1NDUgNDAgNTQuNDU0NUM0MS43ODc3IDU0LjQ1NDUgNDMuMjMwOCA1NS44ODU5IDQzLjIzMDggNTcuNjU5MUM0My4yMzA4IDU5LjQzMjMgNDEuNzg3NyA2MC44NjM2IDQwIDYwLjg2MzZaTTQ5LjY5MjMgNTIuMzE4MkgzMC4zMDc3VjIyLjQwOTFINDkuNjkyM1Y1Mi4zMTgyWiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80NF8yIiB4MT0iNDAiIHkxPSIwIiB4Mj0iNDAiIHkyPSI4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjQ0UxMUFCIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzkwMEJCNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=`;

+/**
+ * A wallet configurator for Local wallet which allows integrating a "Guest Login" experience to app.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[localeWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const localeWalletConfig = localeWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(localeWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const localWallet = (
  config?: LocalWalletConfigOptions,
 ): LocalWalletConfig => {
@@ -9,7 +9,7 @@ export type LocalWalletConfigOptions = {
   * If `false`, wallet will not be stored, and no password will be required to connect.
   * the wallet will be lost when the user leaves or reloads the page.
   *
-   * @defaultValue true
+   * By default, it is set to `true`.
   */
  persist?: boolean;
 };
@@ -43,13 +43,57 @@ import {
 } from "../../ConnectWallet/icons/socialLogins";
 import { useCustomTheme } from "../../../design-system/CustomThemeProvider";

+export type MagicWalletConfigOptions = MagicLinkAdditionalOptions & {
+  /**
+   * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
+   */
+  recommended?: boolean;
+};
+
+/**
+ * A wallet configurator for [Magic Link](https://magic.link/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[magicLink({
+ *   apiKey: "MAGIC_API_KEY,
+ * })]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const magicLinkConfig = magicLink({
+ *   apiKey: "MAGIC_API_KEY,
+ * });
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(magicLinkConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export function magicLink(
-  config: MagicLinkAdditionalOptions & {
-    /**
-     * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
-     */
-    recommended?: boolean;
-  },
+  config: MagicWalletConfigOptions,
 ): ConfiguredMagicLinkWallet {
  const emailLoginEnabled = config.emailLogin !== false;
  const smsLoginEnabled = config.smsLogin !== false;
@@ -5,7 +5,7 @@ import {
 } from "@thirdweb-dev/wallets";
 import { MetamaskConnectUI } from "./MetamaskConnectUI";

-type MetamaskWalletOptions = {
+export type MetamaskWalletConfigOptions = {
  /**
   * When connecting MetaMask using the QR Code - Wallet Connect connector is used which requires a project id.
   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
@@ -20,8 +20,46 @@ type MetamaskWalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [MetaMask Wallet](https://metamask.io/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[metamaskWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const metamaskWalletConfig = metamaskWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(metamaskWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const metamaskWallet = (
-  options?: MetamaskWalletOptions,
+  options?: MetamaskWalletConfigOptions,
 ): WalletConfig<MetaMaskWallet> => {
  return {
    id: MetaMaskWallet.id,
@@ -2,7 +2,7 @@ import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
 import { OKXWallet, getInjectedOKXProvider } from "@thirdweb-dev/wallets";
 import { OKXConnectUI } from "./OKXConnectUI";

-type OKXWalletOptions = {
+export type OKXWalletConfigOptions = {
  /**
   * When connecting OKX using the QR Code - Wallet Connect connector is used which requires a project id.
   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
@@ -17,8 +17,46 @@ type OKXWalletOptions = {
  recommended?: boolean;
 };

+/**
+ * A wallet configurator for [OKX Wallet](https://www.okx.com/web3) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[okxWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const okxWalletConfig = okxWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(okxWalletConfig);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
 export const okxWallet = (
-  options?: OKXWalletOptions,
+  options?: OKXWalletConfigOptions,
 ): WalletConfig<OKXWallet> => {
  return {
    id: OKXWallet.id,
@@ -0,0 +1,148 @@
+import { ConnectUIProps, useConnect } from "@thirdweb-dev/react-core";
+import { ConnectingScreen } from "../../ConnectWallet/screens/ConnectingScreen";
+import { isMobile } from "../../../evm/utils/isMobile";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { OneKeyScan } from "./OneKeyScan";
+import { GetStartedScreen } from "../../ConnectWallet/screens/GetStartedScreen";
+import type { OneKeyWallet } from "@thirdweb-dev/wallets";
+import { wait } from "../../../utils/wait";
+import { useTWLocale } from "../../../evm/providers/locale-provider";
+import { WCOpenURI } from "../../ConnectWallet/screens/WCOpenUri";
+import { oneKeyWalletUris } from "./oneKeyWalletUris";
+
+export const OneKeyConnectUI = (props: ConnectUIProps<OneKeyWallet>) => {
+  const [screen, setScreen] = useState<
+    "connecting" | "scanning" | "get-started" | "open-wc-uri"
+  >("connecting");
+  const locale = useTWLocale().wallets.oneKeyWallet;
+  const connectingLocale = {
+    getStartedLink: locale.getStartedLink,
+    instruction: locale.connectionScreen.instruction,
+    tryAgain: locale.connectionScreen.retry,
+    inProgress: locale.connectionScreen.inProgress,
+    failed: locale.connectionScreen.failed,
+  };
+  const { walletConfig, connected } = props;
+  const connect = useConnect();
+  const [errorConnecting, setErrorConnecting] = useState(false);
+
+  const hideBackButton = props.supportedWallets.length === 1;
+
+  const connectToExtension = useCallback(async () => {
+    try {
+      connectPrompted.current = true;
+      setErrorConnecting(false);
+      setScreen("connecting");
+      await wait(1000);
+      await connect(walletConfig);
+      connected();
+    } catch (e) {
+      setErrorConnecting(true);
+      console.error(e);
+    }
+  }, [connected, connect, walletConfig]);
+
+  const connectPrompted = useRef(false);
+  useEffect(() => {
+    if (connectPrompted.current) {
+      return;
+    }
+
+    const isInstalled = walletConfig.isInstalled
+      ? walletConfig.isInstalled()
+      : false;
+
+    // if loading
+    (async () => {
+      if (isInstalled) {
+        connectToExtension();
+      }
+
+      // if wallet is not injected
+      else {
+        // on mobile, open the OneKey Mobile via wallet connect
+        if (isMobile()) {
+          setScreen("open-wc-uri");
+        } else {
+          // on desktop, show the OneKey app scan qr code
+          setScreen("scanning");
+        }
+      }
+    })();
+  }, [connectToExtension, walletConfig]);
+
+  if (screen === "connecting") {
+    return (
+      <ConnectingScreen
+        locale={{
+          getStartedLink: locale.getStartedLink,
+          instruction: locale.connectionScreen.instruction,
+          tryAgain: locale.connectionScreen.retry,
+          inProgress: locale.connectionScreen.inProgress,
+          failed: locale.connectionScreen.failed,
+        }}
+        errorConnecting={errorConnecting}
+        onGetStarted={() => {
+          setScreen("get-started");
+        }}
+        onRetry={connectToExtension}
+        hideBackButton={hideBackButton}
+        onBack={props.goBack}
+        walletName={walletConfig.meta.name}
+        walletIconURL={walletConfig.meta.iconURL}
+      />
+    );
+  }
+
+  if (screen === "open-wc-uri") {
+    return (
+      <WCOpenURI
+        locale={connectingLocale}
+        onRetry={() => {
+          // NOOP - TODO make onRetry optional
+        }}
+        errorConnecting={errorConnecting}
+        onGetStarted={() => {
+          setScreen("get-started");
+        }}
+        hideBackButton={hideBackButton}
+        onBack={props.goBack}
+        onConnected={connected}
+        walletConfig={walletConfig}
+        appUriPrefix={oneKeyWalletUris}
+      />
+    );
+  }
+
+  if (screen === "get-started") {
+    return (
+      <GetStartedScreen
+        locale={{
+          scanToDownload: locale.getStartedScreen.instruction,
+        }}
+        walletIconURL={walletConfig.meta.iconURL}
+        walletName={walletConfig.meta.name}
+        chromeExtensionLink={walletConfig.meta.urls?.chrome}
+        googlePlayStoreLink={walletConfig.meta.urls?.android}
+        appleStoreLink={walletConfig.meta.urls?.ios}
+        onBack={props.goBack}
+      />
+    );
+  }
+
+  if (screen === "scanning") {
+    return (
+      <OneKeyScan
+        onBack={props.goBack}
+        onConnected={props.connected}
+        onGetStarted={() => {
+          setScreen("get-started");
+        }}
+        hideBackButton={hideBackButton}
+        walletConfig={walletConfig}
+      />
+    );
+  }
+
+  return null;
+};
@@ -0,0 +1,65 @@
+import { ScanScreen } from "../../ConnectWallet/screens/ScanScreen";
+import {
+  useCreateWalletInstance,
+  useWalletContext,
+} from "@thirdweb-dev/react-core";
+import { useEffect, useRef, useState } from "react";
+import type { OneKeyWallet } from "@thirdweb-dev/wallets";
+import type { WalletConfig } from "@thirdweb-dev/react-core";
+import { useTWLocale } from "../../../evm/providers/locale-provider";
+
+export const OneKeyScan: React.FC<{
+  onBack: () => void;
+  onGetStarted: () => void;
+  onConnected: () => void;
+  walletConfig: WalletConfig<OneKeyWallet>;
+  hideBackButton: boolean;
+}> = ({ onBack, onConnected, onGetStarted, walletConfig, hideBackButton }) => {
+  const locale = useTWLocale().wallets.oneKeyWallet;
+  const createInstance = useCreateWalletInstance();
+  const [qrCodeUri, setQrCodeUri] = useState<string | undefined>();
+  const { setConnectedWallet, chainToConnect, setConnectionStatus } =
+    useWalletContext();
+
+  const scanStarted = useRef(false);
+  useEffect(() => {
+    if (scanStarted.current) {
+      return;
+    }
+    scanStarted.current = true;
+
+    const wallet = createInstance(walletConfig);
+
+    setConnectionStatus("connecting");
+    wallet.connectWithQrCode({
+      chainId: chainToConnect?.chainId,
+      onQrCodeUri(uri) {
+        setQrCodeUri(uri);
+      },
+      onConnected() {
+        setConnectedWallet(wallet);
+        onConnected();
+      },
+    });
+  }, [
+    createInstance,
+    setConnectedWallet,
+    chainToConnect,
+    onConnected,
+    walletConfig,
+    setConnectionStatus,
+  ]);
+
+  return (
+    <ScanScreen
+      qrScanInstruction={locale.scanScreen.instruction}
+      onBack={onBack}
+      onGetStarted={onGetStarted}
+      qrCodeUri={qrCodeUri}
+      walletName={walletConfig.meta.name}
+      walletIconURL={walletConfig.meta.iconURL}
+      hideBackButton={hideBackButton}
+      getStartedLink={locale.getStartedLink}
+    />
+  );
+};
@@ -0,0 +1,90 @@
+import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
+import { OneKeyWallet, getInjectedOneKeyProvider } from "@thirdweb-dev/wallets";
+import { OneKeyConnectUI } from "./OneKeyConnectUI";
+
+export type OneKeyWalletConfigOptions = {
+  /**
+   * When connecting OneKey wallet using the QR Code - Wallet Connect connector is used which requires a project id.
+   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
+   *
+   * https://docs.walletconnect.com/2.0/web3modal/options#projectid-required
+   */
+  projectId?: string;
+
+  /**
+   * If true, the wallet will be tagged as "reccomended" in ConnectWallet Modal
+   */
+  recommended?: boolean;
+};
+
+/**
+ * A wallet configurator for [Onekey Wallet](https://onekey.so/) which allows integrating the wallet with React.
+ *
+ * It returns a `WalletConfig` object which can be used to connect the wallet to app via `ConnectWallet` component or `useConnect` hook.
+ *
+ * @example
+ *
+ * ### Usage with ConnectWallet
+ *
+ * To allow users to connect to this wallet using the `ConnectWallet` component, you can add it to `ThirdwebProvider`'s supportedWallets prop.
+ *
+ * ```tsx
+ * <ThirdwebProvider supportedWallets={[oneKeyWallet()]}>
+ *  <App />
+ * </ThirdwebProvider>
+ * ```
+ *
+ * ### Usage with useConnect
+ *
+ * you can use the `useConnect` hook to programmatically connect to the wallet without using the `ConnectWallet` component.
+ *
+ * The wallet also needs to be added in `ThirdwebProvider`'s supportedWallets if you want the wallet to auto-connect on next page load.
+ *
+ * ```tsx
+ * const oneKeyWalletConfig = oneKeyWallet();
+ *
+ * function App() {
+ *   const connect = useConnect();
+ *
+ *   async function handleConnect() {
+ *     const wallet = await connect(oneKeyWalletConfig, options);
+ *     console.log('connected to', wallet);
+ *   }
+ *
+ *   return <button onClick={handleConnect}> Connect </button>;
+ * }
+ * ```
+ */
+export const oneKeyWallet = (
+  options?: OneKeyWalletConfigOptions,
+): WalletConfig<OneKeyWallet> => {
+  return {
+    id: OneKeyWallet.id,
+    recommended: options?.recommended,
+    meta: {
+      name: "OneKey Wallet",
+      urls: {
+        chrome:
+          "https://chrome.google.com/webstore/detail/onekey/jnmbobjmhlngoefaiojfljckilhhlhcj",
+        android:
+          "https://play.google.com/store/apps/details?id=so.onekey.app.wallet",
+        ios: "https://apps.apple.com/us/app/onekey-blockchain-defi-wallet/id1609559473",
+      },
+      iconURL:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAAXNSR0IArs4c6QAACZ9JREFUeF7tnU9M1EcUx98gNhiFlFhMAYurbcAFrCZNq0lNigKJR7XnKl7btGerB/FQ61nTXiXtucrdRTFpk1LbQ1tg1VglVqSBGMyuRlIWpnk/+NFlWdyZnfn92Tfvl+DBzG9m3vd99r33m/n9EVDmcSS9L5GD3Em5KBNCiIQEmRAgEmV2x6eFpIAEOYFDCRATUsqJqqqqW/h/qeTocDlTEDonrUAjZR/DoqNc/NsiREKIgVRy9LzObJUA8sEBCf06nXPbylNAF6SSAPWkO7tAws3Kk4JnbKKAKkivBKgn3XmOo46JGyr7XBWI1gWoZ7wTo05XZUvAs7ehgJRyYKhj7FSxvooCxPDYkJ1WH+tBtAYgTlu0HG/VGgH9hVdpqwDigtmq3OQ6w5qoSlSdv578c8A3bhVA3eMdD3l9h5zfrRqEEA21j+1cAxCnLqs6k+4svx5aiUA9452StNVsnDUF8qOQBxBHH2vautPRckHtAcS1jzt+t2WpH4WWIhCnL1u6utWPgEOiN72nT0p5xS3L2VorCgjoF91jHVeEEH1WOuROXFNgWPC2hWs+t2rvsOAC2qqgTnXm7dZzAe2Uz60aywBZldPNzjgCuel3a1YzQNakdLMjBshNv1uzmgGyJqWbHTFAbvrdmtUMkDUp3eyIAXLT79asZoCsSelmRwyQm363ZrUzAM0MZSB7Z86acPXvb4b6DzZb669SO3IGoJ9678HLyX+t+WnXZ9sA/1w/nADo+Z05+Pn4fau+ZoCW5HQCoHsXp+DRd08ZIKsKOASQ7fSF0nEEcgSgINIXA/R/KCOfwv7+/inc/XrKevDmCORIBBr5+D5k0/Yu330SGSAHAJqbnIcfe+9ajz6cwhxJYUGlLwbIEYCCSl8MkCMAYQpTPX7tewA67bkGcqAGUoUH22GtxADpKMYArVKLAdKHx5mtDBVpGCAVlda2Ib+QqCoLA6Sq1Op2DNCyHgwQA1SeAgyQkW4cgRggBshIAQbISD6OQAwQA2SkAANkJB9HIAaIATJSgAEyko8jEAPEABkpwAAZyccRiAFigIwUYICM5OMIxAAxQEYKMEBG8nEEYoAYICMFGCAj+TgCMUAMkJECyyfjM2TzmQXlrvgFU0tScQRSRoYbFlOAAWIujBRggIzk45MZoCIM5LKLkMssrLxTsbp2A2za/hpU11YxMQUKOA8QwpJNv4SZG1nI3nkJ+EKq9YrpjXUbYMvuGqjdvQkaDtfyW1pdLqIRlCeDz2BqcFbr6iv/B7ip+TUPol2fboOa5o1ORifnIhA+/z529jHM/vLCqsObjtU7CZJTAD34Zhp013t0KXPtrR1OAIRR5/fPH3k1ThgHprb3BnY6kdbIA4S1DsJj8y31KhAiRO9eaoHaZI1K84ptQxoghOe3vodlF8mmXsXLf4xElCEiCxCmLXzFnc7+likwxc5HiA5cfYdsOiMJEMKDkSfstLUegJjO9l99GxAmagdJgMbPTsKTa7Ox8hWuF2E6o3aQA2hq8BmMnXlclp9wpbmhuw5q22q8FWeMHHhgJMN6avb2C++v3LTYcWE7NB59vay5xfUkUgDhtsTI8fvaqQvBeeuTrdBy4o2S+104xkwqAw++ndYeB1PYwVQrqVRGCiBcKMQ/nQMjQtuXTSXBKewT6ywc68mgXqqkttBICiDdzzrZcKYutNSiEBmAdGsfG/D4UUkXor2Xd0BDd61OoIxtWzIA4WW76gZpEFdEUY8fFWEkAMplF2B4f1pZw4PX26wv7Ol8GYhSGiMBEEYejAAqR9PRemi/0KzSVLvN+JlJ5aIa14QofDacBEA6n3UK0nE6ILeeboSWE1u1IY3bCSQAUv3lY+roGkkG6oNbB9JKC41BRsJADSzonARAqgVsEMVzobP++OIRTKcyJX0YxlxKTsJCAxIAqX5YDlMGpo4gD9Vv1OM2yYfXW4OcSih9kwBI9TsXNtd+1vOO6poQAxQK32qDqAIUpwiEjwbhLR6VfpCIQKo1UBiFK9dAFfiTUL0KCyNtqO7H4W0jey+3VKDaq6dMIgKpFq5oehCr0L6kOqvRYdRjYdBJAqCZoYz35IXKEaTjdO6E3HtpBzT0VP6GKgmAdPbCgtqH0r0PO8hIqPJDstWGBEAohmohjW3xzsPW02/a0tDrRyf6UFlERLvJAKS6/uJTY/P+ZJ29OBy/46vt0HiMxr3RZADCNIZXQKo3vNt66E9nA9WHl0r6IhWB0BidqzHfmSa74rqRB8cMYy3Kam4u0RmZCIR2lvs0Kq7JtJ1uVL7JDKMOPpWhegdkvg8oRR9yEQgN0q2F8p2LxS1GiC1tNWueZ0c4Z25kYHooUxY4OE6QSwhhRp38sUhFIDQMa6GR439pP7NVzAH+W8cQHtMjjFVw0zmWcz45gFCEqN/KUegIfHBx/w80X7BAEiB04NS1Z96r7OJwmBTqcZj/q+ZAFiDTesiW4yjWPaRroELHmxTVphBRjjy+NqQjkG8kbrbeu/iPlcJaBSqsefD1dhQe2yllrxMA+WtEQbzet1BghAa3Klx5b7QzAPmOxuK6nFezlPol4mU6vnCcyh5XKXudSmHFxLAFEkacbYfroPFYvfYrYlSdFOd2zkWgQmf4nzyYvf0csuk5JV/hW1cbDtcBf3SO0O0cSp5XaIT7W7iajavP89mlLxjWNC19B6MuuQlqmvmrPU5dxisww00MFHA+hRlox6dSuiORvRmNAhyBotGdzKgMEBlXRmMIAxSN7mRGZYDIuDIaQxigaHQnMyoDRMaV0RjCAEWjO5lRGSAyrozGENE93vFQgEhEMzyPWskKSJATGIFuAkBXJRvCc49MgWEGKDLtK39gKeWA6E3v6ZNSXql8c9iCsBUQQpwSR9L7EjmZU/vQRNgz5PFirUC1qN4pcIZcB8XaT7GdXKp9VHgAcRqLrY/iOzEB/ank6HkPIE5j8fVTXGeG0Qfn5v3DUSiuborpvJajzyqAMArNy/mbvKgYU6fFaFp+9FkFEEehGHkozlMRcCiVHB32p7iSwvz/6El3ngMJ/XG2gecWkQJ5qWtdgLzLeoYoIg/FetjhVPvoocIZrolAK1dlkDvJkSjWDg1zckXhWVMDFc6II1GYPorpWEXSVv5Mi0ag/AY96c4u3Cvjq7OYOjigaXm3aghxKr9gLjZUSYA4pQXkoZh2uwzOAK4yq0xRCSC/I2/Feqk2wvuH+B4iFYUrpI0uOK+8ClOxGWFagIWuxcXFj4QQCQkywWlORblo2yAoS8WvmJBSTogqMaEabYrN/D+ZQA7oQV+JEwAAAABJRU5ErkJggg==",
+    },
+    create: (walletOptions: WalletOptions) => {
+      const wallet = new OneKeyWallet({
+        ...walletOptions,
+        projectId: options?.projectId,
+        qrcode: false,
+      });
+
+      return wallet;
+    },
+    connectUI: OneKeyConnectUI,
+    isInstalled() {
+      return !!getInjectedOneKeyProvider();
+    },
+  };
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	3e526d46fa	Version Packages (#2036 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-12-05 21:14:32 -08:00
Manan TankandGitHub	a36c7e8331	Update typedoc setup, JSDoc improvements (#1842 ) Signed-off-by: Manan Tank <[email protected]>	2023-12-05 19:00:11 +00:00
Kien Ngo GitHub Manan Tank	7bb054e45c	[wallets] Remove barrel files (#2040 ) Co-authored-by: Manan Tank <[email protected]>	2023-12-05 15:22:22 +00:00
Kien Ngo GitHub Manan Tank	cd87be4a24	[react-core] Remove barrel files (#2039 ) Co-authored-by: Manan Tank <[email protected]>	2023-12-05 15:17:24 +00:00
Joaquim VergesandGitHub	aefc4cda4c	[SDK] Add migration role (#2051 )	2023-12-05 06:08:30 +00:00
YashandGitHub	cfe81b4432	[SDK] Update implementation (#2050 )	2023-12-05 05:33:40 +00:00
Jonas DanielsandGitHub	72c0bb10d6	fix(contract-roles): ensure connected wallet address is removed last (#2049 )	2023-12-05 01:27:07 +00:00
YashandGitHub	ca618ea0c9	[SDK] Metadata role for nft base contracts (#2048 )	2023-12-04 23:31:02 +00:00
YashandGitHub	d20e789856	[SDK] Update publisher and registry (#2044 )	2023-12-04 19:11:29 +00:00
Manan TankandGitHub	a135857c7a	[react] Fix EmbeddedWalletConfigOptions type (#2045 )	2023-12-04 17:44:24 +00:00
Manan TankandGitHub	34546c24c7	improved smart wallet autoconnect (#2043 )	2023-12-04 15:58:41 +00:00
Manan TankandGitHub	61c62b3f07	[react, wallets] JSDoc Improvements, Type exports for autogenerated docs (#2042 )	2023-12-04 13:57:22 +00:00
Jonas DanielsandGitHub	f2390b64e8	testing(merkletree): add additional tests back (#2041 )	2023-12-04 03:41:03 +00:00
Kien Ngo GitHub Manan Tank	4ae1cd63bb	[wallet, react] Add OneKey wallet (#1938 ) Co-authored-by: Manan Tank <[email protected]>	2023-12-03 12:00:32 +00:00