From 516c91bc91e0cf52bf517a0919aa3c93841ce5bc Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 3 Jun 2022 18:19:50 +0200 Subject: [PATCH 01/78] refactor(ausweisidentity): removing disbaled prop from btn and adding logic to onPress event instead --- .../LoggedIn/Identity/AusweisIdentity.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index d8e547947..6189a3252 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -37,7 +37,9 @@ export const AusweisIdentity = () => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const handleCompatibilityCheck = () => { - checkNfcSupport(startCompatibilityCheck) + if (!shouldDisableUnlock) { + checkNfcSupport(startCompatibilityCheck) + } } const handleChangePin = () => @@ -122,11 +124,12 @@ export const AusweisIdentity = () => { } const handleUnlockCard = () => { - checkNfcSupport(() => { - setupUnlockCardHandlers() - - startChangePin() - }) + if (!shouldDisableUnlock) { + checkNfcSupport(() => { + setupUnlockCardHandlers() + startChangePin() + }) + } } const handleMoreInfo = () => navigation.navigate(ScreenNames.AusweisMoreInfo) @@ -170,7 +173,6 @@ export const AusweisIdentity = () => { type={BtnTypes.secondary} customContainerStyles={styles.btn} onPress={handleCompatibilityCheck} - disabled={Platform.OS === 'ios' && shouldDisableUnlock} > {t('AusweisIdentity.compatibilityBtn')} @@ -185,7 +187,6 @@ export const AusweisIdentity = () => { type={BtnTypes.secondary} customContainerStyles={styles.btn} onPress={handleUnlockCard} - disabled={shouldDisableUnlock} > {t('AusweisIdentity.unlockBtn')} From ea9bafbf5a9d978af900d57bc6d2ba1bb6db9201 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Wed, 15 Jun 2022 13:50:51 +0200 Subject: [PATCH 02/78] refactor(ausweisidentity): changing logic to handle click after timeout --- .../LoggedIn/Identity/AusweisIdentity.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 6189a3252..b73b207a8 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -1,10 +1,9 @@ import React from 'react' -import { Image, Platform, StyleSheet, View } from 'react-native' +import { Image, StyleSheet, View } from 'react-native' import { aa2Module } from '@jolocom/react-native-ausweis' import { useNavigation } from '@react-navigation/native' import { CardInfo } from '@jolocom/react-native-ausweis/js/types' import { useSelector } from 'react-redux' - import Btn, { BtnTypes } from '~/components/Btn' import JoloText, { JoloTextKind, JoloTextWeight } from '~/components/JoloText' import { Colors } from '~/utils/colors' @@ -37,7 +36,11 @@ export const AusweisIdentity = () => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const handleCompatibilityCheck = () => { - if (!shouldDisableUnlock) { + if (shouldDisableUnlock) { + setTimeout(() => { + checkNfcSupport(startCompatibilityCheck) + }, 2500) + } else { checkNfcSupport(startCompatibilityCheck) } } @@ -124,7 +127,14 @@ export const AusweisIdentity = () => { } const handleUnlockCard = () => { - if (!shouldDisableUnlock) { + if (shouldDisableUnlock) { + setTimeout(() => { + checkNfcSupport(() => { + setupUnlockCardHandlers() + startChangePin() + }) + }, 2500) + } else { checkNfcSupport(() => { setupUnlockCardHandlers() startChangePin() From d59da805fe7c210721c24ab38a194c413fa46c8a Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Wed, 15 Jun 2022 14:35:20 +0200 Subject: [PATCH 03/78] refactor(ausweisidentity): fixing issue when clicking on btn multiple times --- .../LoggedIn/Identity/AusweisIdentity.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index b73b207a8..7a8db2e26 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import { Image, StyleSheet, View } from 'react-native' import { aa2Module } from '@jolocom/react-native-ausweis' import { useNavigation } from '@react-navigation/native' @@ -34,15 +34,21 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() const shouldDisableUnlock = !!useSelector(getAusweisFlowType) + const [clicked, setClicked] = useState(false) const handleCompatibilityCheck = () => { - if (shouldDisableUnlock) { - setTimeout(() => { + if (!clicked) { + setClicked(true) + if (shouldDisableUnlock) { + setTimeout(() => { + checkNfcSupport(startCompatibilityCheck) + setClicked(false) + }, 2500) + } else { checkNfcSupport(startCompatibilityCheck) - }, 2500) - } else { - checkNfcSupport(startCompatibilityCheck) - } + setClicked(false) + } + } else return } const handleChangePin = () => @@ -127,19 +133,24 @@ export const AusweisIdentity = () => { } const handleUnlockCard = () => { - if (shouldDisableUnlock) { - setTimeout(() => { + if (!clicked) { + setClicked(true) + if (shouldDisableUnlock) { + setTimeout(() => { + checkNfcSupport(() => { + setupUnlockCardHandlers() + startChangePin() + }) + setClicked(false) + }, 2500) + } else { checkNfcSupport(() => { setupUnlockCardHandlers() startChangePin() + setClicked(false) }) - }, 2500) - } else { - checkNfcSupport(() => { - setupUnlockCardHandlers() - startChangePin() - }) - } + } + } else return } const handleMoreInfo = () => navigation.navigate(ScreenNames.AusweisMoreInfo) From 2752292545f5c3944d2f9c75a32c1c67aa9adfc5 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Tue, 28 Jun 2022 15:50:56 +0200 Subject: [PATCH 04/78] refactor(ausweisidentity): adding useEffects for handleCompatibility and handleUnlockCard logic --- .../LoggedIn/Identity/AusweisIdentity.tsx | 54 ++++++++----------- 1 file changed, 22 insertions(+), 32 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 7a8db2e26..60ed56f73 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -34,21 +34,28 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() const shouldDisableUnlock = !!useSelector(getAusweisFlowType) - const [clicked, setClicked] = useState(false) + const [clickedCompatibilityBtn, setClickedCompatibilityBtn] = useState(false) + const [clickedHandleUnlockBtn, setClickedHandleUnlockBtn] = useState(false) - const handleCompatibilityCheck = () => { - if (!clicked) { - setClicked(true) - if (shouldDisableUnlock) { - setTimeout(() => { - checkNfcSupport(startCompatibilityCheck) - setClicked(false) - }, 2500) - } else { - checkNfcSupport(startCompatibilityCheck) - setClicked(false) - } - } else return + useEffect(() => { + if (!shouldDisableUnlock && clickedCompatibilityBtn) { + checkNfcSupport(startCompatibilityCheck) + setClickedCompatibilityBtn(false) + } + }, [shouldDisableUnlock, clickedCompatibilityBtn]) + + useEffect(() => { + if (!shouldDisableUnlock && clickedHandleUnlockBtn) { + checkNfcSupport(() => { + setupUnlockCardHandlers() + startChangePin() + }) + setClickedHandleUnlock(false) + } + }, [shouldDisableUnlock, clickedHandleUnlockBtn]) + + function handleCompatibilityCheck() { + !clickedCompatibilityBtn && setClickedCompatibilityBtn(true) } const handleChangePin = () => @@ -133,24 +140,7 @@ export const AusweisIdentity = () => { } const handleUnlockCard = () => { - if (!clicked) { - setClicked(true) - if (shouldDisableUnlock) { - setTimeout(() => { - checkNfcSupport(() => { - setupUnlockCardHandlers() - startChangePin() - }) - setClicked(false) - }, 2500) - } else { - checkNfcSupport(() => { - setupUnlockCardHandlers() - startChangePin() - setClicked(false) - }) - } - } else return + !clickedHandleUnlockBtn && setClickedHandleUnlockBtn(true) } const handleMoreInfo = () => navigation.navigate(ScreenNames.AusweisMoreInfo) From 70058f78a59843e4cc1ab8c3f69fb03181c06a86 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Wed, 29 Jun 2022 15:54:07 +0200 Subject: [PATCH 05/78] refactor(ausweisidentity): extracting shouldDisableLock logic into hook --- .../LoggedIn/Identity/AusweisIdentity.tsx | 69 +++++++++++-------- 1 file changed, 42 insertions(+), 27 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 60ed56f73..55fe1b624 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useRef } from 'react' import { Image, StyleSheet, View } from 'react-native' import { aa2Module } from '@jolocom/react-native-ausweis' import { useNavigation } from '@react-navigation/native' @@ -23,6 +23,34 @@ import { IS_ANDROID } from '~/utils/generic' import { getAusweisFlowType } from '~/modules/interaction/selectors' import { useCheckNFC } from '~/hooks/nfc' +const usePendingEidHandler = () => { + const shouldDisableUnlock = !!useSelector(getAusweisFlowType) + const [shouldDebounce, setShouldDebounce] = useState(false) + const debounceHandler = useRef<() => void>() + + useEffect(() => { + if (shouldDisableUnlock && shouldDebounce) { + setShouldDebounce(false) + debounceHandler.current && debounceHandler.current() + } + }, [shouldDebounce, shouldDisableUnlock]) + + const handlePressAction = () => { + if (shouldDebounce) setShouldDebounce(false) + } + + const handlePress = (handler: () => void) => { + if (shouldDisableUnlock) { + setShouldDebounce(true) + debounceHandler.current = handler + } else { + handler() + } + } + + return { handlePress, handlePressAction } +} + export const AusweisIdentity = () => { const { t } = useTranslation() const { startCheck: startCompatibilityCheck } = @@ -33,29 +61,20 @@ export const AusweisIdentity = () => { eIDHooks.useAusweisInteraction() const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const shouldDisableUnlock = !!useSelector(getAusweisFlowType) - const [clickedCompatibilityBtn, setClickedCompatibilityBtn] = useState(false) - const [clickedHandleUnlockBtn, setClickedHandleUnlockBtn] = useState(false) - useEffect(() => { - if (!shouldDisableUnlock && clickedCompatibilityBtn) { - checkNfcSupport(startCompatibilityCheck) - setClickedCompatibilityBtn(false) - } - }, [shouldDisableUnlock, clickedCompatibilityBtn]) + const { handlePress, handlePressAction } = usePendingEidHandler() - useEffect(() => { - if (!shouldDisableUnlock && clickedHandleUnlockBtn) { - checkNfcSupport(() => { - setupUnlockCardHandlers() - startChangePin() - }) - setClickedHandleUnlock(false) - } - }, [shouldDisableUnlock, clickedHandleUnlockBtn]) + const handleCompatibilityCheck = () => { + handlePressAction() + checkNfcSupport(startCompatibilityCheck) + } - function handleCompatibilityCheck() { - !clickedCompatibilityBtn && setClickedCompatibilityBtn(true) + const handleUnlockCard = () => { + handlePressAction() + checkNfcSupport(() => { + setupUnlockCardHandlers() + startChangePin() + }) } const handleChangePin = () => @@ -139,10 +158,6 @@ export const AusweisIdentity = () => { }) } - const handleUnlockCard = () => { - !clickedHandleUnlockBtn && setClickedHandleUnlockBtn(true) - } - const handleMoreInfo = () => navigation.navigate(ScreenNames.AusweisMoreInfo) return ( @@ -183,7 +198,7 @@ export const AusweisIdentity = () => { handlePress(handleCompatibilityCheck)} > {t('AusweisIdentity.compatibilityBtn')} @@ -197,7 +212,7 @@ export const AusweisIdentity = () => { handlePress(handleUnlockCard)} > {t('AusweisIdentity.unlockBtn')} From 610c4fe9d9c510a50905778eed22ad2f8911e536 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Wed, 29 Jun 2022 18:13:11 +0200 Subject: [PATCH 06/78] refactor(ausweisidentity): removing console logs --- src/screens/LoggedIn/Identity/AusweisIdentity.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 55fe1b624..2ec0c78ca 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -29,14 +29,16 @@ const usePendingEidHandler = () => { const debounceHandler = useRef<() => void>() useEffect(() => { - if (shouldDisableUnlock && shouldDebounce) { + if (!shouldDisableUnlock && shouldDebounce) { setShouldDebounce(false) debounceHandler.current && debounceHandler.current() } - }, [shouldDebounce, shouldDisableUnlock]) + }, [shouldDisableUnlock, shouldDebounce]) const handlePressAction = () => { - if (shouldDebounce) setShouldDebounce(false) + if (shouldDebounce) { + setShouldDebounce(false) + } } const handlePress = (handler: () => void) => { From 4548a8fa2f5004e5cb8d214cbba4c1900500d28d Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 30 Jun 2022 11:53:41 +0200 Subject: [PATCH 07/78] refactor(usependingeidhandler): adding hook to AusweisChangePin screen --- .../LoggedIn/Identity/AusweisIdentity.tsx | 16 +++++++--------- .../eID/components/AusweisChangePin.tsx | 9 ++++----- .../eID/components/AusweisTransportWarning.tsx | 1 - 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 2ec0c78ca..15544d8ae 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -23,7 +23,7 @@ import { IS_ANDROID } from '~/utils/generic' import { getAusweisFlowType } from '~/modules/interaction/selectors' import { useCheckNFC } from '~/hooks/nfc' -const usePendingEidHandler = () => { +export const usePendingEidHandler = () => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const [shouldDebounce, setShouldDebounce] = useState(false) const debounceHandler = useRef<() => void>() @@ -35,10 +35,8 @@ const usePendingEidHandler = () => { } }, [shouldDisableUnlock, shouldDebounce]) - const handlePressAction = () => { - if (shouldDebounce) { - setShouldDebounce(false) - } + const resetShouldDebounce = () => { + if (shouldDebounce) setShouldDebounce(false) } const handlePress = (handler: () => void) => { @@ -50,7 +48,7 @@ const usePendingEidHandler = () => { } } - return { handlePress, handlePressAction } + return { handlePress, resetShouldDebounce } } export const AusweisIdentity = () => { @@ -64,15 +62,15 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const { handlePress, handlePressAction } = usePendingEidHandler() + const { handlePress, resetShouldDebounce } = usePendingEidHandler() const handleCompatibilityCheck = () => { - handlePressAction() + resetShouldDebounce() checkNfcSupport(startCompatibilityCheck) } const handleUnlockCard = () => { - handlePressAction() + resetShouldDebounce() checkNfcSupport(() => { setupUnlockCardHandlers() startChangePin() diff --git a/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx b/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx index ee8591101..6d5a4249e 100644 --- a/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx +++ b/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx @@ -21,6 +21,7 @@ import { CardInfoMode, eIDScreens, } from '../types' +import { usePendingEidHandler } from '~/screens/LoggedIn/Identity/AusweisIdentity' import { getAusweisFlowType } from '~/modules/interaction/selectors' import { useCheckNFC } from '~/hooks/nfc' import { AUSWEIS_SUPPORT_EMAIL, AUSWEIS_SUPPORT_PHONE } from '../constants' @@ -58,8 +59,8 @@ const AusweisChangePin = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() const isTransportPin = useRef(false) - const shouldDisableBtns = !!useSelector(getAusweisFlowType) const checkNfcSupport = useCheckNFC() + const { handlePress } = usePendingEidHandler() const changePinFlow = isTransportPin.current === true @@ -222,10 +223,9 @@ const AusweisChangePin = () => { descriptionText={t('AusweisChangePin.transportPinSubheader')} > handlePress(handleChange5DigPin)} type={BtnTypes.quaternary} customTextStyles={{ opacity: 1 }} - disabled={shouldDisableBtns} > {t('AusweisChangePin.transportPinBtn')} @@ -235,10 +235,9 @@ const AusweisChangePin = () => { descriptionText={t('AusweisChangePin.pinSubheader')} > handlePress(handleChange6DigPin)} type={BtnTypes.quaternary} customTextStyles={{ opacity: 1 }} - disabled={shouldDisableBtns} > {t('AusweisChangePin.pinBtn')} diff --git a/src/screens/Modals/Interaction/eID/components/AusweisTransportWarning.tsx b/src/screens/Modals/Interaction/eID/components/AusweisTransportWarning.tsx index c267d4244..cbbacc179 100644 --- a/src/screens/Modals/Interaction/eID/components/AusweisTransportWarning.tsx +++ b/src/screens/Modals/Interaction/eID/components/AusweisTransportWarning.tsx @@ -5,7 +5,6 @@ import Btn from '~/components/Btn' import BtnGroup from '~/components/BtnGroup' import JoloText, { JoloTextKind } from '~/components/JoloText' import ScreenContainer from '~/components/ScreenContainer' - import useTranslation from '~/hooks/useTranslation' import BP from '~/utils/breakpoints' import { Colors } from '~/utils/colors' From a831e96e8d0f5c26be1d70673ed453bc7075ce4b Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 30 Jun 2022 16:27:21 +0200 Subject: [PATCH 08/78] refactor(walkthrough): increasing autoplayTimeout from 5 to 8 seconds --- src/screens/LoggedOut/Walkthrough.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/LoggedOut/Walkthrough.tsx b/src/screens/LoggedOut/Walkthrough.tsx index 7be8d4acb..1b8bb0f5f 100644 --- a/src/screens/LoggedOut/Walkthrough.tsx +++ b/src/screens/LoggedOut/Walkthrough.tsx @@ -140,7 +140,7 @@ const Walkthrough: React.FC = () => { {walkthroughData.map((slide, idx) => ( From f5be8220fad1585cf827defd4ae6c95b1f132d2c Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 1 Jul 2022 12:02:09 +0200 Subject: [PATCH 09/78] feat(carousel): adding new Carousel component --- src/screens/LoggedOut/Carousel.tsx | 130 +++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 src/screens/LoggedOut/Carousel.tsx diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx new file mode 100644 index 000000000..7f6653852 --- /dev/null +++ b/src/screens/LoggedOut/Carousel.tsx @@ -0,0 +1,130 @@ +import React, { useState } from 'react' +import { View, StyleSheet, Dimensions, ImageBackground } from 'react-native' +import Carousel, { Pagination } from 'react-native-snap-carousel' +import { Walkthrough1, Walkthrough2, Walkthrough3 } from '~/assets/images' +import useTranslation from '~/hooks/useTranslation' +import AbsoluteBottom from '~/components/AbsoluteBottom' +import JoloText, { JoloTextKind, JoloTextWeight } from '~/components/JoloText' +import { JoloTextSizes } from '~/utils/fonts' +import { Colors } from '~/utils/colors' +import BP from '~/utils/breakpoints' + +const SLIDER_WIDTH = Dimensions.get('window').width + 80 +const ITEM_WIDTH = Dimensions.get('window').width + +const CustomCarousel = () => { + const { t } = useTranslation() + const isCarousel = React.useRef(null) + + const [index, setIndex] = useState(0) + + const walkthroughData = [ + { + background: Walkthrough1, + header: t('Walkthrough.titleOne'), + paragraph: t('Walkthrough.descriptionOne'), + }, + { + background: Walkthrough2, + header: t('Walkthrough.titleTwo'), + paragraph: t('Walkthrough.descriptionTwo'), + }, + { + background: Walkthrough3, + header: t('Walkthrough.titleThree'), + paragraph: t('Walkthrough.descriptionThree'), + }, + ] + + const CarouselCardItem = ({ item, index }) => { + return ( + + + + + {item.header} + + + {item.paragraph} + + + + ) + } + + return ( + + setIndex(index)} + useScrollView={true} + /> + + + + + ) +} + +export default CustomCarousel + +const styles = StyleSheet.create({ + background: { ...(StyleSheet.absoluteFill as {}), top: -20 }, + consistentContainer: { + paddingHorizontal: '5%', + }, + dotsContainer: { + position: 'relative', + bottom: 200, + }, + activeDotStyle: { + width: 6, + height: 6, + borderRadius: 3, + marginHorizontal: 0, + backgroundColor: Colors.floralWhite, + }, + inactiveDotStyle: { backgroundColor: Colors.peach }, +}) From 02bd1b4818338db4b17e6cef81aaf802f4ab10c3 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 1 Jul 2022 12:03:11 +0200 Subject: [PATCH 10/78] refactor(walkthrough): replacing Slider by new Carousel component --- src/screens/LoggedOut/Walkthrough.tsx | 132 +------------------------- 1 file changed, 5 insertions(+), 127 deletions(-) diff --git a/src/screens/LoggedOut/Walkthrough.tsx b/src/screens/LoggedOut/Walkthrough.tsx index 1b8bb0f5f..ec74f2101 100644 --- a/src/screens/LoggedOut/Walkthrough.tsx +++ b/src/screens/LoggedOut/Walkthrough.tsx @@ -1,22 +1,17 @@ import React, { useEffect, useRef, useState } from 'react' -import { ImageBackground, StyleSheet, View, Platform } from 'react-native' -import Swiper from 'react-native-swiper' +import { StyleSheet, View, Platform } from 'react-native' import { useSafeArea } from 'react-native-safe-area-context' import { useDispatch, useSelector } from 'react-redux' import { StackActions, useNavigation } from '@react-navigation/core' - +import CustomCarousel from './Carousel' import Btn, { BtnTypes, BtnSize } from '~/components/Btn' import AbsoluteBottom from '~/components/AbsoluteBottom' import BtnGroup from '~/components/BtnGroup' import { ScreenNames } from '~/types/screens' import { useRedirect } from '~/hooks/navigation' -import { Walkthrough1, Walkthrough2, Walkthrough3 } from '~/assets/images' import { Colors } from '~/utils/colors' import ScreenContainer from '~/components/ScreenContainer' -import JoloText, { JoloTextKind, JoloTextWeight } from '~/components/JoloText' -import { JoloTextSizes } from '~/utils/fonts' import useTranslation from '~/hooks/useTranslation' -import BP from '~/utils/breakpoints' import { useLoader } from '~/hooks/loader' import { useCreateIdentity } from '~/hooks/sdk' import { setLogged, setTermsConsentVisibility } from '~/modules/account/actions' @@ -79,106 +74,21 @@ const useWalkthroughProceed = () => { return { handleRegistration, handleRecovery } } -const Dot: React.FC<{ active: boolean }> = ({ active }) => ( - - - -) - const Walkthrough: React.FC = () => { const { t } = useTranslation() const { handleRegistration, handleRecovery } = useWalkthroughProceed() - const walkthroughData = [ - { - background: Walkthrough1, - header: t('Walkthrough.titleOne'), - paragraph: t('Walkthrough.descriptionOne'), - }, - { - background: Walkthrough2, - header: t('Walkthrough.titleTwo'), - paragraph: t('Walkthrough.descriptionTwo'), - }, - { - background: Walkthrough3, - header: t('Walkthrough.titleThree'), - paragraph: t('Walkthrough.descriptionThree'), - }, - ] - - const renderPagination = (index: number, total: number) => ( - - {[...Array(total)].map((_, key) => ( - - ))} - - ) - const insets = useSafeArea() - /** - * To prevent slider autoplay onMount - * as it creates flickering effect - */ - const [isMounted, setIsMounted] = useState(false) - useEffect(() => { - const id = setTimeout(() => { - setIsMounted(true) - }, 1000) - return () => { - clearTimeout(id) - } - }, []) - return ( - - {walkthroughData.map((slide, idx) => ( - - - - - {walkthroughData[idx].header} - - - {walkthroughData[idx].paragraph} - - - - ))} - + + + @@ -198,41 +108,9 @@ const Walkthrough: React.FC = () => { } const styles = StyleSheet.create({ - background: { ...(StyleSheet.absoluteFill as {}), top: -20 }, consistentContainer: { paddingHorizontal: '5%', }, - dotContainer: { - height: 40, - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'center', - justifyContent: 'center', - position: 'absolute', - bottom: Platform.select({ - ios: BP({ default: 185, medium: 210, large: 210 }), - android: 185, - }), - }, - dot: { - width: 3, - height: 3, - marginHorizontal: 3.5, - alignItems: 'center', - justifyContent: 'center', - }, - activeDot: { - width: 6, - height: 6, - backgroundColor: Colors.floralWhite, - borderRadius: 35, - }, - inactiveDot: { - width: 3, - height: 3, - backgroundColor: Colors.peach, - borderRadius: 35, - }, }) export default Walkthrough From b6753f9c7c596a3c1e6a3a50fcdb6316e10a0640 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 1 Jul 2022 12:18:20 +0200 Subject: [PATCH 11/78] refactor(carousel): adding bottom positioning for android and iOS to dots --- src/screens/LoggedOut/Carousel.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index 7f6653852..f144785c6 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -1,5 +1,11 @@ import React, { useState } from 'react' -import { View, StyleSheet, Dimensions, ImageBackground } from 'react-native' +import { + View, + StyleSheet, + Dimensions, + ImageBackground, + Platform, +} from 'react-native' import Carousel, { Pagination } from 'react-native-snap-carousel' import { Walkthrough1, Walkthrough2, Walkthrough3 } from '~/assets/images' import useTranslation from '~/hooks/useTranslation' @@ -117,7 +123,14 @@ const styles = StyleSheet.create({ }, dotsContainer: { position: 'relative', - bottom: 200, + ...Platform.select({ + android: { + bottom: 175, + }, + ios: { + bottom: 200, + }, + }), }, activeDotStyle: { width: 6, From 8c9fca1af514bb2bd72a3dd6d8c7bea90be841d1 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 1 Jul 2022 13:12:41 +0200 Subject: [PATCH 12/78] refactor(adding bp for android): adding BP for android --- src/screens/LoggedOut/Carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index f144785c6..6b011661c 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -55,7 +55,7 @@ const CustomCarousel = () => { ...styles.consistentContainer, bottom: Platform.select({ ios: BP({ default: 165, medium: 180, large: 180 }), - android: 235, + android: BP({ default: 165, medium: 180, large: 180 }), }), }} > From 19415a156c786566d61e94d6403aadec0a5edc6a Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Mon, 4 Jul 2022 13:37:09 +0200 Subject: [PATCH 13/78] refactor(adding return if shoulddisableunlock and shoulddebounce are both true): ausweisIdentity --- src/screens/LoggedIn/Identity/AusweisIdentity.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 15544d8ae..82f2741cf 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -30,8 +30,10 @@ export const usePendingEidHandler = () => { useEffect(() => { if (!shouldDisableUnlock && shouldDebounce) { - setShouldDebounce(false) - debounceHandler.current && debounceHandler.current() + setTimeout(() => { + setShouldDebounce(false) + debounceHandler.current && debounceHandler.current() + }, 10) } }, [shouldDisableUnlock, shouldDebounce]) @@ -41,6 +43,7 @@ export const usePendingEidHandler = () => { const handlePress = (handler: () => void) => { if (shouldDisableUnlock) { + if (shouldDebounce) return setShouldDebounce(true) debounceHandler.current = handler } else { From 6561870514a1a1ec12833c7c2aeb5bfa2b3dfaf1 Mon Sep 17 00:00:00 2001 From: Cristian Lungu Date: Mon, 4 Jul 2022 17:10:31 +0200 Subject: [PATCH 14/78] feat(btn): added loading prop --- src/components/Btn.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Btn.tsx b/src/components/Btn.tsx index 1302f3be3..fb89c3aed 100644 --- a/src/components/Btn.tsx +++ b/src/components/Btn.tsx @@ -8,6 +8,7 @@ import { ViewStyle, Platform, TouchableOpacityProps, + ActivityIndicator, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import useConnection from '~/hooks/connection' @@ -35,6 +36,7 @@ interface BtnPropsI extends TouchableOpacityProps { type?: BtnTypes customTextStyles?: TextStyle size?: BtnSize | number + loading?: boolean } interface PropsI extends BtnPropsI { @@ -55,6 +57,7 @@ const GRADIENT_END = { x: 1, y: 0 } const ButtonText: React.FC = ({ type = BtnTypes.primary, size = BtnSize.medium, + loading = false, children, customTextStyles = {}, }) => { @@ -93,7 +96,9 @@ const ButtonText: React.FC = ({ return styles.textPrimary } } - return ( + return loading ? ( + + ) : ( & BtnComposition = ({ customTextStyles, customContainerStyles, testID, + loading, children, ...btnProps }) => { @@ -131,7 +137,7 @@ const Btn: React.FC & BtnComposition = ({ : styles.mediumBtn const renderButton = () => { - const btnTextProps = { size, type, customTextStyles, children } + const btnTextProps = { size, type, customTextStyles, children, loading } switch (type) { case BtnTypes.primary: return ( From 1ccff126d65e55aa0582dc55af83ea84dd1e01b6 Mon Sep 17 00:00:00 2001 From: Cristian Lungu Date: Mon, 4 Jul 2022 17:12:12 +0200 Subject: [PATCH 15/78] feat(ausweis-pending): added isLoading to show we're waiting for the pending handler --- src/screens/LoggedIn/Identity/AusweisIdentity.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 82f2741cf..4ce6a500d 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -51,7 +51,7 @@ export const usePendingEidHandler = () => { } } - return { handlePress, resetShouldDebounce } + return { handlePress, resetShouldDebounce, isLoading: shouldDebounce } } export const AusweisIdentity = () => { @@ -65,7 +65,7 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const { handlePress, resetShouldDebounce } = usePendingEidHandler() + const { handlePress, resetShouldDebounce, isLoading } = usePendingEidHandler() const handleCompatibilityCheck = () => { resetShouldDebounce() @@ -215,6 +215,7 @@ export const AusweisIdentity = () => { handlePress(handleUnlockCard)} > {t('AusweisIdentity.unlockBtn')} From 0fd1d4c191aebeeced0fae11130b79f88a997b68 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Tue, 5 Jul 2022 09:05:24 +0200 Subject: [PATCH 16/78] refactor(eidhooks): extracting usePendingEidHandler to eIDHooks --- .../LoggedIn/Identity/AusweisIdentity.tsx | 38 ++----------------- src/screens/Modals/Interaction/eID/hooks.ts | 33 ++++++++++++++++ 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 4ce6a500d..6d65eb62f 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -1,9 +1,8 @@ -import React, { useState, useEffect, useRef } from 'react' +import React from 'react' import { Image, StyleSheet, View } from 'react-native' import { aa2Module } from '@jolocom/react-native-ausweis' import { useNavigation } from '@react-navigation/native' import { CardInfo } from '@jolocom/react-native-ausweis/js/types' -import { useSelector } from 'react-redux' import Btn, { BtnTypes } from '~/components/Btn' import JoloText, { JoloTextKind, JoloTextWeight } from '~/components/JoloText' import { Colors } from '~/utils/colors' @@ -20,40 +19,8 @@ import { eIDScreens, } from '~/screens/Modals/Interaction/eID/types' import { IS_ANDROID } from '~/utils/generic' -import { getAusweisFlowType } from '~/modules/interaction/selectors' import { useCheckNFC } from '~/hooks/nfc' -export const usePendingEidHandler = () => { - const shouldDisableUnlock = !!useSelector(getAusweisFlowType) - const [shouldDebounce, setShouldDebounce] = useState(false) - const debounceHandler = useRef<() => void>() - - useEffect(() => { - if (!shouldDisableUnlock && shouldDebounce) { - setTimeout(() => { - setShouldDebounce(false) - debounceHandler.current && debounceHandler.current() - }, 10) - } - }, [shouldDisableUnlock, shouldDebounce]) - - const resetShouldDebounce = () => { - if (shouldDebounce) setShouldDebounce(false) - } - - const handlePress = (handler: () => void) => { - if (shouldDisableUnlock) { - if (shouldDebounce) return - setShouldDebounce(true) - debounceHandler.current = handler - } else { - handler() - } - } - - return { handlePress, resetShouldDebounce, isLoading: shouldDebounce } -} - export const AusweisIdentity = () => { const { t } = useTranslation() const { startCheck: startCompatibilityCheck } = @@ -65,7 +32,8 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const { handlePress, resetShouldDebounce, isLoading } = usePendingEidHandler() + const { handlePress, resetShouldDebounce, isLoading } = + eIDHooks.usePendingEidHandler() const handleCompatibilityCheck = () => { resetShouldDebounce() diff --git a/src/screens/Modals/Interaction/eID/hooks.ts b/src/screens/Modals/Interaction/eID/hooks.ts index dd7b0aab8..6a78d1279 100644 --- a/src/screens/Modals/Interaction/eID/hooks.ts +++ b/src/screens/Modals/Interaction/eID/hooks.ts @@ -44,6 +44,7 @@ import { getAusweisReaderState, getAusweisScannerKey, getDeeplinkConfig, + getAusweisFlowType, } from '~/modules/interaction/selectors' import useConnection from '~/hooks/connection' import { IS_ANDROID } from '~/utils/generic' @@ -591,6 +592,37 @@ export const useObserveAusweisFlow = () => { }, []) } +const usePendingEidHandler = () => { + const shouldDisableUnlock = !!useSelector(getAusweisFlowType) + const [shouldDebounce, setShouldDebounce] = useState(false) + const debounceHandler = useRef<() => void>() + + useEffect(() => { + if (!shouldDisableUnlock && shouldDebounce) { + setTimeout(() => { + setShouldDebounce(false) + debounceHandler.current && debounceHandler.current() + }, 10) + } + }, [shouldDisableUnlock, shouldDebounce]) + + const resetShouldDebounce = () => { + if (shouldDebounce) setShouldDebounce(false) + } + + const handlePress = (handler: () => void) => { + if (shouldDisableUnlock) { + if (shouldDebounce) return + setShouldDebounce(true) + debounceHandler.current = handler + } else { + handler() + } + } + + return { handlePress, resetShouldDebounce, isLoading: shouldDebounce } +} + const eIDHooks = { useAusweisReaderEvents, useAusweisCancelBackHandler, @@ -601,6 +633,7 @@ const eIDHooks = { useAusweisInteraction, useAusweisContext, useObserveAusweisFlow, + usePendingEidHandler, } export default eIDHooks From e0fa29d7254c91a4b5b06f797facb838d78e5d05 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Tue, 5 Jul 2022 09:14:38 +0200 Subject: [PATCH 17/78] refactor(eidhooks): handling resetShouldDebounce in hook --- src/screens/LoggedIn/Identity/AusweisIdentity.tsx | 11 +++++------ src/screens/Modals/Interaction/eID/hooks.ts | 10 +++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 6d65eb62f..7adc1f762 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -32,16 +32,15 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const { handlePress, resetShouldDebounce, isLoading } = - eIDHooks.usePendingEidHandler() + const { handlePress, isLoading } = eIDHooks.usePendingEidHandler() - const handleCompatibilityCheck = () => { - resetShouldDebounce() + const handleCompatibilityCheck = (cb: () => void) => { + cb() checkNfcSupport(startCompatibilityCheck) } - const handleUnlockCard = () => { - resetShouldDebounce() + const handleUnlockCard = (cb: () => void) => { + cb() checkNfcSupport(() => { setupUnlockCardHandlers() startChangePin() diff --git a/src/screens/Modals/Interaction/eID/hooks.ts b/src/screens/Modals/Interaction/eID/hooks.ts index 6a78d1279..d3a1b2269 100644 --- a/src/screens/Modals/Interaction/eID/hooks.ts +++ b/src/screens/Modals/Interaction/eID/hooks.ts @@ -595,28 +595,28 @@ export const useObserveAusweisFlow = () => { const usePendingEidHandler = () => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const [shouldDebounce, setShouldDebounce] = useState(false) - const debounceHandler = useRef<() => void>() + const debounceHandler = useRef<(cb: () => void) => void>() useEffect(() => { if (!shouldDisableUnlock && shouldDebounce) { setTimeout(() => { setShouldDebounce(false) - debounceHandler.current && debounceHandler.current() + debounceHandler.current && debounceHandler.current(resetShouldDebounce) }, 10) } }, [shouldDisableUnlock, shouldDebounce]) - const resetShouldDebounce = () => { + function resetShouldDebounce() { if (shouldDebounce) setShouldDebounce(false) } - const handlePress = (handler: () => void) => { + const handlePress = (handler: (cb: () => void) => void) => { if (shouldDisableUnlock) { if (shouldDebounce) return setShouldDebounce(true) debounceHandler.current = handler } else { - handler() + handler(resetShouldDebounce) } } From 78d97f2d961123a73f79f5b5fd49704396c383c5 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Tue, 5 Jul 2022 09:24:31 +0200 Subject: [PATCH 18/78] refactor(eidhooks): adding resetShouldDebouce to handlePress logic and resetting debounceHandler after calling it in useEffect --- src/screens/Modals/Interaction/eID/hooks.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/screens/Modals/Interaction/eID/hooks.ts b/src/screens/Modals/Interaction/eID/hooks.ts index d3a1b2269..327465460 100644 --- a/src/screens/Modals/Interaction/eID/hooks.ts +++ b/src/screens/Modals/Interaction/eID/hooks.ts @@ -595,13 +595,17 @@ export const useObserveAusweisFlow = () => { const usePendingEidHandler = () => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const [shouldDebounce, setShouldDebounce] = useState(false) - const debounceHandler = useRef<(cb: () => void) => void>() + const debounceHandler = useRef<() => void>() useEffect(() => { if (!shouldDisableUnlock && shouldDebounce) { setTimeout(() => { setShouldDebounce(false) - debounceHandler.current && debounceHandler.current(resetShouldDebounce) + if (debounceHandler.current) { + resetShouldDebounce() + debounceHandler.current() + } + debounceHandler.current = undefined }, 10) } }, [shouldDisableUnlock, shouldDebounce]) @@ -610,13 +614,14 @@ const usePendingEidHandler = () => { if (shouldDebounce) setShouldDebounce(false) } - const handlePress = (handler: (cb: () => void) => void) => { + const handlePress = (handler: () => void) => { if (shouldDisableUnlock) { if (shouldDebounce) return setShouldDebounce(true) debounceHandler.current = handler } else { - handler(resetShouldDebounce) + resetShouldDebounce() + handler() } } From 3ee2b968d35be48d43f5eee937cf625f261b2736 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Tue, 5 Jul 2022 12:05:55 +0200 Subject: [PATCH 19/78] refactor(eidhooks): changing return of usePendingEidHandlers --- .../LoggedIn/Identity/AusweisIdentity.tsx | 18 ++++++++++-------- .../eID/components/AusweisChangePin.tsx | 12 ++++++------ src/screens/Modals/Interaction/eID/hooks.ts | 6 ++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx index 7adc1f762..7dfecd0b0 100644 --- a/src/screens/LoggedIn/Identity/AusweisIdentity.tsx +++ b/src/screens/LoggedIn/Identity/AusweisIdentity.tsx @@ -32,21 +32,22 @@ export const AusweisIdentity = () => { const { showScanner, updateScanner } = eIDHooks.useAusweisScanner() const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() - const { handlePress, isLoading } = eIDHooks.usePendingEidHandler() + const { usePendingEidHandler } = eIDHooks - const handleCompatibilityCheck = (cb: () => void) => { - cb() + const compatibilityHandler = () => { checkNfcSupport(startCompatibilityCheck) } - const handleUnlockCard = (cb: () => void) => { - cb() + const unlockHandler = () => { checkNfcSupport(() => { setupUnlockCardHandlers() startChangePin() }) } + const handleCheckCompatibility = usePendingEidHandler(compatibilityHandler) + const handleUnlock = usePendingEidHandler(unlockHandler) + const handleChangePin = () => navigation.navigate(ScreenNames.AusweisChangePin) @@ -168,7 +169,8 @@ export const AusweisIdentity = () => { handlePress(handleCompatibilityCheck)} + // loading={isLoading} + onPress={handleCheckCompatibility} > {t('AusweisIdentity.compatibilityBtn')} @@ -182,8 +184,8 @@ export const AusweisIdentity = () => { handlePress(handleUnlockCard)} + // loading={isLoading} + onPress={handleUnlock} > {t('AusweisIdentity.unlockBtn')} diff --git a/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx b/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx index 6d5a4249e..02ae5ebab 100644 --- a/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx +++ b/src/screens/Modals/Interaction/eID/components/AusweisChangePin.tsx @@ -4,7 +4,6 @@ import { ScrollView, View } from 'react-native' import { aa2Module } from '@jolocom/react-native-ausweis' import { EventHandlers } from '@jolocom/react-native-ausweis/js/commandTypes' import { CardInfo } from '@jolocom/react-native-ausweis/js/types' -import { useSelector } from 'react-redux' import Btn, { BtnTypes } from '~/components/Btn' import JoloText, { JoloTextKind } from '~/components/JoloText' import ScreenContainer from '~/components/ScreenContainer' @@ -21,8 +20,6 @@ import { CardInfoMode, eIDScreens, } from '../types' -import { usePendingEidHandler } from '~/screens/LoggedIn/Identity/AusweisIdentity' -import { getAusweisFlowType } from '~/modules/interaction/selectors' import { useCheckNFC } from '~/hooks/nfc' import { AUSWEIS_SUPPORT_EMAIL, AUSWEIS_SUPPORT_PHONE } from '../constants' import Link from '~/components/Link' @@ -60,7 +57,7 @@ const AusweisChangePin = () => { const { handleDeactivatedCard } = eIDHooks.useDeactivatedCard() const isTransportPin = useRef(false) const checkNfcSupport = useCheckNFC() - const { handlePress } = usePendingEidHandler() + const { usePendingEidHandler } = eIDHooks const changePinFlow = isTransportPin.current === true @@ -204,6 +201,9 @@ const AusweisChangePin = () => { }) } + const handler5DigPin = usePendingEidHandler(handleChange5DigPin) + const handler6DigPin = usePendingEidHandler(handleChange6DigPin) + return ( { descriptionText={t('AusweisChangePin.transportPinSubheader')} > handlePress(handleChange5DigPin)} + onPress={handler5DigPin} type={BtnTypes.quaternary} customTextStyles={{ opacity: 1 }} > @@ -235,7 +235,7 @@ const AusweisChangePin = () => { descriptionText={t('AusweisChangePin.pinSubheader')} > handlePress(handleChange6DigPin)} + onPress={handler6DigPin} type={BtnTypes.quaternary} customTextStyles={{ opacity: 1 }} > diff --git a/src/screens/Modals/Interaction/eID/hooks.ts b/src/screens/Modals/Interaction/eID/hooks.ts index 327465460..3319498f1 100644 --- a/src/screens/Modals/Interaction/eID/hooks.ts +++ b/src/screens/Modals/Interaction/eID/hooks.ts @@ -592,7 +592,7 @@ export const useObserveAusweisFlow = () => { }, []) } -const usePendingEidHandler = () => { +const usePendingEidHandler = (handler: () => void) => { const shouldDisableUnlock = !!useSelector(getAusweisFlowType) const [shouldDebounce, setShouldDebounce] = useState(false) const debounceHandler = useRef<() => void>() @@ -614,7 +614,7 @@ const usePendingEidHandler = () => { if (shouldDebounce) setShouldDebounce(false) } - const handlePress = (handler: () => void) => { + return () => { if (shouldDisableUnlock) { if (shouldDebounce) return setShouldDebounce(true) @@ -624,8 +624,6 @@ const usePendingEidHandler = () => { handler() } } - - return { handlePress, resetShouldDebounce, isLoading: shouldDebounce } } const eIDHooks = { From 1d0e1f3f95e5f209320fb1cc5029f6fa8b2a6f40 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 09:42:09 +0200 Subject: [PATCH 20/78] style(carousel): adding styles for smaller iOS devices --- src/screens/LoggedOut/Carousel.tsx | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index 6b011661c..6661edc8e 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -54,8 +54,11 @@ const CustomCarousel = () => { customStyles={{ ...styles.consistentContainer, bottom: Platform.select({ - ios: BP({ default: 165, medium: 180, large: 180 }), - android: BP({ default: 165, medium: 180, large: 180 }), + ios: BP({ + default: 180, + small: 140, + }), + android: BP({ default: 165, small: 0, medium: 180, large: 180 }), }), }} > @@ -117,19 +120,25 @@ const CustomCarousel = () => { export default CustomCarousel const styles = StyleSheet.create({ - background: { ...(StyleSheet.absoluteFill as {}), top: -20 }, + background: Platform.select({ + ios: BP({ + default: { ...(StyleSheet.absoluteFill as {}), top: -20 }, + small: { + top: 20, + flex: 1, + resizeMode: 'contain', + }, + }), + // android: BP({ default: 165, small: 0, medium: 180, large: 180 }), + }), consistentContainer: { paddingHorizontal: '5%', }, dotsContainer: { position: 'relative', - ...Platform.select({ - android: { - bottom: 175, - }, - ios: { - bottom: 200, - }, + bottom: Platform.select({ + ios: BP({ default: 200, small: 165 }), + android: BP({ default: 175 }), }), }, activeDotStyle: { From e2921269caa365b3e554d6152fce8938c495b49a Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 09:52:57 +0200 Subject: [PATCH 21/78] style(carousel): adjusting for medium sized iOS devices --- src/screens/LoggedOut/Carousel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index 6661edc8e..a2b8b2dcf 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -123,6 +123,7 @@ const styles = StyleSheet.create({ background: Platform.select({ ios: BP({ default: { ...(StyleSheet.absoluteFill as {}), top: -20 }, + medium: { ...(StyleSheet.absoluteFill as {}), top: -8 }, small: { top: 20, flex: 1, From 57f401e26f8a58713dd6cf0a8c72bc55b56f7df9 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 13:50:49 +0200 Subject: [PATCH 22/78] style(carousel): adding style for small android devices --- src/screens/LoggedOut/Carousel.tsx | 35 ++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index a2b8b2dcf..8068cd242 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -58,7 +58,7 @@ const CustomCarousel = () => { default: 180, small: 140, }), - android: BP({ default: 165, small: 0, medium: 180, large: 180 }), + android: BP({ default: 165, small: 210 }), }), }} > @@ -130,18 +130,35 @@ const styles = StyleSheet.create({ resizeMode: 'contain', }, }), - // android: BP({ default: 165, small: 0, medium: 180, large: 180 }), + android: BP({ + default: { ...(StyleSheet.absoluteFill as {}), top: -20 }, + medium: { ...(StyleSheet.absoluteFill as {}), top: -8 }, + small: { + top: 10, + flex: 1, + resizeMode: 'contain', + }, + }), }), consistentContainer: { paddingHorizontal: '5%', }, - dotsContainer: { - position: 'relative', - bottom: Platform.select({ - ios: BP({ default: 200, small: 165 }), - android: BP({ default: 175 }), - }), - }, + dotsContainer: Platform.select({ + android: { + position: 'absolute', + bottom: Platform.select({ + android: BP({ default: -310 }), + }), + left: 0, + top: 0, + right: 0, + justifyContent: 'center', + }, + ios: { + position: 'relative', + bottom: { default: 200, small: 165 }, + }, + }), activeDotStyle: { width: 6, height: 6, From f218727ce2b0c3f7863d6132711275313346ec03 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 15:08:16 +0200 Subject: [PATCH 23/78] refactor(walkthrough): deleting unused imports --- src/screens/LoggedOut/Walkthrough.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/LoggedOut/Walkthrough.tsx b/src/screens/LoggedOut/Walkthrough.tsx index ec74f2101..395e6f74f 100644 --- a/src/screens/LoggedOut/Walkthrough.tsx +++ b/src/screens/LoggedOut/Walkthrough.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useRef, useState } from 'react' -import { StyleSheet, View, Platform } from 'react-native' +import React, { useEffect, useRef } from 'react' +import { StyleSheet, View } from 'react-native' import { useSafeArea } from 'react-native-safe-area-context' import { useDispatch, useSelector } from 'react-redux' import { StackActions, useNavigation } from '@react-navigation/core' From a75a0b17c7255d3e7b2c35f675763e567fb88435 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 15:09:23 +0200 Subject: [PATCH 24/78] style(carousel): adjusting dotsContainer style for android and iOS --- src/screens/LoggedOut/Carousel.tsx | 35 ++++++++++++------------------ 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index 8068cd242..534fb86ef 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -54,11 +54,8 @@ const CustomCarousel = () => { customStyles={{ ...styles.consistentContainer, bottom: Platform.select({ - ios: BP({ - default: 180, - small: 140, - }), - android: BP({ default: 165, small: 210 }), + ios: BP({ default: 240, large: 280 }), + android: BP({ default: 240, small: 210 }), }), }} > @@ -143,22 +140,18 @@ const styles = StyleSheet.create({ consistentContainer: { paddingHorizontal: '5%', }, - dotsContainer: Platform.select({ - android: { - position: 'absolute', - bottom: Platform.select({ - android: BP({ default: -310 }), - }), - left: 0, - top: 0, - right: 0, - justifyContent: 'center', - }, - ios: { - position: 'relative', - bottom: { default: 200, small: 165 }, - }, - }), + dotsContainer: { + height: 70, + flexDirection: 'row', + alignItems: 'center', + alignSelf: 'center', + justifyContent: 'center', + position: 'absolute', + bottom: Platform.select({ + ios: BP({ default: 160, medium: 210, large: 210 }), + android: 165, + }), + }, activeDotStyle: { width: 6, height: 6, From 656daf089c9e43c8da32759a02b193016a2c243d Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 15:18:40 +0200 Subject: [PATCH 25/78] style(carousel): adjusting bottom prop in AbsoluteBottom for small iOS devices --- src/screens/LoggedOut/Carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/LoggedOut/Carousel.tsx b/src/screens/LoggedOut/Carousel.tsx index 534fb86ef..3993d2046 100644 --- a/src/screens/LoggedOut/Carousel.tsx +++ b/src/screens/LoggedOut/Carousel.tsx @@ -54,7 +54,7 @@ const CustomCarousel = () => { customStyles={{ ...styles.consistentContainer, bottom: Platform.select({ - ios: BP({ default: 240, large: 280 }), + ios: BP({ default: 240, small: 210, large: 280 }), android: BP({ default: 240, small: 210 }), }), }} From ef5f6d4e9530512fe40a6703421ec00dbe05c475 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Thu, 7 Jul 2022 18:01:02 +0200 Subject: [PATCH 26/78] refactor(loader): removing styles.tickContainer results in showing success icon again animation not working yet though --- src/modals/Loader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/modals/Loader.tsx b/src/modals/Loader.tsx index 75aba36f7..3197a68c1 100644 --- a/src/modals/Loader.tsx +++ b/src/modals/Loader.tsx @@ -230,10 +230,10 @@ const Loader: React.FC = ({ bgColor = Colors.black }) => { )} {type === LoaderTypes.success && ( - - - - + // + + + {/* */} Date: Fri, 8 Jul 2022 12:04:28 +0200 Subject: [PATCH 27/78] fix(interactions): reverting to imperatively navigating to interactions instead of relying on events --- src/hooks/deeplinks.ts | 6 +++--- src/hooks/interactions/handlers.ts | 13 +++++++++++- src/screens/LoggedIn/MainTabs.tsx | 20 +------------------ .../Modals/Interaction/Scanner/Camera.tsx | 4 ++-- 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/src/hooks/deeplinks.ts b/src/hooks/deeplinks.ts index a398a7878..d33215b85 100644 --- a/src/hooks/deeplinks.ts +++ b/src/hooks/deeplinks.ts @@ -31,7 +31,7 @@ interface DeeplinkParamsValues { // NOTE: This should be called only in one place! export const useDeeplinkInteractions = () => { const { processAusweisToken } = eIDHooks.useAusweisInteraction() - const { processInteraction } = useInteractionStart() + const { startInteraction } = useInteractionStart() const { scheduleErrorWarning } = useToasts() const loader = useLoader() const currentLanguage = useSelector(getCurrentLanguage) @@ -104,13 +104,13 @@ export const useDeeplinkInteractions = () => { ) if (token) { - processInteraction(token).catch(scheduleErrorWarning) + startInteraction(token).catch(scheduleErrorWarning) return } else if (tcTokenUrl) { loader(() => processAusweisToken(tcTokenUrl), { showSuccess: false, showFailed: false, - }) + }).catch(scheduleErrorWarning) return } else if ( !params['+clicked_branch_link'] || diff --git a/src/hooks/interactions/handlers.ts b/src/hooks/interactions/handlers.ts index 77547eea3..1d6257b52 100644 --- a/src/hooks/interactions/handlers.ts +++ b/src/hooks/interactions/handlers.ts @@ -35,6 +35,7 @@ export const useInteractionStart = () => { const agent = useAgent() const dispatch = useDispatch() const loader = useLoader() + const navigation = useNavigation() const interactionHandler = useInteractionHandler() const { scheduleErrorWarning } = useToasts() const { connected, showDisconnectedToast } = useConnection() @@ -75,12 +76,17 @@ export const useInteractionStart = () => { } } + const navigateInteraction = () => { + navigation.navigate(ScreenNames.Interaction) + } + const startInteraction = async (jwt: string) => loader( async () => { const interaction = await processInteraction(jwt) if (interaction) { await showInteraction(interaction) + navigateInteraction() } }, { showSuccess: false, showFailed: false }, @@ -89,7 +95,12 @@ export const useInteractionStart = () => { }, ) - return { processInteraction, showInteraction, startInteraction } + return { + processInteraction, + showInteraction, + startInteraction, + navigateInteraction, + } } export const useFinishInteraction = () => { diff --git a/src/screens/LoggedIn/MainTabs.tsx b/src/screens/LoggedIn/MainTabs.tsx index 3e990502a..24e7c7896 100644 --- a/src/screens/LoggedIn/MainTabs.tsx +++ b/src/screens/LoggedIn/MainTabs.tsx @@ -11,16 +11,11 @@ import Settings from './Settings' import Identity from './Identity' import { CredentialCategories } from '~/types/credentials' import useTranslation from '~/hooks/useTranslation' -import { useInteractionStart } from '~/hooks/interactions/handlers' import { useNavigation } from '@react-navigation/core' -import { useInteractionEvents } from '~/hooks/interactions/listeners' import { useSelector } from 'react-redux' import { getIsAppLocked } from '~/modules/account/selectors' import { useDeeplinkInteractions } from '~/hooks/deeplinks' -import { - getInteractionType, - getAusweisInteractionDetails, -} from '~/modules/interaction/selectors' +import { getAusweisInteractionDetails } from '~/modules/interaction/selectors' export type MainTabsParamList = { [ScreenNames.Identity]: undefined @@ -34,24 +29,11 @@ const MainTabsNavigator = createBottomTabNavigator() const MainTabs = () => { const { t } = useTranslation() const isAppLocked = useSelector(getIsAppLocked) - const isInteracting = useSelector(getInteractionType) const isAusweisInteracting = useSelector(getAusweisInteractionDetails) - const { showInteraction } = useInteractionStart() const navigation = useNavigation() useDeeplinkInteractions() - useInteractionEvents(showInteraction) - - // Show an interaction sheet declaratively by - // observing store changes - useEffect(() => { - if (!isAppLocked && isInteracting) { - navigation.navigate(ScreenNames.Interaction, { - screen: ScreenNames.InteractionFlow, - }) - } - }, [isInteracting, isAppLocked]) useEffect(() => { if (!isAppLocked && isAusweisInteracting) { diff --git a/src/screens/Modals/Interaction/Scanner/Camera.tsx b/src/screens/Modals/Interaction/Scanner/Camera.tsx index 20ebdd474..c1e85105b 100644 --- a/src/screens/Modals/Interaction/Scanner/Camera.tsx +++ b/src/screens/Modals/Interaction/Scanner/Camera.tsx @@ -50,7 +50,7 @@ const SHOW_LOCAL_NETWORK_DIALOG = Platform.OS === 'ios' && majorVersionIOS >= 14 const Camera = () => { const { t } = useTranslation() const { errorScreen } = useErrors() - const { processInteraction } = useInteractionStart() + const { startInteraction } = useInteractionStart() const dispatch = useDispatch() const disableLock = useDisableLock() const isScreenFocused = useIsFocused() @@ -163,7 +163,7 @@ const Camera = () => { }) }).catch(scheduleErrorWarning) } else { - await processInteraction(e.data) + await startInteraction(e.data) } } catch (err) { console.log('handleScan error', { err }) From 2ba30738b065d2c859c007e72ebe5f00186df203 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 8 Jul 2022 12:19:45 +0200 Subject: [PATCH 28/78] style(loader): removing whitespace --- src/modals/Loader.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/modals/Loader.tsx b/src/modals/Loader.tsx index 3197a68c1..c29f5c18c 100644 --- a/src/modals/Loader.tsx +++ b/src/modals/Loader.tsx @@ -9,9 +9,7 @@ import { StatusBar, } from 'react-native' import { useSelector } from 'react-redux' - import Circle from '~/components/Circle' - import { getLoaderState } from '~/modules/loader/selectors' import { Colors } from '~/utils/colors' import { SuccessTick, ErrorIcon } from '~/assets/svg' From 0cd8c57b94acf6c98d1d4907f03e812225f69ed5 Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 8 Jul 2022 12:22:13 +0200 Subject: [PATCH 29/78] refactor(loader): applying loop to ripple instead of animateValueTo --- src/modals/Loader.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/modals/Loader.tsx b/src/modals/Loader.tsx index c29f5c18c..f6409d67c 100644 --- a/src/modals/Loader.tsx +++ b/src/modals/Loader.tsx @@ -78,13 +78,11 @@ const Loader: React.FC = ({ bgColor = Colors.black }) => { toValue: number, duration: number, ) => { - return Animated.loop( - Animated.timing(value, { - toValue: toValue, - duration: duration, - useNativeDriver: true, - }), - ) + return Animated.timing(value, { + toValue: toValue, + duration: duration, + useNativeDriver: true, + }) } const reset = Animated.parallel([ @@ -108,10 +106,9 @@ const Loader: React.FC = ({ bgColor = Colors.black }) => { animateValueTo(animatedWidth3, SCALE_MAX, 2500), ]) - const ripple = Animated.sequence([ - Animated.parallel([fRipple, sRipple, tRipple]), - reset, - ]) + const ripple = Animated.loop( + Animated.sequence([Animated.parallel([fRipple, sRipple, tRipple]), reset]), + ) const bounceError = () => { Animated.parallel([ From 13f47046927e98753a765c308d25e8bff1bf5abd Mon Sep 17 00:00:00 2001 From: Thomas Wallner Date: Fri, 8 Jul 2022 12:27:09 +0200 Subject: [PATCH 30/78] refactor(loader): commenting tickContainer back in --- src/modals/Loader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/modals/Loader.tsx b/src/modals/Loader.tsx index f6409d67c..cc3527428 100644 --- a/src/modals/Loader.tsx +++ b/src/modals/Loader.tsx @@ -225,10 +225,10 @@ const Loader: React.FC = ({ bgColor = Colors.black }) => { )} {type === LoaderTypes.success && ( - // - - - {/* */} + + + + Date: Fri, 8 Jul 2022 15:51:02 +0200 Subject: [PATCH 31/78] fix(everywhere): fixing broken components using customStyle --- src/components/BlockExpanded.tsx | 2 +- src/components/Input/InputTextArea.tsx | 2 +- src/components/Input/types.ts | 3 ++- src/errors/modals/ErrorReporting.tsx | 6 +++--- src/screens/LoggedIn/Documents/CredentialDetails.tsx | 4 ++-- src/screens/LoggedIn/PopupMenu.tsx | 2 +- src/screens/LoggedIn/Settings/BackupIdentity.tsx | 2 +- src/screens/LoggedIn/Settings/ContactUs.tsx | 4 ++-- src/screens/LoggedIn/Settings/Development/DevLoaders.tsx | 2 +- src/screens/LoggedIn/Settings/components/Dropdown.tsx | 2 +- .../LoggedIn/Settings/components/LegalTextWrapper.tsx | 2 +- src/screens/Modals/FieldDetails.tsx | 2 +- 12 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/BlockExpanded.tsx b/src/components/BlockExpanded.tsx index 87f460ecd..5d35755ea 100644 --- a/src/components/BlockExpanded.tsx +++ b/src/components/BlockExpanded.tsx @@ -25,7 +25,7 @@ const BlockExpanded: React.FC = ({ return ( diff --git a/src/components/Input/InputTextArea.tsx b/src/components/Input/InputTextArea.tsx index a3fef3e1b..0f896c150 100644 --- a/src/components/Input/InputTextArea.tsx +++ b/src/components/Input/InputTextArea.tsx @@ -83,7 +83,7 @@ const InputTextArea = React.forwardRef( )} - + {
- + {t('ErrorReporting.detailsHeader')} @@ -210,7 +210,7 @@ const ErrorReporting = () => {
- + {t('ErrorReporting.contactHeader')} @@ -240,7 +240,7 @@ const ErrorReporting = () => {
- + {t('ErrorReporting.rateHeader')} diff --git a/src/screens/LoggedIn/Documents/CredentialDetails.tsx b/src/screens/LoggedIn/Documents/CredentialDetails.tsx index 62dcbb680..941e40383 100644 --- a/src/screens/LoggedIn/Documents/CredentialDetails.tsx +++ b/src/screens/LoggedIn/Documents/CredentialDetails.tsx @@ -19,7 +19,7 @@ const IMAGE_SIZE = BP({ large: 100, default: 90 }) const CredentialDetails = () => { const route = - useRoute>() + useRoute>() const { title, photo, fields } = route.params const [expandedFieldIdx, setExpandedFieldIdx] = useState(-1) @@ -65,7 +65,7 @@ const CredentialDetails = () => { {title} - + {photo && ( )} diff --git a/src/screens/LoggedIn/PopupMenu.tsx b/src/screens/LoggedIn/PopupMenu.tsx index ba7d1f5b9..4bef88fdf 100644 --- a/src/screens/LoggedIn/PopupMenu.tsx +++ b/src/screens/LoggedIn/PopupMenu.tsx @@ -27,7 +27,7 @@ export interface PopupMenuProps { } const SolidBlock: React.FC = ({ children, customStyles }) => ( - {children} + {children} ) const PopupButton: React.FC<{ onPress: () => void }> = ({ diff --git a/src/screens/LoggedIn/Settings/BackupIdentity.tsx b/src/screens/LoggedIn/Settings/BackupIdentity.tsx index 22cfe28bd..45ac35162 100644 --- a/src/screens/LoggedIn/Settings/BackupIdentity.tsx +++ b/src/screens/LoggedIn/Settings/BackupIdentity.tsx @@ -20,7 +20,7 @@ const BackupBlock: React.FC<{ onPress: () => void }> = ({ title, description, btnText, onPress }) => ( {
- + {t('ContactUs.suggestionHeader')} @@ -135,7 +135,7 @@ const ContactUs: React.FC = () => {
- + {t('ContactUs.contactHeader')} diff --git a/src/screens/LoggedIn/Settings/Development/DevLoaders.tsx b/src/screens/LoggedIn/Settings/Development/DevLoaders.tsx index 856e6b8f6..3c7d80031 100644 --- a/src/screens/LoggedIn/Settings/Development/DevLoaders.tsx +++ b/src/screens/LoggedIn/Settings/Development/DevLoaders.tsx @@ -19,7 +19,7 @@ const LoaderTest = () => { } else { res('done') } - }, 3000) + }, 8000) }) }, { showSuccess: false, showFailed: false, ...config }, diff --git a/src/screens/LoggedIn/Settings/components/Dropdown.tsx b/src/screens/LoggedIn/Settings/components/Dropdown.tsx index 4429ebc8f..f0664fd7e 100644 --- a/src/screens/LoggedIn/Settings/components/Dropdown.tsx +++ b/src/screens/LoggedIn/Settings/components/Dropdown.tsx @@ -89,7 +89,7 @@ const Dropdown: React.FC<{ placeholder: string }> = ({ placeholder }) => { {isExpanded ? ( - + {options.map((option) => ( -