Wallet backup screen implemented

ui-lib/src/main/java/co/electriccoin/zcash/ui/Navigation.kt

@@ -78,7 +78,7 @@ import co.electriccoin.zcash.ui.screen.receive.Receive
 import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressType
 import co.electriccoin.zcash.ui.screen.request.WrapRequest
 import co.electriccoin.zcash.ui.screen.restore.info.AndroidSeedInfo
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import co.electriccoin.zcash.ui.screen.reviewtransaction.AndroidReviewTransaction
 import co.electriccoin.zcash.ui.screen.reviewtransaction.ReviewTransaction
 import co.electriccoin.zcash.ui.screen.scan.Scan
@@ -89,6 +89,8 @@ import co.electriccoin.zcash.ui.screen.scankeystone.WrapScanKeystonePCZTRequest
 import co.electriccoin.zcash.ui.screen.scankeystone.WrapScanKeystoneSignInRequest
 import co.electriccoin.zcash.ui.screen.seed.AndroidSeedRecovery
 import co.electriccoin.zcash.ui.screen.seed.SeedRecovery
+import co.electriccoin.zcash.ui.screen.seed.backup.AndroidSeedBackup
+import co.electriccoin.zcash.ui.screen.seed.backup.SeedBackup
 import co.electriccoin.zcash.ui.screen.selectkeystoneaccount.AndroidSelectKeystoneAccount
 import co.electriccoin.zcash.ui.screen.selectkeystoneaccount.SelectKeystoneAccount
 import co.electriccoin.zcash.ui.screen.send.Send
