github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-09 05:27:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

clean up UI

Browse Source
This commit is contained in:
srikanth716
2022-12-20 09:31:07 +05:30
parent cecdb5ec5f
commit 8ce62c57f4
13 changed files with 252 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Message.tsx
View File

@@ -49,7 +49,7 @@ export const Message: React.FC<MessageProps> = (props) => {
const Progress: React.FC<Pick<MessageProps, 'progress'>> = (props) => {
return typeof props.progress === 'boolean' ? (
props.progress && (
<LinearProgress variant="indeterminate" color={Colors.Orange} />
<LinearProgress variant="indeterminate" color={Theme.Colors.Icon} />
)
) : (
<LinearProgress variant="determinate" value={props.progress} />

79
components/VcDetails.tsx
View File

@@ -255,11 +255,13 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
</Row>
<VcItemTags tag={props.vc?.tag} />
</ImageBackground>
{props.vc?.reason?.length > 0 && (
<Text margin="24 24 16 24" weight="semibold">
{t('reasonForSharing')}
</Text>
)}
{props.vc?.reason?.map((reason, index) => (
<TextItem
key={index}
@@ -272,33 +274,58 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
/>
))}
{props.isBindingPending && (
<ImageBackground
borderRadius={10}
style={Theme.Styles.openCardBgContainer}
source={Theme.OpenCard}>
<Column>
<Icon name="lightbulb" color={'#e8a94f'} size={40} />
<Text
style={{ flex: 1 }}
weight="semibold"
size="small"
color={Theme.Colors.Details}
align="left">
{t('offlineAuthDisabledHeader')}
</Text>
<Text
style={{ flex: 1 }}
weight="regular"
size="small"
color={Theme.Colors.Details}
align="left">
{t('offlineAuthDisabledMessage')}
</Text>
{props.isBindingPending ? (
<Column style={Theme.Styles.openCardBgContainer}>
<Row margin={'0 0 5 0'}>
<Icon
name="shield-alert"
color={Theme.Colors.Icon}
size={30}
type="material-community"
/>
</Row>
<Button title={t('enableVerification')} onPress={props.onBinding} />
</Column>
</ImageBackground>
<Text
style={{ flex: 1 }}
weight="semibold"
size="small"
margin={'0 0 5 0'}
color={Theme.Colors.Details}>
{t('offlineAuthDisabledHeader')}
</Text>
<Text
style={{ flex: 1 }}
weight="regular"
size="small"
margin={'0 0 5 0'}
color={Theme.Colors.Details}>
{t('offlineAuthDisabledMessage')}
</Text>
<Button
title={t('enableVerification')}
onPress={props.onBinding}
type="radius"
/>
</Column>
) : (
<Column style={Theme.Styles.openCardBgContainer}>
<Row crossAlign="center">
<Icon
name="verified-user"
color={Theme.Colors.VerifiedIcon}
size={28}
containerStyle={{ marginStart: 4, bottom: 1 }}
/>
<Text
numLines={1}
color={Theme.Colors.Details}
weight="bold"
size="smaller"
margin="10 10 10 10"
children={t('profileAuthenticated')}></Text>
</Row>
</Column>
)}
</Column>
);

62
components/VcItem.tsx
View File

@@ -1,12 +1,6 @@
import React, { useContext, useRef } from 'react';
import { useInterpret, useSelector } from '@xstate/react';
import {
Pressable,
Image,
ImageBackground,
TouchableHighlight,
View,
} from 'react-native';
import { Pressable, Image, ImageBackground, Dimensions } from 'react-native';
import { CheckBox, Icon } from 'react-native-elements';
import { ActorRefFrom } from 'xstate';
import {
@@ -16,7 +10,6 @@ import {
vcItemMachine,
selectContext,
selectTag,
selectWalletBindingId,
selectEmptyWalletBindingId,
} from '../machines/vcItem';
import { Column, Row, Text } from './ui';
@@ -97,7 +90,7 @@ const WalletVerified: React.FC = () => {
return (
<Icon
name="verified-user"
color={'green'}
color={Theme.Colors.VerifiedIcon}
size={28}
containerStyle={{ marginStart: 4, bottom: 1 }}
/>
@@ -107,9 +100,10 @@ const WalletVerified: React.FC = () => {
const WalletUnverified: React.FC = () => {
return (
<Icon
name="lightbulb"
color={'#e8a94f'}
name="shield-alert"
color={Theme.Colors.Icon}
size={28}
type="material-community"
containerStyle={{ marginStart: 4, bottom: 1 }}
/>
);
@@ -228,15 +222,21 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
<RotatingIcon name="sync" color={Theme.Colors.rotatingIcon} />
)}
</Row>
<Row>
{emptyWalletBindingId ? (
<Row>
<WalletUnverified />
<VcItemTags tag={tag} />
</ImageBackground>
<Row padding={'10 0 0 0'}>
{emptyWalletBindingId ? (
<Row
width={Dimensions.get('screen').width * 0.8}
align="space-between"
crossAlign="center">
<Row crossAlign="center">
{verifiableCredential && <WalletUnverified />}
<Text
numLines={1}
color={Theme.Colors.Details}
weight="bold"
size="smaller"
size="small"
margin="10 10 10 10"
style={
!verifiableCredential
@@ -245,8 +245,20 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
}
children={t('offlineAuthDisabledHeader')}></Text>
</Row>
) : (
<Row>
<Pressable>
<Icon
name="dots-three-horizontal"
type="entypo"
color={Theme.Colors.GrayIcon}
/>
</Pressable>
</Row>
) : (
<Row
width={Dimensions.get('screen').width * 0.8}
align="space-between"
crossAlign="center">
<Row crossAlign="center">
<WalletVerified />
<Text
numLines={1}
@@ -261,10 +273,16 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
}
children={t('profileAuthenticated')}></Text>
</Row>
)}
</Row>
<VcItemTags tag={tag} />
</ImageBackground>
<Pressable>
<Icon
name="dots-three-horizontal"
type="entypo"
color={Theme.Colors.GrayIcon}
/>
</Pressable>
</Row>
)}
</Row>
</Pressable>
);
};

2
components/ui/Button.tsx
View File

@@ -41,7 +41,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
weight="semibold"
align="center"
color={
type === 'solid' || type === 'addId'
type === 'solid' || type === 'addId' || type === 'radius'
? Theme.Colors.whiteText
: Theme.Colors.AddIdBtnTxt
}>

22
components/ui/themes/DefaultTheme.ts
View File

@@ -13,6 +13,7 @@ const Colors = {
Red: '#EB5757',
Green: '#219653',
Transparent: 'transparent',
Warning: '#f0ad4e',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;
@@ -29,6 +30,7 @@ export const DefaultTheme = {
noUinText: Colors.Orange,
IconBg: Colors.Orange,
Icon: Colors.Orange,
GrayIcon: Colors.Grey,
borderBottomColor: Colors.Grey6,
whiteBackgroundColor: Colors.White,
lightGreyBackgroundColor: Colors.LightGrey,
@@ -54,6 +56,7 @@ export const DefaultTheme = {
checkCircleIcon: Colors.White,
OnboardingCircleIcon: Colors.White,
OnboardingCloseIcon: Colors.White,
WarningIcon: Colors.Warning,
},
Styles: StyleSheet.create({
title: {
@@ -131,6 +134,8 @@ export const DefaultTheme = {
backgroundImageContainer: {
flex: 1,
padding: 10,
borderBottomColor: Colors.Grey,
borderBottomWidth: 1,
},
successTag: {
backgroundColor: Colors.Green,
@@ -324,6 +329,11 @@ export const DefaultTheme = {
clearAddIdBtnBg: {
backgroundColor: Colors.Transparent,
},
radius: {
flex: 1,
borderRadius: 10,
backgroundColor: Colors.Orange,
},
}),
OIDCAuthStyles: StyleSheet.create({
viewContainer: {
@@ -407,6 +417,18 @@ export const DefaultTheme = {
borderTopRightRadius: 0,
},
}),
BindingVcWarningOverlay: StyleSheet.create({
overlay: {
elevation: 5,
backgroundColor: Colors.White,
padding: 0,
borderRadius: 15,
},
button: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
}),
RevokeStyles: StyleSheet.create({
buttonContainer: {
position: 'absolute',

22
components/ui/themes/PurpleTheme.ts
View File

@@ -14,6 +14,7 @@ const Colors = {
Green: '#219653',
Purple: '#70308C',
Transparent: 'transparent',
Warning: '#f0ad4e',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;
@@ -29,6 +30,7 @@ export const PurpleTheme = {
noUinText: Colors.Purple,
IconBg: Colors.Purple,
Icon: Colors.Purple,
GrayIcon: Colors.Grey,
Loading: Colors.Purple,
borderBottomColor: Colors.Grey6,
whiteBackgroundColor: Colors.White,
@@ -55,6 +57,7 @@ export const PurpleTheme = {
checkCircleIcon: Colors.White,
OnboardingCircleIcon: Colors.White,
OnboardingCloseIcon: Colors.White,
WarningIcon: Colors.Warning,
},
Styles: StyleSheet.create({
title: {
@@ -128,6 +131,8 @@ export const PurpleTheme = {
backgroundImageContainer: {
flex: 1,
padding: 10,
borderBottomColor: Colors.Grey,
borderBottomWidth: 1,
},
successTag: {
backgroundColor: '#219653',
@@ -362,6 +367,11 @@ export const PurpleTheme = {
clearAddIdBtnBg: {
backgroundColor: Colors.Transparent,
},
radius: {
flex: 1,
borderRadius: 10,
backgroundColor: Colors.Orange,
},
}),
OnboardingOverlayStyles: StyleSheet.create({
overlay: {
@@ -406,6 +416,18 @@ export const PurpleTheme = {
zIndex: 1,
},
}),
BindingVcWarningOverlay: StyleSheet.create({
overlay: {
elevation: 5,
backgroundColor: Colors.White,
padding: 0,
borderRadius: 15,
},
button: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
}),
OpenCard: require('../../../purpleAassets/bg_cart_one.png'),
CloseCard: require('../../../purpleAassets/cart_unsel.png'),
ProfileIcon: require('../../../purpleAassets/profile_icon_unsel.png'),

7
locales/en.json
View File

@@ -48,11 +48,14 @@
"uin": "UIN",
"enableVerification": "Enable Verification",
"profileAuthenticated": "Verification enabled",
"offlineAuthDisabledHeader": "Verification not enabled!",
"offlineAuthDisabledHeader": "Verification not enabled",
"offlineAuthDisabledMessage": "Click here to enable this credentials to be used for verification.",
"vid": "VID",
"verificationEnabledSuccess": "Verification has been enabled for this credential.",
"goback": "GO BACK"
"goback": "GO BACK",
"BindingWarning":"If you have enabled verification for this credential on another wallet, it will get overridden. Do you want to proceed?",
"yes_confirm":"Yes, I Confirm",
"no":"No"
},
"AuthScreen": {
"header": "Would you like to use biometrics to unlock the application?",

17
machines/vcItem.ts
View File

@@ -62,6 +62,7 @@ const model = createModel(
ADD_WALLET_BINDING_ID: () => ({}),
BINDING_DONE: () => ({}),
CANCEL: () => ({}),
CONFIRM: () => ({}),
},
}
);
@@ -176,7 +177,7 @@ export const vcItemMachine =
target: 'acceptingRevokeInput',
},
ADD_WALLET_BINDING_ID: {
target: 'requestingBindingOtp',
target: 'showBindingWarning',
},
},
},
@@ -361,6 +362,16 @@ export const vcItemMachine =
},
},
},
showBindingWarning: {
on: {
CONFIRM: {
target: 'requestingBindingOtp',
},
CANCEL: {
target: 'idle',
},
},
},
requestingBindingOtp: {
invoke: {
src: 'requestBindingOtp',
@@ -916,3 +927,7 @@ export function isWalletBindingInProgress(state: State) {
? true
: false;
}
export function isShowingBindingWarning(state: State) {
return state.matches('showBindingWarning');
}

3
machines/vcItem.typegen.ts
View File

@@ -187,7 +187,7 @@ export interface Typegen0 {
checkStatus: 'STORE_RESPONSE';
downloadCredential: 'DOWNLOAD_READY';
generateKeyPair: 'INPUT_OTP';
requestBindingOtp: 'ADD_WALLET_BINDING_ID';
requestBindingOtp: 'CONFIRM';
requestLock: 'INPUT_OTP';
requestOtp: 'LOCK_VC';
requestRevoke: 'INPUT_OTP';
@@ -219,6 +219,7 @@ export interface Typegen0 {
| 'requestingRevoke'
| 'revokingVc'
| 'showBindingStatus'
| 'showBindingWarning'
| 'showingWalletBindingError'
| 'storingTag'
| 'updatingPrivateKey'

58
screens/Home/MyVcs/BindVcStatus.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { View } from 'react-native';
import { Button, Icon } from 'react-native-elements';
import { Column, Text } from '../../../components/ui';
import { Icon } from 'react-native-elements';
import { Column, Text, Button } from '../../../components/ui';
import { Theme } from '../../../components/ui/styleUtils';
import { useBindVcStatus, BindVcProps } from './BindVcController';
@@ -12,45 +11,32 @@ export const BindStatus: React.FC<BindVcProps> = (props) => {
var message: string = controller.walletBindingError;
return (
<View style={Theme.OtpVerificationStyles.viewContainer}>
<Column
fill
padding="32"
backgroundColor={Theme.Colors.whiteBackgroundColor}>
<View style={Theme.OtpVerificationStyles.close}>
<Icon name="close" onPress={() => props.onDismiss()} />
</View>
<Column fill align="space-between">
{!controller.walletBindingError && <WalletVerified />}
<Column
style={Theme.OtpVerificationStyles.viewContainer}
align="space-around">
<Column>
{!controller.walletBindingError && <WalletVerified />}
{controller.walletBindingError ? (
<Text
align="center"
color={Theme.Colors.errorMessage}
margin="16 0 0 0">
{{ message }}
</Text>
) : (
<Text align="center" margin="16 0 0 0">
{t('verificationEnabledSuccess')}
</Text>
)}
<Button title={t('goback')} onPress={props.onDone} />
</Column>
<Column fill></Column>
{controller.walletBindingError ? (
<Text
align="center"
color={Theme.Colors.errorMessage}
margin="16 0 0 0">
{{ message }}
</Text>
) : (
<Text align="center" margin="16 0 0 0">
{t('verificationEnabledSuccess')}
</Text>
)}
</Column>
</View>
<Button title={t('Okay')} onPress={props.onDone} type="radius" />
</Column>
);
};
const WalletVerified: React.FC = () => {
return (
<Icon
name="verified-user"
color={'green'}
size={40}
containerStyle={{ marginStart: 4, bottom: 1 }}
/>
<Icon name="verified-user" color={Theme.Colors.VerifiedIcon} size={50} />
);
};

58
screens/Home/MyVcs/BindingVcWarningOverlay.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions } from 'react-native';
import { Icon, Overlay } from 'react-native-elements';
import { Button, Column, Row, Text } from '../../../components/ui';
import { Theme } from '../../../components/ui/styleUtils';
export const BindingVcWarningOverlay: React.FC<QrLoginWarningProps> = (
props
) => {
const { t } = useTranslation('VcDetails');
return (
<Overlay
isVisible={props.isVisible}
overlayStyle={Theme.BindingVcWarningOverlay.overlay}>
<Column
align="space-between"
padding={'10'}
width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0.5}>
<Row align="center">
<Icon
name={'warning'}
size={50}
color={Theme.Colors.WarningIcon}
type="ionicon"
/>
</Row>
<Column>
<Text align="center" size="regular">
{t('BindingWarning')}
</Text>
</Column>
<Column padding={'20'}>
<Button
margin={'10 0 0 0'}
type="radius"
title={t('yes_confirm')}
onPress={props.onConfirm}
/>
<Button
margin={'10 0 0 0'}
type="clear"
title={t('no')}
onPress={props.onCancel}
/>
</Column>
</Column>
</Overlay>
);
};
interface QrLoginWarningProps {
isVisible: boolean;
onConfirm: () => void;
onCancel: () => void;
}

9
screens/Home/ViewVcModal.tsx
View File

@@ -10,10 +10,9 @@ import { OIDcAuthenticationModal } from '../../components/OIDcAuth';
import { useViewVcModal, ViewVcModalProps } from './ViewVcModalController';
import { useTranslation } from 'react-i18next';
import { VcDetails } from '../../components/VcDetails';
import { OtpVerification } from './MyVcs/OtpVerification';
import { BindStatus } from './MyVcs/BindVcStatus';
import { Overlay } from 'react-native-elements';
import { BindingVcWarningOverlay } from './MyVcs/BindingVcWarningOverlay';
export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
const { t } = useTranslation('ViewVcModal');
@@ -115,6 +114,12 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
/>
)}
<BindingVcWarningOverlay
isVisible={controller.isBindingWarning}
onConfirm={controller.CONFIRM}
onCancel={controller.CANCEL}
/>
<MessageOverlay
isVisible={controller.isBindingError}
title={controller.walletBindingError}

3
screens/Home/ViewVcModalController.ts
View File

@@ -24,6 +24,7 @@ import {
selectEmptyWalletBindingId,
isWalletBindingInProgress,
selectShowWalletBindingError,
isShowingBindingWarning,
} from '../../machines/vcItem';
import { selectPasscode } from '../../machines/auth';
import { biometricsMachine, selectIsSuccess } from '../../machines/biometrics';
@@ -144,6 +145,7 @@ export function useViewVcModal({
isWalletBindingInProgress
),
isBindingError: useSelector(vcItemActor, selectShowWalletBindingError),
isBindingWarning: useSelector(vcItemActor, isShowingBindingWarning),
CONFIRM_REVOKE_VC: () => {
setRevoking(true);
@@ -176,6 +178,7 @@ export function useViewVcModal({
LOCK_VC: () => vcItemActor.send(VcItemEvents.LOCK_VC()),
INPUT_OTP: (otp: string) => vcItemActor.send(VcItemEvents.INPUT_OTP(otp)),
CANCEL: () => vcItemActor.send(VcItemEvents.CANCEL()),
CONFIRM: () => vcItemActor.send(VcItemEvents.CONFIRM()),
};
}