refactored code

Author: smgv

demo/vue-app-new/package-lock.json

@@ -1,5 +1,5 @@
 import { type SafeEventEmitter } from "@web3auth/auth";
-import { ChainNamespaceType, log, WALLET_ADAPTERS, WalletRegistry, WalletRegistryItem } from "@web3auth/no-modal";
+import { ChainNamespaceType, WALLET_ADAPTERS, WalletRegistry, WalletRegistryItem } from "@web3auth/no-modal";
 import Bowser from "bowser";
 import { createMemo, createSignal, Match, Show, Suspense, Switch, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
@@ -214,8 +214,6 @@ const Body = (props: BodyProps) => {
 
       canShowMap[adapter] = false;
     });
-
-    log.debug("adapter visibility map", canShowMap);
     return canShowMap;
   });
 

packages/modal/src/ui/components/Body/Body.tsx

@@ -6,7 +6,8 @@ import { SocialLoginsConfig } from "../../interfaces";
 import { t } from "../../localeImport";
 import { cn, getIcons } from "../../utils/common";
 import { validatePhoneNumber } from "../../utils/modal";
-import OtpInput from "../Otp/Otp";
+import { LoginOtp } from "../LoginOtp";
+import { LoginPasswordLess } from "../LoginPasswordLess";
 import SocialLoginList from "../SocialLoginList";
 
 export interface LoginProps {
@@ -55,16 +56,15 @@ const Login = (props: LoginProps) => {
   const [canShowMore, setCanShowMore] = createSignal(false);
   const [visibleRow, setVisibleRow] = createSignal<rowType[]>([]);
   const [otherRow, setOtherRow] = createSignal<rowType[]>([]);
-  const [isPasswordlessCtaClicked, setIsPasswordlessCtaClicked] = createSignal(false);
-  const [isInputFocused, setIsInputFocused] = createSignal(false);
+  const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = createSignal(false);
   const [showOtpFlow, setShowOtpFlow] = createSignal(false);
   const [otpLoading, setOtpLoading] = createSignal(true);
   const [isMobileOtp, setIsMobileOtp] = createSignal(false);
   const [otpSuccess, setOtpSuccess] = createSignal(false);
 
   const handleExpand = () => {
     setExpand((prev) => !prev);
-    setIsPasswordlessCtaClicked(false);
+    setIsPasswordLessCtaClicked(false);
     props.handleSocialLoginHeight();
   };
 
@@ -120,7 +120,6 @@ const Login = (props: LoginProps) => {
 
   const handleFormSubmit = async (e: Event) => {
     e.preventDefault();
-
     // setShowOtpFlow(true);
     // setTimeout(() => {
     //   setOtpLoading(false);
@@ -154,8 +153,9 @@ const Login = (props: LoginProps) => {
     return undefined;
   };
 
-  const handleInputChange = (e: { target: { value: string } }) => {
-    setFieldValue(e.target.value);
+  const handleInputChange = (e: InputEvent) => {
+    const target = e.target as HTMLInputElement;
+    setFieldValue(target.value);
     if (isValidInput() === false) setIsValidInput(true);
   };
 
@@ -178,7 +178,7 @@ const Login = (props: LoginProps) => {
   });
 
   const handleConnectWallet = (e: MouseEvent) => {
-    setIsPasswordlessCtaClicked(false);
+    setIsPasswordLessCtaClicked(false);
     e.preventDefault();
     if (mergedProps.handleExternalWalletBtnClick) mergedProps.handleExternalWalletBtnClick(true);
   };
@@ -199,63 +199,13 @@ const Login = (props: LoginProps) => {
     <Suspense>
       <Switch>
         <Match when={showOtpFlow()}>
-          <div class="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--w-full w3a--h-full w3a--flex-1">
-            <Show
-              when={!otpLoading()}
-              fallback={
-                <div class="w3a--flex w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--w-full w3a--h-full w3a--flex-1 w3a--gap-x-2">
-                  <div class="w3a--w-3 w3a--h-3 w3a--rounded-full w3a--bg-app-primary-600 dark:w3a--bg-app-primary-500 w3a--animate-pulse" />
-                  <div class="w3a--w-3 w3a--h-3 w3a--rounded-full w3a--bg-app-primary-500 dark:w3a--bg-app-primary-400 w3a--animate-pulse" />
-                  <div class="w3a--w-3 w3a--h-3 w3a--rounded-full w3a--bg-app-primary-400 dark:w3a--bg-app-primary-300 w3a--animate-pulse" />
-                </div>
-              }
-            >
-              <Show
-                when={!otpSuccess()}
-                fallback={
-                  <div class="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--w-full w3a--h-full w3a--flex-1">
-                    <img src={getIcons("success-light")} alt="success" class="w3a--w-auto w3a--h-auto" />
-                    <p class="w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white w3a--w-[80%] w3a--mx-auto w3a--text-center">
-                      You are connected to your account!
-                    </p>
-                  </div>
-                }
-              >
-                <div class="w3a--flex w3a--items-start w3a--justify-start w3a--mr-auto w3a--w-full">
-                  <button
-                    class="w3a--w-5 w3a--h-5 w3a--rounded-full w3a--cursor-pointer w3a--flex w3a--items-center w3a--justify-center w3a--z-20"
-                    onClick={() => setShowOtpFlow(false)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="w3a--text-app-gray-900 dark:w3a--text-app-white">
-                      <path
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                        d="M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <div class="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--w-full w3a--h-full w3a--flex-1">
-                  <img src={getIcons(isMobileOtp() ? "sms-otp-light" : "email-otp-light")} alt="otp" class="w3a--w-auto w3a--h-auto" />
-                  <div class="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
-                    <p class="w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white">
-                      {isMobileOtp() ? "OTP verification" : "Email verification"}
-                    </p>
-                    <div class="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1">
-                      <p class="w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">
-                        {isMobileOtp() ? "Enter the OTP sent to" : "Please enter the 6-digit verification code "}
-                      </p>
-                      <p class="w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">
-                        {isMobileOtp() ? "🇸🇬+91 ****0999" : "that was sent to your email ja****@email.com"}
-                      </p>
-                    </div>
-                  </div>
-                  <OtpInput length={6} onComplete={handleOtpComplete} />
-                </div>
-              </Show>
-            </Show>
-          </div>
+          <LoginOtp
+            otpLoading={otpLoading()}
+            otpSuccess={otpSuccess()}
+            setShowOtpFlow={setShowOtpFlow}
+            isMobileOtp={isMobileOtp()}
+            handleOtpComplete={handleOtpComplete}
+          />
         </Match>
         <Match when={!showOtpFlow()}>
           <div class="w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-4">
@@ -292,43 +242,18 @@ const Login = (props: LoginProps) => {
                 />
               </Show>
               <Show when={mergedProps.showPasswordLessInput}>
-                <Show
-                  when={isPasswordlessCtaClicked()}
-                  fallback={
-                    <button class={cn("w3a--btn !w3a--justify-between")} onClick={() => setIsPasswordlessCtaClicked(true)}>
-                      <p class="w3a--text-app-gray-900 dark:w3a--text-app-white">Continue with {title()}</p>
-                    </button>
-                  }
-                >
-                  <div class={cn("w3a--input", isInputFocused() && "!w3a--border-app-primary-600")}>
-                    <input
-                      onInput={handleInputChange}
-                      value={fieldValue()}
-                      placeholder={placeholder()}
-                      onFocus={(e) => {
-                        e.target.placeholder = "";
-                        setIsInputFocused(true);
-                      }}
-                      onBlur={(e) => {
-                        e.target.placeholder = `${placeholder()}`;
-                        setIsInputFocused(false);
-                      }}
-                      type="text"
-                      autofocus
-                      class="w-full w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white"
-                    />
-                    <Show when={fieldValue() && isValidInput() && isInputFocused()}>
-                      <button class="w3a--appearance-none w3a--icon-animation" onClick={handleFormSubmit}>
-                        <img src={getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light")} alt="arrow" />
-                      </button>
-                    </Show>
-                  </div>
-                  <Show when={!isValidInput() && isPasswordlessCtaClicked()}>
-                    <p class="w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400 w3a--text-start -w3a--mt-2 w3a--w-full w3a--pl-6">
-                      {invalidInputErrorMessage()}
-                    </p>
-                  </Show>
-                </Show>
+                <LoginPasswordLess
+                  isPasswordLessCtaClicked={isPasswordLessCtaClicked()}
+                  setIsPasswordLessCtaClicked={setIsPasswordLessCtaClicked}
+                  title={title()}
+                  fieldValue={fieldValue()}
+                  handleInputChange={handleInputChange}
+                  placeholder={placeholder()}
+                  handleFormSubmit={handleFormSubmit}
+                  invalidInputErrorMessage={invalidInputErrorMessage()}
+                  isValidInput={isValidInput()}
+                  isDark={props.isDark}
+                />
               </Show>
               <Show when={mergedProps.showExternalWalletButton && mergedProps.showPasswordLessInput}>
                 <div class="w3a--flex w3a--items-center w3a--gap-x-2 w3a--w-full">
@@ -354,7 +279,6 @@ const Login = (props: LoginProps) => {
                   />
                 </button>
               </Show>
-              {/* <OtpInput length={6} onComplete={() => {}} /> */}
             </Show>
           </div>
         </Match>

packages/modal/src/ui/components/Body/ConnectWallet.tsx

@@ -0,0 +1,54 @@
+import { For, Show } from "solid-js";
+
+import { cn, getIcons } from "../../utils/common";
+
+export interface Chain {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+export interface ChainFiltersProps {
+  isDark: boolean;
+  isLoading: boolean;
+  selectedChain: string;
+  setSelectedChain: (chain: string) => void;
+  chains: Chain[];
+}
+
+const ChainFilters = (props: ChainFiltersProps) => {
+  return (
+    <Show
+      when={!props.isLoading}
+      fallback={
+        <div class="w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2">
+          <For each={Array(props.chains.length).fill(0)}>
+            {(_) => <div class="w3a--w-[100px] w3a--h-12 w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse" />}
+          </For>
+        </div>
+      }
+    >
+      <div class="w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2">
+        <For each={props.chains}>
+          {(chain) => (
+            <button
+              class={cn(
+                "w3a--text-sm w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--rounded-2xl w3a--h-12",
+                {
+                  "w3a--bg-app-gray-50 dark:w3a--bg-app-gray-800": props.selectedChain === chain.id,
+                }
+              )}
+              onClick={() => props.setSelectedChain(chain.id)}
+            >
+              <Show when={chain.icon} fallback={chain.name}>
+                <img src={getIcons(props.isDark ? `${chain.icon}-dark` : `${chain.icon}-light`)} alt={chain.name} />
+              </Show>
+            </button>
+          )}
+        </For>
+      </div>
+    </Show>
+  );
+};
+
+export default ChainFilters;

packages/modal/src/ui/components/Body/Login.tsx

@@ -0,0 +1 @@
+export { default as ChainFilters } from "./ChainFilters";

packages/modal/src/ui/components/ChainFilters/ChainFilters.tsx

@@ -0,0 +1,51 @@
+import { createSignal, Show } from "solid-js";
+
+import { t } from "../../localeImport";
+import { cn } from "../../utils/common";
+
+export interface ConnectSearchWalletsProps {
+  totalExternalWallets: number;
+  isLoading: boolean;
+  walletSearch: string;
+  handleWalletSearch: (e: InputEvent) => void;
+}
+
+const ConnectSearchWallets = (props: ConnectSearchWalletsProps) => {
+  const [isInputFocused, setIsInputFocused] = createSignal(false);
+
+  const handleWalletSearch = (e: InputEvent) => {
+    props.handleWalletSearch(e);
+    setIsInputFocused(true);
+  };
+
+  return (
+    <Show
+      when={props.totalExternalWallets > 15 && !props.isLoading}
+      fallback={<div class="w3a--w-full w3a--h-[50px] w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />}
+    >
+      <input
+        type="text"
+        value={props.walletSearch}
+        onInput={handleWalletSearch}
+        onFocus={(e) => {
+          e.target.placeholder = "";
+          setIsInputFocused(true);
+        }}
+        onBlur={(e) => {
+          e.target.placeholder = t("modal.external.search-wallet", { count: `${props.totalExternalWallets}` });
+          setIsInputFocused(false);
+        }}
+        placeholder={
+          props.isLoading ? t("modal.external.search-wallet-loading") : t("modal.external.search-wallet", { count: `${props.totalExternalWallets}` })
+        }
+        disabled={props.isLoading}
+        class={cn(
+          "w3a--input w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white",
+          isInputFocused() && "!w3a--border-app-primary-600"
+        )}
+      />
+    </Show>
+  );
+};
+
+export default ConnectSearchWallets;

packages/modal/src/ui/components/ChainFilters/index.ts

@@ -0,0 +1 @@
+export { default as ConnectSearchWallets } from "./ConnectSearchWallets";

packages/modal/src/ui/components/ConnectSearchWallets/ConnectSearchWallets.tsx

@@ -0,0 +1,38 @@
+import { CONNECT_WALLET_PAGES } from "../../constants";
+import { ExternalButton } from "../../interfaces";
+
+export interface ConnectWalletHeaderProps {
+  onBackClick: () => void;
+  currentPage: string;
+  selectedButton: ExternalButton;
+}
+
+const ConnectWalletHeader = (props: ConnectWalletHeaderProps) => {
+  const handleBack = () => {
+    props.onBackClick();
+  };
+
+  return (
+    <div class="w3a--flex w3a--items-center w3a--justify-between">
+      <button
+        class="w3a--w-5 w3a--h-5 w3a--rounded-full w3a--cursor-pointer w3a--flex w3a--items-center w3a--justify-center w3a--z-20"
+        onClick={handleBack}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="w3a--text-app-gray-900 dark:w3a--text-app-white">
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+      <p class="w3a--text-base w3a--font-medium w3a--text-app-gray-900">
+        {props.currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET ? props.selectedButton?.displayName : props.currentPage}
+      </p>
+      <div class="w3a--w-5 w3a--h-5 w3a--z-[-1]" />
+    </div>
+  );
+};
+
+export default ConnectWalletHeader;

packages/modal/src/ui/components/ConnectSearchWallets/index.ts

@@ -0,0 +1 @@
+export { default as ConnectWalletHeader } from "./ConnectWalletHeader";