Merge pull request #111 from multiversx/fix-login-scroll

Fix Ledger Display
multiversx · Mar 18, 2024 · 7b1d838 · 7b1d838
2 parents 70e05cf + e141b54
commit 7b1d838
Show file tree

Hide file tree

Showing 6 changed files with 834 additions and 217 deletions.
diff --git a/package.json b/package.json
@@ -18,10 +18,10 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "13.0.0-beta.5",
-    "@multiversx/sdk-dapp": "2.29.0-beta.5",
+    "@multiversx/sdk-core": "13.0.0-beta.6",
+    "@multiversx/sdk-dapp": "2.29.0-beta.7",
     "@multiversx/sdk-dapp-sc-explorer": "0.0.1-beta.7",
-    "@multiversx/sdk-native-auth-server": "1.0.12",
+    "@multiversx/sdk-native-auth-server": "1.0.16",
     "@multiversx/sdk-wallet": "4.3.0",
     "@uiw/react-textarea-code-editor": "2.1.9",
     "axios": "1.6.5",
@@ -43,18 +43,18 @@
     "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
-    "@types/jest": "^29.5.7",
+    "@types/jest": "29.5.7",
     "@types/lodash.debounce": "4.0.8",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "@vitejs/plugin-react-swc": "3.4.1",
-    "@wdio/cli": "^8.16.2",
-    "@wdio/local-runner": "^8.16.2",
-    "@wdio/mocha-framework": "^8.16.0",
-    "@wdio/spec-reporter": "^8.15.10",
+    "@wdio/cli": "8.16.2",
+    "@wdio/local-runner": "8.16.2",
+    "@wdio/mocha-framework": "8.16.0",
+    "@wdio/spec-reporter": "8.15.10",
     "eslint": "8.52.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
@@ -66,12 +66,12 @@
     "jsdom": "22.1.0",
     "msw": "0.49.2",
     "prettier": "3.0.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
+    "ts-node": "10.9.1",
+    "typescript": "5.3.2",
     "vite": "4.5.0",
     "vite-plugin-node-polyfills": "0.15.0",
     "vite-tsconfig-paths": "4.2.1",
     "vitest": "0.34.6",
-    "wdio-intercept-service": "^4.4.0"
+    "wdio-intercept-service": "4.4.0"
   }
 }
diff --git a/src/assets/sass/plugins/sdk-sc-explorer/_modals.scss b/src/assets/sass/plugins/sdk-sc-explorer/_modals.scss
@@ -256,22 +256,3 @@
     }
   }
 }
-
-.modal-backdrop {
-  --backdrop-zindex: 1050;
-  --backdrop-bg: var(--neutral-900);
-  --backdrop-opacity: 0.75;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--backdrop-zindex);
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--backdrop-bg);
-}
-.modal-backdrop.fade {
-  opacity: 0;
-}
-.modal-backdrop.show {
-  opacity: var(--backdrop-opacity);
-}
diff --git a/src/assets/sass/theme.scss b/src/assets/sass/theme.scss
@@ -76,6 +76,39 @@ body {
       padding: 0;
     }
   }
+
+  .dapp-core-component__progressBarStyles__ledger-progress-bar {
+    width: 250px;
+  }
+}
+
+.modal-backdrop {
+  --backdrop-zindex: 1050;
+  --backdrop-bg: var(--background);
+  --backdrop-opacity: 0.75;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--backdrop-zindex);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--backdrop-bg);
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop.show {
+  opacity: var(--backdrop-opacity);
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-clip: padding-box;
+  outline: 0;
 }
 
 #dapp-modal {
