feat: show toast message for transaction status changes

src/app/wallet/core.nim

@@ -62,10 +62,7 @@ proc init*(self: WalletController) =
 
   self.status.events.on(PendingTransactionType.WalletTransfer.confirmed) do(e: Args):
     let tx = TransactionMinedArgs(e)
-    if tx.success:
+    self.view.transactionCompleted(tx.success, tx.transactionHash, tx.revertReason)
-      debug "SUCCESSS TRANSACTION", transactionHash = tx.transactionHash
-    else:
-      debug "ERROR TRANSACTION", revertReason = tx.revertReason
 
 proc checkPendingTransactions*(self: WalletController) =
   self.status.wallet.checkPendingTransactions() # TODO: consider doing this in a spawnAndSend

src/app/wallet/view.nim

@@ -562,3 +562,5 @@ QtObject:
 
   proc ensResolved(self: WalletView, pubKey: string) {.slot.} =
     self.ensWasResolved(pubKey)
+  
+  proc transactionCompleted*(self: WalletView, success: bool, txHash: string, revertReason: string = "") {.signal.}

ui/app/AppLayouts/Wallet/SendModal.qml

@@ -248,6 +248,7 @@ ModalPopup {
                 }
             }
         }
+
         Connections {
             target: walletModel
             onTransactionWasSent: {
@@ -265,6 +266,9 @@ ModalPopup {
                     }
 
                     toastMessage.title = qsTr("Transaction pending...")
+                    toastMessage.source = "../../img/loading.svg"
+                    toastMessage.iconColor = Style.current.primary
+                    toastMessage.iconRotates = true
                     toastMessage.link = `${walletModel.etherscanLink}/${response.result}`
                     toastMessage.open()
                     root.close()
@@ -272,6 +276,19 @@ ModalPopup {
                     console.error('Error parsing the response', e)
                 }
             }
+            onTransactionCompleted: {
+                if (success) {
+                    toastMessage.title = qsTr("Transaction completed")
+                    toastMessage.source = "../../img/check-circle.svg"
+                    toastMessage.iconColor = Style.current.success
+                } else {
+                    toastMessage.title = qsTr("Transaction failed")
+                    toastMessage.source = "../../img/block-icon.svg"
+                    toastMessage.iconColor = Style.current.danger
+                }
+                toastMessage.link = `${walletModel.etherscanLink}/${txHash}`
+                toastMessage.open()
+            }
         }
     }
 }

ui/imports/Themes/DarkTheme.qml

@@ -38,7 +38,9 @@ Theme {
     property color backgroundHover: "#252528"
     property color secondaryText: darkGrey
     property color secondaryHover: tenPercentWhite
+    property color primary: blue
     property color danger: red
+    property color success: green
     property color primaryMenuItemHover: blue
     property color primaryMenuItemTextHover: almostBlack
     property color backgroundTertiary: tenPercentBlue

ui/imports/Themes/LightTheme.qml

@@ -37,7 +37,9 @@ Theme {
     property color backgroundHover: grey
     property color secondaryText: darkGrey
     property color secondaryHover: tenPercentBlack
+    property color primary: blue
     property color danger: red
+    property color success: green
     property color primaryMenuItemHover: blue
     property color primaryMenuItemTextHover: white
     property color backgroundTertiary: tenPercentBlue

ui/shared/RoundedIcon.qml

@@ -7,30 +7,61 @@ Rectangle {
     property alias source: roundedIconImage.source
     default property alias content: content.children
     property alias icon: roundedIconImage
+    property bool rotates: false
     signal clicked
     width: 36
     height: 36
     property alias iconWidth: roundedIconImage.width
     property alias iconHeight: roundedIconImage.height
     property alias rotation: roundedIconImage.rotation
+    property color iconColor: Style.current.transparent
 
     color: Style.current.blue
     radius: width / 2
 
+    Item {
+        id: iconContainer
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        width: roundedIconImage.width
+        height: roundedIconImage.height
+
         SVGImage {
             id: roundedIconImage
             width: 12
             height: 12
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
             fillMode: Image.PreserveAspectFit
             source: "../img/new_chat.svg"
         }
+        ColorOverlay {
+            anchors.fill: roundedIconImage
+            source: roundedIconImage
+            color: root.iconColor
+        }
+    }
+
+    Loader {
+        active: rotates
+        sourceComponent: rotatorComponent
+    }
+
+    Component {
+        id: rotatorComponent
+        RotationAnimator {
+            target: iconContainer
+            from: 0;
+            to: 360;
+            duration: 1200
+            running: true
+            loops: Animation.Infinite
+        }
+
+    }
 
     Item {
         id: content
-        anchors.left: roundedIconImage.right
+        anchors.left: iconContainer.right
-        anchors.leftMargin: 6 + (root.width - roundedIconImage.width)
+        anchors.leftMargin: 6 + (root.width - iconContainer.width)
     }
 
     MouseArea {

ui/shared/ToastMessage.qml

@@ -6,8 +6,11 @@ import "."
 
 Popup {
     property url source: "../app/img/check-circle.svg"
+    property color iconColor: Style.current.primary
+    property bool iconRotates: false
     property string title: "Transaction pending..."
-    property string linkText: qsTr("View on Etherscan")
+    readonly property string defaultLinkText: qsTr("View on Etherscan")
+    property string linkText: defaultLinkText
     property string link: "https://etherscan.io/"
 
     id: root
@@ -24,6 +27,12 @@ Popup {
             root.close()
         }, 4000);
     }
+    onClosed: {
+        // Reset props
+        iconColor = Style.current.primary
+        iconRotates = false
+        linkText = defaultLinkText
+    }
 
     Timer {
         id: timer
@@ -56,11 +65,13 @@ Popup {
         height: 32
         iconHeight: 20
         iconWidth: 20
-        color: Style.current.secondaryBackground
+        color: Utils.setColorAlpha(root.iconColor, 0.1)
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         source: root.source
         anchors.leftMargin: 12
+        iconColor: root.iconColor
+        rotates: root.iconRotates
     }
 
     StyledText {