refactor(wallet-mobile): create + restore p_b

Emurgo · Jul 29, 2024 · 30d23e3 · 30d23e3
1 parent 5491ca3
commit 30d23e3
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 216 deletions.
diff --git a/apps/wallet-mobile/.env b/apps/wallet-mobile/.env
@@ -12,7 +12,7 @@ WALLET_2_NETWORK_ID=300
 WALLET_2_MNEMONIC=abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon share
 
 WALLET_3_NETWORK_ID=300
-WALLET_3_MNEMONIC=sign moral mass glare charge type candy debris fine cup torch rotate banana length foot
+WALLET_3_MNEMONIC=typical evoke despair burger ripple venue assist shoot donate alter twice bomb glimpse asthma explain
 
 BANXA_TEST_WALLET=addr1qyfuspldlchc5kechfe5jzdrr9jms2s9w0tq4hggy9zgkhxssydveuc8xyx4zh27fwcmr62mraeezjwf24hzkyejwfmq7yptmd
 

diff --git a/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
@@ -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,

diff --git a/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx b/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
@@ -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"
         />
@@ -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,

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
@@ -65,7 +65,6 @@ export const RecoveryPhraseScreen = () => {
 
         <Button
           title={strings.continueButton}
-          style={styles.button}
           onPress={() => {
             closeModal()
             showCreateWalletInfoModalChanged(false)
@@ -89,7 +88,6 @@ export const RecoveryPhraseScreen = () => {
     strings.recoveryPhraseCardThirdItem,
     strings.recoveryPhraseCardTitle,
     strings.recoveryPhraseModalTitle,
-    styles.button,
     styles.modal,
   ])
 
@@ -146,8 +144,8 @@ export const RecoveryPhraseScreen = () => {
       <Spacer fill />
 
       <Button
+        shelleyTheme
         title={strings.next}
-        style={styles.button}
         disabled={isBlur}
         onPress={() => {
           mnemonicChanged(mnemonic)
@@ -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: {
@@ -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,
     },
@@ -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,