Convert Balance to typescript

src/components/ftbot/Balance.vue

@@ -22,29 +22,33 @@
   </div>
 </template>
 
-<script>
-import { mapActions, mapState } from 'vuex';
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import { BalanceInterface } from '@/store/types';
+
+const ftbot = namespace('ftbot');
+
+@Component({})
+export default class Balance extends Vue {
+  @ftbot.Action getBalance;
+
+  @ftbot.State balance!: BalanceInterface;
+
+  get tableFields() {
+    return [
+      { key: 'currency', label: 'Currency' },
+      { key: 'free', label: 'Available', formatter: 'formatCurrency' },
+      { key: 'est_stake', label: `in ${this.balance.stake}`, formatter: 'formatCurrency' },
+    ];
+  }
 
-export default {
-  name: 'Balance',
-  computed: {
-    ...mapState('ftbot', ['balance']),
-    tableFields() {
-      return [
-        { key: 'currency', label: 'Currency' },
-        { key: 'free', label: 'Available', formatter: 'formatCurrency' },
-        { key: 'est_stake', label: `in ${this.balance.stake}`, formatter: 'formatCurrency' },
-      ];
-    },
-  },
-  methods: {
-    ...mapActions('ftbot', ['getBalance']),
-    formatCurrency(value) {
-      return value ? value.toFixed(5) : '';
-    },
-  },
   mounted() {
     this.getBalance();
-  },
-};
+  }
+
+  formatCurrency(value) {
+    return value ? value.toFixed(5) : '';
+  }
+}
 </script>

src/components/ftbot/TradeDetail.vue

@@ -31,7 +31,7 @@
   </b-card>
 </template>
 
-<script>
+<script lang="ts">
 import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
 import ValuePair from '@/components/ftbot/ValuePair.vue';
 

src/components/ftbot/ValuePair.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'ValuePair',
   props: {

src/store/types.ts

@@ -18,6 +18,28 @@ export interface PerformanceEntry {
   profit: number;
 }
 
+export interface BalanceRecords {
+  balance: number;
+  currency: string;
+  est_stake: number;
+  free: number;
+  used: number;
+  stake: string;
+}
+
+export interface BalanceInterface {
+  currencies: Array<BalanceRecords>;
+  note: string;
+  /** Stake currency used */
+  stake: string;
+  /** Fiat symbol used */
+  symbol: string;
+  /** Total Balance in stake currency */
+  total: number;
+  /** Balance in FIAT currency */
+  value: number;
+}
+
 export interface BotState {
   bid_strategy: object;
   ask_strategy: object;