diff --git a/src/app.js b/src/app.js index e7bee6e..4a6e9f4 100644 --- a/src/app.js +++ b/src/app.js @@ -122,7 +122,9 @@ async function app (args) { } catch (err) { const mnemonic = Wallet.generateMnemonic() let mnemonicScreen = new Mnemonic(mnemonic) - await mnemonicScreen.validateMnemonic() + + // The return value is the mnemonic that we either generated or the one we entered + const menmonic = await mnemonicScreen.completion() Wallet.createSeedFile(mnemonic, SEED_FILE) } diff --git a/src/mnemonic/choice.js b/src/mnemonic/choice.js new file mode 100644 index 0000000..0dddabe --- /dev/null +++ b/src/mnemonic/choice.js @@ -0,0 +1,50 @@ +const { + QMainWindow, + QStackedWidget, + QIcon, + QPushButton, + AlignmentFlag, + QGridLayout, + Direction, + QLabel +} = require("@nodegui/nodegui") +const View = require('../components/view') + +class MnemonicChoice extends View { + constructor (viewManager) { + super() + + const layout = new QGridLayout() + + this.buttonNewWallet = new QPushButton() + this.buttonNewWallet.setText('New Wallet') + this.buttonNewWallet.setInlineStyle('padding: 5px; background-color: white; border-radius: 30%; color: #131620;') + this.buttonNewWallet.setFixedSize(240, 60) + + const orText = new QLabel() + orText.setText('Or') + + this.buttonEnterMnemonic = new QPushButton() + this.buttonEnterMnemonic.setText('Enter Mnemonic') + this.buttonEnterMnemonic.setInlineStyle('padding: 5px; background-color: white; border-radius: 30%; color: #131620;') + this.buttonEnterMnemonic.setFixedSize(240, 60) + + layout.addWidget(this.buttonNewWallet, 0, 0, 3, 0, AlignmentFlag.AlignCenter) + layout.addWidget(orText, 1, 0, 3, 0, AlignmentFlag.AlignCenter) + layout.addWidget(this.buttonEnterMnemonic, 2, 0, 3, 0, AlignmentFlag.AlignCenter) + + this.buttonNewWallet.addEventListener('clicked', () => { + console.log('New Wallet clicked') + viewManager.emit('changeView', 'new') + }) + + this.buttonEnterMnemonic.addEventListener('clicked', () => { + console.log('Enter Mnemonic clicked') + viewManager.emit('changeView', 'enter') + }) + + this.setLayout(layout) + } +} + +module.exports = MnemonicChoice \ No newline at end of file diff --git a/src/mnemonic/enter.js b/src/mnemonic/enter.js new file mode 100644 index 0000000..bd34537 --- /dev/null +++ b/src/mnemonic/enter.js @@ -0,0 +1,45 @@ +const { + QPushButton, + AlignmentFlag, + QGridLayout, + Direction, + QLabel, + QTextEdit, +} = require("@nodegui/nodegui") +const View = require('../components/view') + +class MnemonicEnter extends View { + constructor (viewManager) { + super() + + const layout = new QGridLayout() + + const enterLabel = new QLabel() + enterLabel.setText('Enter your mnemonic :') + enterLabel.setFixedHeight(80) + + this.edit = new QTextEdit() + this.edit.setInlineStyle('padding: 15px; background-color: white; border-radius: 2%; color: #131620;') + this.edit.setFixedWidth(320) + + this.buttonValidate = new QPushButton() + this.buttonValidate.setText('Validate') + this.buttonValidate.setInlineStyle('padding: 5px; background-color: white; border-radius: 30%; color: #131620;') + this.buttonValidate.setFixedSize(240, 60) + + // TODO: fix the layout so it doesn't look so weird + layout.addWidget(enterLabel, 1, 0, 1, 0, AlignmentFlag.AlignCenter) + layout.addWidget(this.edit, 2, 0, 1, 0, AlignmentFlag.AlignCenter) + layout.addWidget(this.buttonValidate, 3, 0, 3, 0, AlignmentFlag.AlignCenter) + + this.buttonValidate.addEventListener('clicked', () => { + // TODO: validate the mnemonic here + const mnemonic = this.edit.toPlainText() + viewManager.emit('completed', mnemonic) + }) + + this.setLayout(layout) + } +} + +module.exports = MnemonicEnter \ No newline at end of file diff --git a/src/mnemonic/index.js b/src/mnemonic/index.js index 6721dab..444d36c 100644 --- a/src/mnemonic/index.js +++ b/src/mnemonic/index.js @@ -1,14 +1,15 @@ const { QMainWindow, - QPlainTextEdit, + QStackedWidget, QIcon, - QPushButton, - QFrame, - QGridLayout, - AlignmentFlag - } = require("@nodegui/nodegui") const path = require("path") +const EventEmitter = require('events') + +// Screens +const MnemonicChoice = require('./choice') +const MnemonicShow = require('./show') +const MnemonicEnter = require('./enter') // icons path const icon = typeof __webpack_require__ === 'function' ? "./assets/logo.png" : "../assets/logo.png" @@ -23,43 +24,63 @@ class Mnemonic extends QMainWindow { this.setWindowIcon(winIcon) this.setFixedSize(460, 720) - const frame = new QFrame() - const layout = new QGridLayout() - - /* Text edit widget */ - const plainTextEdit = new QPlainTextEdit() - plainTextEdit.setPlainText(mnemonic) - plainTextEdit.setDisabled(true) - plainTextEdit.setInlineStyle('margin: 180px 20px; border: none; font-size: 2em;') - + // ------------------- + // Stacked Widget (manage views) + // ------------------- + const views = new QStackedWidget() + const viewManager = new EventEmitter() - this.button = new QPushButton() - this.button.setText('I have saved my mnemonic') - this.button.setInlineStyle('padding: 5px; background-color: white; border-radius: 30%; color: #131620;') - this.button.setFixedSize(240, 60) - - layout.addWidget(plainTextEdit, 0, 0, 1, 0, AlignmentFlag.AlignTop) - layout.addWidget(this.button, 1, 0, 1, 0, AlignmentFlag.AlignCenter) + const choice = new MnemonicChoice(viewManager) + const show = new MnemonicShow(viewManager, mnemonic) + const enter = new MnemonicEnter(viewManager) + + views.addWidget(choice) + views.addWidget(show) + views.addWidget(enter) - // frame.setInlineStyle('border: none;') - frame.setInlineStyle('margin: 20px;') + views.setCurrentWidget(choice) + + this.setCentralWidget(views) + this.setStyleSheet('background-color: #131620;') - frame.setLayout(layout) - this.setCentralWidget(frame) + // View Manager + viewManager.on('changeView', async (view) => { + switch (view) { + case 'new': + views.setCurrentIndex(1) + break + case 'enter': + views.setCurrentIndex(2) + break + default: + console.log('unknown view') + } + }) - this.setStyleSheet('background-color: #131620;') + // ------------------- + // Event manager for completion + // ------------------- + this.viewManager = viewManager this.show() } - async validateMnemonic () { + async completion () { return new Promise((resolve, reject) => { - this.button.addEventListener('clicked', () => { + this.viewManager.on('completed', (mnemonic) => { // close the mnemonic window this.close() - resolve() - }) + console.log("completed") + + // We return the menmonic in case we have entered one + resolve(mnemonic) + }) + this.viewManager.on('failed', () => { + // close the mnemonic window + this.close() + reject() + }) }) } } diff --git a/src/mnemonic/show.js b/src/mnemonic/show.js new file mode 100644 index 0000000..cf7334a --- /dev/null +++ b/src/mnemonic/show.js @@ -0,0 +1,43 @@ +const { + QGridLayout, + AlignmentFlag, + QPushButton, + QFrame, + QPlainTextEdit, +} = require("@nodegui/nodegui") +const View = require('../components/view') + +class MnemonicShow extends View { + constructor (viewManager, mnemonic) { + super() + + const layout = new QGridLayout() + + /* Text edit widget */ + const plainTextEdit = new QPlainTextEdit() + plainTextEdit.setPlainText(mnemonic) + plainTextEdit.setDisabled(true) + plainTextEdit.setInlineStyle('margin: 180px 20px; border: none; font-size: 2em;') + + + this.button = new QPushButton() + this.button.setText('I have saved my mnemonic') + this.button.setInlineStyle('padding: 5px; background-color: white; border-radius: 30%; color: #131620;') + this.button.setFixedSize(240, 60) + + layout.addWidget(plainTextEdit, 0, 0, 1, 0, AlignmentFlag.AlignTop) + layout.addWidget(this.button, 1, 0, 1, 0, AlignmentFlag.AlignCenter) + + // frame.setInlineStyle('border: none;') + this.setInlineStyle('margin: 20px;') + + this.setLayout(layout) + + this.button.addEventListener('clicked', () => { + viewManager.emit('completed', mnemonic) + }) + + } +} + +module.exports = MnemonicShow \ No newline at end of file diff --git a/src/win.js b/src/win.js index 5b3af76..25dff7a 100644 --- a/src/win.js +++ b/src/win.js @@ -19,7 +19,7 @@ const Home = require('./home') const Send = require('./send') const Receive = require('./receive') const Settings = require('./settings') -const Mnemonic = require('./mnemonic') + // icons path const icon = typeof __webpack_require__ === 'function' ? "./assets/logo.png" : "../assets/logo.png"