@@ -87,13 +120,11 @@ body {
   .dapp-modal-dialog-content {
     background-color: var(--body);
     box-shadow: 0.25rem 0.25rem 1rem 0.5rem var(--body);
-    padding: 1.5rem;
     border-radius: 1rem;
     position: relative;
     max-width: 30rem;
     color: var(--text);
     z-index: 2000;
-    margin: 0 auto;
     border: 1px solid var(--background);
 
     .dapp-modal-dialog-header {
@@ -137,6 +168,10 @@ body {
       }
     }
 
+    .dapp-core-component__signWithDeviceModalStyles__spaced {
+      padding: 0 !important;
+    }
+
     .dapp-modal-dialog-content-body {
       padding: 0;
 

diff --git a/src/pages/Unlock/Unlock.tsx b/src/pages/Unlock/Unlock.tsx
@@ -25,7 +25,7 @@ enum LoginContainersTypesEnum {
 const customStyles = {
   ledgerProgressBarClassNames: {
     ledgerProgressBarThumbClassName: styles.ledgerProgressbarThumb,
-    ledgerProgressBarTrackClassName: styles.ledgerProgressbarTrack
+    ledgerProgressBarTrackClassName: styles.ledgerProgressbarTrack,
   },
   ledgerConnectClassNames: {
     ledgerModalButtonClassName: styles.ledgerConnectButton,
@@ -37,9 +37,10 @@ const customStyles = {
     ledgerModalTableHeadClassName: styles.ledgerTableHead,
     ledgerModalTableItemClassName: styles.ledgerTableItem,
     ledgerModalButtonClassName: styles.ledgerTableButton,
-    ledgerModalTableNavigationButtonClassName: styles.ledgerTableNavigationButton
-  }
-}
+    ledgerModalTableNavigationButtonClassName:
+      styles.ledgerTableNavigationButton,
+  },
+};
 
 export const Unlock = () => {
   const { search } = useLocation();
@@ -80,14 +81,14 @@ export const Unlock = () => {
       component: WalletConnectLoginButton,
       id: LoginContainersTypesEnum.walletConnect,
       isWalletConnectV2: true,
-      onModalOpens: () =>
+      onContentShow: () =>
         setOpenedContainerType(LoginContainersTypesEnum.walletConnect),
     },
     {
       name: 'Ledger',
       id: LoginContainersTypesEnum.ledger,
       component: LedgerLoginButton,
-      onModalOpens: () =>
+      onContentShow: () =>
         setOpenedContainerType(LoginContainersTypesEnum.ledger),
     },
     {
@@ -132,9 +133,9 @@ export const Unlock = () => {
               titles[LoginContainersTypesEnum.none]}
           </div>
 
-          <div className={styles.close} onClick={onClose}>
+          <button className={styles.close} onClick={onClose}>
             <CloseIcon />
-          </div>
+          </button>
         </div>
 
         <div className={styles.buttons}>

diff --git a/src/pages/Unlock/styles.module.scss b/src/pages/Unlock/styles.module.scss
@@ -1,30 +1,23 @@
 .modal {
+  --modal-width: 530px;
   position: fixed;
-  left: 0;
   top: 0;
-  right: 0;
+  left: 0;
   z-index: 2022;
-  bottom: 0;
-  padding: 1.5rem;
-
-  &:before {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    content: '';
-    opacity: 0.75;
-    position: absolute;
-    background-color: var(--background);
-  }
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
 
   .dialog {
-    height: 100%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    margin: 1.5rem auto;
+    width: 100%;
+    min-height: calc(100% - 3rem);
+    max-width: var(--modal-width);
   }
-
   .unlock {
     background-color: var(--body);
     box-shadow: 0.25rem 0.25rem 1rem 0.5rem var(--body);
@@ -34,7 +27,6 @@
     position: relative;
     max-width: 30rem;
     z-index: 2000;
-    margin: 0 auto;
     border: 1px solid var(--background);
 
     .heading {
@@ -63,6 +55,8 @@
         cursor: pointer;
         transition: all 400ms ease;
         box-sizing: border-box;
+        background-color: transparent;
+        color: var(--text);
 
         &:hover {
           background-color: var(--background);