From 5fdad10b836ce6553ce9710f2e305ba3bc9794a2 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 14 May 2020 07:15:18 +0200
Subject: [PATCH] Add balance view

---
 src/ftbot/Balance.vue      | 38 ++++++++++++++++++++++++++++++++++++++
 src/ftbot/TradeView.vue    |  6 +++++-
 src/store/index.js         |  1 +
 src/store/modules/ftbot.js | 11 +++++++++++
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/ftbot/Balance.vue

diff --git a/src/ftbot/Balance.vue b/src/ftbot/Balance.vue
new file mode 100644
index 00000000..aa5452a7
--- /dev/null
+++ b/src/ftbot/Balance.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="card">
+    <div class="card-header">Balance</div>
+    <div class="card-body">
+      <b-table class="table-sm" :items="balance.currencies" :fields="table_fields">
+        <template slot="bottom-row">
+          <td>Total</td>
+          <td></td>
+          <!-- this is a computed prop that adds up all the expenses in the visible rows -->
+          <td>{{ formatCurrency(balance.total) }}</td>
+        </template>
+      </b-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Balance',
+  computed: {
+    ...mapState('ftbot', ['balance']),
+    table_fields() {
+      return [
+        { key: 'currency', label: 'Currency' },
+        { key: 'free', label: 'Available', formatter: 'formatCurrency' },
+        { key: 'est_stake', label: `in ${this.balance.stake}`, formatter: 'formatCurrency' },
+      ];
+    },
+  },
+  methods: {
+    formatCurrency(value) {
+      return value.toFixed(5);
+    },
+  },
+};
+</script>
diff --git a/src/ftbot/TradeView.vue b/src/ftbot/TradeView.vue
index 17ae0ce3..481c86f6 100644
--- a/src/ftbot/TradeView.vue
+++ b/src/ftbot/TradeView.vue
@@ -32,6 +32,9 @@
                 <b-tab title="Status">
                   <BotStatus />
                 </b-tab>
+                <b-tab title="Balance">
+                  <Balance />
+                </b-tab>
                 <b-tab title="Whitelist"> </b-tab>
               </b-tabs>
             </div>
@@ -49,10 +52,11 @@ import TradeList from './TradeList.vue';
 import Performance from './Performance.vue';
 import BotControls from './BotControls.vue';
 import BotStatus from './BotStatus.vue';
+import Balance from './Balance.vue';
 
 export default {
   name: 'TradeView',
-  components: { TradeList, Performance, BotControls, BotStatus },
+  components: { TradeList, Performance, BotControls, BotStatus, Balance },
   created() {
     this.getTrades();
     this.getProfit();
diff --git a/src/store/index.js b/src/store/index.js
index b808b954..aca6fef4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -41,6 +41,7 @@ export default new Vuex.Store({
       dispatch('ftbot/getWhitelist');
       dispatch('ftbot/getBlacklist');
       dispatch('ftbot/getProfit');
+      dispatch('ftbot/getBalance');
     }
   }
 })
diff --git a/src/store/modules/ftbot.js b/src/store/modules/ftbot.js
index 6b143f4a..e2638fcd 100644
--- a/src/store/modules/ftbot.js
+++ b/src/store/modules/ftbot.js
@@ -13,6 +13,7 @@ export default {
     blacklist: [],
     profit: {},
     botState: {},
+    balance: {}
   },
   getters: {
     apiAuth(state, getters, rootState, rootGetters) {
@@ -46,6 +47,9 @@ export default {
     updateProfit(state, profit) {
       state.profit = profit;
     },
+    updateBalance(state, balance) {
+      state.balance = balance;
+    },
     updateState(state, botState) {
       state.botState = botState;
     },
@@ -93,6 +97,13 @@ export default {
         .then((result) => commit('updateProfit', result.data))
         .catch(console.error);
     },
+    getBalance({ commit, getters }) {
+      return axios.get(`${apiBase}/balance`, {
+        ...getters.apiAuth
+      })
+        .then((result) => commit('updateBalance', result.data))
+        .catch(console.error);
+    },
     getState({ commit, getters, dispatch }) {
       return axios.get(`${apiBase}/show_config`, {
         ...getters.apiAuth