Merge pull request #1115 from radixdlt/sp/ABW-3645-seed-phrase-ui-ref…

…inements [ABW-3645] - Seed phrase UI refinements
radixdlt · Aug 6, 2024 · 3ee9741 · 3ee9741
2 parents f2718f6 + 781bde1
commit 3ee9741
Show file tree

Hide file tree

Showing 18 changed files with 354 additions and 293 deletions.
diff --git a/...java/com/babylon/wallet/android/presentation/account/createaccount/CreateAccountScreen.kt b/...java/com/babylon/wallet/android/presentation/account/createaccount/CreateAccountScreen.kt
@@ -8,7 +8,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
@@ -43,6 +44,7 @@ import com.babylon.wallet.android.presentation.ui.composables.RadixCenteredTopAp
 import com.babylon.wallet.android.presentation.ui.composables.RadixSnackbarHost
 import com.babylon.wallet.android.presentation.ui.composables.SnackbarUIMessage
 import com.babylon.wallet.android.presentation.ui.composables.statusBarsAndBanner
+import com.babylon.wallet.android.presentation.ui.composables.utils.isKeyboardVisible
 import com.babylon.wallet.android.utils.biometricAuthenticateSuspend
 import com.radixdlt.sargon.AccountAddress
 
@@ -135,7 +137,7 @@ fun CreateAccountContent(
     )
 
     Scaffold(
-        modifier = modifier.imePadding(),
+        modifier = modifier,
         topBar = {
             RadixCenteredTopAppBar(
                 title = stringResource(id = R.string.empty),
@@ -148,7 +150,8 @@ fun CreateAccountContent(
             RadixBottomBar(
                 onClick = { onAccountCreateClick(isWithLedger) },
                 text = stringResource(id = R.string.createAccount_nameNewAccount_continue),
-                enabled = buttonEnabled
+                enabled = buttonEnabled,
+                insets = if (isKeyboardVisible()) WindowInsets.ime else WindowInsets.navigationBars
             )
         },
         containerColor = RadixTheme.colors.defaultBackground,

diff --git a/...java/com/babylon/wallet/android/presentation/common/seedphrase/SeedPhraseInputDelegate.kt b/...java/com/babylon/wallet/android/presentation/common/seedphrase/SeedPhraseInputDelegate.kt
@@ -55,11 +55,10 @@ class SeedPhraseInputDelegate(
     }
 
     @Suppress("LongMethod")
-    fun onWordChanged(index: Int, value: String, onMoveToNextWord: suspend () -> Unit) {
-        val isDeleting = (_state.value.seedPhraseWords.firstOrNull { it.index == index }?.value?.length ?: 0) > value.length
+    fun onWordChanged(index: Int, value: String) {
         _state.update { state ->
             val updatedWords = state.seedPhraseWords.mapWhen(predicate = { it.index == index }, mutation = {
-                it.copy(value = value)
+                it.copy(value = value.trim())
             }).toPersistentList()
             state.copy(
                 seedPhraseWords = updatedWords,
@@ -86,41 +85,31 @@ class SeedPhraseInputDelegate(
                     return@launch
                 }
             }
-            var shouldMoveToNextWord = false
             val wordCandidates = if (value.isEmpty()) {
                 emptyList()
             } else {
                 englishWordList.filter { it.startsWith(value) }
             }
-            val newValue = if (wordCandidates.size == 1 && !isDeleting) {
-                shouldMoveToNextWord = true
-                wordCandidates[0]
-            } else {
-                value
-            }
+
             val wordState = when {
-                wordCandidates.contains(newValue) -> SeedPhraseWord.State.Valid
-                newValue.isEmpty() -> SeedPhraseWord.State.Empty
+                wordCandidates.contains(value) -> SeedPhraseWord.State.Valid
+                value.isEmpty() -> SeedPhraseWord.State.Empty
                 wordCandidates.isEmpty() -> SeedPhraseWord.State.Invalid
                 else -> SeedPhraseWord.State.HasValue
             }
             _state.update { state ->
                 val updatedWords = state.seedPhraseWords.mapWhen(predicate = { it.index == index }, mutation = {
-                    it.copy(value = newValue, state = wordState)
+                    it.copy(value = value.trim(), state = wordState)
                 }).toPersistentList()
                 state.copy(
                     seedPhraseWords = updatedWords,
-                    wordAutocompleteCandidates = wordCandidates.toPersistentList()
+                    wordAutocompleteCandidates = if (wordCandidates.size == 1 && wordCandidates.first() == value) {
+                        emptyList()
+                    } else {
+                        wordCandidates
+                    }.toPersistentList()
                 )
             }
-            if (shouldMoveToNextWord) {
-                _state.update {
-                    it.copy(wordAutocompleteCandidates = persistentListOf())
-                }
-                if (index != _state.value.seedPhraseWords.lastIndex) {
-                    onMoveToNextWord()
-                }
-            }
         }
     }
 
@@ -137,7 +126,7 @@ class SeedPhraseInputDelegate(
     data class State(
         val bip39Passphrase: String = "",
         val seedPhraseWords: ImmutableList<SeedPhraseWord> = persistentListOf(),
-        val wordAutocompleteCandidates: ImmutableList<String> = persistentListOf(),
+        val wordAutocompleteCandidates: ImmutableList<String> = persistentListOf()
     ) : UiState {
 
         private val isInputEmpty: Boolean

diff --git a/...m/babylon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicNav.kt b/...m/babylon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicNav.kt
@@ -62,10 +62,13 @@ fun NavGraphBuilder.addSingleMnemonic(
             }
         ),
         enterTransition = {
-            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Up)
+            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Left)
         },
         exitTransition = {
-            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Down)
+            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Right)
+        },
+        popEnterTransition = {
+            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Right)
         }
     ) {
         AddSingleMnemonicScreen(

diff --git a/...abylon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicScreen.kt b/...abylon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicScreen.kt
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
@@ -26,7 +25,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -35,7 +33,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusDirection
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
@@ -58,6 +55,9 @@ import com.babylon.wallet.android.presentation.ui.composables.SeedPhraseSuggesti
 import com.babylon.wallet.android.presentation.ui.composables.SnackbarUIMessage
 import com.babylon.wallet.android.presentation.ui.composables.WarningText
 import com.babylon.wallet.android.presentation.ui.composables.statusBarsAndBanner
+import com.babylon.wallet.android.presentation.ui.composables.utils.HideKeyboardOnFullScroll
+import com.babylon.wallet.android.presentation.ui.composables.utils.isKeyboardVisible
+import com.babylon.wallet.android.presentation.ui.modifier.dynamicImePadding
 import com.babylon.wallet.android.utils.BiometricAuthenticationResult
 import com.babylon.wallet.android.utils.biometricAuthenticate
 import com.radixdlt.sargon.Bip39WordCount
@@ -145,7 +145,7 @@ private fun AddSingleMnemonicsContent(
                     modifier = Modifier
                         .fillMaxWidth()
                         .imePadding()
-                        .height(56.dp)
+                        .height(RadixTheme.dimensions.seedPhraseWordsSuggestionsHeight)
                         .padding(RadixTheme.dimensions.paddingSmall),
                     onCandidateClick = { candidate ->
                         focusedWordIndex?.let {
@@ -155,12 +155,11 @@ private fun AddSingleMnemonicsContent(
                     }
                 )
             } else {
-                val isEnabled = remember(state.seedPhraseState) {
-                    state.seedPhraseState.isValidSeedPhrase()
-                }
                 RadixBottomBar(
                     text = stringResource(R.string.common_continue),
-                    enabled = isEnabled,
+                    enabled = remember(state.seedPhraseState) {
+                        state.seedPhraseState.isValidSeedPhrase()
+                    },
                     onClick = onSubmitClick
                 )
             }
@@ -182,7 +181,14 @@ private fun AddSingleMnemonicsContent(
         SeedPhraseView(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(padding),
+                .dynamicImePadding(
+                    padding = padding,
+                    keyboardVisibleBottomPadding = if (isSuggestionsVisible(state)) {
+                        RadixTheme.dimensions.seedPhraseWordsSuggestionsHeight + RadixTheme.dimensions.paddingDefault
+                    } else {
+                        RadixTheme.dimensions.paddingDefault
+                    }
+                ),
             title = title,
             onWordChanged = onWordTyped,
             onPassphraseChanged = onPassphraseChanged,
@@ -206,10 +212,15 @@ private fun SeedPhraseView(
     isOlympia: Boolean
 ) {
     SecureScreen()
+
+    val scrollState = rememberScrollState()
+    HideKeyboardOnFullScroll(scrollState)
+
     Column(
         modifier = modifier
             .fillMaxSize()
-            .verticalScroll(rememberScrollState())
+            .imePadding()
+            .verticalScroll(scrollState)
     ) {
         Text(
             modifier = Modifier
@@ -319,12 +330,7 @@ private fun SeedPhraseView(
 
 @Composable
 private fun isSuggestionsVisible(state: AddSingleMnemonicViewModel.State): Boolean {
-    val density = LocalDensity.current
-    val imeInsets = WindowInsets.ime
-    val keyboardVisible by remember {
-        derivedStateOf { imeInsets.getBottom(density) > 0 }
-    }
-    return state.seedPhraseState.wordAutocompleteCandidates.isNotEmpty() && keyboardVisible
+    return state.seedPhraseState.wordAutocompleteCandidates.isNotEmpty() && isKeyboardVisible()
 }
 
 @Preview

diff --git a/...lon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicViewModel.kt b/...lon/wallet/android/presentation/onboarding/restore/mnemonic/AddSingleMnemonicViewModel.kt
@@ -56,9 +56,7 @@ class AddSingleMnemonicViewModel @Inject constructor(
     }
 
     fun onWordChanged(index: Int, value: String) {
-        seedPhraseInputDelegate.onWordChanged(index, value) {
-            sendEvent(Event.MoveToNextWord)
-        }
+        seedPhraseInputDelegate.onWordChanged(index, value)
     }
 
     fun onWordSelected(index: Int, value: String) {

diff --git a/...m/babylon/wallet/android/presentation/onboarding/restore/mnemonics/RestoreMnemonicsNav.kt b/...m/babylon/wallet/android/presentation/onboarding/restore/mnemonics/RestoreMnemonicsNav.kt
@@ -54,10 +54,13 @@ fun NavGraphBuilder.restoreMnemonicsScreen(
             }
         ),
         enterTransition = {
-            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Up)
+            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Left)
         },
         exitTransition = {
-            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Down)
+            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Right)
+        },
+        popExitTransition = {
+            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Left)
         }
     ) {
         RestoreMnemonicsScreen(