[#1612] QR Code screen

* Refactor Receive screen architecture - Added QrCodeScreen architecture and basic UI * QrCode Detail screen UI + logic * Improve share intent + Attach snackbar to the failed sharing attempt + Fix tests * Changelogs update * Ktlint warnings fix
Electric-Coin-Company · Oct 8, 2024 · c6257d8 · c6257d8
1 parent 1fedce1
commit c6257d8
Show file tree

Hide file tree

Showing 46 changed files with 1,292 additions and 151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,9 @@ and this application adheres to [Semantic Versioning](https://semver.org/spec/v2
 - Confirmation screen redesigned
 - History item redesigned
 
+### Added
+- New QR Code detail screen has been added
+
 ## [1.2 (739)] - 2024-09-27 
 
 ### Changed

diff --git a/docs/whatsNew/WHATS_NEW_EN.md b/docs/whatsNew/WHATS_NEW_EN.md
@@ -15,6 +15,9 @@ directly impact users rather than highlighting other key architectural updates.*
 - Confirmation screen redesigned
 - History item redesigned
 
+### Added
+- New QR Code detail screen has been added
+
 ## [1.2 (739)] - 2024-09-27
 
 ### Changed

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt
@@ -34,6 +34,7 @@ import androidx.compose.ui.graphics.PaintingStyle
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.text.TextStyle
@@ -467,6 +468,7 @@ private enum class ButtonMode { Pressed, Idle }
 
 data class ButtonState(
     val text: StringResource,
+    val leadingIconVector: Painter? = null,
     val isEnabled: Boolean = true,
     val isLoading: Boolean = false,
     val onClick: () -> Unit = {},

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiBadge.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiBadge.kt
@@ -1,15 +1,22 @@
 package co.electriccoin.zcash.ui.design.component
 
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
@@ -23,10 +30,12 @@ import co.electriccoin.zcash.ui.design.util.stringRes
 fun ZashiBadge(
     text: String,
     modifier: Modifier = Modifier,
+    leadingIconVector: Painter? = null,
     colors: ZashiBadgeColors = ZashiBadgeDefaults.successBadgeColors()
 ) {
     ZashiBadge(
         text = stringRes(text),
+        leadingIconVector = leadingIconVector,
         modifier = modifier,
         colors = colors
     )
@@ -36,6 +45,7 @@ fun ZashiBadge(
 fun ZashiBadge(
     text: StringResource,
     modifier: Modifier = Modifier,
+    leadingIconVector: Painter? = null,
     colors: ZashiBadgeColors = ZashiBadgeDefaults.successBadgeColors()
 ) {
     Surface(
@@ -44,9 +54,20 @@ fun ZashiBadge(
         color = colors.container,
         border = BorderStroke(1.dp, colors.border),
     ) {
-        Box(
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier.padding(horizontal = 10.dp, vertical = 4.dp)
         ) {
+            if (leadingIconVector != null) {
+                Image(
+                    painter = leadingIconVector,
+                    contentDescription = null,
+                    modifier = Modifier.size(14.dp)
+                )
+
+                Spacer(modifier = Modifier.width(4.dp))
+            }
+
             Text(
                 text = text.getValue(),
                 style = ZcashTheme.extendedTypography.transactionItemStyles.contentMedium,
@@ -82,5 +103,8 @@ object ZashiBadgeDefaults {
 @Composable
 private fun BadgePreview() =
     ZcashTheme {
-        ZashiBadge(text = stringRes("Badge"))
+        ZashiBadge(
+            text = stringRes("Badge"),
+            leadingIconVector = painterResource(id = android.R.drawable.ic_input_add),
+        )
     }
diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiButton.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiButton.kt
@@ -1,10 +1,12 @@
 package co.electriccoin.zcash.ui.design.component
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
@@ -14,6 +16,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.R
@@ -32,6 +36,7 @@ fun ZashiButton(
 ) {
     ZashiButton(
         text = state.text.getValue(),
+        leadingIcon = state.leadingIconVector,
         onClick = state.onClick,
         modifier = modifier,
         enabled = state.isEnabled,
@@ -47,13 +52,25 @@ fun ZashiButton(
     text: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    leadingIcon: Painter? = null,
     enabled: Boolean = true,
     isLoading: Boolean = false,
     colors: ZashiButtonColors = ZashiButtonDefaults.primaryColors(),
     content: @Composable RowScope.(ZashiButtonScope) -> Unit = ZashiButtonDefaults.content
 ) {
     val scope =
         object : ZashiButtonScope {
+            @Composable
+            override fun LeadingIcon() {
+                if (leadingIcon != null) {
+                    Image(
+                        painter = leadingIcon,
+                        contentDescription = null,
+                        modifier = Modifier.size(20.dp)
+                    )
+                }
+            }
+
             @Composable
             override fun Text() {
                 Text(
@@ -92,6 +109,9 @@ fun ZashiButton(
 }
 
 interface ZashiButtonScope {
+    @Composable
+    fun LeadingIcon()
+
     @Composable
     fun Text()
 
@@ -102,6 +122,8 @@ interface ZashiButtonScope {
 object ZashiButtonDefaults {
     val content: @Composable RowScope.(ZashiButtonScope) -> Unit
         get() = { scope ->
+            scope.LeadingIcon()
+            Spacer(modifier = Modifier.width(6.dp))
             scope.Text()
             Spacer(modifier = Modifier.width(6.dp))
             scope.Loading()
@@ -121,6 +143,20 @@ object ZashiButtonDefaults {
         borderColor = Color.Unspecified
     )
 
+    @Composable
+    fun secondaryColors(
+        containerColor: Color = ZashiColors.Btns.Secondary.btnSecondaryBg,
+        contentColor: Color = ZashiColors.Btns.Secondary.btnSecondaryFg,
+        disabledContainerColor: Color = ZashiColors.Btns.Secondary.btnSecondaryBgDisabled,
+        disabledContentColor: Color = ZashiColors.Btns.Secondary.btnSecondaryFg,
+    ) = ZashiButtonColors(
+        containerColor = containerColor,
+        contentColor = contentColor,
+        disabledContainerColor = disabledContainerColor,
+        disabledContentColor = disabledContentColor,
+        borderColor = Color.Unspecified
+    )
+
     @Composable
     fun tertiaryColors(
         containerColor: Color = ZashiColors.Btns.Tertiary.btnTertiaryBg,
@@ -169,7 +205,6 @@ private fun ZashiButtonColors.toButtonColors() =
         disabledContentColor = disabledContentColor,
     )
 
-@Suppress("UnusedPrivateMember")
 @PreviewScreens
 @Composable
 private fun PrimaryPreview() =
@@ -183,7 +218,20 @@ private fun PrimaryPreview() =
         }
     }
 
-@Suppress("UnusedPrivateMember")
+@PreviewScreens
+@Composable
+private fun PrimaryWithIconPreview() =
+    ZcashTheme {
+        BlankSurface {
+            ZashiButton(
+                modifier = Modifier.fillMaxWidth(),
+                text = "Primary",
+                leadingIcon = painterResource(id = android.R.drawable.ic_secure),
+                onClick = {},
+            )
+        }
+    }
+
 @PreviewScreens
 @Composable
 private fun TertiaryPreview() =
@@ -198,7 +246,6 @@ private fun TertiaryPreview() =
         }
     }
 
-@Suppress("UnusedPrivateMember")
 @PreviewScreens
 @Composable
 private fun DestroyPreview() =

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiTopAppBar.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/ZashiTopAppBar.kt
@@ -4,14 +4,15 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
+import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.design.theme.internal.SecondaryTypography
 import co.electriccoin.zcash.ui.design.theme.internal.TopAppBarColors
 
 @Composable
 @Suppress("LongParameterList")
 fun ZashiSmallTopAppBar(
-    title: String,
+    title: String?,
     subtitle: String?,
     modifier: Modifier = Modifier,
     showTitleLogo: Boolean = false,
@@ -32,3 +33,13 @@ fun ZashiSmallTopAppBar(
         titleStyle = SecondaryTypography.headlineSmall.copy(fontWeight = FontWeight.SemiBold)
     )
 }
+
+@PreviewScreens
+@Composable
+private fun ZashiSmallTopAppBarPreview() =
+    ZcashTheme {
+        ZashiSmallTopAppBar(
+            title = "Test Title",
+            subtitle = "Subtitle",
+        )
+    }
diff --git a/ui-design-lib/src/main/res/ui/common/drawable-night/ic_close_full.xml b/ui-design-lib/src/main/res/ui/common/drawable-night/ic_close_full.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,12C0,5.373 5.373,0 12,0H28C34.627,0 40,5.373 40,12V28C40,34.627 34.627,40 28,40H12C5.373,40 0,34.627 0,28V12Z"
+      android:fillColor="#343031"/>
+  <path
+      android:pathData="M26,14L14,26M14,14L26,26"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#D2D1D2"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/ui-design-lib/src/main/res/ui/common/drawable/ic_close_full.xml b/ui-design-lib/src/main/res/ui/common/drawable/ic_close_full.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,12C0,5.373 5.373,0 12,0H28C34.627,0 40,5.373 40,12V28C40,34.627 34.627,40 28,40H12C5.373,40 0,34.627 0,28V12Z"
+      android:fillColor="#EBEBE6"/>
+  <path
+      android:pathData="M26,14L14,26M14,14L26,26"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#4D4941"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/ui-lib/build.gradle.kts b/ui-lib/build.gradle.kts
@@ -46,6 +46,7 @@ android {
                     "src/main/res/ui/choose_server",
                     "src/main/res/ui/new_wallet_recovery",
                     "src/main/res/ui/onboarding",
+                    "src/main/res/ui/qr_code",
                     "src/main/res/ui/receive",
                     "src/main/res/ui/restore",
                     "src/main/res/ui/restore_success",

diff --git a/ui-lib/src/androidTest/java/co/electriccoin/zcash/ui/fixture/MockSynchronizer.kt b/ui-lib/src/androidTest/java/co/electriccoin/zcash/ui/fixture/MockSynchronizer.kt
@@ -158,6 +158,13 @@ internal class MockSynchronizer : CloseableSynchronizer {
         error("Intentionally not implemented in ${MockSynchronizer::class.simpleName} yet.")
     }
 
+    override suspend fun proposeFulfillingPaymentUri(
+        account: Account,
+        uri: String
+    ): Proposal {
+        error("Intentionally not implemented in ${MockSynchronizer::class.simpleName} yet.")
+    }
+
     override suspend fun quickRewind() {
         error("Intentionally not implemented in ${MockSynchronizer::class.simpleName} implementation.")
     }

diff --git a/...src/androidTest/java/co/electriccoin/zcash/ui/screen/exportdata/util/FileShareUtilTest.kt b/...src/androidTest/java/co/electriccoin/zcash/ui/screen/exportdata/util/FileShareUtilTest.kt
@@ -28,6 +28,8 @@ class FileShareUtilTest {
                 context = getAppContext(),
                 dataFilePath = tempFilePath.pathString,
                 fileType = FileShareUtil.ZASHI_INTERNAL_DATA_MIME_TYPE,
+                shareText = null,
+                sharePickerText = "Test Picker Title",
                 versionInfo = VersionInfoFixture.new()
             )
         assertEquals(intent.action, Intent.ACTION_VIEW)

diff --git a/...src/androidTest/java/co/electriccoin/zcash/ui/screen/receive/view/ReceiveViewTestSetup.kt b/...src/androidTest/java/co/electriccoin/zcash/ui/screen/receive/view/ReceiveViewTestSetup.kt
@@ -7,6 +7,8 @@ import co.electriccoin.zcash.ui.common.model.TopAppBarSubTitleState
 import co.electriccoin.zcash.ui.common.model.VersionInfo
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
+import co.electriccoin.zcash.ui.screen.receive.model.ReceiveState
+import kotlinx.coroutines.runBlocking
 import java.util.concurrent.atomic.AtomicInteger
 
 class ReceiveViewTestSetup(
@@ -31,17 +33,20 @@ class ReceiveViewTestSetup(
         composeTestRule.setContent {
             ZcashTheme {
                 ZcashTheme {
-                    Receive(
-                        walletAddresses = walletAddresses,
+                    ReceiveView(
+                        state =
+                            ReceiveState.Prepared(
+                                walletAddresses = runBlocking { walletAddresses },
+                                isTestnet = versionInfo.isTestnet,
+                                onAddressCopy = {},
+                                onQrCode = {},
+                                onSettings = {
+                                    onSettingsCount.getAndIncrement()
+                                },
+                                onRequest = {},
+                            ),
                         snackbarHostState = SnackbarHostState(),
-                        onSettings = {
-                            onSettingsCount.getAndIncrement()
-                        },
-                        onAddrCopyToClipboard = {},
-                        onQrCode = {},
-                        onRequest = {},
                         topAppBarSubTitleState = TopAppBarSubTitleState.None,
-                        versionInfo = versionInfo,
                     )
                 }
             }

diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/di/UseCaseModule.kt b/ui-lib/src/main/java/co/electriccoin/zcash/di/UseCaseModule.kt
@@ -1,6 +1,8 @@
 package co.electriccoin.zcash.di
 
+import co.electriccoin.zcash.ui.common.usecase.CopyToClipboardUseCase
 import co.electriccoin.zcash.ui.common.usecase.DeleteContactUseCase
+import co.electriccoin.zcash.ui.common.usecase.GetAddressesUseCase
 import co.electriccoin.zcash.ui.common.usecase.GetContactUseCase
 import co.electriccoin.zcash.ui.common.usecase.GetPersistableWalletUseCase
 import co.electriccoin.zcash.ui.common.usecase.GetSelectedEndpointUseCase
@@ -43,4 +45,6 @@ val useCaseModule =
         singleOf(::UpdateContactUseCase)
         singleOf(::DeleteContactUseCase)
         singleOf(::GetContactUseCase)
+        singleOf(::GetAddressesUseCase)
+        singleOf(::CopyToClipboardUseCase)
     }