feat(#138): Improve Unlock Screen UI and add dark mode toggle (#122)

Author: JosephSanjaya

app/build.gradle.kts

@@ -220,6 +220,7 @@ dependencies {
     implementation(libs.bundles.google.play.feature.delivery)
     implementation(libs.bundles.google.play.review)
     implementation(libs.kotlinx.serialization.json)
+    implementation(libs.kotlinx.coroutines.android)
     implementation (libs.airbnb.lottie.compose)
     implementation(platform(libs.koin.bom))
     implementation(libs.bundles.koin)
@@ -243,6 +244,8 @@ dependencies {
 
     testImplementation(libs.junit)
     testImplementation(libs.mockk)
+    testImplementation(libs.turbine)
+    testImplementation(libs.kotlinx.coroutines.tests)
 
     androidTestImplementation(platform(libs.androidx.compose.bom))
     androidTestImplementation(libs.bundles.androidx.compose.ui.test)

app/src/main/java/com/brainwallet/navigation/UiEffect.kt

@@ -19,6 +19,7 @@ sealed class UiEffect {
     }
 
     data class ShowDialog(val name: String): UiEffect()
+    data object ShowMoonPayDialog: UiEffect()
 
     data class ShowMessage(
         val message: String,

app/src/main/java/com/brainwallet/tools/qrcode/QRUtils.java

@@ -7,6 +7,7 @@
 import android.content.Context;
 import android.content.Intent;
 import android.graphics.Bitmap;
+import android.graphics.Color;
 import android.graphics.Point;
 import android.view.Display;
 import android.view.WindowManager;
@@ -66,6 +67,51 @@ public static Bitmap encodeAsBitmap(String content, int dimension) {
         return bitmap;
     }
 
+    public static Bitmap encodeAsTransparentBitmap(String content, int dimension) {
+        if (content == null) {
+            return null;
+        }
+
+        Map<EncodeHintType, Object> hints = new EnumMap<>(EncodeHintType.class);
+        String encoding = guessAppropriateEncoding(content);
+        if (encoding != null) {
+            hints.put(EncodeHintType.CHARACTER_SET, encoding);
+        }
+        hints.put(EncodeHintType.MARGIN, 1);
+
+        BitMatrix result;
+        try {
+            result = new MultiFormatWriter().encode(
+                    content,
+                    BarcodeFormat.QR_CODE,
+                    dimension,
+                    dimension,
+                    hints
+            );
+        } catch (IllegalArgumentException | WriterException e) {
+            Timber.e(e);
+            return null;
+        }
+
+        if (result == null) return null;
+
+        int width = result.getWidth();
+        int height = result.getHeight();
+        int[] pixels = new int[width * height];
+
+        for (int y = 0; y < height; y++) {
+            int offset = y * width;
+            for (int x = 0; x < width; x++) {
+                // Black pixels stay black, white becomes transparent
+                pixels[offset + x] = result.get(x, y) ? Color.BLACK : Color.TRANSPARENT;
+            }
+        }
+
+        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+        bitmap.setPixels(pixels, 0, width, 0, 0, width, height);
+        return bitmap;
+    }
+
     public static boolean generateQR(Context ctx, String bitcoinURL, ImageView qrcode) {
         if (qrcode == null || bitcoinURL == null || bitcoinURL.isEmpty()) return false;
         WindowManager manager = (WindowManager) ctx.getSystemService(Activity.WINDOW_SERVICE);
@@ -94,7 +140,7 @@ public static Bitmap generateQR(Context ctx, String litecoinUrl) {
         int smallerDimension = Math.min(width, height);
         smallerDimension = (int) (smallerDimension * 0.45f);
         Bitmap bitmap = null;
-        bitmap = QRUtils.encodeAsBitmap(litecoinUrl, smallerDimension);
+        bitmap = QRUtils.encodeAsTransparentBitmap(litecoinUrl, smallerDimension);
         return bitmap;
     }
 

app/src/main/java/com/brainwallet/ui/composable/BrainWalletLogo.kt

@@ -0,0 +1,39 @@
+package com.brainwallet.ui.composable
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.brainwallet.R
+import com.brainwallet.data.model.AppSetting
+import com.brainwallet.ui.theme.BrainwalletAppTheme
+import com.brainwallet.ui.theme.BrainwalletTheme
+import com.brainwallet.ui.theme.LocalDarkModeFlag
+
+@Composable
+fun BrainWalletLogo(modifier: Modifier = Modifier) {
+    val iconLogo = if (LocalDarkModeFlag.current) {
+        R.drawable.brainwallet_logotype_white
+    } else {
+        R.drawable.brainwallet_logotype_color
+    }
+    Image(
+        painterResource(iconLogo),
+        contentDescription = "brainwallet_logo",
+        modifier = modifier
+    )
+}
+
+@PreviewLightDark
+@Composable
+private fun BrainWalletLogoPreview() {
+    BrainwalletAppTheme(appSetting = AppSetting(isDarkMode = isSystemInDarkTheme())) {
+        Box(modifier = Modifier.background(BrainwalletTheme.colors.background)) {
+            BrainWalletLogo()
+        }
+    }
+}

app/src/main/java/com/brainwallet/ui/composable/DarkModeToggleButton.kt

@@ -1,10 +1,12 @@
 package com.brainwallet.ui.composable
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconToggleButton
@@ -14,27 +16,29 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.brainwallet.R
+import com.brainwallet.data.model.AppSetting
+import com.brainwallet.ui.theme.BrainwalletAppTheme
 import com.brainwallet.ui.theme.BrainwalletTheme
 
 @Composable
 fun DarkModeToggleButton(
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
+    iconButtonSizeInDp: Int = 32
 ) {
-    val iconButtonSize = 32
-
     IconToggleButton(
         checked = checked,
         onCheckedChange = onCheckedChange,
-        modifier = modifier,
+        modifier = modifier.size(iconButtonSizeInDp.dp),
     ) {
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .width(iconButtonSize.dp)
+                .size(iconButtonSizeInDp.dp)
                 .aspectRatio(1f)
                 .clip(CircleShape)
                 .border(
@@ -47,12 +51,21 @@ fun DarkModeToggleButton(
             Icon(
                 modifier = Modifier
                     .align(Alignment.Center)
-                    .width(iconButtonSize.dp)
-                    .aspectRatio(1f),
+                    .size((iconButtonSizeInDp * 0.6).dp),
                 tint = if (checked) BrainwalletTheme.colors.warn else BrainwalletTheme.colors.surface,
                 painter = painterResource(if (checked) R.drawable.ic_light_mode else R.drawable.ic_dark_mode),
                 contentDescription = stringResource(R.string.toggle_dark_mode),
             )
         }
     }
-}
+}
+
+@PreviewLightDark
+@Composable
+private fun DarkModeToggleButtonPreview() {
+    BrainwalletAppTheme(AppSetting(isDarkMode = isSystemInDarkTheme())) {
+        Box(modifier = Modifier.background(BrainwalletTheme.colors.background)) {
+            DarkModeToggleButton(checked = isSystemInDarkTheme(), onCheckedChange = {}, )
+        }
+    }
+}

app/src/main/java/com/brainwallet/ui/composable/Foundation.kt

@@ -27,6 +27,7 @@ import com.brainwallet.ui.theme.BrainwalletTheme
 fun BrainwalletScaffold(
     modifier: Modifier = Modifier,
     topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
     floatingActionButton: @Composable () -> Unit = {},
     content: @Composable (PaddingValues) -> Unit
 ) {
@@ -35,6 +36,7 @@ fun BrainwalletScaffold(
         containerColor = BrainwalletTheme.colors.surface,
         contentColor = BrainwalletTheme.colors.content,
         topBar = topBar,
+        bottomBar = bottomBar,
         floatingActionButton = floatingActionButton,
         content = content
     )

app/src/main/java/com/brainwallet/ui/composable/PasscodeIndicator.kt

@@ -3,17 +3,20 @@ package com.brainwallet.ui.composable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 @Composable
 fun PasscodeIndicator(
-    passcode: List<Int>
+    passcode: List<Int>,
+    modifier: Modifier = Modifier,
 ) {
     Row(
+        modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(12.dp)
     ) {
         passcode.forEach { digit ->
             PinDotItem(checked = digit > -1)
         }
     }
-}
+}