Added easy updatable bootstrap npm package instead of hardcoded css f…

…ile. ████ ███ To request new features or in case this commit breaks something for you, ████ ███ please, create a new github issue with all possible information for me, ▓███▀█▄ but never share your API Keys! ▒▓██ ███ ░▒▓█ ███ Signed-off-by: Carles Tubio <[email protected]> _________________________________________ / Hello, WORLD! \ | | \ pssst.. 1.00000000 BTC = 63784.15 EUR. / ----------------------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||
ctubio · Oct 21, 2024 · e20f352 · e20f352
1 parent 85c8669
commit e20f352
Show file tree

Hide file tree

Showing 14 changed files with 742 additions and 3,645 deletions.
diff --git a/Makefile b/Makefile
@@ -2,7 +2,7 @@ K         ?= K.sh
 MAJOR      = 0
 MINOR      = 7
 PATCH      = 0
-BUILD      = 45
+BUILD      = 46
 
 OBLIGATORY = DISCLAIMER: This is strict non-violent software: \n$\
              if you hurt other living creatures, please stop; \n$\

diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ to easy mod and start developing a new custom bot.
 
 All currency pairs are supported (use `--list` argument to see all currently tradable pairs on a given exchange).
 
-<table><tbody><tr><td></td><td align="center"><b>under maintenance</b></td><td colspan="2" align="center" nowrap><b>under development or abandoned</b></td></tr><tr><td align="center"><b>Spot Trading</b></td><td nowrap><a href="https://www.coinbase.com/en-es/advanced-trade">Coinbase</a> <sub>(<a href="https://help.coinbase.com/en/coinbase/trading-and-funding/advanced-trade/advanced-trade-fees">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.binance.com/">Binance</a> <sub>(<a href="https://www.binance.com/en/fee/schedule">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://www.bitmex.com/">BitMEX</a> <sub>(<a href="https://www.bitmex.com/wallet/fees/derivatives">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td><td nowrap><a href="https://www.kraken.com/">Kraken</a> <sub>(<a href="https://www.kraken.com/features/fee-schedule">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.kucoin.com/">KuCoin</a> <sub>(<a href="https://www.kucoin.com/vip/level">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://www.bitfinex.com/">Bitfinex</a> <sub>(<a href="https://www.bitfinex.com/fees">fees</a>)</sub><br><a href="https://www.ethfinex.com/">Ethfinex</a> <sub>(<a href="">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td><td nowrap><a href="https://www.gate.io/">Gate.io</a> <sub>(<a href="https://www.gate.io/fee">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://hitbtc.com/">HitBTC</a> <sub>(<a href="https://hitbtc.com/fee-tier">fees</a>)</sub><br><a href="https://bequant.io/">Bequant</a> <sub>(<a href="https://bequant.io/fees-and-limits">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.poloniex.com/">Poloniex</a> <sub>(<a href="https://poloniex.com/fees/">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td></tr><tr><td align="center"><b>Margin Trading</b></td><td nowrap><i>none</i></td><td colspan="2" nowrap><i>none</i></td></tr></tbody></table>
+<table><tbody><tr><td></td><td align="center"><b>under maintenance</b></td><td colspan="2" align="center" nowrap><b>under development or abandoned</b></td></tr><tr><td align="center"><b>Spot Trading</b></td><td nowrap><a href="https://www.coinbase.com/en-es/advanced-trade">Coinbase</a> <sub>(<a href="https://help.coinbase.com/en/coinbase/trading-and-funding/advanced-trade/advanced-trade-fees">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.binance.com/">Binance</a> <sub>(<a href="https://www.binance.com/en/fee/schedule">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://www.bitmex.com/">BitMEX</a> <sub>(<a href="https://www.bitmex.com/wallet/fees/derivatives">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td><td nowrap><a href="https://www.kraken.com/">Kraken</a> <sub>(<a href="https://www.kraken.com/features/fee-schedule">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.kucoin.com/">KuCoin</a> <sub>(<a href="https://www.kucoin.com/vip/level">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://www.bitfinex.com/">Bitfinex</a> <sub>(<a href="https://www.bitfinex.com/fees">fees</a>)</sub><br><a href="https://www.ethfinex.com/">Ethfinex</a> <sub>(<a href="https://www.ethfinex.com/fees">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td><td nowrap><a href="https://www.gate.io/">Gate.io</a> <sub>(<a href="https://www.gate.io/fee">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i><br><br><a href="https://hitbtc.com/">HitBTC</a> <sub>(<a href="https://hitbtc.com/fee-tier">fees</a>)</sub><br><a href="https://bequant.io/">Bequant</a> <sub>(<a href="https://bequant.io/fees-and-limits">fees</a>)</sub><br> &#10239; <i>REST + 2 WebSockets</i><br><br><a href="https://www.poloniex.com/">Poloniex</a> <sub>(<a href="https://poloniex.com/fees/">fees</a>)</sub><br> &#10239; <i>REST + 1 WebSocket</i></td></tr><tr><td align="center"><b>Margin Trading</b></td><td nowrap><i>none</i></td><td colspan="2" nowrap><i>none</i></td></tr></tbody></table>
 
 If you ask me, [<img height="20px" src="https://github.com/user-attachments/assets/e84f2708-d29a-423d-a702-42c87a8ffe5b">](https://advanced.coinbase.com/join/KAME9XG) is the best and most secure by far, so here is my [referral link](https://advanced.coinbase.com/join/KAME9XG) for both of us to enjoy.
 

diff --git a/src/bin/+portfolios/+portfolios.client/Client.ts b/src/bin/+portfolios/+portfolios.client/Client.ts
@@ -9,11 +9,11 @@ import {Socket, Models} from 'lib/K';
       <submit-order
         [markets]="markets"></submit-order>
     </div>
-    <div class="col-md-12 col-xs-12">
+    <div class="row col-md-12 col-xs-12">
       <div class="col-md-6">
         <button type="button"
-          class="btn btn-default" style="position: absolute; top: 10px;left: 10px;"
-          (click)="showSubmitOrder = !showSubmitOrder">New Order</button>
+          class="btn btn-default" style="float: left;position: relative;top: 10px;left: 10px;"
+          (click)="showSubmitOrder = !showSubmitOrder">{{showSubmitOrder ? 'Hide' : 'Show'}} New Order</button>
         <settings
           [product]="product"
           [settings]="settings"></settings>

diff --git a/src/bin/+portfolios/+portfolios.client/Orders.ts b/src/bin/+portfolios/+portfolios.client/Orders.ts
@@ -14,7 +14,7 @@ import {Shared, Socket, Models} from 'lib/K';
           <span class="sell" title="Best Ask Price on {{ filter }}">{{ best_ask }}<i class="beacon sym-_default-s sym-{{ quote.toLowerCase() }}-s" ></i></span>
           <span class="buy" title="Best Bid Price on {{ filter }}">{{ best_bid }}<i class="beacon sym-_default-s sym-{{ quote.toLowerCase() }}-s" ></i></span>
       </a>
-      <a
+      <a href="#" 
         *ngFor="let x of symbols"
         (click)="applyFilter(x.symbol)"
         [ngStyle]="{'cursor':'pointer','padding': '0px 40px 0px 10px', 'font-weight': filter==x.symbol?600:300, 'opacity': filter==x.symbol?1.0:0.7}"
@@ -84,7 +84,7 @@ export class OrdersComponent {
       headerName: 'cxl',
       suppressSizeToFit: true,
       cellRenderer: (params) => `<button type="button" class="btn btn-danger btn-xs">
-          <span data-action-type="remove"'>&times;</span>
+          <span data-action-type="remove"'>&#10006;</span>
         </button>`
     }, {
       width: 74,

diff --git a/src/bin/+portfolios/+portfolios.client/Submit.ts b/src/bin/+portfolios/+portfolios.client/Submit.ts
@@ -4,7 +4,7 @@ import {Socket, Models} from 'lib/K';
 
 @Component({
   selector: 'submit-order',
-  template: `<table class="table table-responsive">
+  template: `<table class="table table-responsive" style="width: 715px;margin-left: 10px;">
     <thead>
       <tr>
         <th style="width:100px;">Symbol:</th>

diff --git a/src/bin/trading-bot/trading-bot.client/Client.ts b/src/bin/trading-bot/trading-bot.client/Client.ts
@@ -15,7 +15,7 @@ import {Socket, Shared, Models} from 'lib/K';
   </div>
   <div class="row">
     <div class="col-md-1 col-xs-12 text-center" style="padding-right:0px;">
-      <div class="row exchange">
+      <div class="exchange">
         <state-button
           [product]="product"
           [state]="state"
@@ -74,84 +74,81 @@ import {Socket, Shared, Models} from 'lib/K';
             </button>
           </div>
       </div>
-    </div>
-    <div [hidden]="!showSubmitOrder"
-      class="col-md-5 col-xs-12">
-      <submit-order
-        [product]="product"></submit-order>
-    </div>
-    <div [hidden]="!showStats"
-      [ngClass]="'col-md-11 col-xs-12  ' + (showStats == 2 ? 'absolute-charts' : 'relative-charts')">
-      <stats
-        ondblclick="this.style.opacity=this.style.opacity<1?1:0.4"
-        [marketWidth]="marketWidth"
-        [_showStats]="!!showStats"
-        [product]="product"
-        [quotingParameters]="quotingParameters"
-        [targetBasePosition]="targetBasePosition"
-        [marketChart]="marketChart"
-        [tradesChart]="tradesChart"
-        [position]="position"
-        [fairValue]="fairValue"></stats>
-    </div>
-    <div [hidden]="showStats === 1"
-      class="col-md-{{ showTakers ? '9' : '11' }} col-xs-12"
-      style="padding-left:0px;padding-bottom:0px;">
-      <div class="row" style="padding-top:0px;">
-        <div class="col-md-4 col-xs-12" style="padding-left:0px;padding-top:0px;padding-right:0px;">
-          <div class="row">
-            <div class="col-md-6">
-              <safety
-                [product]="product"
-                [fairValue]="fairValue"
-                [tradeSafety]="tradeSafety"></safety>
-            </div>
+      </div>
+    <div class="col-md-11 col-xs-12 row">
+      <div [hidden]="!showSubmitOrder"
+        class="col-md-6 col-xs-12">
+        <submit-order
+          [product]="product"></submit-order>
+      </div>
+      <div [hidden]="!showStats"
+        [ngClass]="'col-md-12 col-xs-12  ' + (showStats == 2 ? 'absolute-charts' : 'relative-charts')">
+        <stats
+          ondblclick="this.style.opacity=this.style.opacity<1?1:0.4"
+          [marketWidth]="marketWidth"
+          [_showStats]="!!showStats"
+          [product]="product"
+          [quotingParameters]="quotingParameters"
+          [targetBasePosition]="targetBasePosition"
+          [marketChart]="marketChart"
+          [tradesChart]="tradesChart"
+          [position]="position"
+          [fairValue]="fairValue"></stats>
+      </div>
+      <div [hidden]="showStats === 1"
+        class="col-md-{{ showTakers ? '10' : '12' }} col-xs-12">
+        <div class="row">
+          <div class="col-md-4 col-xs-12">
             <market
+              class="row" style="padding: 0px 5px;"
               [tradeFreq]="tradeFreq"
               (onBidsLength)="onBidsLength($event)"
               (onAsksLength)="onAsksLength($event)"
               (onMarketWidth)="onMarketWidth($event)"
               [product]="product"
               [addr]="addr"
+              [fairValue]="fairValue"
+              [tradeSafety]="tradeSafety"
               [status]="status"
               [market]="market"
               [orders]="orders"
               [targetBasePosition]="targetBasePosition"></market>
           </div>
-        </div>
-        <div class="col-md-8 col-xs-12" style="padding-left:0px;padding-right:0px;padding-top:0px;">
-          <div class="row">
-            <div class="notepad col-md-2 col-xs-12 text-center">
-              <textarea
-                [(ngModel)]="notepad"
-                (ngModelChange)="changeNotepad(notepad)"
-                placeholder="ephemeral notepad"
-                class="ephemeralnotepad"
-                style="height:131px;width: 100%;max-width: 100%;"></textarea>
+          <div class="col-md-8 col-xs-12">
+            <div class="row">
+              <div class="notepad col-md-2 col-xs-12 text-center">
+                <textarea
+                  [(ngModel)]="notepad"
+                  (ngModelChange)="changeNotepad(notepad)"
+                  placeholder="ephemeral notepad"
+                  class="ephemeralnotepad"
+                  style="height:131px;width: 100%;max-width: 100%;"></textarea>
+              </div>
+              <div class="col-md-10 col-xs-12" style="padding-left: 0px;">
+                <orders
+                  [product]="product"
+                  [orders]="orders"></orders>
+              </div>
             </div>
-            <div class="col-md-10 col-xs-12" style="padding-right:0px;padding-top:0px;">
-              <orders
+            <div class="row">
+              <trades
+                style="padding-left: 0px;"
+                (onTradesChartData)="onTradesChartData($event)"
+                (onTradesMatchedLength)="onTradesMatchedLength($event)"
+                (onTradesLength)="onTradesLength($event)"
                 [product]="product"
-                [orders]="orders"></orders>
+                [quotingParameters]="quotingParameters"
+                [trade]="trade"></trades>
             </div>
           </div>
-          <div class="row">
-            <trades
-              (onTradesChartData)="onTradesChartData($event)"
-              (onTradesMatchedLength)="onTradesMatchedLength($event)"
-              (onTradesLength)="onTradesLength($event)"
-              [product]="product"
-              [quotingParameters]="quotingParameters"
-              [trade]="trade"></trades>
-          </div>
         </div>
       </div>
-    </div>
-    <div *ngIf="showTakers && showStats !== 1"
-      class="col-md-2 col-xs-12" style="padding-left:0px;">
-      <takers
-        [product]="product"
-        [taker]="taker"></takers>
+      <div *ngIf="showTakers && showStats !== 1"
+        class="col-md-2 col-xs-12" style="padding-left:0px;">
+        <takers
+          [product]="product"
+          [taker]="taker"></takers>
+      </div>
     </div>
   </div>`
 })
@@ -344,7 +341,7 @@ export class ClientComponent implements OnInit {
       var div = document.createElement('div');
         div.className = 'dialog-box';
         div.id = uniqueId;
-        div.innerHTML = '<div class="dialog-content">&nbsp;</div><h3 class="dialog-title"><a href="javascript:;" class="dialog-close" title="Close">&times;</a></h3>';
+        div.innerHTML = '<div class="dialog-content">&nbsp;</div><h3 class="dialog-title"><a href="javascript:;" class="dialog-close" title="Close">&#10006;</a></h3>';
       document.body.appendChild(div);
     }
 

diff --git a/src/bin/trading-bot/trading-bot.client/Market.ts b/src/bin/trading-bot/trading-bot.client/Market.ts
@@ -4,20 +4,24 @@ import {Models} from 'lib/K';
 
 @Component({
   selector: 'market',
-  template: `<div class="col-md-6">
-    <div class="tradeSafety2">
-      <div>
-        <div class="param-info"><span class="param-label">Market Width</span>:<span class="param-value {{ marketWidth ? \'text-danger\' : \'text-muted\' }}">{{ marketWidth.toFixed(product.tickPrice) }}</span></div>
-        <div class="param-info"><span class="param-label">Quote Width</span>:<span class="param-value {{ ordersWidth ? \'text-danger\' : \'text-muted\' }}">{{ ordersWidth.toFixed(product.tickPrice) }}</span></div>
-        <div class="param-info"><span class="param-label">Quotes</span>:<span class="param-value"><span title="Quotes in memory Waiting status update" class="{{ status.quotesInMemoryWaiting ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryWaiting }}</span>/<span title="Quotes in memory Working" class="{{ status.quotesInMemoryWorking ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryWorking }}</span>/<span title="Quotes in memory Zombie" class="{{ status.quotesInMemoryZombies ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryZombies }}</span></span></div>
-        <div class="param-info"><span class="param-label">openOrders/60sec</span>:<span class="param-value {{ tradeFreq ? \'text-danger\' : \'text-muted\' }}">{{ tradeFreq }}</span></div>
-        <div class="param-info"><span class="param-label">Wallet TBP</span>:<span class="param-value text-danger">{{ targetBasePosition.tbp.toFixed(8) }}</span></div>
-        <div class="param-info"><span class="param-label">pDiv</span>:<span class="param-value text-danger">{{ targetBasePosition.pDiv.toFixed(8) }}</span></div>
-        <div class="param-info"><span class="param-label">APR</span>:<span class="param-value {{ status.sideAPR ? \'text-danger\' : \'text-muted\' }}">{{ getAPR() }}</span></div>
-      </div>
+  template: `<div class="tradeSafetyBg col-md-6">
+    <safety
+      [product]="product"
+      [fairValue]="fairValue"
+      [tradeSafety]="tradeSafety"></safety>
+  </div>
+  <div class="col-md-6 tradeSafetyBg tradeSafety2">
+    <div>
+      <div class="param-info"><span class="param-label">Market Width</span>:<span class="param-value {{ marketWidth ? \'text-danger\' : \'text-muted\' }}">{{ marketWidth.toFixed(product.tickPrice) }}</span></div>
+      <div class="param-info"><span class="param-label">Quote Width</span>:<span class="param-value {{ ordersWidth ? \'text-danger\' : \'text-muted\' }}">{{ ordersWidth.toFixed(product.tickPrice) }}</span></div>
+      <div class="param-info"><span class="param-label">Quotes</span>:<span class="param-value"><span title="Quotes in memory Waiting status update" class="{{ status.quotesInMemoryWaiting ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryWaiting }}</span>/<span title="Quotes in memory Working" class="{{ status.quotesInMemoryWorking ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryWorking }}</span>/<span title="Quotes in memory Zombie" class="{{ status.quotesInMemoryZombies ? \'text-danger\' : \'text-muted\' }}">{{ status.quotesInMemoryZombies }}</span></span></div>
+      <div class="param-info"><span class="param-label">openOrders/60sec</span>:<span class="param-value {{ tradeFreq ? \'text-danger\' : \'text-muted\' }}">{{ tradeFreq }}</span></div>
+      <div class="param-info"><span class="param-label">Wallet TBP</span>:<span class="param-value text-danger">{{ targetBasePosition.tbp.toFixed(8) }}</span></div>
+      <div class="param-info"><span class="param-label">pDiv</span>:<span class="param-value text-danger">{{ targetBasePosition.pDiv.toFixed(8) }}</span></div>
+      <div class="param-info"><span class="param-label">APR</span>:<span class="param-value {{ status.sideAPR ? \'text-danger\' : \'text-muted\' }}">{{ getAPR() }}</span></div>
     </div>
   </div>
-  <div style="padding-right:4px;padding-left:4px;padding-top:4px;line-height:1.3;">
+  <div style="padding-left: 0px;padding-right: 0px;padding-top:4px;line-height:1.3;">
     <table class="marketQuoting table table-hover table-responsive text-center">
       <tr class="info">
         <td>BID Size<i class="beacon sym-{{ product.base.toLowerCase() }}-s"></i></td>
@@ -91,6 +95,10 @@ export class MarketComponent {
 
   @Input() product: Models.ProductAdvertisement;
 
+  @Input() fairValue: Models.FairValue;
+
+  @Input() tradeSafety: Models.TradeSafety;
+
   @Input() targetBasePosition: Models.TargetBasePositionValue;
 
   @Input() tradeFreq: number;

diff --git a/src/bin/trading-bot/trading-bot.client/Orders.ts b/src/bin/trading-bot/trading-bot.client/Orders.ts
@@ -37,7 +37,7 @@ export class OrdersComponent {
       headerName: 'cxl',
       suppressSizeToFit: true,
       cellRenderer: (params) => `<button type="button" class="btn btn-danger btn-xs">
-          <span data-action-type="remove"'>&times;</span>
+          <span data-action-type="remove"'>&#10006;</span>
         </button>`
     }, {
       width: 82,

diff --git a/src/bin/trading-bot/trading-bot.client/Stats.ts b/src/bin/trading-bot/trading-bot.client/Stats.ts
@@ -4,7 +4,7 @@ import {Shared, Models} from 'lib/K';
 
 @Component({
   selector: 'stats',
-  template: `<div class="col-md-12 col-xs-12" style="height:622px;">
+  template: `<div class="col-md-12 col-xs-12 row" style="height:622px;">
     <div class="col-md-6 col-xs-6">
         <highcharts-chart
           [Highcharts]="Highcharts"

diff --git a/src/bin/trading-bot/trading-bot.client/Trades.ts b/src/bin/trading-bot/trading-bot.client/Trades.ts
@@ -55,7 +55,7 @@ export class TradesComponent {
       suppressSizeToFit: true,
       cellRenderer: (params) => {
         return `<button type="button" class="btn btn-danger btn-xs">
-          <span data-action-type="remove">&times;</span>
+          <span data-action-type="remove">&#10006;</span>
         </button>`;
       }
     }, {