diff --git a/ui/app/AppLayouts/WalletV2/WalletFooter.qml b/ui/app/AppLayouts/WalletV2/WalletFooter.qml
new file mode 100644
index 0000000000..02d930a7e6
--- /dev/null
+++ b/ui/app/AppLayouts/WalletV2/WalletFooter.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import "../../../imports"
+import "./components"
+
+Item {
+ id: walletFooterRoot
+ height: 50
+ width: parent.width
+
+ Rectangle {
+ id: separatorLine
+ anchors.top: parent.top
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 1
+ color: Style.current.separator
+ }
+
+ Row {
+
+ anchors.centerIn: parent
+ spacing: 50
+
+ WalletButton {
+ id: swapBtn
+ imageSource: "../../img/swap-icon.svg"
+ text: qsTr("Swap")
+ onClicked: function (){
+ }
+ }
+
+ WalletButton {
+ id: sendBtn
+ imageSource: "../../img/send.svg"
+ text: qsTr("Send")
+ onClicked: function (){
+ }
+ }
+
+ WalletButton {
+ id: buySellBtn
+ imageSource: "../../img/crypto-icon.svg"
+ text: qsTr("Buy / Sell")
+ onClicked: function (){
+ cryptoServicesModal.open()
+ }
+ }
+ }
+
+ CryptoServicesModal {
+ id: cryptoServicesModal
+ }
+}
diff --git a/ui/app/AppLayouts/WalletV2/WalletHeader.qml b/ui/app/AppLayouts/WalletV2/WalletHeader.qml
index b328633947..cc6d69da7d 100644
--- a/ui/app/AppLayouts/WalletV2/WalletHeader.qml
+++ b/ui/app/AppLayouts/WalletV2/WalletHeader.qml
@@ -166,4 +166,3 @@ Item {
Designer {
D{i:0;formeditorColor:"#ffffff"}
}
-##^##*/
diff --git a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
index 44b21c90a1..0a89f9899c 100644
--- a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
+++ b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
@@ -55,7 +55,7 @@ Item {
RowLayout {
id: walletInfoContainer
- anchors.bottom: parent.bottom
+ anchors.bottom: walletFooter.top
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
@@ -102,13 +102,11 @@ Item {
}
}
}
+
+ WalletFooter {
+ id: walletFooter
+ anchors.bottom: parent.bottom
+ }
}
}
}
-
-
-/*##^##
-Designer {
- D{i:0;autoSize:true;formeditorColor:"#ffffff";height:770;width:1152}
-}
-##^##*/
diff --git a/ui/app/AppLayouts/WalletV2/components/CryptoServicesModal.qml b/ui/app/AppLayouts/WalletV2/components/CryptoServicesModal.qml
new file mode 100644
index 0000000000..e449e9241b
--- /dev/null
+++ b/ui/app/AppLayouts/WalletV2/components/CryptoServicesModal.qml
@@ -0,0 +1,111 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import "../../../../imports"
+import "../../../../shared"
+
+import StatusQ.Components 0.1
+
+ModalPopup {
+ id: cryptoServicesPopupRoot
+ title: qsTr("Buy crypto")
+ height: 400
+
+ onOpened: {
+ loader.active = true
+ walletV2Model.cryptoServiceController.fetchCryptoServices()
+ }
+
+ Component.onCompleted: {
+ walletV2Model.cryptoServiceController.fetchCryptoServicesFetched.connect(function(){
+ loader.sourceComponent = servicesComponent
+ })
+ }
+
+ Loader {
+ id: loader
+ anchors.fill: parent
+ active: false
+ sourceComponent: loadingComponent
+
+ Component {
+ id: loadingComponent
+ StatusLoadingIndicator {
+ anchors.centerIn: parent
+ }
+ }
+
+ Component {
+ id: servicesComponent
+ Item {
+ StyledText {
+ id: note
+ anchors.top: parent.top
+ anchors.horizontalCenter: parent.horizontalCenter
+ color: Style.current.secondaryText
+ text: qsTr("Choose a service you'd like to use to buy crypto")
+ }
+
+ ListView {
+ anchors.top: note.bottom
+ anchors.bottom: parent.bottom
+ anchors.topMargin: Style.current.padding
+ width: parent.width
+ model: walletV2Model.cryptoServiceController.cryptoServiceModel
+ focus: true
+ spacing: Style.current.padding
+ clip: true
+
+ delegate: Item {
+ implicitHeight: row.height
+ width: parent.width
+
+ Row {
+ id: row
+ width: parent.width
+ spacing: Style.current.padding
+
+ StatusRoundedImage {
+ image.source: logoUrl
+ border.width: 1
+ border.color: Style.current.border
+ }
+
+ Column {
+ spacing: Style.current.halfPadding * 0.5
+
+ StyledText {
+ text: name
+ font.bold: true
+ font.pixelSize: Style.current.secondaryTextFontSize
+ }
+
+ StyledText {
+ text: description
+ font.pixelSize: Style.current.tertiaryTextFontSize
+ }
+
+ StyledText {
+ text: fees
+ color: Style.current.secondaryText
+ font.pixelSize: Style.current.asideTextFontSize
+ }
+ }
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ acceptedButtons: Qt.LeftButton
+ hoverEnabled: true
+ cursorShape: Qt.PointingHandCursor
+
+ onClicked: {
+ appMain.openLink(siteUrl)
+ cryptoServicesPopupRoot.close()
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/ui/app/AppLayouts/WalletV2/components/WalletButton.qml b/ui/app/AppLayouts/WalletV2/components/WalletButton.qml
new file mode 100644
index 0000000000..3f219ac6d7
--- /dev/null
+++ b/ui/app/AppLayouts/WalletV2/components/WalletButton.qml
@@ -0,0 +1,65 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../imports"
+import "../../../../shared"
+
+Rectangle {
+ id: walletBtnRoot
+ width: btnImage.width + btnImage.anchors.leftMargin + btnImage.anchors.rightMargin +
+ btnText.width + btnText.anchors.leftMargin + btnText.anchors.rightMargin
+ height: btnText.height + Style.current.smallPadding * 2
+ border.width: 0
+ color: Style.current.transparent
+ radius: Style.current.radius
+
+ property string text: ""
+ property url imageSource
+ property bool flipImage: false
+ property var onClicked: function () {}
+
+ SVGImage {
+ id: btnImage
+ height: 18
+ anchors.left: parent.left
+ anchors.leftMargin: Style.current.smallPadding
+ anchors.verticalCenter: parent.verticalCenter
+ fillMode: Image.PreserveAspectFit
+ source: imageSource
+ rotation: flipImage ? 180 : 0
+
+ ColorOverlay {
+ anchors.fill: parent
+ source: parent
+ color: Style.current.primary
+ }
+ }
+
+ StyledText {
+ id: btnText
+ visible: !!walletBtnRoot.text
+ text: walletBtnRoot.text
+ anchors.left: btnImage.right
+ anchors.leftMargin: Style.current.smallPadding
+ anchors.rightMargin: Style.current.smallPadding
+ anchors.verticalCenter: parent.verticalCenter
+ font.pixelSize: 13
+ font.family: Style.current.fontMedium.name
+ font.weight: Font.Medium
+ color: Style.current.blue
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ hoverEnabled: true
+ onEntered: {
+ parent.color = Style.current.secondaryBackground
+ }
+ onExited: {
+ parent.color = Style.current.transparent
+ }
+ onClicked: {
+ walletBtnRoot.onClicked()
+ }
+ cursorShape: Qt.PointingHandCursor
+ }
+}
diff --git a/ui/app/img/crypto-icon.svg b/ui/app/img/crypto-icon.svg
new file mode 100644
index 0000000000..4700d7aa8b
--- /dev/null
+++ b/ui/app/img/crypto-icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/ui/app/img/swap-icon.svg b/ui/app/img/swap-icon.svg
new file mode 100644
index 0000000000..53dc1f85c1
--- /dev/null
+++ b/ui/app/img/swap-icon.svg
@@ -0,0 +1,4 @@
+