Show stake amount in trade detail

src/components/ftbot/TradeDetail.vue

@@ -5,6 +5,9 @@
         <h5 class="detail-header">General</h5>
         <ValuePair description="TradeId">{{ trade.trade_id }}</ValuePair>
         <ValuePair description="Pair">{{ trade.pair }}</ValuePair>
+        <ValuePair description="Stake">{{
+          formatPriceCurrency(trade.stake_amount, stakeCurrency)
+        }}</ValuePair>
         <ValuePair description="Open date">{{ timestampms(trade.open_timestamp) }}</ValuePair>
         <ValuePair v-if="trade.buy_tag" description="Buy tag">{{ trade.buy_tag }}</ValuePair>
         <ValuePair description="Open Rate">{{ formatPrice(trade.open_rate) }}</ValuePair>
@@ -57,7 +60,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
-import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
+import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
 import ValuePair from '@/components/general/ValuePair.vue';
 import { Trade } from '@/types';
 
@@ -67,11 +70,15 @@ import { Trade } from '@/types';
 export default class TradeDetail extends Vue {
   @Prop({ type: Object, required: true }) trade!: Trade;
 
+  @Prop({ type: String, required: true }) stakeCurrency!: string;
+
   timestampms = timestampms;
 
   formatPercent = formatPercent;
 
   formatPrice = formatPrice;
+
+  formatPriceCurrency = formatPriceCurrency;
 }
 </script>
 <style scoped>

src/store/modules/ftbot/index.ts

@@ -76,6 +76,7 @@ export enum BotStoreGetters {
   selectedBacktestResult = 'selectedBacktestResult',
   canRunBacktest = 'canRunBacktest',
   stakeCurrencyDecimals = 'stakeCurrencyDecimals',
+  stakeCurrency = 'stakeCurrency',
   strategyPlotConfig = 'strategyPlotConfig',
   version = 'version',
   botApiVersion = 'botApiVersion',
@@ -251,6 +252,9 @@ export function createBotSubStore(botId: string, botName: string) {
       [BotStoreGetters.stakeCurrencyDecimals](state: FtbotStateType): number {
         return state.botState?.stake_currency_decimals || 3;
       },
+      [BotStoreGetters.stakeCurrency](state: FtbotStateType): string {
+        return state.botState?.stake_currency || '';
+      },
       [BotStoreGetters.strategyPlotConfig](state: FtbotStateType): PlotConfig | undefined {
         return state.strategyPlotConfig;
       },

src/views/Trading.vue

@@ -100,7 +100,7 @@
       drag-allow-from=".card-header"
     >
       <DraggableContainer header="Trade Detail">
-        <TradeDetail :trade="tradeDetail"> </TradeDetail>
+        <TradeDetail :trade="tradeDetail" :stake-currency="stakeCurrency" />
       </DraggableContainer>
     </GridItem>
     <GridItem
@@ -187,6 +187,8 @@ export default class Trading extends Vue {
 
   @ftbot.Getter [BotStoreGetters.whitelist]!: string[];
 
+  @ftbot.Getter [BotStoreGetters.stakeCurrency]!: string;
+
   @layoutNs.Getter [LayoutGetters.getTradingLayout]!: GridItemData[];
 
   @layoutNs.Getter [LayoutGetters.getTradingLayoutSm]!: GridItemData[];