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

order workflow

Browse Source
This commit is contained in:
Tim
2024-03-28 15:34:37 -04:00
parent ed553f4dc0
commit 23e0deee91
14 changed files with 170 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/NeedsProvider.vue
View File

@@ -66,10 +66,7 @@ const s = useStore()
const walletOk = typeof window.ethereum !== 'undefined'
const providerOk = computed(()=>s.provider!==null)
const chainOk = computed(()=>providerOk.value && s.helper!==null)
const ok = computed(()=>{
console.log('recompute provider ok')
return walletOk && providerOk.value && chainOk.value
})
const ok = computed(()=>walletOk && providerOk.value && chainOk.value)
function reload() {
window.location.reload()
}

2
src/components/Order.vue
View File

@@ -11,7 +11,7 @@
</div>
</v-card-item>
<v-card-actions class="d-flex justify-space-evenly mb-4">
<v-btn variant="outlined" color="red" @click="$router.push('/vault')">Cancel</v-btn>
<v-btn variant="outlined" color="red" @click="$router.push('/assets')">Cancel</v-btn>
<v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
</v-card-actions>
</phone-card>

21
src/components/Orders.vue
View File

@@ -43,7 +43,10 @@
<pair-price :base-addr="item.order.tokenIn" :quote-addr="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
</template>
<template v-slot:item.status="{ item }">
<v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
<v-chip v-if="item.state===PendingOrderState.Submitted || item.state===PendingOrderState.Signing"
prepend-icon="mdi-signature">Wallet Signing</v-chip>
<v-chip v-if="item.state===PendingOrderState.Rejected" prepend-icon="mdi-cancel">Rejected</v-chip>
<v-chip v-if="item.state===PendingOrderState.Sent" prepend-icon="mdi-send">Sent</v-chip>
<v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal"
color="green">Open
</v-chip>
@@ -103,7 +106,6 @@
</tr>
</template>
</v-data-table>
<new-order class="mx-3 mb-3"/>
<btn icon="mdi-delete-alert" color="red" class="mx-3 mb-3" @click="cancelAll(vaultAddr)">Cancel All Orders</btn>
</div>
</template>
@@ -113,7 +115,7 @@ import {FixedNumber} from "ethers";
import {useStore} from "@/store/store";
import {computed, defineAsyncComponent, ref} from "vue";
import Btn from "@/components/Btn.vue"
import {cancelAll, cancelOrder} from "@/blockchain/wallet.js";
import {cancelAll, cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
import {dateString, pairPriceAddr} from "@/misc.js";
import {isOpen, OrderState} from "@/blockchain/orderlib.js";
import NewOrder from "@/components/NewOrder.vue";
@@ -123,6 +125,7 @@ const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
const s = useStore()
const ws = useWalletStore()
const props = defineProps(['vault'])
const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
const inverted = ref({})
@@ -196,6 +199,18 @@ const orders = computed(()=>{
// ]
const result = []
// in-flight orders
for (const pend of ws.pendingOrders) {
console.log('pended order', pend)
result.splice(0, 0, {
start: pend.placementTime,
order: pend.order,
filled: 0,
state: pend.state
})
}
// historical orders
if( vaultAddr.value in s.orders ) {
for (const [index, status] of Object.entries(s.orders[vaultAddr.value]).reverse()) {
const st = {...status}

31
src/components/chart/ChartOrder.vue
View File

@@ -23,14 +23,16 @@
<builder-factory :order="order" :builder="b"/>
</template>
<div class="my-3">
<span :style="colorStyle" class="ma-3">Add condition:</span>
<!-- <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
<v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
<!-- <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
<!--
mdi-ray-start-end
mdi-vector-polyline
-->
<div v-if="order.builders.length===0"> <!--todo remove gralpha limitation of one builder-->
<span :style="colorStyle" class="ma-3">Add condition:</span>
<!-- <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
<v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
<!-- <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
<!--
mdi-ray-start-end
mdi-vector-polyline
-->
</div>
</div>
</div>
</row-bar>
@@ -41,7 +43,7 @@
import BuilderFactory from "@/components/chart/BuilderFactory.vue";
import {builderFuncs, newBuilder, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
import {useOrderStore} from "@/store/store.js";
import {computed, onMounted, onUnmounted, watch} from "vue";
import {computed, onMounted, onUnmounted, onUpdated, watch} from "vue";
import {lightenColor, lightenColor2} from "@/misc.js";
import {useTheme} from "vuetify";
import RowBar from "@/components/chart/RowBar.vue";
@@ -98,8 +100,15 @@ function buildOrder() {
}
onMounted(()=>orderFuncs[props.order.id] = buildOrder)
onUnmounted(()=>delete orderFuncs[props.order.id])
let lastId = props.order.id
orderFuncs[lastId] = buildOrder
onUpdated(()=>{
console.log('onUpdated', lastId, ...arguments)
delete orderFuncs[lastId]
orderFuncs[props.order.id] = buildOrder
lastId = props.order.id
})
onUnmounted(() => delete orderFuncs[lastId])
const theme = useTheme().current

45
src/components/chart/ChartPlaceOrder.vue
View File

@@ -1,31 +1,32 @@
<template>
<toolbar-pane>
<toolbar-pane title="Create">
<template v-slot:toolbar>
<v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
<!-- <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>-->
<v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
:color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
Place Dexorder
</v-btn>
<v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
<v-btn variant="flat" prepend-icon="mdi-delete" v-if="co.orders.length>0" @click="cancelOrder">Reset</v-btn>
</template>
<!-- <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
<template v-for="o in co.orders">
<chart-order :order="o"/>
</template>
<v-dialog v-model="showCancel" max-width="300">
<v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
<v-card-actions>
<v-spacer/>
<v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
<v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<needs-chart>
<template v-for="o in co.orders">
<chart-order :order="o"/>
</template>
<v-dialog v-model="showResetDialog" max-width="300">
<v-card title="Cancel Order?" text="Do you want to cancel this order and start again?">
<v-card-actions>
<v-spacer/>
<v-btn @click="()=>showResetDialog=false">Keep Existing</v-btn>
<v-btn @click="()=>{co.resetOrders(); showResetDialog=false}" color="red">Reset Order</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</needs-chart>
</toolbar-pane>
</template>
<script setup>
import {builderFuncs, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
import {orderFuncs, useChartOrderStore} from "@/orderbuild.js";
import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
import {computed, onBeforeUnmount, ref} from "vue";
import {useOrderStore, useStore} from "@/store/store.js";
@@ -33,10 +34,10 @@ import {useOrderStore, useStore} from "@/store/store.js";
import {routeFinder} from "@/blockchain/route.js";
import ChartOrder from "@/components/chart/ChartOrder.vue";
import {useTheme} from "vuetify";
import Toolbar from "@/components/chart/Toolbar.vue";
import {Exchange, newOrder} from "@/blockchain/orderlib.js";
import {pendOrder} from "@/blockchain/wallet.js";
import ToolbarPane from "@/components/chart/ToolbarPane.vue";
import NeedsChart from "@/components/NeedsChart.vue";
import router from "@/router/index.js";
const s = useStore()
const co = useChartOrderStore()
@@ -54,13 +55,13 @@ addSymbolChangedCallback(changeSymbol)
onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
const showCancel = ref(false)
const showResetDialog = ref(false)
const theme = useTheme().current
const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
function cancelOrder() {
showCancel.value = true
showResetDialog.value = true
}
@@ -81,6 +82,8 @@ async function placeOrder() {
}
else {
await pendOrder(built[0])
co.resetOrders()
router.push('/orders')
}
}

16
src/components/chart/LimitBuilder.vue
View File

@@ -60,7 +60,7 @@
</template>
<script setup>
import {computed, onBeforeUnmount, onMounted, onUnmounted, watch} from "vue";
import {computed, onBeforeUnmount, onMounted, onUnmounted, onUpdated, watch} from "vue";
import {chart} from "@/charts/chart.js";
import {applyLine2, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
import Color from "color";
@@ -120,8 +120,18 @@ function buildTranches() {
return tranches
}
onMounted(() => builderFuncs[props.builder.id] = buildTranches)
onUnmounted(() => delete builderFuncs[props.builder.id])
// todo move this into a supercomponent
let lastId = props.builder.id
builderFuncs[props.builder.id] = buildTranches
onUpdated(()=>{
if (lastId !== props.builder.id ) {
delete builderFuncs[lastId]
builderFuncs[props.builder.id] = buildTranches
lastId = props.builder.id
}
})
onUnmounted(() => delete builderFuncs[lastId])
const skew100 = computed( {

15
src/components/chart/Toolbar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="d-flex mb-1 align-center w-100">
<div class="d-flex align-end clickable" @click="$router.push('/place')">
<div class="d-flex align-end clickable" @click="$router.push('/create')">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
<span class="logo">dexorder</span>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
@@ -12,9 +12,12 @@
<slot/>
<div class="ml-auto d-flex align-center">
<!-- <v-icon :icon="icon" size="small"/>&nbsp;-->
<span class="title">{{title}}</span>
<toolbar-button icon="mdi-currency-btc" path="/vault"/>
<toolbar-button icon="mdi-format-list-bulleted-square" path="/orders"/>
<span class="title mr-4">{{title}}</span>
<toolbar-button tooltip="Create" icon="mdi-chart-timeline-variant" path="/create"/>
<!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
<toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
<!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
<toolbar-button tooltip="Orders" icon="mdi-format-list-checks" path="/orders"/>
<v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp" disabled></v-btn>
</div>
</div>
@@ -23,10 +26,6 @@
<script setup>
import {useStore} from "@/store/store.js";
import {useChartOrderStore} from "@/orderbuild.js";
import {chart, drawShape} from "@/charts/chart.js";
import {timestamp} from "@/misc.js";
import {ShapeType} from "@/charts/shape.js";
import {computed, ref} from "vue";
import {useTheme} from "vuetify";
import ToolbarButton from "@/components/chart/ToolbarButton.vue";

9
src/components/chart/ToolbarButton.vue
View File

@@ -1,12 +1,17 @@
<template>
<v-btn :color="isCurrent?'primary':undefined" variant="text" :icon="icon" @click="$router.push(path)"/>
<v-tooltip :text="tooltip" location="top">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" :color="isCurrent?'primary':undefined" variant="text"
:icon="icon" @click="$router.push(path)"/>
</template>
</v-tooltip>
</template>
<script setup>
import {computed} from "vue";
import {useRoute} from "vue-router";
const props = defineProps(['icon', 'path'])
const props = defineProps(['icon', 'path', 'tooltip'])
const isCurrent = computed(() => useRoute().path === props.path)
</script>