277 lines
9.1 KiB
QML
277 lines
9.1 KiB
QML
import QtQuick 2.14
|
||
import QtQuick.Layouts 1.3
|
||
import QtQuick.Controls 2.14
|
||
import "../../../../../imports"
|
||
import "../../../../../shared"
|
||
|
||
Item {
|
||
id: searchENS
|
||
|
||
signal continueClicked(string output, string username)
|
||
signal usernameUpdated(username: string);
|
||
|
||
|
||
property string validationMessage: ""
|
||
property bool valid: false
|
||
property bool isStatus: true
|
||
property bool loading: false
|
||
property string ensStatus: ""
|
||
|
||
property var validateENS: Backpressure.debounce(searchENS, 500, function (ensName, isStatus){
|
||
profileModel.ens.validate(ensName, isStatus)
|
||
});
|
||
|
||
function validate(ensUsername) {
|
||
validationMessage = "";
|
||
valid = false;
|
||
ensStatus = "";
|
||
if (ensUsername.length < 4) {
|
||
//% "At least 4 characters. Latin letters, numbers, and lowercase only."
|
||
validationMessage = qsTrId("ens-username-hints");
|
||
} else if(isStatus && !ensUsername.match(/^[a-z0-9]+$/)){
|
||
//% "Letters and numbers only."
|
||
validationMessage = qsTrId("ens-username-invalid");
|
||
} else if(!isStatus && !ensUsername.endsWith(".eth")){
|
||
//% "Type the entire username including the custom domain like username.domain.eth"
|
||
validationMessage = qsTrId("ens-custom-username-hints")
|
||
}
|
||
return validationMessage === "";
|
||
}
|
||
|
||
function onKeyReleased(ensUsername){
|
||
if (!validate(ensUsername)) {
|
||
return;
|
||
}
|
||
loading = true;
|
||
Qt.callLater(validateENS, ensUsername, isStatus)
|
||
}
|
||
|
||
ModalPopup {
|
||
id: transactionDialog
|
||
title: qsTr("TODO: replace this for the transaction dialog")
|
||
|
||
Input {
|
||
id: passwd
|
||
placeholderText: "Password"
|
||
anchors.top: parent.textToCopy
|
||
anchors.topMargin: 24
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 24
|
||
}
|
||
|
||
StyledButton {
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: Style.current.padding
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: Style.current.padding
|
||
label: qsTr("Ok")
|
||
onClicked: {
|
||
profileModel.ens.setPubKey(ensUsername.text, passwd.text)
|
||
passwd.text = "";
|
||
usernameUpdated(ensUsername.text);
|
||
transactionDialog.close();
|
||
}
|
||
}
|
||
}
|
||
|
||
StyledText {
|
||
id: sectionTitle
|
||
//% "Your username"
|
||
text: qsTrId("ens-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
|
||
|
||
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
|
||
}
|
||
|
||
StyledText {
|
||
visible: ensStatus !== "taken"
|
||
text: {
|
||
if((ensStatus === "available" || ensStatus === "connected" || ensStatus === "connected-different-key")){
|
||
return "✓"
|
||
} else {
|
||
return "@"
|
||
}
|
||
}
|
||
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: {
|
||
onKeyReleased(ensUsername.text);
|
||
}
|
||
|
||
Connections {
|
||
target: profileModel.ens
|
||
onEnsWasResolved: {
|
||
if(!validate(ensUsername.text)) return;
|
||
valid = false;
|
||
loading = false;
|
||
ensStatus = ensResult;
|
||
switch(ensResult){
|
||
case "available":
|
||
valid = true;
|
||
//% "✓ Username available!"
|
||
validationMessage = qsTrId("ens-username-available");
|
||
break;
|
||
case "owned":
|
||
valid = true;
|
||
validationMessage = qsTr("Continuing will connect this username with your chat key.");
|
||
break;
|
||
case "taken":
|
||
validationMessage = !isStatus ?
|
||
//% "Username doesn’t belong to you :("
|
||
qsTrId("ens-custom-username-taken")
|
||
:
|
||
//% "Username already taken :("
|
||
qsTrId("ens-username-taken");
|
||
break;
|
||
case "already-connected":
|
||
//% "Username is already connected with your chat key and can be used inside Status."
|
||
validationMessage = qsTrId("ens-username-already-added");
|
||
break;
|
||
case "connected":
|
||
valid = true;
|
||
//% "This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`."
|
||
validationMessage = qsTrId("this-user-name-is-owned-by-you-and-connected-with-your-chat-key--continue-to-set--show-my-ens-username-in-chats--");
|
||
break;
|
||
case "connected-different-key":
|
||
valid = true;
|
||
//% "Continuing will require a transaction to connect the username with your current chat key."
|
||
validationMessage = qsTrId("ens-username-connected-with-different-key");
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
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 {
|
||
cursorShape: Qt.PointingHandCursor
|
||
anchors.fill: parent
|
||
onClicked : {
|
||
if(!valid) return;
|
||
|
||
if(ensStatus === "connected"){
|
||
profileModel.ens.connectOwnedUsername(ensUsername.text, isStatus);
|
||
continueClicked(ensStatus, ensUsername.text)
|
||
return;
|
||
}
|
||
|
||
if(ensStatus === "available"){
|
||
continueClicked(ensStatus, ensUsername.text);
|
||
return;
|
||
}
|
||
|
||
if(ensStatus === "connected-different-key" || ensStatus === "owned"){
|
||
transactionDialog.open();
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
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 ?
|
||
//% "Custom domain"
|
||
qsTrId("ens-custom-domain")
|
||
:
|
||
".stateofus.eth"
|
||
font.weight: Font.Bold
|
||
font.pixelSize: 12
|
||
anchors.leftMargin: Style.current.padding
|
||
}
|
||
|
||
StyledText {
|
||
text: !isStatus ?
|
||
//% "I want a stateofus.eth domain"
|
||
qsTrId("ens-want-domain")
|
||
:
|
||
//% "I own a name on another domain"
|
||
qsTrId("ens-want-custom-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;
|
||
let ensUser = ensUsername.text;
|
||
if(validate(ensUser))
|
||
validateENS(ensUser, isStatus)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
StyledText {
|
||
id: validationResult
|
||
text: validationMessage
|
||
anchors.horizontalCenter: parent.horizontalCenter
|
||
anchors.top: ensTypeRect.bottom
|
||
anchors.topMargin: 24
|
||
}
|
||
} |