Add profit pill

src/components/ftbot/PairSummary.vue

@@ -14,7 +14,7 @@
         {{ comb.pair }}
         <span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span>
       </div>
-      <TradeProfit :trade="comb.trade" />
+      <TradeProfit v-if="comb.trade" :trade="comb.trade" />
     </b-list-group-item>
   </b-list-group>
 </template>

src/components/ftbot/TradeProfit.vue

@@ -1,22 +1,19 @@
 <template>
-  <div
-    class="profit-pill px-2"
-    :class="trade.profit_ratio > 0 ? 'profit-pill-profit' : ''"
-    :title="profitDesc"
-  >
-    {{ formatPercent(trade.profit_ratio, 2) }}
-    <small :title="trade.stake_currency || stakeCurrency">
-      {{ `(${formatPrice(trade.profit_abs, 3)})` }}
-    </small>
-  </div>
+  <profit-pill
+    :profit-ratio="trade.profit_ratio"
+    :profit-abs="trade.profit_abs"
+    :profit-desc="profitDesc"
+    stake-currency="USDT"
+  />
 </template>
 
 <script lang="ts">
-import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
+import { formatPercent, timestampms } from '@/shared/formatters';
 import { Trade } from '@/types';
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import ProfitPill from '@/components/general/ProfitPill.vue';
 
-@Component({})
+@Component({ components: { ProfitPill } })
 export default class TradeProfit extends Vue {
   @Prop({ required: true, type: Object }) trade!: Trade;
 
@@ -24,8 +21,6 @@ export default class TradeProfit extends Vue {
 
   timestampms = timestampms;
 
-  formatPrice = formatPrice;
-
   get profitDesc(): string {
     let profit = `Current profit: ${formatPercent(this.trade.profit_ratio)} (${
       this.trade.profit_abs
@@ -36,12 +31,4 @@ export default class TradeProfit extends Vue {
 }
 </script>
 
-<style scoped lang="scss">
-.profit-pill {
-  background: #ef5350;
-  border-radius: 6px;
-}
-.profit-pill-profit {
-  background: #26a69a;
-}
-</style>
+<style scoped></style>

src/components/general/ProfitPill.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="profit-pill px-2"
+    :class="profitRatio > 0 ? 'profit-pill-profit' : ''"
+    :title="profitDesc"
+  >
+    {{ formatPercent(profitRatio, 2) }}
+    <small :title="stakeCurrency">
+      {{ `(${formatPrice(profitAbs, 3)} ${stakeCurrency})` }}
+    </small>
+  </div>
+</template>
+
+<script lang="ts">
+import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class ProfitPill extends Vue {
+  @Prop({ required: true, type: Number }) profitRatio!: number;
+
+  @Prop({ required: true, type: Number }) profitAbs!: number;
+
+  @Prop({ required: true, type: String }) stakeCurrency!: string;
+
+  @Prop({ required: true, type: String }) profitDesc!: string;
+
+  formatPercent = formatPercent;
+
+  timestampms = timestampms;
+
+  formatPrice = formatPrice;
+}
+</script>
+
+<style scoped lang="scss">
+.profit-pill {
+  background: #ef5350;
+  border-radius: 6px;
+}
+.profit-pill-profit {
+  background: #12bb7b;
+}
+</style>