status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

closes #10473
closes #10542
fixes #10408
This commit is contained in:
Cuteivist 2023-05-10 13:54:06 +02:00 committed by GitHub
parent b87231e14b
commit ec04b8668f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 703 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/modules/main/wallet_section/accounts/model.nim
View File

@ -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 ""

5
src/app/modules/main/wallet_section/accounts/view.nim
View File

@ -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)

4
storybook/PagesModel.qml
View File

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

149
storybook/pages/TransactionDelegatePage.qml Normal file
View File

@ -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
}
}
}
}

1
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -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)

3
ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
View File

@ -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

2
ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -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)

11
ui/StatusQ/src/StatusQ/Controls/StatusTextWithLoadingState.qml
View File

@ -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)
}
}

9
ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml
View File

@ -301,10 +301,13 @@ QtObject {
// otherwise
var fullFormatString = d.fixupTimeFormatString(loc.dateTimeFormat(Locale.ShortFormat))
if (now.getFullYear() === value.getFullYear())
fullFormatString = fullFormatString.replace(/y/g, "") // strip year part, if current year -> "31 December 09:41"
else
if (now.getFullYear() === value.getFullYear()) {
// strip year part, if current year -> "31 December 09:41"
// 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)
}

1
ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml
View File

@ -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

2
ui/StatusQ/src/StatusQ/Core/StatusIcon.qml
View File

@ -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"

1
ui/StatusQ/src/assets.qrc
View File

@ -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>

10
ui/StatusQ/src/assets/img/icons/destroy.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

8
ui/app/AppLayouts/Wallet/stores/RootStore.qml
View File

@ -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)
}

31
ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml
View File

@ -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): ""
savedAddressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
savedAddressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
isSummary: false
timeStampText: root.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): ""
addressNameTo: root.isTransactionValid ? WalletStores.RootStore.getNameForAddress(transaction.to): ""
addressNameFrom: root.isTransactionValid ? WalletStores.RootStore.getNameForAddress(transaction.from): ""
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): ""
savedAddressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
savedAddressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
isSummary: false
timeStampText: root.isTransactionValid ? LocaleUtils.formatTime(transaction.timestamp * 1000, Locale.ShortFormat): ""
addressNameTo: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.to): ""
addressNameFrom: root.isTransactionValid ? RootStore.getNameForSavedWalletAddress(transaction.from): ""
formatCurrencyAmount: RootStore.formatCurrencyAmount
sensor.enabled: false
color: Theme.palette.statusListItem.backgroundColor
border.width: 1

4
ui/imports/assets/icons/transaction/failed.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 981 B

8
ui/imports/assets/icons/transaction/finished.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

6
ui/imports/assets/icons/transaction/pending.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 345 B

8
ui/imports/assets/icons/transaction/verified.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

571
ui/imports/shared/controls/TransactionDelegate.qml
View File

