From ff913f007f2ea192bac1e0883b9064807e273fb1 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 6 Jul 2021 13:11:35 -0500 Subject: [PATCH] Rebase app and fix lint warnings --- .../authentication-check-screen.tsx | 34 ++- .../authentication-screen.tsx | 47 ++-- .../authentication-screen/pin-screen.tsx | 144 +++++----- .../move-money-screen/money-money-screen.tsx | 4 +- app/screens/phone-auth-screen/phone-auth.tsx | 9 +- .../settings-screen/security-screen.tsx | 153 +++-------- .../settings-screen/settings-screen.tsx | 151 +++++----- app/utils/biometricAuthentication.ts | 13 +- app/utils/logout.ts | 19 +- app/utils/storage/secureStorage.ts | 46 ++-- yarn.lock | 258 +----------------- 11 files changed, 272 insertions(+), 606 deletions(-) diff --git a/app/screens/authentication-screen/authentication-check-screen.tsx b/app/screens/authentication-screen/authentication-check-screen.tsx index bffc93ede7..876614ff04 100644 --- a/app/screens/authentication-screen/authentication-check-screen.tsx +++ b/app/screens/authentication-screen/authentication-check-screen.tsx @@ -1,32 +1,30 @@ import * as React from "react" - -import { Image } from "react-native" -import EStyleSheet from "react-native-extended-stylesheet" import { useEffect } from "react" import { Image } from "react-native" -import EStyleSheet from 'react-native-extended-stylesheet' +import EStyleSheet from "react-native-extended-stylesheet" import { Screen } from "../../components/screen" import { palette } from "../../theme/palette" import KeyStoreWrapper from "../../utils/storage/secureStorage" import BiometricWrapper from "../../utils/biometricAuthentication" -import type { ScreenType } from '../../types/screen' +import type { ScreenType } from "../../types/screen" import { AuthenticationScreenPurpose, PinScreenPurpose } from "../../utils/enum" +// eslint-disable-next-line @typescript-eslint/no-var-requires const BitcoinBeachLogo = require("../get-started-screen/bitcoinBeach3.png") const styles = EStyleSheet.create({ + Logo: { + marginTop: 24, + maxHeight: "50%", + maxWidth: "50%", + }, + container: { alignItems: "center", flex: 1, width: "100%", }, - - Logo: { - maxHeight: "50%", - maxWidth: "50%", - marginTop: 24, - }, }) type Props = { @@ -35,11 +33,17 @@ type Props = { export const AuthenticationCheckScreen: ScreenType = ({ navigation }: Props) => { useEffect(() => { - (async () => { - const isPinEnabled = (await KeyStoreWrapper.getIsPinEnabled()) + ;(async () => { + const isPinEnabled = await KeyStoreWrapper.getIsPinEnabled() - if (await BiometricWrapper.isSensorAvailable() && await KeyStoreWrapper.getIsBiometricsEnabled()) { - navigation.replace("authentication", { screenPurpose: AuthenticationScreenPurpose.Authenticate, isPinEnabled }) + if ( + (await BiometricWrapper.isSensorAvailable()) && + (await KeyStoreWrapper.getIsBiometricsEnabled()) + ) { + navigation.replace("authentication", { + screenPurpose: AuthenticationScreenPurpose.Authenticate, + isPinEnabled, + }) } else if (isPinEnabled) { navigation.replace("pin", { screenPurpose: PinScreenPurpose.AuthenticatePin }) } else { diff --git a/app/screens/authentication-screen/authentication-screen.tsx b/app/screens/authentication-screen/authentication-screen.tsx index 209833e013..e053dcc19b 100644 --- a/app/screens/authentication-screen/authentication-screen.tsx +++ b/app/screens/authentication-screen/authentication-screen.tsx @@ -4,10 +4,6 @@ import { Alert, Image, View } from "react-native" import { Button } from "react-native-elements" import EStyleSheet from "react-native-extended-stylesheet" import { useApolloClient } from "@apollo/client" -<<<<<<< HEAD -import RNSecureKeyStore, { ACCESSIBLE } from "react-native-secure-key-store" -======= ->>>>>>> Wrap SecureKeyStore and Biometric utility functions import { Screen } from "../../components/screen" import { color } from "../../theme" @@ -16,15 +12,22 @@ import { translate } from "../../i18n" import KeyStoreWrapper from "../../utils/storage/secureStorage" import BiometricWrapper from "../../utils/biometricAuthentication" import { resetDataStore } from "../../utils/logout" -import type { ScreenType } from '../../types/screen' +import type { ScreenType } from "../../types/screen" import { AuthenticationScreenPurpose, PinScreenPurpose } from "../../utils/enum" +// eslint-disable-next-line @typescript-eslint/no-var-requires const BitcoinBeachLogo = require("../get-started-screen/bitcoinBeach3.png") const styles = EStyleSheet.create({ + Logo: { + marginTop: 24, + maxHeight: "50%", + maxWidth: "50%", + }, + bottom: { - flex: 1, alignItems: "center", + flex: 1, justifyContent: "flex-end", marginBottom: 36, width: "100%", @@ -40,6 +43,10 @@ const styles = EStyleSheet.create({ borderRadius: 24, }, + buttonAlternateTitle: { + color: palette.white, + }, + buttonContainer: { marginVertical: 12, width: "80%", @@ -50,21 +57,11 @@ const styles = EStyleSheet.create({ fontWeight: "bold", }, - buttonAlternateTitle: { - color: palette.white, - }, - container: { alignItems: "center", flex: 1, width: "100%", }, - - Logo: { - maxHeight: "50%", - maxWidth: "50%", - marginTop: 24, - }, }) type Props = { @@ -73,8 +70,8 @@ type Props = { screenPurpose: AuthenticationScreenPurpose isPinEnabled: boolean } - }, - navigation: any, + } + navigation: any } export const AuthenticationScreen: ScreenType = ({ route, navigation }: Props) => { @@ -94,7 +91,11 @@ export const AuthenticationScreen: ScreenType = ({ route, navigation }: Props) = description = translate("AuthenticationScreen.setUpAuthenticationDescription") } // Presents the OS specific authentication prompt - BiometricWrapper.authenticate(description, handleAuthenticationSuccess, handleAuthenticationFailure) + BiometricWrapper.authenticate( + description, + handleAuthenticationSuccess, + handleAuthenticationFailure, + ) } const handleAuthenticationSuccess = () => { @@ -132,7 +133,9 @@ export const AuthenticationScreen: ScreenType = ({ route, navigation }: Props) = title={translate("AuthenticationScreen.usePin")} buttonStyle={styles.buttonAlternate} titleStyle={styles.buttonAlternateTitle} - onPress={() => navigation.navigate("pin", { screenPurpose: PinScreenPurpose.AuthenticatePin })} + onPress={() => + navigation.navigate("pin", { screenPurpose: PinScreenPurpose.AuthenticatePin }) + } containerStyle={styles.buttonContainer} /> ) @@ -179,7 +182,9 @@ export const AuthenticationScreen: ScreenType = ({ route, navigation }: Props) = title={(() => { if (screenPurpose === AuthenticationScreenPurpose.Authenticate) { return translate("AuthenticationScreen.unlock") - } else if (screenPurpose === AuthenticationScreenPurpose.TurnOnAuthentication) { + } else if ( + screenPurpose === AuthenticationScreenPurpose.TurnOnAuthentication + ) { return translate("AuthenticationScreen.setUp") } else { return "" diff --git a/app/screens/authentication-screen/pin-screen.tsx b/app/screens/authentication-screen/pin-screen.tsx index 5ecc9417d5..a6dd0238b1 100644 --- a/app/screens/authentication-screen/pin-screen.tsx +++ b/app/screens/authentication-screen/pin-screen.tsx @@ -11,22 +11,18 @@ import { palette } from "../../theme/palette" import { translate } from "../../i18n" import { resetDataStore } from "../../utils/logout" import KeyStoreWrapper from "../../utils/storage/secureStorage" -import type { ScreenType } from '../../types/screen' +import type { ScreenType } from "../../types/screen" import { PinScreenPurpose } from "../../utils/enum" const styles = EStyleSheet.create({ - container: { - alignItems: "center", - flex: 1, - width: "100%", - }, - - topSpacer: { + bottomSpacer: { flex: 1, }, - bottomSpacer: { - flex: 1, + circleContainer: { + alignItems: "center", + justifyContent: "center", + width: 32, }, circles: { @@ -34,75 +30,79 @@ const styles = EStyleSheet.create({ flexDirection: "row", }, - circleContainer: { - width: 32, + container: { alignItems: "center", - justifyContent: "center", + flex: 1, + width: "100%", }, emptyCircle: { - width: 16, - height: 16, - borderRadius: 16 / 2, backgroundColor: palette.lightBlue, borderColor: palette.white, + borderRadius: 16 / 2, borderWidth: 2, + height: 16, + width: 16, }, filledCircle: { - width: 16, - height: 16, - borderRadius: 16 / 2, backgroundColor: palette.white, - }, - - helperTextContainer: { - flex: 1, + borderRadius: 16 / 2, + height: 16, + width: 16, }, helperText: { - fontSize: 20, color: palette.white, + fontSize: 20, + }, + + helperTextContainer: { + flex: 1, }, pinPad: { - flex: 6, alignItems: "center", flexDirection: "column", + flex: 6, }, - pinPadRow: { - marginLeft: 32, - marginRight: 32, + pinPadButton: { + backgroundColor: palette.lightBlue, flex: 1, - flexDirection: "row", + height: "95%", + width: "95%", }, pinPadButtonContainer: { - width: 100, alignItems: "center", justifyContent: "center", + width: 100, }, - pinPadButton: { - flex: 1, - width: "95%", - height: "95%", - backgroundColor: palette.lightBlue, + pinPadButtonIcon: { + color: palette.white, + fontSize: 32, + marginRight: "20%", }, pinPadButtonTitle: { - marginLeft: "40%", - marginRight: "40%", color: palette.white, fontSize: 26, fontWeight: "bold", + marginLeft: "40%", + marginRight: "40%", }, - pinPadButtonIcon: { - marginRight: "20%", - color: palette.white, - fontSize: 32, + pinPadRow: { + flex: 1, + flexDirection: "row", + marginLeft: 32, + marginRight: 32, + }, + + topSpacer: { + flex: 1, }, }) @@ -111,8 +111,8 @@ type Props = { params: { screenPurpose: PinScreenPurpose } - }, - navigation: any, + } + navigation: any } export const PinScreen: ScreenType = ({ route, navigation }: Props) => { @@ -122,7 +122,7 @@ export const PinScreen: ScreenType = ({ route, navigation }: Props) => { const [enteredPIN, setEnteredPIN] = useState("") const [helperText, setHelperText] = useState( - screenPurpose === PinScreenPurpose.SetPin ? translate("PinScreen.setPin") : "" + screenPurpose === PinScreenPurpose.SetPin ? translate("PinScreen.setPin") : "", ) const [previousPIN, setPreviousPIN] = useState("") const [pinAttempts, setPinAttempts] = useState(0) @@ -130,26 +130,25 @@ export const PinScreen: ScreenType = ({ route, navigation }: Props) => { const MAX_PIN_ATTEMPTS = 3 useEffect(() => { - (async () => { + ;(async () => { setPinAttempts(await KeyStoreWrapper.getPinAttemptsOrZero()) })() }, []) const handleCompletedPinForAuthenticatePin = async (newEnteredPIN: string) => { - KeyStoreWrapper.setPinAttempts("0") - if (newEnteredPIN === await KeyStoreWrapper.getPinOrEmptyString()) { + if (newEnteredPIN === (await KeyStoreWrapper.getPinOrEmptyString())) { KeyStoreWrapper.resetPinAttempts() navigation.reset({ index: 0, routes: [{ name: "Primary" }], }) } else { - if (pinAttempts < (MAX_PIN_ATTEMPTS - 1)) { + if (pinAttempts < MAX_PIN_ATTEMPTS - 1) { const newPinAttempts = pinAttempts + 1 KeyStoreWrapper.setPinAttempts(newPinAttempts.toString()) setPinAttempts(newPinAttempts) setEnteredPIN("") - if (newPinAttempts === (MAX_PIN_ATTEMPTS - 1)) { + if (newPinAttempts === MAX_PIN_ATTEMPTS - 1) { setHelperText(translate("PinScreen.oneAttemptRemaining")) } else { const attemptsRemaining = MAX_PIN_ATTEMPTS - newPinAttempts @@ -214,7 +213,9 @@ export const PinScreen: ScreenType = ({ route, navigation }: Props) => { const circleComponentForDigit = (digit: number) => { return ( - digit ? styles.filledCircle : styles.emptyCircle} /> + digit ? styles.filledCircle : styles.emptyCircle} + /> ) } @@ -222,7 +223,12 @@ export const PinScreen: ScreenType = ({ route, navigation }: Props) => { const buttonComponentForDigit = (digit: string) => { return ( -