Merge branch 'master' into add/rainbowkit-guide

Web3Auth · May 8, 2024 · c750241 · c750241
2 parents 527e767 + 6caeca7
commit c750241
Show file tree

Hide file tree

Showing 17 changed files with 982 additions and 1,245 deletions.
diff --git a/docs/sdk/core-kit/mpc-core-kit/mpc-core-kit.mdx b/docs/sdk/core-kit/mpc-core-kit/mpc-core-kit.mdx
@@ -11,7 +11,7 @@ Web3Auth's [`@web3auth/mpc-core-kit`](https://github.com/Web3Auth/mpc-core-kit)
 easy-to-use SDK, that helps you implement Web3Auth's MPC features while giving you the flexibility
 to customize the UI and UX of the authentication process.
 
-## This Documentation is based on [`2.3.0`](https://github.com/Web3Auth/mpc-core-kit/releases/tag/v2.3.0) version of the SDK.
+## This Documentation is based on [`2.3.3`](https://github.com/Web3Auth/mpc-core-kit/releases/tag/v2.3.3) version of the SDK.
 
 ## Requirements
 

diff --git a/docs/sdk/core-kit/sfa-web/initialize.mdx b/docs/sdk/core-kit/sfa-web/initialize.mdx
@@ -64,7 +64,7 @@ web3auth.init(privateKeyProvider);
 ```javascript
 import { Web3Auth } from "@web3auth/single-factor-auth";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { CHAIN_NAMESPACES } from "@web3auth/base";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
 
 // Swap with a different provider if you want to use a different blockchain
 const privateKeyProvider = new EthereumPrivateKeyProvider({
@@ -83,7 +83,7 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({
 
 const web3auth = new Web3Auth({
   clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
-  web3AuthNetwork: "sapphire_mainnet",
+  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
   usePnPKey: false, // By default, this SDK returns CoreKitKey by default.
 });
 

diff --git a/docs/sdk/core-kit/sfa-web/install.mdx b/docs/sdk/core-kit/sfa-web/install.mdx
@@ -11,6 +11,12 @@ description: "Web3Auth Core Kit Single Factor Auth Web SDK - Install | Documenta
 npm install --save @web3auth/single-factor-auth
 ```
 
