From 8d7ff81cfc8391a4f75209a0042d6d615b9f95d4 Mon Sep 17 00:00:00 2001 From: jemubm <105349292+jemubm@users.noreply.github.com> Date: Sun, 16 Jul 2023 16:10:31 +0100 Subject: [PATCH 1/9] refactor: Revamp qr scanner (#2527) Signed-off-by: jemubm <105349292+jemubm@users.noreply.github.com> Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com> --- .../src/TxHistory/TxHistoryNavigator.tsx | 6 +- .../QRCodeScanner/QRCodeScanner.stories.tsx | 32 +- .../QRCodeScanner/QRCodeScanner.tsx | 281 +++++++++++++++++- .../src/features/Send/common/strings.ts | 5 + .../InputReceiver/ReadQRCodeScreen.tsx | 4 +- .../wallet-mobile/src/i18n/locales/en-US.json | 1 + apps/wallet-mobile/src/navigation.tsx | 12 +- 7 files changed, 314 insertions(+), 27 deletions(-) diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx index 4ad78dba1f..9655590e5c 100644 --- a/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx +++ b/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx @@ -15,6 +15,7 @@ import {EditAmountScreen} from '../features/Send/useCases/ListAmountsToSend/Edit import {ReadQRCodeScreen} from '../features/Send/useCases/StartMultiTokenTx/InputReceiver/ReadQRCodeScreen' import {StartMultiTokenTxScreen} from '../features/Send/useCases/StartMultiTokenTx/StartMultiTokenTxScreen' import { + BackButton, defaultStackNavigationOptions, defaultStackNavigationOptionsV2, TxHistoryRoutes, @@ -141,8 +142,11 @@ export const TxHistoryNavigator = () => { name="send-read-qr-code" component={ReadQRCodeScreen} options={{ - title: strings.qrScannerTitle, ...sendOptions, + headerTransparent: true, + title: strings.qrScannerTitle, + headerTintColor: '#fff', + headerLeft: (props) => , }} /> diff --git a/apps/wallet-mobile/src/components/QRCodeScanner/QRCodeScanner.stories.tsx b/apps/wallet-mobile/src/components/QRCodeScanner/QRCodeScanner.stories.tsx index 11726062f8..3865a7037c 100644 --- a/apps/wallet-mobile/src/components/QRCodeScanner/QRCodeScanner.stories.tsx +++ b/apps/wallet-mobile/src/components/QRCodeScanner/QRCodeScanner.stories.tsx @@ -4,6 +4,7 @@ import {Camera} from 'expo-camera' import React from 'react' import {Text, View} from 'react-native' +import {Button} from '../Button' import {Spacer} from '../Spacer' import {QRCodeScanner} from './QRCodeScanner' @@ -13,44 +14,51 @@ const Wrapper = () => { const [status] = Camera.useCameraPermissions() const [publicKeyHex, setPublicKeyHex] = React.useState(null) const [path, setPath] = React.useState(null) + const [withMask, setMaskEnabled] = React.useState(true) const handleOnRead = async ({data}) => { const parsedData = JSON.parse(data) + setPublicKeyHex(parsedData.publicKeyHex) setPath(parsedData.path) action('onRead') - return Promise.resolve(false) + + return Promise.resolve(true) } return ( - + - - QR DATA + + - {`publicKeyHex: ${publicKeyHex}`} + - {`path: ${path}`} + - PREMISSIONS STATUS + - NOTE: To reset permissions, reinstall the app + - {`status: ${status?.status}`} + - {`granted: ${status?.granted}`} + - {`expires: ${status?.expires}`} + - {`canAskAgain: ${status?.canAskAgain}`} + + +