loader fix

Web3Auth · Jan 3, 2025 · 7c7d47d · 7c7d47d
1 parent ae5922f
commit 7c7d47d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
@@ -171,6 +171,7 @@ const Body = (props: BodyProps) => {
   return (
     <BodyContext.Provider value={{ bodyState, setBodyState }}>
       <div class="w3a--h-auto w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1 w3a--relative">
+        {/* Content */}
         <Show
           when={props.modalState.status !== MODAL_STATUS.INITIALIZED}
           fallback={
@@ -228,13 +229,20 @@ const Body = (props: BodyProps) => {
             appLogo={props.appLogo}
           />
         </Show>
+
+        {/* Footer */}
         <Footer />
+
+        {/* Wallet Details */}
         <Show when={bodyState.showWalletDetails}>
           <div
             class="w3a--absolute w3a--h-full w3a--w-full w3a--top-0 w3a--left-0 w3a--bottom-sheet-bg w3a--rounded-3xl"
             onClick={() => setBodyState({ showWalletDetails: false })}
           />
-          <div class="w3a--absolute w3a--bottom w3a--left-0 w3a--bg-app-light-surface-main dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--p-4 w3a--bottom-sheet-width w3a--flex w3a--flex-col w3a--gap-y-2 w3a--shadow-sm w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-600">
+          <div
+            class="w3a--absolute w3a--bottom w3a--left-0 w3a--bg-app-light-surface-main dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--p-4 w3a--bottom-sheet-width w3a--flex w3a--flex-col 
+            w3a--gap-y-2 w3a--shadow-sm w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-600"
+          >
             <div
               class="w3a--h-1 w3a--w-16 w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--mx-auto w3a--rounded-full w3a--cursor-pointer"
               onClick={() => setBodyState({ showWalletDetails: false })}

diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -213,7 +213,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
     // if doesn't have wallet connect & doesn't have install links, must be a custom adapter
     if (button.hasInjectedWallet || (!button.hasWalletConnect && !button.hasInstallLinks)) {
       props.handleExternalWalletClick({ adapter: button.name });
-    } else if (button.hasWalletConnect) {
+    } else if (button.hasWalletConnect && props.walletConnectUri) {
       setSelectedButton(button);
       setSelectedWallet(true);
       setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
@@ -254,7 +254,10 @@ const ConnectWallet = (props: ConnectWalletProps) => {
         when={selectedWallet()}
         fallback={
           <div class="w3a--contents">
-            <Show when={totalExternalWallets() > 15}>
+            <Show
+              when={totalExternalWallets() > 15 && !isLoading()}
+              fallback={<div class="w3a--w-full w3a--h-[46px] w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />}
+            >
               <input
                 type="text"
                 value={walletSearch()}
@@ -268,6 +271,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 placeholder={
                   isLoading() ? t("modal.external.search-wallet-loading") : t("modal.external.search-wallet", { count: `${totalExternalWallets()}` })
                 }
+                disabled={isLoading()}
                 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>
@@ -288,7 +292,13 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 <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={Array(6).fill(0)}>
+                        {(_) => (
+                          <div class="w3a--w-full w3a--h-[54px] w3a--animate-pulse w3a--rounded-lg w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
+                        )}
+                      </For>
+                    </div>
                   }
                 >
                   <div class="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
@@ -327,16 +337,16 @@ const ConnectWallet = (props: ConnectWalletProps) => {
               </div>
             }
           >
-            <div class="w3a--relative w3a--bg-app-gray-200 w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--flex w3a--items-center w3a--justify-center">
+            <div class="w3a--relative w3a--bg-app-gray-100 dark:w3a--bg-app-white w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--flex w3a--items-center w3a--justify-center">
               <QRCodeCanvas
                 value={props.walletConnectUri || ""}
                 level="low"
                 backgroundColor="transparent"
                 backgroundAlpha={0}
                 foregroundColor="#000000"
                 foregroundAlpha={1}
-                width={280}
-                height={280}
+                width={300}
+                height={300}
                 x={0}
                 y={0}
                 maskType={MaskType.FLOWER_IN_SQAURE}

diff --git a/packages/modal-ui/src/components/Modal/Modal.tsx b/packages/modal-ui/src/components/Modal/Modal.tsx
@@ -15,7 +15,7 @@ export interface ModalProps {
 
 const Modal: Component<ModalProps> = (props: ModalProps) => {
   const mergedProps = mergeProps(
-    { open: false, padding: true, placement: "center", shadow: true, border: true, showCloseIcon: false },
+    { open: false, padding: true, placement: "center", shadow: true, border: false, showCloseIcon: false },
     props as ModalProps
   );