[WIP] V2 Dashboard

.eslintrc.js

@@ -17,6 +17,37 @@ module.exports = {
     'dot-notation': ['error', { allowPattern: '^[a-zA-Z0-9]+(_[a-zA-Z0-9]+)+$' }],
     semi: ['error', 'always'],
     'import/no-unresolved': 'off',
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+        jsx: 'never',
+        mjs: 'neve',
+      },
+    ],
+    'max-len': [
+      'error', {
+        ignorePattern: 'd="([\\s\\S]*?)"', // for svg
+        ignoreTemplateLiterals: true,
+        ignoreStrings: true,
+        ignoreComments: true,
+        code: 110,
+      },
+    ],
+    'vue/max-len': [
+      'error', {
+        ignoreTemplateLiterals: true,
+        ignoreStrings: true,
+        ignoreHTMLAttributeValues: true,
+        ignoreHTMLTextContents: true,
+        ignoreComments: true,
+        code: 110,
+        template: 110,
+        comments: 110,
+      },
+    ],
+    'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
     'no-console': 0,
     'no-param-reassign': [
       'error',

.nvmrc

@@ -0,0 +1 @@
+14.15.4

Procfile

@@ -0,0 +1,2 @@
+web:     npx nuxt start
+worker:  npm run fetch

README.md

@@ -1,5 +1,11 @@
 # delphi-thorchain
 
+## Install node version manager
+Install instructions at https://github.com/nvm-sh/nvm, then:
+```bash
+$ nvm install && nvm use
+```
+
 ## Build Setup
 
 ```bash
@@ -20,26 +26,52 @@ brew services start redis
 $ yarn fetch
 
 # or do it manually
-$ DATA_SOURCE=api node scripts/saveApiResponses.mjs
+$ node scripts/saveApiResponses.mjs
 ```
 
 ### Run the app
 
 ```bash
 # serve with hot reload at localhost:3021
 $ yarn develop
-
-# or manually
-$ DATA_SOURCE=cache PORT=3021 yarn dev
 ```
 
 ### Environment variables
 - PORT: port to run the app on.
-- DATA_SOURCE: where to get data from (either "api" to request real sources or "cache" to use data stored in Redis).
-- CACHE_URL: url to query cached data from, defaults to 'http://localhost:3021'.
-- TESTNET_NODE_IP: node ip to be used for testnet api queries, defaults to '168.119.21.60'.
+- APP_URL: url to query cached data from, defaults to 'http://localhost:3021'.
+- TESTNET_NODE_IP: node ip to be used for testnet api queries, defaults to '18.193.249.209' (from https://testnet.seed.thorchain.info/ or https://testnet.midgard.thorchain.info/v2/network).
 - CHAOSNET_NODE_IP: node ip to be used for chaosnet api queries, defaults to ' '18.159.173.48'.
 - SENDGRID_API_KEY: Sendgrid's API key used to send error notification emails.
 - NOTIFICATION_MINUTE_TIME_INTERVAL: interval in minutes between notification emails (30 minutes by default). 
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+
+
+### Heroku
+
+Use heroku cli:
+```
+heroku git:remote -a thorchain-v2-dashboard
+```
+
+Validate or edit ~/.git/config to verify that the remote heroku points to the correct instance:
+```
+[remote "heroku"]
+	url = https://git.heroku.com/thorchain-v2-dashboard.git
+	fetch = +refs/heads/*:refs/remotes/heroku/*
+```
+
+Then scale the worker and web:
+```
+heroku ps:scale web=1 worker=1
+```
+
+Then push-deploy the branch to heroku app
+```
+git push heroku rod/v2-dashboard:master
+```
+
+For logs:
+```
+heroku logs --tail   
+```

api/index.js

@@ -1,82 +1,101 @@
 import express from 'express';
-import { promisify } from 'util';
 import redisClient from '../lib/redisClient.mjs';
 
-const client = redisClient;
-const getAsync = promisify(client.get).bind(client);
-
 const app = express();
 const thorchain = express.Router();
 const chaosnet = express.Router();
 const testnet = express.Router();
 
+app.use(function(_req, res, next) {
+  res.header("Access-Control-Allow-Origin", '*');
+  res.header("Access-Control-Allow-Credentials", true);
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
+  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
+  next();
+});
+
 async function loadCached(id) {
-  const rawdata = await getAsync(`thorchain::${id}`);
+  const rawdata = await redisClient.getAsync(`thorchain::${id}`);
   return JSON.parse(rawdata);
 }
 
-thorchain.all('/thorchain/pools', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::pools`);
-  res.json(data);
-});
-
-thorchain.all('/v1/pools/detail', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::pools-${req.query.asset}`);
-  res.json(data);
-});
-
-thorchain.all('/v1/stats', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::stats`);
-  res.json(data);
-});
-
-thorchain.all('/v1/network', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::network`);
-  res.json(data);
-});
-
-thorchain.all('/v1/thorchain/constants', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::constants`);
-  res.json(data);
-});
-
-thorchain.all('/thorchain/nodeaccounts', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::nodeAccounts`);
-  res.json(data);
-});
-
-thorchain.all('/thorchain/mimir', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::mimir`);
-  res.json(data);
-});
-
-thorchain.all('/thorchain/lastblock', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::lastBlock`);
-  res.json(data);
-});
-
-thorchain.all('/thorchain/vaults/asgard', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::asgardVaults`);
-  res.json(data);
-});
-
-thorchain.all('/int/marketdata', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::marketData`);
-  res.json(data);
-});
-
-thorchain.all('/int/runevaultBalance', async (req, res) => {
-  const data = await loadCached(`${req.blockchain}::runevaultBalance`);
-  res.json(data);
-});
-
-thorchain.all('/int/extra', async (req, res) => {
-  const version = await loadCached(`${req.blockchain}::version`);
-  const binanceAccounts = await loadCached(`${req.blockchain}::binanceAccounts`);
-
+thorchain.all('/overview', async (req, res) => {
+  const pools = await loadCached(`${req.blockchain}::pools`);
+  // NOTE: provide by default all available pools info in advance
+  const poolIds = pools.filter(i => (i.status || '').toLowerCase() === 'available').map(i => i.asset);
+  const poolsPromises = poolIds.map((poolId) => (
+    new Promise((res, rej) => (
+      loadCached(`${req.blockchain}::pools-${poolId}`).then(poolStats => res({
+        poolId, poolStats
+      })).catch(rej)
+    ))
+  ));
+  const payloadPromises = [
+    loadCached(`${req.blockchain}::queue`),
+    loadCached(`${req.blockchain}::nodeAccounts`),
+    loadCached(`${req.blockchain}::lastBlock`),
+    loadCached(`${req.blockchain}::mimir`),
+    loadCached(`${req.blockchain}::asgardVaults`),
+    loadCached(`${req.blockchain}::network`),
+    loadCached(`${req.blockchain}::marketData`),
+    loadCached(`${req.blockchain}::constants`),
+    loadCached(`${req.blockchain}::runevaultBalance`),
+    loadCached(`${req.blockchain}::v1SinglechainStats`),
+    loadCached(`${req.blockchain}::v1SinglechainNetwork`),
+    loadCached(`${req.blockchain}::taPeriods`),
+    loadCached(`${req.blockchain}::version`),
+    loadCached(`${req.blockchain}::binanceAccounts`),
+    loadCached(`${req.blockchain}::stats`),
+    loadCached(`${req.blockchain}::poolHistoryDepths`),
+    loadCached(`${req.blockchain}::poolHistorySwaps`),
+    loadCached(`${req.blockchain}::allPoolsHistoryEarnings`),
+    loadCached(`${req.blockchain}::chainBalances`),
+    ...poolsPromises,
+  ];
+  const [
+    queue,
+    nodes,
+    lastBlock,
+    mimir,
+    asgardVaults,
+    network,
+    market,
+    constants,
+    runevaultBalance,
+    v1SinglechainStats,
+    v1SinglechainNetwork,
+    taPeriods,
+    version,
+    binanceAccounts,
+    stats,
+    availablePoolHistoryDepths,
+    availablePoolHistorySwaps,
+    allPoolsHistoryEarnings,
+    chainBalances,
+    ...availablePoolStats
+  ] = await Promise.all(payloadPromises);
   res.json({
+    queue: queue || {},
+    pools: pools || [],
+    stats,
+    nodes,
+    lastBlock,
+    mimir,
+    asgardVaults,
+    network,
+    market,
+    constants,
+    runevaultBalance,
     version,
     binanceAccounts,
+    availablePoolStats,
+    availablePoolHistoryDepths,
+    availablePoolHistorySwaps,
+    taPeriods,
+    allPoolsHistoryEarnings,
+    v1SinglechainStats,
+    v1SinglechainNetwork,
+    chainBalances,
   });
 });
 

assets/css/global.scss

@@ -20,3 +20,76 @@ $pureg-sm: 35.5em;
 $pureg-md: 48em;
 $pureg-lg: 64em;
 $pureg-xl: 80em;
+
+$namespace: 'customdatepkr';
+$default-color: #ccc !default;
+$primary-color: #9993f0 !default;
+$today-color: mix(#353c50, $primary-color, 10%) !default;
+$popup-z-index: 2001 !default;
+$input-border-color: #ccc !default;
+$input-color: #555 !default;
+$input-hover-border-color: rgba(120,124,170,0.95) !default;
+$disabled-color: #ccc !default;
+$disabled-background-color: #f3f3f3 !default;
+$border-color: rgba(112, 115, 150, 0.65) !default;
+$calendar-active-color: #fff !default;
+$calendar-active-background-color: $primary-color !default;
+$calendar-hover-color: $default-color !default;
+$calendar-hover-background-color: rgba(137, 140, 177, 0.7) !default;
+$calendar-in-range-color: $default-color !default;
+$calendar-in-range-background-color: mix(rgb(112, 115, 150), $calendar-active-background-color, 85%) !default;
+$time-active-color: $primary-color !default;
+$time-active-background-color: transparent !default;
+$time-hover-color: $default-color !default;
+$time-hover-background-color: mix(rgb(112, 115, 150), $calendar-active-background-color, 95%) !default;
+$input-border-radius: 4px !default;
+$sidebar-margin-left: 100px !default;
+
+@import '~vue2-datepicker/scss/index.scss';
+.customdatepkr-datepicker-main {
+    background-color: #30354b !important;
+}
+.customdatepkr-input {
+    background-color: #262f4a;
+    font-family: Montserrat, sans-serif;
+    border: 1px solid rgba(112, 115, 150, 0.65);
+    padding: 4px 8px 4px 25px;
+    border-radius: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+    caret-color: white;
+    line-height: 20px;
+    height: 38px;
+    width: 100%;
+
+    :focus {
+        outline:none;
+        border:1px solid rgba(120,124,170,0.95);
+    }
+}
+.customdatepkr-icon-calendar,
+.customdatepkr-icon-clear {
+    color: rgba(255, 255, 255, 0.8);
+}
+.customdatepkr-datepicker {
+    width: 100%;
+}
+.deeplink-selector, .tweet__link {
+    color: white;
+    height: 30px;
+    background-color: $color-bg-tint;
+    border-radius: 15px;
+    padding: 0 16px;
+    cursor: pointer;
+    opacity: 0.6;
+    display: flex;
+    align-items: center; 
+    &:active {
+      color: white;
+    }
+    margin-right: 8px;
+    &:last-child {
+        margin-right: 0;
+    }
+}

components/Common/AppHighchart.vue

@@ -30,15 +30,17 @@ export default {
         // stuff properly and fails if called at the wrong time. Just retrying the update
         // seems to work just fine. Not worth it to dig deeper into the issue for now.
         try {
-          this.chart.update(newData);
+          if (this.chart) {
+            this.chart.update(newData);
+          }
         } catch (e) {
-          this.chart.update(newData);
+          console.error(e);
         }
       }
     },
   },
   mounted() {
-    if (typeof window === 'object') {
+    if (typeof Highcharts === 'object' && typeof window === 'object') {
       this.chart = Highcharts.chart(this.$refs.chart, this.chartOptions);
       this.updatedAt = new Date();
     }

components/Common/BlockchainToggle.vue

@@ -33,8 +33,8 @@ export default {
   },
   methods: {
     toggleBlockchain() {
-      const blockchain = this.$route.params.blockchain === 'chaosnet' ? 'testnet' : 'chaosnet';
-      const name = this.$route.name;
+      const { name, params } = this.$route;
+      const blockchain = params.blockchain === 'chaosnet' ? 'testnet' : 'chaosnet';
       this.$store.commit('thorchain/loadingOn');
       this.$router.push({ name, params: { blockchain } });
     },