diff --git a/app/containers/Passcode/Base/Button.js b/app/containers/Passcode/Base/Button.js deleted file mode 100644 index 7826ed5fe..000000000 --- a/app/containers/Passcode/Base/Button.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; - -import styles from './styles'; -import { themes } from '../../../constants/colors'; -import Touch from '../../../utils/touch'; -import { CustomIcon } from '../../../lib/Icons'; - -const Button = React.memo(({ - text, disabled, theme, onPress, icon -}) => { - const press = () => onPress && onPress(text); - - return ( - - { - icon - ? ( - - ) - : ( - - {text} - - ) - } - - ); -}); - -Button.propTypes = { - text: PropTypes.string, - icon: PropTypes.string, - theme: PropTypes.string, - disabled: PropTypes.bool, - onPress: PropTypes.func -}; - -export default Button; diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx new file mode 100644 index 000000000..53f41e383 --- /dev/null +++ b/app/containers/Passcode/Base/Button.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Text } from 'react-native'; + +import styles from './styles'; +import { themes } from '../../../constants/colors'; +import Touch from '../../../utils/touch'; +import { CustomIcon } from '../../../lib/Icons'; + +interface IPasscodeButton { + text: string; + icon: string; + theme: string; + disabled: boolean; + onPress({}?): void; +} + +const Button = React.memo(({ text, disabled, theme, onPress, icon }: Partial) => { + const press = () => onPress && onPress(text!); + + return ( + + { + icon + ? ( + + ) + : ( + + {text} + + ) + } + + ); +}); + +export default Button; diff --git a/app/containers/Passcode/Base/Dots.js b/app/containers/Passcode/Base/Dots.tsx similarity index 85% rename from app/containers/Passcode/Base/Dots.js rename to app/containers/Passcode/Base/Dots.tsx index 9d9f4a910..415d783c3 100644 --- a/app/containers/Passcode/Base/Dots.js +++ b/app/containers/Passcode/Base/Dots.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { View } from 'react-native'; import range from 'lodash/range'; -import PropTypes from 'prop-types'; import styles from './styles'; import { themes } from '../../../constants/colors'; @@ -9,7 +8,13 @@ import { themes } from '../../../constants/colors'; const SIZE_EMPTY = 12; const SIZE_FULL = 16; -const Dots = React.memo(({ passcode, theme, length }) => ( +interface IPasscodeDots { + passcode: string; + theme: string; + length: number; +} + +const Dots = React.memo(({ passcode, theme, length }: IPasscodeDots) => ( {range(length).map((val) => { const lengthSup = (passcode.length >= val + 1); @@ -42,10 +47,4 @@ const Dots = React.memo(({ passcode, theme, length }) => ( )); -Dots.propTypes = { - passcode: PropTypes.string, - theme: PropTypes.string, - length: PropTypes.string -}; - export default Dots; diff --git a/app/containers/Passcode/Base/LockIcon.js b/app/containers/Passcode/Base/LockIcon.tsx similarity index 76% rename from app/containers/Passcode/Base/LockIcon.js rename to app/containers/Passcode/Base/LockIcon.tsx index 133485cba..17723f3db 100644 --- a/app/containers/Passcode/Base/LockIcon.js +++ b/app/containers/Passcode/Base/LockIcon.tsx @@ -1,13 +1,12 @@ import React from 'react'; import { View } from 'react-native'; import { Row } from 'react-native-easy-grid'; -import PropTypes from 'prop-types'; import styles from './styles'; import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; -const LockIcon = React.memo(({ theme }) => ( +const LockIcon = React.memo(({ theme }: {theme: string}) => ( @@ -15,8 +14,4 @@ const LockIcon = React.memo(({ theme }) => ( )); -LockIcon.propTypes = { - theme: PropTypes.string -}; - export default LockIcon; diff --git a/app/containers/Passcode/Base/Locked.js b/app/containers/Passcode/Base/Locked.tsx similarity index 75% rename from app/containers/Passcode/Base/Locked.js rename to app/containers/Passcode/Base/Locked.tsx index 8371c7287..5544ee21d 100644 --- a/app/containers/Passcode/Base/Locked.js +++ b/app/containers/Passcode/Base/Locked.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; import { Grid } from 'react-native-easy-grid'; import { themes } from '../../../constants/colors'; @@ -12,7 +11,18 @@ import Title from './Title'; import Subtitle from './Subtitle'; import LockIcon from './LockIcon'; -const Timer = React.memo(({ time, theme, setStatus }) => { +type TPasscodeTimer = { + time: string; + theme: string; + setStatus: Function; +}; + +interface IPasscodeLocked { + theme: string; + setStatus: Function; +} + +const Timer = React.memo(({ time, theme, setStatus }: TPasscodeTimer) => { const calcTimeLeft = () => { const diff = getDiff(time); if (diff > 0) { @@ -20,7 +30,7 @@ const Timer = React.memo(({ time, theme, setStatus }) => { } }; - const [timeLeft, setTimeLeft] = useState(calcTimeLeft()); + const [timeLeft, setTimeLeft] = useState(calcTimeLeft()); useEffect(() => { setTimeout(() => { @@ -39,8 +49,8 @@ const Timer = React.memo(({ time, theme, setStatus }) => { return ; }); -const Locked = React.memo(({ theme, setStatus }) => { - const [lockedUntil, setLockedUntil] = useState(null); +const Locked = React.memo(({ theme, setStatus }: IPasscodeLocked) => { + const [lockedUntil, setLockedUntil] = useState(null); const readItemFromStorage = async() => { const l = await getLockedUntil(); @@ -60,15 +70,4 @@ const Locked = React.memo(({ theme, setStatus }) => { ); }); -Locked.propTypes = { - theme: PropTypes.string, - setStatus: PropTypes.func -}; - -Timer.propTypes = { - time: PropTypes.string, - theme: PropTypes.string, - setStatus: PropTypes.func -}; - export default Locked; diff --git a/app/containers/Passcode/Base/Subtitle.js b/app/containers/Passcode/Base/Subtitle.tsx similarity index 71% rename from app/containers/Passcode/Base/Subtitle.js rename to app/containers/Passcode/Base/Subtitle.tsx index 2ac69fee7..0959d6a4d 100644 --- a/app/containers/Passcode/Base/Subtitle.js +++ b/app/containers/Passcode/Base/Subtitle.tsx @@ -1,12 +1,16 @@ import React from 'react'; import { View, Text } from 'react-native'; import { Row } from 'react-native-easy-grid'; -import PropTypes from 'prop-types'; import styles from './styles'; import { themes } from '../../../constants/colors'; -const Subtitle = React.memo(({ text, theme }) => ( +interface IPasscodeSubtitle { + text: string; + theme: string; +} + +const Subtitle = React.memo(({ text, theme }: IPasscodeSubtitle) => ( {text} @@ -14,9 +18,4 @@ const Subtitle = React.memo(({ text, theme }) => ( )); -Subtitle.propTypes = { - text: PropTypes.string, - theme: PropTypes.string -}; - export default Subtitle; diff --git a/app/containers/Passcode/Base/Title.js b/app/containers/Passcode/Base/Title.tsx similarity index 71% rename from app/containers/Passcode/Base/Title.js rename to app/containers/Passcode/Base/Title.tsx index 0aa96d757..fdb73b4a4 100644 --- a/app/containers/Passcode/Base/Title.js +++ b/app/containers/Passcode/Base/Title.tsx @@ -1,12 +1,16 @@ import React from 'react'; import { View, Text } from 'react-native'; import { Row } from 'react-native-easy-grid'; -import PropTypes from 'prop-types'; import styles from './styles'; import { themes } from '../../../constants/colors'; -const Title = React.memo(({ text, theme }) => ( +interface IPasscodeTitle { + text: string; + theme: string; +} + +const Title = React.memo(({ text, theme }: IPasscodeTitle) => ( {text} @@ -14,9 +18,4 @@ const Title = React.memo(({ text, theme }) => ( )); -Title.propTypes = { - text: PropTypes.string, - theme: PropTypes.string -}; - export default Title; diff --git a/app/containers/Passcode/Base/index.js b/app/containers/Passcode/Base/index.tsx similarity index 81% rename from app/containers/Passcode/Base/index.js rename to app/containers/Passcode/Base/index.tsx index 678036975..b861a4f08 100644 --- a/app/containers/Passcode/Base/index.js +++ b/app/containers/Passcode/Base/index.tsx @@ -1,9 +1,6 @@ -import React, { - useState, forwardRef, useImperativeHandle, useRef -} from 'react'; +import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react'; import { Col, Row, Grid } from 'react-native-easy-grid'; import range from 'lodash/range'; -import PropTypes from 'prop-types'; import * as Animatable from 'react-native-animatable'; import * as Haptics from 'expo-haptics'; @@ -17,11 +14,23 @@ import LockIcon from './LockIcon'; import Title from './Title'; import Subtitle from './Subtitle'; +interface IPasscodeBase { + theme: string; + type: string; + previousPasscode: string; + title: string; + subtitle: string; + showBiometry: string; + onEndProcess: Function; + onError: Function; + onBiometryPress(): void; +} + const Base = forwardRef(({ theme, type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress -}, ref) => { - const rootRef = useRef(); - const dotsRef = useRef(); +}: IPasscodeBase, ref) => { + const rootRef = useRef(); + const dotsRef = useRef(); const [passcode, setPasscode] = useState(''); const clearPasscode = () => setPasscode(''); @@ -32,11 +41,11 @@ const Base = forwardRef(({ Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error); }; - const animate = (animation, duration = 500) => { + const animate = (animation: string, duration = 500) => { rootRef?.current?.[animation](duration); }; - const onPressNumber = text => setPasscode((p) => { + const onPressNumber = (text: string) => setPasscode((p) => { const currentPasscode = p + text; if (currentPasscode?.length === PASSCODE_LENGTH) { switch (type) { @@ -77,28 +86,28 @@ const Base = forwardRef(({ - <Subtitle text={subtitle} theme={theme} /> + <Subtitle text={subtitle!} theme={theme} /> <Row style={styles.row}> <Animatable.View ref={dotsRef}> <Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} /> </Animatable.View> </Row> <Row style={[styles.row, styles.buttonRow]}> - {range(1, 4).map(i => ( + {range(1, 4).map((i: any) => ( <Col key={i} style={styles.colButton}> <Button text={i} theme={theme} onPress={onPressNumber} /> </Col> ))} </Row> <Row style={[styles.row, styles.buttonRow]}> - {range(4, 7).map(i => ( + {range(4, 7).map((i: any) => ( <Col key={i} style={styles.colButton}> <Button text={i} theme={theme} onPress={onPressNumber} /> </Col> ))} </Row> <Row style={[styles.row, styles.buttonRow]}> - {range(7, 10).map(i => ( + {range(7, 10).map((i: any) => ( <Col key={i} style={styles.colButton}> <Button text={i} theme={theme} onPress={onPressNumber} /> </Col> @@ -124,16 +133,4 @@ const Base = forwardRef(({ ); }); -Base.propTypes = { - theme: PropTypes.string, - type: PropTypes.string, - previousPasscode: PropTypes.string, - title: PropTypes.string, - subtitle: PropTypes.string, - showBiometry: PropTypes.string, - onEndProcess: PropTypes.func, - onError: PropTypes.func, - onBiometryPress: PropTypes.func -}; - export default Base; diff --git a/app/containers/Passcode/Base/styles.js b/app/containers/Passcode/Base/styles.ts similarity index 100% rename from app/containers/Passcode/Base/styles.js rename to app/containers/Passcode/Base/styles.ts diff --git a/app/containers/Passcode/PasscodeChoose.js b/app/containers/Passcode/PasscodeChoose.tsx similarity index 74% rename from app/containers/Passcode/PasscodeChoose.js rename to app/containers/Passcode/PasscodeChoose.tsx index cabc71978..70cb00838 100644 --- a/app/containers/Passcode/PasscodeChoose.js +++ b/app/containers/Passcode/PasscodeChoose.tsx @@ -1,5 +1,4 @@ import React, { useState, useRef } from 'react'; -import PropTypes from 'prop-types'; import * as Haptics from 'expo-haptics'; import { gestureHandlerRootHOC } from 'react-native-gesture-handler'; @@ -7,14 +6,20 @@ import Base from './Base'; import { TYPE } from './constants'; import I18n from '../../i18n'; -const PasscodeChoose = ({ theme, finishProcess, force = false }) => { - const chooseRef = useRef(null); - const confirmRef = useRef(null); +interface IPasscodeChoose { + theme: string; + force: boolean; + finishProcess: Function; +} + +const PasscodeChoose = ({ theme, finishProcess, force = false }: IPasscodeChoose) => { + const chooseRef = useRef<any>(null); + const confirmRef = useRef<any>(null); const [subtitle, setSubtitle] = useState(null); const [status, setStatus] = useState(TYPE.CHOOSE); - const [previousPasscode, setPreviouPasscode] = useState(null); + const [previousPasscode, setPreviouPasscode] = useState<any>(null); - const firstStep = (p) => { + const firstStep = (p: any) => { setTimeout(() => { setStatus(TYPE.CONFIRM); setPreviouPasscode(p); @@ -22,7 +27,7 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }) => { }, 200); }; - const changePasscode = p => finishProcess && finishProcess(p); + const changePasscode = (p: string) => finishProcess && finishProcess(p); const onError = () => { setTimeout(() => { @@ -36,6 +41,7 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }) => { if (status === TYPE.CONFIRM) { return ( + // @ts-ignore <Base ref={confirmRef} theme={theme} @@ -49,6 +55,7 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }) => { } return ( + // @ts-ignore <Base ref={chooseRef} theme={theme} @@ -60,10 +67,4 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }) => { ); }; -PasscodeChoose.propTypes = { - theme: PropTypes.string, - force: PropTypes.bool, - finishProcess: PropTypes.func -}; - export default gestureHandlerRootHOC(PasscodeChoose); diff --git a/app/containers/Passcode/PasscodeEnter.js b/app/containers/Passcode/PasscodeEnter.tsx similarity index 87% rename from app/containers/Passcode/PasscodeEnter.js rename to app/containers/Passcode/PasscodeEnter.tsx index ebd22f363..c6ad8e2b6 100644 --- a/app/containers/Passcode/PasscodeEnter.js +++ b/app/containers/Passcode/PasscodeEnter.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; import { useAsyncStorage } from '@react-native-community/async-storage'; -import PropTypes from 'prop-types'; import { gestureHandlerRootHOC } from 'react-native-gesture-handler'; import * as Haptics from 'expo-haptics'; import { sha256 } from 'js-sha256'; @@ -16,17 +15,24 @@ import { getLockedUntil, getDiff } from './utils'; import UserPreferences from '../../lib/userPreferences'; import I18n from '../../i18n'; -const PasscodeEnter = ({ theme, hasBiometry, finishProcess }) => { + +interface IPasscodePasscodeEnter { + theme: string; + hasBiometry: string; + finishProcess: Function; +} + +const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeEnter) => { const ref = useRef(null); - let attempts = 0; - let lockedUntil = false; + let attempts: any = 0; + let lockedUntil: any = false; const [passcode, setPasscode] = useState(null); const [status, setStatus] = useState(null); const { getItem: getAttempts, setItem: setAttempts } = useAsyncStorage(ATTEMPTS_KEY); const { setItem: setLockedUntil } = useAsyncStorage(LOCKED_OUT_TIMER_KEY); const fetchPasscode = async() => { - const p = await UserPreferences.getStringAsync(PASSCODE_KEY); + const p: any = await UserPreferences.getStringAsync(PASSCODE_KEY); setPasscode(p); }; @@ -61,7 +67,7 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }) => { readStorage(); }, [status]); - const onEndProcess = (p) => { + const onEndProcess = (p: any) => { setTimeout(() => { if (sha256(p) === passcode) { finishProcess(); @@ -72,6 +78,7 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }) => { setLockedUntil(new Date().toISOString()); Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error); } else { + // @ts-ignore ref.current.wrongPasscode(); setAttempts(attempts?.toString()); Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning); @@ -97,10 +104,4 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }) => { ); }; -PasscodeEnter.propTypes = { - theme: PropTypes.string, - hasBiometry: PropTypes.string, - finishProcess: PropTypes.func -}; - export default gestureHandlerRootHOC(PasscodeEnter); diff --git a/app/containers/Passcode/constants.js b/app/containers/Passcode/constants.ts similarity index 74% rename from app/containers/Passcode/constants.js rename to app/containers/Passcode/constants.ts index d284ee241..ae268799a 100644 --- a/app/containers/Passcode/constants.js +++ b/app/containers/Passcode/constants.ts @@ -1,4 +1,4 @@ -export const TYPE = { +export const TYPE: any = { CHOOSE: 'choose', CONFIRM: 'confirm', ENTER: 'enter', diff --git a/app/containers/Passcode/index.js b/app/containers/Passcode/index.ts similarity index 100% rename from app/containers/Passcode/index.js rename to app/containers/Passcode/index.ts diff --git a/app/containers/Passcode/utils.js b/app/containers/Passcode/utils.ts similarity index 81% rename from app/containers/Passcode/utils.js rename to app/containers/Passcode/utils.ts index bbb14eea7..f333c6691 100644 --- a/app/containers/Passcode/utils.js +++ b/app/containers/Passcode/utils.ts @@ -4,11 +4,11 @@ import moment from 'moment'; import { LOCKED_OUT_TIMER_KEY, TIME_TO_LOCK } from '../../constants/localAuthentication'; export const getLockedUntil = async() => { - const t = await AsyncStorage.getItem(LOCKED_OUT_TIMER_KEY); + const t: any = await AsyncStorage.getItem(LOCKED_OUT_TIMER_KEY); if (t) { return moment(t).add(TIME_TO_LOCK); } return null; }; - +// @ts-ignore export const getDiff = t => new Date(t) - new Date();