feat(@desktop/wallet): Header Gradient

fixes #10333

src/app/modules/main/wallet_section/overview/item.nim

@@ -1,4 +1,4 @@
-import strformat
+import strformat, strutils
 
 type
   Item* = object
@@ -10,6 +10,7 @@ type
     emoji: string
     isAllAccounts: bool
     hideWatchAccounts: bool
+    colors: seq[string]
 
 proc initItem*(
   name: string = "",
@@ -19,7 +20,8 @@ proc initItem*(
   color: string,
   emoji: string,
   isAllAccounts: bool = false,
-  hideWatchAccounts: bool = false
+  hideWatchAccounts: bool = false,
+  colors: seq[string] = @[]
 ): Item =
   result.name = name
   result.mixedCaseAddress = mixedCaseAddress
@@ -29,6 +31,7 @@ proc initItem*(
   result.emoji = emoji
   result.isAllAccounts = isAllAccounts
   result.hideWatchAccounts = hideWatchAccounts
+  result.colors = colors
 
 proc `$`*(self: Item): string =
   result = fmt"""OverviewItem(
@@ -39,7 +42,8 @@ proc `$`*(self: Item): string =
     color: {self.color},
     emoji: {self.emoji},
     isAllAccounts: {self.isAllAccounts},
-    hideWatchAccounts: {self.hideWatchAccounts}
+    hideWatchAccounts: {self.hideWatchAccounts},
+    colors: {self.colors}
     ]"""
 
 proc getName*(self: Item): string =
@@ -66,3 +70,11 @@ proc getIsAllAccounts*(self: Item): bool =
 proc getHideWatchAccounts*(self: Item): bool =
   return self.hideWatchAccounts
 
+proc getColors*(self: Item): string =
+  for color in self.colors:
+    if result.isEmptyOrWhitespace:
+      result = color
+    else:
+      result = result & ";" & color
+  return result
+

src/app/modules/main/wallet_section/overview/module.nim

@@ -59,6 +59,12 @@ proc setBalance(self: Module, tokens: seq[WalletTokenDto], chainIds: seq[int]) =
     
   self.view.setCurrencyBalance(currencyAmountToItem(totalCurrencyBalanceForAllAssets, currencyFormat))
 
+proc getWalletAccoutColors(self: Module, walletAccounts: seq[WalletAccountDto]) : seq[string] =
+  var colors: seq[string] = @[]
+  for account in walletAccounts:
+    colors.add(account.color)
+  return colors
+
 method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int]) =
   let walletAccounts = self.controller.getWalletAccountsByAddresses(addresses)
   if addresses.len > 1:
@@ -70,7 +76,8 @@ method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int])
       "",
       "",
       isAllAccounts=true,
-      hideWatchAccounts=false # TODO(alaibe): need update when doing the action
+      hideWatchAccounts=false, # TODO(alaibe): need update when doing the action
+      self.getWalletAccoutColors(walletAccounts)
     )
     self.view.setData(item)
   else:

src/app/modules/main/wallet_section/overview/view.nim

@@ -18,6 +18,7 @@ QtObject:
       emoji: string
       isAllAccounts: bool
       hideWatchAccounts: bool
+      colors: string
 
   proc setup(self: View) =
     self.QObject.setup
@@ -104,6 +105,13 @@ QtObject:
     read = getHideWatchAccounts
     notify = hideWatchAccountsChanged
 
+  proc getColors(self: View): QVariant {.slot.} =
+    return newQVariant(self.colors)
+  proc colorsChanged(self: View) {.signal.}
+  QtProperty[QVariant] colors:
+    read = getColors
+    notify = colorsChanged
+
   proc setData*(self: View, item: Item) =
     if(self.name != item.getName()):
       self.name = item.getName()
@@ -127,3 +135,6 @@ QtObject:
     if(self.hideWatchAccounts != item.getHideWatchAccounts()):
       self.hideWatchAccounts = item.getHideWatchAccounts()
       self.hideWatchAccountsChanged()
+    if(self.colors != item.getColors()):
+      self.colors = item.getColors()
+      self.colorsChanged()

storybook/pages/WalletHeaderPage.qml

@@ -1,13 +1,17 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+
+import AppLayouts.Wallet.panels 1.0
+import AppLayouts.Wallet.controls 1.0
 import AppLayouts.Chat.panels 1.0
 
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
 import utils 1.0
 
 import Storybook 1.0
 
