diff --git a/app/src/components/AppCard.tsx b/app/src/components/AppCard.tsx index 8a866f3bd..2778c1e6c 100644 --- a/app/src/components/AppCard.tsx +++ b/app/src/components/AppCard.tsx @@ -38,7 +38,6 @@ const AppCard: React.FC = ({ return ( void; @@ -117,12 +118,15 @@ const MainScreen: React.FC = ({ setNFCScanIsOpen(false); }, 0); } - else if (step >= Steps.NFC_SCAN_COMPLETED) { + else if (step == Steps.NFC_SCAN_COMPLETED) { // Set the timeout and store its ID timeoutId = setTimeout(() => { setNFCScanIsOpen(false); }, 700); } + else if (step == Steps.PROOF_GENERATED) { + setSelectedTab("mint"); + } if (step == Steps.NFC_SCAN_COMPLETED) { setSelectedTab("app"); } @@ -368,62 +372,22 @@ const MainScreen: React.FC = ({ setAddress={setAddress} generatingProof={generatingProof} handleProve={handleProve} - step={step} - mintText={mintText} - proof={proof} - proofTime={proofTime} - handleMint={handleMint} hideData={hideData} ens={ens} setEns={setEns} majority={majority} setMajority={setMajority} /> - - - {/* {(!keyboardVisible || Platform.OS == "ios") && - - - - - Scan - - - {step >= Steps.NFC_SCAN_COMPLETED ? - - - - Apps - - - : - - - - Apps - - - - } - { - (step >= Steps.NFC_SCAN_COMPLETED) && (selectedApp != null) ? - - - - Prove - - - : - = Steps.NFC_SCAN_COMPLETED ? "app" : "scan"} unstyled w="33%"> - - - Prove - - - } - - - } */} + + + ); diff --git a/app/src/screens/MintScreen.tsx b/app/src/screens/MintScreen.tsx new file mode 100644 index 000000000..e6192faff --- /dev/null +++ b/app/src/screens/MintScreen.tsx @@ -0,0 +1,110 @@ +import React, { useState, useEffect } from 'react'; +import { YStack, XStack, Text, Button, Spinner } from 'tamagui'; +import { Copy } from '@tamagui/lucide-icons'; +import { formatDuration } from '../../utils/utils'; +import { Steps } from '../utils/utils'; +import ProofGrid from '../components/ProofGrid'; +import { App } from '../utils/AppClass'; +import { Platform } from 'react-native'; +import Clipboard from '@react-native-community/clipboard'; +import Toast from 'react-native-toast-message'; +import { blueColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors'; + +const { ethers } = require('ethers'); +const fileName = "passport.arkzkey" +const path = "/data/user/0/com.proofofpassport/files/" + fileName + +interface MintScreenProps { + selectedApp: App | null; + step: number; + mintText: string; + proof: { proof: string, inputs: string } | null; + proofTime: number; + handleMint: () => void; + +} + +const MintScreen: React.FC = ({ + selectedApp, + step, + mintText, + proof, + proofTime, + handleMint, +}) => { + + const getTx = (input: string | null): string => { + if (!input) return ''; + const transaction = input.split(' ').filter(word => word.startsWith('0x')).join(' '); + return transaction; + } + const shortenInput = (input: string | null): string => { + if (!input) return ''; + if (input.length > 9) { + return input.substring(0, 25) + '\u2026'; + } else { + return input; + } + } + + const copyToClipboard = (input: string) => { + Clipboard.setString(input); + Toast.show({ + type: 'success', + text1: '🖨️ Tx copied to clipboard', + position: 'top', + bottomOffset: 80, + }) + }; + + + return ( + + {step === Steps.TX_MINTED ? ( + + + + + + You just have minted a Soulbond token 🎉 + You can now share this proof with the selected app. + + Network: Sepolia + + Tx: {shortenInput(getTx(mintText))} + + + + + + + + ) : ( + + + + + + You just generated this Zero Knowledge proof 🎉 + You can now share this proof with the selected app. + Proof generation duration: {formatDuration(proofTime)} + + + + + + )} + + + ); +}; +export default MintScreen; diff --git a/app/src/screens/ProveScreen.tsx b/app/src/screens/ProveScreen.tsx index 871a13106..d48bd5a25 100644 --- a/app/src/screens/ProveScreen.tsx +++ b/app/src/screens/ProveScreen.tsx @@ -1,18 +1,16 @@ import React, { useState, useEffect } from 'react'; import { NativeModules } from 'react-native'; -import { YStack, XStack, Text, Checkbox, Input, Button, Spinner, Image, useWindowDimensions } from 'tamagui'; -import { Check, LayoutGrid, Scan, Copy, Plus, Minus } from '@tamagui/lucide-icons'; -import { getFirstName, formatDuration } from '../../utils/utils'; +import { YStack, XStack, Text, Checkbox, Input, Button, Spinner, Image, useWindowDimensions, ScrollView, SizableStack, SizableText } from 'tamagui'; +import { Check, Plus, Minus, ExternalLink, Cpu, PenTool, Info } from '@tamagui/lucide-icons'; +import { getFirstName } from '../../utils/utils'; import { attributeToPosition } from '../../../common/src/constants/constants'; -import { Steps } from '../utils/utils'; import USER from '../images/user.png' -import ProofGrid from '../components/ProofGrid'; import { App } from '../utils/AppClass'; import { Keyboard, Platform } from 'react-native'; import { DEFAULT_ADDRESS } from '@env'; -import Clipboard from '@react-native-community/clipboard'; import Toast from 'react-native-toast-message'; -import { blueColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors'; +import { blueColor, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors'; +import ENS from "../images/ens_mark_dao.png" const { ethers } = require('ethers'); const fileName = "passport.arkzkey" @@ -27,11 +25,6 @@ interface ProveScreenProps { setAddress: (address: string) => void; generatingProof: boolean; handleProve: (path: string) => void; - handleMint: () => void; - step: number; - mintText: string; - proof: { proof: string, inputs: string } | null; - proofTime: number; hideData: boolean; ens: string; setEns: (ens: string) => void; @@ -48,11 +41,6 @@ const ProveScreen: React.FC = ({ setAddress, generatingProof, handleProve, - step, - mintText, - proof, - proofTime, - handleMint, hideData, ens, setEns, @@ -61,34 +49,8 @@ const ProveScreen: React.FC = ({ }) => { const [zkeyLoading, setZkeyLoading] = useState(false); const [zkeyLoaded, setZkeyLoaded] = useState(true); - const [age, setAge] = useState(18); - const incrementAge = () => setAge(prevAge => prevAge + 1); - const decrementAge = () => setAge(prevAge => prevAge > 0 ? prevAge - 1 : 0); - const getTx = (input: string | null): string => { - if (!input) return ''; - const transaction = input.split(' ').filter(word => word.startsWith('0x')).join(' '); - return transaction; - } - const shortenInput = (input: string | null): string => { - if (!input) return ''; - if (input.length > 9) { - return input.substring(0, 25) + '\u2026'; - } else { - return input; - } - } - - const copyToClipboard = (input: string) => { - Clipboard.setString(input); - Toast.show({ - type: 'success', - text1: '🖨️ Tx copied to clipboard', - position: 'top', - bottomOffset: 80, - }) - }; const downloadZkey = async () => { // TODO: don't redownload if already in the file system at path, if downloaded from previous session @@ -219,34 +181,47 @@ const ProveScreen: React.FC = ({ return ( - {(step >= Steps.NFC_SCAN_COMPLETED && selectedApp != null) ? - (step < Steps.PROOF_GENERATED ? ( - - - {hideData ? - 750 ? 150 : 100} - h={height > 750 ? 190 : 80} - borderRadius={height > 800 ? "$7" : "$6"} - source={{ - uri: USER, - }} - /> : - 750 ? 150 : 110} - h={height > 750 ? 190 : 130} - borderRadius={height > 750 ? "$7" : "$6"} - source={{ - uri: passportData.photoBase64 ?? USER, - }} - /> + + + {hideData ? + 750 ? 150 : 100} + h={height > 750 ? 190 : 80} + borderRadius={height > 800 ? "$7" : "$6"} + source={{ + uri: USER, + }} + /> : + 750 ? 150 : 110} + h={height > 750 ? 190 : 130} + borderRadius={height > 750 ? "$7" : "$6"} + source={{ + uri: passportData.photoBase64 ?? USER, + }} + /> - } - - Hi {hideData ? maskString(getFirstName(passportData.mrz)) : getFirstName(passportData.mrz)} 👋 - Enter your address or ens: + } + + Hi {hideData ? maskString(getFirstName(passportData.mrz)) : getFirstName(passportData.mrz)} 👋 + + + + + + + + + Address or ENS + + + + = ({ onChangeText={setInputValue} autoCorrect={false} autoCapitalize='none' - borderColor={address != ethers.ZeroAddress ? "#3185FC" : "#343434"} + borderColor="transparent" + borderWidth={0} /> + + + + + + + + + + + + + + Disclose + + + Select optionnal data + + + + + - - {selectedApp?.disclosurephrase} - {selectedApp && Object.keys(selectedApp.disclosure).map((key) => { const key_ = key as string; const indexes = attributeToPosition[key_]; @@ -268,8 +263,8 @@ const ProveScreen: React.FC = ({ const mrzAttributeFormatted = mrzAttribute; return ( - - handleDisclosureChange(key_)}> + + handleDisclosureChange(key_)} > = ({ {keyFormatted}: {key_ === 'older_than' ? ( - - {majority} + + + {majority} + yo + - ) : ( {hideData ? maskString(mrzAttributeFormatted) : mrzAttributeFormatted} )} - ); })} - - - - {(height > 750) && This operation can take up to 2 mn, phone may freeze during this time} + + - - ) : step === Steps.TX_MINTED ? ( - - - - - - You just have minted a Soulbond token 🎉 - You can now share this proof with the selected app. - - Network: Sepolia - - Tx: {shortenInput(getTx(mintText))} - - - - - - - - ) : ( - - - - - - You just generated this Zero Knowledge proof 🎉 - You can now share this proof with the selected app. - Proof generation duration: {formatDuration(proofTime)} - - - - - - ) - - ) : - ( - - Please scan your passport and select an app to generate ZK proof - - - + + + {(height > 750) && This operation can take up to 2 mn, phone may freeze during this time} + - ) - } ); }; diff --git a/app/src/screens/ScanScreen.tsx b/app/src/screens/ScanScreen.tsx index 93d93913f..e8aaa620a 100644 --- a/app/src/screens/ScanScreen.tsx +++ b/app/src/screens/ScanScreen.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { YStack, Text, XStack, Button } from 'tamagui'; import { Steps } from '../utils/utils'; import { Camera, ExternalLink, Nfc } from '@tamagui/lucide-icons'; +import { blueColorDark, blueColorLight } from '../utils/colors'; interface ScanScreenProps { onStartCameraScan: () => void; @@ -37,8 +38,8 @@ const ScanScreen: React.FC = ({ onStartCameraScan, handleNFCSca Done ) : ( - - To-do + + To-do )} @@ -75,8 +76,8 @@ const ScanScreen: React.FC = ({ onStartCameraScan, handleNFCSca To-do ) : step < Steps.NFC_SCAN_COMPLETED ? ( - - To-do + + To-do ) : ( diff --git a/app/src/utils/colors.ts b/app/src/utils/colors.ts index 50f5ed9fd..1dbfedd50 100644 --- a/app/src/utils/colors.ts +++ b/app/src/utils/colors.ts @@ -4,4 +4,6 @@ export const componentBgColor = "#1c1c1c"; export const componentBgColor2 = "#232323"; export const blueColor = "#3185FC"; export const textColor1 = "#ededed"; -export const textColor2 = "#a0a0a0"; \ No newline at end of file +export const textColor2 = "#a0a0a0"; +export const blueColorDark = "#11233e" +export const blueColorLight = "#0090ff" \ No newline at end of file