Merge branch 'master' into swift-pnp-v10

Web3Auth · Dec 12, 2024 · cf684d7 · cf684d7
2 parents 839e79f + 2a62336
commit cf684d7
Show file tree

Hide file tree

Showing 43 changed files with 4,009 additions and 997 deletions.
diff --git a/docs/sdk/pnp/web/modal/modal.mdx b/docs/sdk/pnp/web/modal/modal.mdx
@@ -4,6 +4,9 @@ sidebar_label: Overview
 description: " Web3Auth PnP Web Modal SDK | Documentation - Web3Auth"
 ---
 
+import ExampleCards from "@theme/ExampleCards";
+import { pnpModalExamples, QUICK_START } from "@site/src/common/maps";
+
 This package provides the main class for using the default Web3Auth Modal. The package includes all
 of our packages and gives you a simple way of implementing Web3Auth within your interface.
 Additionally, it is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence,
@@ -31,3 +34,7 @@ package.
 
 - [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community
   to get support from our team and other developers.
+
+## Quick Starts
+
+<ExampleCards exampleMap={pnpModalExamples.filter((obj) => obj.type === QUICK_START)} />
diff --git a/docs/sdk/pnp/web/no-modal/no-modal.mdx b/docs/sdk/pnp/web/no-modal/no-modal.mdx
@@ -4,6 +4,9 @@ sidebar_label: Overview
 description: "Web3Auth Plug and Play No Modal SDK | Documentation - Web3Auth"
 ---
 
+import ExampleCards from "@theme/ExampleCards";
+import { pnpNoModalExamples, QUICK_START } from "@site/src/common/maps";
+
 Web3Auth Plug and Play No Modal is the main SDK that consists of the core module of Web3Auth Plug
 and Play. This SDK gives you all the needed modules for implementing the Web3Auth features, giving
 you the flexibility of implementing your own UI to use all the functionalities. Since this package
@@ -31,3 +34,7 @@ size of this package is smaller.
 
 - [Community Support Portal](https://web3auth.io/community/c/help-pnp/pnp-web/7): Join our community
   to get support from our team and other developers.
+
+## Quick Starts
+
+<ExampleCards exampleMap={pnpNoModalExamples.filter((obj) => obj.type === QUICK_START)} />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,13 +18,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.6.1",
-    "@docusaurus/module-type-aliases": "^3.6.1",
-    "@docusaurus/plugin-client-redirects": "^3.6.1",
-    "@docusaurus/preset-classic": "^3.6.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.6.1",
-    "@docusaurus/theme-common": "^3.6.1",
-    "@docusaurus/theme-search-algolia": "^3.6.1",
+    "@docusaurus/core": "^3.6.3",
+    "@docusaurus/module-type-aliases": "^3.6.3",
+    "@docusaurus/plugin-client-redirects": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.6.3",
+    "@docusaurus/theme-common": "^3.6.3",
+    "@docusaurus/theme-search-algolia": "^3.6.3",
     "@lottiefiles/react-lottie-player": "^3.5.4",
     "@mdx-js/react": "^3.0.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -53,7 +53,7 @@
     "remark-math": "^6.0.0"
   },
   "devDependencies": {
-    "@docusaurus/tsconfig": "^3.6.1",
+    "@docusaurus/tsconfig": "^3.6.3",
     "@toruslabs/eslint-config-react": "^3.4.1",
     "@tsconfig/docusaurus": "^2.0.3",
     "@types/classnames": "^2.3.1",

diff --git a/src/common/hostedFileLinks.json b/src/common/hostedFileLinks.json
@@ -3,6 +3,12 @@
   "MODAL_REACT_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/package.json",
   "MODAL_REACT_VITE_CONFIG": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/vite.config.ts",
   "MODAL_REACT_INDEX_HTML": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/index.html",
+  "MODAL_REACT_HOOKS_APP_TSX": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/src/App.tsx",
+  "MODAL_REACT_HOOKS_MAIN_TSX": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/src/main.tsx",
+  "MODAL_REACT_HOOKS_WEB3AUTHCONTEXT_TSX": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/src/web3authContext.tsx",
+  "MODAL_REACT_HOOKS_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/package.json",
+  "MODAL_REACT_HOOKS_VITE_CONFIG": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/vite.config.ts",
+  "MODAL_REACT_HOOKS_INDEX_HTML": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-hooks-modal-quick-start/index.html",
   "WEB3RPC_TS": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/src/web3RPC.ts",
   "ETHERSRPC_TS": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/src/ethersRPC.ts",
   "VIEMRPC_TS": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/react-modal-quick-start/src/viemRPC.ts",
@@ -19,10 +25,21 @@
   "MODAL_VUE_CONFIG_JS": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-modal-quick-start/vue.config.js",
   "MODAL_VUE_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-modal-quick-start/package.json",
   "MODAL_VUE_HOME_VUE": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-modal-quick-start/src/Home.vue",
+  "MODAL_VUE_COMPOSABLES_CONFIG_JS": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-composables-modal-quick-start/vue.config.js",
+  "MODAL_VUE_COMPOSABLES_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-composables-modal-quick-start/package.json",
+  "MODAL_VUE_COMPOSABLES_HOME_VUE": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-composables-modal-quick-start/src/Home.vue",
+  "MODAL_VUE_COMPOSABLES_APP_VUE": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-composables-modal-quick-start/src/App.vue",
+  "MODAL_VUE_COMPOSABLES_WEB3AUTHCONTEXT_TSX": "Web3Auth/web3auth-pnp-examples/main/web-modal-sdk/quick-starts/vue-composables-modal-quick-start/src/web3authContext.tsx",
   "NO_MODAL_REACT_APP_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start/src/App.tsx",
   "NO_MODAL_REACT_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start/package.json",
   "NO_MODAL_REACT_VITE_CONFIG": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start/vite.config.ts",
   "NO_MODAL_REACT_INDEX_HTML": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-no-modal-quick-start/index.html",
+  "NO_MODAL_REACT_HOOKS_APP_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/src/App.tsx",
+  "NO_MODAL_REACT_HOOKS_MAIN_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/src/main.tsx",
+  "NO_MODAL_REACT_HOOKS_WEB3AUTHCONTEXT_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/src/web3authContext.tsx",
+  "NO_MODAL_REACT_HOOKS_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/package.json",
+  "NO_MODAL_REACT_HOOKS_VITE_CONFIG": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/vite.config.ts",
+  "NO_MODAL_REACT_HOOKS_INDEX_HTML": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/react-hooks-no-modal-quick-start/index.html",
   "NO_MODAL_NEXT_PAGE_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/nextjs-no-modal-quick-start/app/page.tsx",
   "NO_MODAL_NEXT_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/nextjs-no-modal-quick-start/package.json",
   "NO_MODAL_ANGULAR_APP_COMPONENT_TS": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/angular-no-modal-quick-start/src/app/app.component.ts",
@@ -33,6 +50,11 @@
   "NO_MODAL_VUE_CONFIG_JS": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/vue.config.js",
   "NO_MODAL_VUE_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/package.json",
   "NO_MODAL_VUE_HOME_VUE": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/src/Home.vue",
+  "NO_MODAL_VUE_COMPOSABLES_CONFIG_JS": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-composables-no-modal-quick-start/vue.config.js",
+  "NO_MODAL_VUE_COMPOSABLES_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-composables-no-modal-quick-start/package.json",
+  "NO_MODAL_VUE_COMPOSABLES_HOME_VUE": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-composables-no-modal-quick-start/src/Home.vue",
+  "NO_MODAL_VUE_COMPOSABLES_APP_VUE": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-composables-no-modal-quick-start/src/App.vue",
+  "NO_MODAL_VUE_COMPOSABLES_WEB3AUTHCONTEXT_TSX": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vue-composables-no-modal-quick-start/src/web3authContext.tsx",
   "NO_MODAL_HTML_INDEX_HTML": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vanillajs-no-modal-quick-start/index.html",
   "NO_MODAL_HTML_SCRIPT_JS": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vanillajs-no-modal-quick-start/script.js",
   "NO_MODAL_HTML_STYLE_CSS": "Web3Auth/web3auth-pnp-examples/main/web-no-modal-sdk/quick-starts/vanillajs-no-modal-quick-start/style.css",

diff --git a/src/common/maps.tsx b/src/common/maps.tsx
@@ -4,12 +4,16 @@ export const quickStartHostedLinks = {
   PNP_MODAL_HTML: "https://w3a.link/pnp-vanillajs-modal-quick-start",
   PNP_MODAL_NEXTJS: "https://w3a.link/pnp-nextjs-modal-quick-start",
   PNP_MODAL_REACT: "https://w3a.link/pnp-react-modal-quick-start",
+  PNP_MODAL_REACT_HOOKS: "https://w3a.link/pnp-react-hooks-modal-quick-start",
   PNP_MODAL_VUE: "https://w3a.link/pnp-vue-modal-quick-start",
+  PNP_MODAL_VUE_COMPOSABLES: "https://w3a.link/pnp-vue-composables-modal-quick-start",
   // PNP No Modal SDK
   PNP_NO_MODAL_ANGULAR: "https://w3a.link/pnp-angular-no-modal-quick-start",
   PNP_NO_MODAL_NEXTJS: "https://w3a.link/pnp-nextjs-no-modal-quick-start",
   PNP_NO_MODAL_REACT: "https://w3a.link/pnp-react-no-modal-quick-start",
+  PNP_NO_MODAL_REACT_HOOKS: "https://w3a.link/pnp-react-hooks-no-modal-quick-start",
   PNP_NO_MODAL_VUE: "https://w3a.link/pnp-vue-no-modal-quick-start",
+  PNP_NO_MODAL_VUE_COMPOSABLES: "https://w3a.link/pnp-vue-composables-no-modal-quick-start",
   PNP_NO_MODAL_HTML: "https://w3a.link/pnp-vanillajs-no-modal-quick-start",
   // PNP Android SDK
   PNP_ANDROID_ANDROID: "https://w3a.link/pnp-android-quick-start",

diff --git a/src/components/Examples/index.tsx b/src/components/Examples/index.tsx
@@ -32,10 +32,7 @@ export default function Examples(props: {
   const [productFilter, setProductFilter] = useState<string[]>([]);
   const [platformFilter, setPlatformFilter] = useState<string[]>([]);
   const [blockchainFilter, setBlockchainFilter] = useState<string[]>([]);
-  const [tagFilteredExampleMap, setTagFilteredExampleMap] =
-    useState<ExamplesInterface[]>(sortedExamples);
-  const [searchFilteredExampleMap, setSearchFilteredExampleMap] =
-    useState<ExamplesInterface[]>(tagFilteredExampleMap);
+  const [filteredExamples, setFilteredExamples] = useState<ExamplesInterface[]>(sortedExamples);
 
   const chevron = (
     <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -49,24 +46,27 @@ export default function Examples(props: {
     </svg>
   );
 
+  // Apply tag filters first
   useEffect(() => {
-    function filterByTags() {
-      let examples;
-      examples = sortedExamples;
-      examples = examples.filter((item) => {
+    let filtered = sortedExamples;
+
+    if (productFilter.length > 0 || platformFilter.length > 0 || blockchainFilter.length > 0) {
+      filtered = sortedExamples.filter((item) => {
         const prodFil =
           productFilter.length === 0 || productFilter.some((tag) => item.tags.includes(tag));
         const platFil =
           platformFilter.length === 0 || platformFilter.some((tag) => item.tags.includes(tag));
         const blockFil =
           blockchainFilter.length === 0 || blockchainFilter.some((tag) => item.tags.includes(tag));
 
-        return [prodFil, platFil, blockFil].some((result) => result === true);
+        return prodFil && platFil && blockFil;
       });
-      setTagFilteredExampleMap(examples);
     }
-    filterByTags();
-  }, [productFilter, platformFilter, blockchainFilter, searchFilteredExampleMap]);
+
+    // Reset search when filters change
+    setSearchInput("");
+    setFilteredExamples(filtered);
+  }, [productFilter, platformFilter, blockchainFilter]);
 
   const onChangeProduct = (e) => {
     const filterValue = e.map((item) => item.value);
@@ -83,55 +83,42 @@ export default function Examples(props: {
   const onChangeBlockchain = (e) => {
     const filterValue = e.map((item) => item.value);
     setBlockchainFilter(filterValue);
-    setTags([...productFilter, ...filterValue, ...platformFilter]);
+    setTags([...productFilter, ...platformFilter, ...filterValue]);
   };
 
   function highlightSearchText(text) {
-    if (searchInput === "") {
+    if (!searchInput.trim()) {
       return text;
     }
-    let inputKeywords = searchInput.split(" ");
-    inputKeywords = inputKeywords.filter((keyword) => keyword !== "");
-    const keywords = inputKeywords
-      .map((keyword) => {
-        return `(${keyword})`;
-      })
-      .join("|");
-    const regex = new RegExp(keywords, "gi");
-    const matches = text.match(regex);
+    const searchTerms = searchInput.trim().split(/\s+/);
+    const regex = new RegExp(`(${searchTerms.join("|")})`, "gi");
     const parts = text.split(regex);
-    if (matches) {
-      return (
-        <span>
-          {parts.filter(String).map((part, i) => {
-            return regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>;
-          })}
-        </span>
-      );
-    }
-    return text;
+
+    return (
+      <span>
+        {parts.map((part, i) => {
+          return regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>;
+        })}
+      </span>
+    );
   }
 
   function onChangeSearch(input) {
     setSearchInput(input);
+  }
 
-    const inputKeywords = input.trim().split(" ").filter(Boolean);
+  // Filter the already filtered examples based on search
+  const displayedExamples = filteredExamples.filter((item) => {
+    if (!searchInput.trim()) return true;
 
-    function searchFilter(item) {
-      return (
-        inputKeywords.some((key) => item.title.toLowerCase().includes(key.toLowerCase())) ||
-        inputKeywords.some((key) => item.description.toLowerCase().includes(key.toLowerCase())) ||
-        inputKeywords.some((key) =>
-          item.tags.map((tag) => tag.toLowerCase().includes(key.toLowerCase())),
-        )
-      );
-    }
-    let examples = tagFilteredExampleMap;
-    if (input !== "") {
-      examples = tagFilteredExampleMap.filter((item) => searchFilter(item));
-    }
-    setSearchFilteredExampleMap(examples);
-  }
+    const searchTerms = searchInput.toLowerCase().trim().split(/\s+/);
+    return searchTerms.every(
+      (term) =>
+        item.title.toLowerCase().includes(term) ||
+        item.description.toLowerCase().includes(term) ||
+        item.tags.some((tag) => tag.toLowerCase().includes(term)),
+    );
+  });
 
   function renderArticle(article) {
     return (
@@ -165,7 +152,7 @@ export default function Examples(props: {
         <div className={styles.tagContainer}>
           {article.tags &&
             article.tags.map((tag) => {
-              if (tags.includes(tag) || searchInput.split(" ").includes(tag)) {
+              if (tags.includes(tag) || searchInput.split(/\s+/).includes(tag)) {
                 return (
                   <div key={tag} className={styles.tagActive}>
                     {tag}
@@ -177,7 +164,7 @@ export default function Examples(props: {
 
           {article.tags &&
             article.tags.map((tag) => {
-              if (!(tags.includes(tag) || searchInput.split(" ").includes(tag))) {
+              if (!(tags.includes(tag) || searchInput.split(/\s+/).includes(tag))) {
                 return (
                   <div key={tag} className={styles.tag}>
                     {tag}
@@ -212,7 +199,7 @@ export default function Examples(props: {
             </svg>
           </div>
           <input
-            placeholder="Quick search for anything"
+            placeholder="Search within filtered results"
             value={searchInput}
             onChange={(event) => onChangeSearch(event.target.value)}
             type="text"
@@ -271,8 +258,8 @@ export default function Examples(props: {
         )}
       </div>
       <div className={styles.container}>
-        {tagFilteredExampleMap.map((item) => renderArticle(item))}
-        {tagFilteredExampleMap.length === 0 && (
+        {displayedExamples.map((item) => renderArticle(item))}
+        {displayedExamples.length === 0 && (
           <div className={styles.noResults}>
             <p>No Results Found</p>
           </div>

diff --git a/src/components/ProductCards/index.tsx b/src/components/ProductCards/index.tsx
@@ -383,15 +383,12 @@ export default function QuickNavigation() {
                 <span className={styles.pill}>Demo{chevron}</span>
               </a>
               <a
-                href={`${baseUrl}quick-start?product=PNP&sdk=PNP_MODAL&framework=REACT&stepIndex=0`}
+                href={`${baseUrl}quick-start?product=PNP&sdk=PNP_MODAL`}
                 className={styles.pillContainer}
               >
                 <span className={styles.pill}>Quick Start{chevron}</span>
               </a>
-              <a
-                href={`${baseUrl}examples?product=Plug+and+Play&sdk=Plug+and+Play+Web+Modal+SDK`}
-                className={styles.pillContainer}
-              >
+              <a href={`${baseUrl}examples`} className={styles.pillContainer}>
                 <span className={styles.pill}>Examples{chevron}</span>
               </a>
             </div>
@@ -445,15 +442,12 @@ export default function QuickNavigation() {
                 <span className={styles.pill}>Demo{chevron}</span>
               </a>
               <a
-                href={`${baseUrl}quick-start?product=CORE_KIT&sdk=SFA_WEB&framework=REACT&stepIndex=0`}
+                href={`${baseUrl}quick-start?product=CORE_KIT&sdk=SFA_WEB`}
                 className={styles.pillContainer}
               >
                 <span className={styles.pill}>Quick Start{chevron}</span>
               </a>
-              <a
-                href={`${baseUrl}examples?product=Core+Kit&sdk=Single+Factor+Auth+JS+SDK`}
-                className={styles.pillContainer}
-              >
+              <a href={`${baseUrl}examples`} className={styles.pillContainer}>
                 <span className={styles.pill}>Examples{chevron}</span>
               </a>
               <a href={`https://t.me/w3a_tg_mini_app_bot/`} className={styles.pillContainer}>
@@ -498,15 +492,12 @@ export default function QuickNavigation() {
             {mpcIcons}
             <div className={styles.links}>
               <a
-                href={`${baseUrl}quick-start?product=CORE_KIT&sdk=MPC_CORE_KIT&framework=REACT&stepIndex=0`}
+                href={`${baseUrl}quick-start?product=MPC_CORE_KIT&sdk=MPC_CORE_KIT_WEB`}
                 className={styles.pillContainer}
               >
                 <span className={styles.pill}>Quick Start{chevron}</span>
               </a>
-              <a
-                href={`${baseUrl}examples?product=Core+Kit&sdk=Single+Factor+Auth+JS+SDK`}
-                className={styles.pillContainer}
-              >
+              <a href={`${baseUrl}examples`} className={styles.pillContainer}>
                 <span className={styles.pill}>Examples{chevron}</span>
               </a>
             </div>