From 7bb2b0fe7274559cda1ed16e78516110d6ea7cc6 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 18 Apr 2022 19:54:17 +0200
Subject: [PATCH] pinia: Update some components to use botStore

---
 src/components/ftbot/Balance.vue    | 40 ++++++++++----------
 src/components/ftbot/BotStatus.vue  | 58 +++++++++++++++--------------
 src/components/layout/NavFooter.vue | 40 ++++++++++++++------
 3 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/src/components/ftbot/Balance.vue b/src/components/ftbot/Balance.vue
index 79bb4873..36e72d91 100644
--- a/src/components/ftbot/Balance.vue
+++ b/src/components/ftbot/Balance.vue
@@ -2,7 +2,9 @@
   <div>
     <div class="mb-2">
       <label class="mr-auto h3">Balance</label>
-      <b-button class="float-right" size="sm" @click="getBalance">&#x21bb;</b-button>
+      <b-button class="float-right" size="sm" @click="botStore.activeBot.getBalance"
+        >&#x21bb;</b-button
+      >
       <b-form-checkbox
         v-model="hideSmallBalances"
         class="float-right"
@@ -16,20 +18,20 @@
     </div>
     <BalanceChart v-if="balanceCurrencies" :currencies="balanceCurrencies" />
     <div>
-      <p v-if="balance.note">
-        <strong>{{ balance.note }}</strong>
+      <p v-if="botStore.activeBot.balance.note">
+        <strong>{{ botStore.activeBot.balance.note }}</strong>
       </p>
       <b-table class="table-sm" :items="balanceCurrencies" :fields="tableFields">
         <template slot="bottom-row">
           <td><strong>Total</strong></td>
           <td>
             <span class="font-italic" title="Increase over initial capital">{{
-              formatPercent(balance.starting_capital_ratio)
+              formatPercent(botStore.activeBot.balance.starting_capital_ratio)
             }}</span>
           </td>
           <!-- this is a computed prop that adds up all the expenses in the visible rows -->
           <td>
-            <strong>{{ formatCurrency(balance.total) }}</strong>
+            <strong>{{ formatCurrency(botStore.activeBot.balance.total) }}</strong>
           </td>
         </template>
       </b-table>
@@ -41,40 +43,40 @@
 import HideIcon from 'vue-material-design-icons/EyeOff.vue';
 import ShowIcon from 'vue-material-design-icons/Eye.vue';
 import BalanceChart from '@/components/charts/BalanceChart.vue';
-import { BotStoreGetters } from '@/store/modules/ftbot';
-import StoreModules from '@/store/storeSubModules';
 import { formatPercent } from '@/shared/formatters';
 import { defineComponent, computed, ref } from '@vue/composition-api';
