CP-9320: PIN - keypad number type (#2086)

ava-labs · Nov 18, 2024 · d2a28d7 · d2a28d7
1 parent 2b4481a
commit d2a28d7
Show file tree

Hide file tree

Showing 7 changed files with 428 additions and 77 deletions.
diff --git a/packages/core-mobile/ios/Podfile.lock b/packages/core-mobile/ios/Podfile.lock
@@ -1312,7 +1312,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.0.3):
     - React-Core
-  - RNReanimated (3.8.0):
+  - RNReanimated (3.6.2):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1852,7 +1852,7 @@ SPEC CHECKSUMS:
   RNOS: 6f2f9a70895bbbfbdad7196abd952e7b01d45027
   RNPermissions: 54b1d785ad3a2e6eb61b69a1cb1970a3ea5871f0
   RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
-  RNReanimated: 00ee495a70897aa9d541e76debec14253133b812
+  RNReanimated: 4f0931c29b1535a3a40a6c06797b1d9d39f50754
   RNScreens: 29418ceffb585b8f0ebd363de304288c3dce8323
   RNSensors: 117ba71c7eeeea0407ea0c0bb79e3495d602049b
   RNSentry: 08fd316b26e160e40e811a7e455d2d20beb2b4b1

diff --git a/packages/core-mobile/package.json b/packages/core-mobile/package.json
@@ -157,7 +157,7 @@
     "react-native-qrcode-svg": "6.3.2",
     "react-native-quick-base64": "2.1.2",
     "react-native-quick-crypto": "0.6.1",
-    "react-native-reanimated": "3.8.0",
+    "react-native-reanimated": "3.6.2",
     "react-native-redash": "18.1.3",
     "react-native-restart": "0.0.27",
     "react-native-root-siblings": "5.0.1",

diff --git a/packages/k2-alpine/babel.config.js b/packages/k2-alpine/babel.config.js
@@ -1,6 +1,7 @@
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo']
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
   }
 }
diff --git a/packages/k2-alpine/package.json b/packages/k2-alpine/package.json
@@ -26,13 +26,13 @@
     "expo-status-bar": "1.12.1",
     "react": "18.3.1",
     "react-native": "0.73.7",
-    "react-native-reanimated": "3.8.0",
+    "react-native-reanimated": "3.6.2",
     "react-native-svg": "15.7.1"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-native": "0.73.7",
-    "react-native-reanimated": "3.8.0"
+    "react-native-reanimated": "3.6.2"
   },
   "devDependencies": {
     "@avalabs/tsconfig-mobile": "workspace:*",

diff --git a/packages/k2-alpine/src/components/PinInput/PinInput.stories.tsx b/packages/k2-alpine/src/components/PinInput/PinInput.stories.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Alert, Switch } from 'react-native'
+import { ScrollView, Text, View } from '../Primitives'
+import { useTheme } from '../..'
+import { PinInput, PinInputActions } from './PinInput'
+
+export default {
+  title: 'PinInput'
+}
+
+export const All = (): JSX.Element => {
+  const { theme } = useTheme()
+  const [pinCode, setPinCode] = useState('')
+  const [useEightDigit, setUseEightDigit] = useState(false)
+  const PIN_CODE = useEightDigit ? '00000000' : '000000'
+  const pinLength = useEightDigit ? 8 : 6
+
+  const pinInputRef = useRef<PinInputActions>(null)
+
+  const handleUseEightDigit = (value: boolean): void => {
+    setUseEightDigit(value)
+    setPinCode('')
+    pinInputRef.current?.focus()
+  }
+
+  useEffect(() => {
+    pinInputRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (pinCode.length !== pinLength) return
+
+    pinInputRef.current?.blur()
+    pinInputRef.current?.startLoadingAnimation()
+
+    setTimeout(() => {
+      pinInputRef.current?.stopLoadingAnimation(() => {
+        if (pinCode === PIN_CODE) {
+          Alert.alert('Pincode is correct', undefined, [
+            {
+              text: 'OK',
+              onPress: () => {
+                setPinCode('')
+                pinInputRef.current?.focus()
+              }
+            }
+          ])
+        } else {
+          pinInputRef.current?.fireWrongPinAnimation(() => {
+            setPinCode('')
+            pinInputRef.current?.focus()
+          })
+        }
+      })
+    }, 2000)
+  }, [pinCode, PIN_CODE, pinLength])
+
+  return (
+    <ScrollView
+      style={{
+        width: '100%',
+        backgroundColor: theme.colors.$surfacePrimary
+      }}
+      contentContainerStyle={{ padding: 16 }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: 20,
+          justifyContent: 'space-between'
+        }}>
+        <View sx={{}}>
+          <Text>Your Pincode: {PIN_CODE}</Text>
+        </View>
+        <View
+          style={{
+            gap: 8,
+            flexDirection: 'row',
+            alignItems: 'center'
+          }}>
+          <Text>8 Digit</Text>
+          <Switch value={useEightDigit} onValueChange={handleUseEightDigit} />
+        </View>
+      </View>
+      <PinInput
+        style={{
+          alignItems: 'center',
+          marginTop: 100,
+          height: 100
+        }}
+        ref={pinInputRef}
+        value={pinCode}
+        onChangePin={setPinCode}
+        length={pinLength}
+      />
+      <View style={{ height: 160 }} />
+    </ScrollView>
+  )
+}