feat: add wallet header
This commit is contained in:
Jonathan Rainville
Iuri Matias
parent
398e3387cf
commit
056e640a29
|
|
@ -0,0 +1,76 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Layouts 1.3
|
||||
import Qt.labs.platform 1.1
|
||||
import "../../../imports"
|
||||
import "../../../shared"
|
||||
|
||||
Item {
|
||||
TextField {
|
||||
id: txtValue
|
||||
x: 19
|
||||
y: 41
|
||||
placeholderText: qsTr("Enter ETH")
|
||||
anchors.leftMargin: 24
|
||||
anchors.topMargin: 32
|
||||
width: 239
|
||||
height: 40
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtFrom
|
||||
x: 340
|
||||
y: 41
|
||||
width: 239
|
||||
height: 40
|
||||
text: assetsModel.getDefaultAccount()
|
||||
placeholderText: qsTr("Send from (account)")
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtTo
|
||||
x: 340
|
||||
y: 99
|
||||
width: 239
|
||||
height: 40
|
||||
text: assetsModel.getDefaultAccount()
|
||||
placeholderText: qsTr("Send to")
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtPassword
|
||||
x: 19
|
||||
y: 99
|
||||
width: 239
|
||||
height: 40
|
||||
text: "qwerty"
|
||||
placeholderText: "Enter Password"
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
}
|
||||
|
||||
Button {
|
||||
x: 19
|
||||
y: 159
|
||||
text: "Send"
|
||||
onClicked: {
|
||||
let result = assetsModel.onSendTransaction(
|
||||
txtFrom.text,
|
||||
txtTo.text,
|
||||
txtValue.text,
|
||||
txtPassword.text
|
||||
);
|
||||
console.log(result);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
|
@ -30,160 +30,220 @@ SplitView {
|
|||
anchors.leftMargin: 0
|
||||
|
||||
Item {
|
||||
id: walletInfoContainer
|
||||
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
|
||||
|
||||
TextField {
|
||||
id: txtValue
|
||||
x: 19
|
||||
y: 41
|
||||
placeholderText: qsTr("Enter ETH")
|
||||
Text {
|
||||
id: title
|
||||
// TODO this should be the name of the wallet
|
||||
text: qsTr("Status account")
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 56
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 24
|
||||
anchors.topMargin: 32
|
||||
width: 239
|
||||
height: 40
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 28
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtFrom
|
||||
x: 340
|
||||
y: 41
|
||||
width: 239
|
||||
height: 40
|
||||
text: assetsModel.getDefaultAccount()
|
||||
placeholderText: qsTr("Send from (account)")
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
Rectangle {
|
||||
id: separatorDot
|
||||
width: 8
|
||||
height: 8
|
||||
color: Theme.blue
|
||||
anchors.top: title.verticalCenter
|
||||
anchors.topMargin: -3
|
||||
anchors.left: title.right
|
||||
anchors.leftMargin: 8
|
||||
radius: 50
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtTo
|
||||
x: 340
|
||||
y: 99
|
||||
width: 239
|
||||
height: 40
|
||||
text: assetsModel.getDefaultAccount()
|
||||
placeholderText: qsTr("Send to")
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
Text {
|
||||
id: walletBalance
|
||||
// TODO this should be the balance
|
||||
text: qsTr("12.00 USD")
|
||||
anchors.left: separatorDot.right
|
||||
anchors.leftMargin: 8
|
||||
anchors.verticalCenter: title.verticalCenter
|
||||
font.pixelSize: 22
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: txtPassword
|
||||
x: 19
|
||||
y: 99
|
||||
width: 239
|
||||
height: 40
|
||||
text: "qwerty"
|
||||
placeholderText: "Enter Password"
|
||||
anchors.topMargin: 32
|
||||
anchors.leftMargin: 24
|
||||
Text {
|
||||
id: walletAddress
|
||||
// TODO this should be the address and an actual Address component that can shrink and expend
|
||||
text: qsTr("0X2Ef1...E0Ba")
|
||||
anchors.top: title.bottom
|
||||
anchors.topMargin: 0
|
||||
anchors.left: title.left
|
||||
anchors.leftMargin: 0
|
||||
font.pixelSize: 13
|
||||
color: Theme.darkGrey
|
||||
}
|
||||
|
||||
Button {
|
||||
x: 19
|
||||
y: 159
|
||||
text: "Send"
|
||||
onClicked: {
|
||||
let result = assetsModel.onSendTransaction(
|
||||
txtFrom.text,
|
||||
txtTo.text,
|
||||
txtValue.text,
|
||||
txtPassword.text
|
||||
);
|
||||
console.log(result);
|
||||
}
|
||||
}
|
||||
Item {
|
||||
property int btnMargin: 8
|
||||
property int btnOuterMargin: 32
|
||||
id: walletMenu
|
||||
// TODO unhardcode this
|
||||
width: sendBtn.width + receiveBtn.width + settingsBtn.width
|
||||
+ walletMenu.btnOuterMargin * 2
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 16
|
||||
|
||||
RowLayout {
|
||||
id: assetInfoContainer
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Item {
|
||||
id: sendBtn
|
||||
width: sendImg.width + sendText.width + walletMenu.btnMargin
|
||||
|
||||
Rectangle {
|
||||
id: walletSendBg
|
||||
color: "#ffffff"
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Image {
|
||||
id: sendImg
|
||||
width: 12
|
||||
height: 12
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: "../../img/diagonalArrow.svg"
|
||||
}
|
||||
|
||||
Text {
|
||||
id: assetsTitle
|
||||
color: Theme.darkGrey
|
||||
text: qsTr("Assets")
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.padding
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.smallPadding
|
||||
font.pixelSize: 14
|
||||
id: sendText
|
||||
text: "Send"
|
||||
anchors.left: sendImg.right
|
||||
anchors.leftMargin: walletMenu.btnMargin
|
||||
font.pixelSize: 13
|
||||
color: Theme.blue
|
||||
}
|
||||
}
|
||||
Item {
|
||||
id: receiveBtn
|
||||
width: receiveImg.width + receiveText.width + walletMenu.btnMargin
|
||||
anchors.left: sendBtn.right
|
||||
anchors.leftMargin: walletMenu.btnOuterMargin
|
||||
|
||||
Image {
|
||||
id: receiveImg
|
||||
width: 12
|
||||
height: 12
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: "../../img/diagonalArrow.svg"
|
||||
}
|
||||
|
||||
Component {
|
||||
id: assetViewDelegate
|
||||
|
||||
Item {
|
||||
id: element6
|
||||
height: 56
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
|
||||
Image {
|
||||
id: assetInfoContainer
|
||||
width: 36
|
||||
height: 36
|
||||
source: image
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: assetValue
|
||||
text: value
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 14
|
||||
font.strikeout: false
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 72
|
||||
}
|
||||
Text {
|
||||
id: assetSymbol
|
||||
text: symbol
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.darkGrey
|
||||
font.pixelSize: 14
|
||||
anchors.right: assetFiatValue.left
|
||||
anchors.rightMargin: 10
|
||||
}
|
||||
Text {
|
||||
id: assetFiatValue
|
||||
color: Theme.darkGrey
|
||||
text: fiatValue
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 14
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.padding
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
anchors.topMargin: 36
|
||||
anchors.fill: parent
|
||||
model: assetsModel.assets
|
||||
delegate: assetViewDelegate
|
||||
Text {
|
||||
id: receiveText
|
||||
text: "Receive"
|
||||
anchors.left: receiveImg.right
|
||||
anchors.leftMargin: walletMenu.btnMargin
|
||||
font.pixelSize: 13
|
||||
color: Theme.blue
|
||||
}
|
||||
}
|
||||
Image {
|
||||
id: settingsBtn
|
||||
anchors.left: receiveBtn.right
|
||||
anchors.leftMargin: walletMenu.btnOuterMargin
|
||||
width: 18
|
||||
height: 18
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: "../../img/settings.svg"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: assetInfoContainer
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.top: walletHeader.bottom
|
||||
anchors.topMargin: 23
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
id: assetsTitle
|
||||
color: Theme.darkGrey
|
||||
text: qsTr("Assets")
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 24
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.smallPadding
|
||||
font.pixelSize: 14
|
||||
}
|
||||
|
||||
Component {
|
||||
id: assetViewDelegate
|
||||
|
||||
Item {
|
||||
id: element6
|
||||
height: 56
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
|
||||
Image {
|
||||
id: assetInfoContainer
|
||||
width: 36
|
||||
height: 36
|
||||
source: image
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: assetValue
|
||||
text: value
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 14
|
||||
font.strikeout: false
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 72
|
||||
}
|
||||
Text {
|
||||
id: assetSymbol
|
||||
text: symbol
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.darkGrey
|
||||
font.pixelSize: 14
|
||||
anchors.right: assetFiatValue.left
|
||||
anchors.rightMargin: 10
|
||||
}
|
||||
Text {
|
||||
id: assetFiatValue
|
||||
color: Theme.darkGrey
|
||||
text: fiatValue
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 14
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.padding
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
anchors.topMargin: 36
|
||||
anchors.fill: parent
|
||||
model: assetsModel.assets
|
||||
delegate: assetViewDelegate
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;formeditorZoom:0.75;height:770;width:1152}
|
||||
D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:770;width:1152}
|
||||
D{i:16;anchors_x:0;anchors_y:0}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 0C4.44775 -4.82789e-08 4 0.447754 4 1C4 1.55225 4.44775 2 5 2L8.58594 2L0.292969 10.2928C-0.0976562 10.6835 -0.0976563 11.3165 0.292969 11.7072C0.683349 12.0977 1.31665 12.0977 1.70703 11.7072L10 3.41419L10 7C10 7.55225 10.4478 8 11 8C11.5522 8 12 7.55225 12 7L12 1C12 0.447755 11.5522 5.72816e-07 11 5.24537e-07L5 0Z" fill="white"/>
|
||||
<path d="M5 0C4.44775 -4.82789e-08 4 0.447754 4 1C4 1.55225 4.44775 2 5 2L8.58594 2L0.292969 10.2928C-0.0976562 10.6835 -0.0976563 11.3165 0.292969 11.7072C0.683349 12.0977 1.31665 12.0977 1.70703 11.7072L10 3.41419L10 7C10 7.55225 10.4478 8 11 8C11.5522 8 12 7.55225 12 7L12 1C12 0.447755 11.5522 5.72816e-07 11 5.24537e-07L5 0Z" fill="#4360DF"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 449 B After Width: | Height: | Size: 451 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 12C7.55225 12 8 11.5523 8 11C8 10.4478 7.55225 10 7 10H3.41406L11.707 1.70718C12.0977 1.31656 12.0977 0.683502 11.707 0.292877C11.3167 -0.0976257 10.6833 -0.0976257 10.293 0.292877L2 8.58585V5.00003C2 4.44778 1.55225 4.00003 1 4.00003C0.447754 4.00003 0 4.44778 0 5.00003V11C0 11.5523 0.447754 12 1 12H7Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 436 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2857 3.66659L9.78404 5.17159C9.70572 5.4653 9.48658 5.70166 9.19845 5.80149C8.99284 5.87274 8.79271 5.95588 8.59889 6.0501C8.32429 6.1836 8.00174 6.17142 7.73843 6.01877L6.31965 5.30938L5.30947 6.31956L6.01886 7.73834C6.17151 8.00166 6.18369 8.3242 6.05019 8.5988C5.95597 8.79262 5.87283 8.99275 5.80158 9.19836C5.70175 9.4865 5.46538 9.70564 5.17167 9.78395L3.66668 10.2856V11.7142L5.17166 12.2159C5.46538 12.2942 5.70175 12.5133 5.80158 12.8015C5.87283 13.0071 5.95597 13.2072 6.05019 13.401C6.18369 13.6756 6.17151 13.9982 6.01886 14.2615L5.30947 15.6803L6.31965 16.6905L7.73843 15.9811C8.00175 15.8284 8.32429 15.8162 8.59889 15.9497C8.79271 16.044 8.99284 16.1271 9.19845 16.1983C9.48659 16.2982 9.70573 16.5345 9.78404 16.8283L10.2857 18.3333H11.7143L12.216 16.8283C12.2943 16.5345 12.5134 16.2982 12.8016 16.1983C13.0072 16.1271 13.2073 16.044 13.4011 15.9497C13.6757 15.8162 13.9983 15.8284 14.2616 15.9811L15.6804 16.6905L16.6905 15.6803L15.9811 14.2615C15.8285 13.9982 15.8163 13.6756 15.9498 13.401C16.0441 13.2072 16.1272 13.0071 16.1984 12.8015C16.2983 12.5133 16.5346 12.2942 16.8284 12.2159L18.3333 11.7142V10.2856L16.8284 9.78395C16.5346 9.70564 16.2983 9.4865 16.1984 9.19836C16.1272 8.99275 16.0441 8.79262 15.9498 8.5988C15.8163 8.3242 15.8285 8.00166 15.9812 7.73834L16.6905 6.31956L15.6804 5.30938L14.2616 6.01877C13.9983 6.17142 13.6757 6.1836 13.4011 6.0501C13.2073 5.95588 13.0072 5.87274 12.8016 5.80149C12.5134 5.70166 12.2943 5.46531 12.216 5.1716L11.7143 3.66659H10.2857ZM11.6098 18.6466C11.6098 18.6469 11.6099 18.6464 11.6098 18.6466V18.6466ZM8.65092 2.77344C8.83808 2.21197 9.36352 1.83325 9.95536 1.83325H12.0447C12.6365 1.83325 13.1619 2.21197 13.3491 2.77344L13.8211 4.18931L15.156 3.52186C15.6853 3.25718 16.3246 3.36093 16.7431 3.77943L18.2205 5.25679C18.639 5.67528 18.7427 6.31462 18.4781 6.84398L17.8106 8.17887L19.2265 8.65083C19.788 8.83798 20.1667 9.36343 20.1667 9.95527V12.0446C20.1667 12.6364 19.788 13.1619 19.2265 13.349L17.8106 13.821L18.4781 15.1559C18.7427 15.6852 18.639 16.3246 18.2205 16.7431L16.7431 18.2204C16.3246 18.6389 15.6853 18.7427 15.156 18.478L13.8211 17.8105L13.3491 19.2264C13.1619 19.7879 12.6365 20.1666 12.0447 20.1666H9.95536C9.36352 20.1666 8.83808 19.7879 8.65092 19.2264L8.17896 17.8105L6.84407 18.478C6.31471 18.7427 5.67537 18.6389 5.25688 18.2204L3.77952 16.743C3.36102 16.3246 3.25727 15.6852 3.52195 15.1559L4.1894 13.821L2.77353 13.349C2.21206 13.1619 1.83334 12.6364 1.83334 12.0446V9.95527C1.83334 9.36342 2.21206 8.83798 2.77353 8.65083L4.1894 8.17887L3.52195 6.84398C3.25727 6.31462 3.36102 5.67528 3.77952 5.25679L5.25688 3.77943C5.67537 3.36093 6.31471 3.25718 6.84407 3.52186L8.17896 4.18931L8.65092 2.77344Z" fill="#4360DF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 9.16659C9.98749 9.16659 9.16668 9.9874 9.16668 10.9999C9.16668 12.0124 9.98749 12.8333 11 12.8333C12.0125 12.8333 12.8333 12.0124 12.8333 10.9999C12.8333 9.9874 12.0125 9.16659 11 9.16659ZM7.33334 10.9999C7.33334 8.97487 8.97497 7.33325 11 7.33325C13.0251 7.33325 14.6667 8.97487 14.6667 10.9999C14.6667 13.025 13.0251 14.6666 11 14.6666C8.97497 14.6666 7.33334 13.025 7.33334 10.9999Z" fill="#4360DF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -61,6 +61,7 @@ DISTFILES += \
|
|||
app/AppLayouts/Profile/LeftTab/qmldir \
|
||||
app/AppLayouts/Profile/ProfileLayout.qml \
|
||||
app/AppLayouts/Wallet/LeftTab.qml \
|
||||
app/AppLayouts/Wallet/SendModal.qml \
|
||||
app/AppLayouts/Wallet/WalletLayout.qml \
|
||||
app/AppLayouts/Wallet/qmldir \
|
||||
app/AppLayouts/WalletLayout.qml \
|
||||
|
|
|
|||
Loading…
Reference in New Issue