status-im/keycard-exit
2
0
Fork 0
mirror of https://github.com/status-im/keycard-exit.git synced 2025-01-21 00:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

start ui redesign

Browse Source
This commit is contained in:
Michele Balistreri 2024-10-08 12:36:29 +02:00
parent 6cd0743fe0
commit 3ef89fb730
No known key found for this signature in database
GPG Key ID: E9567DA33A4F791A
11 changed files with 154 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Main.tsx
View File

@ -14,6 +14,7 @@ import Keycard from "react-native-status-keycard";
import Dialpad from './components/Dialpad';
import { sha256 } from '@noble/hashes/sha256';
import { bytesToHex } from '@noble/hashes/utils';
import Styles from './Styles';
enum Step {
Discovery,
@ -277,7 +278,7 @@ const Main = () => {
}
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={Styles.container}>
{step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard} onFactoryResetFunc={startFactoryReset}></DiscoveryScreen>}
{step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
{step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
@ -289,13 +290,5 @@ const Main = () => {
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#222222',
width: '100%',
height: '100%'
},
});
export default Main;

56
src/NFCModal.tsx
View File

@ -1,8 +1,9 @@
import React, {FC} from "react";
import {Platform, StyleSheet, Text, View } from "react-native";
import {Platform, Text, View } from "react-native";
import Modal from "react-native-modal/dist/modal";
import Icon from 'react-native-vector-icons/Feather';
import Button from "./components/Button";
import Styles from "./Styles";
type NFCModalProps = {
isVisible: boolean;
@ -13,55 +14,16 @@ const NFCModal: FC<NFCModalProps> = props => {
const {isVisible, onChangeFunc} = props;
return (
<Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
<View style={modalStyle.container}>
<Text style={modalStyle.header}>Ready to Scan</Text>
<View style={modalStyle.iconContainer}>
<Icon name="smartphone" size={40} style={modalStyle.icon}/>
<Modal isVisible={(Platform.OS === 'android') && isVisible} style={Styles.modalContainer}>
<View style={Styles.modalContent}>
<Text style={Styles.modalHeader}>Ready to Scan</Text>
<View style={Styles.modalIconContainer}>
<Icon name="smartphone" size={40} style={Styles.modalIcon}/>
</View>
<Text style={modalStyle.prompt}>Tap your Keycard</Text>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc()} btnJustifyContent='center'></Button>
<Text style={Styles.modalPrompt}>Tap your Keycard</Text>
<Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
</View>
</Modal>
)};
const modalStyle = StyleSheet.create({
modalContainer: {
justifyContent: 'flex-end',
margin: 0,
},
container: {
height: 350,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderColor: 'rgba(0, 0, 0, 0.1)',
backgroundColor: '#222222'
},
header: {
paddingTop: '7%',
fontSize: 22,
fontFamily: 'Inter'
},
prompt: {
paddingTop: '10%',
fontSize: 16,
fontFamily: 'Inter'
},
iconContainer: {
width: 80,
height: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#0e4e0b',
borderWidth: 3,
borderRadius: 80,
marginTop: '7%',
},
icon: {
color: '#0e4e0b'
}
});
export default NFCModal;

2
src/ReceiveModal.tsx
View File

@ -17,7 +17,7 @@ const ReceiveModal: FC<ReceiveModalProps> = props => {
<Modal isVisible={isVisible} style={modalStyle.modalContainer}>
<View style={modalStyle.container}>
<QRCode value={address} />
<Button label="Cancel" disabled={false} btnColor="black" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc()} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
</View>
</Modal>
)};

101
src/Styles.tsx Normal file
View File

