feat: style account button if connected

ui/app/AppLayouts/Browser/BrowserConnectionModal.qml

@@ -8,6 +8,7 @@ Popup {
     property var currentTab
     property var request: ({"hostname": "", "title": "", "permission": ""})
     property string currentAddress: ""
+    property bool interactedWith: false
 
     id: root
     modal: true
@@ -24,16 +25,20 @@ Popup {
     padding: 0
 
     function postMessage(isAllowed){
+        interactedWith = true
         request.isAllowed = isAllowed;
+        currentTabConnected = isAllowed
         provider.web3Response(web3Provider.postMessage(JSON.stringify(request)));
     }
 
     onClosed: {
+        if(!interactedWith){
+            currentTabConnected = false
+            postMessage(false);
+        }
         root.destroy();
     }
 
-    // TODO: design required
-
     ColumnLayout {
         anchors.left: parent.left
         anchors.leftMargin: Style.current.smallPadding
@@ -84,7 +89,7 @@ Popup {
                 source: "../../img/walletIcon.svg"
                 iconHeight: 18
                 iconWidth: 18
-                iconColor: Style.current.primary // TODO use wallet color
+                iconColor: accountSelector.selectedAccount.iconColor || Style.current.primary
                 color: Style.current.background
                 width: logoHeader.imgSize
                 height: logoHeader.imgSize
@@ -141,9 +146,9 @@ Popup {
             id: infoText
             text: {
                 switch(request.permission){
-                    case Constants.permission_web3: return qsTr("Allowing authorizes this DApp to retrieve your wallet address and enable Web3");
-                    case Constants.permission_contactCode: return qsTr("Granting access authorizes this DApp to retrieve your chat key");
-                    default: return qsTr("Unknown permission: " + request.permission);
+                case Constants.permission_web3: return qsTr("Allowing authorizes this DApp to retrieve your wallet address and enable Web3");
+                case Constants.permission_contactCode: return qsTr("Granting access authorizes this DApp to retrieve your chat key");
+                default: return qsTr("Unknown permission: " + request.permission);
                 }
             }
             Layout.fillWidth: true

ui/app/AppLayouts/Browser/BrowserHeader.qml

@@ -130,19 +130,50 @@ Rectangle {
             x: parent.width - width - Style.current.halfPadding
         }
 
-        StatusIconButton {
-            id: accountBtn
-            icon.name: "walletIcon"
-            onClicked: {
-                if (browserWalletMenu.opened) {
-                    browserWalletMenu.close()
-                } else {
-                    browserWalletMenu.open()
+        Loader {
+            active: true
+            sourceComponent: currentTabConnected ? connectedBtnComponent : notConnectedBtnCompoent
+        }
+
+        Component {
+            id: notConnectedBtnCompoent
+            StatusIconButton {
+                id: accountBtn
+                icon.name: "walletIcon"
+                onClicked: {
+                    if (browserWalletMenu.opened) {
+                        browserWalletMenu.close()
+                    } else {
+                        browserWalletMenu.open()
+                    }
+                }
+                width: 24
+                height: 24
+                padding: 6
+            }
+        }
+
+
+
+        Component {
+            id: connectedBtnComponent
+            StatusButton {
+                id: accountBtnConnected
+                icon.source: "../../img/walletIcon.svg"
+                icon.width: 18
+                icon.height: 18
+                icon.color: walletModel.currentAccount.iconColor
+                text: walletModel.currentAccount.name
+                implicitHeight: 32
+                type: "secondary"
+                onClicked: {
+                    if (browserWalletMenu.opened) {
+                        browserWalletMenu.close()
+                    } else {
+                        browserWalletMenu.open()
+                    }
                 }
             }
-            width: 24
-            height: 24
-            padding: 6
         }
 
         Menu {

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -25,6 +25,7 @@ Rectangle {
     property Component browserDialogComponent: BrowserDialog {
         onClosing: destroy()
     }
+    property bool currentTabConnected: false
 
 
     Layout.fillHeight: true
@@ -91,10 +92,12 @@ Rectangle {
 
             if (request.type === Constants.api_request) {
                 if (!_web3Provider.hasPermission(request.hostname, request.permission)) {
+                    browserWindow.currentTabConnected = false
                     var dialog = accessDialogComponent.createObject(browserWindow);
                     dialog.request = request;
                     dialog.open();
                 } else {
+                    browserWindow.currentTabConnected = true
                     request.isAllowed = true;
                     web3Response(_web3Provider.postMessage(JSON.stringify(request)));
                 }
@@ -373,7 +376,6 @@ Rectangle {
     BrowserHeader {
         id: browserHeader
         anchors.top: parent.top
-        // TODO Replace with tab height
         anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
         z: 52
     }

ui/shared/status/StatusButton.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQml 2.14
+import QtGraphicalEffects 1.13
 import "../../imports"
 import "../../shared"
 
@@ -9,16 +10,45 @@ Button {
     property string size: "large"
     property string state: "default"
     property color color: Style.current.buttonForegroundColor
+    property int iconRotation: 0
 
     id: control
     font.pixelSize: size === "small" ? 13 : 15
     font.weight: Font.Medium
     implicitHeight: size === "small" ? 38 : 44
-    implicitWidth: buttonLabel.implicitWidth + 2 * Style.current.padding
+    implicitWidth: buttonLabel.implicitWidth + 2 * Style.current.padding +
+                   (iconLoader.active ? iconLoader.width : 0)
     enabled: state === "default"
 
     contentItem: Item {
         anchors.fill: parent
+
+        Loader {
+            id: iconLoader
+            active: !!control.icon && !!control.icon.source
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.halfPadding
+            anchors.verticalCenter: parent.verticalCenter
+
+            sourceComponent: SVGImage {
+                id: iconImg
+                source: control.icon.source
+                height: control.icon.height
+                width: control.icon.width
+                fillMode: Image.PreserveAspectFit
+                rotation: control.iconRotation
+
+                ColorOverlay {
+                    anchors.fill: iconImg
+                    source: iconImg
+                    color: control.icon.color
+                    antialiasing: true
+                    smooth: true
+                    rotation: control.iconRotation
+                }
+            }
+        }
+
         Text {
             id: buttonLabel
             text: control.text