From cb9d8e2e14e9e13745d25e926dd597185ec89e4b Mon Sep 17 00:00:00 2001 From: Vadim Chadyuk Date: Wed, 2 Feb 2022 06:13:18 +0300 Subject: [PATCH 1/4] Initial perstistance of screen and popup --- src/js/Controller.js | 24 ++++++++++++++++++-- src/js/view/View.js | 52 +++++++++++++++++++++++++++++--------------- src/manifest.json | 4 ++-- 3 files changed, 58 insertions(+), 22 deletions(-) diff --git a/src/js/Controller.js b/src/js/Controller.js index cb3f7d1..2c0da5e 100644 --- a/src/js/Controller.js +++ b/src/js/Controller.js @@ -110,6 +110,8 @@ class Controller { this.isContractInitialized = false; this.sendingData = null; this.processingVisible = false; + this.viewScreen = null; + this.viewPopup = null; this.ledgerApp = null; this.isLedger = false; @@ -292,7 +294,7 @@ class Controller { onBackupDone() { if (localStorage.getItem('words')) { - this.sendToView('showScreen', {name: 'main'}); + this.sendToView('showScreen', {name: 'main', myAddress: this.myAddress}); } else { this.showCreatePassword(); } @@ -470,7 +472,14 @@ class Controller { if (!this.myAddress || !localStorage.getItem('words')) { this.sendToView('showScreen', {name: 'start'}) } else { - this.sendToView('showScreen', {name: 'main', myAddress: this.myAddress}); + if (this.viewScreen) { + this.sendToView('showScreen', this.viewScreen); + if (this.viewPopup) { + this.sendToView('showPopup', this.viewPopup); + } + } else { + this.sendToView('showScreen', {name: 'main', myAddress: this.myAddress}); + } if (this.balance !== null) { this.sendToView('setBalance', {balance: this.balance.toString(), txs: this.transactions}); } @@ -779,6 +788,12 @@ class Controller { // TRANSPORT WITH VIEW sendToView(method, params, needQueue) { + if (method === 'showScreen') { + this.viewScreen = params; + } + if (method === 'showPopup') { + this.viewPopup = params; + } if (window.view) { window.view.onMessage(method, params); } else { @@ -796,6 +811,7 @@ class Controller { onViewMessage(method, params) { switch (method) { case 'showScreen': + this.viewScreen = params; switch (params.name) { case 'created': this.showCreated(); @@ -808,6 +824,9 @@ class Controller { break; } break; + case 'showPopup': + this.viewPopup = params; + break; case 'import': this.import(params.words); break; @@ -837,6 +856,7 @@ class Controller { break; case 'showMain': this.showMain(); + this.initMain(); break; case 'onBackupWalletClick': this.onBackupWalletClick(); diff --git a/src/js/view/View.js b/src/js/view/View.js index b819a5a..7154d5c 100644 --- a/src/js/view/View.js +++ b/src/js/view/View.js @@ -39,15 +39,21 @@ class View { this.balance = null; /** @type {string} */ this.currentScreenName = null; + /** @type {string} */ + this.currentPopupName = null; /** @type {boolean} */ this.isTestnet = false; this.createImportInputs(); initLotties().then(() => { - const lottie = lotties[this.currentScreenName]; - if (lottie) { - toggleLottie(lottie, true); + const screenLottie = lotties[this.currentScreenName]; + const popupLottie = lotties[this.currentPopupName]; + if (screenLottie) { + toggleLottie(screenLottie, true); + } + if (popupLottie) { + toggleLottie(popupLottie, true); } }); @@ -289,7 +295,8 @@ class View { window.scrollTo(0, 0); } - showPopup(name) { + showPopup(name, params) { + this.sendMessage('showPopup', {name, ...params}) $('#enterPassword_input').value = ''; toggle($('#modal'), name !== ''); @@ -303,6 +310,8 @@ class View { toggleLottie(lottie, name === popup); } }); + + this.currentPopupName = name; } isPopupVisible(name) { @@ -619,19 +628,10 @@ class View { // TRANSACTION POPUP onTransactionClick(tx) { - this.showPopup('transaction'); - const isReceive = !tx.amount.isNeg(); - const addr = isReceive ? tx.from_addr : tx.to_addr; - this.currentTransactionAddr = addr; - const amountFormatted = formatNanograms(tx.amount); - $('#transactionAmount').innerText = (isReceive ? '+' + amountFormatted : amountFormatted) + ' 💎'; - $('#transactionFee').innerText = formatNanograms(tx.otherFee) + ' transaction fee'; - $('#transactionStorageFee').innerText = formatNanograms(tx.storageFee) + ' storage fee'; - $('#transactionSenderLabel').innerText = isReceive ? 'Sender' : 'Recipient'; - setAddr($('#transactionSender'), addr); - toggle($('#transactionCommentLabel'), !!tx.comment); - $('#transactionComment').innerText = tx.comment; - $('#transactionDate').innerText = formatDateFull(tx.date); + this.onMessage('showPopup', { + name: 'transaction', + tx: {...tx, amount: tx.amount.toString(), otherFee: tx.otherFee.toString(), storageFee: tx.storageFee.toString()} + }); } onTransactionButtonClick() { @@ -820,7 +820,7 @@ class View { break; case 'showPopup': - this.showPopup(params.name); + this.showPopup(params.name, params); switch (params.name) { case 'changePassword': @@ -863,6 +863,22 @@ class View { const hex = params.data.length > 48 ? params.data.substring(0, 47) + '…' : params.data; setAddr($('#signConfirmData'), hex); break; + case 'transaction': + const tx = params.tx; + const amount = new BN(tx.amount); + const isReceive = !amount.isNeg(); + const addr = isReceive ? tx.from_addr : tx.to_addr; + this.currentTransactionAddr = addr; + const amountFormatted = formatNanograms(amount); + $('#transactionAmount').innerText = (isReceive ? '+' + amountFormatted : amountFormatted) + ' 💎'; + $('#transactionFee').innerText = formatNanograms(new BN(tx.otherFee)) + ' transaction fee'; + $('#transactionStorageFee').innerText = formatNanograms(new BN(tx.storageFee)) + ' storage fee'; + $('#transactionSenderLabel').innerText = isReceive ? 'Sender' : 'Recipient'; + setAddr($('#transactionSender'), addr); + toggle($('#transactionCommentLabel'), !!tx.comment); + $('#transactionComment').innerText = tx.comment; + $('#transactionDate').innerText = formatDateFull(tx.date); + break; } break; diff --git a/src/manifest.json b/src/manifest.json index 486880b..b9ee724 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -11,8 +11,8 @@ }, "background": { "scripts": [ - "libs/tonweb-0.0.25.js", - "libs/tonweb-mnemonic-0.0.2.js", + "libs/tonweb-0.0.27.js", + "libs/tonweb-mnemonic-1.0.0.js", "js/Controller.js" ], "persistent": true From 305e2ba2ec5f54fcb7ba54a4db0789e86f158d5a Mon Sep 17 00:00:00 2001 From: Vadim Chadyuk Date: Wed, 2 Feb 2022 07:47:04 +0300 Subject: [PATCH 2/4] Finilize persistence --- src/css/main.css | 4 +-- src/js/Controller.js | 7 ++++- src/js/view/View.js | 75 ++++++++++++++++++++++++++++++++++---------- 3 files changed, 67 insertions(+), 19 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index f773c54..d1ef159 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -632,7 +632,7 @@ button { margin-right: auto; } -#qr img, #invoiceQrImg img, #invoiceQrImg canvas { +#qr img, #qr canvas, #invoiceQrImg img, #invoiceQrImg canvas { width: 185px; height: 185px; } @@ -797,4 +797,4 @@ button { #start_importLedgerHidBtn { display: none; -} \ No newline at end of file +} diff --git a/src/js/Controller.js b/src/js/Controller.js index 2c0da5e..2c3f16e 100644 --- a/src/js/Controller.js +++ b/src/js/Controller.js @@ -469,7 +469,7 @@ class Controller { } initView() { - if (!this.myAddress || !localStorage.getItem('words')) { + if ((!this.myAddress || !localStorage.getItem('words')) && (!this.viewScreen || this.viewScreen.name === 'main')) { this.sendToView('showScreen', {name: 'start'}) } else { if (this.viewScreen) { @@ -875,6 +875,11 @@ class Controller { localStorage.setItem('proxy', params ? 'true' : 'false'); this.doProxy(params); break; + case 'updatePopup': + this.viewPopup = {...this.viewPopup, ...params}; + break; + case 'updateScreen': + this.viewScreen = {...this.viewScreen, ...params}; } } diff --git a/src/js/view/View.js b/src/js/view/View.js index 7154d5c..aa3e9d8 100644 --- a/src/js/view/View.js +++ b/src/js/view/View.js @@ -92,25 +92,45 @@ class View { return; } let s = url.substring('ton://transfer/'.length); - $('#toWalletInput').value = s.substring(0, 48); + const toAddr = s.substring(0, 48); + let amount, comment; + $('#toWalletInput').value = toAddr; s = s.substring(49); const pairs = s.split('&'); pairs .map(p => p.split('=')) .forEach(arr => { if (arr[0] === 'amount') { - $('#amountInput').value = TonWeb.utils.fromNano(new BN(arr[1])); + amount = TonWeb.utils.fromNano(new BN(arr[1])); + $('#amountInput').value = amount; } else if (arr[0] === 'text') { - $('#commentInput').value = arr[1]; + comment = arr[1]; + $('#commentInput').value = comment; } }); + this.sendMessage('updatePopup', {toAddr, amount, comment}) e.preventDefault(); } }); + onInput($('#toWalletInput'), e => { + this.sendMessage('updatePopup', {toAddr: e.target.value}); + }); + onInput($('#amountInput'), e => { + this.sendMessage('updatePopup', {amount: e.target.value}); + }); + onInput($('#commentInput'), e => { + this.sendMessage('updatePopup', {comment: e.target.value}); + }); - onInput($('#invoice_amountInput'), () => this.updateInvoiceLink()); - onInput($('#invoice_commentInput'), () => this.updateInvoiceLink()); + onInput($('#invoice_amountInput'), (e) => { + this.sendMessage('updatePopup', {amount: e.target.value}); + this.updateInvoiceLink(); + }); + onInput($('#invoice_commentInput'), (e) => { + this.sendMessage('updatePopup', {comment: e.target.value}); + this.updateInvoiceLink(); + }); $("#start_createBtn").addEventListener('click', () => this.sendMessage('showScreen', {name: 'created'})); $("#start_importBtn").addEventListener('click', () => this.sendMessage('showScreen', {name: 'import'})); @@ -166,8 +186,7 @@ class View { $('#main_settingsButton').addEventListener('click', () => this.onSettingsClick()); $('#main_receiveBtn').addEventListener('click', () => { - toggle($('#receive_showAddressOnDeviceBtn'), !!this.isLedger); - this.showPopup('receive'); + this.onMessage('showPopup', {name: 'receive'}); }); $('#sendButton').addEventListener('click', () => this.onMessage('showPopup', {name: 'send'})); @@ -363,6 +382,7 @@ class View { // IMPORT SCREEN createImportInputs() { + const self = this; const onEnter = input => { const i = Number(input.getAttribute('tabindex')); if (i === IMPORT_WORDS_COUNT) { @@ -391,6 +411,14 @@ class View { input.classList.remove('error'); showWordsPopup(input); + + const words = []; + for (let i = 0; i < IMPORT_WORDS_COUNT; i++) { + const input = $('#importInput' + i); + const value = input.value.toLowerCase().trim(); + words.push(value); + } + self.sendMessage('updateScreen', {name: 'import', words}) } const onFocusIn = (e) => { @@ -478,11 +506,12 @@ class View { } } - clearImportWords() { + clearImportWords(words = []) { + console.log(words); toggle($('#wordsPopup'), false); for (let i = 0; i < IMPORT_WORDS_COUNT; i++) { const input = $('#importInput' + i); - input.value = ''; + input.value = words[i] || ''; input.classList.remove('error'); } } @@ -715,7 +744,13 @@ class View { // RECEIVE INVOICE QR POPUP onCreateInvoiceQrClick() { - this.onMessage('showPopup', {name: 'invoiceQr'}); + this.onMessage('showPopup', + { + name: 'invoiceQr', + amount: $('#invoice_amountInput').value, + comment: $('#invoice_commentInput').value, + } + ); } drawInvoiceQr(link) { @@ -795,7 +830,7 @@ class View { case 'created': break; case 'import': - this.clearImportWords(); + this.clearImportWords(params.words); $('#importInput0').focus(); break; case 'backup': @@ -834,20 +869,25 @@ class View { $('#done .popup-grey-text').innerText = params.message; break; case 'invoice': - $('#invoice_amountInput').value = ''; - $('#invoice_commentInput').value = ''; + toggle($('#receive_showAddressOnDeviceBtn'), !!this.isLedger); + $('#invoice_amountInput').value = params.amount || ''; + $('#invoice_commentInput').value = params.comment || ''; this.updateInvoiceLink(); $('#invoice_amountInput').focus(); break; case 'invoiceQr': + toggle($('#receive_showAddressOnDeviceBtn'), !!this.isLedger); + $('#invoice_amountInput').value = params.amount || ''; + $('#invoice_commentInput').value = params.comment || ''; + this.updateInvoiceLink(); this.drawInvoiceQr(this.getInvoiceLink()); $('#invoiceQrAmount').innerText = $('#invoice_amountInput').value; break; case 'send': this.clearSend(); - if (params.toAddr) { - $('#toWalletInput').value = params.toAddr; - } + $('#toWalletInput').value = params.toAddr || ''; + $('#amountInput').value = params.amount || ''; + $('#commentInput').value = params.comment || ''; toggle($('#commentInput'), !this.isLedger); $('#toWalletInput').focus(); break; @@ -879,6 +919,9 @@ class View { $('#transactionComment').innerText = tx.comment; $('#transactionDate').innerText = formatDateFull(tx.date); break; + case 'receive': + toggle($('#receive_showAddressOnDeviceBtn'), !!this.isLedger); + break; } break; From d531e5b57c50bcc5838bc9dc2d6ea09300f40dbc Mon Sep 17 00:00:00 2001 From: Vadim Chadyuk Date: Wed, 2 Feb 2022 08:01:47 +0300 Subject: [PATCH 3/4] Formatting --- src/js/Controller.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/Controller.js b/src/js/Controller.js index 2c3f16e..45ad5d2 100644 --- a/src/js/Controller.js +++ b/src/js/Controller.js @@ -789,11 +789,11 @@ class Controller { sendToView(method, params, needQueue) { if (method === 'showScreen') { - this.viewScreen = params; + this.viewScreen = params; + } + if (method === 'showPopup') { + this.viewPopup = params; } - if (method === 'showPopup') { - this.viewPopup = params; - } if (window.view) { window.view.onMessage(method, params); } else { From 210a7a4c7fcabdb33bb963d551585120b1f7b32d Mon Sep 17 00:00:00 2001 From: Vadim Chadyuk Date: Wed, 2 Feb 2022 14:15:59 +0300 Subject: [PATCH 4/4] cleanup --- src/js/Controller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/Controller.js b/src/js/Controller.js index 45ad5d2..a1fb2ea 100644 --- a/src/js/Controller.js +++ b/src/js/Controller.js @@ -856,7 +856,6 @@ class Controller { break; case 'showMain': this.showMain(); - this.initMain(); break; case 'onBackupWalletClick': this.onBackupWalletClick();