Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add date picker #149

Merged
merged 1 commit into from
Jul 22, 2024
Merged

add date picker #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"react": "18.2.0",
"react-native": "0.72.3",
"react-native-canvas": "^0.1.39",
"react-native-date-picker": "^5.0.4",
"react-native-dialog": "^9.3.0",
"react-native-fs": "^2.20.0",
"react-native-get-random-values": "^1.11.0",
Expand Down Expand Up @@ -76,4 +77,4 @@
"engines": {
"node": ">=16"
}
}
}
113 changes: 103 additions & 10 deletions app/src/screens/MainScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Dialog from "react-native-dialog";
import { ethers } from 'ethers';
// import ressources
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, Eraser } from '@tamagui/lucide-icons';
import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, CalendarSearch } from '@tamagui/lucide-icons';
import X from '../images/x.png'
import Telegram from '../images/telegram.png'
import Github from '../images/github.png'
Expand All @@ -17,7 +17,7 @@ import { ToastMessage } from '../components/ToastMessage';
import useUserStore from '../stores/userStore';
import useNavigationStore from '../stores/navigationStore';
// import utils
import { bgColor, blueColorLight, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
import { bgColor, blueColorLight, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors';
import { ModalProofSteps, Steps } from '../utils/utils';
import { scan } from '../utils/nfcScanner';
import { CircuitName, fetchZkey } from '../utils/zkeyDownload';
Expand All @@ -40,6 +40,7 @@ import AppScreen from './AppScreen';
import { RPC_URL, SignatureAlgorithm } from '../../../common/src/constants/constants';
import { mock_csca_sha256_rsa_4096, mock_dsc_sha256_rsa_4096 } from '../../../common/src/constants/mockCertificates';

import DatePicker from 'react-native-date-picker'

const MainScreen: React.FC = () => {
const [NFCScanIsOpen, setNFCScanIsOpen] = useState(false);
Expand All @@ -50,6 +51,10 @@ const MainScreen: React.FC = () => {
const [HelpIsOpen, setHelpIsOpen] = useState(false);
const [sheetIsOpen, setSheetIsOpen] = useState(false);
const [modalProofStep, setModalProofStep] = useState(0);
const [dateOfBirthDatePicker, setDateOfBirthDatePicker] = useState(new Date())
const [dateOfExpiryDatePicker, setDateOfExpiryDatePicker] = useState(new Date())
const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false)
const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false)

const {
passportNumber,
Expand Down Expand Up @@ -120,7 +125,6 @@ const MainScreen: React.FC = () => {
useUserStore.getState().setDscSecret(secret);
}


const inputs_csca = getCSCAInputs(
secret,
dscCert,
Expand All @@ -136,6 +140,10 @@ const MainScreen: React.FC = () => {
toast.show("Using mock passport data!", { type: "info" })
}

const castDate = (date: Date) => {
return (date.toISOString().slice(2, 4) + date.toISOString().slice(5, 7) + date.toISOString().slice(8, 10)).toString();
}

const decrementStep = () => {
if (selectedTab === "nfc") {
setStep(Steps.MRZ_SCAN);
Expand Down Expand Up @@ -505,7 +513,7 @@ const MainScreen: React.FC = () => {
<Sheet.Overlay />
<Sheet.Frame bg={bgColor} borderRadius="$9" pt="$2">
<YStack p="$4" f={1} gap="$3">
<Text fontSize="$6" mb="$4" color={textColor1}>Enter your the information manually</Text>
<Text fontSize="$6" mb="$4" color={textColor1}>Please provide the following information</Text>
<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Passport Number
Expand All @@ -524,11 +532,37 @@ const MainScreen: React.FC = () => {
keyboardType="default"
/>
</Fieldset>


<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Date of birth (yymmdd)
Date of birth
</Text>
<Input
<Text color={textColor1}>
{dateOfBirthDatePicker.toISOString().slice(0, 10)}
</Text>
<Button bg="white" onPress={() => setDateOfBirthDatePickerIsOpen(true)}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}>
<CalendarSearch />
</Button>
<DatePicker
modal
mode='date'
open={dateOfBirthDatePickerIsOpen}
date={dateOfBirthDatePicker}
onConfirm={(date) => {
setDateOfBirthDatePickerIsOpen(false)
setDateOfBirthDatePicker(date)
update({ dateOfBirth: castDate(date) })
}}
onCancel={() => {
setDateOfBirthDatePickerIsOpen(false)
}}
/>
{/* <Input
bg={componentBgColor}
color={textColor1}
h="$3.5"
Expand All @@ -540,13 +574,37 @@ const MainScreen: React.FC = () => {
}}
value={dateOfBirth}
keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
/>
/> */}
</Fieldset>
<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Date of expiry (yymmdd)
Date of expiry
</Text>
<Input
<Text color={textColor1}>
{dateOfExpiryDatePicker.toISOString().slice(0, 10)}
</Text>
<Button bg="white" onPress={() => setDateOfExpiryDatePickerIsOpen(true)}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}>
<CalendarSearch />
</Button>
<DatePicker
modal
mode='date'
open={dateOfExpiryDatePickerIsOpen}
date={dateOfExpiryDatePicker}
onConfirm={(date) => {
setDateOfExpiryDatePickerIsOpen(false)
setDateOfExpiryDatePicker(date)
update({ dateOfExpiry: castDate(date) })
}}
onCancel={() => {
setDateOfExpiryDatePickerIsOpen(false)
}}
/>
{/* <Input
bg={componentBgColor}
color={textColor1}
h="$3.5"
Expand All @@ -558,8 +616,43 @@ const MainScreen: React.FC = () => {
}}
value={dateOfExpiry}
keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
/>
/> */}
</Fieldset>
<XStack f={1} />
<YStack mb="$6" gap="$2">
<Button
bg={textColor1}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}
onPress={() => {
setSheetIsOpen(false)
setStep(Steps.MRZ_SCAN_COMPLETED)
}}
>
<Text
fontSize="$6"
color={bgColor}
>Submit</Text>
</Button>
<Button
bg="gray"
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}
onPress={() => {
setSheetIsOpen(false)
}}
>
<Text
fontSize="$6"
color={bgColor}
>Cancel</Text>
</Button>
</YStack>

</YStack>
</Sheet.Frame>
</Sheet>
Expand Down
Loading