performance issue fix

Web3Auth · Dec 31, 2024 · 458063d · 458063d
1 parent a9fb5e3
commit 458063d
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 52 deletions.
diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
@@ -1,7 +1,7 @@
 import { type SafeEventEmitter } from "@web3auth/auth";
-import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src";
+import { ChainNamespaceType, WALLET_ADAPTERS, WalletRegistry } from "@web3auth/base/src";
 import Bowser from "bowser";
-import { createContext, createMemo, Show } from "solid-js";
+import { createContext, createEffect, createMemo, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { PAGES } from "../../constants";
@@ -161,6 +161,13 @@ const Body = (props: BodyProps) => {
     return [installLink, ...mobileInstallLinks()];
   };
 
+  createEffect(() => {
+    const wcAvailable = (props.modalState.externalWalletsConfig[WALLET_ADAPTERS.WALLET_CONNECT_V2]?.showOnModal || false) !== false;
+    if (wcAvailable) {
+      props.handleExternalWalletClick({ adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2 });
+    }
+  });
+
   return (
     <BodyContext.Provider value={{ bodyState, setBodyState }}>
       <div class="w3a--h-[760px] w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1 w3a--relative">

diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -1,11 +1,12 @@
 import { BaseAdapterConfig, ChainNamespaceType, log, WALLET_ADAPTERS, WalletRegistry, WalletRegistryItem } from "@web3auth/base/src";
 import bowser from "bowser";
-import { createEffect, createMemo, createSignal, For, on, Show, useContext } from "solid-js";
+import { createEffect, createMemo, createSignal, For, Show, useContext } from "solid-js";
 import { MaskType, QRCodeCanvas } from "solid-qr-code";
 
 import { CONNECT_WALLET_PAGES } from "../../constants";
 import { browser, ExternalButton, ModalStatusType, os, platform } from "../../interfaces";
 import { t } from "../../localeImport";
+import { Image } from "../Image";
 import { WalletButton } from "../WalletButton";
 import { BodyContext } from "./Body";
 export interface ConnectWalletProps {
@@ -28,6 +29,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
   const [totalExternalWallets, setTotalExternalWallets] = createSignal<number>(0);
   const [selectedButton, setSelectedButton] = createSignal<ExternalButton>(null);
   const [walletSearch, setWalletSearch] = createSignal<string>("");
+  const [isLoading, setIsLoading] = createSignal<boolean>(true);
 
   const handleBack = () => {
     log.debug("handleBack", selectedWallet(), currentPage());
@@ -85,14 +87,6 @@ const ConnectWallet = (props: ConnectWalletProps) => {
     return canShowMap;
   });
 
-  createEffect(() => {
-    log.debug("loaded external wallets", props.config, props.walletConnectUri);
-    const wcAvailable = (props.config[WALLET_ADAPTERS.WALLET_CONNECT_V2]?.showOnModal || false) !== false;
-    if (wcAvailable && !props.walletConnectUri) {
-      props.handleExternalWalletClick({ adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2 });
-    }
-  });
-
   const isWalletConnectAdapterIncluded = createMemo(() => Object.keys(props.config).some((adapter) => adapter === WALLET_ADAPTERS.WALLET_CONNECT_V2));
   const adapterVisibility = createMemo(() => adapterVisibilityMap());
   const defaultButtonKeys = createMemo(() => new Set(Object.keys(props.walletRegistry.default)));
@@ -199,20 +193,18 @@ const ConnectWallet = (props: ConnectWalletProps) => {
     }
   };
 
-  createEffect(
-    on(
-      () => walletDiscoverySupported(),
-      () => {
-        if (walletDiscoverySupported()) {
-          setExternalButtons(sortedButtons());
-          setTotalExternalWallets(totalExternalWalletsLength());
-        } else {
-          setExternalButtons(visibleButtons());
-          setTotalExternalWallets(visibleButtons().length);
-        }
-      }
-    )
-  );
+  createEffect(() => {
+    if (walletDiscoverySupported()) {
+      setExternalButtons(sortedButtons());
+      setTotalExternalWallets(totalExternalWalletsLength());
+    } else {
+      setExternalButtons(visibleButtons());
+      setTotalExternalWallets(visibleButtons().length);
+    }
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  });
 
   const handleWalletClick = (button: ExternalButton) => {
     // if has injected wallet, connect to injected wallet
@@ -269,11 +261,13 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 onBlur={(e) => {
                   e.target.placeholder = t("modal.external.search-wallet", { count: `${totalExternalWallets()}` });
                 }}
-                placeholder={t("modal.external.search-wallet", { count: `${totalExternalWallets()}` })}
+                placeholder={
+                  isLoading() ? t("modal.external.search-wallet-loading") : t("modal.external.search-wallet", { count: `${totalExternalWallets()}` })
+                }
                 class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
               />
             </Show>
-            <ul class="w3a--h-[calc(100dvh_-_240px)] w3a--overflow-y-auto">
+            <ul class="w3a--h-[calc(100dvh_-_240px)] w3a--overflow-y-auto w3a--flex w3a--flex-col">
               <Show
                 when={externalButtons().length > 0}
                 fallback={
@@ -282,19 +276,26 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                   </div>
                 }
               >
-                <div class="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
-                  <For each={externalButtons()}>
-                    {(button) => (
-                      <WalletButton
-                        label={button.displayName}
-                        onClick={() => handleWalletClick(button)}
-                        button={button}
-                        deviceDetails={deviceDetails()}
-                        walletConnectUri={props.walletConnectUri}
-                      />
-                    )}
-                  </For>
-                </div>
+                <Show
+                  when={!isLoading()}
+                  fallback={
+                    <div class="w3a--text-app-white w3a--flex-1 w3a--h-full w3a--w-full w3a--animate-pulse w3a--rounded-lg w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
+                  }
+                >
+                  <div class="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
+                    <For each={externalButtons()}>
+                      {(button) => (
+                        <WalletButton
+                          label={button.displayName}
+                          onClick={() => handleWalletClick(button)}
+                          button={button}
+                          deviceDetails={deviceDetails()}
+                          walletConnectUri={props.walletConnectUri}
+                        />
+                      )}
+                    </For>
+                  </div>
+                </Show>
               </Show>
             </ul>
           </div>
@@ -304,10 +305,20 @@ const ConnectWallet = (props: ConnectWalletProps) => {
           <Show
             when={props.walletConnectUri}
             fallback={
-              <div class="w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center" />
+              <div class="w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
+                <Image
+                  imageId={`login-${selectedButton().name}`}
+                  hoverImageId={`login-${selectedButton().name}`}
+                  fallbackImageId="wallet"
+                  height="30"
+                  width="30"
+                  isButton
+                  extension={selectedButton().imgExtension}
+                />
+              </div>
             }
           >
-            <div class="w3a--bg-app-gray-200 w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
+            <div class="w3a--relative w3a--bg-app-gray-200 w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
               <QRCodeCanvas
                 value={props.walletConnectUri || ""}
                 level="low"
@@ -321,6 +332,17 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 y={0}
                 maskType={MaskType.FLOWER_IN_SQAURE}
               />
+              <div class="w3a--absolute w3a--top-[45%] w3a--left-[45%] w3a--transform -translate-y-1/2 w3a--w-10 w3a--h-10 w3a--bg-app-white w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center">
+                <Image
+                  imageId={`login-${selectedButton().name}`}
+                  hoverImageId={`login-${selectedButton().name}`}
+                  fallbackImageId="wallet"
+                  height="20"
+                  width="20"
+                  isButton
+                  extension={selectedButton().imgExtension}
+                />
+              </div>
             </div>
           </Show>
 

diff --git a/packages/modal-ui/src/components/Image/Image.tsx b/packages/modal-ui/src/components/Image/Image.tsx
@@ -12,6 +12,7 @@ export interface ImageProps {
   extension?: string;
   darkImageId?: string;
   darkHoverImageId?: string;
+  class?: string;
 }
 
 export default function Image(props: ImageProps) {
@@ -56,7 +57,7 @@ export default function Image(props: ImageProps) {
           height={mergedProps.height}
           width={mergedProps.width}
           alt={mergedProps.hoverImageId}
-          class="w3a--object-contain w3a--rounded"
+          class={`w3a--object-contain w3a--rounded ${mergedProps.class}`}
         />
       </Show>
     </>

diff --git a/packages/modal-ui/src/components/LoginModal/LoginModal.tsx b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
@@ -68,7 +68,7 @@ const LoginModal = (props: LoginModalProps) => {
     }));
 
     // Call the passed-in handler with the params
-    props.handleExternalWalletClick(params);
+    if (props.handleExternalWalletClick) props.handleExternalWalletClick(params);
   };
 
   const preHandleSocialWalletClick = (params: SocialLoginEventType) => {

diff --git a/packages/modal-ui/src/i18n/dutch.json b/packages/modal-ui/src/i18n/dutch.json
@@ -21,6 +21,7 @@
     "external.installed": "Geïnstalleerd",
     "external.no-wallets-found": "Geen portefeuilles gevonden",
     "external.search-wallet": "Zoeken door {{count}} portemonnees...",
+    "external.search-wallet-loading": "Laden...",
     "external.title": "Externe portemonnee",
     "external.walletconnect-connect": "Verbinden",
     "external.walletconnect-copy": "Scan met een WalletConnect-ondersteunde portemonnee of klik op de QR-code om naar uw klembord te kopiëren.",

diff --git a/packages/modal-ui/src/i18n/english.json b/packages/modal-ui/src/i18n/english.json
@@ -21,6 +21,7 @@
     "external.installed": "Installed",
     "external.no-wallets-found": "No wallets found",
     "external.search-wallet": "Search through {{count}} wallets...",
+    "external.search-wallet-loading": "Loading...",
     "external.title": "External Wallet",
     "external.walletconnect-connect": "Connect",
     "external.walletconnect-copy": "Scan with a WalletConnect-supported wallet or click the QR code to copy to your clipboard.",

diff --git a/packages/modal-ui/src/i18n/french.json b/packages/modal-ui/src/i18n/french.json
@@ -19,6 +19,7 @@
     "external.installed": "Installé",
     "external.no-wallets-found": "Aucun portefeuille trouvé",
     "external.search-wallet": "Rechercher parmi {{count}} portefeuilles...",
+    "external.search-wallet-loading": "Chargement...",
     "external.title": "Portefeuille externe",
     "external.walletconnect-connect": "Se connecter",
     "external.walletconnect-copy": "Scannez avec un portefeuille pris en charge par WalletConnect ou cliquez sur le code QR pour le copier dans votre presse-papiers.",
@@ -71,4 +72,4 @@
     "social.view-more": "Voir plus",
     "social.view-more-socials": "Voir plus socials"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/german.json b/packages/modal-ui/src/i18n/german.json
@@ -21,6 +21,7 @@
     "external.installed": "Installiert",
     "external.no-wallets-found": "Keine Wallets gefunden",
     "external.search-wallet": "Suche durch {{count}} Geldbörsen...",
+    "external.search-wallet-loading": "Laden...",
     "external.title": "Externe Geldbörse",
     "external.walletconnect-connect": "Verbinden",
     "external.walletconnect-copy": "Scannen Sie mit einem von WalletConnect unterstützten Wallet oder klicken Sie auf den QR-Code, um ihn in Ihre Zwischenablage zu kopieren.",
@@ -73,4 +74,4 @@
     "social.view-more": "Mehr anzeigen",
     "social.view-more-socials": "Weitere socials anzeigen"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/japanese.json b/packages/modal-ui/src/i18n/japanese.json
@@ -21,6 +21,7 @@
     "external.installed": "インストール済み",
     "external.no-wallets-found": "ウォレットが見つかりません",
     "external.search-wallet": "{{count}} ウォレットを検索...",
+    "external.search-wallet-loading": "読み込み中...",
     "external.title": "外部ウォレット",
     "external.walletconnect-connect": "接続する",
     "external.walletconnect-copy": "WalletConnect がサポートするウォレットでスキャンするか、QR コードをクリックしてクリップボードにコピーします。",
@@ -73,4 +74,4 @@
     "social.view-more": "もっと見る",
     "social.view-more-socials": "もっと見る socials"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/korean.json b/packages/modal-ui/src/i18n/korean.json
@@ -21,6 +21,7 @@
     "external.installed": "설치 완료",
     "external.no-wallets-found": "지갑을 찾을 수 없습니다.",
     "external.search-wallet": "{{count}}개의 지갑을 검색 중입니다...",
+    "external.search-wallet-loading": "로드 중...",
     "external.title": "외부 지갑",
     "external.walletconnect-connect": "연결",
     "external.walletconnect-copy": "WalletConnect 호환 지갑으로 스캔하거나, QR 코드를 클릭하여 클립보드에 복사하세요.",
@@ -73,4 +74,4 @@
     "social.view-more": "더보기",
     "social.view-more-socials": "Socials 더보기"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/mandarin.json b/packages/modal-ui/src/i18n/mandarin.json
@@ -21,6 +21,7 @@
     "external.installed": "已安装",
     "external.no-wallets-found": "没有找到钱包",
     "external.search-wallet": "搜索{{count}}个钱包...",
+    "external.search-wallet-loading": "加载中...",
     "external.title": "外部钱包",
     "external.walletconnect-connect": "连接",
     "external.walletconnect-copy": "使用支持 WalletConnect 的钱包进行扫描或单击二维码以复制到剪贴板。",
@@ -73,4 +74,4 @@
     "social.view-more": "查看更多",
     "social.view-more-socials": "查看更多socials"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/portuguese.json b/packages/modal-ui/src/i18n/portuguese.json
@@ -21,6 +21,7 @@
     "external.installed": "Instalado",
     "external.no-wallets-found": "Nenhuma carteira encontrada",
     "external.search-wallet": "Pesquisar através de {{count}} carteiras...",
+    "external.search-wallet-loading": "Carregando...",
     "external.title": "Carteira Externa",
     "external.walletconnect-connect": "Conectar",
     "external.walletconnect-copy": "Digitalize com uma carteira compatível com WalletConnect ou clique no código QR para copiar para sua área de transferência.",
@@ -73,4 +74,4 @@
     "social.view-more": "Ver mais",
     "social.view-more-socials": "Ver mais socials"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/spanish.json b/packages/modal-ui/src/i18n/spanish.json
@@ -21,6 +21,7 @@
     "external.installed": "Instalado",
     "external.no-wallets-found": "No se encontraron billeteras",
     "external.search-wallet": "Buscar a través de {{count}} billeteras...",
+    "external.search-wallet-loading": "Cargando...",
     "external.title": "Billetera Externa",
     "external.walletconnect-connect": "Conectar",
     "external.walletconnect-copy": "Escanee con una billetera compatible con WalletConnect o haga clic en el código QR para copiarlo en su portapapeles.",
@@ -73,4 +74,4 @@
     "social.view-more": "Ver más",
     "social.view-more-socials": "Ver más socials"
   }
-}
+}
diff --git a/packages/modal-ui/src/i18n/turkish.json b/packages/modal-ui/src/i18n/turkish.json
@@ -21,6 +21,7 @@
     "external.installed": "Yüklendi",
     "external.no-wallets-found": "Cüzdan bulunamadı",
     "external.search-wallet": "{{count}} cüzdan ara...",
+    "external.search-wallet-loading": "Yükleniyor...",
     "external.title": "Harici Cüzdan",
     "external.walletconnect-connect": "Bağla",
     "external.walletconnect-copy": "WalletConnect destekli bir cüzdanla tarayın veya panonuza kopyalamak için QR kodunu tıklayın.",
@@ -73,4 +74,4 @@
     "social.view-more": "Daha fazla görüntüle",
     "social.view-more-socials": "Daha fazlasını görüntüle socials"
   }
-}
+}