Add exchange select

src/components/ftbot/ExchangeSelect.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="w-100 d-flex">
+    <b-form-select id="exchange-select" v-model="exchangeModel.exchange" :options="exchangeList">
+    </b-form-select>
+    <b-form-select
+      id="tradeMode-select"
+      v-model="exchangeModel.trade_mode"
+      :options="tradeModes"
+      :disabled="tradeModes.length < 2"
+    >
+    </b-form-select>
+    <div class="ms-2">
+      <b-button @click="botStore.activeBot.getExchangeList">
+        <i-mdi-refresh />
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBotStore } from '@/stores/ftbotwrapper';
+import { computed, onMounted } from 'vue';
+import { ExchangeSelection } from '@/types';
+
+const exchangeModel = defineModel({
+  type: Object as () => ExchangeSelection,
+  required: true,
+});
+const botStore = useBotStore();
+
+const exchangeList = computed(() => {
+  return botStore.activeBot.exchangeList
+    .filter((ex) => ex.valid === true)
+    .sort((a, b) => {
+      // Sort by supported (alphabetically), then by name (alphabetically).
+      if (a.supported && !b.supported) {
+        return -1;
+      } else if (!a.supported && b.supported) {
+        return 1;
+      } else {
+        return a.name.localeCompare(b.name);
+      }
+    })
+    .map((e) => e.name);
+});
+
+const tradeModes = computed<Record<string, unknown>[]>(() => {
+  const val = botStore.activeBot.exchangeList
+    .find((ex) => ex.name === exchangeModel.value.exchange)
+    ?.trade_modes.map((tm) => {
+      return (
+        {
+          text: `${tm.margin_mode} ${tm.trading_mode}`,
+          value: tm,
+        } ?? []
+      );
+    });
+  return (val ?? []) as Record<string, unknown>[];
+});
+
+onMounted(() => {
+  if (botStore.activeBot.exchangeList.length === 0) {
+    botStore.activeBot.getExchangeList();
+  }
+});
+</script>

src/components/ftbot/PairlistConfigurator.vue

@@ -25,6 +25,7 @@
       </b-list-group-item>
     </b-list-group>
     <div class="d-flex flex-column flex-fill">
+      <exchange-select v-model="selectedExchange" />
       <PairlistConfigActions />
       <PairlistConfigBlacklist />
       <b-alert
@@ -66,12 +67,16 @@ 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 { ExchangeSelection, Pairlist } from '@/types';
 import { useSortable, moveArrayElement } from '@vueuse/integrations/useSortable';
 import CopyableTextfield from '@/components/general/CopyableTextfield.vue';
+import ExchangeSelect from './ExchangeSelect.vue';
 
 const botStore = useBotStore();
 const pairlistStore = usePairlistConfigStore();
+const selectedExchange = ref<ExchangeSelection>({
+  exchange: '',
+});
 
 const availablePairlists = ref<Pairlist[]>([]);
 const pairlistConfigsEl = ref<HTMLElement | null>(null);

src/types/exchange.ts

@@ -16,3 +16,8 @@ export interface Exchange {
 export interface ExchangeListResult {
   exchanges: Exchange[];
 }
+
+export interface ExchangeSelection {
+  exchange: string;
+  trade_mode?: TradeMode;
+}