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

more UI updates

Browse Source
This commit is contained in:
Tim
2024-03-12 15:23:25 -04:00
parent f4f1122b89
commit 9071cf1ef3
10 changed files with 167 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/charts/chart.js
View File

@@ -24,6 +24,7 @@ function changeSymbol(symbol) {
}
/* TradingView event keystrings
const subscribeEvents = [
'toggle_sidebar', 'indicators_dialog', 'toggle_header', 'edit_object_dialog', 'chart_load_requested',
'chart_loaded', 'mouse_down', 'mouse_up', 'drawing', 'study', 'undo', 'redo', 'undo_redo_state_changed',
@@ -33,6 +34,7 @@ const subscribeEvents = [
'drawing_event', 'study_properties_changed', 'series_properties_changed', 'panes_height_changed',
'panes_order_changed',
]
*/
export function initWidget(el) {
@@ -82,14 +84,14 @@ export const ShapeCallback = {
onRedraw: () => {}, // the mouse moved while in drawing mode
onUndraw: () => {}, // drawing was canceled by clicking on a different tool
onAddPoint: () => {}, // the user clicked a point while drawing (that point is added to the points list)
onCreate: (shapeId, points, props) => {}, // the user has finished creating all the control points. drawing mode is exited and the initial shape is created.
onPoints: (shapeId, points) => {}, // the control points of an existing shape were changed
onProps: (shapeId, props) => {}, // the display properties of an existing shape were changed
onMove: (shapeId, points) => {}, // the entire shape was moved without dragging control points
onDrag: (shapeId, points) => {}, // the shape is being dragged: this gets called on every mouse movement update during a drag
onHide: (shapeId, props) => {},
onShow: (shapeId, props) => {},
onClick: (shapeId) => {}, // the shape was selected
onCreate: (shapeId, shape, points, props) => {}, // the user has finished creating all the control points. drawing mode is exited and the initial shape is created.
onPoints: (shapeId, shape, points) => {}, // the control points of an existing shape were changed
onProps: (shapeId, shape, props) => {}, // the display properties of an existing shape were changed
onMove: (shapeId, shape, points) => {}, // the entire shape was moved without dragging control points
onDrag: (shapeId, shape, points) => {}, // the shape is being dragged: this gets called on every mouse movement update during a drag
onHide: (shapeId, shape, props) => {},
onShow: (shapeId, shape, props) => {},
onClick: (shapeId, shape) => {}, // the shape was selected
onDelete: (shapeId) => {},
}
@@ -100,14 +102,14 @@ export const VerboseCallback = prototype(ShapeCallback, {
// onRedraw: ()=>{console.log('onRedraw')},
onUndraw: ()=>{console.log('onUndraw')},
onAddPoint: ()=>{console.log('onAddPoint')},
onCreate: (shapeId, points, props)=>{console.log('onCreate')},
onPoints: (shapeId, points)=>{console.log('onPoints')},
onProps: (shapeId, props)=>{console.log('onProps')},
onMove: (shapeId, points)=>{console.log('onMove')},
onDrag: (shapeId, points) => {console.log('onDrag')},
onHide: (shapeId, props)=>{console.log('onHide')},
onShow: (shapeId, props)=>{console.log('onShow')},
onClick: (shapeId)=>{console.log('onClick')},
onCreate: (shapeId, shape, points, props)=>{console.log('onCreate')},
onPoints: (shapeId, shape, points)=>{console.log('onPoints')},
onProps: (shapeId, shape, props)=>{console.log('onProps')},
onMove: (shapeId, shape, points)=>{console.log('onMove')},
onDrag: (shapeId, shape, points) => {console.log('onDrag')},
onHide: (shapeId, shape, props)=>{console.log('onHide')},
onShow: (shapeId, shape, props)=>{console.log('onShow')},
onClick: (shapeId, shape)=>{console.log('onClick')},
onDelete: (shapeId)=>{console.log('onDelete')},
})
@@ -141,8 +143,10 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
if( callbacks.length )
shapeCallbacks[shapeId] = callbacks
// console.log(`created ${shapeType.name}`, shapeId)
const props = chart.getShapeById(shapeId).getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
const shape = chart.getShapeById(shapeId)
shape.bringToFront()
const props = shape.getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
return shapeId
}
@@ -193,9 +197,9 @@ function handleCrosshairMovement(point) {
const shape = chart.getShapeById(shapeId);
const points = shape.getPoints();
// console.log(`dragging ${shapeId}`, shape, points1, points2, points3)
// invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, points)
// invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, shape, points)
// console.log('calling onPoints')
invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, points)
invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, shape, points)
}
}
else if (draggingShapeIds.length > 0) {
@@ -255,26 +259,26 @@ function doHandleDrawingEvent(id, event) {
co.drawing = false
const points = shape.getPoints()
const props = shape.getProperties()
invokeCallbacks(shapeCallbacks[id], 'onCreate', id, points, props)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
invokeCallbacks(shapeCallbacks[id], 'onCreate', id, shape, points, props)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, props)
}
} else if (event === 'points_changed') {
if (id in shapeCallbacks) {
const points = shape.getPoints()
// console.log('points', points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
}
} else if (event === 'properties_changed') {
const props = shape.getProperties()
if (id in shapeCallbacks)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, props)
else
// otherwise it's an event on a shape we don't "own"
console.log('warning: ignoring setProperties on TV shape', id, props)
} else if (event === 'move') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onMove', id)
invokeCallbacks(shapeCallbacks[id], 'onMove', id, shape)
}
} else if (event === 'remove') {
if (id in shapeCallbacks) {
@@ -282,15 +286,15 @@ function doHandleDrawingEvent(id, event) {
}
} else if (event === 'click') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onClick', id)
invokeCallbacks(shapeCallbacks[id], 'onClick', id, shape)
}
} else if (event === 'hide') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onHide', id)
invokeCallbacks(shapeCallbacks[id], 'onHide', id, shape)
}
} else if (event === 'show') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onShow', id)
invokeCallbacks(shapeCallbacks[id], 'onShow', id, shape)
}
} else
console.log('unknown drawing event', event)

