github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-01-24 14:08:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

adapt UI to IOS

Browse Source
This commit is contained in:
Rémi Colin
2024-02-08 10:33:35 +01:00
parent 84674192eb
commit 348485047e
7 changed files with 54 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/App.tsx
View File

@@ -1,13 +1,20 @@
import React, { useEffect, useState } from 'react';
import {
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
@@ -531,7 +538,7 @@ function App(): JSX.Element {
};
return (
<YStack h="100%" w="100%">
<YStack f={1} bg="white" h="100%" w="100%">
<YStack h="100%" w="100%">
<MainScreen
onStartCameraScan={startCameraScan}

2
app/src/components/AppCard.tsx
View File

@@ -45,7 +45,7 @@ const AppCard: React.FC<AppCardProps> = ({
<Card.Background
animation="quick"
borderColor={(selected) ? "#E0E0E0" : "transparent"}
borderWidth={(selected) ? 4 : 0}
borderWidth={(selected) ? 3 : 0}
borderRadius="$10"
bg="#F0F0F0"

2
app/src/screens/AppScreen.tsx
View File

@@ -40,7 +40,7 @@ const AppScreen: React.FC<AppScreenProps> = ({ selectedApp, setSelectedApp }) =>
];
return (
<YStack gap="$5" px="$5" pt="$12">
<YStack flex={1} gap="$5" px="$5" jc="center" alignItems='center' >
{cardsData.map(card => (
<AppCard

5
app/src/screens/MainScreen.tsx
View File

@@ -1,12 +1,13 @@
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, VenetianMask } from '@tamagui/lucide-icons';
import { Scan, UserCheck, HelpCircle, XCircle, IterationCw, LayoutGrid, Sparkles, VenetianMask } 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';
import { Platform } from 'react-native';
interface MainScreenProps {
@@ -108,7 +109,7 @@ const MainScreen: React.FC<MainScreenProps> = ({
}, []);
return (
<YStack f={1} bc="white">
<YStack f={1} bc="white" mt={Platform.OS === 'ios' ? "$8" : "$0"} mb={Platform.OS === 'ios' ? "$3" : "$0"}>
<YStack >
<XStack jc="space-between" ai="center" p="$2">

3
app/src/screens/ProveScreen.tsx
View File

@@ -110,13 +110,14 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
)}
</Button>
<Text fontSize={10} color={generatingProof ? "gray" : "white"} alignSelf='center'>This operation can take about 2 mn</Text>
<Text fontSize={10} color={generatingProof ? "gray" : "white"} alignSelf='center'>This operation can take up to 2 mn</Text>
<Text fontSize={9} color={generatingProof ? "gray" : "white"} pb="$2" alignSelf='center'>The application may freeze during this time (hard work)</Text>
</YStack>
) : (
<YStack flex={1} m="$2" justifyContent='center' alignItems='center' gap="$5">
<XStack flex={1} />
<ProofGrid proof={proof} />
<YStack>

96
app/src/screens/ScanScreen.tsx
View File

@@ -10,65 +10,45 @@ interface ScanScreenProps {
const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, nfcScan, step }) => {
return (
<YStack f={1} p="$5" gap="$1" px="$5" pt="$14">
<ZStack alignSelf='center' maxWidth={50} maxHeight={50} width={50} flex={0} >
<Circle
alignSelf='center'
h={22}
w={22}
borderWidth={1.6}
p={0}
/>
<Text
alignSelf='center'
h={22}
w={22}
y={1}
x={7}
color="black"
fow="bold"
>1</Text>
</ZStack>
<Text textAlign='center' mt="$5" fow={step === Steps.MRZ_SCAN ? "bold" : "normal"} >Scan the machine readable zone on the main page of your passport</Text>
<ZStack alignSelf='center' mt="$5" maxWidth={50} maxHeight={50} width={50} flex={0} >
<Circle
alignSelf='center'
h={22}
w={22}
borderWidth={1.6}
p={0}
/>
<Text
alignSelf='center'
h={22}
w={22}
y={1}
x={7}
color="black"
fow="bold"
>2</Text>
</ZStack>
<Text textAlign='center' mt="$5" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING) ? "bold" : "normal"}>Hold your passport against your device to read the biometric chip</Text>
<YStack f={1} p="$5" gap="$1" px="$5" justifyContent='center'>
<ZStack alignSelf='center' mt="$5" maxWidth={50} maxHeight={50} width={50} flex={0} >
<Circle
alignSelf='center'
h={22}
w={22}
borderWidth={1.6}
p={0}
/>
<Text
alignSelf='center'
h={22}
w={22}
y={1}
x={7}
color="black"
fow="bold"
>3</Text>
</ZStack>
<Text textAlign='center' mt="$5" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold" : "normal"}>Select App</Text>
<XStack
jc="center"
borderColor="black"
borderWidth={1.5}
borderRadius={10}
f={0}
w="$1"
alignSelf='center'>
<Text fow="bold">1</Text>
</XStack>
<Text textAlign='center' mt="$3" fow={step === Steps.MRZ_SCAN ? "bold" : "normal"} >Scan the machine readable zone on the main page of your passport</Text>
<XStack
mt="$6"
jc="center"
borderColor="black"
borderWidth={1.5}
borderRadius={10}
f={0}
w="$1"
alignSelf='center'>
<Text fow="bold">2</Text>
</XStack>
<Text textAlign='center' mt="$3" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING) ? "bold" : "normal"}>Hold your passport against your device to read the biometric chip</Text>
<XStack
mt="$6"
jc="center"
borderColor="black"
borderWidth={1.5}
borderRadius={10}
f={0}
w="$1"
alignSelf='center'>
<Text fow="bold">3</Text>
</XStack>
<Text textAlign='center' mt="$3" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold" : "normal"}>Select App</Text>
<YStack ai="center">
{

2
app/src/utils/AppClass.ts
View File

@@ -19,5 +19,5 @@ export class App {
}
export const gitcoin = new App("gitcoin", "Gitcoin", {}, "Add to Gitcoin passport", "Gitcoin passport doesn't require to disclosure any data.");
export const soulbond = new App("soulbond", "Soulbond token", { nationality: false, expiry_date: false }, "Mint Soulbond token", "Disclosure the information you want and mint your SBT:");
export const soulbond = new App("soulbond", "Soulbond token", { nationality: false, expiry_date: false }, "Mint Soulbond token", "Disclosure the information you want and mint your SBT.");
export const zuzalu = new App("zuzalu", "Zupass", { date_of_birth: false }, "Add to Zupass", "Zupass requires the following information:");