fix: improve form-select disabled dark style

closes #2071

src/components/ftbot/BacktestResultChart.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-import { ChartSliderPosition, Trade } from '@/types';
+import { ChartSliderPosition, StrategyBacktestResult, Trade } from '@/types';
 
-defineProps({
-  timeframe: { required: true, type: String },
-  strategy: { required: true, type: String },
-  freqaiModel: { required: false, default: undefined, type: String },
-  timerange: { required: true, type: String },
-  pairlist: { required: true, type: Array as () => string[] },
-  trades: { required: true, type: Array as () => Trade[] },
-});
+defineProps<{
+  timeframe: string;
+  strategy: string;
+  freqaiModel?: string;
+  timerange: string;
+  backtestResult: StrategyBacktestResult;
+}>();
 const botStore = useBotStore();
 const isBarVisible = ref({ right: true, left: true });
 const sliderPosition = ref<ChartSliderPosition>();
@@ -61,19 +60,19 @@ const navigateChartToTrade = (trade: Trade) => {
           v-if="isBarVisible.left"
           class="col-md-2 overflow-y-auto overflow-x-hidden"
           style="max-height: calc(100vh - 200px)"
-          :pairlist="pairlist"
-          :trades="trades"
+          :pairlist="backtestResult.pairlist"
+          :trades="backtestResult.trades"
           sort-method="profit"
           :backtest-mode="true"
         />
       </Transition>
       <CandleChartContainer
-        :available-pairs="pairlist"
+        :available-pairs="backtestResult.pairlist"
         :historic-view="!!true"
         :timeframe="timeframe"
         :timerange="timerange"
         :strategy="strategy"
-        :trades="trades"
+        :trades="backtestResult.trades"
         class="flex-shrink-1 candle-chart-container w-100 px-0 h-100 align-self-stretch"
         :slider-position="sliderPosition"
         :freqai-model="freqaiModel"
@@ -84,13 +83,17 @@ const navigateChartToTrade = (trade: Trade) => {
           v-if="isBarVisible.right"
           class="overflow-y-auto col-md-2 overflow-x-visible"
           style="max-height: calc(100vh - 200px)"
-          :trades="trades.filter((t) => t.pair === botStore.activeBot.selectedPair)"
+          :trades="backtestResult.trades.filter((t) => t.pair === botStore.activeBot.selectedPair)"
           @trade-select="navigateChartToTrade"
         />
       </Transition>
     </div>
     <BCard header="Single trades" class="row mt-2 w-100">
-      <TradeList class="row trade-history mt-2 w-100" :trades="trades" :show-filter="true" />
+      <TradeList
+        class="row trade-history mt-2 w-100"
+        :trades="backtestResult.trades"
+        :show-filter="true"
+      />
     </BCard>
   </div>
 </template>

src/components/ftbot/ExchangeSelect.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-import { ExchangeSelection } from '@/types';
+import type { ExchangeSelection } from '@/types';
+
+const exchangeModel = defineModel<ExchangeSelection>({ required: true });
 
-const exchangeModel = defineModel({
-  type: Object as () => ExchangeSelection,
-  required: true,
-});
 const botStore = useBotStore();
 
 const exchangeList = computed(() => {
@@ -19,14 +17,21 @@ const exchangeList = computed(() => {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return [
-    { label: 'Supported', options: supported.map((e) => e.name) },
-    { label: 'Unsupported', options: unsupported.map((e) => e.name) },
+    {
+      label: 'Supported',
+      options: supported.map((e) => ({ value: e.classname ?? e.name, text: e.name })),
+    },
+    {
+      label: 'Unsupported',
+      options: unsupported.map((e) => ({ value: e.classname ?? e.name, text: e.name })),
+    },
   ];
 });
 
 const tradeModesTyped = computed(() => {
   const val = botStore.activeBot.exchangeList.find(
-    (ex) => ex.name === exchangeModel.value.exchange,
+    (ex) =>
+      ex.name === exchangeModel.value.exchange || ex.classname === exchangeModel.value.exchange,
   )?.trade_modes;
   return val ?? [];
 });

src/components/ftbot/PairlistConfigurator.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { useBotStore } from '@/stores/ftbotwrapper';
-import { usePairlistConfigStore } from '@/stores/pairlistConfig';
-import PairlistConfigItem from './PairlistConfigItem.vue';
-import PairlistConfigBlacklist from './PairlistConfigBlacklist.vue';
-import PairlistConfigActions from './PairlistConfigActions.vue';
 import { Pairlist } from '@/types';
 import { useSortable, moveArrayElement } from '@vueuse/integrations/useSortable';
-import ExchangeSelect from './ExchangeSelect.vue';
 
 const botStore = useBotStore();
 const pairlistStore = usePairlistConfigStore();

src/components/general/ProfitPill.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const props = defineProps({
-  profitRatio: { required: false, default: undefined, type: Number },
-  profitAbs: { required: false, default: undefined, type: Number },
-  stakeCurrency: { required: true, type: String },
-  profitDesc: { required: false, default: '', type: String },
-});
+const props = defineProps<{
+  profitRatio?: number;
+  profitAbs?: number;
+  stakeCurrency: string;
+  profitDesc?: string;
+}>();
 const isProfitable = computed(() => {
   return (
     (props.profitRatio !== undefined && props.profitRatio > 0) ||

src/styles/_styles_ovw.scss

@@ -263,6 +263,10 @@
         background-size: 16px 12px;
         background-repeat: no-repeat;
         background-position: right 0.75rem center;
+        &:disabled {
+            color: darken($fg-color, 30%);
+            background: lighten($bg-dark, 10%);
+        }
     }
 
     .toast {

src/types/exchange.ts

@@ -12,6 +12,9 @@ export interface Exchange {
   comment: string;
   dex?: boolean;
   trade_modes: TradeMode[];
+  is_alias?: boolean;
+  alias_for?: string | null;
+  classname?: string;
 }
 
 export interface ExchangeListResult {

src/views/BacktestingView.vue

@@ -213,8 +213,7 @@ watch(
             :timeframe="timeframe"
             :strategy="btStore.strategy"
             :timerange="btStore.timerange"
-            :pairlist="botStore.activeBot.selectedBacktestResult.pairlist"
-            :trades="botStore.activeBot.selectedBacktestResult.trades"
+            :backtest-result="botStore.activeBot.selectedBacktestResult"
             :freqai-model="btStore.freqAI.enabled ? btStore.freqAI.model : undefined"
           />
         </div>