dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

Browse Source
This commit is contained in:
Tim Olson
2023-11-27 00:52:17 -04:00
parent 41457b85f5
commit d2db5dc4f7
24 changed files with 545 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/PairChoice.vue
View File

@@ -1,14 +1,14 @@
<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"/>
<v-btn :text="os.buy ? 'Buy' : 'Sell'" :color="os.buy ? 'green' : 'red'"
variant="outlined" @click="os.buy=!os.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"/>
<v-btn :text="!os.buy ? 'Buy' : 'Sell'" :color="!os.buy ? 'green' : 'red'"
variant="outlined" @click="os.buy=!os.buy" class="bs-button"/>
</template>
</token-choice>
@@ -16,46 +16,48 @@
{{ 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"/>
<span>{{ os.pairSymbol }} {{ r.fee / 10000 }}%</span>&nbsp;
<route-price :route="r" :inverted="routeInverted(r)" class="text-green clickable" @click="os.inverted=!os.inverted"/>
</v-chip>
<div v-if="s.routesPending">
<v-progress-circular indeterminate/> Searching for {{s.pairSymbol}} pools...
<div v-if="os.routesPending">
<v-progress-circular indeterminate/>
Searching for {{ os.pairSymbol }} pools...
</div>
<v-alert v-if="!s.route && !s.routesPending" text="No pool found!"/>
<v-alert v-if="!os.route && !os.routesPending" text="No pool found!"/>
</template>
<script setup>
import TokenChoice from "@/components/TokenChoice.vue"
import {useStore} from "@/store/store";
import {useOrderStore, 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 os = useOrderStore()
const tokenA = computed({
get() {
return s.tokenA
return os.tokenA
},
set(value) {
if( !s.tokenA || s.tokenA.address !== value.address ) {
s.tokenA = value
if( !os.tokenA || os.tokenA.address !== value.address ) {
os.tokenA = value
routeFinder.invoke()
}
}
})
const tokenB = computed({
get() {
return s.tokenB
return os.tokenB
},
set(value) {
if( !s.tokenB || s.tokenB.address !== value.address ) {
s.tokenB = value
if( !os.tokenB || os.tokenB.address !== value.address ) {
os.tokenB = value
routeFinder.invoke()
}
}
@@ -64,32 +66,32 @@ const tokenB = computed({
const routes = computed({
get() {
return s.routes
return os.routes
},
set(value) {
console.log('setting new routes', s.routes, value)
s.routes = value
console.log('setting new routes', os.routes, value)
os.routes = value
}
})
async function componentFindRoute() {
const tokenA = s.tokenA
const tokenB = s.tokenB
const tokenA = os.tokenA
const tokenB = os.tokenB
// console.log('finding route', tokenA, tokenB)
s.routes = []
os.routes = []
if (!tokenA || !tokenB)
return
s.routesPending = true
os.routesPending = true
try {
const result = await findRoute(tokenA, tokenB)
// console.log('found route', result)
s.routes = result
const result = await findRoute(s.chainId.value, tokenA, tokenB)
console.log('found route', result)
os.routes = result
}
catch (e) {
console.log('ignoring routes exception', e)
}
finally {
s.routesPending = false
os.routesPending = false
}
}