Skip to content

Commit

Permalink
refactor(wallet-mobile): create + restore p_b
Browse files Browse the repository at this point in the history
  • Loading branch information
@stackchain
stackchain committed Jul 29, 2024
1 parent 5491ca3 commit 0e01f23
Show file tree
Hide file tree
Showing 6 changed files with 181 additions and 215 deletions.
2 changes: 1 addition & 1 deletion apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,9 +125,9 @@ const useStyles = () => {
borderTopLeftRadius: 20,
},
sheet: {
backgroundColor: isDark ? color.gray_c50 : color.white_static,
...atoms.flex_1,
...atoms.self_stretch,
backgroundColor: isDark ? color.gray_c50 : color.white_static,
},
title: {
...atoms.heading_3_medium,
Expand Down
22 changes: 11 additions & 11 deletions ...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,12 @@ export const AboutRecoveryPhraseScreen = () => {

<Spacer fill />

<LearnMoreButton onPress={handleOnLearMoreButtonPress} />
<Actions style={[styles.actions, styles.padding]}>
<LearnMoreButton onPress={handleOnLearMoreButtonPress} />

<Space height="lg" />

<Actions style={styles.actions}>
<Button
shelleyTheme
title={strings.next}
style={styles.button}
onPress={() => navigation.navigate('setup-wallet-recovery-phrase-mnemonic')}
testID="setup-step1-next-button"
/>
Expand All @@ -89,21 +87,23 @@ const useStyles = () => {
const {atoms, color} = useTheme()
const styles = StyleSheet.create({
root: {
flex: 1,
...atoms.px_lg,
justifyContent: 'space-between',
backgroundColor: color.bg_color_high,
...atoms.flex_1,
...atoms.pb_lg,
},
padding: {
...atoms.px_lg,
},
aboutRecoveryPhraseTitle: {
color: color.text_gray_normal,
...atoms.body_1_lg_regular,
color: color.gray_c900,
},
button: {backgroundColor: color.primary_c500},
bolder: {
...atoms.body_1_lg_medium,
},
actions: {
...atoms.p_lg,
...atoms.pt_lg,
...atoms.gap_lg,
},
scroll: {
...atoms.px_lg,
Expand Down
42 changes: 19 additions & 23 deletions apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const RecoveryPhraseScreen = () => {

<Button
title={strings.continueButton}
style={styles.button}
onPress={() => {
closeModal()
showCreateWalletInfoModalChanged(false)
Expand All @@ -89,7 +88,6 @@ export const RecoveryPhraseScreen = () => {
strings.recoveryPhraseCardThirdItem,
strings.recoveryPhraseCardTitle,
strings.recoveryPhraseModalTitle,
styles.button,
styles.modal,
])

Expand Down Expand Up @@ -146,8 +144,8 @@ export const RecoveryPhraseScreen = () => {
<Spacer fill />

<Button
shelleyTheme
title={strings.next}
style={styles.button}
disabled={isBlur}
onPress={() => {
mnemonicChanged(mnemonic)
Expand Down Expand Up @@ -185,13 +183,12 @@ const useStyles = () => {
const {atoms, color} = useTheme()
const styles = StyleSheet.create({
root: {
flex: 1,
...atoms.px_lg,
justifyContent: 'space-between',
backgroundColor: color.bg_color_high,
...atoms.flex_1,
...atoms.px_lg,
},
modal: {
flex: 1,
...atoms.flex_1,
...atoms.px_lg,
},
title: {
Expand All @@ -204,18 +201,17 @@ const useStyles = () => {
content: {
gap: 16,
},
button: {backgroundColor: color.primary_c500},
mnemonicWords: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
...atoms.flex_row,
...atoms.flex_wrap,
...atoms.py_sm,
...atoms.gap_sm,
},
mnemonicTextContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
borderRadius: 8,
overflow: 'hidden',
...atoms.overflow_hidden,
...atoms.flex_row,
...atoms.flex_wrap,
...atoms.px_lg,
...atoms.py_sm,
},
Expand All @@ -224,31 +220,31 @@ const useStyles = () => {
color: color.primary_c600,
},
blurView: {
position: 'absolute',
...atoms.p_2xl,
left: -8,
right: -8,
bottom: 0,
top: 0,
zIndex: 1,
...atoms.z_10,
...atoms.absolute,
...atoms.p_2xl,
},
blurButton: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
...atoms.flex_row,
...atoms.align_center,
...atoms.gap_sm,
},
blurTextButton: {
...atoms.button_2_md,
color: color.primary_c500,
...atoms.button_2_md,
textTransform: 'none',
},
info: {
position: 'relative',
...atoms.relative,
},
infoIcon: {
position: 'absolute',
top: Platform.OS === 'ios' ? -22 : -18,
left: 0,
...atoms.absolute,
},
buttonBackground: {
backgroundColor: color.primary_c100,
Expand Down
120 changes: 54 additions & 66 deletions ...llet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,14 @@ export const VerifyRecoveryPhraseScreen = () => {

return (
<SafeAreaView edges={['left', 'right', 'bottom']} style={styles.container}>
<StepperProgress currentStep={3} currentStepTitle={strings.stepVerifyRecoveryPhrase} totalSteps={4} />

<Space height="lg" />

<Text style={styles.title}>{strings.verifyRecoveryPhraseTitle(bold)}</Text>
<StepperProgress
currentStep={3}
currentStepTitle={strings.stepVerifyRecoveryPhrase}
totalSteps={4}
style={styles.padding}
/>

<Space height="lg" />
<Text style={[styles.title, styles.padding]}>{strings.verifyRecoveryPhraseTitle(bold)}</Text>

<MnemonicInput
onPress={removeLastEntry}
Expand All @@ -82,17 +83,9 @@ export const VerifyRecoveryPhraseScreen = () => {
error={isPhraseComplete && !isValidPhrase}
/>

{isPhraseComplete && isLastWordValid() && (
<>
<Space height="lg" />

<SuccessMessage />
</>
)}

<Space height="lg" />
{isPhraseComplete && isLastWordValid() && <SuccessMessage />}

<ScrollView bounces={false}>
<ScrollView bounces={false} style={styles.padding}>
<WordBadges
defaultMnemonic={mnemonicDefault}
mnemonicEntries={mnemonicEntries}
Expand All @@ -101,21 +94,13 @@ export const VerifyRecoveryPhraseScreen = () => {
removeLastEntryAndAddNew={removeLastEntryAndAddNew}
/>

{!isLastWordValid() && userEntries.length > 0 && (
<>
<Space height="lg" />

<ErrorMessage />
</>
)}
{!isLastWordValid() && userEntries.length > 0 && <ErrorMessage />}
</ScrollView>

<Space height="lg" />

<View>
<View style={[styles.actions, styles.padding]}>
<Button
title="next"
style={styles.button}
shelleyTheme
title={strings.next}
disabled={disabled}
onPress={async () => {
const {csl, release} = wrappedCsl()
Expand All @@ -126,8 +111,6 @@ export const VerifyRecoveryPhraseScreen = () => {
}}
testId="setup-next-button"
/>

<Space height="sm" />
</View>
</SafeAreaView>
)
Expand All @@ -137,7 +120,7 @@ const ErrorMessage = () => {
const {styles} = useStyles()
const strings = useStrings()
return (
<View style={styles.errorMessageContainer}>
<View style={[styles.errorMessageContainer, styles.padding]}>
<AlertIllustration />

<Space width="sm" />
Expand All @@ -151,7 +134,7 @@ const SuccessMessage = () => {
const {styles} = useStyles()
const strings = useStrings()
return (
<View style={styles.successMessageContainer}>
<View style={[styles.successMessageContainer, styles.padding]}>
<Check2Illustration />

<Space width="sm" />
Expand Down Expand Up @@ -186,7 +169,7 @@ const MnemonicInput = ({defaultMnemonic, userEntries, onPress}: MnemonicInputPro
}

return (
<Animated.View layout={Layout} entering={FadeIn} exiting={FadeOut} style={styles.recoveryPhrase}>
<Animated.View layout={Layout} entering={FadeIn} exiting={FadeOut} style={[styles.recoveryPhrase, styles.padding]}>
<View style={[StyleSheet.absoluteFill, {backgroundColor: colors.gradientBlueGreen}]} />

<View style={styles.recoveryPhraseBackground}>
Expand Down Expand Up @@ -370,49 +353,54 @@ const useStyles = () => {
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
container: {
flex: 1,
...atoms.px_lg,
justifyContent: 'space-between',
backgroundColor: color.bg_color_high,
...atoms.flex_1,
...atoms.justify_between,
...atoms.gap_lg,
},
padding: {
...atoms.px_lg,
},
actions: {
...atoms.pb_lg,
},
title: {
...atoms.body_1_lg_regular,
color: color.gray_c900,
color: color.text_gray_normal,
},
button: {backgroundColor: color.primary_c500},
recoveryPhrase: {
...atoms.p_2xs,
minHeight: 182,
borderRadius: 8,
overflow: 'hidden',
...atoms.p_2xs,
...atoms.overflow_hidden,
},
recoveryPhraseBackground: {
borderRadius: 6,
overflow: 'hidden',
backgroundColor: color.bg_color_high,
borderRadius: 6,
minHeight: 182,
...atoms.overflow_hidden,
},
recoveryPhraseOutline: {
padding: 6,
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
...atoms.p_sm,
...atoms.flex_row,
...atoms.flex_wrap,
...atoms.gap_sm,
},
errorMessageContainer: {
flexDirection: 'row',
alignItems: 'center',
...atoms.flex_row,
...atoms.align_center,
},
errorMessage: {
color: color.sys_magenta_c500,
...atoms.body_2_md_regular,
},
successMessageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
...atoms.flex_row,
...atoms.align_center,
...atoms.justify_start,
},
successMessage: {
color: color.gray_cmax,
color: color.text_gray_max,
...atoms.body_1_lg_medium,
},
errorBadge: {
Expand All @@ -422,39 +410,39 @@ const useStyles = () => {
backgroundColor: color.sys_magenta_c100,
},
words: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
...atoms.flex_row,
...atoms.flex_wrap,
...atoms.gap_sm,
},
wordBadgeView: {
flexDirection: 'row',
alignItems: 'center',
gap: 2,
...atoms.flex_row,
...atoms.align_center,
...atoms.gap_2xs,
},
wordBadgeContainerOutline: {
borderRadius: 8,
...atoms.overflow_hidden,
...atoms.px_xs,
...atoms.py_xs,
borderRadius: 8,
overflow: 'hidden',
},
wordBadgeContainer: {
...atoms.py_sm,
borderRadius: 8,
overflow: 'hidden',
...atoms.py_sm,
...atoms.overflow_hidden,
},
wordBadge: {
flexDirection: 'row',
flexWrap: 'wrap',
...atoms.flex_row,
...atoms.flex_wrap,
},
wordBadgeText: {
color: color.text_gray_medium,
...atoms.body_1_lg_regular,
color: color.primary_c600,
},
usedWord: {
color: color.primary_c400,
},
usedWordBackground: {
position: 'absolute',
...atoms.absolute,
backgroundColor: color.bg_color_high,
borderRadius: 6,
left: 2,
Expand Down
Loading

0 comments on commit 0e01f23

Please sign in to comment.