MOREEEE PROGRESS

interface/resources/qml/hifi/commerce/wallet/AccountHome.qml

@@ -0,0 +1,105 @@
+//
+//  AccountHome.qml
+//  qml/hifi/commerce/wallet
+//
+//  AccountHome
+//
+//  Created by Zach Fox on 2017-08-18
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControlsUit
+import "../../../controls" as HifiControls
+
+// references XXX from root context
+
+Item {
+    HifiConstants { id: hifi; }
+
+    id: root;
+
+    Hifi.QmlCommerce {
+        id: commerce;
+    }
+    
+    Connections {
+        target: GlobalServices
+        onMyUsernameChanged: {
+            usernameText.text = Account.username;
+        }
+    }
+    
+    // Security Image
+    Image {
+        id: passphrasePageSecurityImage;
+        // Anchors
+        anchors.top: parent.top;
+        anchors.left: parent.left;
+        height: 75;
+        width: height;
+        fillMode: Image.PreserveAspectFit;
+        mipmap: true;
+    }
+
+    // Username Text
+    RalewayRegular {
+        id: usernameText;
+        text: Account.username;
+        // Text size
+        size: 24;
+        // Style
+        color: hifi.colors.faintGray;
+        elide: Text.ElideRight;
+        // Anchors
+        anchors.top: passphrasePageSecurityImage.top;
+        anchors.bottom: passphrasePageSecurityImage.bottom;
+        anchors.left: passphrasePageSecurityImage.right;
+        anchors.leftMargin: 16;
+        anchors.right: hfcBalanceContainer.left;
+    }
+
+    Rectangle {
+        id: hfcBalanceContainer;
+        anchors.right: parent.right;
+        anchors.verticalCenter: passphrasePageSecurityImage.verticalCenter;
+        width: 175;
+        height: 45;
+    }
+
+    //
+    // FUNCTION DEFINITIONS START
+    //
+    function setSecurityImage(imagePath) {
+        passphrasePageSecurityImage.source = imagePath;
+    }
+    //
+    // Function Name: fromScript()
+    //
+    // Relevant Variables:
+    // None
+    //
+    // Arguments:
+    // message: The message sent from the JavaScript.
+    //     Messages are in format "{method, params}", like json-rpc.
+    //
+    // Description:
+    // Called when a message is received from a script.
+    //
+    function fromScript(message) {
+        switch (message.method) {
+            default:
+                console.log('Unrecognized message from wallet.js:', JSON.stringify(message));
+        }
+    }
+    signal sendSignalToWallet(var msg);
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

interface/resources/qml/hifi/commerce/wallet/NotSetUp.qml

@@ -0,0 +1,127 @@
+//
+//  NotSetUp.qml
+//  qml/hifi/commerce/wallet
+//
+//  NotSetUp
+//
+//  Created by Zach Fox on 2017-08-18
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControlsUit
+import "../../../controls" as HifiControls
+
+// references XXX from root context
+
+Item {
+    HifiConstants { id: hifi; }
+
+    id: root;
+    Hifi.QmlCommerce {
+        id: commerce;
+    }
+
+    //
+    // TAB CONTENTS START
+    //
+
+    // Text below title bar
+    RalewaySemiBold {
+        id: notSetUpText;
+        text: "Your Wallet Account Has Not Been Set Up";
+        // Text size
+        size: 22;
+        // Anchors
+        anchors.top: parent.top;
+        anchors.topMargin: 100;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: 50;
+        width: paintedWidth;
+        // Style
+        color: hifi.colors.faintGray;
+        wrapMode: Text.WordWrap;
+        // Alignment
+        horizontalAlignment: Text.AlignHCenter;
+        verticalAlignment: Text.AlignVCenter;
+    }
+
+    // Explanitory text
+    RalewayRegular {
+        text: "To buy and sell items in High Fidelity Coin (HFC), you first need " +
+        "to set up your wallet.<br><b>You do not need to submit a credit card or personal information to set up your wallet.</b>";
+        // Text size
+        size: 18;
+        // Anchors
+        anchors.top: notSetUpText.bottom;
+        anchors.topMargin: 16;
+        anchors.left: parent.left;
+        anchors.leftMargin: 30;
+        anchors.right: parent.right;
+        anchors.rightMargin: 30;
+        height: 100;
+        width: paintedWidth;
+        // Style
+        color: hifi.colors.faintGray;
+        wrapMode: Text.WordWrap;
+        // Alignment
+        horizontalAlignment: Text.AlignHCenter;
+        verticalAlignment: Text.AlignVCenter;
+    }
+
+    // "Set Up" button
+    HifiControlsUit.Button {
+        color: hifi.buttons.black;
+        colorScheme: hifi.colorSchemes.dark;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 150;
+        anchors.horizontalCenter: parent.horizontalCenter;
+        width: parent.width/2;
+        height: 50;
+        text: "Set Up My Wallet";
+        onClicked: {
+            sendSignalToWallet({method: 'setUpClicked'});
+        }
+    }
+
+
+    //
+    // TAB CONTENTS END
+    //
+
+    //
+    // FUNCTION DEFINITIONS START
+    //
+    //
+    // Function Name: fromScript()
+    //
+    // Relevant Variables:
+    // None
+    //
+    // Arguments:
+    // message: The message sent from the JavaScript.
+    //     Messages are in format "{method, params}", like json-rpc.
+    //
+    // Description:
+    // Called when a message is received from a script.
+    //
+    function fromScript(message) {
+        switch (message.method) {
+            default:
+                console.log('Unrecognized message from wallet.js:', JSON.stringify(message));
+        }
+    }
+    signal sendSignalToWallet(var msg);
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml

@@ -0,0 +1,149 @@
+//
+//  PassphraseSelection.qml
+//  qml/hifi/commerce/wallet
+//
+//  PassphraseSelection
+//
+//  Created by Zach Fox on 2017-08-18
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControlsUit
+import "../../../controls" as HifiControls
+
+// references XXX from root context
+
+Item {
+    HifiConstants { id: hifi; }
+
+    id: root;
+
+    Hifi.QmlCommerce {
+        id: commerce;
+    }
+
+    HifiControlsUit.TextField {
+        id: passphraseField;
+        anchors.top: parent.top;
+        anchors.topMargin: 30;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: 50;
+        echoMode: TextInput.Password;
+        placeholderText: "passphrase";
+    }
+    HifiControlsUit.TextField {
+        id: passphraseFieldAgain;
+        anchors.top: passphraseField.bottom;
+        anchors.topMargin: 10;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: 50;
+        echoMode: TextInput.Password;
+        placeholderText: "re-enter passphrase";
+    }
+    // Error text below TextFields
+    RalewaySemiBold {
+        id: errorText;
+        text: "";
+        // Text size
+        size: 16;
+        // Anchors
+        anchors.top: passphraseFieldAgain.bottom;
+        anchors.topMargin: 0;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: 30;
+        // Style
+        color: hifi.colors.redHighlight;
+        // Alignment
+        horizontalAlignment: Text.AlignHLeft;
+        verticalAlignment: Text.AlignVCenter;
+    }
+
+    // Text below TextFields
+    RalewaySemiBold {
+        id: passwordReqs;
+        text: "Passphrase must be at least 4 characters";
+        // Text size
+        size: 16;
+        // Anchors
+        anchors.top: passphraseFieldAgain.bottom;
+        anchors.topMargin: 16;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: 30;
+        // Style
+        color: hifi.colors.faintGray;
+        // Alignment
+        horizontalAlignment: Text.AlignHLeft;
+        verticalAlignment: Text.AlignVCenter;
+    }
+
+    // Show passphrase text
+    HifiControlsUit.CheckBox {
+        id: showPassphrase;
+        colorScheme: hifi.colorSchemes.dark;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.top: passwordReqs.bottom;
+        anchors.topMargin: 16;
+        height: 30;
+        text: "Show passphrase as plain text";
+        boxSize: 24;
+        onClicked: {
+            passphraseField.echoMode = checked ? TextInput.Normal : TextInput.Password;
+            passphraseFieldAgain.echoMode = checked ? TextInput.Normal : TextInput.Password;
+        }
+    }
+
+    // Text below checkbox
+    RalewayRegular {
+        text: "Your passphrase is used to encrypt your private keys. <b>Please write it down.</b> If it is lost, you will not be able to recover it.";
+        // Text size
+        size: 16;
+        // Anchors
+        anchors.top: showPassphrase.bottom;
+        anchors.topMargin: 16;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        height: paintedHeight;
+        // Style
+        color: hifi.colors.faintGray;
+        wrapMode: Text.WordWrap;
+        // Alignment
+        horizontalAlignment: Text.AlignHLeft;
+        verticalAlignment: Text.AlignVCenter;
+    }
+
+    function validateAndSubmitPassphrase() {
+        if (passphraseField.text.length < 4) {
+            errorText.text = "Passphrase too short."
+            return false;
+        } else if (passphraseField.text !== passphraseFieldAgain.text) {
+            errorText.text = "Passphrases don't match."
+            return false;
+        } else {
+            errorText.text = "";
+            commerce.setPassphrase(passphraseField.text);
+            return true;
+        }
+    }
+}

interface/resources/qml/hifi/commerce/wallet/SecurityImageModel.qml

@@ -39,4 +39,8 @@ ListModel {
         sourcePath: "images/06gingerbread.jpg"
         securityImageEnumValue: 6;
     }
+
+    function getImagePathFromImageID(imageID) {
+        return (imageID ? root.get(imageID - 1).sourcePath : "");
+    }
 }

interface/resources/qml/hifi/commerce/wallet/SecurityImageSelection.qml

@@ -92,7 +92,7 @@ Item {
     signal sendToScript(var message);
 
     function getImagePathFromImageID(imageID) {
-        return (imageID ? gridModel.get(imageID - 1).sourcePath : "");
+        return (imageID ? gridModel.getImagePathFromImageID(imageID) : "");
     }
 
     function getSelectedImageIndex() {

interface/resources/qml/hifi/commerce/wallet/Wallet.qml

@@ -24,6 +24,7 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: root;
+    property string activeView: "notSetUp";
     // Style
     color: hifi.colors.baseGray;
     Hifi.QmlCommerce {
@@ -35,11 +36,40 @@ Rectangle {
                 hfcBalanceText.text = balance;
             }
         }
+
+        onSecurityImageResult: {
+            if (imageID !== 0) { // "If security image is set up"
+                accountHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
+            } else if (root.lastPage === "securityImage") {
+                // ERROR! Invalid security image.
+                securityImageContainer.visible = true;
+                choosePassphraseContainer.visible = false;
+            }
+        }
     }
+
+    SecurityImageModel {
+        id: securityImageModel;
+    }
+
     Connections {
         target: walletSetupLightbox;
         onSendSignalToWallet: {
-            sendToScript(msg);
+            if (msg.method === 'walletSetup_cancelClicked') {
+                walletSetupLightbox.visible = false;
+            } else if (msg.method === 'walletSetup_finished') {
+                root.activeView = "accountHome";
+            } else {
+                sendToScript(msg);
+            }
+        }
+    }
+    Connections {
+        target: notSetUp;
+        onSendSignalToWallet: {
+            if (msg.method === 'setUpClicked') {
+                walletSetupLightbox.visible = true;
+            }
         }
     }
 
@@ -53,6 +83,7 @@ Rectangle {
     }
     WalletSetupLightbox {
         id: walletSetupLightbox;
+        visible: false;
         z: 999;
         anchors.centerIn: walletSetupLightboxContainer;
         width: walletSetupLightboxContainer.width - 50;
@@ -84,7 +115,7 @@ Rectangle {
             anchors.bottom: parent.bottom;
             width: paintedWidth;
             // Style
-            color: hifi.colors.lightGrayText;
+            color: hifi.colors.faintGray;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
             verticalAlignment: Text.AlignVCenter;
@@ -104,7 +135,27 @@ Rectangle {
     //
     // TAB CONTENTS START
     //
+    NotSetUp {
+        id: notSetUp;
+        visible: root.activeView === "notSetUp";
+        anchors.top: titleBarContainer.bottom;
+        anchors.bottom: tabButtonsContainer.top;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+    }
 
+    AccountHome {
+        id: accountHome;
+        visible: root.activeView === "accountHome";
+        anchors.top: titleBarContainer.bottom;
+        anchors.topMargin: 16;
+        anchors.bottom: tabButtonsContainer.top;
+        anchors.bottomMargin: 16;
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+    }
 
 
     //
@@ -134,6 +185,7 @@ Rectangle {
         // "ACCOUNT HOME" tab button
         Rectangle {
             id: accountHomeButtonContainer;
+            visible: !notSetUp.visible;
             color: hifi.colors.black;
             anchors.top: parent.top;
             anchors.left: parent.left;
@@ -149,7 +201,7 @@ Rectangle {
                 anchors.leftMargin: 4;
                 anchors.rightMargin: 4;
                 // Style
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.faintGray;
                 wrapMode: Text.WordWrap;
                 // Alignment
                 horizontalAlignment: Text.AlignHCenter;
@@ -160,6 +212,7 @@ Rectangle {
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
+                    root.activeView = "accountHome";
                 }
                 onEntered: parent.color = hifi.colors.blueHighlight;
                 onExited: parent.color = hifi.colors.black;
@@ -169,6 +222,7 @@ Rectangle {
         // "SEND MONEY" tab button
         Rectangle {
             id: sendMoneyButtonContainer;
+            visible: !notSetUp.visible;
             color: hifi.colors.black;
             anchors.top: parent.top;
             anchors.left: accountHomeButtonContainer.right;
@@ -184,7 +238,7 @@ Rectangle {
                 anchors.leftMargin: 4;
                 anchors.rightMargin: 4;
                 // Style
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.faintGray;
                 wrapMode: Text.WordWrap;
                 // Alignment
                 horizontalAlignment: Text.AlignHCenter;
@@ -195,6 +249,7 @@ Rectangle {
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
+                    root.activeView = "sendMoney";
                 }
                 onEntered: parent.color = hifi.colors.blueHighlight;
                 onExited: parent.color = hifi.colors.black;
@@ -204,6 +259,7 @@ Rectangle {
         // "SECURITY" tab button
         Rectangle {
             id: securityButtonContainer;
+            visible: !notSetUp.visible;
             color: hifi.colors.black;
             anchors.top: parent.top;
             anchors.left: sendMoneyButtonContainer.right;
@@ -219,7 +275,7 @@ Rectangle {
                 anchors.leftMargin: 4;
                 anchors.rightMargin: 4;
                 // Style
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.faintGray;
                 wrapMode: Text.WordWrap;
                 // Alignment
                 horizontalAlignment: Text.AlignHCenter;
@@ -230,6 +286,7 @@ Rectangle {
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
+                    root.activeView = "security";
                 }
                 onEntered: parent.color = hifi.colors.blueHighlight;
                 onExited: parent.color = hifi.colors.black;
@@ -239,6 +296,7 @@ Rectangle {
         // "HELP" tab button
         Rectangle {
             id: helpButtonContainer;
+            visible: !notSetUp.visible;
             color: hifi.colors.black;
             anchors.top: parent.top;
             anchors.left: securityButtonContainer.right;
@@ -254,7 +312,7 @@ Rectangle {
                 anchors.leftMargin: 4;
                 anchors.rightMargin: 4;
                 // Style
-                color: hifi.colors.lightGrayText;
+                color: hifi.colors.faintGray;
                 wrapMode: Text.WordWrap;
                 // Alignment
                 horizontalAlignment: Text.AlignHCenter;
@@ -265,6 +323,7 @@ Rectangle {
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
+                    root.activeView = "help";
                 }
                 onEntered: parent.color = hifi.colors.blueHighlight;
                 onExited: parent.color = hifi.colors.black;

interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml

@@ -26,7 +26,7 @@ Rectangle {
     id: root;
     property string lastPage: "login";
     // Style
-    color: "white";
+    color: hifi.colors.baseGray;
 
     Hifi.QmlCommerce {
         id: commerce;
@@ -43,10 +43,6 @@ Rectangle {
             if (imageID !== 0) { // "If security image is set up"
                 passphrasePageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
                 keysReadyPageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
-                if (root.lastPage === "login") {
-                    securityImageContainer.visible = false;
-                    choosePassphraseContainer.visible = true;
-                }
             } else if (root.lastPage === "securityImage") {
                 // ERROR! Invalid security image.
                 securityImageContainer.visible = true;
@@ -98,7 +94,7 @@ Rectangle {
                 anchors.bottom: parent.bottom;
                 width: paintedWidth;
                 // Style
-                color: hifi.colors.darkGray;
+                color: hifi.colors.faintGray;
                 // Alignment
                 horizontalAlignment: Text.AlignHLeft;
                 verticalAlignment: Text.AlignVCenter;
@@ -119,7 +115,7 @@ Rectangle {
             anchors.rightMargin: 16;
             height: 50;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
             verticalAlignment: Text.AlignVCenter;
@@ -140,7 +136,7 @@ Rectangle {
             anchors.rightMargin: 16;
             height: 50;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             wrapMode: Text.WordWrap;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
@@ -230,7 +226,7 @@ Rectangle {
                 anchors.bottom: parent.bottom;
                 width: paintedWidth;
                 // Style
-                color: hifi.colors.darkGray;
+                color: hifi.colors.faintGray;
                 // Alignment
                 horizontalAlignment: Text.AlignHLeft;
                 verticalAlignment: Text.AlignVCenter;
@@ -250,7 +246,7 @@ Rectangle {
             height: 50;
             width: paintedWidth;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
             verticalAlignment: Text.AlignVCenter;
@@ -269,7 +265,7 @@ Rectangle {
 
         // Text below security images
         RalewayRegular {
-            text: "<b>Your security picture shows you that the service asking for your passphrase is authorized. You can change your secure picture at any time.</b>";
+            text: "<b>Your security picture shows you that the service asking for your passphrase is authorized.</b> You can change your secure picture at any time.";
             // Text size
             size: 18;
             // Anchors
@@ -281,7 +277,7 @@ Rectangle {
             anchors.rightMargin: 16;
             height: paintedHeight;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             wrapMode: Text.WordWrap;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
@@ -375,7 +371,7 @@ Rectangle {
                 anchors.bottom: parent.bottom;
                 width: paintedWidth;
                 // Style
-                color: hifi.colors.darkGray;
+                color: hifi.colors.faintGray;
                 // Alignment
                 horizontalAlignment: Text.AlignHLeft;
                 verticalAlignment: Text.AlignVCenter;
@@ -396,118 +392,24 @@ Rectangle {
             anchors.rightMargin: 16;
             height: 50;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
             verticalAlignment: Text.AlignVCenter;
         }
 
-        HifiControlsUit.TextField {
+        PassphraseSelection {
-            id: passphraseField;
+            id: passphraseSelection;
             anchors.top: passphraseTitleHelper.bottom;
             anchors.topMargin: 30;
             anchors.left: parent.left;
-            anchors.leftMargin: 16;
             anchors.right: parent.right;
-            anchors.rightMargin: 16;
+            anchors.bottom: passphraseNavBar.top;
-            height: 50;
-            echoMode: TextInput.Password;
-            placeholderText: "passphrase";
-        }
-        HifiControlsUit.TextField {
-            id: passphraseFieldAgain;
-            anchors.top: passphraseField.bottom;
-            anchors.topMargin: 10;
-            anchors.left: parent.left;
-            anchors.leftMargin: 16;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            height: 50;
-            echoMode: TextInput.Password;
-            placeholderText: "re-enter passphrase";
-        }
-        // Error text below TextFields
-        RalewaySemiBold {
-            id: errorText;
-            text: "";
-            // Text size
-            size: 16;
-            // Anchors
-            anchors.top: passphraseFieldAgain.bottom;
-            anchors.topMargin: 0;
-            anchors.left: parent.left;
-            anchors.leftMargin: 16;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            height: 30;
-            // Style
-            color: hifi.colors.redHighlight;
-            // Alignment
-            horizontalAlignment: Text.AlignHLeft;
-            verticalAlignment: Text.AlignVCenter;
-        }
-
-        // Text below TextFields
-        RalewaySemiBold {
-            id: passwordReqs;
-            text: "Passphrase must be at least 4 characters";
-            // Text size
-            size: 16;
-            // Anchors
-            anchors.top: passphraseFieldAgain.bottom;
-            anchors.topMargin: 16;
-            anchors.left: parent.left;
-            anchors.leftMargin: 16;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            height: 30;
-            // Style
-            color: hifi.colors.darkGray;
-            // Alignment
-            horizontalAlignment: Text.AlignHLeft;
-            verticalAlignment: Text.AlignVCenter;
-        }
-
-        // Show passphrase text
-        HifiControlsUit.CheckBox {
-            id: showPassphrase;
-            colorScheme: hifi.colorSchemes.dark;
-            anchors.left: parent.left;
-            anchors.leftMargin: 16;
-            anchors.top: passwordReqs.bottom;
-            anchors.topMargin: 16;
-            height: 30;
-            text: "Show passphrase as plain text";
-            boxSize: 24;
-            onClicked: {
-                passphraseField.echoMode = checked ? TextInput.Normal : TextInput.Password;
-                passphraseFieldAgain.echoMode = checked ? TextInput.Normal : TextInput.Password;
-            }
-        }
-
-        // Text below checkbox
-        RalewayRegular {
-            text: "Your passphrase is used to encrypt your private keys. <b>Please write it down.</b> If it is lost, you will not be able to recover it.";
-            // Text size
-            size: 16;
-            // Anchors
-            anchors.top: showPassphrase.bottom;
-            anchors.topMargin: 16;
-            anchors.left: parent.left;
-            anchors.leftMargin: 16;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            height: paintedHeight;
-            // Style
-            color: hifi.colors.darkGray;
-            wrapMode: Text.WordWrap;
-            // Alignment
-            horizontalAlignment: Text.AlignHLeft;
-            verticalAlignment: Text.AlignVCenter;
         }
 
         // Navigation Bar
         Item {
+            id: passphraseNavBar;
             // Size
             width: parent.width;
             height: 100;
@@ -563,14 +465,8 @@ Rectangle {
                 width: 100;
                 text: "Next";
                 onClicked: {
-                    if (passphraseField.text.length < 4) {
+                    if (passphraseSelection.validateAndSubmitPassphrase()) {
-                        errorText.text = "Passphrase too short."
-                    } else if (passphraseField.text !== passphraseFieldAgain.text) {
-                        errorText.text = "Passphrases don't match."
-                    } else {
-                        errorText.text = ""
                         root.lastPage = "passphrase";
-                        commerce.setPassphrase(passphraseField.text);
                         choosePassphraseContainer.visible = false;
                         privateKeysReadyContainer.visible = true;
                     }
@@ -612,7 +508,7 @@ Rectangle {
                 anchors.bottom: parent.bottom;
                 width: paintedWidth;
                 // Style
-                color: hifi.colors.darkGray;
+                color: hifi.colors.faintGray;
                 // Alignment
                 horizontalAlignment: Text.AlignHLeft;
                 verticalAlignment: Text.AlignVCenter;
@@ -633,7 +529,7 @@ Rectangle {
             anchors.rightMargin: 16;
             height: 50;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
             verticalAlignment: Text.AlignVCenter;
@@ -656,7 +552,7 @@ Rectangle {
             anchors.rightMargin: 16;
             height: paintedHeight;
             // Style
-            color: hifi.colors.darkGray;
+            color: hifi.colors.faintGray;
             wrapMode: Text.WordWrap;
             // Alignment
             horizontalAlignment: Text.AlignHLeft;
@@ -699,6 +595,7 @@ Rectangle {
                 text: "Finish";
                 onClicked: {
                     root.visible = false;
+                    sendSignalToWallet({method: 'walletSetup_finished'});
                 }
             }
         }