feat: add shortcuts customization (#1385)

* fix: don't add dash prefix to shared address

* feat: shortcuts UI and customization

* feat: handle SECURE_NOW removal properly

* chore: cleanup

* chore: coderabbit ai suggestions

* feat: shortcuts info panel (#1392)

* feat: info panel

* feat: show on second launch logic

* fix: clear shortcuts when the wallet is reset

* fix: fonts

---------

Co-authored-by: HashEngineering <[email protected]>

Author: Syn-McJ

build.gradle

@@ -28,7 +28,7 @@ buildscript {
         // UI
         materialVersion = "1.6.1"
         browserVersion = "1.3.0"
-        constrainLayoutVersion = '2.1.4'
+        constrainLayoutVersion = '2.2.1'
         recyclerViewVersion = "1.2.1"
         glideVersion = '4.12.0'
         zxingVersion = '3.3.3' // Don't update. 3.3.3 is the maximum to support Android 6.x

common/src/main/java/org/dash/wallet/common/data/WalletUIConfig.kt

@@ -27,6 +27,7 @@ import org.dash.wallet.common.services.ExchangeRatesProvider
 import org.dash.wallet.common.util.Constants
 import javax.inject.Inject
 import javax.inject.Singleton
+import androidx.core.content.edit
 
 @Singleton
 // Intended for the UI settings which affect what the user sees on the screen.
@@ -65,6 +66,8 @@ open class WalletUIConfig @Inject constructor(
         val EXCHANGE_CURRENCY_DETECTED = booleanPreferencesKey("exchange_currency_detected")
         val LAST_TOTAL_BALANCE = longPreferencesKey("last_total_balance")
         val LAST_MIXED_BALANCE = longPreferencesKey("last_mixed_balance")
+        val CUSTOMIZED_SHORTCUTS = stringPreferencesKey("customized_shortcuts")
+        val IS_SHORTCUT_INFO_HIDDEN = booleanPreferencesKey("is_shortcut_info_hidden")
     }
 
     suspend fun getExchangeCurrencyCode(): String {
@@ -111,7 +114,7 @@ class ExchangeCurrencyMigration(
                 } else {
                     otherName
                 }
-                sharedPreferences.edit().putString(WalletUIConfig.SELECTED_CURRENCY.name, fixedValue).apply()
+                sharedPreferences.edit { putString(WalletUIConfig.SELECTED_CURRENCY.name, fixedValue) }
             }
             // The database might have obsolete currencies as well
             exchangeRates.cleanupObsoleteCurrencies()

common/src/main/java/org/dash/wallet/common/services/analytics/AnalyticsConstants.kt

@@ -126,6 +126,7 @@ object AnalyticsConstants {
         const val SHORTCUT_SCAN_TO_PAY = "shortcut_scan_to_pay"
         const val SHORTCUT_SEND_TO_ADDRESS = "shortcut_send_to_address"
         const val SHORTCUT_RECEIVE = "shortcut_receive"
+        const val SHORTCUT_SEND = "shortcut_send"
         const val SHORTCUT_BUY_AND_SELL = "shortcut_buy_and_sell_dash"
         const val SHORTCUT_EXPLORE = "shortcut_explore"
         const val HIDE_BALANCE = "home_hide_balance"

common/src/main/java/org/dash/wallet/common/ui/components/InfoPanel.kt

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2024 Dash Core Group.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package org.dash.wallet.common.ui.components
+
+import androidx.annotation.DrawableRes
+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
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.dash.wallet.common.R
+
+@Composable
+fun InfoPanel(
+    title: String,
+    description: String,
+    modifier: Modifier = Modifier,
+    @DrawableRes leftIconRes: Int? = null,
+    @DrawableRes actionIconRes: Int? = null,
+    onAction: (() -> Unit)? = null
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(16.dp))
+            .shadow(elevation = 20.dp, spotColor = Color(0x1AB8C1CC), ambientColor = Color(0x1AB8C1CC)),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(14.dp, 15.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(10.dp)
+        ) {
+            leftIconRes?.let {
+                Box(
+                    modifier = Modifier
+                        .size(34.dp),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        painter = painterResource(id = leftIconRes),
+                        contentDescription = null,
+                        tint = Color.Unspecified
+                    )
+                }
+            }
+
+            Column(
+                modifier = Modifier.weight(1f),
+                verticalArrangement = Arrangement.spacedBy(2.dp)
+            ) {
+                Text(
+                    text = title,
+                    style = MyTheme.CaptionMedium
+                )
+                
+                Text(
+                    text = description,
+                    style = MyTheme.Caption,
+                    color = MyTheme.Colors.textSecondary
+                )
+            }
+
+            if (actionIconRes != null && onAction != null) {
+                Box(
+                    modifier = Modifier
+                        .size(28.dp)
+                        .clickable { onAction() },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        painter = painterResource(id = actionIconRes),
+                        contentDescription = "Close",
+                        tint = MyTheme.Colors.gray
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun InfoPanelPreview() {
+    InfoPanel(
+        title = "Customize shortcut bar",
+        description = "Hold any button above to replace it with the function you need",
+        leftIconRes = R.drawable.ic_dash_blue_filled,
+        actionIconRes = R.drawable.ic_popup_close,
+        onAction = {}
+    )
+} 

common/src/main/java/org/dash/wallet/common/ui/components/MenuItem.kt

@@ -56,7 +56,7 @@ fun MenuItem(
         modifier = Modifier
             .fillMaxWidth()
             .padding(10.dp)
-            .background(Color.White, RoundedCornerShape(8.dp))
+            .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(8.dp))
             .clickable { action?.invoke() }
             .padding(10.dp),
         verticalAlignment = Alignment.CenterVertically

common/src/main/java/org/dash/wallet/common/ui/components/MyTheme.kt

@@ -28,57 +28,75 @@ import org.dash.wallet.common.R
 
 object MyTheme {
     val ToastBackground = Color(0xff191c1f).copy(alpha = 0.9f)
-    val InterFont = FontFamily(Font(R.font.inter))
+    private val interRegular = FontFamily(Font(R.font.inter_regular))
+    private val interMedium = FontFamily(Font(R.font.inter_medium))
+    private val interSemibold = FontFamily(Font(R.font.inter_semibold))
+    private val interBold = FontFamily(Font(R.font.inter_bold))
 
     val Micro = TextStyle(
         fontSize = 10.sp,
         lineHeight = 16.sp,
-        fontFamily = InterFont,
+        fontFamily = interRegular,
         fontWeight = FontWeight(500),
         textAlign = TextAlign.Center,
     )
 
     val CaptionMedium = TextStyle(
         fontSize = 13.sp,
         lineHeight = 18.sp,
-        fontFamily = InterFont,
+        fontFamily = interMedium,
         fontWeight = FontWeight(500)
     )
 
+    val Overline = TextStyle(
+        fontSize = 12.sp,
+        lineHeight = 16.sp,
+        fontFamily = interMedium,
+        fontWeight = FontWeight(500),
+        textAlign = TextAlign.Center
+    )
+
     val OverlineSemibold = TextStyle(
         fontSize = 12.sp,
         lineHeight = 16.sp,
-        fontFamily = InterFont,
+        fontFamily = interSemibold,
         fontWeight = FontWeight(600),
         textAlign = TextAlign.Center
     )
 
+    val Caption = TextStyle(
+        fontSize = 13.sp,
+        lineHeight = 18.sp,
+        fontFamily = interRegular,
+        fontWeight = FontWeight(400)
+    )
+
     val OverlineMedium = TextStyle(
         fontSize = 12.sp,
         lineHeight = 16.sp,
-        fontFamily = InterFont,
+        fontFamily = interMedium,
         fontWeight = FontWeight(500),
         textAlign = TextAlign.Center
     )
 
     val Body2Regular = TextStyle(
         fontSize = 14.sp,
         lineHeight = 20.sp,
-        fontFamily = InterFont,
+        fontFamily = interRegular,
         fontWeight = FontWeight(400)
     )
 
     val SubtitleSemibold = TextStyle(
         fontSize = 16.sp,
         lineHeight = 22.sp,
-        fontFamily = InterFont,
+        fontFamily = interSemibold,
         fontWeight = FontWeight(600)
     )
 
     val H6Bold = TextStyle(
         fontSize = 20.sp,
         lineHeight = 26.sp,
-        fontFamily = InterFont,
+        fontFamily = interBold,
         fontWeight = FontWeight(700)
     )
 
@@ -93,6 +111,7 @@ object MyTheme {
         val primary40 = Color(0x66191C1F)
         val dashBlue = Color(0xFF008DE4)
         val dashBlue5 = Color(0x0D008DE4)
+        val gray = Color(0xFFB0B6BC)
         val gray400 = Color(0xFF75808A)
     }
 }

common/src/main/java/org/dash/wallet/common/ui/receive/ReceiveInfoView.kt

@@ -80,7 +80,7 @@ class ReceiveInfoView(context: Context, attrs: AttributeSet?) : ConstraintLayout
             }
             binding.shareButton.setOnClickListener {
                 onShareClicked?.invoke()
-                handleShare(paymentRequestUri)
+                address?.let { handleShare(it.toBase58()) }
             }
 
             refresh()