@ -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
property alias fiatValueText: fiatValueText
signal retryClicked()
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 savedAddressNameTo
property string savedAddressNameFrom
property bool isSummary: false
property string bridgeNetworkName // TODO fill when bridge data is implemented
property string timeStampText
property string addressNameTo
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 ?
root.isNFT ?
modelData.nftName ?
modelData.nftName :
"#" + modelData.tokenID :
root.isSummary ? root.symbol : RootStore.formatCurrencyAmount(cryptoValue, symbol) :
"N/A"
readonly property string transactionValue: {
if (!isModelDataValid)
return qsTr("N/A")
if (root.isNFT) {
return modelData.nftName ? modelData.nftName : "#" + modelData.tokenID
} else {
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 ?
root.isNFT ?
modelData.nftImageUrl ?
modelData.nftImageUrl :
"" :
root.symbol ?
Style.png("tokens/%1".arg(root.symbol)) :
"" :
""
readonly property string tokenImage: {
if (!isModelDataValid)
return ""
if (root.isNFT) {
return modelData.nftImageUrl ? modelData.nftImageUrl : ""
} else {
return root.symbol ? Style.png("tokens/%1".arg(root.symbol)) : ""
}
}
readonly property string toAddress: !!savedAddressNameTo ?
savedAddressNameTo :
readonly property string swapTokenImage: {
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 ?
savedAddressNameFrom :
readonly property string fromAddress: !!addressNameFrom ?
addressNameFrom :
isModelDataValid ?
Utils.compactAddress(modelData.from, 4) :
""
state: "normal"
enabled: !loading
asset.isImage: !loading
asset.name: root.image
asset.isLetterIdenticon: loading
title: root.isModelDataValid ?
isIncoming ?
isSummary ?
qsTr("Receive %1").arg(root.name) :
qsTr("Received %1 from %2").arg(root.name).arg(root.fromAddress):
isSummary ?
qsTr("Send %1 to %2").arg(root.name).arg(root.toAddress) :
qsTr("Sent %1 to %2").arg(root.name).arg(root.toAddress) :
""
subTitle: shortTimeStamp
inlineTagModel: 1
inlineTagDelegate: InformationTag {
tagPrimaryLabel.text: networkName
tagPrimaryLabel.color: networkColor
image.source: !!networkIcon ? Style.svg("tiny/%1".arg(networkIcon)) : ""
customBackground: Component {
Rectangle {
color: "transparent"
border.width: 1
border.color: Theme.palette.baseColor2
radius: 36
property StatusAssetSettings statusIconAsset: StatusAssetSettings {
width: 12
height: 12
bgWidth: width + 2
bgHeight: bgWidth
bgRadius: bgWidth / 2
bgColor: root.color
color: "transparent"
name: {
switch(root.transactionStatus) {
case TransactionDelegate.TransactionStatus.Pending:
return Style.svg("transaction/pending")
case TransactionDelegate.TransactionStatus.Verified:
return Style.svg("transaction/verified")
case TransactionDelegate.TransactionStatus.Finished:
return Style.svg("transaction/finished")
case TransactionDelegate.TransactionStatus.Failed:
return Style.svg("transaction/failed")
default:
return ""
}
}
width: 51
height: root.loading ? textMetrics.tightBoundingRect.height : 24
rightComponent: transferStatus === Constants.TransactionStatus.Success ? completedIcon : loadingIndicator
loading: root.loading
}
TextMetrics {
id: textMetrics
font: statusListItemSubTitle.font
text: statusListItemSubTitle.text
property StatusAssetSettings tokenIconAsset: StatusAssetSettings {
width: 18
height: 18
bgWidth: width
bgHeight: height
bgColor: "transparent"
color: "transparent"
isImage: !loading
name: root.tokenImage
isLetterIdenticon: loading
}
components: [
ColumnLayout {
visible: !root.isNFT
Row {
Layout.alignment: Qt.AlignRight
spacing: 4
StatusIcon {
color: isIncoming ? Theme.palette.successColor1 : Theme.palette.dangerColor1
icon: "arrow-up"
rotation: isIncoming ? 135 : 45
height: 18
visible: !root.loading
enum TransactionType {
Send,
Receive,
Buy,
Sell,
Destroy,
Swap,
Bridge
}
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)
Binding on width {
when: root.loading
value: 111
restoreMode: Binding.RestoreBindingOrValue
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:
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
Layout.alignment: Qt.AlignRight
text: RootStore.formatCurrencyAmount(fiatValue, root.currentCurrency)
font.pixelSize: 15
customColor: Theme.palette.baseColor1
loading: root.loading
},
Loader {
id: headerStatusLoader
active: false
visible: active
sourceComponent: Rectangle {
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
width: 40
height: 40
target: headerStatusLoader
active: true
}
PropertyChanges {
target: statusListItemTitle
font.weight: Font.Medium
font.pixelSize: 15
target: leftIconStatusIcon
visible: false
}
PropertyChanges {
target: cryptoValueText
font.pixelSize: 15
}
},
State {
name: "big"
PropertyChanges {
target: asset
width: 50
height: 50
target: root.statusListItemIcon
active: false
}
PropertyChanges {
target: statusListItemTitle
font.weight: Font.Bold
font.pixelSize: 17
target: root.asset
bgBorderWidth: root.transactionStatus === TransactionDelegate.Failed ? 0 : 1
width: 34
height: 34
bgWidth: 56
bgHeight: 56
}
PropertyChanges {
target: cryptoValueText
font.pixelSize: 17
target: root.statusIconAsset
width: 17
height: 17
}
PropertyChanges {
target: root.tokenIconAsset
width: 20
height: 20
}
PropertyChanges {
target: d
titlePixelSize: 17
datePixelSize: 13
subtitlePixelSize: 15
loadingPixelSize: 14
}
}
]

4
ui/imports/shared/stores/RootStore.qml
View File

@ -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)
}

14
ui/imports/shared/views/HistoryView.qml
View File

@ -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) : ""
savedAddressNameTo: isModelDataValid ? RootStore.getNameForSavedWalletAddress(modelData.to) : ""
savedAddressNameFrom: isModelDataValid ? RootStore.getNameForSavedWalletAddress(modelData.from) : ""
isSummary: true
timeStampText: isModelDataValid ? LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000) : ""
addressNameTo: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.to) : ""
addressNameFrom: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.from) : ""
formatCurrencyAmount: RootStore.formatCurrencyAmount
onClicked: launchTransactionDetail(modelData)
loading: isModelDataValid ? modelData.loadingTransaction : false