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(desktop/wallet2) Adding token view 

Initial commit adding token detailed view
as per new design
This commit is contained in:
Alexandra Betouni 2021-09-08 18:41:38 +03:00 committed by Iuri Matias
parent 56116709b6
commit c030879c18
10 changed files with 288 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/app/AppLayouts/WalletV2/WalletHeader.qml
View File

@ -8,27 +8,16 @@ import "./components"
import "./components/network"
Item {
id: walletHeader
anchors.left: parent.left
anchors.right: parent.right
height: walletAddress.y + walletAddress.height
property var currentAccount: walletV2Model.accountsView.currentAccount
property var changeSelectedAccount
id: walletHeader
height: walletAddress.y + walletAddress.height
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
Layout.fillHeight: true
Layout.fillWidth: true
Row {
id: accountRow
anchors.top: parent.top
anchors.topMargin: 24
anchors.left: parent.left
anchors.leftMargin: 24
spacing: 8
StyledText {
@ -72,16 +61,11 @@ Item {
anchors.top: accountRow.bottom
anchors.left: accountRow.left
addressWidth: 180
anchors.leftMargin: 0
anchors.topMargin: 0
}
NetworkSelect {
id: networkSelect
anchors.top: parent.top
anchors.topMargin: 30
anchors.right: parent.right
anchors.rightMargin: 90
}
Component {

126
ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
View File

@ -3,6 +3,8 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../imports"
import "../../../shared"
import "views"
import "views/assets"
import "."
import "./components"
@ -53,65 +55,93 @@ Item {
rightPanel: Item {
anchors.fill: parent
WalletHeader {
id: walletHeader
changeSelectedAccount: leftTab.changeSelectedAccount
visible: !collectiblesDetailPage.active
}
RowLayout {
id: walletInfoContainer
anchors.top: parent.top
anchors.topMargin: 31
anchors.bottom: walletFooter.top
anchors.bottomMargin: 0
anchors.bottomMargin: 24
anchors.left: parent.left
anchors.leftMargin: 0
anchors.leftMargin: 80
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: walletHeader.bottom
anchors.topMargin: 23
visible: !collectiblesDetailPage.active
Item {
id: walletInfoContent
Layout.fillHeight: true
anchors.rightMargin: 80
StackBaseView {
id: stackView
Layout.fillWidth: true
Layout.fillHeight: true
initialItem: Item {
id: walletInfoContent
WalletHeader {
id: walletHeader
changeSelectedAccount: leftTab.changeSelectedAccount
}
TabBar {
id: walletTabBar
anchors.right: parent.right
anchors.left: parent.left
anchors.top: walletHeader.bottom
anchors.topMargin: Style.current.padding
height: childrenRect.height
spacing: 24
background: Rectangle {
color: Style.current.transparent
}
StatusTabButton {
id: assetsBtn
btnText: qsTr("Assets")
}
StatusTabButton {
id: positionsBtn
btnText: qsTr("Positions")
}
StatusTabButton {
id: collectiblesBtn
btnText: qsTr("Collectibles")
}
StatusTabButton {
id: activityBtn
btnText: qsTr("Activity")
}
StatusTabButton {
id: settingsBtn
btnText: qsTr("Settings")
}
}
TabBar {
id: walletTabBar
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
anchors.left: parent.left
anchors.leftMargin: Style.current.bigPadding
anchors.top: parent.top
anchors.topMargin: Style.current.padding
height: collectiblesBtn.height
background: Rectangle {
color: Style.current.transparent
}
StatusTabButton {
id: collectiblesBtn
btnText: qsTr("Collectibles")
}
StatusTabButton {
id: settingsBtn
anchors.left: collectiblesBtn.right
anchors.leftMargin: walletInfoContent.width - collectiblesBtn.width - 100
btnText: qsTr("Settings")
StackLayout {
id: stackLayout
anchors.top: walletTabBar.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.topMargin: Style.current.bigPadding
currentIndex: walletTabBar.currentIndex
AssetsView {
id: assetsTab
onAssetClicked: {
stackView.replace(assetDetailView);
}
}
PositionsView {
id: positionsTab
}
CollectiblesView {
id: collectiblesTab
}
ActivityView {
id: activityTab
}
}
}
}
StackLayout {
id: stackLayout
anchors.top: walletTabBar.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.topMargin: Style.current.padding
currentIndex: walletTabBar.currentIndex
CollectiblesTab {
id: collectiblesTab
Component {
id: assetDetailView
AssetDetailView {
onBackPressed: {
stackView.replace(walletInfoContent);
}
SettingsTab {

9
ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml
View File

@ -4,8 +4,8 @@ import "../../../../../imports"
Item {
id: root
width: selectRectangle.width + Style.current.padding
width: selectRectangle.width
height: childrenRect.height
Rectangle {
id: selectRectangle
@ -49,6 +49,7 @@ Item {
}
NetworkFilter {
id: networkFilter
anchors.topMargin: Style.current.halfPadding
anchors.top: selectRectangle.bottom
width: root.width
@ -56,7 +57,7 @@ Item {
NetworkSelectPopup {
id: selectPopup
y: root.height + root.anchors.topMargin + Style.current.padding
x: parent.width - width - Style.current.padding
x: (parent.width - width)
y: (root.height - networkFilter.height)
}
}

14
ui/app/AppLayouts/WalletV2/views/ActivityView.qml Normal file
View File

@ -0,0 +1,14 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
StatusBaseText {
anchors.centerIn: parent
color: Theme.palette.baseColor1
text: qsTr("Activity will appear here")
font.pixelSize: 15
}
}

112
ui/app/AppLayouts/WalletV2/views/AssetsView.qml Normal file
View File

@ -0,0 +1,112 @@
import QtQuick 2.13
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14
import "../../../../imports"
import "../../../../shared"
import StatusQ.Core 0.1
Item {
id: root
signal assetClicked(string name)
Component {
id: assetViewDelegate
Item {
id: element
anchors.right: parent.right
anchors.left: parent.left
height: 40
Image {
id: assetInfoImage
width: 36
height: 36
source: symbol ? "../../../img/tokens/" + symbol + ".png" : ""
anchors.left: parent.left
anchors.leftMargin: 0
anchors.verticalCenter: parent.verticalCenter
onStatusChanged: {
if (assetInfoImage.status == Image.Error) {
assetInfoImage.source = "../../../img/tokens/DEFAULT-TOKEN@3x.png"
}
}
}
StatusBaseText {
id: assetSymbol
text: symbol
anchors.left: assetInfoImage.right
anchors.leftMargin: Style.current.smallPadding
anchors.top: assetInfoImage.top
anchors.topMargin: 0
font.pixelSize: 15
}
StatusBaseText {
id: assetFullTokenName
text: name
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: assetInfoImage.right
anchors.leftMargin: Style.current.smallPadding
color: Style.current.secondaryText
font.pixelSize: 15
}
StatusBaseText {
id: assetValue
text: value.toUpperCase() + " " + symbol
anchors.right: parent.right
anchors.rightMargin: 0
font.pixelSize: 15
font.strikeout: false
}
StatusBaseText {
id: assetFiatValue
color: Style.current.secondaryText
text: Utils.toLocaleString(fiatBalance, globalSettings.locale) + " " + walletModel.balanceView.defaultCurrency.toUpperCase()
anchors.right: parent.right
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
font.pixelSize: 15
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
root.assetClicked(name);
}
}
}
}
ListModel {
id: exampleModel
ListElement {
name: "test"
fiatBalance: "2000 USD"
value: "123 USD"
symbol: "ETH"
fullTokenName: "Ethereum"
fiatBalanceDisplay: "3423 ETH"
image: "../../../img/token-icons/eth.svg"
}
}
ScrollView {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: assetListView.contentHeight > assetListView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ListView {
id: assetListView
spacing: Style.current.padding * 2
anchors.fill: parent
//model: exampleModel
model: walletModel.tokensView.assets
delegate: assetViewDelegate
boundsBehavior: Flickable.StopAtBounds
}
}
}

8
ui/app/AppLayouts/WalletV2/CollectiblesTab.qml → ui/app/AppLayouts/WalletV2/views/CollectiblesView.qml
View File

@ -1,10 +1,10 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../../../imports"
import "../../../shared"
import "../../../shared/status/core"
import "./components"
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status/core"
import "../components"
import StatusQ.Components 0.1

14
ui/app/AppLayouts/WalletV2/views/PositionsView.qml Normal file
View File

@ -0,0 +1,14 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
StatusBaseText {
anchors.centerIn: parent
color: Theme.palette.baseColor1
text: qsTr("Positions will appear here")
font.pixelSize: 15
}
}

14
ui/app/AppLayouts/WalletV2/views/StackBaseView.qml Normal file
View File

@ -0,0 +1,14 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
StackView {
id: root
replaceEnter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic }
}
replaceExit: Transition {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
}
}

20
ui/app/AppLayouts/WalletV2/views/StackDetailBase.qml Normal file
View File

@ -0,0 +1,20 @@
import QtQuick 2.13
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
property string backButtonText: ""
signal backPressed()
StatusFlatButton {
text: root.backButtonText
icon.name: "previous"
onClicked: {
root.backPressed();
}
}
}

19
ui/app/AppLayouts/WalletV2/views/assets/AssetDetailView.qml Normal file
View File

@ -0,0 +1,19 @@
import QtQuick 2.13
import QtQuick.Controls 2.12
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import "../"
StackDetailBase {
backButtonText: "Assets"
//graph placeholder
Rectangle {
width: 649
height: 253
anchors.centerIn: parent
color: "pink"
opacity: 0.3
}
}