2020-08-03 20:46:37 +00:00
|
|
|
|
import QtQuick 2.14
|
|
|
|
|
import QtQuick.Layouts 1.3
|
|
|
|
|
import QtQuick.Controls 2.14
|
|
|
|
|
import "../../../../../imports"
|
|
|
|
|
import "../../../../../shared"
|
|
|
|
|
|
|
|
|
|
Item {
|
|
|
|
|
id: searchENS
|
2020-08-04 22:22:51 +00:00
|
|
|
|
|
2020-08-07 16:27:41 +00:00
|
|
|
|
signal continueClicked(string output, string username)
|
2020-08-04 22:22:51 +00:00
|
|
|
|
|
2020-08-03 20:46:37 +00:00
|
|
|
|
property string validationMessage: ""
|
|
|
|
|
property bool valid: false
|
|
|
|
|
property bool isStatus: true
|
2020-08-05 19:50:55 +00:00
|
|
|
|
property bool loading: false
|
2020-08-04 22:22:51 +00:00
|
|
|
|
property string ensStatus: ""
|
2020-08-03 20:46:37 +00:00
|
|
|
|
|
|
|
|
|
property var validateENS: Backpressure.debounce(searchENS, 500, function (ensName, isStatus){
|
|
|
|
|
profileModel.ens.validate(ensName, isStatus)
|
|
|
|
|
});
|
|
|
|
|
|
2020-08-05 19:50:55 +00:00
|
|
|
|
function validate(ensUsername) {
|
2020-08-03 20:46:37 +00:00
|
|
|
|
validationMessage = "";
|
|
|
|
|
valid = false;
|
2020-08-04 22:22:51 +00:00
|
|
|
|
ensStatus = "";
|
2020-08-05 19:50:55 +00:00
|
|
|
|
if (ensUsername.length < 4) {
|
2020-08-03 20:46:37 +00:00
|
|
|
|
validationMessage = qsTr("At least 4 characters. Latin letters, numbers, and lowercase only.");
|
2020-08-05 19:50:55 +00:00
|
|
|
|
} else if(isStatus && !ensUsername.match(/^[a-z0-9]+$/)){
|
2020-08-03 20:46:37 +00:00
|
|
|
|
validationMessage = qsTr("Letters and numbers only.");
|
2020-08-05 19:50:55 +00:00
|
|
|
|
} else if(!isStatus && !ensUsername.endsWith(".eth")){
|
2020-08-03 20:46:37 +00:00
|
|
|
|
validationMessage = qsTr("Type the entire username including the custom domain like username.domain.eth")
|
|
|
|
|
}
|
|
|
|
|
return validationMessage === "";
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-05 19:50:55 +00:00
|
|
|
|
function onKeyReleased(ensUsername){
|
|
|
|
|
if (!validate(ensUsername)) {
|
2020-08-03 20:46:37 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-08-05 19:50:55 +00:00
|
|
|
|
loading = true;
|
|
|
|
|
Qt.callLater(validateENS, ensUsername, isStatus)
|
2020-08-03 20:46:37 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StyledText {
|
|
|
|
|
id: sectionTitle
|
|
|
|
|
text: qsTr("Your username")
|
|
|
|
|
anchors.left: parent.left
|
|
|
|
|
anchors.leftMargin: 24
|
|
|
|
|
anchors.top: parent.top
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
font.weight: Font.Bold
|
|
|
|
|
font.pixelSize: 20
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
|
id: circleAt
|
|
|
|
|
anchors.top: sectionTitle.bottom
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
width: 60
|
|
|
|
|
height: 60
|
|
|
|
|
radius: 120
|
|
|
|
|
color: Style.current.blue
|
|
|
|
|
|
2020-08-05 19:50:55 +00:00
|
|
|
|
SVGImage {
|
|
|
|
|
id: imgIcon
|
|
|
|
|
visible: ensStatus === "taken"
|
|
|
|
|
fillMode: Image.PreserveAspectFit
|
|
|
|
|
source: "../../../../img/block-icon-white.svg"
|
|
|
|
|
width: 20
|
|
|
|
|
height: 20
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-03 20:46:37 +00:00
|
|
|
|
StyledText {
|
2020-08-05 19:50:55 +00:00
|
|
|
|
visible: ensStatus !== "taken"
|
|
|
|
|
text: {
|
|
|
|
|
if((ensStatus === "available" || ensStatus === "connected" || ensStatus === "connected-different-key")){
|
|
|
|
|
return "✓"
|
|
|
|
|
} else {
|
|
|
|
|
return "@"
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-08-03 20:46:37 +00:00
|
|
|
|
opacity: 0.7
|
|
|
|
|
font.weight: Font.Bold
|
|
|
|
|
font.pixelSize: 18
|
|
|
|
|
color: Style.current.white
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Input {
|
|
|
|
|
id: ensUsername
|
|
|
|
|
placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94"
|
|
|
|
|
anchors.top: circleAt.bottom
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
anchors.right: btnContinue.left
|
|
|
|
|
anchors.rightMargin: 24
|
|
|
|
|
Keys.onReleased: {
|
2020-08-05 19:50:55 +00:00
|
|
|
|
onKeyReleased(ensUsername.text);
|
2020-08-03 20:46:37 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Connections {
|
|
|
|
|
target: profileModel.ens
|
|
|
|
|
onEnsWasResolved: {
|
2020-08-05 19:50:55 +00:00
|
|
|
|
if(!validate(ensUsername.text)) return;
|
2020-08-04 22:22:51 +00:00
|
|
|
|
valid = false;
|
2020-08-05 19:50:55 +00:00
|
|
|
|
loading = false;
|
2020-08-04 22:22:51 +00:00
|
|
|
|
ensStatus = ensResult;
|
2020-08-03 20:46:37 +00:00
|
|
|
|
switch(ensResult){
|
|
|
|
|
case "available":
|
|
|
|
|
valid = true;
|
|
|
|
|
validationMessage = qsTr("✓ Username available!");
|
|
|
|
|
break;
|
|
|
|
|
case "owned":
|
2020-08-04 22:22:51 +00:00
|
|
|
|
console.log("TODO: - Continuing will connect this username with your chat key.");
|
2020-08-03 20:46:37 +00:00
|
|
|
|
case "taken":
|
|
|
|
|
validationMessage = !isStatus ?
|
|
|
|
|
qsTr("Username doesn’t belong to you :(")
|
|
|
|
|
:
|
|
|
|
|
qsTr("Username already taken :(");
|
|
|
|
|
break;
|
2020-08-04 22:22:51 +00:00
|
|
|
|
case "already-connected":
|
|
|
|
|
validationMessage = qsTr("Username is already connected with your chat key and can be used inside Status.");
|
|
|
|
|
break;
|
2020-08-03 20:46:37 +00:00
|
|
|
|
case "connected":
|
2020-08-04 22:22:51 +00:00
|
|
|
|
valid = true;
|
|
|
|
|
validationMessage = qsTr("This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`.");
|
2020-08-03 20:46:37 +00:00
|
|
|
|
break;
|
|
|
|
|
case "connected-different-key":
|
2020-08-04 22:22:51 +00:00
|
|
|
|
valid = true;
|
|
|
|
|
validationMessage = qsTr("Continuing will require a transaction to connect the username with your current chat key.");
|
|
|
|
|
break;
|
2020-08-03 20:46:37 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Button {
|
|
|
|
|
id: btnContinue
|
|
|
|
|
width: 44
|
|
|
|
|
height: 44
|
|
|
|
|
anchors.top: circleAt.bottom
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
anchors.right: parent.right
|
|
|
|
|
SVGImage {
|
|
|
|
|
source: !valid ? "../../../../img/arrow-button-inactive.svg" : "../../../../img/arrow-btn-active.svg"
|
|
|
|
|
width: 50
|
|
|
|
|
height: 50
|
|
|
|
|
}
|
|
|
|
|
background: Rectangle {
|
|
|
|
|
color: "transparent"
|
|
|
|
|
}
|
|
|
|
|
MouseArea {
|
|
|
|
|
id: btnMAnewChat
|
|
|
|
|
cursorShape: Qt.PointingHandCursor
|
|
|
|
|
anchors.fill: parent
|
|
|
|
|
onClicked : {
|
|
|
|
|
if(!valid) return;
|
2020-08-04 22:22:51 +00:00
|
|
|
|
|
|
|
|
|
if(ensStatus === "connected"){
|
2020-08-05 19:50:55 +00:00
|
|
|
|
profileModel.ens.connect(ensUsername.text, isStatus);
|
2020-08-07 16:27:41 +00:00
|
|
|
|
continueClicked(ensStatus, ensUsername.text)
|
2020-08-04 22:22:51 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(ensStatus === "available"){
|
2020-08-07 16:27:41 +00:00
|
|
|
|
continueClicked(ensStatus, ensUsername.text);
|
2020-08-04 22:22:51 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-08-03 20:46:37 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
|
id: ensTypeRect
|
|
|
|
|
anchors.top: ensUsername.bottom
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
border.width: 1
|
|
|
|
|
border.color: Style.current.border
|
|
|
|
|
radius: 50
|
|
|
|
|
height: 20
|
|
|
|
|
width: 350
|
|
|
|
|
|
|
|
|
|
StyledText {
|
|
|
|
|
text: !isStatus ?
|
|
|
|
|
qsTr("Custom domain")
|
|
|
|
|
:
|
|
|
|
|
".stateofus.eth"
|
|
|
|
|
font.weight: Font.Bold
|
|
|
|
|
font.pixelSize: 12
|
|
|
|
|
anchors.leftMargin: Style.current.padding
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StyledText {
|
|
|
|
|
text: !isStatus ?
|
|
|
|
|
qsTr("I want a stateofus.eth domain")
|
|
|
|
|
:
|
|
|
|
|
qsTr("I own a name on another domain")
|
|
|
|
|
font.pixelSize: 12
|
|
|
|
|
color: Style.current.blue
|
|
|
|
|
anchors.right: parent.right
|
|
|
|
|
anchors.rightMargin: Style.current.padding
|
|
|
|
|
|
|
|
|
|
MouseArea {
|
|
|
|
|
cursorShape: Qt.PointingHandCursor
|
|
|
|
|
anchors.fill: parent
|
|
|
|
|
onClicked : {
|
|
|
|
|
isStatus = !isStatus;
|
2020-08-05 19:50:55 +00:00
|
|
|
|
let ensUser = ensUsername.text;
|
|
|
|
|
if(validate(ensUser))
|
|
|
|
|
validateENS(ensUser, isStatus)
|
2020-08-03 20:46:37 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StyledText {
|
|
|
|
|
id: validationResult
|
|
|
|
|
text: validationMessage
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
anchors.top: ensTypeRect.bottom
|
|
|
|
|
anchors.topMargin: 24
|
|
|
|
|
}
|
|
|
|
|
}
|