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

nav drawer

Browse Source
This commit is contained in:
Tim Olson
2023-12-13 21:37:50 -04:00
parent f79e55bf9a
commit c129a9c481
9 changed files with 154 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/NavDrawer.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<v-navigation-drawer v-model="s.nav">
<v-list>
<v-list-subheader title="Vault"/>
<v-list-item prepend-icon="mdi-safe-square" title="Assets" @click="nav('vault')"/>
<v-list-item prepend-icon="mdi-information-outline" title="Orders" @click="nav('orders')"/>
<v-list-subheader title="Dexorders"/>
<v-list-item prepend-icon="mdi-clock-outline" title="DCA" subtitle="Spread order across time" @click="nav('twap')"></v-list-item>
<v-list-item prepend-icon="mdi-menu" title="Ladder" subtitle="Multiple price levels" @click="nav('ladder')"></v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script setup>
import {useStore} from "@/store/store";
import router from "@/router/index.js";
const s = useStore()
function nav(path) {
router.push('/'+path)
s.nav = false
}
function close() {
console.log('closeoae')
if(s.nav)
s.nav=false
}
</script>
<style scoped lang="scss">
@use "src/styles/vars" as *;
</style>

12
src/components/NewOrder.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div class="d-inline-flex"> <btn icon="mdi-plus" color="green" @click="s.nav=true">New Order</btn>
<btn icon="mdi-plus" color="green" @click="show=true">New Order</btn> <!--
<btn icon="mdi-delete-alert" color="red" class="mb-6" @click="cancelAll(vaultAddr)">Cancel All Orders</btn> <div class="d-inline-flex">
<btn icon="mdi-plus" color="green" @click="s.nav=true">New Order</btn>
<v-dialog v-model="show" width="auto"> <v-dialog v-model="show" width="auto">
<v-card> <v-card>
<v-card-item class="d-flex"> <v-card-item class="d-flex">
@@ -28,7 +29,7 @@
<v-card-item class="mb-3"><v-btn variant="outlined" prepend-icon="mdi-cancel" color="red" @click="show=false">Cancel</v-btn></v-card-item> <v-card-item class="mb-3"><v-btn variant="outlined" prepend-icon="mdi-cancel" color="red" @click="show=false">Cancel</v-btn></v-card-item>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> </div>-->
</template> </template>
<script setup> <script setup>
@@ -39,10 +40,7 @@ import Btn from "@/components/Btn.vue";
const s = useStore() const s = useStore()
const show = ref(false) const show = ref(false)
import {cancelAll} from "@/blockchain/wallet.js";
import {computed} from "vue";
const props = defineProps(['vault']) const props = defineProps(['vault'])
const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
</script> </script>

169
src/components/Orders.vue
View File

@@ -1,79 +1,100 @@
<template> <template>
<v-data-table :headers="datatableHeaders" :items="orders" item-value="index" <div>
item-selectable="selectable" :show-select="false" :show-expand="true"> <v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
<template v-slot:item.start="{ value }">{{dateString(value)}}</template> item-selectable="selectable" :show-select="false" :show-expand="true">
<template v-slot:item.input="{ item }"> <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
<suspense><token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/></suspense> <template v-slot:item.input="{ item }">
</template> <suspense>
<template v-slot:item.output="{ item }"> <token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/>
<suspense><token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/></suspense> </suspense>
</template> </template>
<template v-slot:item.remaining="{ item }"> <template v-slot:item.output="{ item }">
<suspense><token-amount :addr="item.amountToken" :amount="item.remaining"/></suspense> <suspense>
</template> <token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/>
<template v-slot:item.filled="{ item }"> </suspense>
<suspense><token-amount :addr="item.amountToken" :amount="item.filled"/></suspense> </template>
</template> <template v-slot:item.remaining="{ item }">
<template v-slot:item.avg="{ item }"> <suspense>
{{pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)}} <token-amount :addr="item.amountToken" :amount="item.remaining"/>
<btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small" </suspense>
variant="plain" </template>
@click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]"> <template v-slot:item.filled="{ item }">
{{pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index)}} <suspense>
</btn> <token-amount :addr="item.amountToken" :amount="item.filled"/>
</template> </suspense>
<template v-slot:item.status="{ item }"> </template>
<v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip> <template v-slot:item.avg="{ item }">
<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> {{ pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg) }}
<btn v-if="isOpen(item.state)" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn> <btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small"
<btn v-if="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)"/> variant="plain"
<v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip> @click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
<v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip> {{ pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index) }}
<v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip> </btn>
<v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip> </template>
</template> <template v-slot:item.status="{ item }">
<template v-slot:item.action="{item}"> <v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
<btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn> <v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal"
</template> color="green">Open
<template v-slot:expanded-row="{item}"> </v-chip>
<tr> <btn v-if="isOpen(item.state)" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red"
<td>&nbsp;</td> @click="cancelOrder(vaultAddr,item.index)">Cancel
<td colspan="100"> </btn>
<v-table> <btn v-if="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red"
<!-- @click="cancelOrder(vaultAddr,item.index)"/>
<thead> <v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
<tr> <v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed
<th></th> </v-chip>
<th>Filled</th> <v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired
<th></th> </v-chip>
</tr> <v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
</thead> </template>
--> <template v-slot:item.action="{item}">
<tbody> <btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red"
<tr v-for="(t, i) in item.order.tranches"> @click="cancelOrder(vaultAddr,item.index)">Cancel
<td class="text-right">Tranche {{ i + 1 }}</td> </btn>
<td class="text-center w-33"> </template>
<suspense> <template v-slot:expanded-row="{item}">
<tr>
<td>&nbsp;</td>
<td colspan="100">
<v-table>
<!--
<thead>
<tr>
<th></th>
<th>Filled</th>
<th></th>
</tr>
</thead>
-->
<tbody>
<tr v-for="(t, i) in item.order.tranches">
<td class="text-right">Tranche {{ i + 1 }}</td>
<td class="text-center w-33">
<suspense>
<span> <span>
<token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/> <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
/ /
<token-amount :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/> <token-amount :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
</span> </span>
</suspense> </suspense>
</td> </td>
<td class="text-left"> <td class="text-left">
<span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span> <span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
<span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span> <span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
<span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span> <span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span>
<span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span> <span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
</td> </td>
</tr> </tr>
</template> </template>
</v-data-table> </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> </template>
<script setup> <script setup>
@@ -82,9 +103,11 @@ import {useStore} from "@/store/store";
import {computed, defineAsyncComponent, reactive} from "vue"; import {computed, defineAsyncComponent, reactive} from "vue";
import {token} from "@/blockchain/token.js"; import {token} from "@/blockchain/token.js";
import Btn from "@/components/Btn.vue" import Btn from "@/components/Btn.vue"
import {cancelOrder} from "@/blockchain/wallet.js"; import {cancelAll, cancelOrder} from "@/blockchain/wallet.js";
import {intervalString, dateString} from "@/misc.js"; import {dateString} from "@/misc.js";
import {OrderState, isOpen} from "@/blockchain/orderlib.js"; import {isOpen, OrderState} from "@/blockchain/orderlib.js";
import NewOrder from "@/components/NewOrder.vue";
const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue')) const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
const s = useStore() const s = useStore()

