Feat/10473 Updated activity list delegate and activity details header (#10580)

closes #10473
closes #10542
fixes #10408

src/app/modules/main/wallet_section/accounts/model.nim

@@ -97,3 +97,9 @@ QtObject:
       result = newQVariant(item.keyUid())
     of ModelRole.AssetsLoading:
       result = newQVariant(item.assetsLoading())
+
+  proc getNameByAddress*(self: Model, address: string): string =
+    for item in self.items:
+      if(item.address() == address):
+        return item.name()
+    return ""

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

@@ -44,4 +44,7 @@ QtObject:
     self.delegate.deleteAccount(address)
 
   proc updateAccount(self: View, address: string, accountName: string, color: string, emoji: string) {.slot.} =
-    self.delegate.updateAccount(address, accountName, color, emoji)
+    self.delegate.updateAccount(address, accountName, color, emoji)
+
+  proc getNameByAddress(self: View, address: string): string {.slot.}=
+    return self.accounts.getNameByAddress(address)

storybook/PagesModel.qml

@@ -265,6 +265,10 @@ ListModel {
         title: "TokenItem"
         section: "Components"
     }
+    ListElement {
+        title: "TransactionDelegate"
+        section: "Components"
+    }
     ListElement {
         title: "CommunityPermissionsRow"
         section: "Components"

storybook/pages/TransactionDelegatePage.qml

@@ -0,0 +1,149 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import Storybook 1.0
+import utils 1.0
+
+import shared.controls 1.0
+
+SplitView {
+    id: root
+
+    readonly property QtObject mockupModelData: QtObject {
+        property int timestamp: Date.now() / 1000
+        property int txStatus: 0
+        property string from: "0xfB8131c260749c7835a08ccBdb64728De432858E"
+        property string to: "0x3fb81384583b3910BB14Cc72582E8e8a56E83ae9"
+        property bool isNFT: false
+        property string tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337"
+        property string nftName: "Happy Meow"
+        property string nftImageUrl: Style.png("collectibles/HappyMeow")
+    }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+        Item {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+
+            Rectangle {
+                anchors.fill: column
+                anchors.margins: -1
+                border.color: "lightgray"
+            }
+
+            ColumnLayout {
+                id: column
+
+                anchors.centerIn: parent
+
+                width: 600
+
+                TransactionDelegate {
+                    id: delegate
+                    Layout.fillWidth: true
+                    modelData: root.mockupModelData
+                    swapCryptoValue: 0.18
+                    swapFiatValue: 340
+                    swapSymbol: "SNT"
+                    timeStampText: LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000)
+                    cryptoValue: 0.1234
+                    fiatValue: 123123
+                    currentCurrency: "USD"
+                    networkName: "Optimism"
+                    symbol: "ETH"
+                    bridgeNetworkName: "Mainnet"
+                    feeFiatValue: 10.34
+                    feeCryptoValue: 0.013
+                    transactionStatus: TransactionDelegate.Pending
+                    transactionType: TransactionDelegate.Send
+                    formatCurrencyAmount: function(amount, symbol, options = null, locale = null) {
+                        const currencyAmount = {
+                            amount: amount,
+                            symbol: symbol,
+                            displayDecimals: 8,
+                            stripTrailingZeroes: true
+                        }
+                        return LocaleUtils.currencyAmountToLocaleString(currencyAmount, options)
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            SplitView.fillWidth: true
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        ColumnLayout {
+            CheckBox {
+                text: "Is loading"
+                checked: delegate.loading
+                onToggled: delegate.loading = checked
+            }
+            CheckBox {
+                text: "Is activity details header"
+                readonly property string headerState: "header"
+                checked: delegate.state === headerState
+                onToggled: delegate.state = checked ? headerState : ""
+            }
+
+            CheckBox {
+                text: "Is NFT"
+                checked: delegate.isNFT
+                onToggled: root.mockupModelData.isNFT = checked
+            }
+
+            Label {
+                Layout.topMargin: 10
+                Layout.fillWidth: true
+                text: "Transaction type:"
+            }
+
+            ComboBox {
+                Layout.fillWidth: true
+                textRole: "name"
+                valueRole: "type"
+                model: ListModel {
+                    ListElement { name: "Sent"; type: TransactionDelegate.Send }
+                    ListElement { name: "Receive"; type: TransactionDelegate.Receive }
+                    ListElement { name: "Buy"; type: TransactionDelegate.Buy }
+                    ListElement { name: "Sell"; type: TransactionDelegate.Sell }
+                    ListElement { name: "Destroy"; type: TransactionDelegate.Destroy }
+                    ListElement { name: "Swap"; type: TransactionDelegate.Swap }
+                    ListElement { name: "Bridge"; type: TransactionDelegate.Bridge }
+                }
+                onActivated: delegate.transactionType = model.get(currentIndex).type
+            }
+
+            Label {
+                Layout.topMargin: 10
+                Layout.fillWidth: true
+                text: "Transaction status:"
+            }
+
+            ComboBox {
+                Layout.fillWidth: true
+                textRole: "name"
+                valueRole: "type"
+                model: ListModel {
+                    ListElement { name: "Pending"; status: TransactionDelegate.Pending }
+                    ListElement { name: "Failed"; status: TransactionDelegate.Failed }
+                    ListElement { name: "Verified"; status: TransactionDelegate.Verified }
+                    ListElement { name: "Finished"; status: TransactionDelegate.Finished }
+                }
+                onActivated: delegate.transactionStatus = model.get(currentIndex).status
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -81,6 +81,7 @@ Rectangle {
     property alias statusListItemLabel: statusListItemLabel
     property alias subTitleBadgeComponent: subTitleBadgeLoader.sourceComponent
     property alias errorIcon: errorIcon
+    property alias statusListItemTagsRowLayout: statusListItemSubtitleTagsRow
 
     signal clicked(string itemId, var mouse)
     signal titleClicked(string titleId)

ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml

@@ -20,7 +20,8 @@ Rectangle {
     implicitWidth: asset.bgWidth
     implicitHeight: asset.bgHeight
     radius: asset.bgRadius
-
+    border.width: asset.bgBorderWidth
+    border.color: asset.bgBorderColor
 
     StatusIcon {
         id: statusIcon

ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -80,6 +80,8 @@ Loader {
             asset.name: root.asset.name
             asset.rotation: root.asset.rotation
             asset.color: root.asset.color
+            asset.bgBorderWidth: root.asset.bgBorderWidth
+            asset.bgBorderColor: root.asset.bgBorderColor
 
             signal clicked(var mouse)
 

ui/StatusQ/src/StatusQ/Controls/StatusTextWithLoadingState.qml

@@ -35,12 +35,19 @@ StatusBaseText {
     */
     property bool loading: false
     /*!
-        \qmlproperty bool StatusTextWithLoadingState::customColor
+        \qmlproperty color StatusTextWithLoadingState::customColor
         This property sets the user defined color for the text and handles
         transparency in loading state.
     */
     property color customColor: Theme.palette.directColor1
 
+    /*!
+        \qmlproperty int StatusTextWithLoadingState::maximumLoadingStateWidth
+        This property sets maximum width of loading component.
+        The default value is 140.
+    */
+    property int maximumLoadingStateWidth: 140
+
     color: loading ? "transparent" : customColor
 
     Loader {
@@ -51,7 +58,7 @@ StatusBaseText {
             anchors.centerIn: parent
             radius: textMetrics.font.pixelSize === 15 ? 4 : 8
             height: textMetrics.tightBoundingRect.height
-            width: Math.min(root.width, 140)
+            width: Math.min(root.width, root.maximumLoadingStateWidth)
         }
     }
 

ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml

@@ -301,10 +301,13 @@ QtObject {
 
         // otherwise
         var fullFormatString = d.fixupTimeFormatString(loc.dateTimeFormat(Locale.ShortFormat))
-        if (now.getFullYear() === value.getFullYear())
+        if (now.getFullYear() === value.getFullYear()) {
-            fullFormatString = fullFormatString.replace(/y/g, "") // strip year part, if current year -> "31 December 09:41"
+            // strip year part, if current year -> "31 December 09:41"
-        else
+            // It remove preceding dot or space
+            fullFormatString = fullFormatString.replace(/([.\s])?\b(y+)\b/g, "")
+        } else if (!fullFormatString.includes("yyyy")) {
             fullFormatString = fullFormatString.replace("yy", "yyyy") // different year -> "31 December 2022 09:41"
+        }
 
         return value.toLocaleString(loc, fullFormatString)
     }

ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml

@@ -30,6 +30,7 @@ QtObject {
     property int bgRadius
     property color bgColor: "transparent"
     property color bgBorderColor: "transparent"
+    property int bgBorderWidth: 0
 
     //image
     property bool isImage: false

ui/StatusQ/src/StatusQ/Core/StatusIcon.qml

@@ -13,7 +13,7 @@ Image {
     fillMode: Image.PreserveAspectFit
 
     onIconChanged: {
-        if(icon.startsWith("data:image/") || icon.startsWith("https://")) {
+        if(icon.startsWith("data:image/") || icon.startsWith("https://") || icon.startsWith("qrc:/") || icon.startsWith("file:/")) {
             //raw image data
             source = icon
             objectName = "custom-icon"    

ui/StatusQ/src/assets.qrc

@@ -294,6 +294,7 @@
         <file>assets/img/icons/time.svg</file>
         <file>assets/img/icons/token-sale.svg</file>
         <file>assets/img/icons/token.svg</file>
+        <file>assets/img/icons/destroy.svg</file>
         <file>assets/img/icons/touch-id.svg</file>
         <file>assets/img/icons/travel-and-places.svg</file>
         <file>assets/img/icons/tributeToTalk.svg</file>

ui/StatusQ/src/assets/img/icons/destroy.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_12501_302412)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0446 1.0013C10.363 1.01978 10.6369 1.23283 10.7333 1.53686L11.8272 4.98892L14.9936 1.81226C15.2358 1.56926 15.6097 1.51606 15.9101 1.68184C16.2105 1.84762 16.3648 2.19231 16.2883 2.52678L15.2973 6.86077H19.2307C19.5755 6.86077 19.8781 7.09015 19.9713 7.42206C20.0645 7.75397 19.9255 8.10735 19.6311 8.2868L15.5926 10.7488L19.1436 14.1038C19.398 14.3441 19.4581 14.7259 19.2898 15.0328C19.1215 15.3397 18.7673 15.4943 18.4278 15.4089L14.4082 14.3987L14.4613 16.9915C14.4675 17.2897 14.3006 17.5645 14.0333 17.6967C13.7659 17.829 13.4462 17.7947 13.213 17.6089L10.1308 15.1532L6.87431 18.6996C6.64738 18.9468 6.28644 19.0183 5.9824 18.8764C5.67836 18.7345 5.50137 18.4119 5.54503 18.0793L6.03167 14.3715L2.09099 14.8407C1.75956 14.8801 1.4405 14.7014 1.30112 14.3981C1.16173 14.0948 1.23382 13.7363 1.47959 13.5104L4.4864 10.7475L0.37469 8.2903C0.0776818 8.1128 -0.0642681 7.75885 0.0277988 7.42532C0.119866 7.09179 0.42329 6.86077 0.769293 6.86077H5.22351L4.35092 4.36765C4.24487 4.06467 4.33813 3.72768 4.58485 3.52232C4.83157 3.31696 5.17989 3.2864 5.4586 3.44566L7.80001 4.78361L9.29853 1.45357C9.42941 1.16273 9.72618 0.982816 10.0446 1.0013ZM9.87506 3.92137L8.85533 6.18743C8.76633 6.38521 8.59798 6.53622 8.39174 6.60329C8.18549 6.67036 7.96052 6.64725 7.77222 6.53964L6.48329 5.80311L7.03376 7.37589C7.11611 7.61118 7.07933 7.87179 6.93508 8.0751C6.79084 8.27842 6.557 8.39923 6.30772 8.39923H3.55596L6.16079 9.9559C6.36922 10.0805 6.50661 10.2961 6.53139 10.5377C6.55617 10.7792 6.46545 11.0183 6.28665 11.1826L4.27466 13.0314L6.83216 12.7269C7.06791 12.6989 7.30341 12.7812 7.47028 12.9501C7.63715 13.119 7.71668 13.3555 7.68578 13.5909L7.38709 15.8666L9.48264 13.5845C9.75584 13.287 10.2126 13.2514 10.5286 13.5031L12.8896 15.3842L12.8494 13.4228C12.8445 13.1831 12.9516 12.9547 13.1392 12.8053C13.3268 12.6559 13.5734 12.6026 13.8059 12.661L15.9456 13.1988L13.804 11.1753C13.6297 11.0107 13.5422 10.7742 13.5673 10.5357C13.5923 10.2973 13.7272 10.0842 13.9319 9.9594L16.4911 8.39923H14.3323C14.0981 8.39923 13.8767 8.29258 13.7308 8.10948C13.5848 7.92639 13.5302 7.68679 13.5824 7.45853L14.1911 4.79659L12.0217 6.97298C11.8319 7.1634 11.5565 7.2409 11.2952 7.1774C11.034 7.11389 10.8248 6.9186 10.7436 6.66231L9.87506 3.92137Z" fill="#09101C"/>
+</g>
+<defs>
+<clipPath id="clip0_12501_302412">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

ui/app/AppLayouts/Wallet/stores/RootStore.qml

@@ -169,6 +169,14 @@ QtObject {
         return walletSectionSavedAddresses.getNameByAddress(address)
     }
 
+    function getNameForAddress(address) {
+        let name = getNameForSavedWalletAddress(address)
+        if (name.length === 0) {
+            name = walletSectionAccounts.getNameByAddress(address)
+        }
+        return name
+    }
+
     function createOrUpdateSavedAddress(name, address, favourite, chainShortNames, ens) {
         return walletSectionSavedAddresses.createOrUpdateSavedAddress(name, address, favourite, chainShortNames, ens)
     }

ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml

@@ -28,7 +28,7 @@ Item {
 
     QtObject {
         id: d
-        readonly property bool isIncoming: root.isTransactionValid ? root.transaction.to === root.overview.mixedcaseAddress : false
+        readonly property bool isIncoming: root.isTransactionValid ? root.transaction.to.toLowerCase() === root.overview.mixedcaseAddress.toLowerCase() : false
         readonly property bool isNFT: root.isTransactionValid ? root.transaction.isNFT : false
         readonly property string savedAddressNameTo: root.isTransactionValid ? d.getNameForSavedWalletAddress(transaction.to) : ""
         readonly property string savedAddressNameFrom: root.isTransactionValid ? d.getNameForSavedWalletAddress(transaction.from): ""
@@ -59,26 +59,31 @@ Item {
             spacing: Style.current.bigPadding
 
             TransactionDelegate {
+                id: transactionHeader
                 objectName: "transactionDetailHeader"
                 width: parent.width
 
                 modelData: transaction
-                isIncoming: d.isIncoming
+                transactionType: d.isIncoming ? TransactionDelegate.Receive : TransactionDelegate.Send
                 currentCurrency: RootStore.currentCurrency
                 cryptoValue: root.isTransactionValid ? transaction.value.amount: 0.0
                 fiatValue: root.isTransactionValid ? RootStore.getFiatValue(cryptoValue, symbol, currentCurrency): 0.0
                 networkIcon: root.isTransactionValid ? RootStore.getNetworkIcon(transaction.chainId): ""
                 networkColor: root.isTransactionValid ? RootStore.getNetworkColor(transaction.chainId): ""
-                networkName: root.isTransactionValid ? RootStore.getNetworkShortName(transaction.chainId): ""
+                networkName: root.isTransactionValid ? RootStore.getNetworkFullName(transaction.chainId): ""
                 symbol: root.isTransactionValid ? transaction.symbol : ""
                 transferStatus: root.isTransactionValid ? RootStore.hex2Dec(transaction.txStatus): ""
-                shortTimeStamp: root.isTransactionValid ? LocaleUtils.formatTime(transaction.timestamp * 1000, Locale.ShortFormat): ""
+                timeStampText: root.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): ""
-                savedAddressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
+                addressNameTo: root.isTransactionValid ? WalletStores.RootStore.getNameForAddress(transaction.to): ""
-                savedAddressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
+                addressNameFrom: root.isTransactionValid ? WalletStores.RootStore.getNameForAddress(transaction.from): ""
-                isSummary: false
                 sensor.enabled: false
+                formatCurrencyAmount: RootStore.formatCurrencyAmount
                 color: Theme.palette.statusListItem.backgroundColor
-                state: "big"
+                state: "header"
+
+                onRetryClicked: {
+                    // TODO handle failed transaction retry
+                }
             }
 
             SavedAddressesDelegate {
@@ -144,7 +149,7 @@ Item {
             TransactionDelegate {
                 width: parent.width
                 modelData: transaction
-                isIncoming: d.isIncoming
+                transactionType: d.isIncoming ? TransactionDelegate.Receive : TransactionDelegate.Send
                 currentCurrency: RootStore.currentCurrency
                 cryptoValue: root.isTransactionValid ? transaction.value.amount: 0.0
                 fiatValue: root.isTransactionValid ? RootStore.getFiatValue(cryptoValue, symbol, currentCurrency): 0.0
@@ -153,10 +158,10 @@ Item {
                 networkName: root.isTransactionValid ? RootStore.getNetworkShortName(transaction.chainId): ""
                 symbol: root.isTransactionValid ? transaction.symbol : ""
                 transferStatus: root.isTransactionValid ? RootStore.hex2Dec(transaction.txStatus): ""
-                shortTimeStamp: root.isTransactionValid ? LocaleUtils.formatTime(transaction.timestamp * 1000, Locale.ShortFormat): ""
+                timeStampText: root.isTransactionValid ? LocaleUtils.formatTime(transaction.timestamp * 1000, Locale.ShortFormat): ""
-                savedAddressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
+                addressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
-                savedAddressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
+                addressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
-                isSummary: false
+                formatCurrencyAmount: RootStore.formatCurrencyAmount
                 sensor.enabled: false
                 color: Theme.palette.statusListItem.backgroundColor
                 border.width: 1

ui/imports/assets/icons/transaction/failed.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9167 2.14434L12.5 2.86603L12.9167 2.14434C11.7306 1.45958 10.2694 1.45958 9.08333 2.14434L9.5 2.86603L9.08333 2.14434L3.42308 5.41229C2.23704 6.09705 1.50641 7.36253 1.50641 8.73205V15.2679C1.50641 16.6375 2.23704 17.903 3.42308 18.5877L9.08333 21.8557C10.2694 22.5404 11.7306 22.5404 12.9167 21.8557L18.5769 18.5877C19.763 17.903 20.4936 16.6375 20.4936 15.2679V8.73205C20.4936 7.36253 19.763 6.09705 18.5769 5.41229L12.9167 2.14434Z" fill="#FF2D55"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 18.875C11.8629 18.875 12.5625 18.1754 12.5625 17.3125C12.5625 16.4496 11.8629 15.75 11 15.75C10.1371 15.75 9.4375 16.4496 9.4375 17.3125C9.4375 18.1754 10.1371 18.875 11 18.875ZM9.75 7C9.75 6.30964 10.3096 5.75 11 5.75C11.6904 5.75 12.25 6.30964 12.25 7V12.625C12.25 13.3154 11.6904 13.875 11 13.875C10.3096 13.875 9.75 13.3154 9.75 12.625V7Z" fill="white"/>
+</svg>

ui/imports/assets/icons/transaction/finished.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_12304_260258" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24" fill="black">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 13.49 2.97763 14.7517 4.32644 15.1786C3.6746 16.4341 3.87546 18.0175 4.92903 19.0711C5.98258 20.1246 7.56591 20.3255 8.82148 19.6737C9.2484 21.0224 10.51 22 12 22C13.4901 22 14.7518 21.0222 15.1786 19.6733C16.4342 20.325 18.0174 20.1241 19.0709 19.0706C20.1243 18.0171 20.3253 16.434 19.6737 15.1785C21.0224 14.7516 22 13.49 22 12C22 10.5102 21.0226 9.2486 19.674 8.82158C20.3253 7.56614 20.1243 5.98326 19.071 4.92994C18.0175 3.87647 16.4343 3.67554 15.1788 4.32717C14.7521 2.97799 13.4903 2 12 2C10.5099 2 9.24811 2.9778 8.82133 4.32678C7.56577 3.67502 5.98247 3.8759 4.92893 4.92944C3.87548 5.98289 3.67454 7.56602 4.32612 8.82154C2.97748 9.24851 2 10.5101 2 12Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 13.49 2.97763 14.7517 4.32644 15.1786C3.6746 16.4341 3.87546 18.0175 4.92903 19.0711C5.98258 20.1246 7.56591 20.3255 8.82148 19.6737C9.2484 21.0224 10.51 22 12 22C13.4901 22 14.7518 21.0222 15.1786 19.6733C16.4342 20.325 18.0174 20.1241 19.0709 19.0706C20.1243 18.0171 20.3253 16.434 19.6737 15.1785C21.0224 14.7516 22 13.49 22 12C22 10.5102 21.0226 9.2486 19.674 8.82158C20.3253 7.56614 20.1243 5.98326 19.071 4.92994C18.0175 3.87647 16.4343 3.67554 15.1788 4.32717C14.7521 2.97799 13.4903 2 12 2C10.5099 2 9.24811 2.9778 8.82133 4.32678C7.56577 3.67502 5.98247 3.8759 4.92893 4.92944C3.87548 5.98289 3.67454 7.56602 4.32612 8.82154C2.97748 9.24851 2 10.5101 2 12Z" fill="#4360DF"/>
+<path d="M4.32644 15.1786L5.80564 15.9465L6.71879 14.1876L4.82933 13.5896L4.32644 15.1786ZM4.92903 19.0711L6.10754 17.8926V17.8926L4.92903 19.0711ZM8.82148 19.6737L10.4104 19.1707L9.81242 17.2814L8.05358 18.1945L8.82148 19.6737ZM15.1786 19.6733L15.9464 18.194L14.1874 17.281L13.5896 19.1705L15.1786 19.6733ZM19.0709 19.0706L17.8924 17.8921L17.8924 17.8921L19.0709 19.0706ZM19.6737 15.1785L19.1707 13.5895L17.2817 14.1875L18.1944 15.9462L19.6737 15.1785ZM19.674 8.82158L18.1946 8.05409L17.2824 9.8125L19.1709 10.4105L19.674 8.82158ZM19.071 4.92994L20.2495 3.75143V3.75143L19.071 4.92994ZM15.1788 4.32717L13.5897 4.82969L14.1873 6.71953L15.9466 5.80647L15.1788 4.32717ZM8.82133 4.32678L8.05346 5.80602L9.81255 6.71916L10.4104 4.8295L8.82133 4.32678ZM4.92893 4.92944L6.10744 6.10795L4.92893 4.92944ZM4.32612 8.82154L4.82917 10.4105L6.71812 9.81245L5.80544 8.05381L4.32612 8.82154ZM4.82933 13.5896C4.15337 13.3756 3.66667 12.7425 3.66667 12H0.333333C0.333333 14.2375 1.80189 16.1277 3.82354 16.7675L4.82933 13.5896ZM6.10754 17.8926C5.58254 17.3676 5.47897 16.5757 5.80564 15.9465L2.84723 14.4106C1.87023 16.2925 2.16838 18.6674 3.75052 20.2496L6.10754 17.8926ZM8.05358 18.1945C7.42434 18.5211 6.63253 18.4175 6.10754 17.8926L3.75052 20.2496C5.33263 21.8317 7.70748 22.1299 9.58939 21.1529L8.05358 18.1945ZM12 20.3333C11.2575 20.3333 10.6244 19.8467 10.4104 19.1707L7.23252 20.1766C7.8724 22.1982 9.76253 23.6667 12 23.6667V20.3333ZM13.5896 19.1705C13.3757 19.8466 12.7425 20.3333 12 20.3333V23.6667C14.2377 23.6667 16.128 22.1979 16.7677 20.1761L13.5896 19.1705ZM17.8924 17.8921C17.3674 18.417 16.5757 18.5206 15.9464 18.194L14.4108 21.1526C16.2927 22.1293 18.6674 21.8311 20.2494 20.2491L17.8924 17.8921ZM18.1944 15.9462C18.5209 16.5754 18.4173 17.3671 17.8924 17.8921L20.2494 20.2491C21.8313 18.6671 22.1296 16.2926 21.153 14.4108L18.1944 15.9462ZM20.3333 12C20.3333 12.7425 19.8467 13.3756 19.1707 13.5895L20.1767 16.7675C22.1982 16.1276 23.6667 14.2375 23.6667 12H20.3333ZM19.1709 10.4105C19.8467 10.6245 20.3333 11.2576 20.3333 12H23.6667C23.6667 9.76271 22.1984 7.8727 20.1771 7.23267L19.1709 10.4105ZM17.8925 6.10845C18.4173 6.63333 18.521 7.42491 18.1946 8.05409L21.1534 9.58908C22.1296 7.70737 21.8313 5.3332 20.2495 3.75143L17.8925 6.10845ZM15.9466 5.80647C16.5758 5.4799 17.3675 5.5835 17.8925 6.10845L20.2495 3.75143C18.6675 2.16943 16.2929 1.87119 14.411 2.84788L15.9466 5.80647ZM12 3.66667C12.7426 3.66667 13.3759 4.15355 13.5897 4.82969L16.7679 3.82465C16.1284 1.80242 14.2379 0.333333 12 0.333333V3.66667ZM10.4104 4.8295C10.6243 4.15345 11.2575 3.66667 12 3.66667V0.333333C9.76227 0.333333 7.87196 1.80214 7.23229 3.82406L10.4104 4.8295ZM6.10744 6.10795C6.63243 5.58297 7.42423 5.47938 8.05346 5.80602L9.58921 2.84754C7.70731 1.87065 5.33251 2.16884 3.75042 3.75092L6.10744 6.10795ZM5.80544 8.05381C5.4789 7.4246 5.5825 6.63289 6.10744 6.10795L3.75042 3.75092C2.16846 5.33289 1.87019 7.70744 2.84681 9.58927L5.80544 8.05381ZM3.66667 12C3.66667 11.2576 4.15329 10.6245 4.82917 10.4105L3.82308 7.2326C1.80167 7.87257 0.333333 9.76263 0.333333 12H3.66667Z" mask="url(#path-1-outside-1_12304_260258)"/>
+<path d="M9.4987 9.5H11.9987H14.4987L16.1654 11.1667L11.9987 16.1667L7.83203 11.1667L9.4987 9.5Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

ui/imports/assets/icons/transaction/pending.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11.0833" fill="#E9EDF1"/>
+<ellipse cx="7.5" cy="12" rx="1.5" ry="1.5" fill="#939BA1"/>
+<circle opacity="0.2" cx="16.5" cy="12" r="1.5" fill="#939BA1"/>
+<circle opacity="0.6" cx="12" cy="12" r="1.5" fill="#939BA1"/>
+</svg>

ui/imports/assets/icons/transaction/verified.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_12304_260256" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24" fill="black">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 13.49 2.97763 14.7517 4.32644 15.1786C3.6746 16.4341 3.87546 18.0175 4.92903 19.0711C5.98258 20.1246 7.56591 20.3255 8.82148 19.6737C9.2484 21.0224 10.51 22 12 22C13.4901 22 14.7518 21.0222 15.1786 19.6733C16.4342 20.325 18.0174 20.1241 19.0709 19.0706C20.1243 18.0171 20.3253 16.434 19.6737 15.1785C21.0224 14.7516 22 13.49 22 12C22 10.5102 21.0226 9.2486 19.674 8.82158C20.3253 7.56614 20.1243 5.98326 19.071 4.92994C18.0175 3.87647 16.4343 3.67554 15.1788 4.32717C14.7521 2.97799 13.4903 2 12 2C10.5099 2 9.24811 2.9778 8.82133 4.32678C7.56577 3.67502 5.98247 3.8759 4.92893 4.92944C3.87548 5.98289 3.67454 7.56602 4.32612 8.82154C2.97748 9.24851 2 10.5101 2 12Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 13.49 2.97763 14.7517 4.32644 15.1786C3.6746 16.4341 3.87546 18.0175 4.92903 19.0711C5.98258 20.1246 7.56591 20.3255 8.82148 19.6737C9.2484 21.0224 10.51 22 12 22C13.4901 22 14.7518 21.0222 15.1786 19.6733C16.4342 20.325 18.0174 20.1241 19.0709 19.0706C20.1243 18.0171 20.3253 16.434 19.6737 15.1785C21.0224 14.7516 22 13.49 22 12C22 10.5102 21.0226 9.2486 19.674 8.82158C20.3253 7.56614 20.1243 5.98326 19.071 4.92994C18.0175 3.87647 16.4343 3.67554 15.1788 4.32717C14.7521 2.97799 13.4903 2 12 2C10.5099 2 9.24811 2.9778 8.82133 4.32678C7.56577 3.67502 5.98247 3.8759 4.92893 4.92944C3.87548 5.98289 3.67454 7.56602 4.32612 8.82154C2.97748 9.24851 2 10.5101 2 12Z" fill="#4EBC60"/>
+<path d="M4.32644 15.1786L5.80564 15.9465L6.71879 14.1876L4.82933 13.5896L4.32644 15.1786ZM4.92903 19.0711L3.75052 20.2496L3.75052 20.2496L4.92903 19.0711ZM8.82148 19.6737L10.4104 19.1707L9.81242 17.2814L8.05358 18.1945L8.82148 19.6737ZM15.1786 19.6733L15.9464 18.194L14.1874 17.281L13.5896 19.1705L15.1786 19.6733ZM19.0709 19.0706L17.8924 17.8921L17.8924 17.8921L19.0709 19.0706ZM19.6737 15.1785L19.1707 13.5895L17.2817 14.1875L18.1944 15.9462L19.6737 15.1785ZM19.674 8.82158L18.1946 8.05409L17.2824 9.8125L19.1709 10.4105L19.674 8.82158ZM19.071 4.92994L17.8925 6.10845V6.10845L19.071 4.92994ZM15.1788 4.32717L13.5897 4.82969L14.1873 6.71953L15.9466 5.80647L15.1788 4.32717ZM8.82133 4.32678L8.05346 5.80602L9.81255 6.71917L10.4104 4.8295L8.82133 4.32678ZM4.92893 4.92944L3.75042 3.75092H3.75042L4.92893 4.92944ZM4.32612 8.82154L4.82917 10.4105L6.71812 9.81245L5.80544 8.05381L4.32612 8.82154ZM4.82933 13.5896C4.15337 13.3756 3.66667 12.7425 3.66667 12H0.333333C0.333333 14.2375 1.80189 16.1277 3.82354 16.7675L4.82933 13.5896ZM6.10754 17.8926C5.58254 17.3676 5.47897 16.5757 5.80564 15.9465L2.84723 14.4106C1.87023 16.2925 2.16838 18.6674 3.75052 20.2496L6.10754 17.8926ZM8.05358 18.1945C7.42434 18.5211 6.63253 18.4175 6.10754 17.8926L3.75052 20.2496C5.33263 21.8317 7.70748 22.1299 9.58938 21.1529L8.05358 18.1945ZM12 20.3333C11.2575 20.3333 10.6244 19.8467 10.4104 19.1707L7.23252 20.1766C7.8724 22.1982 9.76253 23.6667 12 23.6667V20.3333ZM13.5896 19.1705C13.3757 19.8466 12.7425 20.3333 12 20.3333V23.6667C14.2377 23.6667 16.128 22.1979 16.7677 20.1761L13.5896 19.1705ZM17.8924 17.8921C17.3674 18.417 16.5757 18.5206 15.9464 18.194L14.4108 21.1526C16.2927 22.1293 18.6674 21.8311 20.2494 20.2491L17.8924 17.8921ZM18.1944 15.9462C18.5209 16.5754 18.4173 17.3671 17.8924 17.8921L20.2494 20.2491C21.8313 18.6671 22.1296 16.2926 21.153 14.4108L18.1944 15.9462ZM20.3333 12C20.3333 12.7425 19.8467 13.3756 19.1707 13.5895L20.1767 16.7675C22.1982 16.1276 23.6667 14.2375 23.6667 12H20.3333ZM19.1709 10.4105C19.8467 10.6245 20.3333 11.2576 20.3333 12H23.6667C23.6667 9.76271 22.1984 7.8727 20.1771 7.23267L19.1709 10.4105ZM17.8925 6.10845C18.4173 6.63333 18.521 7.42491 18.1946 8.05409L21.1534 9.58908C22.1296 7.70737 21.8313 5.3332 20.2495 3.75143L17.8925 6.10845ZM15.9466 5.80647C16.5758 5.4799 17.3675 5.5835 17.8925 6.10845L20.2495 3.75143C18.6675 2.16943 16.2929 1.87119 14.411 2.84788L15.9466 5.80647ZM12 3.66667C12.7426 3.66667 13.3759 4.15355 13.5897 4.82969L16.7679 3.82465C16.1284 1.80242 14.2379 0.333333 12 0.333333V3.66667ZM10.4104 4.8295C10.6243 4.15345 11.2575 3.66667 12 3.66667V0.333333C9.76227 0.333333 7.87196 1.80214 7.23229 3.82406L10.4104 4.8295ZM6.10744 6.10795C6.63243 5.58297 7.42423 5.47938 8.05346 5.80602L9.58921 2.84754C7.70731 1.87065 5.33251 2.16884 3.75042 3.75092L6.10744 6.10795ZM5.80544 8.05381C5.4789 7.4246 5.5825 6.63289 6.10744 6.10795L3.75042 3.75092C2.16846 5.33289 1.87019 7.70744 2.84681 9.58927L5.80544 8.05381ZM3.66667 12C3.66667 11.2576 4.15329 10.6245 4.82917 10.4105L3.82308 7.2326C1.80167 7.87257 0.333333 9.76263 0.333333 12H3.66667Z" mask="url(#path-1-outside-1_12304_260256)"/>
+<path d="M8.25 12.4154L10.75 14.9154L15.75 9.08203" stroke="white" stroke-width="1.5"/>
+</svg>

ui/imports/shared/controls/TransactionDelegate.qml

@@ -9,187 +9,502 @@ import StatusQ.Controls 0.1
 
 import utils 1.0
 import shared 1.0
-import shared.stores 1.0
+
+/*!
+   \qmltype TransactionDelegate
+   \inherits StatusListItem
+   \inqmlmodule shared.controls
+   \since shared.controls 1.0
+   \brief Delegate for transaction activity list
+
+   Delegate to display transaction activity data.
+
+   \qml
+    TransactionDelegate {
+        id: delegate
+        width: ListView.view.width
+        modelData: model
+        swapCryptoValue: 0.18
+        swapFiatValue: 340
+        swapSymbol: "SNT"
+        timeStampText: LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000)
+        cryptoValue: 0.1234
+        fiatValue: 123123
+        currentCurrency: "USD"
+        networkName: "Optimism"
+        symbol: "ETH"
+        bridgeNetworkName: "Mainnet"
+        feeFiatValue: 10.34
+        feeCryptoValue: 0.013
+        transactionStatus: TransactionDelegate.Pending
+        transactionType: TransactionDelegate.Send
+        formatCurrencyAmount: RootStore.formatCurrencyAmount
+        loading: isModelDataValid && modelData.loadingTransaction
+    }
+   \endqml
+
+   Additional usages should be handled using states.
+*/
 
 StatusListItem {
     id: root
 
-    property alias cryptoValueText: cryptoValueText
+    signal retryClicked()
-    property alias fiatValueText: fiatValueText
 
     property var modelData
     property string symbol
-    property bool isIncoming
+    property string swapSymbol // TODO fill when swap data is implemented
+    property int transactionType
+    property int transactionStatus: transferStatus === 0 ? TransactionDelegate.TransactionStatus.Failed : TransactionDelegate.TransactionStatus.Finished
     property string currentCurrency
     property int transferStatus
     property double cryptoValue
+    property double swapCryptoValue // TODO fill when swap data is implemented
     property double fiatValue
+    property double swapFiatValue // TODO fill when swap data is implemented
+    property double feeCryptoValue // TODO fill when bridge data is implemented
+    property double feeFiatValue // TODO fill when bridge data is implemented
     property string networkIcon
     property string networkColor
     property string networkName
-    property string shortTimeStamp
+    property string bridgeNetworkName // TODO fill when bridge data is implemented
-    property string savedAddressNameTo
+    property string timeStampText
-    property string savedAddressNameFrom
+    property string addressNameTo
-    property bool isSummary: false
+    property string addressNameFrom
+    property var formatCurrencyAmount: function() {}
 
     readonly property bool isModelDataValid: modelData !== undefined && !!modelData
     readonly property bool isNFT: isModelDataValid && modelData.isNFT
-    readonly property string name: isModelDataValid ?
+    readonly property string transactionValue: {
-                                        root.isNFT ?
+        if (!isModelDataValid)
-                                            modelData.nftName ?
+            return qsTr("N/A")
-                                                modelData.nftName :
+        if (root.isNFT) {
-                                                "#" + modelData.tokenID :
+            return modelData.nftName ? modelData.nftName : "#" + modelData.tokenID
-                                            root.isSummary ? root.symbol : RootStore.formatCurrencyAmount(cryptoValue, symbol) :
+        } else {
-                                        "N/A"
+            return root.formatCurrencyAmount(cryptoValue, symbol)
+        }
+    }
+    readonly property string swapTransactionValue: {
+        if (!isModelDataValid) {
+            return qsTr("N/A")
+        }
+        return root.formatCurrencyAmount(swapCryptoValue, swapSymbol)
+    }
 
-    readonly property string image: isModelDataValid ?
+    readonly property string tokenImage: {
-                                        root.isNFT ?
+        if (!isModelDataValid)
-                                            modelData.nftImageUrl ?
+            return ""
-                                                modelData.nftImageUrl :
+        if (root.isNFT) {
-                                                "" :
+            return modelData.nftImageUrl ? modelData.nftImageUrl : ""
-                                            root.symbol ?
+        } else {
-                                                Style.png("tokens/%1".arg(root.symbol)) :
+            return root.symbol ? Style.png("tokens/%1".arg(root.symbol)) : ""
-                                                "" :
+        }
-                                        ""
+    }
 
-    readonly property string toAddress: !!savedAddressNameTo ?
+    readonly property string swapTokenImage: {
-                                            savedAddressNameTo :
+        if (!isModelDataValid)
+            return ""
+        return root.swapSymbol ? Style.png("tokens/%1".arg(root.swapSymbol)) : ""
+    }
+
+    readonly property string toAddress: !!addressNameTo ?
+                                            addressNameTo :
                                             isModelDataValid ?
                                                 Utils.compactAddress(modelData.to, 4) :
                                                 ""
 
-    readonly property string fromAddress: !!savedAddressNameFrom ?
+    readonly property string fromAddress: !!addressNameFrom ?
-                                            savedAddressNameFrom :
+                                            addressNameFrom :
                                             isModelDataValid ?
                                                 Utils.compactAddress(modelData.from, 4) :
                                                 ""
-    state: "normal"
+
-    enabled: !loading
+    property StatusAssetSettings statusIconAsset: StatusAssetSettings {
-    asset.isImage: !loading
+        width: 12
-    asset.name: root.image
+        height: 12
-    asset.isLetterIdenticon: loading
+        bgWidth: width + 2
-    title: root.isModelDataValid ?
+        bgHeight: bgWidth
-                isIncoming ?
+        bgRadius: bgWidth / 2
-                    isSummary ?
+        bgColor: root.color
-                        qsTr("Receive %1").arg(root.name) :
+        color: "transparent"
-                        qsTr("Received %1 from %2").arg(root.name).arg(root.fromAddress):
+        name: {
-                    isSummary ?
+            switch(root.transactionStatus) {
-                        qsTr("Send %1 to %2").arg(root.name).arg(root.toAddress) :
+            case TransactionDelegate.TransactionStatus.Pending:
-                        qsTr("Sent %1 to %2").arg(root.name).arg(root.toAddress) :
+                return Style.svg("transaction/pending")
-                ""
+            case TransactionDelegate.TransactionStatus.Verified:
-    subTitle: shortTimeStamp
+                return Style.svg("transaction/verified")
-    inlineTagModel: 1
+            case TransactionDelegate.TransactionStatus.Finished:
-    inlineTagDelegate: InformationTag {
+                return Style.svg("transaction/finished")
-        tagPrimaryLabel.text: networkName
+            case TransactionDelegate.TransactionStatus.Failed:
-        tagPrimaryLabel.color: networkColor
+                return Style.svg("transaction/failed")
-        image.source: !!networkIcon ? Style.svg("tiny/%1".arg(networkIcon)) : ""
+            default:
-        customBackground: Component {
+                return ""
-            Rectangle {
-                color: "transparent"
-                border.width: 1
-                border.color: Theme.palette.baseColor2
-                radius: 36
             }
         }
-        width: 51
-        height: root.loading ? textMetrics.tightBoundingRect.height : 24
-        rightComponent: transferStatus === Constants.TransactionStatus.Success ? completedIcon : loadingIndicator
-        loading: root.loading
     }
-    TextMetrics {
+
-        id: textMetrics
+    property StatusAssetSettings tokenIconAsset: StatusAssetSettings {
-        font: statusListItemSubTitle.font
+        width: 18
-        text: statusListItemSubTitle.text
+        height: 18
+        bgWidth: width
+        bgHeight: height
+        bgColor: "transparent"
+        color: "transparent"
+        isImage: !loading
+        name: root.tokenImage
+        isLetterIdenticon: loading
     }
-    components: [
+
-        ColumnLayout {
+    enum TransactionType {
-            visible: !root.isNFT
+        Send,
-            Row {
+        Receive,
-                Layout.alignment: Qt.AlignRight
+        Buy,
-                spacing: 4
+        Sell,
-                StatusIcon {
+        Destroy,
-                    color: isIncoming ? Theme.palette.successColor1 : Theme.palette.dangerColor1
+        Swap,
-                    icon: "arrow-up"
+        Bridge
-                    rotation: isIncoming ? 135 : 45
+    }
-                    height: 18
+
-                    visible: !root.loading
+    enum TransactionStatus {
+        Pending,
+        Failed,
+        Verified,
+        Finished
+    }
+
+    QtObject {
+        id: d
+
+        property int loadingPixelSize: 13
+        property int datePixelSize: 12
+        property int titlePixelSize: 15
+        property int subtitlePixelSize: 13
+    }
+
+    rightPadding: 16
+    enabled: !loading
+    color: sensor.containsMouse ? Theme.palette.baseColor5 : Theme.palette.statusListItem.backgroundColor
+
+    statusListItemIcon.active: (loading || root.asset.name)
+    asset {
+        width: 24
+        height: 24
+        isImage: false
+        imgIsIdenticon: true
+        isLetterIdenticon: loading
+        name: {
+            switch(root.transactionType) {
+            case TransactionDelegate.TransactionType.Send:
+                return "receive"
+            case TransactionDelegate.TransactionType.Receive:
+                return "send"
+            case TransactionDelegate.TransactionType.Buy:
+            case TransactionDelegate.TransactionType.Sell:
+                return "token"
+            case TransactionDelegate.TransactionType.Destroy:
+                return "destroy"
+            case TransactionDelegate.TransactionType.Swap:
+                return "swap"
+            case TransactionDelegate.TransactionType.Bridge:
+                return "bridge"
+            default:
+                return ""
+            }
+        }
+        bgColor: "transparent"
+        color: Theme.palette.black
+        bgBorderWidth: 1
+        bgBorderColor: Theme.palette.primaryColor3
+    }
+
+    sensor.children: [
+        StatusRoundIcon {
+            id: leftIconStatusIcon
+            visible: !root.loading
+            anchors {
+                right: root.statusListItemIcon.right
+                bottom: root.statusListItemIcon.bottom
+            }
+            asset: root.statusIconAsset
+        }
+    ]
+
+    // Title
+    title: {
+        if (root.loading) {
+            return "dummmy"
+        } else if (!root.isModelDataValid) {
+            return ""
+        }
+
+        const isPending = root.transactionStatus === TransactionDelegate.TransactionStatus.Pending
+        const failed = root.transactionStatus === TransactionDelegate.TransactionStatus.Failed
+        switch(root.transactionType) {
+        case TransactionDelegate.TransactionType.Send:            
+            return failed ? qsTr("Send failed") : (isPending ? qsTr("Sending") : qsTr("Sent"))
+        case TransactionDelegate.TransactionType.Receive:
+            return failed ? qsTr("Receive failed") : (isPending ? qsTr("Receiving") : qsTr("Received"))
+        case TransactionDelegate.TransactionType.Buy:
+            return failed ? qsTr("Buy failed") : (isPending ? qsTr("Buying") : qsTr("Bought"))
+        case TransactionDelegate.TransactionType.Sell:
+            return failed ? qsTr("Sell failed") : (isPending ? qsTr("Selling") : qsTr("Sold"))
+        case TransactionDelegate.TransactionType.Destroy:
+            return failed ? qsTr("Destroy failed") : (isPending ? qsTr("Destroying") : qsTr("Destroyed"))
+        case TransactionDelegate.TransactionType.Swap:
+            return failed ? qsTr("Swap failed") : (isPending ? qsTr("Swapping") : qsTr("Swapped"))
+        case TransactionDelegate.TransactionType.Bridge:
+            return failed ? qsTr("Bridge failed") : (isPending ? qsTr("Bridging") : qsTr("Bridged"))
+        default:
+            return ""
+        }
+    }
+    statusListItemTitleArea.anchors.rightMargin: root.rightPadding
+    statusListItemTitle.font.weight: Font.DemiBold
+    statusListItemTitle.font.pixelSize: root.loading ? d.loadingPixelSize : d.titlePixelSize
+
+    // title icons and date
+    statusListItemTitleIcons.sourceComponent: Row {
+        spacing: 8
+        Row {
+            visible: !root.loading
+            spacing: swapTokenImage.visible ? -tokenImage.width * 0.2 : 0
+            StatusRoundIcon {
+                id: tokenImage
+                anchors.verticalCenter: parent.verticalCenter
+                asset: root.tokenIconAsset
+            }
+            StatusRoundIcon {
+                id: swapTokenImage
+                visible: !root.isNFT && !!root.swapTokenImage && root.transactionType === TransactionDelegate.TransactionType.Swap
+                anchors.verticalCenter: parent.verticalCenter
+                asset: StatusAssetSettings {
+                    width: root.tokenIconAsset.width
+                    height: root.tokenIconAsset.height
+                    bgWidth: width + 2
+                    bgHeight: height + 2
+                    bgRadius: bgWidth / 2
+                    bgColor: root.color
+                    isImage:root.tokenIconAsset.isImage
+                    color: root.tokenIconAsset.color
+                    name: root.swapTokenImage
+                    isLetterIdenticon: root.tokenIconAsset.isLetterIdenticon
                 }
+            }
+        }
+        StatusTextWithLoadingState {
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.loading ? root.title : root.timeStampText
+            verticalAlignment: Qt.AlignVCenter
+            font.pixelSize: root.loading ? d.loadingPixelSize : d.datePixelSize
+            visible: !!text
+            loading: root.loading
+            customColor: Theme.palette.baseColor1
+        }
+    }
+
+    // subtitle
+    subTitle: {
+        if (!root.isModelDataValid) {
+            return ""
+        }
+        switch(root.transactionType) {
+        case TransactionDelegate.TransactionType.Receive:
+            return qsTr("%1 from %2 via %3").arg(transactionValue).arg(toAddress).arg(networkName)
+        case TransactionDelegate.TransactionType.Buy:
+        case TransactionDelegate.TransactionType.Sell:
+            return qsTr("%1 on %2 via %3").arg(transactionValue).arg(toAddress).arg(networkName)
+        case TransactionDelegate.TransactionType.Destroy:
+            return qsTr("%1 at %2 via %3").arg(transactionValue).arg(toAddress).arg(networkName)
+        case TransactionDelegate.TransactionType.Swap:
+            return qsTr("%1 to %2 via %3").arg(transactionValue).arg(swapTransactionValue).arg(networkName)
+        case TransactionDelegate.TransactionType.Bridge:
+            return qsTr("%1 from %2 to %3").arg(transactionValue).arg(bridgeNetworkName).arg(networkName)
+        default:
+            return qsTr("%1 to %2 via %3").arg(transactionValue).arg(toAddress).arg(networkName)
+        }
+    }
+    statusListItemSubTitle.maximumLoadingStateWidth: 300
+    statusListItemSubTitle.customColor: Theme.palette.directColor1
+    statusListItemSubTitle.font.pixelSize: root.loading ? d.loadingPixelSize : d.subtitlePixelSize
+    statusListItemTagsRowLayout.anchors.topMargin: 4 // Spacing between title row nad subtitle row
+
+    // Right side components
+    components: [
+        Loader {
+            active: !headerStatusLoader.active
+            visible: active
+            sourceComponent: ColumnLayout {
                 StatusTextWithLoadingState {
                     id: cryptoValueText
-                    text: RootStore.formatCurrencyAmount(cryptoValue, root.symbol)
+                    text: {
-                    Binding on width {
+                        if (root.loading) {
-                        when: root.loading
+                            return "dummy text"
-                        value: 111
+                        } else if (!root.isModelDataValid || root.isNFT) {
-                        restoreMode: Binding.RestoreBindingOrValue
+                            return ""
+                        }
+
+                        switch(root.transactionType) {
+                        case TransactionDelegate.TransactionType.Send:
+                        case TransactionDelegate.TransactionType.Sell:
+                            return "-" + root.transactionValue
+                        case TransactionDelegate.TransactionType.Buy:
+                        case TransactionDelegate.TransactionType.Receive:
+                            return "+" + root.transactionValue
+                        case TransactionDelegate.TransactionType.Swap:
+                            return "<font color=\"%1\">-%2</font> <font color=\"%3\">/</font> <font color=\"%4\">+%5</font>"
+                                          .arg(Theme.palette.directColor1)
+                                          .arg(root.transactionValue)
+                                          .arg(Theme.palette.baseColor1)
+                                          .arg(Theme.palette.successColor1)
+                                          .arg(root.swapTransactionValue)
+                        case TransactionDelegate.TransactionType.Bridge:
+                            return "-" + root.formatCurrencyAmount(feeCryptoValue, root.symbol)
+                        default:
+                            return ""
+                        }
+                    }
+                    horizontalAlignment: Qt.AlignRight
+                    Layout.alignment: Qt.AlignRight
+                    font.pixelSize: root.loading ? d.loadingPixelSize : 13
+                    customColor: {
+                        switch(root.transactionType) {
+                        case TransactionDelegate.TransactionType.Receive:
+                        case TransactionDelegate.TransactionType.Buy:
+                        case TransactionDelegate.TransactionType.Swap:
+                            return Theme.palette.successColor1
+                        default:
+                            return Theme.palette.directColor1
+                        }
                     }
-                    customColor: Theme.palette.directColor1
                     loading: root.loading
                 }
+                StatusTextWithLoadingState {
+                    id: fiatValueText
+                    Layout.alignment: Qt.AlignRight
+                    horizontalAlignment: Qt.AlignRight
+                    text: {
+                        if (root.loading) {
+                            return "dummy text"
+                        } else if (!root.isModelDataValid || root.isNFT) {
+                            return ""
+                        }
 
+                        switch(root.transactionType) {
+                        case TransactionDelegate.TransactionType.Send:
+                        case TransactionDelegate.TransactionType.Sell:
+                        case TransactionDelegate.TransactionType.Buy:
+                            return "-" + root.formatCurrencyAmount(root.fiatValue, root.currentCurrency)
+                        case TransactionDelegate.TransactionType.Receive:
+                            return "+" + root.formatCurrencyAmount(root.fiatValue, root.currentCurrency)
+                        case TransactionDelegate.TransactionType.Swap:
+                            return "-%1 / +%2".arg(root.formatCurrencyAmount(root.fiatValue, root.currentCurrency))
+                                              .arg(root.formatCurrencyAmount(root.swapFiatValue, root.currentCurrency))
+                        case TransactionDelegate.TransactionType.Bridge:
+                            return "-" + root.formatCurrencyAmount(root.feeFiatValue, root.currentCurrency)
+                        default:
+                            return ""
+                        }
+                    }
+                    font.pixelSize: root.loading ? d.loadingPixelSize : 12
+                    customColor: Theme.palette.baseColor1
+                    loading: root.loading
+                }
             }
-            StatusTextWithLoadingState {
+        },
-                id: fiatValueText
+        Loader {
-                Layout.alignment: Qt.AlignRight
+            id: headerStatusLoader
-                text: RootStore.formatCurrencyAmount(fiatValue, root.currentCurrency)
+            active: false
-                font.pixelSize: 15
+            visible: active
-                customColor: Theme.palette.baseColor1
+            sourceComponent: Rectangle {
-                loading: root.loading
+                id: statusRect
+                width: transactionTypeIcon.width + (retryButton.visible ? retryButton.width + 5 : 0)
+                height: transactionTypeIcon.height
+                anchors.verticalCenter: parent.verticalCenter
+                color: "transparent"
+                radius: 100
+                border {
+                    width: retryButton.visible ? 1 : 0
+                    color: root.asset.bgBorderColor
+                }
+
+                StatusButton {
+                    id: retryButton
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.leftMargin: 10
+                    radius: height / 2
+                    height: parent.height * 0.7
+                    verticalPadding: 0
+                    horizontalPadding: radius
+                    textFillWidth: true
+                    text: qsTr("Retry")
+                    size: StatusButton.Small
+                    type: StatusButton.Primary
+                    visible: !root.loading && root.transactionStatus === TransactionDelegate.Failed
+                    onClicked: root.retryClicked()
+                }
+
+                StatusSmartIdenticon {
+                    id: transactionTypeIcon
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    enabled: false
+                    asset: root.asset
+                    active: !!root.asset.name
+                    loading: root.loading
+                    name: root.title
+                }
+                StatusRoundIcon {
+                    visible: !root.loading
+                    anchors {
+                        right: transactionTypeIcon.right
+                        bottom: transactionTypeIcon.bottom
+                    }
+                    asset: root.statusIconAsset
+                }
             }
         }
     ]
 
-    Component {
-        id: loadingIndicator
-        StatusLoadingIndicator {
-            height: 10
-            width: 10
-        }
-    }
-
-    Component {
-        id: completedIcon
-        StatusIcon {
-            visible: icon !== ""
-            icon: "checkmark"
-            color: Theme.palette.baseColor1
-            width: 10
-            height: 10
-        }
-    }
-
     states: [
         State {
-            name: "normal"
+            name: "header"
             PropertyChanges {
-                target: asset
+                target: headerStatusLoader
-                width: 40
+                active: true
-                height: 40
             }
             PropertyChanges {
-                target: statusListItemTitle
+                target: leftIconStatusIcon
-                font.weight: Font.Medium
+                visible: false
-                font.pixelSize: 15
             }
             PropertyChanges {
-                target: cryptoValueText
+                target: root.statusListItemIcon
-                font.pixelSize: 15
+                active: false
-            }
-        },
-        State {
-            name: "big"
-            PropertyChanges {
-                target: asset
-                width: 50
-                height: 50
             }
             PropertyChanges {
-                target: statusListItemTitle
+                target: root.asset
-                font.weight: Font.Bold
+                bgBorderWidth: root.transactionStatus === TransactionDelegate.Failed ? 0 : 1
-                font.pixelSize: 17
+                width: 34
+                height: 34
+                bgWidth: 56
+                bgHeight: 56
             }
             PropertyChanges {
-                target: cryptoValueText
+                target: root.statusIconAsset
-                font.pixelSize: 17
+                width: 17
+                height: 17
+            }
+            PropertyChanges {
+                target: root.tokenIconAsset
+                width: 20
+                height: 20
+            }
+            PropertyChanges {
+                target: d
+                titlePixelSize: 17
+                datePixelSize: 13
+                subtitlePixelSize: 15
+                loadingPixelSize: 14
             }
         }
     ]

ui/imports/shared/stores/RootStore.qml

@@ -54,6 +54,10 @@ QtObject {
         return networksModule.all.getNetworkShortName(chainId)
     }
 
+    function getNetworkFullName(chainId) {
+        return networksModule.all.getNetworkFullName(chainId)
+    }
+
     function getNetworkIconUrl(symbol) {
         return networksModule.all.getNetworkIconUrl(symbol)
     }

ui/imports/shared/views/HistoryView.qml

@@ -17,6 +17,8 @@ import "../popups"
 import "../stores"
 import "../controls"
 
+import AppLayouts.Wallet.stores 1.0 as WalletStores
+
 ColumnLayout {
     id: root
 
@@ -193,19 +195,19 @@ ColumnLayout {
         TransactionDelegate {
             width: ListView.view.width
             modelData: model
-            isIncoming: isModelDataValid ? modelData.to === root.overview.mixedcaseAddress: false
+            transactionType: isModelDataValid && modelData.to.toLowerCase() === root.overview.mixedcaseAddress.toLowerCase() ? TransactionDelegate.Receive : TransactionDelegate.Send
             currentCurrency: RootStore.currentCurrency
             cryptoValue: isModelDataValid ? modelData.value.amount : 0.0
             fiatValue: isModelDataValid ? RootStore.getFiatValue(cryptoValue, symbol, currentCurrency): 0.0
             networkIcon: isModelDataValid ? RootStore.getNetworkIcon(modelData.chainId) : ""
             networkColor: isModelDataValid ? RootStore.getNetworkColor(modelData.chainId) : ""
-            networkName: isModelDataValid ? RootStore.getNetworkShortName(modelData.chainId) : ""
+            networkName: isModelDataValid ? RootStore.getNetworkFullName(modelData.chainId) : ""
             symbol: isModelDataValid && !!modelData.symbol ? modelData.symbol : ""
             transferStatus: isModelDataValid ? RootStore.hex2Dec(modelData.txStatus) : ""
-            shortTimeStamp: isModelDataValid ? LocaleUtils.formatTime(modelData.timestamp * 1000, Locale.ShortFormat) : ""
+            timeStampText: isModelDataValid ? LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000) : ""
-            savedAddressNameTo: isModelDataValid ? RootStore.getNameForSavedWalletAddress(modelData.to) : ""
+            addressNameTo: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.to) : ""
-            savedAddressNameFrom: isModelDataValid ? RootStore.getNameForSavedWalletAddress(modelData.from) : ""
+            addressNameFrom: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.from) : ""
-            isSummary: true
+            formatCurrencyAmount: RootStore.formatCurrencyAmount
             onClicked: launchTransactionDetail(modelData)
             loading: isModelDataValid ? modelData.loadingTransaction : false