Fix biometric UX on iPhone

Koniverse · Aug 15, 2024 · 61a230a · 61a230a
1 parent c31cb3b
commit 61a230a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 32 deletions.
diff --git a/packages/extension-koni-ui/src/connector/telegram/index.ts b/packages/extension-koni-ui/src/connector/telegram/index.ts
@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // Interact with Telegram with fallback
+import { addLazy } from '@subwallet/extension-base/utils';
 import { TelegramWebApp } from '@subwallet/extension-base/utils/telegram';
-import { isIos } from '@subwallet/extension-koni-ui/utils';
+import { BOWER_PARSER, isIos } from '@subwallet/extension-koni-ui/utils';
 import { versionCompare } from '@subwallet/extension-koni-ui/utils/common/version';
 
 export interface TelegramThemeConfig {
@@ -39,33 +40,59 @@ export class TelegramConnector {
     const rootElem = document.getElementById('root');
     const isIphone = isIos();
 
-    rootElem && TelegramWebApp.onEvent('viewportChanged', (rs) => {
-      const currentHeight = TelegramWebApp.viewportHeight || 0;
+    bodyElem.classList.add(`platform-${BOWER_PARSER.getOSName(true)}`);
+    document.documentElement.style.setProperty('--playnation-view-height', '100%');
+    document.documentElement.style.setProperty('--playnation-keyboard-height', '0');
 
-      if (currentHeight < 600) {
-        bodyElem.style.height = `${currentHeight + 1}px`;
-      } else {
-        bodyElem.style.height = '100vh';
-      }
+    let handleScroll = 0;
+    let lastHandleScroll = handleScroll;
+
+    if (isIphone) {
+      window.onscroll = (ev) => {
+        if (window.scrollY !== 0) {
+          handleScroll++;
+
+          addLazy('window-scroll-back', () => {
+            window.scroll(0, 0);
+            // handleScroll = null;
+          }, 30);
+        }
+      };
+    }
+
+    rootElem && TelegramWebApp.onEvent('viewportChanged', (rs) => {
+      const windowHeight = window.innerHeight;
+      const currentHeight = TelegramWebApp.viewportHeight || 600;
+      const keyboardHeight = windowHeight - currentHeight;
+      const isSmallScreen = currentHeight < 600 && currentHeight > 100;
+      const updateValue = isSmallScreen ? `${currentHeight}px` : '100%';
+      const keyboardValue = isSmallScreen ? `${keyboardHeight}px` : '0';
 
       if (isIphone) {
-        setTimeout(() => {
-          window.scrollTo(0, 1);
-        }, 600);
+        (async () => {
+          if (isSmallScreen) {
+            await new Promise((resolve) => {
+              setTimeout(resolve, 100);
+            });
+
+            // Wait for scroll back
+            if (lastHandleScroll !== handleScroll) {
+              await new Promise((resolve) => {
+                setTimeout(resolve, 330);
+              });
+            }
+          }
+
+          lastHandleScroll = handleScroll;
+
+          document.documentElement.style.setProperty('--playnation-view-height', updateValue);
+          document.documentElement.style.setProperty('--playnation-keyboard-height', keyboardValue);
+        })().catch(console.error);
+      } else {
+        document.documentElement.style.setProperty('--playnation-view-height', updateValue);
+        document.documentElement.style.setProperty('--playnation-keyboard-height', keyboardValue);
       }
     });
-
-    // debugElem && rootElem && visualViewport && visualViewport.addEventListener('resize', (rs) => {
-    //   debugElem.innerText = JSON.stringify({
-    //     visualViewport: {
-    //       width: visualViewport.width,
-    //       height: visualViewport.height
-    //     }
-    //   });
-    //   if (visualViewport) {
-    //     rootElem.style.height = `${visualViewport?.height}px`;
-    //   }
-    // });
   }
 
   get userInfo () {

diff --git a/packages/webapp/public/index.html b/packages/webapp/public/index.html
@@ -41,6 +41,10 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+  <!-- Import base CSS -->
+  <link href="/fonts/PlusJakartaSans/index.css" rel="stylesheet">
+  <link href="/assets/reset.css?v=3.02" rel="stylesheet">
+
   <style>
     .startup-screen {
       overflow: hidden;
@@ -111,12 +115,34 @@
         top: 335px;
       }
     }
-  </style>
 
-  <!-- Import base CSS -->
-  <link href="/fonts/PlusJakartaSans/index.css" rel="stylesheet">
-  <link href="/assets/reset.css?v=3.02" rel="stylesheet">
+    /* Fix ios screen height */
+    :root {
+      --playnation-view-height: 100%;
+      --playnation-keyboard-height: 0;
+    }
+
+    body {
+      background-color: #F0F7F8;
+      width: 100vw;
+      height: var(--playnation-view-height);
+      overflow: hidden;
+    }
 
+    body.platform-ios {
+      transition: height 0.3s;
+    }
+
+    #popup-container > .ant-sw-modal-root > .ant-sw-modal-wrap {
+      height: var(--playnation-view-height);
+    }
+
+    .platform-ios #popup-container > .ant-sw-modal-root > .ant-sw-modal-wrap {
+      transition: height 0.3s;
+    }
+
+
+  </style>
   <script src="https://telegram.org/js/telegram-web-app.js?v=7.7"></script>
 
   <!-- Google tag (gtag.js) -->
@@ -162,13 +188,9 @@
     }
 
     checkForUpdates()
-
   </script>
-
-  <!-- Import main JS logic -->
 </head>
-
-<body style="background-color: #F0F7F8; width: 100vw; height: 100vh; overflow: hidden">
+<body>
   <div id="root"></div>
   <div id="loading-placeholder" class="startup-screen" style="position:fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000">
     <div class="startup-screen-title">