mirror of
https://github.com/selfxyz/self.git
synced 2026-01-22 21:17:59 -05:00
Adapt to small screens, add external links, add png on scan screen
This commit is contained in:
BIN
app/src/images/internet.png
Normal file
BIN
app/src/images/internet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
app/src/images/nfc_help.png
Normal file
BIN
app/src/images/nfc_help.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
app/src/images/scan_help.png
Normal file
BIN
app/src/images/scan_help.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
@@ -38,6 +38,11 @@ const AppScreen: React.FC<AppScreenProps> = ({ selectedApp, setSelectedApp, step
|
||||
<Text color="#3bb178" fow="bold">nationality</Text>
|
||||
</YStack>
|
||||
);
|
||||
const sepolia = () => (
|
||||
<YStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">
|
||||
<Text color="#3bb178" fow="bold">Sepolia</Text>
|
||||
</YStack>
|
||||
);
|
||||
|
||||
|
||||
|
||||
@@ -69,13 +74,13 @@ const AppScreen: React.FC<AppScreenProps> = ({ selectedApp, setSelectedApp, step
|
||||
colorOfTheText: 'black',
|
||||
selectable: true,
|
||||
icon: Flame,
|
||||
tags: [age(), nationality()]
|
||||
tags: [sepolia()]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ScrollView >
|
||||
< YStack my="$4" gap="$5" px="$5" jc="center" alignItems='center' >
|
||||
<ScrollView f={1} >
|
||||
< YStack my="$8" gap="$5" px="$5" jc="center" alignItems='center' >
|
||||
{
|
||||
cardsData.map(card => (
|
||||
<AppCard
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useState, useEffect, Profiler } from 'react';
|
||||
import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4 } from 'tamagui'
|
||||
import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3, ScrollView } from 'tamagui'
|
||||
import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ExternalLink } from '@tamagui/lucide-icons';
|
||||
import X from '../images/x.png'
|
||||
import Telegram from '../images/telegram.png'
|
||||
import Github from '../images/github.png'
|
||||
import Internet from "../images/internet.png"
|
||||
import ScanScreen from './ScanScreen';
|
||||
import ProveScreen from './ProveScreen';
|
||||
import { Steps } from '../utils/utils';
|
||||
@@ -12,7 +13,7 @@ import { App } from '../utils/AppClass';
|
||||
import { Linking, Platform, Pressable } from 'react-native';
|
||||
import { Keyboard } from 'react-native';
|
||||
import NFC_IMAGE from '../images/nfc.png'
|
||||
import { bgColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
|
||||
import { bgColor, blueColorLight, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
|
||||
import MintScreen from './MintScreen';
|
||||
import { ToastViewport } from '@tamagui/toast';
|
||||
import { ToastMessage } from '../components/ToastMessage';
|
||||
@@ -284,13 +285,63 @@ const MainScreen: React.FC<MainScreenProps> = ({
|
||||
<Sheet open={HelpIsOpen} onOpenChange={setHelpIsOpen} modal animation="medium" snapPoints={[88]}>
|
||||
<Sheet.Overlay />
|
||||
<Sheet.Frame bg={bgColor} borderRadius="$9">
|
||||
|
||||
<YStack bg={bgColor} px="$3" pb="$5" flex={1} >
|
||||
<XStack ml="$2" mt="$3" gap="$2">
|
||||
<H2 color={textColor1}>Info</H2>
|
||||
<H2 color={textColor1}>Help</H2>
|
||||
<HelpCircle color={textColor1} mt="$1" alignSelf='center' size="$2" />
|
||||
<XStack justifyContent="flex-end" f={1} mt="$2" mr="$2" gap="$5">
|
||||
<Pressable onPress={() => Linking.openURL('https://proofofpassport.com')}>
|
||||
<Image
|
||||
source={{ uri: Internet, width: 24, height: 24 }}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => Linking.openURL('https://t.me/proofofpassport')}>
|
||||
<Image
|
||||
source={{ uri: Telegram, width: 24, height: 24 }}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => Linking.openURL('https://x.com/proofofpassport')}>
|
||||
<Image
|
||||
source={{ uri: X, width: 24, height: 24 }}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => Linking.openURL('https://github.com/zk-passport/proof-of-passport')}>
|
||||
<Image
|
||||
tintColor={textColor1}
|
||||
source={{ uri: Github, width: 24, height: 24 }}
|
||||
/>
|
||||
</Pressable>
|
||||
</XStack>
|
||||
</XStack>
|
||||
<YStack flex={1} jc="space-evenly">
|
||||
<YStack flex={1} mt="$3" jc="space-evenly">
|
||||
<YStack >
|
||||
<H3 color={textColor1}>Security and Privacy</H3>
|
||||
<Text color={textColor2} ml="$2" mt="$1">Proof of Passport uses Zero-Knowledge cryptography to allow you to prove facts about yourself like humanity, nationality or age without disclosing sensitive information.</Text>
|
||||
</YStack>
|
||||
<YStack >
|
||||
<H3 color={textColor1}>About ZK Proofs</H3>
|
||||
<Text color={textColor2} ml="$2" mt="$1">Zero-knowledge proofs rely on mathematical magic tricks to show the correctness of some computation while hiding some inputs of its inputs. In our case, the proof shows the passport has not been forged, but allows you to hide sensitive data.</Text>
|
||||
</YStack>
|
||||
<YStack gap="$1">
|
||||
<H3 color={textColor1}>FAQ</H3>
|
||||
<YStack ml="$1">
|
||||
<H4 color={textColor1}>Troubleshoot NFC scanning</H4>
|
||||
<Text color={textColor2} ml="$2" >Refer to <Text onPress={() => Linking.openURL('https://zk-passport.github.io/posts/how-to-scan-your-passport-using-nfc/')} color={blueColorLight} style={{ textDecorationLine: 'underline', fontStyle: 'italic' }}>this tutorial</Text> on how to scan your passport using NFC.</Text>
|
||||
</YStack>
|
||||
<YStack ml="$1">
|
||||
<H4 color={textColor1}>My camera is down</H4>
|
||||
<Text color={textColor2} ml="$2">Go to settings and turn on the broken camera option.</Text>
|
||||
</YStack>
|
||||
<YStack ml="$1">
|
||||
<H4 color={textColor1}>My passport is not supported</H4>
|
||||
<Text color={textColor2} ml="$2">Please contact us on telegram, or if you know how to develop, you can easily <Text onPress={() => Linking.openURL('https://zk-passport.github.io/posts/how-to-contribute/')} color={blueColorLight} style={{ textDecorationLine: 'underline', fontStyle: 'italic' }}>contribute</Text> to the project by adding your region.</Text>
|
||||
|
||||
|
||||
</YStack>
|
||||
</YStack>
|
||||
|
||||
</YStack>
|
||||
{/* <YStack flex={1} jc="space-evenly">
|
||||
|
||||
<YStack >
|
||||
<H4 color={textColor1}>How do I scan my passport ?</H4>
|
||||
@@ -336,7 +387,7 @@ const MainScreen: React.FC<MainScreenProps> = ({
|
||||
</Pressable>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</YStack>
|
||||
</YStack> */}
|
||||
<Button mt="$3" bg={componentBgColor} jc="center" borderColor={borderColor} borderWidth={1.2} size="$3.5" ml="$2" alignSelf='center' w="80%" onPress={() => setHelpIsOpen(false)}>
|
||||
<Text color={textColor1} w="80%" textAlign='center' fow="bold">Close</Text>
|
||||
</Button>
|
||||
|
||||
@@ -120,8 +120,8 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
|
||||
console.log("new address settled:" + resolvedAddress);
|
||||
setAddress(resolvedAddress);
|
||||
setEns(inputValue);
|
||||
toast.show('welcome', {
|
||||
message: 'Hi ' + inputValue,
|
||||
toast.show('✨ Welcome ✨', {
|
||||
message: 'Nice to meet you ' + inputValue,
|
||||
customData: {
|
||||
type: "success",
|
||||
},
|
||||
@@ -246,15 +246,14 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
|
||||
<YStack gap="$1">
|
||||
<XStack gap="$2">
|
||||
<Text fontSize={16} fow="bold" color="#ededed">Disclose</Text>
|
||||
<Info size="$1" color={textColor2} />
|
||||
{/* <Info size="$1" color={textColor2} /> */}
|
||||
</XStack>
|
||||
<SizableText color="#a0a0a0">Select optionnal data </SizableText>
|
||||
</YStack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack gap="$2" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderBottomWidth={0} borderColor="#343434" borderBottomLeftRadius="$6" borderBottomRightRadius="$6">
|
||||
<ScrollView >
|
||||
|
||||
<ScrollView h={height < 750 ? "$6" : ""} >
|
||||
{selectedApp && Object.keys(selectedApp.disclosure).map((key) => {
|
||||
const key_ = key as string;
|
||||
const indexes = attributeToPosition[key_];
|
||||
@@ -263,7 +262,7 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
|
||||
const mrzAttributeFormatted = mrzAttribute;
|
||||
|
||||
return (
|
||||
<XStack key={key} mx="$2" gap="$4" alignItems='center' >
|
||||
<XStack key={key} mx="$2" gap="$3" alignItems='center' >
|
||||
<XStack p="$2" onPress={() => handleDisclosureChange(key_)} >
|
||||
<Checkbox
|
||||
bg={componentBgColor}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React from 'react';
|
||||
import { YStack, Text, XStack, Button } from 'tamagui';
|
||||
import { YStack, Text, XStack, Button, Image, ScrollView } from 'tamagui';
|
||||
import { Steps } from '../utils/utils';
|
||||
import { Camera, ExternalLink, Nfc } from '@tamagui/lucide-icons';
|
||||
import { Camera, ExternalLink, Nfc, X } from '@tamagui/lucide-icons';
|
||||
import { blueColorDark, blueColorLight, borderColor, componentBgColor2, greenColorDark, greenColorLight, redColorDark, redColorLight, textColor1, textColor2 } from '../utils/colors';
|
||||
import { useToastController } from '@tamagui/toast'
|
||||
import NFCHelp from '../images/nfc_help.png'
|
||||
import SCANHelp from '../images/scan_help.png'
|
||||
import { Linking } from 'react-native';
|
||||
|
||||
interface ScanScreenProps {
|
||||
onStartCameraScan: () => void;
|
||||
@@ -15,92 +18,110 @@ interface ScanScreenProps {
|
||||
const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCScan, step }) => {
|
||||
const toast = useToastController();
|
||||
return (
|
||||
<YStack f={1} p="$5" gap="$5" px="$5" justifyContent='center'>
|
||||
<ScrollView f={1}>
|
||||
<YStack mt="$4" mb="$6" f={1} p="$5" gap="$5" px="$5" justifyContent='center'>
|
||||
|
||||
|
||||
<YStack bc="#1c1c1c" borderWidth={1.2} borderColor="#343434" borderRadius="$6">
|
||||
<YStack p="$3">
|
||||
<XStack gap="$4" ai="center">
|
||||
<XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
|
||||
<Camera color="#a0a0a0" />
|
||||
</XStack>
|
||||
<YStack gap="$1">
|
||||
<Text fontSize={16} fow="bold" color="#ededed">Step 1</Text>
|
||||
<Text color="#a0a0a0">Scan you passport </Text>
|
||||
</YStack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack gap="$2" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderColor="#343434">
|
||||
<Text color="#7e7e7e">Use the camera to scan main page of your passport.</Text>
|
||||
<Text color="#7e7e7e">No personnal data will be stored or shared with external apps.</Text>
|
||||
</YStack>
|
||||
<YStack p="$2">
|
||||
<XStack gap="$4" ai="center">
|
||||
{step >= Steps.MRZ_SCAN_COMPLETED ? (
|
||||
<XStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">
|
||||
<Text color="#3bb178" fow="bold">Done</Text>
|
||||
<YStack bc="#1c1c1c" borderWidth={1.2} borderColor="#343434" borderRadius="$6">
|
||||
<YStack p="$3">
|
||||
<XStack gap="$4" ai="center">
|
||||
<XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
|
||||
<Camera color="#a0a0a0" />
|
||||
</XStack>
|
||||
) : (
|
||||
<XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
|
||||
<Text color={blueColorLight} fow="bold">To-do</Text>
|
||||
</XStack>
|
||||
)}
|
||||
<XStack f={1} />
|
||||
<Button h="$3" onPress={onStartCameraScan} p="$2" borderRadius="$4" borderWidth={1} backgroundColor="#282828" borderColor="#343434">
|
||||
<XStack gap="$2">
|
||||
<Text color="#ededed" fontSize="$5" >Open camera</Text>
|
||||
<ExternalLink size="$1" color="#ededed" />
|
||||
</XStack>
|
||||
</Button>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</YStack >
|
||||
|
||||
<YStack bc="#1c1c1c" borderWidth={1.2} borderColor="#343434" borderRadius="$6">
|
||||
<YStack p="$3">
|
||||
<XStack gap="$4" ai="center">
|
||||
<XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
|
||||
<Nfc color="#a0a0a0" />
|
||||
</XStack>
|
||||
<YStack gap="$1">
|
||||
<Text fontSize={16} fow="bold" color="#ededed">Step 2</Text>
|
||||
<Text color="#a0a0a0">Read the NFC chip </Text>
|
||||
</YStack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack gap="$2" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderColor="#343434">
|
||||
<Text color="#7e7e7e">Hold your passport against your device to read the biometric chip.</Text>
|
||||
<Text color="#7e7e7e">No personnal data will be stored or shared with external apps.</Text>
|
||||
</YStack>
|
||||
<YStack p="$2">
|
||||
<XStack gap="$4" ai="center">
|
||||
{step < Steps.MRZ_SCAN_COMPLETED ? (
|
||||
<YStack ml="$2" p="$2" px="$3" bc="#282828" borderRadius="$10">
|
||||
<Text color="#a0a0a0" fontWeight="bold">To-do</Text>
|
||||
<YStack gap="$1">
|
||||
<Text fontSize={16} fow="bold" color="#ededed">Step 1</Text>
|
||||
<Text color="#a0a0a0">Scan you passport </Text>
|
||||
</YStack>
|
||||
) : step < Steps.NFC_SCAN_COMPLETED ? (
|
||||
<XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
|
||||
<Text color={blueColorLight} fow="bold">To-do</Text>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack gap="$2" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderColor="#343434">
|
||||
<Image borderRadius="$5"
|
||||
w="full"
|
||||
h="$13"
|
||||
source={{ uri: SCANHelp }}
|
||||
/>
|
||||
<Text mt="$1" color={textColor1}>Use the camera to scan main page of your passport.</Text>
|
||||
<Text fontSize="$2" style={{ fontStyle: 'italic' }} color={textColor2}>No personnal data will be stored or shared with external apps.</Text>
|
||||
|
||||
</YStack>
|
||||
<YStack p="$2">
|
||||
<XStack gap="$4" ai="center">
|
||||
{step >= Steps.MRZ_SCAN_COMPLETED ? (
|
||||
<XStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">
|
||||
<Text color="#3bb178" fow="bold">Done</Text>
|
||||
</XStack>
|
||||
) : (
|
||||
<XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
|
||||
<Text color={blueColorLight} fow="bold">To-do</Text>
|
||||
</XStack>
|
||||
)}
|
||||
<XStack f={1} />
|
||||
<Button h="$3" onPress={onStartCameraScan} p="$2" borderRadius="$4" borderWidth={1} backgroundColor="#282828" borderColor="#343434">
|
||||
<XStack gap="$2">
|
||||
<Text color="#ededed" fontSize="$5" >Open camera</Text>
|
||||
<ExternalLink size="$1" color="#ededed" />
|
||||
</XStack>
|
||||
</Button>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</YStack >
|
||||
|
||||
<YStack bc="#1c1c1c" borderWidth={1.2} borderColor="#343434" borderRadius="$6">
|
||||
<YStack p="$3">
|
||||
<XStack gap="$4" ai="center">
|
||||
<XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
|
||||
<Nfc color="#a0a0a0" />
|
||||
</XStack>
|
||||
) : (
|
||||
<XStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">
|
||||
<Text color="#3bb178" fow="bold">Done</Text>
|
||||
</XStack>
|
||||
)}
|
||||
<XStack f={1} />
|
||||
<Button h="$3" onPress={handleNFCScan} p="$2" borderRadius="$4" borderWidth={1} backgroundColor="#282828" borderColor="#343434">
|
||||
<XStack gap="$2">
|
||||
<Text color={step < Steps.MRZ_SCAN_COMPLETED ? "#a0a0a0" : "#ededed"} fontSize="$5" >Scan with NFC</Text>
|
||||
<ExternalLink size="$1" color={step < Steps.MRZ_SCAN_COMPLETED ? "#a0a0a0" : "#ededed"} />
|
||||
</XStack>
|
||||
</Button>
|
||||
<YStack gap="$1">
|
||||
<Text fontSize={16} fow="bold" color="#ededed">Step 2</Text>
|
||||
<Text color="#a0a0a0">Read the NFC chip </Text>
|
||||
</YStack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<XStack gap="$2.5" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderColor="#343434">
|
||||
<Image borderRadius="$5"
|
||||
w="$12"
|
||||
h="$14"
|
||||
source={{ uri: NFCHelp }}
|
||||
/>
|
||||
<YStack w="$13" jc="space-between">
|
||||
<Text color={textColor1}>Hold your passport against your device to read the biometric chip.</Text>
|
||||
<Text color={textColor1}>Follow <Text onPress={() => Linking.openURL('https://zk-passport.github.io/posts/how-to-scan-your-passport-using-nfc/')} color={blueColorLight} style={{ textDecorationLine: 'underline', fontStyle: 'italic' }}>this guide</Text> if you have trouble reading your passport.</Text>
|
||||
<Text fontSize="$2" color={textColor2} style={{ fontStyle: 'italic' }}>No personnal data will be stored or shared with external apps.</Text>
|
||||
|
||||
|
||||
</YStack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</YStack >
|
||||
<YStack p="$2">
|
||||
<XStack gap="$4" ai="center">
|
||||
{step < Steps.MRZ_SCAN_COMPLETED ? (
|
||||
<YStack ml="$2" p="$2" px="$3" bc="#282828" borderRadius="$10">
|
||||
<Text color="#a0a0a0" fontWeight="bold">To-do</Text>
|
||||
</YStack>
|
||||
) : step < Steps.NFC_SCAN_COMPLETED ? (
|
||||
<XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
|
||||
<Text color={blueColorLight} fow="bold">To-do</Text>
|
||||
</XStack>
|
||||
) : (
|
||||
<XStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">
|
||||
<Text color="#3bb178" fow="bold">Done</Text>
|
||||
</XStack>
|
||||
)}
|
||||
<XStack f={1} />
|
||||
<Button h="$3" onPress={handleNFCScan} p="$2" borderRadius="$4" borderWidth={1} backgroundColor="#282828" borderColor="#343434">
|
||||
<XStack gap="$2">
|
||||
<Text color={step < Steps.MRZ_SCAN_COMPLETED ? "#a0a0a0" : "#ededed"} fontSize="$5" >Scan with NFC</Text>
|
||||
<ExternalLink size="$1" color={step < Steps.MRZ_SCAN_COMPLETED ? "#a0a0a0" : "#ededed"} />
|
||||
</XStack>
|
||||
</Button>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</YStack >
|
||||
|
||||
|
||||
|
||||
{/*
|
||||
|
||||
{/*
|
||||
<XStack
|
||||
jc="center"
|
||||
borderColor="#a0a0a0"
|
||||
@@ -114,7 +135,7 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCSca
|
||||
</XStack>
|
||||
<Text color="#a0a0a0" fontSize="$6" textAlign='center' mt="$2" >Scan the machine readable zone on the main page of your passport</Text> */}
|
||||
|
||||
{/* <XStack
|
||||
{/* <XStack
|
||||
mt="$10"
|
||||
jc="center"
|
||||
borderColor="#a0a0a0"
|
||||
@@ -127,7 +148,7 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCSca
|
||||
<Text color="#a0a0a0" fontSize="$4" y={0} x={0} alignSelf='center'>2</Text>
|
||||
</XStack>
|
||||
<Text color="#a0a0a0" fontSize="$6" textAlign='center' mt="$2" >Hold your passport against your device to read the biometric chip</Text> */}
|
||||
{/*
|
||||
{/*
|
||||
<YStack ai="center">
|
||||
{
|
||||
step < Steps.NFC_SCAN_COMPLETED
|
||||
@@ -155,7 +176,8 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCSca
|
||||
<XStack />
|
||||
}
|
||||
</YStack> */}
|
||||
</YStack >
|
||||
</YStack >
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user