Merge pull request #1124 from radixdlt/sp/ABW-3674-ui-fixes

[ABW-3674] - Fix third party deposits text field contextual menu
radixdlt · Aug 6, 2024 · 77b3894 · 77b3894
2 parents 3ee9741 + 398f3e2
commit 77b3894
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 273 deletions.
diff --git a/...llet/android/presentation/account/settings/specificassets/SpecificAssetsDepositsScreen.kt b/...llet/android/presentation/account/settings/specificassets/SpecificAssetsDepositsScreen.kt
@@ -5,7 +5,6 @@ package com.babylon.wallet.android.presentation.account.settings.specificassets
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -67,12 +66,9 @@ import com.babylon.wallet.android.presentation.common.UiMessage
 import com.babylon.wallet.android.presentation.model.displayTitleAsNFTCollection
 import com.babylon.wallet.android.presentation.model.displayTitleAsToken
 import com.babylon.wallet.android.presentation.ui.composables.BasicPromptAlertDialog
-import com.babylon.wallet.android.presentation.ui.composables.BottomDialogHeader
-import com.babylon.wallet.android.presentation.ui.composables.DefaultModalSheetLayout
+import com.babylon.wallet.android.presentation.ui.composables.BottomSheetDialogWrapper
 import com.babylon.wallet.android.presentation.ui.composables.RadixBottomBar
 import com.babylon.wallet.android.presentation.ui.composables.RadixCenteredTopAppBar
-import com.babylon.wallet.android.presentation.ui.composables.RadixRadioButton
-import com.babylon.wallet.android.presentation.ui.composables.RadixRadioButtonDefaults
 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.Thumbnail
@@ -183,26 +179,19 @@ fun SpecificAssetsDepositsScreen(
     )
 
     if (state.isAddAssetSheetVisible) {
-        DefaultModalSheetLayout(
-            sheetState = sheetState,
-            wrapContent = true,
-            onDismissRequest = { hideCallback() },
-            sheetContent = {
-                AddAssetSheet(
-                    onResourceAddressChanged = sharedViewModel::assetExceptionAddressTyped,
-                    asset = state.assetExceptionToAdd,
-                    onAddAsset = {
-                        hideCallback()
-                        sharedViewModel.onAddAssetException()
-                    },
-                    modifier = Modifier
-                        .imePadding()
-                        .fillMaxWidth()
-                        .clip(RadixTheme.shapes.roundedRectTopDefault),
-                    onAssetExceptionRuleChanged = sharedViewModel::onAssetExceptionRuleChanged,
-                    onDismiss = { hideCallback() }
-                )
-            }
+        AddAssetSheet(
+            onResourceAddressChanged = sharedViewModel::assetExceptionAddressTyped,
+            asset = state.assetExceptionToAdd,
+            onAddAsset = {
+                hideCallback()
+                sharedViewModel.onAddAssetException()
+            },
+            modifier = Modifier
+                .imePadding()
+                .fillMaxWidth()
+                .clip(RadixTheme.shapes.roundedRectTopDefault),
+            onAssetExceptionRuleChanged = sharedViewModel::onAssetExceptionRuleChanged,
+            onDismiss = { hideCallback() }
         )
     }
 }
@@ -213,126 +202,102 @@ private fun AddAssetSheet(
     asset: AssetType.ExceptionType,
     onAddAsset: () -> Unit,
     modifier: Modifier = Modifier,
-    onDismiss: () -> Unit,
-    onAssetExceptionRuleChanged: (DepositAddressExceptionRule) -> Unit
+    onAssetExceptionRuleChanged: (DepositAddressExceptionRule) -> Unit,
+    onDismiss: () -> Unit
 ) {
     val inputFocusRequester = remember { FocusRequester() }
     LaunchedEffect(Unit) {
         inputFocusRequester.requestFocus()
     }
 
-    Column(
-        modifier = modifier
-            .verticalScroll(rememberScrollState())
-            .imePadding(),
-        verticalArrangement = Arrangement.Center,
+    BottomSheetDialogWrapper(
+        addScrim = true,
+        showDragHandle = true,
+        onDismiss = onDismiss,
+        showDefaultTopBar = true
     ) {
-        BottomDialogHeader(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(bottom = RadixTheme.dimensions.paddingSmall),
-            onDismissRequest = onDismiss
-        )
         Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(
-                    start = RadixTheme.dimensions.paddingDefault,
-                    end = RadixTheme.dimensions.paddingDefault,
-                    bottom = RadixTheme.dimensions.paddingDefault
-                )
+            modifier = modifier
+                .verticalScroll(rememberScrollState())
+                .imePadding(),
+            verticalArrangement = Arrangement.Center,
         ) {
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = RadixTheme.dimensions.paddingDefault),
-                text = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetTitle),
-                style = RadixTheme.typography.title,
-                color = RadixTheme.colors.gray1,
-                textAlign = TextAlign.Center
-            )
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = RadixTheme.dimensions.paddingLarge),
-                text = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetSubtitle),
-                style = RadixTheme.typography.body1Regular,
-                color = RadixTheme.colors.gray1,
-                textAlign = TextAlign.Center
-            )
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
-            RadixTextField(
+            Column(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = RadixTheme.dimensions.paddingDefault)
-                    .focusRequester(inputFocusRequester),
-                onValueChanged = onResourceAddressChanged,
-                value = asset.addressToDisplay,
-                hint = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetInputHint),
-                hintColor = RadixTheme.colors.gray2,
-                singleLine = true,
-                error = null
-            )
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
-            Row(
-                modifier = Modifier.align(Alignment.CenterHorizontally),
-                horizontalArrangement = Arrangement.spacedBy(RadixTheme.dimensions.paddingDefault)
+                    .fillMaxSize()
+                    .padding(
+                        start = RadixTheme.dimensions.paddingDefault,
+                        end = RadixTheme.dimensions.paddingDefault,
+                        bottom = RadixTheme.dimensions.paddingDefault
+                    )
             ) {
-                LabeledRadioButton(
-                    label = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetAllow),
-                    selected = asset.rule == DepositAddressExceptionRule.ALLOW,
-                    onSelected = {
-                        onAssetExceptionRuleChanged(DepositAddressExceptionRule.ALLOW)
-                    }
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = RadixTheme.dimensions.paddingDefault),
+                    text = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetTitle),
+                    style = RadixTheme.typography.title,
+                    color = RadixTheme.colors.gray1,
+                    textAlign = TextAlign.Center
                 )