2
src/components/Vault.vue
View File

@@ -45,7 +45,7 @@
</v-card-text> </v-card-text>
</phone-card> </phone-card>
<v-card v-if="s.vaults.length>num" :class="empty?'maxw':''"> <v-card v-if="s.vaults.length>num" :class="empty?'maxw':''">
<v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> My Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames --> <v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> Vault Assets {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
<v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle> <v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle>
<v-card-text v-if="empty"> <v-card-text v-if="empty">
<p> <p>

7
src/layouts/default/AppBar.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<v-app-bar flat> <v-app-bar scroll-behavior="hide" scroll-threshold="1">
<!-- <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
<v-app-bar-title> <v-app-bar-title>
<span class="logo clickable" @click="$router.push('/')"> <span class="logo clickable" @click="s.nav=!s.nav">
<v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/> <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
<span class="clickable">dexorder</span> <span class="clickable">dexorder</span>
</span> </span>
@@ -15,6 +16,8 @@
</template> </template>
<script setup> <script setup>
import {useStore} from "@/store/store";
const s = useStore()
</script> </script>

7
src/layouts/default/Default.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<v-app> <v-app>
<default-bar /> <default-bar/>
<nav-drawer/>
<default-view/> <default-view/>
</v-app> </v-app>
</template> </template>
@@ -8,4 +9,8 @@
<script setup> <script setup>
import DefaultBar from './AppBar.vue' import DefaultBar from './AppBar.vue'
import DefaultView from './View.vue' import DefaultView from './View.vue'
import {useStore} from "@/store/store.js";
import NavDrawer from "@/components/NavDrawer.vue";
const s = useStore()
</script> </script>

8
src/store/store.js
View File

@@ -29,6 +29,8 @@ import {computed, ref} from "vue";
export const useStore = defineStore('app', ()=> { export const useStore = defineStore('app', ()=> {
const nav = ref(false)
const _chainId = ref(null) const _chainId = ref(null)
const _chainInfo = ref({}) const _chainInfo = ref({})
@@ -107,9 +109,9 @@ export const useStore = defineStore('app', ()=> {
} }
return { return {
chainId, chainInfo, chain, provider, vaultInitCodeHash, account, vaults, transactionSenders, errors, extraTokens, nav, chainId, chainInfo, chain, provider, vaultInitCodeHash, account, vaults, transactionSenders, errors,
poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins, removeTransactionSender, extraTokens, poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins,
error, closeError, addToken, removeTransactionSender, error, closeError, addToken,
} }
}) })

2
src/styles/settings.scss
View File

@@ -12,5 +12,5 @@
$body-font-family: v.$body-font-family, $body-font-family: v.$body-font-family,
$heading-font-family: v.$heading-font-family, $heading-font-family: v.$heading-font-family,
//$card-title-font-size: 24px, //$card-title-font-size: 24px,
$app-bar-title-font-size: 32px, //$app-bar-title-font-size: 32px,
); );

4
src/views/OrdersView.vue
View File

@@ -1,10 +1,9 @@
<template> <template>
<needs-provider> <needs-provider>
<needs-signer> <needs-signer>
<phone-card title="Orders"> <phone-card title="Vault Orders">
<v-card-item> <v-card-item>
<orders/> <orders/>
<new-order class="ma-3"/>
</v-card-item> </v-card-item>
</phone-card> </phone-card>
</needs-signer> </needs-signer>
@@ -16,7 +15,6 @@ import Orders from "@/components/Orders.vue";
import NeedsSigner from "@/components/NeedsSigner.vue"; import NeedsSigner from "@/components/NeedsSigner.vue";
import NeedsProvider from "@/components/NeedsProvider.vue"; import NeedsProvider from "@/components/NeedsProvider.vue";
import PhoneCard from "@/components/PhoneCard.vue"; import PhoneCard from "@/components/PhoneCard.vue";
import NewOrder from "@/components/NewOrder.vue";
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">