extracted PairChoice component

src/components/PairChoice.vue

@@ -0,0 +1,106 @@
+<template>
+  <token-choice v-model="tokenA" class="token-choice mb-1">
+    <template v-slot:prepend>
+      <v-btn :text="s.buy ? 'Buy' : 'Sell'" :color="s.buy ? 'green' : 'red'"
+             variant="outlined" @click="s.buy=!s.buy" class="bs-button"/>
+    </template>
+  </token-choice>
+  <token-choice v-model="tokenB" class="token-choice">
+    <template v-slot:prepend>
+      <v-btn :text="!s.buy ? 'Buy' : 'Sell'" :color="!s.buy ? 'green' : 'red'"
+             variant="outlined" @click="s.buy=!s.buy" class="bs-button"/>
+    </template>
+  </token-choice>
+
+  <v-chip v-for="r in routes" variant="text">
+    {{ s.chain.name }}
+    <v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg" width="1.5em"/>
+    <span class="uniswap-color ml-0 mr-1">v3</span>
+    <span>{{ s.pairSymbol }} {{ r.fee / 10000 }}%</span>&nbsp;
+    <route-price :route="r" :inverted="routeInverted(r)" class="text-green clickable" @click="s.inverted=!s.inverted"/>
+  </v-chip>
+
+  <div v-if="s.routesPending">
+    <v-progress-circular indeterminate/> Searching for {{s.pairSymbol}} pools...
+  </div>
+
+  <v-alert v-if="!s.route && !s.routesPending" text="No pool found!"/>
+
+</template>
+
+<script setup>
+import TokenChoice from "@/components/TokenChoice.vue"
+import {useStore} from "@/store/store";
+import RoutePrice from "@/components/RoutePrice.vue";
+import {findRoute} from "@/blockchain/route.js";
+import {SingletonCoroutine, routeInverted} from "@/misc.js";
+import {computed, ref} from "vue";
+
+const s = useStore()
+
+const tokenA = computed({
+  get() {
+    return s.tokenA
+  },
+  set(value) {
+    if( !s.tokenA || s.tokenA.address !== value.address ) {
+      s.tokenA.value = value
+      routeFinder.invoke()
+    }
+  }
+})
+const tokenB = computed({
+  get() {
+    return s.tokenB
+  },
+  set(value) {
+    if( !s.tokenB || s.tokenB.address !== value.address ) {
+      s.tokenB = value
+      routeFinder.invoke()
+    }
+  }
+})
+
+
+const routes = computed({
+  get() {
+    return s.routes.value
+  },
+  set(value) {
+    console.log('setting new routes', s.routes.value, value)
+    s.routes.value = value
+  }
+})
+
+async function componentFindRoute() {
+  const tokenA = s.tokenA
+  const tokenB = s.tokenB
+  console.log('finding route', tokenA, tokenB)
+  s.routes = []
+  if (!tokenA || !tokenB)
+    return
+  s.routesPending = true
+  try {
+    const result = await findRoute(tokenA, tokenB)
+    console.log('found route', result)
+    s.routes = result
+  }
+  catch (e) {
+    console.log('ignoring routes exception', e)
+  }
+  finally {
+    s.routesPending = false
+  }
+}
+
+
+const routeFinder = new SingletonCoroutine(componentFindRoute,10)
+routeFinder.invoke()
+
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>