@ -0,0 +1,101 @@
import { StyleSheet } from "react-native";
const Styles = StyleSheet.create({
container: {
backgroundColor: 'black',
width: '100%',
height: '100%'
},
textContainer: {
width: '100%',
paddingTop: 80,
},
heading: {
color: 'white',
textAlign: 'center',
fontSize: 32,
fontFamily: 'Inter',
lineHeight: 40,
},
subtitle: {
textAlign: 'center',
paddingTop: 20,
color: 'white',
fontSize: 18,
lineHeight: 24,
width: '60%',
marginLeft: '20%',
marginRight: '20%'
},
multipassImg: {
width: '80%',
height: '38%',
resizeMode: 'contain',
marginLeft: '10%',
marginRight: '10%',
marginTop: 80
},
footer: {
width: '100%',
position: 'absolute',
bottom: 60,
justifyContent: 'center'
},
sublinkContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 20
},
sublinkText: {
color: 'white',
fontSize: 12,
fontFamily: 'Inter'
},
sublinkAction: {
color: 'white',
fontSize: 12,
fontFamily: 'Inter',
textDecorationLine: 'underline'
},
modalContainer: {
justifyContent: 'flex-end',
margin: 0,
},
modalContent: {
height: 350,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderColor: 'rgba(0, 0, 0, 0.1)',
backgroundColor: '#470644'
},
modalHeader: {
paddingTop: '7%',
fontSize: 20,
fontFamily: 'Inter'
},
modalPrompt: {
paddingTop: '10%',
fontSize: 16,
fontFamily: 'Inter',
paddingBottom: 30
},
modalIconContainer: {
width: 80,
height: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#F29AE9',
borderWidth: 3,
borderRadius: 80,
marginTop: '7%',
},
modalIcon: {
color: '#F29AE9'
}
});
export default Styles

26
src/components/Button.tsx
View File

@ -4,22 +4,16 @@ import { DimensionValue, StyleSheet, Text, TouchableOpacity, View } from "react-
type ButtonProps = {
label: string;
disabled: boolean;
btnColor: string;
btnWidth: string;
btnFontSize?: number;
btnBorderColor?: string;
btnBorderWidth?: number;
btnJustifyContent: string;
onChangeFunc: () => void;
};
const Button: FC<ButtonProps> = props => {
const {label, disabled, btnColor, btnWidth, btnJustifyContent, btnFontSize, btnBorderWidth, btnBorderColor, onChangeFunc} = props;
const {label, disabled, onChangeFunc} = props;
return (
<View style={[buttonStyle.textBtnContainer, {width: btnWidth as DimensionValue, justifyContent: btnJustifyContent as any}]}>
<View style={buttonStyle.textBtnContainer}>
<TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
<Text style={[buttonStyle.title, {color: btnColor, borderBottomColor: btnBorderColor || 'none', borderBottomWidth: btnBorderWidth || 0, fontSize: btnFontSize}]}>{label}</Text>
<Text style={buttonStyle.title}>{label}</Text>
</TouchableOpacity>
</View>
)};
@ -28,16 +22,20 @@ const buttonStyle = StyleSheet.create({
textBtnContainer: {
flexDirection: 'row',
textAlign: 'center',
paddingTop: 25,
paddingBottom: 15,
justifyContent: 'flex-start',
justifyContent: 'center',
backgroundColor: 'white',
width: '90%',
marginLeft: '5%',
marginRight: '5%',
paddingTop: 15,
paddingBottom: 15
},
button: {
},
title: {
color: "white",
textTransform: 'uppercase',
color: "black",
fontFamily: 'Inter',
fontSize: 14
},
});

4
src/components/Dialpad.tsx
View File

@ -51,8 +51,8 @@ const Dialpad: FC<DialpadProps> = props => {
<DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
</View>
<View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='flex-start'></Button>
<Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='flex-end'></Button>
<Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
<Button label="Next" disabled={false} onChangeFunc={onNext}></Button>
</View>
</SafeAreaView>
)};

44
src/components/steps/DiscoveryScreen.tsx
View File