-import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'Balance',
   components: { HideIcon, ShowIcon, BalanceChart },
   setup() {
-    const { balance, stakeCurrencyDecimals } = useNamespacedGetters(StoreModules.ftbot, [
-      BotStoreGetters.balance,
-      BotStoreGetters.stakeCurrencyDecimals,
-    ]);
-    const { getBalance } = useNamespacedActions(StoreModules.ftbot, ['getBalance']);
+    const botStore = useBotStore();
     const hideSmallBalances = ref(true);
 
     const smallBalance = computed((): number => {
-      return Number((0.1 ** stakeCurrencyDecimals.value).toFixed(8));
+      return Number((0.1 ** botStore.activeBot.stakeCurrencyDecimals).toFixed(8));
     });
 
     const balanceCurrencies = computed(() => {
       if (!hideSmallBalances.value) {
-        return balance.value.currencies;
+        return botStore.activeBot.balance.currencies;
       }
 
-      return balance.value?.currencies?.filter((v) => v.est_stake >= smallBalance.value);
+      return botStore.activeBot.balance.currencies?.filter(
+        (v) => v.est_stake >= smallBalance.value,
+      );
     });
 
     const tableFields = computed(() => {
       return [
         { key: 'currency', label: 'Currency' },
         { key: 'free', label: 'Available', formatter: 'formatCurrency' },
-        { key: 'est_stake', label: `in ${balance.value.stake}`, formatter: 'formatCurrency' },
+        {
+          key: 'est_stake',
+          label: `in ${botStore.activeBot.balance.stake}`,
+          formatter: 'formatCurrency',
+        },
       ];
     });
 
@@ -83,10 +85,8 @@ export default defineComponent({
     };
 
     return {
-      balance,
-      stakeCurrencyDecimals,
+      botStore,
       hideSmallBalances,
-      getBalance,
       formatPercent,
       smallBalance,
       balanceCurrencies,
diff --git a/src/components/ftbot/BotStatus.vue b/src/components/ftbot/BotStatus.vue
index bd00e8b0..15e2bc19 100644
--- a/src/components/ftbot/BotStatus.vue
+++ b/src/components/ftbot/BotStatus.vue
@@ -1,67 +1,71 @@
 <template>
-  <div v-if="botState">
+  <div v-if="botStore.activeBot.botState">
     <p>
-      Running Freqtrade <strong>{{ version }}</strong>
+      Running Freqtrade <strong>{{ botStore.activeBot.version }}</strong>
     </p>
     <p>
       Running with
       <strong>
-        {{ botState.max_open_trades }}x{{ botState.stake_amount }} {{ botState.stake_currency }}
+        {{ botStore.activeBot.botState.max_open_trades }}x{{
+          botStore.activeBot.botState.stake_amount
+        }}
+        {{ botStore.activeBot.botState.stake_currency }}
       </strong>
       on
-      <strong>{{ botState.exchange }}</strong> in
-      <strong>{{ botState.trading_mode || 'spot' }}</strong> markets, with Strategy
-      <strong>{{ botState.strategy }}</strong>
+      <strong>{{ botStore.activeBot.botState.exchange }}</strong> in
+      <strong>{{ botStore.activeBot.botState.trading_mode || 'spot' }}</strong> markets, with
+      Strategy
+      <strong>{{ botStore.activeBot.botState.strategy }}</strong>
     </p>
     <p>
-      Currently <strong>{{ botState.state }}</strong
+      Currently <strong>{{ botStore.activeBot.botState.state }}</strong
       >,
-      <strong>force entry: {{ botState.force_entry_enable || botState.forcebuy_enabled }}</strong>
+      <strong
+        >force entry:
+        {{ botStore.activeBot.botState.force_entry_enable || botState.forcebuy_enabled }}</strong
+      >
     </p>
     <p>
-      <strong>{{ botState.dry_run ? 'Dry-Run' : 'Live' }}</strong>
+      <strong>{{ botStore.activeBot.botState.dry_run ? 'Dry-Run' : 'Live' }}</strong>
     </p>
     <hr />
     <p>
-      Avg Profit {{ formatPercent(profit.profit_all_ratio_mean) }} (&sum;
-      {{ formatPercent(profit.profit_all_ratio_sum) }}) in {{ profit.trade_count }} Trades, with an
-      average duration of {{ profit.avg_duration }}. Best pair: {{ profit.best_pair }}.
+      Avg Profit {{ formatPercent(botStore.activeBot.profit.profit_all_ratio_mean) }} (&sum;
+      {{ formatPercent(botStore.activeBot.profit.profit_all_ratio_sum) }}) in
+      {{ botStore.activeBot.profit.trade_count }} Trades, with an average duration of
+      {{ botStore.activeBot.profit.avg_duration }}. Best pair:
+      {{ botStore.activeBot.profit.best_pair }}.
     </p>
-    <p v-if="profit.first_trade_timestamp">
+    <p v-if="botStore.activeBot.profit.first_trade_timestamp">
       First trade opened:
 
-      <strong><DateTimeTZ :date="profit.first_trade_timestamp" show-timezone /></strong>
+      <strong
+        ><DateTimeTZ :date="botStore.activeBot.profit.first_trade_timestamp" show-timezone
+      /></strong>
       <br />
       Last trade opened:
-      <strong><DateTimeTZ :date="profit.latest_trade_timestamp" show-timezone /></strong>
+      <strong
+        ><DateTimeTZ :date="botStore.activeBot.profit.latest_trade_timestamp" show-timezone
+      /></strong>
     </p>
   </div>
 </template>
 
 <script lang="ts">
-import { BotStoreGetters } from '@/store/modules/ftbot';
-
 import { formatPercent } from '@/shared/formatters';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
-import StoreModules from '@/store/storeSubModules';
 
 import { defineComponent } from '@vue/composition-api';
-import { useNamespacedGetters } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'BotStatus',
   components: { DateTimeTZ },
   setup() {
-    const { version, profit, botState } = useNamespacedGetters(StoreModules.ftbot, [
-      BotStoreGetters.version,
-      BotStoreGetters.profit,
-      BotStoreGetters.botState,
-    ]);
+    const botStore = useBotStore();
     return {
-      version,
-      profit,
-      botState,
       formatPercent,
+      botStore,
     };
   },
 });
diff --git a/src/components/layout/NavFooter.vue b/src/components/layout/NavFooter.vue
index d1706b72..6bebc624 100644
--- a/src/components/layout/NavFooter.vue
+++ b/src/components/layout/NavFooter.vue
@@ -3,23 +3,43 @@
     <!-- Only visible on xs (phone) viewport! -->
     <hr class="my-0" />
     <div class="d-flex flex-align-center justify-content-center">
-      <router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/open_trades">
+      <router-link
+        v-if="!botStore.activeBot.canRunBacktest"
+        class="nav-link navbar-nav"
+        to="/open_trades"
+      >
         <OpenTradesIcon />
         Trades
       </router-link>
-      <router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/trade_history">
+      <router-link
+        v-if="!botStore.activeBot.canRunBacktest"
+        class="nav-link navbar-nav"
+        to="/trade_history"
+      >
         <ClosedTradesIcon />
         History
       </router-link>
-      <router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/pairlist">
+      <router-link
+        v-if="!botStore.activeBot.canRunBacktest"
+        class="nav-link navbar-nav"
+        to="/pairlist"
+      >
         <PairListIcon />
         Pairlist
       </router-link>
-      <router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/balance">
+      <router-link
+        v-if="!botStore.activeBot.canRunBacktest"
+        class="nav-link navbar-nav"
+        to="/balance"
+      >
         <BalanceIcon />
         Balance
       </router-link>
-      <router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/dashboard">
+      <router-link
+        v-if="!botStore.activeBot.canRunBacktest"
+        class="nav-link navbar-nav"
+        to="/dashboard"
+      >
         <DashboardIcon />
         Dashboard
       </router-link>
@@ -28,25 +48,21 @@
 </template>
 
 <script lang="ts">
-import { BotStoreGetters } from '@/store/modules/ftbot';
 import OpenTradesIcon from 'vue-material-design-icons/FolderOpen.vue';
 import ClosedTradesIcon from 'vue-material-design-icons/FolderLock.vue';
 import BalanceIcon from 'vue-material-design-icons/Bank.vue';
 import PairListIcon from 'vue-material-design-icons/ViewList.vue';
 import DashboardIcon from 'vue-material-design-icons/ViewDashboardOutline.vue';
-import StoreModules from '@/store/storeSubModules';
 import { defineComponent } from '@vue/composition-api';
-import { useNamespacedGetters } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'NavFooter',
   components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon },
   setup() {
-    const { canRunBacktest } = useNamespacedGetters(StoreModules.ftbot, [
-      BotStoreGetters.canRunBacktest,
-    ]);
+    const botStore = useBotStore();
     return {
-      canRunBacktest,
+      botStore,
     };
   },
 });