Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/persist state #76

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Feature/persist state #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb9d8e2
Initial perstistance of screen and popup
D2Phoenix Feb 2, 2022
305e2ba
Finilize persistence
D2Phoenix Feb 2, 2022
d531e5b
Formatting
D2Phoenix Feb 2, 2022
210a7a4
cleanup
D2Phoenix Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -797,4 +797,4 @@ button {

#start_importLedgerHidBtn {
display: none;
}
}
30 changes: 27 additions & 3 deletions src/js/Controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -467,10 +469,17 @@ 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 {
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});
}
Expand Down Expand Up @@ -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 {
Expand All @@ -796,6 +811,7 @@ class Controller {
onViewMessage(method, params) {
switch (method) {
case 'showScreen':
this.viewScreen = params;
switch (params.name) {
case 'created':
this.showCreated();
Expand All @@ -808,6 +824,9 @@ class Controller {
break;
}
break;
case 'showPopup':
this.viewPopup = params;
break;
case 'import':
this.import(params.words);
break;
Expand Down Expand Up @@ -855,6 +874,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};
}
}

Expand Down
127 changes: 93 additions & 34 deletions src/js/view/View.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});

Expand Down Expand Up @@ -86,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'}));
Expand Down Expand Up @@ -160,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'}));

Expand Down Expand Up @@ -289,7 +314,8 @@ class View {
window.scrollTo(0, 0);
}

showPopup(name) {
showPopup(name, params) {
this.sendMessage('showPopup', {name, ...params})
$('#enterPassword_input').value = '';

toggle($('#modal'), name !== '');
Expand All @@ -303,6 +329,8 @@ class View {
toggleLottie(lottie, name === popup);
}
});

this.currentPopupName = name;
}

isPopupVisible(name) {
Expand Down Expand Up @@ -354,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) {
Expand Down Expand Up @@ -382,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) => {
Expand Down Expand Up @@ -469,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');
}
}
Expand Down Expand Up @@ -619,19 +657,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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -795,7 +830,7 @@ class View {
case 'created':
break;
case 'import':
this.clearImportWords();
this.clearImportWords(params.words);
$('#importInput0').focus();
break;
case 'backup':
Expand All @@ -820,7 +855,7 @@ class View {
break;

case 'showPopup':
this.showPopup(params.name);
this.showPopup(params.name, params);

switch (params.name) {
case 'changePassword':
Expand All @@ -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;
Expand All @@ -863,6 +903,25 @@ 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;
case 'receive':
toggle($('#receive_showAddressOnDeviceBtn'), !!this.isLedger);
break;
}
break;

Expand Down
4 changes: 2 additions & 2 deletions src/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down