@ -1,6 +1,7 @@
import {FC } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Image, Linking, Text, TouchableOpacity, View } from "react-native";
import Button from "../Button";
import Styles from "../../Styles";
type DiscoveryScreenProps = {
onPressFunc: () => void;
@ -11,39 +12,24 @@ const DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
const {onPressFunc, onFactoryResetFunc} = props;
return (
<View style={styles.container}>
<View style={styles.headingContainer}>
<Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
<View style={Styles.container}>
<View style={Styles.textContainer}>
<Text style={Styles.heading}>Welcome, Operator!</Text>
<Text style={Styles.subtitle}>Let's start by connecting your Multipass</Text>
</View>
<View style={styles.btnContainer}>
<Button label="Connect" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
<Button label="Factory reset" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onFactoryResetFunc} btnJustifyContent='center'></Button>
<Image style={Styles.multipassImg} source={require('../../images/multipass.png')} />
<View style={Styles.footer}>
<Button label="Connect" disabled={false} onChangeFunc={onPressFunc}></Button>
<View style={Styles.sublinkContainer}>
<Text style={Styles.sublinkText}>Don’t have Multipass? Find out how to get one </Text>
<TouchableOpacity onPress={() => Linking.openURL('https://keycard.tech')}>
<Text style={Styles.sublinkAction}>here</Text>
</TouchableOpacity>
</View>
</View>
<View>
</View>
</View>
)};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%'
},
headingContainer: {
width: '100%',
paddingLeft: '5.5%',
paddingRight: '5.5%',
paddingTop: '50%',
},
heading: {
color: 'white',
textAlign: 'center',
fontSize: 18,
fontFamily: 'Inter'
},
btnContainer: {
paddingTop: '7%'
}
});
export default DiscoveryScreen;

4
src/components/steps/FactoryResetScreen.tsx
View File

@ -16,8 +16,8 @@ const FactoryResetScreen: FC<FactoryResetScreenProps> = props => {
<View>
<Text style={styles.heading}>Factory reset</Text>
<Text style={styles.prompt}>This will remove the keys from your card. Are you sure?</Text>
<Button label="Next" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Button label="Next" disabled={false} onChangeFunc={onPressFunc}></Button>
<Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
</View>
</View>
)};

6
src/components/steps/HomeScreen.tsx
View File

@ -91,9 +91,9 @@ const HomeScreen: FC<HomeScreenProps> = props => {
return <View style={styles.container}>
{step == HomeSteps.Home &&
<View>
<Button label="Scan" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ScanCode)} btnJustifyContent='center'></Button>
<Button label="Receive" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setReceiveVisible(true)} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Button label="Scan" disabled={false} onChangeFunc={() => setStep(HomeSteps.ScanCode)}></Button>
<Button label="Receive" disabled={false} onChangeFunc={() => setReceiveVisible(true)}></Button>
<Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
<ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={() => {setReceiveVisible(false)} } />
</View>
}

14
src/components/steps/MnemonicScreen.tsx
View File

@ -66,9 +66,9 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
{ step == LoadMnemonicSteps.Home &&
<View style={styles.container}>
<Text style={styles.heading}> Load card</Text>
<Button label="Import using seed phrase" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} btnJustifyContent='center'></Button>
<Button label="Create a new wallet" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={generateMnemonic} btnJustifyContent='center'></Button>
<Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Button label="Import using seed phrase" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)}></Button>
<Button label="Create a new wallet" disabled={false} onChangeFunc={generateMnemonic}></Button>
<Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
</View>
}
{ step == LoadMnemonicSteps.InsertMnemonic &&
@ -78,8 +78,8 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
<TextInput editable multiline onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={styles.mnemonic} placeholder="Type your passphrase"/>
</View>
<View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => setStep(LoadMnemonicSteps.Home)} btnJustifyContent='flex-start'></Button>
<Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => updateMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
<Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
<Button label="Next" disabled={false} onChangeFunc={() => updateMnemonic(mnemonic)}></Button>
</View>
<Text style={styles.errorMessage}>{errMessage}</Text>
</View>
@ -87,8 +87,8 @@ const MnemonicScreen: FC<MnemonicScreenProps> = props => {
{ step == LoadMnemonicSteps.CreateMnemonic &&
<View style={styles.container}>
<Text> {mnemonic}</Text>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => setStep(LoadMnemonicSteps.Home)} btnJustifyContent='flex-start'></Button>
<Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => submitMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
<Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
<Button label="Next" disabled={false} onChangeFunc={() => submitMnemonic(mnemonic)}></Button>
</View>
}
{ step == LoadMnemonicSteps.InsertPin && <Dialpad pinRetryCounter={pinRetryCounter} prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}

BIN
src/images/multipass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB