Merge branch 'master' into pnp-swift-v7

docs/troubleshooting/svelte-issues.mdx

@@ -0,0 +1,72 @@
+---
+title: Bundler Polyfill Issues - Svelte with Vite
+image: "/docs/images/docs-meta-cards/troubleshoot-card.png"
+displayed_sidebar: docs
+description: "Bundler Polyfill Issues - Svelte with Vite | Documentation - Web3Auth"
+---
+
+When developing a new web3 project with Svelte and Vite, you may encounter bundler issues due to missing polyfills. This commonly occurs with packages
+like `eccrypto` which rely on node modules not present in the browser environment. Directly adding these modules to your package can solve the issue
+but may lead to a larger bundle size, affecting load times and user experience.
+
+It's essential to recognize that the required node polyfills should only be included during development and testing, and the bundler should be
+instructed to exclude them from the production build.
+
+The following guide provides instructions for adding the necessary polyfills in a Svelte project using Vite.
+
+## Install the missing modules
+
+First, identify the missing libraries in your build. For integrating Web3Auth with Svelte, you will need to polyfill `buffer` and `process`. For other
+libraries, use an alternative like the `empty-module` to prevent build warnings.
+
+```bash npm2yarn
+npm install --save-dev buffer process vite-plugin-node-polyfills
+```
+
+:::caution
+
+You may need to polyfill additional libraries depending on the other blockchain libraries you are using with Web3Auth. Common polyfills include
+crypto-browserify, stream-browserify, and others listed in the previous guide.
+
+:::
+
+## Update your `vite.config.js`
+
+Modify your Vite configuration to integrate the polyfills with Svelte as follows:
+
+```tsx
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vitest/config";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+export default defineConfig({
+  plugins: [
+    nodePolyfills({
+      exclude: ["fs"],
+      globals: {
+        Buffer: true,
+        global: true,
+        process: true,
+      },
+      protocolImports: true,
+    }),
+    sveltekit(),
+  ],
+  optimizeDeps: {
+    include: ["dayjs/plugin/relativeTime.js", "dayjs", "@web3auth/ethereum-provider"],
+  },
+  test: {
+    include: ["src/**/*.{test,spec}.{js,ts}"],
+  },
+});
+```
+
+This configuration sets up the necessary aliases and defines globals for the browser environment, ensuring compatibility and reducing bundle size.
+
+## Address additional dependency issues
+
+If there are additional dependencies that need to be polyfilled, consider adding them to the include array in the optimizeDeps section of the Vite
+config. Test your application thoroughly to ensure that all functionalities work as expected after the polyfills are added.
+
+By following these steps, you should be able to resolve bundler polyfill issues in your Svelte and Vite web3 project, leading to a more efficient
+build and a smoother user experience.

docs/troubleshooting/vite-issues.mdx

@@ -5,19 +5,19 @@ displayed_sidebar: docs
 description: "Bundler Polyfill Issues - Vite | Documentation - Web3Auth"
 ---
 
-While setting up a new web3 project from scratch, you might face multiple issues the bundler. This issue is caused due to the fact that 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.
+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, but 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 so as 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 which does not take advantage of this fact, you might face issues while using the library.
+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 it's
+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 of adding the polyfills in Vite:
+In this guide, we have added instructions for adding the polyfills in Vite:
 
 ## Install the missing modules
 

sidebars.js

@@ -283,6 +283,7 @@ module.exports = {
         "troubleshooting/error-429",
         "troubleshooting/webpack-issues",
         "troubleshooting/vite-issues",
+        "troubleshooting/svelte-issues",
         "troubleshooting/metro-issues",
         "troubleshooting/jwt-errors",
         "troubleshooting/supported-browsers",

src/components/HelpCards/index.tsx

@@ -39,7 +39,7 @@ export default function QuickNavigation() {
             </svg>
           </div>
           <div className={styles.cardContent}>
-            <h5>Community Discussions</h5>
+            <h5>Community Forum</h5>
             <p>Join our community of passionate developers - learn, grow and get help for your Web3Auth setup.</p>
           </div>
         </Link>

src/components/navDropdown/help.html

@@ -35,7 +35,7 @@ <h2>Schedule a Demo</h2>
           </svg>
         </span>
         <div>
-          <h2>Community Discussions</h2>
+          <h2>Community Forum</h2>
           <p>Join our community of passionate developers - learn, grow and get help for your Web3Auth setup.</p>
         </div>
       </a>

src/theme/Footer/index.tsx

@@ -159,7 +159,7 @@ export default function FooterComponent(): JSX.Element {
             </div>
             <div className="footer__item">
               <a className="footer__link-item" href="https://web3auth.io/community/" target="_blank" rel="noreferrer">
-                Community Discussions
+                Community Forum
               </a>
             </div>
             {/* <div className="footer__item">