-import AppLayouts.Wallet.panels 1.0
-
 import Models 1.0
 
 SplitView {
@@ -35,39 +39,46 @@ SplitView {
 
         readonly property string emptyString: ""
 
-        property var dummyOverview:({
+        property var dummyOverview: updateDummyView(StatusColors.colors['black'])
-            name: "helloworld",
-            mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
-            ens: emptyString,
-            color: "#2A4AF5",
-            emoji: "⚽",
-            balanceLoading: false,
-            hasBalanceCache: true,
-            currencyBalance: ({amount: 1.25,
-                                        symbol: "USD",
-                                        displayDecimals: 4,
-                                        stripTrailingZeroes: false}),
-            isAllAccounts: false,
-            hideWatchAccounts: false
 
-        })
+        function updateDummyView(color) {
+            dummyOverview = ({
+                                 name: "helloworld",
+                                 mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
+                                 ens: emptyString,
+                                 color: color,
+                                 emoji: "⚽",
+                                 balanceLoading: false,
+                                 hasBalanceCache: true,
+                                 currencyBalance: ({amount: 1.25,
+                                                       symbol: "USD",
+                                                       displayDecimals: 4,
+                                                       stripTrailingZeroes: false}),
+                                 isAllAccounts: false,
+                                 hideWatchAccounts: false
+
+                             })
+        }
 
         property var dummyAllAccountsOverview:({
-            name: "helloworld",
+                                                   name: "",
-            mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
+                                                   mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
-            ens: emptyString,
+                                                   ens: emptyString,
-            color: "#2A4AF5",
+                                                   color: "",
-            emoji: "⚽",
+                                                   emoji: "",
-            balanceLoading: false,
+                                                   balanceLoading: false,
-            hasBalanceCache: true,
+                                                   hasBalanceCache: true,
-            currencyBalance: ({amount: 1.25,
+                                                   currencyBalance: ({amount: 1.25,
-                                        symbol: "USD",
+                                                                         symbol: "USD",
-                                        displayDecimals: 4,
+                                                                         displayDecimals: 4,
-                                        stripTrailingZeroes: false}),
+                                                                         stripTrailingZeroes: false}),
-            isAllAccounts: true,
+                                                   isAllAccounts: true,
-            hideWatchAccounts: true
+                                                   hideWatchAccounts: true,
-
+                                                   colors: StatusColors.colors['blue2']+ ";" +
-        })
+                                                   StatusColors.colors['yellow']+ ";" +
+                                                   StatusColors.colors['green2'] + ";" +
+                                                   StatusColors.colors['red2']
+                                               })
 
         readonly property QtObject connectionStore: QtObject {
             property bool accountBalanceNotAvailable: false
@@ -108,15 +119,33 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
-        Loader {
+        Rectangle {
-            anchors.fill: parent
+            id: rect
-            active: globalUtilsReady && mainModuleReady
+            width: 800
+            height: 200
+            color: Theme.palette.white
+            border.width: 1
+            anchors.centerIn: parent
 
-            sourceComponent: WalletHeader {
+            AccountHeaderGradient {
-                networkConnectionStore: d.connectionStore
+                anchors.top: parent.top
-                overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview :  d.dummyOverview
+                anchors.left: parent.left
-                walletStore: d.walletStore
                 width: parent.width
+                overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview :  d.dummyOverview
+            }
+
+            Loader {
+                anchors.top: parent.top
+                anchors.left: parent.left
+                width: parent.width
+                active: globalUtilsReady && mainModuleReady
+
+                sourceComponent: WalletHeader {
+                    networkConnectionStore: d.connectionStore
+                    overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview :  d.dummyOverview
+                    walletStore: d.walletStore
+                    width: parent.width
+                }
             }
         }
     }
@@ -129,10 +158,38 @@ SplitView {
 
         logsView.logText: logs.logText
 
-        CheckBox {
+        Column {
-            id: allAccountsCheckbox
+            spacing: 20
-            text: "All Accounts"
+            Row {
-            checked: false
+                CheckBox {
+                    id: allAccountsCheckbox
+                    text: "All Accounts"
+                    checked: false
+                }
+
+                CheckBox {
+                    id: darkMode
+                    text: "Dark Mode"
+                    checked: false
+                    onCheckedChanged: rect.color = Theme.palette.baseColor3
+                }
+            }
+            Row {
+                spacing: 10
+                id: row
+                Repeater {
+                    id: repeater
+                    model: Constants.preDefinedWalletAccountColors
+                    delegate: StatusColorRadioButton {
+                        radioButtonColor: repeater.model[index]
+                        checked: index === 0
+                        onCheckedChanged: d.updateDummyView(repeater.model[index])
+                    }
+                }
+            }
+            ButtonGroup {
+                buttons: row.children
+            }
         }
     }
 }

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -55,3 +55,4 @@ StatusPasswordInput 0.1 StatusPasswordInput.qml
 StatusTextWithLoadingState 0.1 StatusTextWithLoadingState.qml
 StatusLinkText 0.1 StatusLinkText.qml
 StatusImageSelector 0.1 StatusImageSelector.qml
+StatusColorRadioButton 0.1 StatusColorRadioButton.qml

ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml

@@ -71,7 +71,11 @@ SplitView {
         This property holds the footer of the component.
     */
     property Item footer
-
+    /*!
+        \qmlproperty Component StatusAppLayout::headerBackground
+        This property holds the headerBackground of the component.
+    */
+    property Item headerBackground
     /*!
         \qmlproperty bool StatusAppLayout::showRightPanel
         This property sets the right panel component's visibility to true/false.
@@ -145,6 +149,12 @@ SplitView {
         }
     }
 
+    onHeaderBackgroundChanged:  {
+        if (!!headerBackground) {
+            headerBackground.parent = headerBackgroundSlot
+        }
+    }
+
     Control {
         SplitView.minimumWidth: (!!leftPanel) ? 304 : 0
         SplitView.preferredWidth: (!!leftPanel) ? 304 : 0
@@ -163,8 +173,18 @@ SplitView {
             color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
         }
         contentItem: Item {
+            Item {
+                id: headerBackgroundSlot
+                anchors.top: parent.top
+		// Needed cause I see a gap otherwise
+                anchors.topMargin: -3
+                width: visible ? parent.width : 0
+                height: visible ? childrenRect.height : 0
+                visible: (!!headerBackground)
+            }
             StatusToolBar {
                 id: statusToolBar
+                anchors.top: parent.top
                 width: visible ? parent.width : 0
                 visible: root.showHeader
                 onBackButtonClicked: {

ui/app/AppLayouts/Wallet/WalletLayout.qml

@@ -11,6 +11,7 @@ import "popups"
 import "panels"
 import "views"
 import "stores"
+import "controls"
 
 Item {
     id: root
@@ -114,6 +115,10 @@ Item {
                 NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
             }
         }
+        headerBackground: AccountHeaderGradient {
+            width: parent.width
+            overview: RootStore.overview
+        }
 
         footer: WalletFooter {
             sendModal: root.sendModalPopup

ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml

@@ -0,0 +1,72 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.12
+
+import StatusQ.Core.Theme 0.1
+
+Loader {
+    id: root
+
+    property var overview
+
+    sourceComponent: root.overview.isAllAccounts ? multipleAccountsGradient : singleAccountGradient
+
+    Component {
+        id: singleAccountGradient
+        Rectangle {
+            implicitHeight: 115
+            gradient: Gradient {
+                GradientStop { position: 0.0; color:  Theme.palette.alphaColor(root.overview.color, 0.1) }
+                GradientStop { position: 1.0; color: "transparent" }
+            }
+        }
+    }
+    Component {
+        id: multipleAccountsGradient
+        Item {
+            implicitHeight: 115
+            Rectangle {
+                id: base
+                anchors.fill: parent
+                Component.onCompleted: {
+                    let splitWords = root.overview.colors.split(';')
+
+                    var stops = []
+                    let numOfColors = splitWords.length
+                    let gap =  1/splitWords.length
+                    let startPosition = gap
+                    for (const word of splitWords) {
+                        stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(word, 0.1)}))
+                        startPosition += gap
+                    }
+                    gradient.stops = stops
+                }
+
+                gradient: Gradient {
+                    id: gradient
+                    orientation: Gradient.Horizontal
+                }
+                visible: false
+            }
+
+            Rectangle {
+                id: mask
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color:  Theme.palette.statusAppLayout.rightPanelBackgroundColor}
+                    GradientStop { position: 1.0; color: "transparent" }
+                }
+                visible: false
+            }
+
+            OpacityMask {
+                anchors.fill: base
+                source: base
+                maskSource: mask
+            }
+        }
+    }
+    Component {
+        id:stopComponent
+        GradientStop {}
+    }
+}

ui/app/AppLayouts/Wallet/controls/qmldir

@@ -1,2 +1,3 @@
 NetworkFilter 1.0 NetworkFilter.qml
 NetworkSelectItemDelegate 1.0 NetworkSelectItemDelegate.qml
+AccountHeaderGradient 1.0 AccountHeaderGradient.qml