-                LabeledRadioButton(
-                    label = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetDeny),
-                    selected = asset.rule == DepositAddressExceptionRule.DENY,
-                    onSelected = {
-                        onAssetExceptionRuleChanged(DepositAddressExceptionRule.DENY)
-                    }
+                Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = RadixTheme.dimensions.paddingLarge),
+                    text = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetSubtitle),
+                    style = RadixTheme.typography.body1Regular,
+                    color = RadixTheme.colors.gray1,
+                    textAlign = TextAlign.Center
+                )
+                Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
+                RadixTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = RadixTheme.dimensions.paddingDefault)
+                        .focusRequester(inputFocusRequester),
+                    onValueChanged = onResourceAddressChanged,
+                    value = asset.addressToDisplay,
+                    hint = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetInputHint),
+                    hintColor = RadixTheme.colors.gray2,
+                    singleLine = true,
+                    error = null
+                )
+                Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
+                Row(
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                    horizontalArrangement = Arrangement.spacedBy(RadixTheme.dimensions.paddingDefault)
+                ) {
+                    LabeledRadioButton(
+                        label = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetAllow),
+                        selected = asset.rule == DepositAddressExceptionRule.ALLOW,
+                        onSelected = {
+                            onAssetExceptionRuleChanged(DepositAddressExceptionRule.ALLOW)
+                        }
+                    )
+                    LabeledRadioButton(
+                        label = stringResource(id = R.string.accountSettings_specificAssetsDeposits_addAnAssetDeny),
+                        selected = asset.rule == DepositAddressExceptionRule.DENY,
+                        onSelected = {
+                            onAssetExceptionRuleChanged(DepositAddressExceptionRule.DENY)
+                        }
+                    )
+                }
+                Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingXXLarge))
+                RadixPrimaryButton(
+                    text = stringResource(R.string.accountSettings_specificAssetsDeposits_addAnAssetButton),
+                    onClick = {
+                        onAddAsset()
+                    },
+                    modifier = Modifier.fillMaxWidth(),
+                    enabled = asset.addressValid,
+                    isLoading = false
                 )
             }
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingXXLarge))
-            RadixPrimaryButton(
-                text = stringResource(R.string.accountSettings_specificAssetsDeposits_addAnAssetButton),
-                onClick = {
-                    onAddAsset()
-                },
-                modifier = Modifier.fillMaxWidth(),
-                enabled = asset.addressValid,
-                isLoading = false
-            )
         }
     }
 }
 
-@Composable
-private fun LabeledRadioButton(
-    modifier: Modifier = Modifier,
-    label: String,
-    selected: Boolean,
-    onSelected: () -> Unit
-) {
-    Row(
-        modifier = modifier.clickable { onSelected() },
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        RadixRadioButton(
-            selected = selected,
-            colors = RadixRadioButtonDefaults.darkColors(),
-            onClick = onSelected,
-        )
-        Text(
-            text = label,
-            style = RadixTheme.typography.body1HighImportance,
-            color = RadixTheme.colors.gray1,
-            textAlign = TextAlign.Center
-        )
-    }
-}
-
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun SpecificAssetsDepositsContent(

diff --git a/...et/android/presentation/account/settings/specificassets/composables/LabeledRadioButton.kt b/...et/android/presentation/account/settings/specificassets/composables/LabeledRadioButton.kt
@@ -1,21 +1,19 @@
 package com.babylon.wallet.android.presentation.account.settings.specificassets.composables
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.RadioButton
-import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.babylon.wallet.android.R
 import com.babylon.wallet.android.designsystem.theme.RadixTheme
 import com.babylon.wallet.android.presentation.ui.RadixWalletPreviewTheme
+import com.babylon.wallet.android.presentation.ui.composables.RadixRadioButton
+import com.babylon.wallet.android.presentation.ui.composables.RadixRadioButtonDefaults
 
 @Composable
 fun LabeledRadioButton(
@@ -24,23 +22,18 @@ fun LabeledRadioButton(
     selected: Boolean,
     onSelected: () -> Unit
 ) {
-    Box(
+    Row(
         modifier = modifier.clickable {
             onSelected()
         },
-        contentAlignment = Alignment.CenterStart
+        verticalAlignment = Alignment.CenterVertically
     ) {
-        RadioButton(
+        RadixRadioButton(
             selected = selected,
-            colors = RadioButtonDefaults.colors(
-                selectedColor = RadixTheme.colors.gray1,
-                unselectedColor = RadixTheme.colors.gray3,
-                disabledSelectedColor = RadixTheme.colors.white
-            ),
+            colors = RadixRadioButtonDefaults.darkColors(),
             onClick = onSelected,
         )
         Text(
-            modifier = Modifier.padding(start = 40.dp),
             text = label,
             style = RadixTheme.typography.body1HighImportance,
             color = RadixTheme.colors.gray1,