Merge branch 'master' into mipd

AyushBherwani1998 · web-flow · commit 2b01a28888e5 · 2024-08-26T09:28:48.000+05:30
diff --git a/docs/connect-blockchain/other/aptos.mdx b/docs/connect-blockchain/other/aptos.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Aptos Blockchain | Documentation - Web
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [Aptos](https://aptos.dev/) you get a
 standard provider from which you can get the private key of the user. Using this private key, you
diff --git a/docs/connect-blockchain/other/cosmos.mdx b/docs/connect-blockchain/other/cosmos.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Cosmos Blockchain | Documentation - We
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [Cosmos](https://cosmos.network/) you get
 a standard provider from which you can get the private key of the user. Using this private key, you
diff --git a/docs/connect-blockchain/other/immutablex.mdx b/docs/connect-blockchain/other/immutablex.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the ImmutableX Blockchain | Documentation
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193)
 provider, similar to the [Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html).
diff --git a/docs/connect-blockchain/other/near.mdx b/docs/connect-blockchain/other/near.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Near Protocol | Documentation - Web3Au
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [NEAR](https://near.org/), you get a
 standard provider from which you can get the user's private key. Using this private key, you can use
diff --git a/docs/connect-blockchain/other/polkadot.mdx b/docs/connect-blockchain/other/polkadot.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Polkadot Blockchain | Documentation -
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [Polkadot](https://www.polkadot.network/)
 you get a standard provider from which you can get the private key of the user. Using this private
diff --git a/docs/connect-blockchain/other/polymesh.mdx b/docs/connect-blockchain/other/polymesh.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Polymesh Blockchain | Documentation -
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [Polymesh](https://www.polymesh.network/)
 you get a standard provider from which you can get the private key of the user. Using this private
diff --git a/docs/connect-blockchain/other/starkex.mdx b/docs/connect-blockchain/other/starkex.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the StarkEx Blockchain | Documentation - W
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [StarkEx](https://starkware.co/starkex/)
 you get a standard provider from which you can get the private key of the user. Using this private
diff --git a/docs/connect-blockchain/other/starknet.mdx b/docs/connect-blockchain/other/starknet.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the StarkNet Blockchain | Documentation -
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non EVM chain like [StarkNet](https://starkware.co/starknet/)
 you get a standard provider from which you can get the private key of the user. Using this private
diff --git a/docs/connect-blockchain/other/sui.mdx b/docs/connect-blockchain/other/sui.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Sui Blockchain | Documentation - Web3A
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non-EVM chain like [Sui](https://sui.io/) you get a standard
 provider from which you can get the private key of the user. Using this private key, you can use the
diff --git a/docs/connect-blockchain/other/tezos.mdx b/docs/connect-blockchain/other/tezos.mdx
@@ -9,6 +9,8 @@ description: "Integrate Web3Auth with the Tezos Blockchain | Documentation - Web
 
 import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import InitializeWeb3Auth from "@site/src/common/docs/_initialize-web3auth-other-pnp-sfa.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 While using the Web3Auth Web SDK for a non EVM chain like [Tezos](https://tezos.com/) you get a
 standard provider from which you can get the private key of the user. Using this private key, you
diff --git a/docs/sdk/pnp/web/modal/install.mdx b/docs/sdk/pnp/web/modal/install.mdx
@@ -4,6 +4,9 @@ sidebar_label: "Install"
 description: "Installing Web3Auth PnP Web Modal SDK | Documentation - Web3Auth"
 ---
 
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
 ## [`@web3auth/modal`](https://npmjs.com/package/@web3auth/modal)
 
 ```bash npm2yarn
@@ -90,5 +93,5 @@ environment. These are node dependencies that need to be polyfilled in your appl
 Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
 building the app. We have created guides for different bundlers to help you with this issue:
 
-- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
 - Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
+- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
diff --git a/docs/sdk/pnp/web/modal/modal-hooks.mdx b/docs/sdk/pnp/web/modal/modal-hooks.mdx
@@ -6,6 +6,8 @@ description: "React Hooks for Web3Auth PnP Web Modal SDK | Documentation - Web3A
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import ExampleCards from "@theme/ExampleCards";
+import { examples } from "@site/src/common/maps";
 
 Web3Auth provides essential React hooks for Web3Auth Modal SDK for managing authentication, chain
 configuration, and user interactions within your application. These hooks can be directly imported
@@ -298,112 +300,6 @@ following functions:
   await logout();
   ```
 
-### Example Usage
-
-```typescript title="web3AuthProviderProps.ts"
-import { Web3AuthContextConfig } from "@web3auth/modal-react-hooks";
-import { Web3AuthOptions } from "@web3auth/modal";
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
-import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
-
-const chainConfig = {
-  chainId: "0xaa36a7", // for wallet connect make sure to pass in this chain in the loginSettings of the adapter.
-  displayName: "Ethereum Sepolia",
-  chainNamespace: CHAIN_NAMESPACES.EIP155,
-  tickerName: "Ethereum Sepolia",
-  ticker: "ETH",
-  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
-  blockExplorerUrl: "https://sepolia.etherscan.io",
-  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({
-  config: {
-    chainConfig,
-  },
-});
-
-const web3AuthOptions: Web3AuthOptions = {
-  clientId:
-    "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
-  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
-  privateKeyProvider: privateKeyProvider,
-};
+## Examples
 
-const openloginAdapter = new OpenloginAdapter();
-
-const walletServicesPlugin = new WalletServicesPlugin({
-  wsEmbedOpts: {},
-  walletInitOptions: { whiteLabel: { showWidgetButton: true } },
-});
-
-export const web3AuthContextConfig: Web3AuthContextConfig = {
-  web3AuthOptions,
-  adapters: [openloginAdapter],
-  plugins: [walletServicesPlugin],
-};
-```
-
-```typescript title="App.tsx"
-import React from "react";
-import { Web3AuthProvider, useWeb3Auth } from "@web3auth/modal-react-hooks";
-import { web3AuthContextConfig } from "./web3AuthProviderProps";
-
-const App = () => {
-  const {
-    connect,
-    logout,
-    isConnected,
-    enableMFA,
-    addAndSwitchChain,
-    authenticateUser,
-    addChain,
-    switchChain,
-  } = useWeb3Auth();
-
-  return (
-    <Web3AuthProvider config={web3AuthContextConfig}>
-      <div>
-        {isConnected ? (
-          <>
-            <button onClick={logout}>Logout</button>
-            <button onClick={enableMFA}>Enable MFA</button>
-            <button
-              onClick={() =>
-                addAndSwitchChain({
-                  chainId: "0x89",
-                  rpcTarget: "https://rpc.ankr.com/polygon",
-                  displayName: "Polygon Mainnet",
-                  ticker: "MATIC",
-                })
-              }
-            >
-              Add and Switch Chain
-            </button>
-            <button onClick={authenticateUser}>Authenticate User</button>
-            <button
-              onClick={() =>
-                addChain({
-                  chainId: "0x89",
-                  rpcTarget: "https://rpc.ankr.com/polygon",
-                  displayName: "Polygon Mainnet",
-                  ticker: "MATIC",
-                })
-              }
-            >
-              Add Chain
-            </button>
-            <button onClick={() => switchChain({ chainId: "0x89" })}>Switch Chain</button>
-          </>
-        ) : (
-          <button onClick={connect}>Login</button>
-        )}
-      </div>
-    </Web3AuthProvider>
-  );
-};
-
-export default App;
-```
+<ExampleCards exampleMap={[examples["react-modal-playground"], examples["evm-modal-example"]]} />
diff --git a/docs/sdk/pnp/web/no-modal/install.mdx b/docs/sdk/pnp/web/no-modal/install.mdx
@@ -4,6 +4,9 @@ sidebar_label: "Install"
 description: "Installing Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth"
 ---
 
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
 ## [`@web3auth/no-modal`](https://npmjs.com/package/@web3auth/no-modal)
 
 ```bash npm2yarn
@@ -83,5 +86,5 @@ environment. These are node dependencies that need to be polyfilled in your appl
 Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
 building the app. We have created guides for different bundlers to help you with this issue:
 
-- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
 - Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
+- Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
diff --git a/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx b/docs/sdk/pnp/web/no-modal/no-modal-hooks.mdx
@@ -6,6 +6,8 @@ description: " React Hooks for Web3Auth PnP Web No Modal SDK| Documentation - We
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import ExampleCards from "@theme/ExampleCards";
+import { examples } from "@site/src/common/maps";
 
 Web3Auth provides essential React hooks for Web3Auth No Modal SDK for managing authentication, chain
 configuration, and user interactions within your application. These hooks can be directly imported
@@ -300,53 +302,7 @@ following functions:
   await logout();
   ```
 
-### Example Usage
-
-```typescript title="web3AuthProviderProps.ts"
-import { Web3AuthContextConfig } from "@web3auth/modal-react-hooks";
-import { Web3AuthOptions } from "@web3auth/modal";
-import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
-import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
-
-const chainConfig = {
-  chainId: "0xaa36a7", // for wallet connect make sure to pass in this chain in the loginSettings of the adapter.
-  displayName: "Ethereum Sepolia",
-  chainNamespace: CHAIN_NAMESPACES.EIP155,
-  tickerName: "Ethereum Sepolia",
-  ticker: "ETH",
-  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
-  blockExplorerUrl: "https://sepolia.etherscan.io",
-  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-};
-
-const privateKeyProvider = new EthereumPrivateKeyProvider({
-  config: {
-    chainConfig,
-  },
-});
-
-const web3AuthOptions: Web3AuthOptions = {
-  clientId:
-    "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
-  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
-  privateKeyProvider: privateKeyProvider,
-};
-
-const openloginAdapter = new OpenloginAdapter();
-
-const walletServicesPlugin = new WalletServicesPlugin({
-  wsEmbedOpts: {},
-  walletInitOptions: { whiteLabel: { showWidgetButton: true } },
-});
-
-export const web3AuthContextConfig: Web3AuthContextConfig = {
-  web3AuthOptions,
-  adapters: [openloginAdapter],
-  plugins: [walletServicesPlugin],
-};
-```
+### Usage
 
 ```typescript title="App.tsx"
 import React from "react";
@@ -426,3 +382,7 @@ const App = () => {
 
 export default App;
 ```
+
+## Examples
+
+<ExampleCards exampleMap={[examples["react-modal-playground"], examples["evm-modal-example"]]} />
diff --git a/docs/troubleshooting/nuxt-issues.mdx b/docs/troubleshooting/nuxt-issues.mdx
@@ -0,0 +1,76 @@
+---
+title: Bundler Polyfill Issues - Nuxt
+image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
+
+description: "Bundler Polyfill Issues - Nuxt | Documentation - Web3Auth"
+---
+
+While setting up a new web3 project from scratch, you might face multiple issues with the bundler.
+This issue is caused because the core packages like `eccrypto` have certain dependencies, which are
+not present within the build environment. For rectifying this, the go-to method has been to just add
+the missing modules directly into the package, and edit the bundler configuration to take advantage
+of that.
+
+Although this method works, it increases the bundle size significantly. Causing slow loading speeds
+and a bad user experience. It is important to note that these modules, even while the build fails,
+are still present within the browser environment. Many libraries like Web3Auth are written in a way
+to take advantage of this fact. Hence, even if the build doesn't contain the polyfill, the library
+should still work as expected. However, if you are using a library that does not take advantage of
+this fact, you might face issues while using the library.
+
+Hence, you need to be mindful of the fact that you only require certain node polyfills to be added
+to your project, while testing each of its functionalities. At the same time, you need to tell the
+bundler to ignore the missing modules, and not include them in the build.
+
+In this guide, we have added instructions for adding the polyfills in Nuxt:
+
+## Install the missing modules
+
+Check for the missing libraries in your build and included packages, and accordingly polyfill them.
+For Web3Auth, you just need to polyfill the `buffer` and `process` libraries.
+
+```bash npm2yarn
+npm install --save-dev buffer process
+```
+
+## Create a plugin to polyfill the missing modules
+
+Create a new plugin file in the `plugins` directory of your Nuxt project. This plugin will polyfill
+the missing modules.
+
+```javascript title:"node.client.ts"
+// plugins/node.client.ts
+
+import { Buffer } from "buffer";
+import process from "process";
+
+globalThis.Buffer = Buffer;
+globalThis.process = process;
+
+export default defineNuxtPlugin({});
+```
+
+## Update your `nuxt.config.js`
+
+Additional to the polyfilled modules, you need to update the `nuxt.config.js` file to define the
+`global` object.
+
+```tsx
+/* eslint-disable import/no-extraneous-dependencies */
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  ssr: false,
+  vite: {
+    define: {
+      global: "globalThis",
+    },
+  },
+
+  compatibilityDate: "2024-08-08",
+});
+```
diff --git a/docs/troubleshooting/troubleshooting.mdx b/docs/troubleshooting/troubleshooting.mdx
diff --git a/docs/troubleshooting/vite-issues.mdx b/docs/troubleshooting/vite-issues.mdx
diff --git a/docs/troubleshooting/webpack-issues.mdx b/docs/troubleshooting/webpack-issues.mdx
diff --git a/sidebars.ts b/sidebars.ts
diff --git a/src/common/maps.tsx b/src/common/maps.tsx
diff --git a/src/pages/quick-start/commonSteps/angularBundlerIssues.mdx b/src/pages/quick-start/commonSteps/angularBundlerIssues.mdx
diff --git a/src/pages/quick-start/commonSteps/vueBundlerIssues.mdx b/src/pages/quick-start/commonSteps/vueBundlerIssues.mdx
