Merge branch 'truesight-v2' of https://github.com/KyberNetwork/kybers…

…wap-interface into truesight-v2
KyberNetwork · Jun 2, 2023 · a83dea5 · a83dea5
2 parents 4b13626 + 65d9a7b
commit a83dea5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/src/constants/env.ts b/src/constants/env.ts
@@ -130,9 +130,9 @@ const ANNOUNCEMENT_TEMPLATE_IDS: { [key: string]: { [type: string]: string } } =
     [PrivateAnnouncementType.PRICE_ALERT]: '21,22',
     [PrivateAnnouncementType.LIMIT_ORDER]: '12,13,14,15',
     [PrivateAnnouncementType.BRIDGE_ASSET]: '10,11',
-    [PrivateAnnouncementType.KYBER_AI]: '9', // todo
+    [PrivateAnnouncementType.KYBER_AI]: '26',
     [PrivateAnnouncementType.ELASTIC_POOLS]: '17,18',
-    EXCLUDE: '2,16,19', // todo
+    EXCLUDE: '2,16,19,9,25,24',
   },
 }
 

diff --git a/src/pages/Verify/VerifyCodeModal/OtpInput.tsx b/src/pages/Verify/VerifyCodeModal/OtpInput.tsx
@@ -39,6 +39,8 @@ interface OTPInputProps {
   inputStyle?: React.CSSProperties
   /** The type that will be passed to the input being rendered */
   inputType?: AllowedInputTypes
+  onFocus?: () => void
+  onBlur?: () => void
 }
 
 const OTPInput = ({
@@ -50,6 +52,8 @@ const OTPInput = ({
   inputType = 'text',
   containerStyle,
   inputStyle,
+  onFocus,
+  onBlur,
 }: OTPInputProps) => {
   const [activeInput, setActiveInput] = React.useState(0)
   const inputRefs = React.useRef<Array<HTMLInputElement | null>>([])
@@ -95,10 +99,12 @@ const OTPInput = ({
   }
 
   const handleFocus = () => (index: number) => {
+    onFocus?.()
     setActiveInput(index)
   }
 
-  const onBlur = () => {
+  const handleBlur = () => {
+    onBlur?.()
     setActiveInput(activeInput - 1)
   }
 
@@ -194,7 +200,7 @@ const OTPInput = ({
               ref: element => (inputRefs.current[index] = element),
               onChange: handleChange,
               onFocus: () => handleFocus()(index),
-              onBlur,
+              onBlur: handleBlur,
               onKeyDown,
               onPaste,
               autoComplete: 'off',

diff --git a/src/pages/Verify/VerifyCodeModal/index.tsx b/src/pages/Verify/VerifyCodeModal/index.tsx
@@ -1,7 +1,8 @@
 import { Trans, t } from '@lingui/macro'
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { isMobile } from 'react-device-detect'
+import { isAndroid, isIOS, isMobile } from 'react-device-detect'
 import { X } from 'react-feather'
+import { useMedia } from 'react-use'
 import { Text } from 'rebass'
 import { useSendOtpMutation, useVerifyOtpMutation } from 'services/identity'
 import styled from 'styled-components'
@@ -87,15 +88,8 @@ export default function VerifyCodeModal({
   const [verifySuccess, setVerifySuccess] = useState(false)
   const [error, setError] = useState(false)
   const notify = useNotify()
-  const [isTyping, setIsTyping] = useState(false)
-
-  useEffect(() => {
-    const onResize = () => {
-      setIsTyping(window.innerHeight < 450)
-    }
-    window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
-  }, [])
+  const [isTypingIos, setIsTypingIos] = useState(false)
+  const isTypingAndroid = useMedia(`(max-height: 450px)`)
 
   const [expiredDuration, setExpireDuration] = useState(defaultTime)
   const canShowResend = expiredDuration < (timeExpire - 1) * TIMES_IN_SECS.ONE_MIN
@@ -187,7 +181,16 @@ export default function VerifyCodeModal({
       onDismiss={onDismiss}
       minHeight={false}
       maxWidth={450}
-      height={isTyping && isMobile ? '100%' : undefined}
+      maxHeight={isTypingIos && isIOS ? window.innerHeight + 'px' : undefined}
+      height={
+        !isMobile
+          ? undefined
+          : isAndroid && isTypingAndroid
+          ? '100%'
+          : isTypingIos && isIOS
+          ? window.innerHeight + 'px'
+          : undefined
+      }
     >
       <Wrapper>
         {verifySuccess ? (
@@ -213,7 +216,26 @@ export default function VerifyCodeModal({
               value={otp}
               onChange={onChange}
               numInputs={6}
-              renderInput={props => <Input {...props} hasError={error} placeholder="-" type="number" />}
+              renderInput={props => (
+                <Input
+                  {...props}
+                  hasError={error}
+                  placeholder="-"
+                  type="number"
+                  onFocus={() => {
+                    isIOS && setIsTypingIos(true)
+                    setTimeout(() => {
+                      window.scrollTo({ top: 0 })
+                    }, 100)
+                  }}
+                  onBlur={() =>
+                    isIOS &&
+                    setTimeout(() => {
+                      setIsTypingIos(false)
+                    }, 100)
+                  }
+                />
+              )}
             />
 
             <Label style={{ width: '100%', textAlign: 'center' }}>