darkmode

src/App.vue

@@ -5,4 +5,6 @@
 
 <script setup>
 import SupportChat from "@/components/SupportChat.vue";
+import {detectChain} from "@/blockchain/wallet.js";
+detectChain()
 </script>

src/blockchain/orderlib.js

@@ -137,6 +137,7 @@ export function parseElaboratedOrderStatus(chainId, status) {
 
 
 export function parseOrderStatus(chainId, status) {
+    console.log('parseOrderStatus', status)
     let [
         order,
         fillFeeHalfBps,

src/blockchain/transaction.js

@@ -1,8 +1,9 @@
-import {nav, timestamp, uuid} from "@/misc.js";
+import {nav, uuid} from "@/misc.js";
 import {newContract, vaultContract} from "@/blockchain/contract.js";
 import {ensureVault, provider, switchChain, useWalletStore} from "@/blockchain/wallet.js";
 import {toRaw} from "vue";
 import {useChartOrderStore} from "@/orderbuild.js";
+import {timestamp} from "@/common.js";
 
 export const TransactionState = {
     Created: 0, // user requested a transaction

src/charts/datafeed.js

@@ -5,7 +5,8 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {useStore} from "@/store/store.js";
 import {subOHLC, unsubOHLC} from "@/blockchain/ohlcs.js";
 import {ohlcStart} from "@/charts/chart-misc.js";
-import {timestamp} from "@/misc.js";
+
+import {timestamp} from "@/common.js";
 
 const DEBUG_LOGGING = false
 const log = DEBUG_LOGGING ? console.log : ()=>{}

src/charts/ordershapes.js

@@ -1,8 +1,9 @@
 import {DISTANT_FUTURE, DISTANT_PAST, MAX_FRACTION} from "@/blockchain/orderlib.js";
 import {allocationText, DLine, HLine} from "@/charts/shape.js";
 import {createShape, deleteShapeId} from "@/charts/chart.js";
-import {sideColor, timestamp} from "@/misc.js";
+import {sideColor} from "@/misc.js";
 import {useChartOrderStore} from "@/orderbuild.js";
+import {timestamp} from "@/common.js";
 
 export class OrderShapes {
     constructor(symbol, orderStatus) {

src/common.js

@@ -141,3 +141,13 @@ export function parseFill(obj) {
     fee = BigInt(fee)
     return {tx, time, filledIn, filledOut, fee}
 }
+
+export function timestamp(date = null) {
+    if (date === null)
+        date = new Date()
+    return Math.round(date.getTime() / 1000)
+}
+
+export function dateString(datetime) {
+    return datetime.toLocaleString({dateStyle: 'medium', timeStyle: 'short'})
+}

src/components/ApproveRegion.vue

@@ -18,12 +18,16 @@ let timer = null
 const bypass = useRoute().query.approval
 
 function tryApproval() {
-  console.log('approval query', bypass)
+  console.log('trying region approval')
   if (timer!==null) {
     clearTimeout(timer)
     timer = null
   }
-  if (s.regionApproved===null) {
+  if (s.regionApproved===true) {
+    console.log('region approved')
+  }
+  else if (s.regionApproved===null) {
+    console.log('asking for region approval', bypass)
     socket.emit('approveRegion', bypass)
     timer = setTimeout(tryApproval, 1000)
   }

src/components/ChartPairSelector.vue

@@ -1,10 +0,0 @@
-<template>
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/components/DiagonalOrder.vue

@@ -32,7 +32,8 @@ import {applyLinePoints, linePointsValue, useChartOrderStore} from "@/orderbuild
 import {newTranche} from "@/blockchain/orderlib.js";
 import TimeEntry from "@/components/TimeEntry.vue";
 import RoutePrice from "@/components/RoutePrice.vue";
-import {timestamp} from "@/misc.js";
+
+import {timestamp} from "@/common.js";
 
 const s = useStore()
 const os = useOrderStore()

src/components/Logo.vue

@@ -1,15 +1,16 @@
 <template>
-  <span class="d-inline-flex align-center">
-    <v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/>
-    <span class="logo">dexorder</span>
-    <beta v-if="showTag"/>
-  </span>
+  <div class="d-inline-flex">
+    <v-img :src="`/media/dexorder_vectors/dexorder_full_${s.theme}mode.svg`" width="6em" inline/>
+    <beta/>
+  </div>
 </template>
 
 <script setup>
 
 import Beta from "@/components/Beta.vue";
+import {useStore} from "@/store/store.js";
 
+const s = useStore()
 const props = defineProps({
   showTag: {type: Boolean, default: false}
 })

src/components/Pulse.vue

@@ -41,10 +41,10 @@ watchEffect(pulse)
 
 @keyframes pulse {
   0% {
-    background-color: gray;
+    background-color: #888;
   }
   100% {
-    background-color: white;
+    background-color: inherit;
   }
 }
-</style>
+</style>

src/components/Social.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
 <!--    <v-btn variant="plain" icon="mdi-linkedin" @click="open('https://www.linkedin.com/company/dexorder','dexorder_linkedin')" :size="size"/>-->
-    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','dexorder_discord')" :size="size"/>
     <v-btn variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','dexorder_twitter')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','dexorder_discord')" :size="size"/>
     <v-btn variant="plain" icon="mdi-github" @click="open('https://github.com/dexorder-trade/contract','dexorder_github')" :size="size"/>
     <!--      <v-btn variant="plain" icon="mdi-facebook" @click="open('https://facebook.com','dexorder_facebook')" :size="size"/>-->
     <!--      <v-btn variant="plain" icon="mdi-reddit" @click="open('https://reddit.com','dexorder_reddit')" :size="size"/>-->

src/components/SplitPane.vue

@@ -5,7 +5,7 @@
     <div class="top">
       <slot name="top"/>
     </div>
-    <div class="resizer bg-grey-lighten-2" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
+    <div class="resizer" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
     <div class="scrollpane">
       <slot name="bottom"/>
     </div>
@@ -119,14 +119,16 @@ body {
   width: 100%;
 }
 
+// todo light/dark mode
 .resizer[data-direction='horizontal'] {
-  background-color: #cbd5e0;
+  background-color: #444;
   cursor: ew-resize;
   height: 100%;
   width: 2px;
 }
 
 .resizer[data-direction='vertical'] {
+  background-color: #444;
   cursor: ns-resize;
   height: 4px;
   width: 100%;
@@ -143,5 +145,6 @@ body {
   width: 100%;
   min-height: 5em;
   max-height: 100%;
+  overflow-y: hidden;
 }
 </style>

src/components/Status.vue

@@ -106,7 +106,7 @@
                 <div v-if="s.clock < item.trancheStatus[i].startTime">
                   Activates {{ timestampString(item.trancheStatus[i].startTime) }}
                 </div>
-                <div v-if="item.trancheStatus[i].endTime<DISTANT_FUTURE">
+                <div v-if="s.clock < item.trancheStatus[i].endTime && item.trancheStatus[i].endTime < DISTANT_FUTURE">
                   Expires {{ timestampString(item.trancheStatus[i].endTime) }}
                 </div>
               </div>
@@ -242,7 +242,7 @@ onUnmounted(()=>{
 })
 
 const datatableHeaders = [
-  {title: 'Date', align: 'start', key: 'start'},
+  {title: 'Date', align: 'start', key: 'startTime'},
   {title: 'Input', align: 'end', key: 'input'},
   {title: 'Output', align: 'end', key: 'output'},
   {title: 'Avg Price', align: 'end', key: 'avg'},
@@ -317,6 +317,8 @@ const orders = computed(()=>{
       result.push(st)
       st.id = `${vault}|${index}`
       st.index = parseInt(index)
+      // st.startTime = timestampString(st.startTime)
+      console.log('starttime', st.startTime)
 /*
       o.tranches = o.tranches.map((tranche)=>{
         const t = {...tranche}

src/components/SupportChat.vue

@@ -1,5 +1,8 @@
 <template>
 </template>
 
-<!-- Crisp -->
-<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="b153f30a-4b0b-49cc-8a38-989409a73acb";(function(){const d=document;const s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
+<script setup>
+  if(window.location.hostname !== 'localhost') {
+    window.$crisp = [];window.CRISP_WEBSITE_ID = "b153f30a-4b0b-49cc-8a38-989409a73acb";(function () {const d = document;const s = d.createElement("script");s.src = "https://client.crisp.chat/l.js";s.async = 1;d.getElementsByTagName("head")[0].appendChild(s);})();
+  }
+</script>

src/components/TermsOfService.vue

@@ -658,7 +658,8 @@ at <a href="mailto:legal@dexorder.trade">legal@dexorder.trade</a> or <a href="ma
 
 import {usePrefStore} from "@/store/store.js";
 import {computed, ref, watch} from "vue";
-import {timestamp} from "@/misc.js";
+
+import {timestamp} from "@/common.js";
 
 // INCREMENT THIS WHEN CHANGING THE TOS
 const CURRENT_VERSION=1

src/components/chart/ChartOrder.vue

@@ -2,7 +2,7 @@
 <template>
   <row-bar :color="color">
     <color-band :color="color"/>
-    <div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
+    <div style="width: 100%" class="justify-start align-content-start">
       <v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined"
                     density="compact"
                     :hint="available" :persistent-hint="true"
@@ -157,12 +157,12 @@ onUnmounted(() => delete orderFuncs[lastId])
 
 const theme = useTheme().current
 const color = computed(()=>new Color(props.order.buy?theme.value.colors.success:theme.value.colors.error).darken(0.2).string())
-const lightColor = computed(() => lightenColor(color.value))
-const faintColor = computed(() => lightenColor2(color.value))
-const colorStyle = computed(() => { return {'color': color.value} })
-const bgColorStyle = computed(() => { return {'background-color': color.value} })
-const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
-const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
+// const lightColor = computed(() => lightenColor(color.value))
+// const faintColor = computed(() => lightenColor2(color.value))
+// const colorStyle = computed(() => { return {'color': color.value} })
+// const bgColorStyle = computed(() => { return {'background-color': color.value} })
+// const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
+// const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
 
 const inToken = computed( ()=>props.order.buy ? co.quoteToken : co.baseToken )
 const maxAmount = computed(()=>{

src/components/chart/ChartPlaceOrder.vue

@@ -9,20 +9,22 @@
         <v-btn variant="text" prepend-icon="mdi-delete" v-if="co.orders.length>0"
                      :disabled="!orderChanged" @click="cancelOrder">Reset</v-btn>
       </template>
-      <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" text="Reset Order"/>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </needs-chart>
+      <div class="overflow-y-auto">
+        <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" text="Reset Order"/>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </needs-chart>
+      </div>
     </toolbar-pane>
 </template>
 
@@ -63,7 +65,7 @@ const theme = useTheme().current
 const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
 
 const valid = computed(()=>{
-  if (!s.allowed)
+  if (!s.approved)
     return false
   if (co.drawing)
     return false
@@ -127,7 +129,7 @@ async function placeOrder() {
 
 </script>
 
-<style lang="scss">
+<style lang="scss"> // NOT scoped
 body {
   overflow-y: hidden;
 }

src/components/chart/ColorBand.vue

@@ -8,7 +8,7 @@ import {computed} from "vue";
 const props = defineProps(['color'])
 const computedStyle = computed(() => {
   return {
-    'background-color': props.color,
+    // 'background-color': props.color,
     'border-color': props.color,
     'width': '.67em',
     'border-top-width': '1px',

src/components/chart/DCABuilder.vue

@@ -202,7 +202,7 @@ function buildTranches() {
     const t = newTranche({
       fraction: ws[i] * MAX_FRACTION,
       startTime: ts[i],
-      endTime: ets[i],
+      endTime: Math.max(ets[i],ts[i]+60), // always give at least 60 seconds of window to execute
       slippage: builder.slippage,
     })
     tranches.push(t)

src/components/chart/Toolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
-    <logo class="d-flex align-end clickable logo-large" @click="nav('Order')" :show-tag="true"/>
+    <logo class="d-flex align-end clickable logo-large ml-1" @click="nav('Order')" :show-tag="true" max-height="32"/>
     <slot/>
     <div class="ml-auto d-flex align-center">
       <span class="title mr-4">{{title}}</span>
@@ -9,7 +9,7 @@
       <toolbar-button tooltip="Assets" icon="mdi-currency-btc" route="Assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
       <toolbar-button tooltip="Status" icon="mdi-format-list-checks" route="Status"/>
-      <v-btn variant="text" icon="mdi-information-outline" text="Info" @click="showCorp"></v-btn>
+      <toolbar-button tooltip="About" icon="mdi-information-outline" href="https://dexorder.trade/home" target="dexorder-help"/>
     </div>
   </div>
 </template>
@@ -21,10 +21,6 @@ import {nav} from "@/misc.js";
 
 const props = defineProps(['title', 'icon'])
 
-function showCorp() {
-  window.open('https://dexorder.trade/', 'dexorder')
-}
-
 </script>
 
 <style scoped lang="scss">

src/components/chart/ToolbarButton.vue

@@ -2,7 +2,7 @@
 <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="()=>nav(route)"/>
+           :icon="icon" @click="click"/>
   </template>
 </v-tooltip>
 </template>
@@ -12,9 +12,25 @@ import {computed} from "vue";
 import {useRoute} from "vue-router";
 import {nav} from "/src/misc.js"
 
-const props = defineProps(['icon', 'route', 'tooltip'])
+const props = defineProps(['icon', 'route', 'tooltip', 'href', 'target'])
 const router = useRoute();
 const isCurrent = computed(() => router.name === props.route)
+
+function click() {
+  if (!props.href && !props.route)
+    console.warn('must set href or route in toolbar-button')
+  else if (props.href && props.route)
+    console.warn('cannot set both rout and href in toolbar-button')
+  else if (props.href) {
+    if (props.target)
+      window.open(props.href, props.target)
+    else
+      window.location.href = props.href
+
+  }
+  else
+    nav(props.route)
+}
 </script>
 
 <style scoped lang="scss">

src/corp/Home.vue

@@ -28,9 +28,6 @@
       <app-btn/>
       <v-btn prepend-icon="mdi-information-outline" variant="flat" text="How It Works" @click="nav('HowItWorks')"/>
     </div>
-    <div class="w-100 d-flex justify-center my-6 actions">
-      <social class="ml-12"/>
-    </div>
   </v-card>
 </template>
 

src/corp/HowItWorks.vue

@@ -1,53 +1,38 @@
 <template>
   <v-card elevation="0" class="how">
     <v-card-title><v-icon icon="mdi-information-outline"/>&nbsp;How&nbsp;It&nbsp;Works</v-card-title>
-    <v-card-item><v-img src="/how-it-works.png" class="my-6"/></v-card-item>
-    <v-card-text>
-      <h4>Order Management</h4>
-      <p>
-        Dexorder is an on-chain Order Management System (OMS) that holds advanced order types and executes them
-        on the appropriate <uniswap-logo/> DeFi exchange at the correct time.
-      </p>
-    </v-card-text>
+    <v-card-item><v-img src="/howitworks.png" class="my-6"/></v-card-item>
     <v-card-text>
       <h4>Personal Trading Vaults</h4>
       <p>
-        Everyone gets your own trading vault smart contract, which can hold <i>orders</i> as well as tokens. Whenever
-        your order conditions are met, vault will trade its tokens with Uniswap. After completing a swap, your vault
-        can also trigger other actions like creating a stoploss order.
-      </p>
-      <p>
-        Only you the vault's owner may withdraw funds or manage orders in your vault.
-        The orders in the vault may only trade the tokens in the vault, and your regular wallet is never touched.
-      </p>
-      <p>
-        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
+        Dexorder provides advanced order management for your favorite <uniswap-logo/> DeFi pools by providing you with
+        a personal trading vault smart contract that can hold orders as well as tokens. When you create an order in
+        the Dexorder app, you save it in your on-chain vault, and then your smart trading vault will follow those
+        order instructions to trade any coins that are in the vault.
       </p>
     </v-card-text>
     <v-card-text>
       <h4>Funds are Never Locked</h4>
       <p>
         Tokens deposited into your vault may always be withdrawn at any time by only you. Funds are <i>never</i> locked
-        by the vault. If active orders in the vault need those funds, those orders are simply unable to trade, and the
-        orders will stay open without being able to execute. If you put tokens back into your vault, any open orders
-        will automatically resume and trade the newly available funds.
+        by the vault. If active orders in the vault need funds that you withdrew, those orders are simply unable to
+        trade, and the orders will stay open without being able to execute. If you put tokens back into your vault,
+        the orders will automatically resume and trade the newly deposited funds.
       </p>
     </v-card-text>
     <v-card-text>
-      <h4>Portfolio Management</h4>
+      <h4>Prepaid Gas</h4>
       <p>
-        Since your trading vault can see all your tokens and orders, it also provides Cancel All and
-        Sell Everything functions to augment your risk management when markets move fast.
+        Orders like Limit Orders and DCA Orders do not execute right away but wait until time or price conditions are
+        met. Activating a swap order against the DeFi pool requires a well-timed execution of your trading vault's
+        execute() method along with the necessary gas. Dexorder charges you up-front at order placement time for an
+        estimated future amount of gas. Then when the market conditions for your orders are met, Dexorder supplies
+        your trading vault with that gas along with information about which order to execute. Your vault will check the
+        order conditions against the current price and time, and perform the swap with the DeFi pool only if everything
+        looks correct.
       </p>
-    </v-card-text>
-    <v-card-text>
-      <h4>Activation</h4>
       <p>
-        Dexorder watches the market to know when your order conditions have been met, and then activates your vaults
-        with any orders could trade immediately. The trading vaults do not trust Dexorder's activation message and perform
-        an extensive check of the order conditions before agreeing to send an actual order to a Uniswap pool. Dexorder
-        never has access to vault funds and cannot change any orders. Dexorder is only able to activate the vault and
-        provide gas at the correct times.
+        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
       </p>
     </v-card-text>
     <v-card-text>

src/main.js

@@ -13,7 +13,6 @@ import { createApp } from 'vue'
 // Plugins
 import { registerPlugins } from '@/plugins'
 import '@/styles/style.scss'
-import {detectChain} from "@/blockchain/wallet.js";
 import "./socket.js"
 import "./version.js"
 
@@ -22,5 +21,4 @@ BigInt.prototype.toJSON = function() { return this.toString() }
 const app = createApp(App)
 registerPlugins(app)
 app.mount('#app')
-detectChain()
 window.$vuetify = app

src/misc.js

@@ -4,6 +4,7 @@ import {token} from "@/blockchain/token.js";
 import Color from "color";
 import {DateTime} from "luxon";
 import router from "@/router/index.js";
+import {dateString} from "@/common.js";
 
 export function nav(name) {
     // noinspection JSIgnoredPromiseFromCall
@@ -101,18 +102,6 @@ export function timestampString(seconds) {
 }
 
 
-export function dateString(datetime) {
-    return datetime.toLocaleString({dateStyle: 'medium', timeStyle: 'short'})
-}
-
-
-export function timestamp(date = null) {
-    if (date === null)
-        date = new Date()
-    return Math.round(date.getTime() / 1000)
-}
-
-
 export function pairKey(chainId, tokenA, tokenB) {
     const token0 = tokenA.a < tokenB.a ? tokenA.a : tokenB.a
     const token1 = tokenA.a > tokenB.a ? tokenA.a : tokenB.a
@@ -172,7 +161,12 @@ export function uuid() {
 }
 
 export function lightenColor(color, lightness = 85, alpha = null) {
-    let c = new Color(color).hsl().lightness(lightness).rgb()
+    let c = new Color(color).hsl()
+    if (useStore().theme === 'light')
+        c = c.lightness(lightness)
+    else
+        c = c.lightness(100-lightness)
+    c = c.rgb()
     if (alpha !== null)
         c = c.alpha(alpha)
     return c.string()

src/notify.js

@@ -1,7 +1,3 @@
-/*
- * Copyright ©2024 Dexorder LLC. All Rights Reserved.
- */
-
 import {getToken} from "@/blockchain/token.js";
 
 let native = false // whether native browser notifications are allowed

src/orderbuild.js

@@ -1,7 +1,7 @@
-import {computeInterceptSlope, timestamp, uuid} from "@/misc.js";
+import {computeInterceptSlope, uuid} from "@/misc.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import {useOrderStore, useStore} from "@/store/store.js";
-import {encodeIEE754} from "@/common.js";
+import {encodeIEE754, timestamp} from "@/common.js";
 import {defineStore} from "pinia";
 import {computed, ref} from "vue";
 import Color from "color";

src/plugins/vuetify.js

@@ -9,51 +9,66 @@ import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
 // Composables
-import { createVuetify } from 'vuetify'
+import {createVuetify} from 'vuetify'
+import {
+    colorContrast,
+    dark,
+    darken1,
+    darkMiddleShadeIndex,
+    light,
+    lightMiddleShadeIndex, numShades,
+    printContrast
+} from "../../theme.js";
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-const darkGray = '#333'
+
+function makeColors(isLight) {
+    const c = isLight ? light : dark;
+    const k = isLight ? c.grays : c.grays.toReversed()  // k=0 is background and k=19 is text
+    const base = isLight ? numShades-colorContrast-1 : colorContrast
+    const ink = k[printContrast]  // text color
+    function darken(cols,shades) {return cols[base+(isLight?-shades:shades)]}
+    // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+    return {
+        background: k[0],
+        surface: k[0],
+        'surface-bright': k[0],
+        'surface-light': k[2],
+        'surface-variant': k[14],
+        'on-surface-variant': k[2],
+        primary: c.greens[base],
+        'primary-darken-1': darken(c.greens, darken1),
+        secondary: c.blues[base],
+        'secondary-darken-1': darken(c.blues, darken1),
+        'grey-darken-1': k[14],
+        success: c.greens[base],
+        warning: c.yellows[base],
+        info: c.blues[base],
+        error: c.reds[base],
+        "on-background": ink,
+        "on-surface": ink,
+        "on-primary": ink,
+        "on-secondary": ink,
+        "on-success": ink,
+        "on-info": ink,
+        "on-warning": ink,
+        "on-error": ink,
+    }
+}
+
+const lightColors = makeColors(true)
+const darkColors = makeColors(false);
 
 export default createVuetify({
   theme: {
+    defaultTheme: 'dark',
     themes: {
       light: {
-        colors: {
-          background: '#ffffff',
-          surface: '#ffffff',
-          primary: '#35D721',
-          success: '#35D721',
-          warning: '#FFDE00',
-          error: '#DD1A10',
-          "on-background": darkGray,
-          "on-surface": darkGray,
-          "on-primary": darkGray,
-          "on-secondary": darkGray,
-          "on-success": darkGray,
-          "on-info": darkGray,
-          "on-warning": darkGray,
-          "on-error": darkGray,
-        },
+        colors: lightColors,
         dark: false,
         variables: {},
       },
       dark: {
-        colors: {
-          background: '#000',
-          surface: '#000',
-          primary: '#35D721',
-          success: '#35D721',
-          warning: '#FFDE00',
-          error: '#DD1A10',
-          "on-background": darkGray,
-          "on-surface": darkGray,
-          "on-primary": darkGray,
-          "on-secondary": darkGray,
-          "on-success": darkGray,
-          "on-info": darkGray,
-          "on-warning": darkGray,
-          "on-error": darkGray,
-        },
+        colors: darkColors,
         dark: true,
         variables: {},
       },

src/socket.js

@@ -3,7 +3,7 @@ import {useStore} from "@/store/store.js";
 import {flushOrders} from "@/blockchain/wallet.js";
 import {parseElaboratedOrderStatus} from "@/blockchain/orderlib.js";
 import { DataFeed } from "./charts/datafeed";
-import {notify, notifyFillEvent} from "@/notify.js";
+import {notifyFillEvent} from "@/notify.js";
 
 export const socket = io(import.meta.env.VITE_WS_URL || undefined, {transports: ["websocket"]})
 
@@ -105,7 +105,7 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
     }
 
     const status = s.orders[vault][orderIndex]
-    // console.log('apply fills', status, filled)
+    console.log('apply fills', status, filled)
 
     let orderIn = 0n
     let orderOut = 0n
@@ -123,7 +123,7 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
             fee = BigInt(fee)
             filledIn += fi
             filledOut += fo
-            if (i<=numOld) {
+            if (i>=numOld) {
                 // new fill detected
                 const f = {tx, time, filledIn: fi, filledOut: fo, fee, filled: status.order.amountIsInput ? fi : fo};
                 console.log('new fill', f)
@@ -141,5 +141,5 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
     status.filledOut = orderOut
     status.filled = status.order.amountIsInput ? orderIn : orderOut
 
-    // console.log('apply fills completed', status)
+    console.log('apply fills completed', status)
 })

src/store/store.js

@@ -41,11 +41,12 @@ export const useStore = defineStore('app', ()=> {
   const timeZone = ref('Etc/UTC')
 
   const nav = ref(false) // controls opening navigation drawer
-  const theme = ref('light')  // todo 'dark'
+  const theme = ref('dark')
 
   const connected = ref(true)  // we assume a connection will succeed until socket.io complains otherwise
   const regionApproved = ref(REQUIRE_APPROVAL?null:true)
   const walletApproved = ref(REQUIRE_APPROVAL?null:true)
+  const approved = computed(()=>(regionApproved.value && walletApproved.value))
 
   const _chainId = ref(Number(Object.keys(versionMeta.chainInfo)[0]))
   const _chainInfo = ref(versionMeta.chainInfo)
@@ -139,7 +140,7 @@ export const useStore = defineStore('app', ()=> {
     tokens, factory, helper, theme,
     mockenv, mockCoins,
     removeTransactionSender, error, closeError, addToken, clock, timeZone, balances,
-    regionApproved, walletApproved,
+    approved, regionApproved, walletApproved,
   }
 })