+## [`@web3auth/ethereum-provider`](https://npmjs.com/package/@web3auth/ethereum-provider)
+
+```bash npm2yarn
+npm install --save @web3auth/ethereum-provider
+```
+
 ## Consider adding `@web3auth/base` to your project
 
 ```bash npm2yarn

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.2.1",
-    "@docusaurus/module-type-aliases": "^3.2.1",
-    "@docusaurus/plugin-client-redirects": "^3.2.1",
-    "@docusaurus/preset-classic": "^3.2.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.2.1",
-    "@docusaurus/theme-common": "^3.2.1",
-    "@docusaurus/theme-search-algolia": "^3.2.1",
+    "@docusaurus/core": "^3.3.2",
+    "@docusaurus/module-type-aliases": "^3.3.2",
+    "@docusaurus/plugin-client-redirects": "^3.3.2",
+    "@docusaurus/preset-classic": "^3.3.2",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.3.2",
+    "@docusaurus/theme-common": "^3.3.2",
+    "@docusaurus/theme-search-algolia": "^3.3.2",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mdx-js/react": "^3.0.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -36,29 +36,29 @@
     "glob": "^8.0.3",
     "gray-matter": "^4.0.3",
     "hast-util-is-element": "^1.1.0",
-    "joi": "^17.12.3",
+    "joi": "^17.13.1",
     "lodash": "^4.17.21",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-bookmark": "^0.8.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
     "react-player": "^2.16.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.0",
     "react-spinners": "^0.13.8",
     "react-spring": "^9.7.3",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0"
   },
   "devDependencies": {
-    "@docusaurus/tsconfig": "^3.2.1",
+    "@docusaurus/tsconfig": "^3.3.2",
     "@toruslabs/eslint-config-react": "^3.3.0",
     "@tsconfig/docusaurus": "^2.0.3",
     "@types/classnames": "^2.3.1",
     "@types/mdx-js__react": "^1.5.8",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.1",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/parser": "^5.30.6",

diff --git a/sidebars.ts b/sidebars.ts
@@ -235,6 +235,7 @@ const sidebars: SidebarsConfig = {
             "auth-provider-setup/social-providers/twitch",
             "auth-provider-setup/social-providers/discord",
             "auth-provider-setup/social-providers/apple",
+            "auth-provider-setup/social-providers/kakao",
             "auth-provider-setup/social-providers/linkedin",
             "auth-provider-setup/social-providers/github",
             "auth-provider-setup/social-providers/line",

diff --git a/src/common/sections.ts b/src/common/sections.ts
diff --git a/src/components/ProductCards/index.tsx b/src/components/ProductCards/index.tsx
@@ -8,15 +8,28 @@ export default function QuickNavigation() {
   const { baseUrl } = siteConfig;
   const chevron = (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M6 3.33301L10.6667 7.99967L6 12.6663" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M6 3.33301L10.6667 7.99967L6 12.6663"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
   return (
     <div className={styles.container}>
       <div className={styles.cardContainer}>
         <div className={styles.card}>
           <div className={styles.cardIconContainer}>
-            <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={styles.cardIcon}>
+            <svg
+              width="17"
+              height="14"
+              viewBox="0 0 17 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className={styles.cardIcon}
+            >
               <path
                 d="M14.2486 4.47657L14.2486 2.8099C14.2486 2.36787 14.073 1.94395 13.7605 1.63139C13.4479 1.31883 13.024 1.14323 12.5819 1.14323L2.58195 1.14323C2.13992 1.14323 1.716 1.31883 1.40344 1.63139C1.09088 1.94395 0.915283 2.36787 0.915283 2.8099L0.915283 11.1432C0.915283 11.5853 1.09088 12.0092 1.40344 12.3217C1.716 12.6343 2.13992 12.8099 2.58195 12.8099L12.5819 12.8099C13.024 12.8099 13.4479 12.6343 13.7605 12.3217C14.073 12.0092 14.2486 11.5853 14.2486 11.1432L14.2486 9.47657M14.2486 4.47657C13.8066 4.47657 10.8827 4.65216 10.5701 4.96472C10.2575 5.27728 10.0819 5.70121 10.0819 6.14323L10.0819 7.8099C10.0819 8.25193 10.2575 8.67585 10.5701 8.98841C10.8827 9.30097 13.8066 9.47657 14.2486 9.47657M14.2486 4.47657C14.6906 4.47657 15.1146 4.65216 15.4271 4.96472C15.7397 5.27728 15.9153 5.70121 15.9153 6.14323L15.9153 7.8099C15.9153 8.25193 15.7397 8.67585 15.4271 8.98841C15.1146 9.30097 14.6906 9.47657 14.2486 9.47657"
                 stroke="currentColor"
@@ -28,17 +41,29 @@ export default function QuickNavigation() {
           </div>
           <div className={styles.cardContent}>
             <h5>Plug and Play Embedded Wallet SDKs</h5>
-            <p>Integrate a non-custodial embedded wallet within your app within seconds.</p>
+            <p>
+              Integrate a non-custodial embedded wallet with prebuilt UI Components within your app
+              within seconds.
+            </p>
             <div className={styles.links}>
               <a href={`${baseUrl}product/pnp`}>Explore Product{chevron}</a>
               <a href={`${baseUrl}sdk/pnp/web/modal`}>SDK Reference{chevron}</a>
-              <a href={`${baseUrl}examples?product=Plug+and+Play&sdk=Plug+and+Play+Web+Modal+SDK`}>Examples{chevron}</a>
+              <a href={`${baseUrl}examples?product=Plug+and+Play&sdk=Plug+and+Play+Web+Modal+SDK`}>
+                Examples{chevron}
+              </a>
             </div>
           </div>
         </div>
         <div className={styles.card}>
           <div className={styles.cardIconContainer}>
-            <svg className={styles.cardIcon} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              className={styles.cardIcon}
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -59,19 +84,31 @@ export default function QuickNavigation() {
           </div>
           <div className={styles.cardContent}>
             <h5>Core Kit Integrated Wallet SDKs</h5>
-            <p>Personalize your dApp experience with our built-in SDKs where Web3Auth is completely hidden.</p>
+            <p>
+              Personalize your dApp experience with our low level SDKs where Web3Auth is completely
+              hidden.
+            </p>
             <div className={styles.links}>
               <a href={`${baseUrl}product/core-kit`}>Explore Product{chevron}</a>
               <a href={`${baseUrl}sdk/core-kit/sfa-web`}>SDK Reference{chevron}</a>
-              <a href={`${baseUrl}examples?product=Core+Kit&sdk=Single+Factor+Auth+Web+SDK`}>Examples{chevron}</a>
+              <a href={`${baseUrl}examples?product=Core+Kit&sdk=Single+Factor+Auth+Web+SDK`}>
+                Examples{chevron}
+              </a>
             </div>
           </div>
         </div>
       </div>
       <div className={styles.cardContainer}>
         <div className={styles.card}>
           <div className={styles.cardIconContainer}>
-            <svg className={styles.cardIcon} width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              className={styles.cardIcon}
+              width="21"
+              height="21"
+              viewBox="0 0 21 21"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M9.96899 2.81059C9.65643 3.12315 9.48083 3.54707 9.48083 3.9891V4.82243C9.48083 5.04345 9.39304 5.25541 9.23676 5.41169C9.08048 5.56797 8.86852 5.65577 8.6475 5.65577H6.1475C5.92649 5.65577 5.71453 5.74356 5.55825 5.89984C5.40197 6.05612 5.31417 6.26809 5.31417 6.4891V8.9891C5.31417 9.21011 5.22637 9.42208 5.07009 9.57836C4.91381 9.73464 4.70185 9.82243 4.48083 9.82243H3.6475C3.20547 9.82243 2.78155 9.99803 2.46899 10.3106C2.15643 10.6231 1.98083 11.0471 1.98083 11.4891C1.98083 11.9311 2.15643 12.3551 2.46899 12.6676C2.78155 12.9802 3.20547 13.1558 3.6475 13.1558H4.48083C4.70185 13.1558 4.91381 13.2436 5.07009 13.3998C5.22637 13.5561 5.31417 13.7681 5.31417 13.9891V16.4891C5.31417 16.7101 5.40197 16.9221 5.55825 17.0784C5.71453 17.2346 5.92649 17.3224 6.1475 17.3224H8.6475C8.86852 17.3224 9.08048 17.2346 9.23676 17.0784C9.39304 16.9221 9.48083 16.7101 9.48083 16.4891V15.6558C9.48083 15.2137 9.65643 14.7898 9.96899 14.4773C10.2816 14.1647 10.7055 13.9891 11.1475 13.9891C11.5895 13.9891 12.0135 14.1647 12.326 14.4773C12.6386 14.7898 12.8142 15.2137 12.8142 15.6558V16.4891C12.8142 16.7101 12.902 16.9221 13.0582 17.0784C13.2145 17.2346 13.4265 17.3224 13.6475 17.3224H16.1475C16.3685 17.3224 16.5805 17.2346 16.7368 17.0784C16.893 16.9221 16.9808 16.7101 16.9808 16.4891V13.9891C16.9808 13.7681 16.893 13.5561 16.7368 13.3998C16.5805 13.2436 16.3685 13.1558 16.1475 13.1558H15.3142C14.8721 13.1558 14.4482 12.9802 14.1357 12.6676C13.8231 12.3551 13.6475 11.9311 13.6475 11.4891C13.6475 11.0471 13.8231 10.6231 14.1357 10.3106C14.4482 9.99803 14.8721 9.82243 15.3142 9.82243H16.1475C16.3685 9.82243 16.5805 9.73464 16.7368 9.57836C16.893 9.42208 16.9808 9.21011 16.9808 8.9891V6.4891C16.9808 6.26809 16.893 6.05612 16.7368 5.89984C16.5805 5.74356 16.3685 5.65577 16.1475 5.65577H13.6475C13.4265 5.65577 13.2145 5.56797 13.0582 5.41169C12.902 5.25541 12.8142 5.04345 12.8142 4.82243V3.9891C12.8142 3.54707 12.6386 3.12315 12.326 2.81059C12.0135 2.49803 11.5895 2.32243 11.1475 2.32243C10.7055 2.32243 10.2816 2.49803 9.96899 2.81059Z"
                 stroke="currentColor"
@@ -83,7 +120,10 @@ export default function QuickNavigation() {
           </div>
           <div className={styles.cardContent}>
             <h5>Wallet Services</h5>
-            <p>Get Modular access to a prebuilt wallet UI, interoperability methods, fiat on-ramps, NFT services, and much more.</p>
+            <p>
+              Get Modular access to a prebuilt wallet UI, interoperability methods, fiat on-ramps,
+              NFT services, and much more.
+            </p>
             <div className={styles.links}>
               <a href={`${baseUrl}product/wallet-services`}>Explore Product{chevron}</a>
               <a href={`${baseUrl}sdk/wallet-services`}>SDK Reference{chevron}</a>
@@ -92,7 +132,14 @@ export default function QuickNavigation() {
         </div>
         <div className={styles.card}>
           <div className={styles.cardIconContainer}>
-            <svg className={styles.cardIcon} width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              className={styles.cardIcon}
+              width="25"
+              height="27"
+              viewBox="0 0 25 27"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M18.6552 9.16667H6.98857M18.6552 9.16667C19.0973 9.16667 19.5212 9.34226 19.8337 9.65482C20.1463 9.96738 20.3219 10.3913 20.3219 10.8333V15.8333C20.3219 16.2754 20.1463 16.6993 19.8337 17.0118C19.5212 17.3244 19.0973 17.5 18.6552 17.5H6.98857C6.54654 17.5 6.12262 17.3244 5.81005 17.0118C5.49749 16.6993 5.3219 16.2754 5.3219 15.8333V10.8333C5.3219 10.3913 5.49749 9.96738 5.81005 9.65482C6.12262 9.34226 6.54654 9.16667 6.98857 9.16667M18.6552 9.16667V7.5C18.6552 7.05797 18.4796 6.63405 18.1671 6.32149C17.8545 6.00893 17.4306 5.83333 16.9886 5.83333M6.98857 9.16667V7.5C6.98857 7.05797 7.16416 6.63405 7.47672 6.32149C7.78928 6.00893 8.21321 5.83333 8.65523 5.83333M16.9886 5.83333V4.16667C16.9886 3.72464 16.813 3.30072 16.5004 2.98816C16.1878 2.67559 15.7639 2.5 15.3219 2.5H10.3219C9.87987 2.5 9.45595 2.67559 9.14339 2.98816C8.83083 3.30072 8.65523 3.72464 8.65523 4.16667V5.83333M16.9886 5.83333H8.65523"
                 stroke="currentColor"
@@ -104,7 +151,9 @@ export default function QuickNavigation() {
           </div>
           <div className={styles.cardContent}>
             <h5>Wallet Ecosystems</h5>
-            <p>Connect directly with flagship integrations of Web3Auth from established communities.</p>
+            <p>
+              Connect directly with flagship integrations of Web3Auth from established communities.
+            </p>
             <div className={styles.links}>
               <a href={`${baseUrl}product/wallet-ecosystems`}>Explore Product{chevron}</a>
               <a href={`${baseUrl}sdk/wallet-ecosystems/safeauth`}>SDK Reference{chevron}</a>
@@ -116,7 +165,14 @@ export default function QuickNavigation() {
         <Link className={styles.cardAlert} to={`${baseUrl}product/product-fit`}>
           <div className={styles.cardContent}>
             <span>
-              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" className={styles.cardIconAlert}>
+              <svg
+                width="20"
+                height="21"
+                viewBox="0 0 20 21"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className={styles.cardIconAlert}
+              >
                 <path
                   fill-rule="evenodd"
                   clip-rule="evenodd"
@@ -127,13 +183,19 @@ export default function QuickNavigation() {
               <b>Find out which SDK suits your use case.</b>
             </span>
             <p>
-              Unsure about which of our product bet fits your requirements? With some qualifying questions, discover which product you should use for
-              your use case.
+              Unsure about which of our product bet fits your requirements? With some qualifying
+              questions, discover which product you should use for your use case.
             </p>
 
             <div className={styles.btnContainerAlert}>
               Find out More
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"

diff --git a/src/components/SDKReferenceCards/index.tsx b/src/components/SDKReferenceCards/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useHistory, useLocation } from "@docusaurus/router";
 
 import { corekitsfa, corekitmfa, pnp, walletecosystems, helpersdks } from "../../common/SDKOptions";
 import styles from "./styles.module.css";
@@ -1335,8 +1336,22 @@ export const providers = (
 );
 
 export default function QuickNavigation() {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const history = useHistory();
   const [product, setProduct] = useState<string>(pnp);
 
+  useEffect(() => {
+    history.push({ search: `product=${product}` });
+  }, [product]);
+
+  useEffect(() => {
+    const URLProduct = queryParams.get("product");
+    if (URLProduct) {
+      setProduct(URLProduct);
+    }
+  }, []);
+
   return (
     <div className={styles.container}>
       <div className={styles.headingContainer}>

diff --git a/src/components/SectionsMenu/index.tsx b/src/components/SectionsMenu/index.tsx