new pool selection dialog and liquidity

src/charts/chart.js

@@ -1,7 +1,7 @@
 import {useChartOrderStore} from "@/orderbuild.js";
 import {invokeCallbacks, prototype} from "@/common.js";
 import {DataFeed, defaultSymbol, feelessTickerKey, getAllSymbols, lookupSymbol} from "@/charts/datafeed.js";
-import {intervalToSeconds, SingletonCoroutine} from "@/misc.js";
+import {intervalToSeconds, SingletonCoroutine, toHuman, toPrecision} from "@/misc.js";
 import {usePrefStore, useStore} from "@/store/store.js";
 import {tvCustomThemes} from "../../theme.js";
 
@@ -83,51 +83,49 @@ const subscribeEvents = [
 */
 
 
-let feeDropdown = null
+let poolButtonTextElement = null
 
-export function initFeeDropdown(w) {
-    widget = w
-    widget.createDropdown(
-        {
-            title: 'Fees',
-            tooltip: 'Choose Fee Tier',
-            items: [/*{title: 'Automatic Fee Selection', onSelect: () => {log('autofees')}}*/],
-            icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><g fill="none" stroke="currentColor"><circle cx="10" cy="10" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path stroke-linecap="square" d="M17.5 7.5l-7 13"/></g></svg>`,
-        }
-    ).then(dropdown => {
-        feeDropdown = dropdown;
-        updateFeeDropdown()
-    })
+export function initFeeDropdown() {
+    const button = widget.createButton()
+    button.setAttribute('title', 'See Pool Info and Choose Fee');
+    button.addEventListener('click', function() { co.showPoolSelection = true });
+    button.style.height = '34px';
+    button.style.display = 'flex';
+    button.style.alignItems = 'center';
+    button.addEventListener('mouseover', () => {
+        button.style.backgroundColor = 'rgb(60,60,60)';
+    });
+    button.addEventListener('mouseout', () => {
+        button.style.backgroundColor = '';
+    });
+    button.id = 'pool-button'
+    button.style.margin = '2px 0';
+    button.style.borderRadius = '4px';
+    button.classList.add('pool-button')
+
+    const span = document.createElement('span');
+    span.textContent = 'Pool';
+    span.style.marginY = 'auto';
+    button.appendChild(span);
+    poolButtonTextElement = span
+
+    updateFeeDropdown()
 }
 
 export function updateFeeDropdown() {
-    if (feeDropdown === null) return
+    if (poolButtonTextElement===null) return
     const symbolItem = useChartOrderStore().selectedSymbol
-    let items
-    if (symbolItem === null)
-        items = [{title: '0.00%'}]
-    else {
-        const feeGroup = symbolItem.feeGroup
-        items = feeGroup.map((p) => {
-            const [_addr, fee] = p
-            return {
-                title: (fee / 10000).toFixed(2) + '%',
-                onSelect: ()=>{
-                    if (fee !== symbolItem.fee)
-                        selectPool(fee)
-                },
-            }
-        })
+    let text = 'Pool '
+    text += (symbolItem.fee / 10000).toFixed(2) + '%'
+    const index = symbolItem.feeGroup.findIndex((p) => p[1] === symbolItem.fee)
+    if (symbolItem.liquiditySymbol) {
+        const liq = symbolItem.liquidities[index]
+        if (symbolItem.liquiditySymbol === 'USD')
+            text += ` $${toHuman(liq)}`
+        else
+            text = ` ${toHuman(liq)} ${symbolItem.liquiditySymbol}`
     }
-    feeDropdown.applyOptions({items})
-}
-
-function selectPool(fee) {
-    const co = useChartOrderStore();
-    const s = co.selectedSymbol;
-    const ticker = feelessTickerKey(s.ticker) + '|' + fee
-    if (ticker !== s.ticker)
-        setSymbolTicker(ticker).catch((e)=>console.error('Could not change TV symbol to', ticker))
+    poolButtonTextElement.textContent = text
 }
 
 export function initWidget(el) {
@@ -145,9 +143,9 @@ export function initWidget(el) {
         container: el,
         datafeed: DataFeed, // use this for ohlc
         locale: "en",
-        disabled_features: [],
-        enabled_features: ['saveload_separate_drawings_storage'],
-        drawings_access: {type: 'white', tools: [],}, // show no tools
+        disabled_features: ['main_series_scale_menu',],
+        enabled_features: ['saveload_separate_drawings_storage',],
+        // drawings_access: {type: 'white', tools: [],}, // show no tools
         custom_themes: tvCustomThemes,
         theme: useStore().theme,
         timezone: prefs.timezone,
@@ -155,7 +153,7 @@ export function initWidget(el) {
         // Chart Overrides
         // https://www.tradingview.com/charting-library-docs/latest/customization/overrides/chart-overrides
         overrides: {
-            // "mainSeriesProperties.priceAxisProperties.log": false,
+            "mainSeriesProperties.priceAxisProperties.log": false,
         }
 
     });
@@ -168,7 +166,7 @@ export function initWidget(el) {
     widget.subscribe('onSelectedLineToolChanged', onSelectedLineToolChanged)
     widget.subscribe('mouse_down', mouseDown)
     widget.subscribe('mouse_up', mouseUp)
-    widget.headerReady().then(()=>initFeeDropdown(widget))
+    widget.headerReady().then(()=>initFeeDropdown())
     widget.onChartReady(initChart)
     console.log('tv widget initialized')
 }