From 8814eaf9f20cdf70d1faf8827cdaa52927a221ae Mon Sep 17 00:00:00 2001 From: FarjadGov14 Date: Thu, 10 Oct 2024 12:48:23 -0400 Subject: [PATCH 1/3] feat: modify the toggle button with icons in biometrics screen Signed-off-by: FarjadGov14 --- .../legacy/core/App/screens/UseBiometry.tsx | 77 +++++++++++++++---- 1 file changed, 64 insertions(+), 13 deletions(-) diff --git a/packages/legacy/core/App/screens/UseBiometry.tsx b/packages/legacy/core/App/screens/UseBiometry.tsx index ec0c81da6..0356a105b 100644 --- a/packages/legacy/core/App/screens/UseBiometry.tsx +++ b/packages/legacy/core/App/screens/UseBiometry.tsx @@ -2,8 +2,19 @@ import { CommonActions, useNavigation } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import React, { useState, useEffect, useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' -import { StyleSheet, Text, View, Modal, Switch, ScrollView, Pressable, DeviceEventEmitter } from 'react-native' +import { + StyleSheet, + Text, + View, + Modal, + Switch, + ScrollView, + Pressable, + DeviceEventEmitter, + Animated, +} from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' +import Icon from 'react-native-vector-icons/MaterialIcons' import Button, { ButtonType } from '../components/buttons/Button' import { EventTypes } from '../constants' @@ -33,12 +44,11 @@ const UseBiometry: React.FC = () => { const [continueEnabled, setContinueEnabled] = useState(true) const [canSeeCheckPIN, setCanSeeCheckPIN] = useState(false) const { ColorPallet, TextTheme, Assets } = useTheme() + const [toggleAnim] = useState(new Animated.Value(biometryEnabled ? 1 : 0)) const { ButtonLoading } = useAnimatedComponents() const navigation = useNavigation>() const screenUsage = useMemo(() => { - return store.onboarding.didCompleteOnboarding - ? UseBiometryUsage.ToggleOnOff - : UseBiometryUsage.InitialSetup + return store.onboarding.didCompleteOnboarding ? UseBiometryUsage.ToggleOnOff : UseBiometryUsage.InitialSetup }, [store.onboarding.didCompleteOnboarding]) const styles = StyleSheet.create({ @@ -59,7 +69,7 @@ const UseBiometry: React.FC = () => { setBiometryAvailable(result) }) }, [isBiometricsActive]) - + useEffect(() => { if (screenUsage === UseBiometryUsage.InitialSetup) { return @@ -115,6 +125,25 @@ const UseBiometry: React.FC = () => { setBiometryEnabled((previousState) => !previousState) }, [screenUsage]) + const handleToggle = () => { + Animated.timing(toggleAnim, { + toValue: biometryEnabled ? 0 : 1, + duration: 200, + useNativeDriver: false, + }).start() + toggleSwitch() + } + + const backgroundColor = toggleAnim.interpolate({ + inputRange: [0, 1], + outputRange: [ColorPallet.grayscale.lightGrey, ColorPallet.brand.primaryDisabled], + }) + + const translateX = toggleAnim.interpolate({ + inputRange: [0, 1], + outputRange: [2, 25], + }) + const onAuthenticationComplete = useCallback((status: boolean) => { // If successfully authenticated the toggle may proceed. if (status) { @@ -161,15 +190,37 @@ const UseBiometry: React.FC = () => { accessible accessibilityLabel={t('Biometry.Toggle')} accessibilityRole={'switch'} + onPress={handleToggle} + disabled={!biometryAvailable} > - + + + {biometryEnabled ? ( + + ) : ( + + )} + + From ee3384920635d9cbd4cde0049525ac24cd40fa9f Mon Sep 17 00:00:00 2001 From: FarjadGov14 Date: Thu, 10 Oct 2024 13:23:51 -0400 Subject: [PATCH 2/3] feat: update snapshot tests Signed-off-by: FarjadGov14 --- .../__snapshots__/UseBiometry.test.tsx.snap | 225 +++++++++++++----- 1 file changed, 159 insertions(+), 66 deletions(-) diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/UseBiometry.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/UseBiometry.test.tsx.snap index 8c115ec84..1c1909de5 100644 --- a/packages/legacy/core/__tests__/screens/__snapshots__/UseBiometry.test.tsx.snap +++ b/packages/legacy/core/__tests__/screens/__snapshots__/UseBiometry.test.tsx.snap @@ -117,7 +117,7 @@ exports[`UseBiometry Screen Renders correctly when biometry available 1`] = ` Object { "busy": undefined, "checked": undefined, - "disabled": undefined, + "disabled": false, "expanded": undefined, "selected": undefined, } @@ -144,29 +144,60 @@ exports[`UseBiometry Screen Renders correctly when biometry available 1`] = ` onStartShouldSetResponder={[Function]} testID="com.ariesbifold:id/ToggleBiometrics" > - + > + + +  + + + @@ -368,7 +399,7 @@ exports[`UseBiometry Screen Renders correctly when biometry not available 1`] = Object { "busy": undefined, "checked": undefined, - "disabled": undefined, + "disabled": true, "expanded": undefined, "selected": undefined, } @@ -395,29 +426,60 @@ exports[`UseBiometry Screen Renders correctly when biometry not available 1`] = onStartShouldSetResponder={[Function]} testID="com.ariesbifold:id/ToggleBiometrics" > - + > + + +  + + + @@ -631,7 +693,7 @@ exports[`UseBiometry Screen Toggles use biometrics ok 1`] = ` Object { "busy": undefined, "checked": undefined, - "disabled": undefined, + "disabled": false, "expanded": undefined, "selected": undefined, } @@ -658,29 +720,60 @@ exports[`UseBiometry Screen Toggles use biometrics ok 1`] = ` onStartShouldSetResponder={[Function]} testID="com.ariesbifold:id/ToggleBiometrics" > - + > + + +  + + + From 2af82ce5933db2a2900478a17d3875dd8e033e3f Mon Sep 17 00:00:00 2001 From: FarjadGov14 Date: Thu, 10 Oct 2024 13:39:01 -0400 Subject: [PATCH 3/3] feat: fix lint Signed-off-by: FarjadGov14 --- packages/legacy/core/App/screens/UseBiometry.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/legacy/core/App/screens/UseBiometry.tsx b/packages/legacy/core/App/screens/UseBiometry.tsx index 0356a105b..8dc9a5f3a 100644 --- a/packages/legacy/core/App/screens/UseBiometry.tsx +++ b/packages/legacy/core/App/screens/UseBiometry.tsx @@ -7,7 +7,6 @@ import { Text, View, Modal, - Switch, ScrollView, Pressable, DeviceEventEmitter,