34
src/charts/shape.js
View File

@@ -79,9 +79,8 @@ class Shape {
createOrDraw() {
if(this.id) return
const points = this.pointsFromModel()
if(points && points.length)
this.doCreate(points)
if(this.points && this.points.length)
this.doCreate(this.points)
else
this.draw()
}
@@ -111,9 +110,11 @@ class Shape {
setPoints(points) {
this.points = points
if (points !== null && points.length) {
if (points === null || !points.length)
this.delete()
else {
if (this.id === null)
this.doCreate(points)
this.doCreate()
else {
const s = this.tvShape();
if (!dragging) {
@@ -129,7 +130,6 @@ class Shape {
}
}
}
// todo delete if points is null or empty?
}
@@ -163,8 +163,6 @@ class Shape {
try {
deleteShapeId(this.id)
this.id = null
} catch (e) {
throw e
} finally {
this.lock--
}
@@ -261,7 +259,7 @@ class ShapeTVCallbacks {
this.shape = shape
}
onCreate(shapeId, points, props) {
onCreate(shapeId, _tvShape, points, props) {
if( this.shape.id )
throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
this.shape.id = shapeId
@@ -269,13 +267,13 @@ class ShapeTVCallbacks {
invokeCallback(this.shape, 'onCreate', points, props)
}
onPoints(shapeId, points) {
onPoints(shapeId, _tvShape, points) {
this.shape.points = points
this.shape.onPoints(points)
this.shape.onDirtyModel(this.shape.pointsToModel)
}
onProps(shapeId, props) {
onProps(shapeId, _tvShape, props) {
this.shape.props = props
this.shape.onProps(props)
this.shape.onDirtyModel(this.shape.propsToModel)
@@ -301,35 +299,35 @@ class ShapeTVCallbacks {
invokeCallback(this.shape, 'onAddPoint')
}
onMove(_shapeId, points) {
onMove(_shapeId, _tvShape, points) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onMove',points)
}
onDrag(_shapeId, points) {
onDrag(_shapeId, _tvShape, points) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onDrag', points)
}
onHide(_shapeId, props) {
onHide(_shapeId, _tvShape, props) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onHide',props)
}
onShow(_shapeId, props) {
onShow(_shapeId, _tvShape, props) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onShow',props)
}
onClick(_shapeId) {
onClick(_shapeId, _tvShape) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onClick')
}
onDelete(_shapeId, props) {
onDelete(shapeId) {
this.shape.id = null
if( this.shape.lock ) return
invokeCallback(this.shape, 'onDelete',props)
invokeCallback(this.shape, 'onDelete', shapeId)
}
}

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

@@ -9,7 +9,9 @@
:label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
>
<template v-slot:prepend>
<v-btn :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s" variant="tonal" :color="color" @click="order.buy=!order.buy"/>
<v-btn variant="tonal" :color="color" class="ml-3"
:text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s"
@click="order.buy=!order.buy"/>
</template>
<template v-slot:append-inner>
<v-btn :text="order.amountIsTokenA?co.selectedSymbol.base.s:co.selectedSymbol.quote.s+' worth'"
@@ -29,14 +31,15 @@
mdi-vector-polyline
-->
</div>
<div class="d-flex justify-start">
<v-btn variant="tonal" :color="color" class="ma-6">Place Order</v-btn>
<v-btn variant="text" class="ma-6">Cancel</v-btn>
</div>
</div>
</row-bar>
</template>
<script>
import {newBuilder} from "@/orderbuild.js";
const defaultMarketBuilder = newBuilder('MarketBuilder')
</script>
<script setup>
import BuilderFactory from "@/components/chart/BuilderFactory.vue";
@@ -59,7 +62,7 @@ function build(order, component, options={}) {
function builders(order) {
let result = order.builders
return result.length > 0 ? result : [newBuilder('MarketBuilder')]
return result.length > 0 ? result : [defaultMarketBuilder]
}
const theme = useTheme().current

48
src/components/chart/ChartOrderPane.vue
View File

@@ -1,6 +1,28 @@
<template>
<div class="d-flex flex-column h-100">
<toolbar/>
<div class="d-flex mb-1">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
<span class="logo">dexorder</span>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
<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-question" @click="build('Test')">Test</v-btn>-->
<v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
<v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
<div class="w-100 d-flex justify-end">
<v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
<v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
</div>
<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>
</div>
<!-- <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
<div class="overflow-y-auto">
<template v-for="o in co.orders">
@@ -12,14 +34,15 @@
<script setup>
import {useChartOrderStore} from "@/orderbuild.js";
import Toolbar from "@/components/chart/Toolbar.vue";
import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
import {onBeforeUnmount} from "vue";
import {useOrderStore} from "@/store/store.js";
import {computed, onBeforeUnmount, ref} from "vue";
import {useOrderStore, useStore} from "@/store/store.js";
import {routeFinder} from "@/blockchain/route.js";
import ChartOrder from "@/components/chart/ChartOrder.vue";
import {useTheme} from "vuetify";
const s = useStore()
const co = useChartOrderStore()
const os = useOrderStore()
@@ -34,10 +57,27 @@ function changeSymbol(symbol) {
addSymbolChangedCallback(changeSymbol)
onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
const showCancel = 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
}
function placeOrder() {
}
</script>
<style lang="scss">
body {
overflow-y: hidden;
}
.arrow {
font-size: 22px;
}
</style>

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

@@ -1,6 +1,6 @@
<template>
<!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
<row-bar :color="builder.color" :data-ignore="autoAdjust">
<row-bar :color="builder.color">
<color-band :color="builder.color"/>
<div style="min-width: 3em; font-size: larger" :style="colorStyle"
class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
@@ -60,7 +60,7 @@
</template>
<script setup>
import {computed, onBeforeUnmount, onMounted} from "vue";
import {computed, onBeforeUnmount, onMounted, watch} from "vue";
import {chart} from "@/charts/chart.js";
import {useChartOrderStore} from "@/orderbuild.js";
import Color from "color";
@@ -75,10 +75,11 @@ const os = useOrderStore()
const co = useChartOrderStore()
const theme = useTheme().current
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])
// Fields must be defined in order to be reactive
builderDefaults(props.builder, {
builderDefaults(props, emit, {
allocation: 1.0,
start: null, // todo
end: null, // todo
@@ -344,7 +345,8 @@ function adjustShapes() {
}
const autoAdjust = computed(adjustShapes)
watch(props.order, adjustShapes)
// const autoAdjust = computed(adjustShapes)
function deleteShapes() {

11
src/components/chart/MarketBuilder.vue
View File

@@ -3,7 +3,7 @@
<div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
<div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
<div>
<v-text-field type="number" v-model="props.builder.slippage"
<v-text-field type="number" v-model="builder.slippage"
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Max Slippage" min="0" max="100" step="0.01"
style="width: 9em;"
@@ -19,12 +19,19 @@
import {useChartOrderStore} from "@/orderbuild.js";
import {builderDefaults} from "@/misc.js";
import {useOrderStore} from "@/store/store.js";
import {computed} from "vue";
const co = useChartOrderStore()
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])
// Fields must be defined in order to be reactive
builderDefaults(props.builder, {slippage: 0.10,})
builderDefaults(props, emit, {slippage: 0.10,})
const slippage = computed({
get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage},
set(v) {props.builder.slippage=v; emit('update:builder', props.builder)}
})
console.log('builder.slippage', props.builder.slippage)
</script>

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

@@ -2,13 +2,25 @@
<div class="d-flex mb-1">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
<span class="logo">dexorder</span>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start" variant="text"/>
<v-btn variant="flat" prepend-icon="mdi-plus" @click="newOrder">New Order</v-btn>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
<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-question" @click="build('Test')">Test</v-btn>-->
<v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
<v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
<div class="w-100 d-flex justify-end">
<v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
<v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
</div>
<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>
</div>
</template>
@@ -19,33 +31,25 @@ 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";
const s = useStore()
const co = useChartOrderStore()
const showCancel = ref(false)
let shape = null
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 newOrder() {
co.newOrder()
function cancelOrder() {
showCancel.value = true
}
function confirmDiscard() {
// todo show dialog
}
function test() {
const testCb = {
onCreate(shapeId) {shape=shapeId},
}
if( shape === null ) {
drawShape(ShapeType.HLine, testCb)
function placeOrder() {
}
}
</script>

11
src/misc.js
View File

@@ -130,10 +130,15 @@ export function pairPrice(baseToken, quoteToken, price, decimals=null) {
export const sleep = ms => new Promise(r => setTimeout(r, ms))
export function builderDefaults(builder, defaults) {
export function builderDefaults(props, emit, defaults) {
let changed = false
for (const k in defaults)
if (builder[k] === undefined)
builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
if (props.builder[k] === undefined) {
props.builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
changed = true
}
if (changed)
emit('update:builder', props.builder)
}
export function uuid() {

2
src/orderbuild.js
View File

@@ -37,7 +37,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
function newOrder() {
console.log('cos new order')
const order = { id:uuid(), amount:1, builders:[], amountIsTokenA: true, buy: true }
const order = {id:uuid(), amount:1, amountIsTokenA: true, buy: true, builders:[], }
orders.value.push(order)
selectedOrder.value = order
}

27
src/router/index.js
View File

@@ -8,16 +8,18 @@ const routes = [
children: [
{
path: '/',
name: 'Home',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartOrderPane.vue'),
},
{
path: '/create',
name: 'Create',
component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
path: '/place',
name: 'Place',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartOrderPane.vue'),
},
{
path: '/vault',
@@ -35,29 +37,36 @@ const routes = [
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "ordersview" */ '@/views/OrdersView.vue'),
},
/*
{
path: '/create',
name: 'Create',
component: () => import(/!* webpackChunkName: "chartorder" *!/ '@/components/chart/ChartOrderPane.vue'),
},
{
path: '/twap',
name: 'TWAP',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "twap" */ '@/components/TimedOrder.vue'),
component: () => import(/!* webpackChunkName: "twap" *!/ '@/components/TimedOrder.vue'),
},
{
path: '/ladder',
name: 'Ladder',
component: () => import(/* webpackChunkName: "ladder" */ '@/components/LadderOrder.vue'),
component: () => import(/!* webpackChunkName: "ladder" *!/ '@/components/LadderOrder.vue'),
},
{
path: '/diagonal',
name: 'Diagonal',
component: () => import(/* webpackChunkName: "diagonal" */ '@/components/DiagonalOrder.vue'),
component: () => import(/!* webpackChunkName: "diagonal" *!/ '@/components/DiagonalOrder.vue'),
},
{
path: '/custom',
name: 'Custom',
component: () => import(/* webpackChunkName: "custom" */ '@/components/CustomOrder.vue'),
component: () => import(/!* webpackChunkName: "custom" *!/ '@/components/CustomOrder.vue'),
},
*/
],
},
]