github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-04-05 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

ProveScreen: Scrollable disclosures (#164)

Browse Source
This commit is contained in:
Leszek Stachowski
2025-02-19 17:07:54 +01:00
committed by GitHub
parent 0fdfef74da
commit 22ff8117a1
2 changed files with 77 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/src/components/Disclosures.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { ScrollView, XStack, YStack } from 'tamagui';
import { XStack, YStack } from 'tamagui';
import {
Country3LetterCode,
@@ -40,55 +40,53 @@ export default function Disclosures({ disclosures }: DisclosureProps) {
] as const;
return (
<ScrollView>
<YStack>
{ORDERED_KEYS.map(key => {
const isEnabled = disclosures[key];
if (!isEnabled) {
return null;
}
<YStack>
{ORDERED_KEYS.map(key => {
const isEnabled = disclosures[key];
if (!isEnabled) {
return null;
}
let text = '';
switch (key) {
case 'ofac':
text = 'I am not on the OFAC sanction list';
break;
case 'excludedCountries':
text = `I am not a citizen of the following countries: ${countriesToSentence(
disclosures.excludedCountries || [],
)}`;
break;
case 'minimumAge':
text = `Age is over ${disclosures.minimumAge}`;
break;
case 'name':
text = 'Name';
break;
case 'passport_number':
text = 'Passport Number';
break;
case 'date_of_birth':
text = 'Date of Birth';
break;
case 'gender':
text = 'Gender';
break;
case 'expiry_date':
text = 'Passport Expiry Date';
break;
case 'issuing_state':
text = 'Issuing State';
break;
case 'nationality':
text = 'Nationality';
break;
default:
return null;
}
return <DisclosureItem key={key} text={text} />;
})}
</YStack>
</ScrollView>
let text = '';
switch (key) {
case 'ofac':
text = 'I am not on the OFAC sanction list';
break;
case 'excludedCountries':
text = `I am not a citizen of the following countries: ${countriesToSentence(
disclosures.excludedCountries || [],
)}`;
break;
case 'minimumAge':
text = `Age is over ${disclosures.minimumAge}`;
break;
case 'name':
text = 'Name';
break;
case 'passport_number':
text = 'Passport Number';
break;
case 'date_of_birth':
text = 'Date of Birth';
break;
case 'gender':
text = 'Gender';
break;
case 'expiry_date':
text = 'Passport Expiry Date';
break;
case 'issuing_state':
text = 'Issuing State';
break;
case 'nationality':
text = 'Nationality';
break;
default:
return null;
}
return <DisclosureItem key={key} text={text} />;
})}
</YStack>
);
}
@@ -112,7 +110,9 @@ const DisclosureItem: React.FC<DisclosureItemProps> = ({
paddingHorizontal={10}
>
<CheckMark width={22} />
<BodyText color={slate500}>{text}</BodyText>
<BodyText textBreakStrategy="balanced" color={slate500}>
{text}
</BodyText>
</XStack>
);
};

49
app/src/screens/ProveFlow/ProveScreen.tsx
View File

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
import { Image, Text, View, YStack } from 'tamagui';
import { Image, ScrollView, Text, View, YStack } from 'tamagui';
import { SelfAppDisclosureConfig } from '../../../../common/src/utils/appType';
import { genMockPassportData } from '../../../../common/src/utils/passports/genMockPassportData';
@@ -134,6 +134,10 @@ const ProveScreen: React.FC = () => {
);
async function sendMockPayload() {
if (!__DEV__) {
return;
}
console.log('sendMockPayload, start by generating mockPassport data');
const passportData = genMockPassportData(
'sha1',
@@ -189,30 +193,31 @@ const ProveScreen: React.FC = () => {
</YStack>
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection
flexGrow={1}
justifyContent="space-between"
paddingBottom={20}
backgroundColor={white}
maxHeight={'55%'}
>
<Disclosures disclosures={disclosureOptions} />
<View>
<Caption
textAlign="center"
size="small"
marginBottom={20}
marginTop={10}
borderRadius={4}
>
Self will confirm that these details are accurate and none of your
confidential info will be revealed to {selectedApp.appName}
</Caption>
<HeldPrimaryButton
onPress={onVerify}
disabled={!selectedApp.sessionId}
>
Hold To Verify
</HeldPrimaryButton>
</View>
<ScrollView>
<Disclosures disclosures={disclosureOptions} />
<View marginTop={20}>
<Caption
textAlign="center"
size="small"
marginBottom={20}
marginTop={10}
borderRadius={4}
>
Self will confirm that these details are accurate and none of your
confidential info will be revealed to {selectedApp.appName}
</Caption>
<HeldPrimaryButton
onPress={onVerify}
disabled={!selectedApp.sessionId}
>
Hold To Verify
</HeldPrimaryButton>
</View>
</ScrollView>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
);