From c030879c189a7dfba50e1056db069659a6209f9a Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Wed, 8 Sep 2021 18:41:38 +0300 Subject: [PATCH] feat(desktop/wallet2) Adding token view Initial commit adding token detailed view as per new design --- ui/app/AppLayouts/WalletV2/WalletHeader.qml | 26 +--- ui/app/AppLayouts/WalletV2/WalletV2Layout.qml | 130 +++++++++++------- .../components/network/NetworkSelect.qml | 11 +- .../WalletV2/views/ActivityView.qml | 14 ++ .../AppLayouts/WalletV2/views/AssetsView.qml | 112 +++++++++++++++ .../CollectiblesView.qml} | 8 +- .../WalletV2/views/PositionsView.qml | 14 ++ .../WalletV2/views/StackBaseView.qml | 14 ++ .../WalletV2/views/StackDetailBase.qml | 20 +++ .../WalletV2/views/assets/AssetDetailView.qml | 19 +++ 10 files changed, 288 insertions(+), 80 deletions(-) create mode 100644 ui/app/AppLayouts/WalletV2/views/ActivityView.qml create mode 100644 ui/app/AppLayouts/WalletV2/views/AssetsView.qml rename ui/app/AppLayouts/WalletV2/{CollectiblesTab.qml => views/CollectiblesView.qml} (94%) create mode 100644 ui/app/AppLayouts/WalletV2/views/PositionsView.qml create mode 100644 ui/app/AppLayouts/WalletV2/views/StackBaseView.qml create mode 100644 ui/app/AppLayouts/WalletV2/views/StackDetailBase.qml create mode 100644 ui/app/AppLayouts/WalletV2/views/assets/AssetDetailView.qml diff --git a/ui/app/AppLayouts/WalletV2/WalletHeader.qml b/ui/app/AppLayouts/WalletV2/WalletHeader.qml index e1405a7701..ec8ad44afd 100644 --- a/ui/app/AppLayouts/WalletV2/WalletHeader.qml +++ b/ui/app/AppLayouts/WalletV2/WalletHeader.qml @@ -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 { diff --git a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml index 49a407cf74..2158d38734 100644 --- a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml +++ b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml @@ -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" @@ -27,8 +29,8 @@ Item { SignPhraseModal { id: signPhrasePopup } - - SeedPhraseBackupWarning { + + SeedPhraseBackupWarning { id: seedPhraseWarning width: parent.width anchors.top: parent.top @@ -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 { diff --git a/ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml b/ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml index 812b39f2cf..60e4a3c2be 100644 --- a/ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml +++ b/ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml @@ -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) } -} \ No newline at end of file +} diff --git a/ui/app/AppLayouts/WalletV2/views/ActivityView.qml b/ui/app/AppLayouts/WalletV2/views/ActivityView.qml new file mode 100644 index 0000000000..4bc9ef788b --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/ActivityView.qml @@ -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 + } +} diff --git a/ui/app/AppLayouts/WalletV2/views/AssetsView.qml b/ui/app/AppLayouts/WalletV2/views/AssetsView.qml new file mode 100644 index 0000000000..45aa61f289 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/AssetsView.qml @@ -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 + } + } +} diff --git a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml b/ui/app/AppLayouts/WalletV2/views/CollectiblesView.qml similarity index 94% rename from ui/app/AppLayouts/WalletV2/CollectiblesTab.qml rename to ui/app/AppLayouts/WalletV2/views/CollectiblesView.qml index eb8426392f..f8398891ea 100644 --- a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml +++ b/ui/app/AppLayouts/WalletV2/views/CollectiblesView.qml @@ -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 diff --git a/ui/app/AppLayouts/WalletV2/views/PositionsView.qml b/ui/app/AppLayouts/WalletV2/views/PositionsView.qml new file mode 100644 index 0000000000..d566fe7d42 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/PositionsView.qml @@ -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 + } +} diff --git a/ui/app/AppLayouts/WalletV2/views/StackBaseView.qml b/ui/app/AppLayouts/WalletV2/views/StackBaseView.qml new file mode 100644 index 0000000000..f54db6d44c --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/StackBaseView.qml @@ -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 } + } +} diff --git a/ui/app/AppLayouts/WalletV2/views/StackDetailBase.qml b/ui/app/AppLayouts/WalletV2/views/StackDetailBase.qml new file mode 100644 index 0000000000..88805c8d44 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/StackDetailBase.qml @@ -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(); + } + } +} diff --git a/ui/app/AppLayouts/WalletV2/views/assets/AssetDetailView.qml b/ui/app/AppLayouts/WalletV2/views/assets/AssetDetailView.qml new file mode 100644 index 0000000000..fb4f2cf054 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/views/assets/AssetDetailView.qml @@ -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 + } +}