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

denormalized PairEntry, cleaned up console logs

Browse Source
This commit is contained in:
Tim Olson
2023-10-04 18:05:43 -04:00
parent 7239987867
commit c206607547
7 changed files with 84 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/blockchain/wallet.js
View File

@@ -5,14 +5,14 @@ export let provider = null
function onChainChanged(chainId) {
chainId = Number(chainId)
console.log('chain changed', chainId)
// console.log('chain changed', chainId)
const store = useStore()
store.chainId = chainId
provider = new ethers.BrowserProvider(window.ethereum, chainId)
}
function onAccountsChanged(accounts) {
console.log('accounts changed', accounts)
// console.log('accounts changed', accounts)
const store = useStore()
if( accounts.length === 0 ) {
store.account = null
@@ -47,12 +47,12 @@ const errorHandlingProxy = {
if( x.code === 'NETWORK_ERROR' ) {
// todo available chain names
// store.error('Wrong Blockchain', 'Your wallet is connected to a different blockchain. Please select Arbitrum in your wallet.') // todo hardcoded arb
console.log('wallet chain error', x)
console.error('wallet chain error', x)
// store.chainId = store.chainInfo[]
throw x
}
else {
console.log('wallet error')
console.error('wallet error')
throw x
}
}

1
src/components/Alerts.vue
View File

@@ -5,7 +5,6 @@
<script setup>
import {useStore} from "@/store/store";
const s = useStore()
console.log('errors', s.errors)
</script>
<style scoped lang="scss">

77
src/components/PairEntry.vue
View File

@@ -1,77 +0,0 @@
<template>
<token-choice v-model="tokenA" class="token-choice mb-1">
<template v-slot:prepend>
<v-btn :text="buy ? 'Buy' : 'Sell'" :color="buy ? 'green' : 'red'"
variant="outlined" @click="buy=!buy" class="bs-button"/>
</template>
</token-choice>
<token-choice v-model="tokenB" class="token-choice">
<template v-slot:prepend>
<v-btn :text="!buy ? 'Buy' : 'Sell'" :color="!buy ? 'green' : 'red'"
variant="outlined" @click="buy=!buy" class="bs-button"/>
</template>
</token-choice>
</template>
<script setup>
import {useStore} from "@/store/store";
import TokenChoice from "@/components/TokenChoice.vue";
import {computed} from "vue";
const s = useStore()
// { tokenA, tokenB, buy }
// tokens may be undefined if not selected
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log('PairEntry setup', props.modelValue)
if((!props.modelValue || !props.modelValue.tokenA) && s.tokens && s.tokens.length >= 1)
set('tokenA', s.tokens[0])
if((!props.modelValue || !props.modelValue.tokenB) && s.tokens && s.tokens.length >= 2)
set('tokenB', s.tokens[1])
function set(k,v) {
const newModel = {}
if(props.modelValue)
Object.assign(newModel, props.modelValue);
newModel[k] = v
console.log('set', k, v, props.modelValue, newModel)
emit('update:modelValue', newModel)
}
function tokenComputer(attr, index) {
return {
get() {
return !props.modelValue || !props.modelValue[attr] ? null : props.modelValue[attr]
},
set(value) {
set(attr,value)
}
}
}
const tokenA = computed(tokenComputer('tokenA', 0))
const tokenB = computed(tokenComputer('tokenB', 1))
const buy = computed({
get() {
!props.modelValue ? true : props.modelValue.buy
},
set(value) {
set('buy',value)
}
})
</script>
<style scoped lang="scss">
@use "src/styles/vars" as *;
.token-choice {
width: 16em;
}
.bs-button {
width: 6em;
}
</style>

121
src/components/TimedOrderEntry.vue
View File

@@ -5,7 +5,18 @@
<v-card-subtitle>Split order across time</v-card-subtitle>
<v-card-text>
<pair-entry v-model="pair"/>
<token-choice v-model="tokenA" class="token-choice mb-1">
<template v-slot:prepend>
<v-btn :text="buy ? 'Buy' : 'Sell'" :color="buy ? 'green' : 'red'"
variant="outlined" @click="buy=!buy" class="bs-button"/>
</template>
</token-choice>
<token-choice v-model="tokenB" class="token-choice">
<template v-slot:prepend>
<v-btn :text="!buy ? 'Buy' : 'Sell'" :color="!buy ? 'green' : 'red'"
variant="outlined" @click="buy=!buy" class="bs-button"/>
</template>
</token-choice>
<v-chip v-for="r in routes" variant="text">
{{ s.chain.name }}
@@ -18,28 +29,28 @@
<v-progress-circular indeterminate/> Searching for {{pairSymbol}} pools...
</div>
<v-alert v-if="routes.length===0 && !routeFinder.pending()" text="No pool found!" type=""/>
<v-alert v-if="routes.length===0 && !routeFinder.pending()" text="No pool found!"/>
<div v-if="routes.length">
<v-text-field label='Amount' type="number" step="1" variant="outlined" aria-valuemin="0" min="0"
:model-value="amount" :rules="[validateRequired,validateAmount]">
v-model="amount" :rules="[validateRequired,validateAmount]" v-auto-select>
<template v-slot:append-inner>
<v-btn @click="amountIsBase=!amountIsBase" variant="outlined" class="mr-2">
{{ amountIsBase ? pair.tokenA.symbol : pair.tokenB.symbol }}
{{ amountIsBase ? tokenA.symbol : tokenB.symbol }}
</v-btn>
<v-btn :text="amountIsTotal ? 'total' : 'per tranche'" variant="outlined"
@click="amountIsTotal=!amountIsTotal" class="total"/>
</template>
</v-text-field>
<v-text-field label="Tranches" type="number" variant="outlined" aria-valuemin="1" min="1" max="255"
:model-value="tranches" :rules="[validateRequired,validateTranches]">
:model-value="tranches" :rules="[validateRequired,validateTranches]" v-auto-select>
<!-- <template v-slot:prepend-inner>-->
<!-- <div>{{ amountIsTotal ? 'Split into' : 'Times' }}</div>-->
<!-- </template>-->
<template v-slot:append-inner>tranches</template>
</v-text-field>
<v-text-field type="number" variant="outlined" :min="1" v-model="interval" class="interval"
:label="intervalIsTotal ? 'Completion time' : 'Time between tranches'">
:label="intervalIsTotal ? 'Completion time' : 'Time between tranches'" v-auto-select>
<!-- <template v-slot:append>APART</template>-->
<template v-slot:prepend-inner>
<v-btn variant="outlined" :text="intervalIsTotal ? 'Within' : 'Spaced apart'" class="within mr-2"
@@ -51,40 +62,20 @@
</v-text-field>
<v-text-field v-model="limitPrice" :label="(limitIsMinimum?'Minimum':'Maximum')+' Price'" type="number"
variant="outlined" aria-valuemin="0" min="0"
clearable :rules="[validateAmount, validateMin]">
clearable :rules="[validateAmount, validateMin]" v-auto-select>
<template v-slot:append-inner>
<v-btn variant="outlined" @click="inverted=!inverted">
{{
inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol
}}
{{pairSymbol}}
</v-btn>
</template>
</v-text-field>
<!--
<v-text-field v-model="minPrice" label="Minimum Price" type="number" variant="outlined" aria-valuemin="0" min="0"
clearable :rules="[validateAmount, validateMin]">
<template v-slot:append-inner>
<v-btn variant="outlined" @click="inverted=!inverted">
{{ inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol }}
</v-btn>
</template>
</v-text-field>
<v-text-field v-model="maxPrice" label="Maximum Price" type="number" variant="outlined" aria-valuemin="0" min="0"
clearable :rules="[validateAmount, validateMax]">
<template v-slot:append-inner>
<v-btn variant="outlined" @click="inverted=!inverted">
{{ inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol }}
</v-btn>
</template>
</v-text-field>
-->
</div>
</v-card-text>
<v-card-actions class="d-flex justify-space-evenly mb-4">
<v-btn variant="outlined" color="red">Cancel</v-btn>
<v-btn variant="flat" color="green" :disabled="!routes.length">Place Order</v-btn>
<v-btn variant="flat" color="green" :disabled="!validOrder">Place Order</v-btn>
</v-card-actions>
</PhoneCard>
</NeedsQueryHelper>
@@ -93,33 +84,52 @@
<script setup>
import {useStore} from "@/store/store";
import {computed, ref} from "vue";
import PairEntry from "@/components/PairEntry.vue";
import TokenChoice from "@/components/TokenChoice.vue"
import PhoneCard from "@/components/PhoneCard.vue";
import {queryHelperContract} from "@/blockchain/contract.js";
import {SingletonCoroutine} from "@/misc.js";
import NeedsQueryHelper from "@/components/NeedsQueryHelper.vue";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
const s = useStore()
// pair is computed to allow for dynamic computation of a default value based on current chainId
const _pair = ref({buy:true})
const pair = computed({
const buy = ref(false)
let _tokenA = ref(s.tokens && s.tokens.length >= 1 ? s.tokens[0] : null)
let _tokenB = ref(s.tokens && s.tokens.length >= 2 ? s.tokens[1] : null)
const tokenA = computed({
get() {
console.log('te getpair',_pair.value)
return _pair.value
return _tokenA.value
},
set(value) {
console.log('set pair',value)
_pair.value = value
routes.value = []
routeFinder.invoke()
if( !_tokenA.value || _tokenA.value.address !== value.address ) {
_tokenA.value = value
routeFinder.invoke()
}
}
})
const pairSelected = computed(()=>_pair.value.tokenA && _pair.value.tokenB && routes.value)
const base = computed(()=>!pairSelected?{}:_pair.value.tokenA)
const quote = computed(()=>!pairSelected?{}:_pair.value.tokenB)
const tokenB = computed({
get() {
return _tokenB.value
},
set(value) {
if( !_tokenB.value || _tokenB.value.address !== value.address ) {
_tokenB.value = value
routeFinder.invoke()
}
}
})
const pairSymbol = computed(()=>base.value?.symbol+'/'+quote.value?.symbol)
const base = computed(()=>{
const token = inverted.value ? _tokenB.value : _tokenA.value
return !token?{}:token
})
const quote = computed(()=>{
const token = inverted.value ? _tokenA.value : _tokenB.value
return !token?{}:token
})
const routes = ref([])
const amount = ref(1)
const amount = ref(0)
const amountIsBase = ref(false)
const amountIsTotal = ref(true)
const tranches = ref(3)
@@ -131,21 +141,22 @@ const interval = ref(10)
const intervalIsTotal = ref(true)
const timeUnits = ['minutes', 'hours', 'days']
const timeUnitIndex = ref(1)
const limitIsMinimum = computed(() => !(pair.value.buy ^ inverted.value))
const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
const validOrder = computed(()=>amount.value > 0 && routes.value.length > 0 )
async function findRoute() {
if( !pair.value || !pair.value.tokenA || !pair.value.tokenB )
return null
if( !_tokenA.value || !_tokenB.value ) {
routes.value = []
return
}
const helper = await queryHelperContract()
console.log('helper',helper)
let rawRoutes
try {
rawRoutes = await helper.getRoutes(pair.value.tokenA.address, pair.value.tokenB.address)
rawRoutes = await helper.getRoutes(tokenA.value.address, tokenB.value.address)
}
catch (e) {
routes.value = []
console.log('routes exception', e)
// console.log('routes exception', e)
return
}
// todo expose all available pools
@@ -166,8 +177,8 @@ async function findRoute() {
routes.value = [result]
}
const routeFinder = new SingletonCoroutine(findRoute,50)
const routeFinder = new SingletonCoroutine(findRoute,10)
routeFinder.invoke()
function toggleTimeUnits() {
timeUnitIndex.value++
@@ -229,6 +240,12 @@ function validateMin(v) {
<style scoped lang="scss">
@use "@/styles/vars" as *;
.token-choice {
width: 16em;
}
.bs-button {
width: 6em;
}
.amount {
width: 23em;
}

5
src/components/TokenChoice.vue
View File

@@ -10,6 +10,7 @@
v-bind="modelValue" @update:modelValue="updateValue"
variant="outlined"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
v-auto-select
>
<template v-slot:prepend><slot name="prepend"/></template>
<template v-slot:item="{props,item}">
@@ -22,6 +23,8 @@
import {useStore as useStore2} from "@/store/store";
import {ref} from "vue";
import {ethers} from "ethers";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
const s = useStore2()
const props = defineProps(['modelValue', 'label'])
@@ -64,7 +67,7 @@ function updateValue(v) {
emit('update:modelValue', info)
}
}).catch((e)=>{
console.log(e)
// console.log(e)
error(`${addr} is not a valid ERC20 token`)
})
}

8
src/misc.js
View File

@@ -20,7 +20,6 @@ export class SingletonCoroutine {
async onTimeout(self) {
self.timeout = null
console.log('invoking', self.f, self.args)
try {
await self.f(...self.args)
}
@@ -33,3 +32,10 @@ export class SingletonCoroutine {
}
}
export const vAutoSelect = {
beforeMount: (el) => {
const input = el.querySelector('input')
input.onfocus = () => setTimeout(() => input.select(), 0)
}
}

3
src/store/store.js
View File

@@ -18,12 +18,10 @@ export const useStore = defineStore('app', {
getters: {
chain: (s)=> !s.chainInfo ? null : (s.chainInfo[s.chainId] || null),
tokens: (s)=>{
console.log('tokensget',s)
let known = knownTokens[s.chainId]
known = known ? Object.values(known) : []
let extras = s.extraTokens[s.chainId]
extras = extras ? Object.values(extras) : []
console.log('tokens for chainId',s.chainId, known, extras)
return [...known, ...extras]
},
factory: (s)=>!s.chain?null:s.chain.factory,
@@ -34,7 +32,6 @@ export const useStore = defineStore('app', {
this.errors.push({title, text, closeable})
},
closeError(title, text) {
console.log('closing error', title, text)
const result = []
this.errors.forEach((i)=>{if(i.title!==title && i.text!==text) result.push(i)})
this.errors = result