@@ -387,7 +389,7 @@ internal fun MainActivity.Navigation() {
         composable<Send> {
             WrapSend(it.toRoute())
         }
-        dialog<RestoreSeedInfo>(
+        dialog<SeedInfo>(
             dialogProperties =
                 DialogProperties(
                     dismissOnBackPress = false,
@@ -396,6 +398,9 @@ internal fun MainActivity.Navigation() {
         ) {
             AndroidSeedInfo()
         }
+        composable<SeedBackup> {
+            AndroidSeedBackup()
+        }
     }
 }
 

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/onboarding/OnboardingNavigation.kt

@@ -41,7 +41,7 @@ import co.electriccoin.zcash.ui.screen.restore.estimation.RestoreBDEstimation
 import co.electriccoin.zcash.ui.screen.restore.height.AndroidRestoreBDHeight
 import co.electriccoin.zcash.ui.screen.restore.height.RestoreBDHeight
 import co.electriccoin.zcash.ui.screen.restore.info.AndroidSeedInfo
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import co.electriccoin.zcash.ui.screen.restore.seed.AndroidRestoreSeed
 import co.electriccoin.zcash.ui.screen.restore.seed.RestoreSeed
 import org.koin.androidx.compose.koinViewModel
@@ -134,7 +134,7 @@ fun MainActivity.OnboardingNavigation() {
         composable<RestoreBDEstimation> {
             AndroidRestoreBDEstimation()
         }
-        dialog<RestoreSeedInfo>(
+        dialog<SeedInfo>(
             dialogProperties =
                 DialogProperties(
                     dismissOnBackPress = false,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/date/RestoreBDDateViewModel.kt

@@ -7,7 +7,7 @@ import co.electriccoin.zcash.ui.design.component.ButtonState
 import co.electriccoin.zcash.ui.design.component.IconButtonState
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.restore.estimation.RestoreBDEstimation
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -33,6 +33,6 @@ class RestoreBDDateViewModel(
     }
 
     private fun onInfoButtonClick() {
-        navigationRouter.forward(RestoreSeedInfo)
+        navigationRouter.forward(SeedInfo)
     }
 }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/estimation/RestoreBDEstimationViewModel.kt

@@ -6,7 +6,7 @@ import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.design.component.ButtonState
 import co.electriccoin.zcash.ui.design.component.IconButtonState
 import co.electriccoin.zcash.ui.design.util.stringRes
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -34,6 +34,6 @@ class RestoreBDEstimationViewModel(
     }
 
     private fun onInfoButtonClick() {
-        navigationRouter.forward(RestoreSeedInfo)
+        navigationRouter.forward(SeedInfo)
     }
 }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/height/RestoreBDHeightViewModel.kt

@@ -16,7 +16,7 @@ import co.electriccoin.zcash.ui.design.component.IconButtonState
 import co.electriccoin.zcash.ui.design.component.TextFieldState
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.restore.date.RestoreBDDate
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
@@ -85,7 +85,7 @@ class RestoreBDHeightViewModel(
     }
 
     private fun onInfoButtonClick() {
-        navigationRouter.forward(RestoreSeedInfo)
+        navigationRouter.forward(SeedInfo)
     }
 
     private fun onValueChanged(string: String) {

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/info/AndroidSeedInfo.kt

@@ -63,4 +63,4 @@ fun AndroidSeedInfo() {
 }
 
 @Serializable
-object RestoreSeedInfo
+object SeedInfo

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/seed/RestoreSeedViewModel.kt

@@ -15,7 +15,7 @@ import co.electriccoin.zcash.ui.design.component.SeedTextFieldState
 import co.electriccoin.zcash.ui.design.component.SeedWordTextFieldState
 import co.electriccoin.zcash.ui.design.util.stringRes
 import co.electriccoin.zcash.ui.screen.restore.height.RestoreBDHeight
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -142,7 +142,7 @@ class RestoreSeedViewModel(
     }
 
     private fun onInfoButtonClick() {
-        navigationRouter.forward(RestoreSeedInfo)
+        navigationRouter.forward(SeedInfo)
     }
 
     private fun onNextClicked() {

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/SeedRecoveryViewModel.kt

@@ -10,7 +10,7 @@ import co.electriccoin.zcash.ui.design.component.ButtonState
 import co.electriccoin.zcash.ui.design.component.IconButtonState
 import co.electriccoin.zcash.ui.design.component.SeedTextState
 import co.electriccoin.zcash.ui.design.util.stringRes
-import co.electriccoin.zcash.ui.screen.restore.info.RestoreSeedInfo
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
@@ -76,7 +76,7 @@ class SeedRecoveryViewModel(
         }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(ANDROID_STATE_FLOW_TIMEOUT), null)
 
     private fun onInfoClick() {
-        navigationRouter.forward(RestoreSeedInfo)
+        navigationRouter.forward(SeedInfo)
     }
 
     private fun onBack() {

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/backup/AndroidSeedBackup.kt

@@ -0,0 +1,40 @@
+package co.electriccoin.zcash.ui.screen.seed.backup
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import co.electriccoin.zcash.di.koinActivityViewModel
+import co.electriccoin.zcash.ui.NavigationRouter
+import co.electriccoin.zcash.ui.common.viewmodel.WalletViewModel
+import co.electriccoin.zcash.ui.screen.restore.info.SeedInfo
+import co.electriccoin.zcash.ui.screen.seed.SeedRecovery
+import kotlinx.serialization.Serializable
+import org.koin.compose.koinInject
+
+@Composable
+fun AndroidSeedBackup() {
+    val viewModel = koinActivityViewModel<WalletViewModel>()
+    val appBarState by viewModel.walletStateInformation.collectAsStateWithLifecycle()
+    val navigationRouter = koinInject<NavigationRouter>()
+    val state = remember {
+        SeedBackupState(
+            onBack = { navigationRouter.back() },
+            onNextClick = { navigationRouter.replace(SeedRecovery) },
+            onInfoClick = { navigationRouter.forward(SeedInfo) }
+        )
+    }
+
+    BackHandler {
+        state.onBack()
+    }
+
+    SeedBackupView(
+        state = state,
+        appBarState = appBarState,
+    )
+}
+
+@Serializable
+object SeedBackup

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/backup/SeedBackupState.kt

@@ -0,0 +1,7 @@
+package co.electriccoin.zcash.ui.screen.seed.backup
+
+data class SeedBackupState(
+    val onBack: () -> Unit,
+    val onNextClick: () -> Unit,
+    val onInfoClick: () -> Unit,
+)

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/backup/SeedBackupView.kt

@@ -0,0 +1,211 @@
+package co.electriccoin.zcash.ui.screen.seed.backup
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import co.electriccoin.zcash.ui.R
+import co.electriccoin.zcash.ui.common.model.TopAppBarSubTitleState
+import co.electriccoin.zcash.ui.design.component.ButtonState
+import co.electriccoin.zcash.ui.design.component.HorizontalSpacer
+import co.electriccoin.zcash.ui.design.component.IconButtonState
+import co.electriccoin.zcash.ui.design.component.VerticalSpacer
+import co.electriccoin.zcash.ui.design.component.ZashiButton
+import co.electriccoin.zcash.ui.design.component.ZashiIconButton
+import co.electriccoin.zcash.ui.design.component.ZashiSmallTopAppBar
+import co.electriccoin.zcash.ui.design.component.ZashiTopAppBarBackNavigation
+import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
+import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
+import co.electriccoin.zcash.ui.design.util.scaffoldPadding
+import co.electriccoin.zcash.ui.design.util.stringRes
+
+@Composable
+fun SeedBackupView(
+    state: SeedBackupState,
+    appBarState: TopAppBarSubTitleState,
+) {
+    Scaffold(
+        topBar = { AppBar(state = state, subTitleState = appBarState) }
+    ) { paddingValues ->
+        Content(
+            modifier = Modifier.scaffoldPadding(paddingValues),
+            state = state,
+        )
+    }
+}
+
+@Composable
+private fun AppBar(
+    state: SeedBackupState,
+    subTitleState: TopAppBarSubTitleState,
+    modifier: Modifier = Modifier,
+) {
+    ZashiSmallTopAppBar(
+        title = stringResource(R.string.wallet_backup_title),
+        subtitle =
+            when (subTitleState) {
+                TopAppBarSubTitleState.Disconnected -> stringResource(id = R.string.disconnected_label)
+                TopAppBarSubTitleState.Restoring -> stringResource(id = R.string.restoring_wallet_label)
+                TopAppBarSubTitleState.None -> null
+            },
+        modifier = modifier,
+        navigationAction = {
+            ZashiTopAppBarBackNavigation(onBack = state.onBack)
+        },
+        regularActions = {
+            ZashiIconButton(
+                state =
+                    IconButtonState(
+                        onClick = state.onInfoClick,
+                        icon = R.drawable.ic_help
+                    )
+            )
+            Spacer(Modifier.width(20.dp))
+        }
+    )
+}
+
+@Composable
+private fun Content(
+    state: SeedBackupState,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        Modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState())
+            .then(modifier),
+    ) {
+        Text(
+            text = stringResource(R.string.wallet_backup_subtitle),
+            fontWeight = FontWeight.SemiBold,
+            color = ZashiColors.Text.textPrimary,
+            style = ZashiTypography.header6
+        )
+
+        VerticalSpacer(10.dp)
+
+        Text(
+            text = stringResource(R.string.wallet_backup_message),
+            color = ZashiColors.Text.textPrimary,
+            style = ZashiTypography.textSm
+        )
+
+        VerticalSpacer(24.dp)
+
+        Item(
+            icon = R.drawable.ic_wallet_backup_1,
+            title = stringResource(R.string.wallet_backup_item_1),
+            subtitle = stringResource(R.string.wallet_backup_item_subtitle_1)
+        )
+        VerticalSpacer(20.dp)
+        Item(
+            icon = R.drawable.ic_wallet_backup_2,
+            title = stringResource(R.string.wallet_backup_item_2),
+            subtitle = stringResource(R.string.wallet_backup_item_subtitle_2)
+        )
+        VerticalSpacer(20.dp)
+        Item(
+            icon = R.drawable.ic_wallet_backup_3,
+            title = stringResource(R.string.wallet_backup_item_3),
+            subtitle = stringResource(R.string.wallet_backup_item_subtitle_3)
+        )
+        VerticalSpacer(20.dp)
+        Item(
+            icon = R.drawable.ic_wallet_backup_4,
+            title = stringResource(R.string.wallet_backup_item_4),
+            subtitle = stringResource(R.string.wallet_backup_item_subtitle_4)
+        )
+
+        VerticalSpacer(20.dp)
+
+        VerticalSpacer(1f)
+
+        Row {
+            HorizontalSpacer(20.dp)
+            Image(
+                painter = painterResource(R.drawable.ic_info),
+                contentDescription = null,
+                colorFilter = ColorFilter.tint(ZashiColors.Utility.WarningYellow.utilityOrange700)
+            )
+            HorizontalSpacer(12.dp)
+            Text(
+                text = stringResource(R.string.wallet_backup_info),
+                color = ZashiColors.Utility.WarningYellow.utilityOrange700,
+                style = ZashiTypography.textXs,
+                fontWeight = FontWeight.Medium
+            )
+        }
+
+        VerticalSpacer(24.dp)
+
+        ZashiButton(
+            state = ButtonState(
+                text = stringRes(stringResource(R.string.wallet_backup_btn)),
+                onClick = state.onNextClick
+            ),
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@Composable
+private fun Item(
+    @DrawableRes icon: Int,
+    title: String,
+    subtitle: String,
+) {
+    Row {
+        Image(
+            painterResource(icon),
+            contentDescription = null
+        )
+        HorizontalSpacer(16.dp)
+        Column {
+            VerticalSpacer(2.dp)
+            Text(
+                text = title,
+                color = ZashiColors.Text.textPrimary,
+                style = ZashiTypography.textSm,
+                fontWeight = FontWeight.Medium
+            )
+            VerticalSpacer(4.dp)
+            Text(
+                text = subtitle,
+                color = ZashiColors.Text.textTertiary,
+                style = ZashiTypography.textSm
+            )
+        }
+    }
+}
+
+@Composable
+@PreviewScreens
+private fun Preview() =
+    ZcashTheme {
+        SeedBackupView(
+            appBarState = TopAppBarSubTitleState.None,
+            state = SeedBackupState(
+                onBack = {},
+                onNextClick = {},
+                onInfoClick = {}
+            )
+        )
+    }

ui-lib/src/main/res/ui/seed_recovery/drawable-night/ic_wallet_backup_1.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#454243"/>
+  <path
+      android:pathData="M24.899,26.742C23.475,27.776 21.76,28.333 20,28.333C18.24,28.333 16.526,27.776 15.102,26.742M23.653,12.51C25.235,13.281 26.532,14.534 27.358,16.088C28.184,17.642 28.497,19.417 28.253,21.16M11.748,21.16C11.503,19.417 11.816,17.642 12.642,16.088C13.469,14.534 14.766,13.281 16.347,12.51M19.529,15.471L15.472,19.529C15.307,19.694 15.224,19.776 15.193,19.871C15.166,19.955 15.166,20.045 15.193,20.129C15.224,20.224 15.307,20.306 15.472,20.471L19.529,24.529C19.694,24.694 19.776,24.776 19.872,24.807C19.955,24.834 20.045,24.834 20.129,24.807C20.224,24.776 20.307,24.694 20.472,24.529L24.529,20.471C24.694,20.306 24.776,20.224 24.807,20.129C24.834,20.045 24.834,19.955 24.807,19.871C24.776,19.776 24.694,19.694 24.529,19.529L20.472,15.471C20.307,15.306 20.224,15.224 20.129,15.193C20.045,15.166 19.955,15.166 19.872,15.193C19.776,15.224 19.694,15.306 19.529,15.471Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#E8E8E8"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable-night/ic_wallet_backup_2.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#454243"/>
+  <path
+      android:pathData="M19.418,28.012C19.603,28.12 19.695,28.174 19.825,28.202C19.926,28.223 20.073,28.223 20.174,28.202C20.305,28.174 20.397,28.12 20.581,28.012C22.205,27.065 26.666,24.09 26.666,20V16.015C26.666,15.348 26.666,15.015 26.557,14.729C26.461,14.476 26.305,14.25 26.102,14.071C25.872,13.869 25.56,13.752 24.936,13.518L20.468,11.842C20.295,11.777 20.208,11.745 20.119,11.732C20.04,11.72 19.959,11.72 19.881,11.732C19.791,11.745 19.705,11.777 19.531,11.842L15.063,13.518C14.439,13.752 14.128,13.869 13.898,14.071C13.695,14.25 13.538,14.476 13.442,14.729C13.333,15.015 13.333,15.348 13.333,16.015V20C13.333,24.09 17.795,27.065 19.418,28.012Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#E8E8E8"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable-night/ic_wallet_backup_3.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#454243"/>
+  <path
+      android:pathData="M13.334,16.664C13.197,16.66 13.098,16.652 13.009,16.635C12.347,16.503 11.83,15.986 11.699,15.325C11.667,15.164 11.667,14.97 11.667,14.583C11.667,14.196 11.667,14.002 11.699,13.842C11.83,13.18 12.347,12.663 13.009,12.532C13.17,12.5 13.363,12.5 13.75,12.5H26.25C26.638,12.5 26.831,12.5 26.992,12.532C27.653,12.663 28.17,13.18 28.302,13.842C28.334,14.002 28.334,14.196 28.334,14.583C28.334,14.97 28.334,15.164 28.302,15.325C28.17,15.986 27.653,16.503 26.992,16.635C26.903,16.652 26.804,16.66 26.667,16.664M18.334,20.833H21.667M13.334,16.667H26.667V23.5C26.667,24.9 26.667,25.6 26.395,26.135C26.155,26.605 25.772,26.988 25.302,27.228C24.767,27.5 24.067,27.5 22.667,27.5H17.334C15.934,27.5 15.233,27.5 14.699,27.228C14.228,26.988 13.846,26.605 13.606,26.135C13.334,25.6 13.334,24.9 13.334,23.5V16.667Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#E8E8E8"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable-night/ic_wallet_backup_4.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#454243"/>
+  <path
+      android:pathData="M27.5,18.333H12.5M23.333,11.667V15M16.667,11.667V15M16.5,28.333H23.5C24.9,28.333 25.6,28.333 26.135,28.061C26.605,27.821 26.988,27.439 27.228,26.968C27.5,26.434 27.5,25.733 27.5,24.333V17.333C27.5,15.933 27.5,15.233 27.228,14.698C26.988,14.228 26.605,13.845 26.135,13.606C25.6,13.333 24.9,13.333 23.5,13.333H16.5C15.1,13.333 14.4,13.333 13.865,13.606C13.395,13.845 13.012,14.228 12.773,14.698C12.5,15.233 12.5,15.933 12.5,17.333V24.333C12.5,25.733 12.5,26.434 12.773,26.968C13.012,27.439 13.395,27.821 13.865,28.061C14.4,28.333 15.1,28.333 16.5,28.333Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#E8E8E8"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable/ic_wallet_backup_1.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#EBEBE6"/>
+  <path
+      android:pathData="M24.899,26.742C23.475,27.776 21.76,28.333 20,28.333C18.24,28.333 16.526,27.776 15.102,26.742M23.653,12.51C25.235,13.281 26.532,14.534 27.358,16.088C28.184,17.642 28.497,19.417 28.253,21.16M11.748,21.16C11.503,19.417 11.816,17.642 12.642,16.088C13.469,14.534 14.766,13.281 16.347,12.51M19.529,15.471L15.472,19.529C15.307,19.694 15.224,19.776 15.193,19.871C15.166,19.955 15.166,20.045 15.193,20.129C15.224,20.224 15.307,20.306 15.472,20.471L19.529,24.529C19.694,24.694 19.776,24.776 19.872,24.807C19.955,24.834 20.045,24.834 20.129,24.807C20.224,24.776 20.307,24.694 20.472,24.529L24.529,20.471C24.694,20.306 24.776,20.224 24.807,20.129C24.834,20.045 24.834,19.955 24.807,19.871C24.776,19.776 24.694,19.694 24.529,19.529L20.472,15.471C20.307,15.306 20.224,15.224 20.129,15.193C20.045,15.166 19.955,15.166 19.872,15.193C19.776,15.224 19.694,15.306 19.529,15.471Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#282622"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable/ic_wallet_backup_2.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#EBEBE6"/>
+  <path
+      android:pathData="M19.418,28.012C19.603,28.12 19.695,28.174 19.825,28.202C19.926,28.223 20.073,28.223 20.174,28.202C20.305,28.174 20.397,28.12 20.581,28.012C22.205,27.065 26.666,24.09 26.666,20V16.015C26.666,15.348 26.666,15.015 26.557,14.729C26.461,14.476 26.305,14.25 26.102,14.071C25.872,13.869 25.56,13.752 24.936,13.518L20.468,11.842C20.295,11.777 20.208,11.745 20.119,11.732C20.04,11.72 19.959,11.72 19.881,11.732C19.791,11.745 19.705,11.777 19.531,11.842L15.063,13.518C14.439,13.752 14.128,13.869 13.898,14.071C13.695,14.25 13.538,14.476 13.442,14.729C13.333,15.015 13.333,15.348 13.333,16.015V20C13.333,24.09 17.795,27.065 19.418,28.012Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#282622"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable/ic_wallet_backup_3.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#EBEBE6"/>
+  <path
+      android:pathData="M13.334,16.664C13.197,16.66 13.098,16.652 13.009,16.635C12.347,16.503 11.83,15.986 11.699,15.325C11.667,15.164 11.667,14.97 11.667,14.583C11.667,14.196 11.667,14.002 11.699,13.842C11.83,13.18 12.347,12.663 13.009,12.532C13.17,12.5 13.363,12.5 13.75,12.5H26.25C26.638,12.5 26.831,12.5 26.992,12.532C27.653,12.663 28.17,13.18 28.302,13.842C28.334,14.002 28.334,14.196 28.334,14.583C28.334,14.97 28.334,15.164 28.302,15.325C28.17,15.986 27.653,16.503 26.992,16.635C26.903,16.652 26.804,16.66 26.667,16.664M18.334,20.833H21.667M13.334,16.667H26.667V23.5C26.667,24.9 26.667,25.6 26.395,26.135C26.155,26.605 25.772,26.988 25.302,27.228C24.767,27.5 24.067,27.5 22.667,27.5H17.334C15.934,27.5 15.233,27.5 14.699,27.228C14.228,26.988 13.846,26.605 13.606,26.135C13.334,25.6 13.334,24.9 13.334,23.5V16.667Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#282622"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/drawable/ic_wallet_backup_4.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0,20C0,8.954 8.954,0 20,0C31.046,0 40,8.954 40,20C40,31.046 31.046,40 20,40C8.954,40 0,31.046 0,20Z"
+      android:fillColor="#EBEBE6"/>
+  <path
+      android:pathData="M27.5,18.333H12.5M23.333,11.667V15M16.667,11.667V15M16.5,28.333H23.5C24.9,28.333 25.6,28.333 26.135,28.061C26.605,27.821 26.988,27.439 27.228,26.968C27.5,26.434 27.5,25.733 27.5,24.333V17.333C27.5,15.933 27.5,15.233 27.228,14.698C26.988,14.228 26.605,13.845 26.135,13.606C25.6,13.333 24.9,13.333 23.5,13.333H16.5C15.1,13.333 14.4,13.333 13.865,13.606C13.395,13.845 13.012,14.228 12.773,14.698C12.5,15.233 12.5,15.933 12.5,17.333V24.333C12.5,25.733 12.5,26.434 12.773,26.968C13.012,27.439 13.395,27.821 13.865,28.061C14.4,28.333 15.1,28.333 16.5,28.333Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#282622"
+      android:strokeLineCap="round"/>
+</vector>

ui-lib/src/main/res/ui/seed_recovery/values/strings.xml

@@ -11,4 +11,17 @@
     <string name="seed_recovery_bday_tooltip_message">Wallet Birthday Height determines the birth (chain) height of
         your wallet and facilitates faster wallet restore process. Save this number together with your seed phrase in
         a safe place.</string>
+    <string name="wallet_backup_title">Wallet backup</string>
+    <string name="wallet_backup_subtitle">Your Secret Recovery Phrase</string>
+    <string name="wallet_backup_message">"Your secret recovery phrase is a unique set of 24 words, appearing in a precise order. It protects access to your funds. "</string>
+    <string name="wallet_backup_info">Keep this phrase securely hidden. Don’t take screenshots of it or store it on your phone!</string>
+    <string name="wallet_backup_btn">Next</string>
+    <string name="wallet_backup_item_1">Control your wallet</string>
+    <string name="wallet_backup_item_2">Keep it private</string>
+    <string name="wallet_backup_item_3">Store it securely</string>
+    <string name="wallet_backup_item_4">Wallet birthday height</string>
+    <string name="wallet_backup_item_subtitle_1">Use it to access your funds from other devices and Zcash wallets.</string>
+    <string name="wallet_backup_item_subtitle_2">Don\'t share it with anyone! It can be used to gain full control of your funds.</string>
+    <string name="wallet_backup_item_subtitle_3">We don’t have access to it and will never ask for it. If you lose it, it cannot be recovered.</string>
+    <string name="wallet_backup_item_subtitle_4">The block height at which your wallet was created can significantly speed up the wallet recovery process.</string>
 </resources>