Implement load more txs

src/js/Controller.js

@@ -105,6 +105,7 @@ class Controller {
         /** @type {WalletContract} */
         this.walletContract = null;
         this.transactions = [];
+        this.hasMoreTxs = true;
         this.updateIntervalId = 0;
         this.lastTransactionTime = 0;
         this.isContractInitialized = false;
@@ -181,7 +182,11 @@ class Controller {
         return new BN(getWalletResponse.balance);
     }
 
-    async getTransactions(limit = 20) {
+    async getTransactions(loadMore = false, limit = 20) {
+
+        if (loadMore && !this.hasMoreTxs) {
+            return [];
+        }
 
         function getComment(msg) {
             if (!msg.msg_data) return '';
@@ -191,7 +196,20 @@ class Controller {
         }
 
         const arr = [];
-        const transactions = await this.ton.getTransactions(this.myAddress, limit);
+        let lt, hash;
+
+        if (loadMore) {
+            const lastTransaction = this.transactions[this.transactions.length - 1];
+            lt = lastTransaction.lt;
+            hash = this.ton.utils.bytesToHex(this.ton.utils.base64ToBytes(lastTransaction.hash));
+        }
+
+        const transactions = await this.ton.provider.getTransactions(this.myAddress, limit, lt, hash, undefined, loadMore);
+
+        if (loadMore && transactions.length < limit){
+            this.hasMoreTxs = false;
+        }
+
         for (let t of transactions) {
             let amount = new BN(t.in_msg.value);
             for (let outMsg of t.out_msgs) {
@@ -224,7 +242,9 @@ class Controller {
                     storageFee: t.storage_fee.toString(),
                     otherFee: t.other_fee.toString(),
                     comment: comment,
-                    date: t.utime * 1000
+                    date: t.utime * 1000,
+                    lt: t.transaction_id.lt,
+                    hash: t.transaction_id.hash,
                 });
             }
         }
@@ -503,8 +523,8 @@ class Controller {
             if (isBalanceChanged) {
                 this.getTransactions().then(txs => {
                     if (txs.length > 0) {
-                        this.transactions = txs;
                         const newTxs = txs.filter(tx => Number(tx.date) > this.lastTransactionTime);
+                        this.transactions = [...newTxs, ...this.transactions];
                         this.lastTransactionTime = Number(txs[0].date);
 
                         if (this.processingVisible && this.sendingData) {
@@ -527,7 +547,7 @@ class Controller {
                         }
                     }
 
-                    this.sendToView('setBalance', {balance: balance.toString(), txs});
+                    this.sendToView('setBalance', {balance: balance.toString(),  txs: this.transactions});
                 });
             } else {
                 this.sendToView('setBalance', {balance: balance.toString(), txs: this.transactions});
@@ -855,6 +875,14 @@ class Controller {
                 localStorage.setItem('proxy', params ? 'true' : 'false');
                 this.doProxy(params);
                 break;
+            case 'loadTransactions':
+                this.getTransactions(true).then((txs) => {
+                    if (txs.length) {
+                        this.transactions = [...this.transactions, ...txs];
+                        this.sendToView('setTransactions', {txs: this.transactions});
+                    }
+                })
+                break;
         }
     }
 

src/js/view/View.js

@@ -41,6 +41,8 @@ class View {
         this.currentScreenName = null;
         /** @type   {boolean} */
         this.isTestnet = false;
+        /** @type   {IntersectionObserver} */
+        this.txsListObserver = null;
 
         this.createImportInputs();
 
@@ -559,7 +561,13 @@ class View {
     }
 
     setTransactions(txs) {
-        clearElement($('#transactionsList'));
+        const transactionsList = $('#transactionsList');
+
+        if (this.txsListObserver && transactionsList.lastElementChild) {
+            this.txsListObserver.unobserve(transactionsList.lastElementChild);
+        }
+
+        clearElement(transactionsList);
         let date = '';
 
         toggle($('#walletCreated'), txs.length === 0);
@@ -578,6 +586,7 @@ class View {
             }
             this.addTx(tx)
         });
+        this.observeTransactionsList();
     }
 
     addDateSeparator(dateString) {
@@ -638,6 +647,25 @@ class View {
         this.onMessage('showPopup', {name: 'send', toAddr: this.currentTransactionAddr});
     }
 
+    observeTransactionsList() {
+        if (!this.txsListObserver) {
+            this.txsListObserver = new IntersectionObserver((entries) => {
+                const target = entries[0];
+                if (target.isIntersecting) {
+                    this.sendMessage('loadTransactions');
+                }
+            }, {
+                root: $('#transactionsContainer'),
+                rootMargin: '0px',
+                threshold: 0.5,
+            });
+        }
+        const lastTxElement = $('#transactionsList').lastElementChild;
+        if (lastTxElement) {
+            this.txsListObserver.observe(lastTxElement);
+        }
+    }
+
     // SEND POPUP
 
     clearSend() {
@@ -759,6 +787,10 @@ class View {
                 this.setBalance(new BN(params.balance), params.txs);
                 break;
 
+            case 'setTransactions':
+                this.setTransactions(params.txs);
+                break;
+
             case 'setIsLedger':
                 this.isLedger = params;
                 break;

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.28.js",
+      "libs/tonweb-mnemonic-1.0.0.js",
       "js/Controller.js"
     ],
     "persistent": true