From 7df20a74e2596f4eb6cc31f5f4b45f2ca2dd8324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Colin?= Date: Thu, 8 Feb 2024 09:36:07 +0100 Subject: [PATCH] fix bugs, improve layouts, improve UX on tab selection --- app/App.tsx | 77 +- app/package.json | 10 +- app/src/components/AppCard.tsx | 30 +- app/src/screens/AppScreen.tsx | 4 +- app/src/screens/MainScreen copy.tsx | 313 ++++++ app/src/screens/MainScreen.tsx | 202 ++-- app/src/screens/ProveScreen.tsx | 79 +- app/src/screens/ScanScreen.tsx | 18 +- app/src/utils/AppClass.ts | 15 +- app/yarn.lock | 1610 +++++++++++++-------------- 10 files changed, 1351 insertions(+), 1007 deletions(-) create mode 100644 app/src/screens/MainScreen copy.tsx diff --git a/app/App.tsx b/app/App.tsx index 9d558a611..b9a26cc56 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -1,22 +1,13 @@ import React, { useEffect, useState } from 'react'; import { - SafeAreaView, - ScrollView, - StatusBar, - StyleSheet, useColorScheme, NativeModules, DeviceEventEmitter, - TextInput, Platform, } from 'react-native'; import { Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import Toast, { BaseToast, ErrorToast, SuccessToast, ToastProps } from 'react-native-toast-message'; // @ts-ignore @@ -449,7 +440,7 @@ function App(): JSX.Element { // setProofTime(response.duration); setGeneratingProof(false) - setStep('proofGenerated'); + setStep(Steps.PROOF_GENERATED); } catch (err: any) { console.log('err', err); setError( @@ -540,47 +531,33 @@ function App(): JSX.Element { }; return ( - - - + + - - - - - - + ); diff --git a/app/package.json b/app/package.json index 329d7a2ef..4c871d0b6 100644 --- a/app/package.json +++ b/app/package.json @@ -12,9 +12,9 @@ "dependencies": { "@babel/plugin-transform-private-methods": "^7.23.3", "@ethersproject/shims": "^5.7.0", - "@tamagui/config": "^1.89.3", - "@tamagui/core": "^1.89.3", - "@tamagui/lucide-icons": "^1.89.3", + "@tamagui/config": "^1.89.10", + "@tamagui/core": "^1.89.10", + "@tamagui/lucide-icons": "^1.89.10", "axios": "^1.6.3", "body-parser": "^1.20.2", "buffer": "^6.0.3", @@ -30,7 +30,7 @@ "react-native-passport-reader": "^1.0.3", "react-native-svg": "13.4.0", "react-native-toast-message": "^2.2.0", - "tamagui": "^1.89.3" + "tamagui": "^1.89.10" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -58,4 +58,4 @@ "engines": { "node": ">=16" } -} +} \ No newline at end of file diff --git a/app/src/components/AppCard.tsx b/app/src/components/AppCard.tsx index 1b0fca874..4452f40e3 100644 --- a/app/src/components/AppCard.tsx +++ b/app/src/components/AppCard.tsx @@ -9,7 +9,7 @@ interface AppCardProps { background: string | undefined; id: string | number; onTouchStart?: () => void; - eleva?: string; + selected?: boolean; } const AppCard: React.FC = ({ @@ -19,20 +19,20 @@ const AppCard: React.FC = ({ background, id, onTouchStart, - eleva + selected }) => { return ( - - +

{title}

{description} @@ -41,15 +41,21 @@ const AppCard: React.FC = ({ - {background && ( - - + {background && + />} )} diff --git a/app/src/screens/AppScreen.tsx b/app/src/screens/AppScreen.tsx index 497658d4a..064785625 100644 --- a/app/src/screens/AppScreen.tsx +++ b/app/src/screens/AppScreen.tsx @@ -40,7 +40,7 @@ const AppScreen: React.FC = ({ selectedApp, setSelectedApp }) => ]; return ( - + {cardsData.map(card => ( = ({ selectedApp, setSelectedApp }) => background={card.background} id={card.app.id} onTouchStart={() => handleCardSelect(card.app)} - eleva={selectedApp && selectedApp.id === card.app.id ? "$0" : "$12"} + selected={selectedApp && selectedApp.id === card.app.id ? true : false} /> ))} diff --git a/app/src/screens/MainScreen copy.tsx b/app/src/screens/MainScreen copy.tsx new file mode 100644 index 000000000..96438db7e --- /dev/null +++ b/app/src/screens/MainScreen copy.tsx @@ -0,0 +1,313 @@ +import React, { useState, useEffect } from 'react'; +import { YStack, XStack, Text, Button, Tabs, styled, Dialog, Adapt, Sheet, Label, Fieldset, Input, Switch, ThemeableStack, Separator } from 'tamagui' +import { Scan, UserCheck, HelpCircle, XCircle, IterationCw, LayoutGrid, Sparkles } from '@tamagui/lucide-icons'; +import ScanScreen from './ScanScreen'; +import ProveScreen from './ProveScreen'; +import { Steps } from '../utils/utils'; +import AppScreen from './AppScreen'; +import { App } from '../utils/AppClass'; + + +interface MainScreenProps { + onStartCameraScan: () => void; + nfcScan: () => void; + passportData: any; + disclosure: boolean; + handleDisclosureChange: (disclosure: boolean) => void; + address: string; + setAddress: (address: string) => void; + generatingProof: boolean; + handleProve: () => void; + step: number; + mintText: string; + proof: any; + proofTime: number; + handleMint: () => void; + totalTime: number; + setStep: (step: number) => void; + passportNumber: string; + setPassportNumber: (number: string) => void; + dateOfBirth: string; + setDateOfBirth: (date: string) => void; + dateOfExpiry: string; + setDateOfExpiry: (date: string) => void; +} + +const MainScreen: React.FC = ({ + onStartCameraScan, + nfcScan, + passportData, + disclosure, + handleDisclosureChange, + address, + setAddress, + generatingProof, + handleProve, + step, + mintText, + proof, + proofTime, + handleMint, + totalTime, + setStep, + passportNumber, + setPassportNumber, + dateOfBirth, + setDateOfBirth, + dateOfExpiry, + setDateOfExpiry +}) => { + + const [selectedTab, setSelectedTab] = useState("scan"); + const [selectedApp, setSelectedApp] = useState(null); + const [brokenCamera, setBrokenCamera] = useState(false); + const [open, setOpen] = useState(false) + const AppCard = styled(ThemeableStack, { + hoverTheme: true, + pressTheme: true, + focusTheme: true, + elevate: true + }) + const handleRestart = () => { + setStep(Steps.MRZ_SCAN); + setSelectedApp(null) + setPassportNumber(""); + setDateOfBirth(""); + setDateOfExpiry(""); + + } + const handleSkip = () => { + setStep(Steps.NFC_SCAN_COMPLETED); + setPassportNumber(""); + setDateOfBirth(""); + setDateOfExpiry(""); + + } + useEffect(() => { + // Check if length of each field is correct and move to step MRZ_SCAN_COMPLETED if so + if (passportNumber?.length === 9 && (dateOfBirth?.length === 6 && dateOfExpiry?.length === 6)) { + setStep(Steps.MRZ_SCAN_COMPLETED); + } + }, [passportNumber, dateOfBirth, dateOfExpiry]); + + return ( + + + + + + + + {selectedTab === "scan" ? "Scan" : (selectedTab === "app" ? "Apps" : "Prove")} + + + + + + + + + + + + + + + + + + + + + + Settings + + + +
+ + +
+ + +
+ + +
+ +
+ + + + +
+ { + brokenCamera && + +
+ + setPassportNumber(text.toUpperCase())} value={passportNumber} keyboardType="default" /> +
+
+ + +
+
+ + +
+ + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + + pt="$4" pb="$3"> + + + + + Scan + + + + + + + Apps + + + + + + + Prove + + + + + + + {/* + + + + + + + + */} + + + + ); +}; + +export default MainScreen; diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx index c43ff77e7..5cba5531b 100644 --- a/app/src/screens/MainScreen.tsx +++ b/app/src/screens/MainScreen.tsx @@ -1,11 +1,12 @@ import React, { useState, useEffect } from 'react'; -import { YStack, XStack, Text, Button, Tabs, styled, Dialog, Adapt, Sheet, Label, Fieldset, Input, Switch, ThemeableStack } from 'tamagui' +import { YStack, XStack, Text, Button, Tabs, styled, Dialog, Adapt, Sheet, Label, Fieldset, Input, Switch, ThemeableStack, Separator } from 'tamagui' import { Scan, UserCheck, HelpCircle, XCircle, IterationCw, LayoutGrid, Sparkles } from '@tamagui/lucide-icons'; import ScanScreen from './ScanScreen'; import ProveScreen from './ProveScreen'; import { Steps } from '../utils/utils'; import AppScreen from './AppScreen'; import { App } from '../utils/AppClass'; +import { Keyboard } from 'react-native'; interface MainScreenProps { @@ -90,13 +91,30 @@ const MainScreen: React.FC = ({ } }, [passportNumber, dateOfBirth, dateOfExpiry]); - return ( - + const [keyboardVisible, setKeyboardVisible] = useState(false); - - - - + useEffect(() => { + const showSubscription = Keyboard.addListener('keyboardDidShow', () => { + setKeyboardVisible(true); + }); + const hideSubscription = Keyboard.addListener('keyboardDidHide', () => { + setKeyboardVisible(false); + }); + + return () => { + showSubscription.remove(); + hideSubscription.remove(); + }; + }, []); + + return ( + + + + + + + {selectedTab === "scan" ? "Scan" : (selectedTab === "app" ? "Apps" : "Prove")} @@ -151,8 +169,8 @@ const MainScreen: React.FC = ({ -
-