nav drawer
This commit is contained in:
Tim Olson
34
src/components/NavDrawer.vue
Normal file
34
src/components/NavDrawer.vue
Normal 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>
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="d-inline-flex">
|
||||
<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>
|
||||
<btn icon="mdi-plus" color="green" @click="s.nav=true">New Order</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-card>
|
||||
<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>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -39,10 +40,7 @@ import Btn from "@/components/Btn.vue";
|
||||
const s = useStore()
|
||||
const show = ref(false)
|
||||
|
||||
import {cancelAll} from "@/blockchain/wallet.js";
|
||||
import {computed} from "vue";
|
||||
const props = defineProps(['vault'])
|
||||
const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,79 +1,100 @@
|
||||
<template>
|
||||
<v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
|
||||
item-selectable="selectable" :show-select="false" :show-expand="true">
|
||||
<template v-slot:item.start="{ value }">{{dateString(value)}}</template>
|
||||
<template v-slot:item.input="{ item }">
|
||||
<suspense><token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/></suspense>
|
||||
</template>
|
||||
<template v-slot:item.output="{ item }">
|
||||
<suspense><token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/></suspense>
|
||||
</template>
|
||||
<template v-slot:item.remaining="{ item }">
|
||||
<suspense><token-amount :addr="item.amountToken" :amount="item.remaining"/></suspense>
|
||||
</template>
|
||||
<template v-slot:item.filled="{ item }">
|
||||
<suspense><token-amount :addr="item.amountToken" :amount="item.filled"/></suspense>
|
||||
</template>
|
||||
<template v-slot:item.avg="{ item }">
|
||||
{{pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)}}
|
||||
<btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small"
|
||||
variant="plain"
|
||||
@click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
|
||||
{{pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index)}}
|
||||
</btn>
|
||||
</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===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
|
||||
<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="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)"/>
|
||||
<v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
|
||||
</template>
|
||||
<template v-slot:item.action="{item}">
|
||||
<btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn>
|
||||
</template>
|
||||
<template v-slot:expanded-row="{item}">
|
||||
<tr>
|
||||
<td> </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>
|
||||
<div>
|
||||
<v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
|
||||
item-selectable="selectable" :show-select="false" :show-expand="true">
|
||||
<template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
|
||||
<template v-slot:item.input="{ item }">
|
||||
<suspense>
|
||||
<token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/>
|
||||
</suspense>
|
||||
</template>
|
||||
<template v-slot:item.output="{ item }">
|
||||
<suspense>
|
||||
<token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/>
|
||||
</suspense>
|
||||
</template>
|
||||
<template v-slot:item.remaining="{ item }">
|
||||
<suspense>
|
||||
<token-amount :addr="item.amountToken" :amount="item.remaining"/>
|
||||
</suspense>
|
||||
</template>
|
||||
<template v-slot:item.filled="{ item }">
|
||||
<suspense>
|
||||
<token-amount :addr="item.amountToken" :amount="item.filled"/>
|
||||
</suspense>
|
||||
</template>
|
||||
<template v-slot:item.avg="{ item }">
|
||||
{{ pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg) }}
|
||||
<btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small"
|
||||
variant="plain"
|
||||
@click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
|
||||
{{ pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index) }}
|
||||
</btn>
|
||||
</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===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal"
|
||||
color="green">Open
|
||||
</v-chip>
|
||||
<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="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red"
|
||||
@click="cancelOrder(vaultAddr,item.index)"/>
|
||||
<v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed
|
||||
</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired
|
||||
</v-chip>
|
||||
<v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
|
||||
</template>
|
||||
<template v-slot:item.action="{item}">
|
||||
<btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red"
|
||||
@click="cancelOrder(vaultAddr,item.index)">Cancel
|
||||
</btn>
|
||||
</template>
|
||||
<template v-slot:expanded-row="{item}">
|
||||
<tr>
|
||||
<td> </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>
|
||||
<token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
|
||||
/
|
||||
<token-amount :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
|
||||
</span>
|
||||
</suspense>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<span class="mx-3">{{ describeTrancheTime(item, true, 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, false, t.maxIntercept, t.maxSlope) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</suspense>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<span class="mx-3">{{ describeTrancheTime(item, true, 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, false, t.maxIntercept, t.maxSlope) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</td>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
@@ -82,9 +103,11 @@ import {useStore} from "@/store/store";
|
||||
import {computed, defineAsyncComponent, reactive} from "vue";
|
||||
import {token} from "@/blockchain/token.js";
|
||||
import Btn from "@/components/Btn.vue"
|
||||
import {cancelOrder} from "@/blockchain/wallet.js";
|
||||
import {intervalString, dateString} from "@/misc.js";
|
||||
import {OrderState, isOpen} from "@/blockchain/orderlib.js";
|
||||
import {cancelAll, cancelOrder} from "@/blockchain/wallet.js";
|
||||
import {dateString} from "@/misc.js";
|
||||
import {isOpen, OrderState} from "@/blockchain/orderlib.js";
|
||||
import NewOrder from "@/components/NewOrder.vue";
|
||||
|
||||
const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
|
||||
|
||||
const s = useStore()
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</v-card-text>
|
||||
</phone-card>
|
||||
<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-text v-if="empty">
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user