status-desktop/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml

292 lines
10 KiB
QML

import QtQuick 2.14
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import utils 1.0
Item {
id: root
signal startBtnClicked()
property string username: ""
property int profileContentWidth
StatusScrollView {
id: sview
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
anchors.top: parent.top
anchors.bottom: startBtn.top
anchors.bottomMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
contentWidth: contentItem.width
Item {
id: contentItem
width: profileContentWidth
Image {
id: image
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: Style.png("ens-header-" + Style.current.name + "@2x")
}
StatusBaseText {
id: title
text: qsTr("Get a universal username")
anchors.top: image.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 24
anchors.left: parent.left
anchors.right: parent.right
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: Theme.palette.directColor1
}
StatusBaseText {
id: subtitle
text: qsTr("ENS names transform those crazy-long addresses into unique usernames.")
anchors.top: title.bottom
anchors.topMargin: 24
font.pixelSize: 14
anchors.left: parent.left
anchors.right: parent.right
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: Theme.palette.directColor1
}
StatusBaseText {
id: element1Number
text: "1"
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: subtitle.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element1Title
text: qsTr("Customize your chat name")
anchors.left: element1Number.right
anchors.leftMargin: 24
anchors.top: subtitle.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element1Subtitle
text: qsTr("An ENS name can replace your random 3-word name in chat. Be @yourname instead of %1.").arg(root.username)
anchors.left: element1Number.right
anchors.leftMargin: 24
anchors.top: element1Title.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element2Number
text: "2"
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: element1Subtitle.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element2Title
text: qsTr("Simplify your ETH address")
anchors.left: element2Number.right
anchors.leftMargin: 24
anchors.top: element1Subtitle.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element2Subtitle
text: qsTr("You can receive funds to your easy-to-share ENS name rather than your hexadecimal hash (0x...).")
anchors.left: element2Number.right
anchors.leftMargin: 24
anchors.top: element2Title.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element3Number
text: "3"
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: element2Subtitle.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element3Title
text: qsTr("Receive transactions in chat")
anchors.left: element3Number.right
anchors.leftMargin: 24
anchors.top: element2Subtitle.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element3Subtitle
text: qsTr("Others can send you funds via chat in one simple step.")
anchors.left: element3Number.right
anchors.leftMargin: 24
anchors.top: element3Title.bottom
anchors.right: parent.right
wrapMode: Text.WordWrap
anchors.topMargin: 24
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element4Number
text: "4"
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: element3Subtitle.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element4Title
text: qsTr("10 SNT to register")
anchors.left: element4Number.right
anchors.leftMargin: 24
anchors.top: element3Subtitle.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element4Subtitle
text: qsTr("Register once to keep the name forever. After 1 year you can release the name and get your SNT back.")
anchors.left: element4Number.right
anchors.leftMargin: 24
anchors.top: element4Title.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element5Number
text: "@"
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: element4Subtitle.bottom
anchors.topMargin: 24
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element5Title
text: qsTr("Already own a username?")
anchors.left: element5Number.right
anchors.leftMargin: 24
anchors.top: element4Subtitle.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.weight: Font.Bold
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: element5Subtitle
text: qsTr("You can verify and add any usernames you own in the next steps.")
anchors.left: element5Number.right
anchors.leftMargin: 24
anchors.top: element5Title.bottom
anchors.topMargin: 24
anchors.right: parent.right
wrapMode: Text.WordWrap
font.pixelSize: 14
color: Theme.palette.directColor1
}
StatusBaseText {
id: poweredBy
text: qsTr("Powered by Ethereum Name Services")
anchors.left: element5Number.right
anchors.leftMargin: 24
anchors.top: element5Subtitle.bottom
anchors.topMargin: 40
anchors.right: parent.right
wrapMode: Text.WordWrap
font.pixelSize: 11
color: Theme.palette.directColor1
}
}
}
StatusButton {
id: startBtn
objectName: "ensStartButton"
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
text: enabled ?
qsTr("Start") :
qsTr("Only available on Mainnet")
onClicked: startBtnClicked()
}
}