diff --git a/app/src/apps/sbt.tsx b/app/src/apps/sbt.tsx index 647acb61c..076eaca6a 100644 --- a/app/src/apps/sbt.tsx +++ b/app/src/apps/sbt.tsx @@ -37,7 +37,7 @@ export const sbtApp: AppType = { selectable: true, icon: Flame, tags: [sepolia()], - + // ProveScreen UI name: 'Soulbound token', disclosureOptions: { @@ -45,7 +45,7 @@ export const sbtApp: AppType = { expiry_date: "optional", older_than: "optional" }, - + // SendProofScreen UI before sending proof beforeSendText1: "You can now use this proof to mint a Soulbound token.", beforeSendText2: "Disclosed information will be displayed on SBT.", @@ -62,14 +62,14 @@ export const sbtApp: AppType = { return ( { - Clipboard.setString(txHash); - toast?.show('🖨️', { - message: "Tx copied to clipboard", - customData: { - type: "success", - }, - }) - }} + Clipboard.setString(txHash); + toast?.show('🖨️', { + message: "Tx copied to clipboard", + customData: { + type: "success", + }, + }) + }} > @@ -122,9 +122,9 @@ export const sbtApp: AppType = { } = useUserStore.getState(); setStep(Steps.GENERATING_PROOF); - + const reveal_bitmap = revealBitmapFromMapping(disclosure); - + const response = await axios.get(COMMITMENT_TREE_TRACKER_URL) // const serializedCommitmentTree = "[[\"9366833337168993085050982292715343583458999801189875133285760454940954329736\",\"17067815450997614268337156469331439256078702232208444991806942459610897177755\",\"6218618977460894587557092460164616095207478656436068295742870309857616419830\",\"1009498555512750055176786258919772755314598234878788682229429740456064488924\",\"2317777252282411584898482846587421326341858131145081778162865818517424463113\",\"14350861400343175672772758664935358862843556622155842278173685659399974430673\"],[\"5757843324860707578753413472099376283217223062835733089254074659436006978958\",\"9384382887555344903988763589988369409408141218078864334664000402547342440893\",\"20714514634358291855499138323356766695315870633431415798546884765927810445680\"],[\"6444500081923737565029349850782686417529434309028817508928891238372057960879\",\"20714514634358291855499138323356766695315870633431415798546884765927810445680\"],[\"13949165376611379310020797746578693825960496340786495286952352659551479278661\"]]" console.log('response.data:', response.data); @@ -149,7 +149,7 @@ export const sbtApp: AppType = { ); console.log('inputs:', inputs); - + const start = Date.now(); const proof = await generateProof( @@ -173,7 +173,7 @@ export const sbtApp: AppType = { type: "error", }, }) - setStep(Steps.NFC_SCAN_COMPLETED); + setStep(Steps.NEXT_SCREEN); amplitude.track(error.message); } }, @@ -188,15 +188,15 @@ export const sbtApp: AppType = { toast, setStep } = useNavigationStore.getState(); - + if (!proof) { console.error('Proof is not generated'); return; } setStep(Steps.PROOF_SENDING); - - toast?.show('🚀',{ + + toast?.show('🚀', { message: "Transaction sent...", customData: { type: "info", @@ -214,7 +214,7 @@ export const sbtApp: AppType = { txHash: txHash, proofSentText: `SBT minting... Network: Sepolia. Transaction hash: ${txHash}` }); - + const receipt = await provider.waitForTransaction(txHash); console.log('receipt status:', receipt?.status); @@ -248,7 +248,7 @@ export const sbtApp: AppType = { if (error.isAxiosError && error.response) { const errorMessage = error.response.data.error; console.log('Server error message:', errorMessage); - + // parse blockchain error and show it const match = errorMessage.match(/execution reverted: "([^"]*)"/); if (match && match[1]) { diff --git a/app/src/screens/CameraScreen.tsx b/app/src/screens/CameraScreen.tsx index dfedbe2d9..bd24a77c3 100644 --- a/app/src/screens/CameraScreen.tsx +++ b/app/src/screens/CameraScreen.tsx @@ -41,7 +41,7 @@ const CameraScreen: React.FC = ({ sheetIsOpen, setSheetIsOpen - + diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx index 6d7e59d83..4665bf88e 100644 --- a/app/src/screens/MainScreen.tsx +++ b/app/src/screens/MainScreen.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3 } from 'tamagui' -import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share } from '@tamagui/lucide-icons'; +import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser } from '@tamagui/lucide-icons'; import X from '../images/x.png' import Telegram from '../images/telegram.png' import Github from '../images/github.png' @@ -20,17 +20,19 @@ import { scan } from '../utils/nfcScanner'; import useNavigationStore from '../stores/navigationStore'; import NfcScreen from './NfcScreen'; import CameraScreen from './CameraScreen'; +import NextScreen from './NextScreen'; import { mockPassportData_sha256WithRSAEncryption_65537 } from '../../../common/src/utils/mockPassportData'; import Dialog from "react-native-dialog"; import { contribute } from '../utils/contribute'; +import RegisterScreen from './RegisterScreen'; const MainScreen: React.FC = () => { const [NFCScanIsOpen, setNFCScanIsOpen] = useState(false); + const [displayOtherOptions, setDisplayOtherOptions] = useState(false); const [SettingsIsOpen, setSettingsIsOpen] = useState(false); const [DialogContributeIsOpen, setDialogContributeIsOpen] = useState(false); const [HelpIsOpen, setHelpIsOpen] = useState(false); - const [brokenCamera, setBrokenCamera] = useState(false); const [sheetIsOpen, setSheetIsOpen] = useState(false); const { @@ -42,28 +44,11 @@ const MainScreen: React.FC = () => { clearPassportDataFromStorage, clearSecretFromStorage, registerCommitment, + registerPassportData, passportData, - secret + registered } = useUserStore() - const decrementStep = () => { - if (selectedTab === "nfc") { - updateNavigationStore({ - selectedTab: "scan", - }) - } - else if (selectedTab === "app") { - updateNavigationStore({ - selectedTab: "nfc", - }) - } - else if (selectedTab === "prove") { - updateNavigationStore({ - selectedTab: "app", - }) - } - }; - const { showWarningModal, update: updateNavigationStore, @@ -82,25 +67,42 @@ const MainScreen: React.FC = () => { }) deleteMrzFields(); } - - const handleSkip = () => { - registerCommitment( - secret, - mockPassportData_sha256WithRSAEncryption_65537 - ) - update({ - passportData: mockPassportData_sha256WithRSAEncryption_65537 - }) - setStep(Steps.NFC_SCAN_COMPLETED); - deleteMrzFields(); - toast?.show("Using mock passport data!", { type: "info" }) - } - const handleHideData = () => { updateNavigationStore({ hideData: !hideData, }) } + + const handleSkip = () => { + registerPassportData( + mockPassportData_sha256WithRSAEncryption_65537 + ) + update({ + passportData: mockPassportData_sha256WithRSAEncryption_65537 + }) + setStep(Steps.NEXT_SCREEN); + deleteMrzFields(); + toast?.show("Using mock passport data!", { type: "info" }) + } + + const decrementStep = () => { + if (selectedTab === "nfc") { + setStep(Steps.MRZ_SCAN); + } + else if (selectedTab === "next") { + setStep(Steps.MRZ_SCAN_COMPLETED); + } + else if (selectedTab === "register") { + setStep(Steps.NEXT_SCREEN); + } + else if (selectedTab === "prove") { + setStep(Steps.REGISTERED); + } + else if (selectedTab === "mint") { + setStep(Steps.REGISTERED); + } + }; + const handleNFCScan = () => { if ((Platform.OS === 'ios')) { console.log('ios'); @@ -117,13 +119,19 @@ const MainScreen: React.FC = () => { setDialogContributeIsOpen(false); } - useEffect(() => { if (passportNumber?.length === 9 && (dateOfBirth?.length === 6 && dateOfExpiry?.length === 6)) { setStep(Steps.MRZ_SCAN_COMPLETED); } }, [passportNumber, dateOfBirth, dateOfExpiry]); + useEffect(() => { + if (registered) { + setStep(Steps.REGISTERED); + } + }, [registered]); + + useEffect(() => { let timeoutId: ReturnType; if (step == Steps.MRZ_SCAN) { @@ -142,7 +150,7 @@ const MainScreen: React.FC = () => { setNFCScanIsOpen(false); }, 0); } - else if (step == Steps.NFC_SCAN_COMPLETED) { + else if (step == Steps.NEXT_SCREEN) { // Set the timeout and store its ID timeoutId = setTimeout(() => { setNFCScanIsOpen(false); @@ -153,7 +161,17 @@ const MainScreen: React.FC = () => { selectedTab: "mint", }) } - if (step == Steps.NFC_SCAN_COMPLETED) { + if (step == Steps.NEXT_SCREEN) { + updateNavigationStore({ + selectedTab: "next", + }) + } + if (step == Steps.REGISTER) { + updateNavigationStore({ + selectedTab: "register", + }) + } + if (step == Steps.REGISTERED) { updateNavigationStore({ selectedTab: "app", }) @@ -172,7 +190,7 @@ const MainScreen: React.FC = () => { - + {selectedTab === "scan" ? "Scan" : (selectedTab === "app" ? "Apps" : "Prove")} @@ -187,7 +205,7 @@ const MainScreen: React.FC = () => {

Ready to scan

- {step >= Steps.NFC_SCAN_COMPLETED ? + {step >= Steps.NEXT_SCREEN ? {

Settings

 -
- - - - -
- { - brokenCamera && - -
- - { - update({ passportNumber: text.toUpperCase() }) - }} - value={passportNumber} - keyboardType="default" - /> -
-
- - { - update({ dateOfBirth: text }) - }} - value={dateOfBirth} - keyboardType={Platform.OS === "ios" ? "default" : "number-pad"} - /> -
-
- - { - update({ dateOfExpiry: text }) - }} - value={dateOfExpiry} - keyboardType={Platform.OS === "ios" ? "default" : "number-pad"} - /> -
- - } +
+ + +
-
-