Functions added

Web3Auth · Nov 12, 2024 · 5e12bc2 · 5e12bc2
1 parent 2887ad7
commit 5e12bc2
Show file tree

Hide file tree

Showing 14 changed files with 762 additions and 106 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,5 @@
       "changeProcessCWD": true
     }
   ],
-  "cSpell.words": ["clsx", "JRPC", "Ronin", "Solana"]
+  "cSpell.words": ["clsx", "JRPC", "PASSWORDLESS", "Ronin", "Solana", "WEBAUTHN"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/chai": "^4.3.19",
     "@types/mocha": "^10.0.9",
     "@types/node": "^22",
+    "buffer": "^6.0.3",
     "chai": "^5.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
@@ -21,6 +22,7 @@
     "lint-staged": "^15.2.10",
     "mocha": "^10.7.3",
     "prettier": "^3.3.3",
+    "process": "^0.11.10",
     "rimraf": "^6.0.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",

diff --git a/packages/modal-ui/index.html b/packages/modal-ui/index.html
@@ -1,15 +1,75 @@
-<!doctype html>
-<html lang="en">
+<html>
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <title>Web3auth Modal UI</title>
+    <title>Test web3auth app</title>
   </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" id="w3a-parent-container" class="w3a-parent-container"></div>
 
-    <script src="/src/index.tsx" type="module"></script>
+  <body>
+    <h1>Test web3auth app</h1>
+    <div>
+      <button class="show-modal" onclick="showModal()">Show Modal</button>
+    </div>
+    <script src="./dist/assets/index-De1Kpl9H.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@web3auth/auth"></script>
+    <script>
+      let modal = null;
+      let testEventEmitter = null;
+      function showModal() {
+        console.log("open");
+        modal.open();
+        // testEventEmitter.emit("connecting", { adapter: "auth" })
+        // testEventEmitter.emit("errored", { error: new Error("something went wrong") })
+        // testEventEmitter.emit("connected", { adapter: "wallet-connect-v1" })
+        // testEventEmitter.emit("disconnected", { adapter: "wallet-connect-v1" })
+      }
+      (async function init() {
+        try {
+          testEventEmitter = new Auth.SafeEventEmitter();
+          modal = new Ui({
+            adapterListener: testEventEmitter,
+            theme: "dark",
+            // version: "1",
+          });
+          await modal.initModal();
+          console.log("modal init");
+          modal.addSocialLogins(
+            "auth",
+            {
+              google: {
+                name: "google",
+              },
+              facebook: {
+                name: "facebook",
+              },
+              twitter: {
+                name: "twitter",
+              },
+              reddit: {
+                name: "reddit",
+              },
+              twitch: {
+                name: "twitch",
+              },
+              github: {
+                name: "github",
+              },
+            },
+            ["facebook"]
+          );
+          modal.initExternalWalletContainer();
+          modal.addWalletLogins(
+            {
+              "wallet-connect-v2": {
+                label: "wallet-connect-v2",
+              },
+            },
+            { showExternalWalletsOnly: false }
+          );
+          testEventEmitter.emit("adapter_data_updated", { adapterName: "wallet-connect-v1", data: { uri: "alslkslkalls" } });
+          // showModal()
+        } catch (error) {
+          console.log("error in ui", error);
+        }
+      })();
+    </script>
   </body>
 </html>
diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
@@ -1,12 +1,11 @@
-import { createEffect, createSignal, on } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import Footer from "../Footer/Footer";
 import ConnectWallet from "./ConnectWallet";
 import Login from "./Login";
-import { SocialLoginEventType, ExternalWalletEventType, StateEmitterEvents, ModalState, MODAL_STATUS } from "../../interfaces";
-import { LOGIN_PROVIDER, type SafeEventEmitter } from "@web3auth/auth";
-import { ADAPTER_NAMES, ChainNamespaceType, cloneDeep, log, WalletRegistry } from "@web3auth/base";
-import deepmerge from "deepmerge";
-// import { on } from "events";
+import { SocialLoginEventType, ExternalWalletEventType, StateEmitterEvents, ModalState, SocialLoginsConfig } from "../../interfaces";
+import { type SafeEventEmitter } from "@web3auth/auth";
+import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src";
+
 export interface BodyProps {
   stateListener: SafeEventEmitter<StateEmitterEvents>;
   appLogo?: string;
@@ -16,6 +15,16 @@ export interface BodyProps {
   handleSocialLoginClick: (params: SocialLoginEventType) => void;
   handleExternalWalletClick: (params: ExternalWalletEventType) => void;
   handleShowExternalWallets: (externalWalletsInitialized: boolean) => void;
+  showPasswordLessInput: boolean;
+  showExternalWalletButton: boolean;
+  socialLoginsConfig: SocialLoginsConfig;
+  areSocialLoginsVisible: boolean;
+  isEmailPrimary: boolean
+  isExternalPrimary: boolean
+  showExternalWalletPage: boolean;
+  handleExternalWalletBtnClick?: (flag: boolean) => void;
+  modalState: ModalState,
+  preHandleExternalWalletClick: (params: { adapter: string }) => void;
 }
 
 const PAGES = {
@@ -26,10 +35,41 @@ const PAGES = {
 const Body = (props: BodyProps) => {
   const [currentPage, setCurrentPage] = createSignal(PAGES.LOGIN);
 
+  const handleExternalWalletBtnClick = (flag: boolean) => {
+    setCurrentPage(PAGES.CONNECT_WALLET);
+    if (props.handleExternalWalletBtnClick) props.handleExternalWalletBtnClick(flag)
+  }
+
+  const handleBackClick = (flag: boolean) => {
+    setCurrentPage(PAGES.LOGIN);
+    if (props.handleExternalWalletBtnClick) props.handleExternalWalletBtnClick(flag)
+  }
+
   return (
     <div class="w3a--h-[760px] w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1">
-      {currentPage() === PAGES.LOGIN && <Login onExternalWalletClick={() => setCurrentPage(PAGES.CONNECT_WALLET)} />}
-      {currentPage() === PAGES.CONNECT_WALLET && <ConnectWallet onBackClick={() => setCurrentPage(PAGES.LOGIN)} />}
+      <Show when={currentPage() === PAGES.LOGIN && !props.showExternalWalletPage}>
+        <Login
+          showPasswordLessInput={props.showPasswordLessInput}
+          showExternalWalletButton={props.showExternalWalletButton}
+          handleSocialLoginClick={props.handleSocialLoginClick}
+          socialLoginsConfig={props.socialLoginsConfig}
+          areSocialLoginsVisible={props.areSocialLoginsVisible}
+          isEmailPrimary={props.isEmailPrimary}
+          isExternalPrimary={props.isExternalPrimary}
+          handleExternalWalletBtnClick={handleExternalWalletBtnClick}
+        />
+      </Show>
+      <Show when={currentPage() === PAGES.CONNECT_WALLET && props.showExternalWalletPage}>
+        <ConnectWallet
+          onBackClick={handleBackClick}
+          modalStatus={props.modalState.status}
+          showBackButton={props.areSocialLoginsVisible || props.showPasswordLessInput}
+          handleExternalWalletClick={props.preHandleExternalWalletClick}
+          chainNamespace={props.chainNamespace}
+          walletConnectUri={props.modalState.walletConnectUri}
+          config={props.modalState.externalWalletsConfig}
+          walletRegistry={props.walletRegistry} />
+      </Show>
       <Footer />
     </div>
   );