Working load more & CSV export, version bump for deploy

imports/startup/both/index.js

@@ -5,7 +5,7 @@ import { rawAddressToB32Address, rawAddressToHexAddress, b32AddressToRawAddress
 export const SHOR_PER_QUANTA = 1000000000
 
 // Explorer Version
-export const EXPLORER_VERSION = '1.3.0'
+export const EXPLORER_VERSION = '1.4.0'
 
 // Function to cleanly represent large decimal numbers without exponential formatting.
 export function numberToString(num) {

imports/ui/components/richlist/richlist.html

@@ -29,6 +29,12 @@ <h4 class="ui pageHeader header">
         {{/each}}
       </tbody>
     </table>
+    {{#if richlistButtonLoading}}
+    <button class="ui small loading button" id="fetchMore">Loading</button>
+    {{else}}
+    <button class="ui small button" id="fetchMore">Fetch more</button>
+    {{/if}}
+    <button class="ui small right floated button" id="csvExport">Full .csv export</button>
   {{/if}}
   {{#if richlistError}}
     <div class="ui negative message">

imports/ui/components/richlist/richlist.js

@@ -16,14 +16,14 @@ Template.richlist.onCreated(() => {
     }
     Session.set('network', 'Testnet')
   })
-  fetch('https://richlist-api.theqrl.org/richlist').then((response) => {
+  fetch('https://richlist-api.theqrl.org/richlist?page=0').then((response) => {
     if (response.status !== 200) {
       Session.set('richlist', 'error')
       Session.set('richlistError', true)
       return
     }
     response.json().then((data) => {
-      Session.set('richlist', 'loaded')
+      Session.set('richlist', 0)
       Session.set('richlistError', false)
       Session.set('richlistData', data)
     })
@@ -43,6 +43,12 @@ Template.richlist.helpers({
     }
     return false
   },
+  richlistButtonLoading() {
+    if (Session.get('richlistButton') === 'loading') {
+      return true
+    }
+    return false
+  },
   richlistError() {
     if (Session.get('richlistError')) {
       return true
@@ -60,3 +66,29 @@ Template.richlist.helpers({
     return s.dividedBy(SHOR_PER_QUANTA).toString()
   },
 })
+
+Template.richlist.events({
+  'click #fetchMore': () => {
+    let page = Session.get('richlist')
+    page += 1
+    Session.set('richlistButton', 'loading')
+    fetch(`https://richlist-api.theqrl.org/richlist?page=${page}`).then((response) => {
+      if (response.status !== 200) {
+        Session.set('richlist', 'error')
+        Session.set('richlistError', true)
+        return
+      }
+      response.json().then((data) => {
+        Session.set('richlistButton', 'loaded')
+        Session.set('richlist', page)
+        Session.set('richlistError', false)
+        const richlistData = Session.get('richlistData')
+        richlistData.push(...data)
+        Session.set('richlistData', richlistData)
+      })
+    })
+  },
+  'click #csvExport': () => {
+    window.location.href = 'https://richlist-api.theqrl.org/richlist?csv=1'
+  },
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "block-explorer",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "QRL block explorer",
   "main": "index.js",
   "dependencies": {