more UI updates

src/misc.js

@@ -4,7 +4,7 @@ import {token} from "@/blockchain/token.js";
 import Color from "color";
 
 export class SingletonCoroutine {
-    constructor(f, delay=10, retry=true) {
+    constructor(f, delay = 10) {
         this.f = f
         this.delay = delay
         this.timeout = null
@@ -18,24 +18,22 @@ export class SingletonCoroutine {
     invoke(/*arguments*/) {
         this.args = arguments
         // console.log('invoke', arguments)
-        if( this.timeout === null )
+        if (this.timeout === null)
+            // noinspection JSCheckFunctionSignatures
             this.timeout = setTimeout(this.onTimeout, this.delay, this)
     }
 
     async onTimeout(self) {
         try {
             await self.f(...self.args)
-        }
-        catch (e) {
-            if( self.retry ) {
+        } catch (e) {
+            if (self.retry) {
                 console.log('retrying', this.f, 'due to error', e)
                 self.timeout = null
                 self.invoke(self.args)
-            }
-            else
+            } else
                 console.error(e)
-        }
-        finally {
+        } finally {
             self.timeout = null
         }
     }
@@ -52,11 +50,11 @@ export const uint32max = 4294967295n
 export const uint64max = 18446744073709551615n
 
 export function tokenNumber(token, balance) {
-    return FixedNumber.fromValue(balance, token.decimals, {decimals:token.decimals, width: 256})
+    return FixedNumber.fromValue(balance, token.decimals, {decimals: token.decimals, width: 256})
 }
 
 export function tokenFloat(token, balance) {
-    return tokenNumber(token,balance).toUnsafeFloat()
+    return tokenNumber(token, balance).toUnsafeFloat()
 }
 
 export function routeInverted(route) {
@@ -65,27 +63,28 @@ export function routeInverted(route) {
 }
 
 export function intervalString(seconds) {
-    if( seconds < 1 )
+    if (seconds < 1)
         return 'now'
-    else if( seconds < 60 )
+    else if (seconds < 60)
         return `${seconds} seconds`
-    else if( seconds < 3600 )
-        return `${(seconds/60).toFixed(1)} minutes`
-    else if( seconds < 86400 )
-        return `${(seconds/3600).toFixed(1)} hours`
+    else if (seconds < 3600)
+        return `${(seconds / 60).toFixed(1)} minutes`
+    else if (seconds < 86400)
+        return `${(seconds / 3600).toFixed(1)} hours`
     else
-        return `${(seconds/86400).toFixed(1)} days`
+        return `${(seconds / 86400).toFixed(1)} days`
 }
 
-const _dateFormat = new Intl.DateTimeFormat( undefined, {dateStyle: 'medium', timeStyle: 'short'})
+const _dateFormat = new Intl.DateTimeFormat(undefined, {dateStyle: 'medium', timeStyle: 'short'})
+
 export function dateString(seconds) {
-    const date = new Date(seconds*1000)
+    const date = new Date(seconds * 1000)
     return _dateFormat.format(date)
 }
 
 
-export function timestamp(date=null) {
-    if(date===null)
+export function timestamp(date = null) {
+    if (date === null)
         date = new Date()
     return Math.round(date.getTime() / 1000)
 }
@@ -101,30 +100,30 @@ export function pairKey(tokenA, tokenB) {
 export function pairPriceAddr(baseTokenAddr, quoteTokenAddr, price) {
     const baseToken = token(baseTokenAddr)
     const quoteToken = token(quoteTokenAddr)
-    if( !baseToken || !quoteToken )
+    if (!baseToken || !quoteToken)
         return null
     return pairPrice(baseToken, quoteToken, price)
 }
 
 
-export function pairPrice(baseToken, quoteToken, price, decimals=null) {
-    if( price === null || price === undefined )
+export function pairPrice(baseToken, quoteToken, price, decimals = null) {
+    if (price === null || price === undefined)
         return price
-    if( decimals === null )
-        decimals = baseToken.decimals-quoteToken.decimals
+    if (decimals === null)
+        decimals = baseToken.decimals - quoteToken.decimals
     console.log('pairPrice', baseToken, quoteToken, price, decimals)
-    if( decimals >= 0 )
+    if (decimals >= 0)
         price /= 10 ** decimals
     else
         price *= 10 ** -decimals
     const invertedKey = pairKey(baseToken, quoteToken);
     const prefs = usePrefStore()
-    if( !(invertedKey in prefs.inverted) ) {
+    if (!(invertedKey in prefs.inverted)) {
         // todo prefer stablecoins as the quote asset
         prefs.inverted[invertedKey] = false
     }
-    if( prefs.inverted[invertedKey] )
-        price = 1/price
+    if (prefs.inverted[invertedKey])
+        price = 1 / price
     return price
 }
 
@@ -145,10 +144,34 @@ export function uuid() {
     return crypto.randomUUID();
 }
 
-export function lightenColor(color, lightness=85) {
-    return new Color(color).hsl().lightness(lightness).string()
+export function lightenColor(color, lightness = 85, alpha = null) {
+    let c = new Color(color).hsl().lightness(lightness)
+    if (alpha !== null)
+        c = c.rgb().alpha(alpha)
+    return c.string()
 }
 
-export function lightenColor2(color) {
-    return lightenColor(color,98)
+export function lightenColor2(color, alpha = null) {
+    return lightenColor(color, 98, alpha)
 }
+
+
+const colorRanges = {
+    buy: ['#00CC33', '#3300CC'],
+    sell: ['#CC0033', '#CCCC33'],
+}
+
+export function lineColor(buy, index) {
+    const range = buy ? colorRanges.buy : colorRanges.sell
+    const a = new Color(range[0]).rgb()
+    const b = new Color(range[1]).rgb()
+    // const z2 = Math.PI * Math.PI / 6 - 1 // ζ(2) modulo 1
+    const z2 = 1 - 1/Math.E // ζ(2) modulo 1
+    const kk = index * z2;
+    const k = kk - Math.trunc(kk)
+    const mix = (x, y) => (1 - k) * x + k * y
+    const c = new Color([mix(a.red(), b.red()), mix(a.green(), b.green()), mix(a.blue(), b.blue())])
+    // console.log('default color', c.string())
+    return c.string()
+}
+