fetch prices uses WSS in trade creation modal

Author: spiderpug

admin/src/app/binance.service.ts

@@ -6,34 +6,34 @@ import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {TradeInfo} from './tradeInfo';
 
-
-// const binHttpOptions = {
-//   headers: new HttpHeaders({
-//     'Content-Type':  'application/json',
-//     'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
-//     'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
-//     'Access-Control-Allow-Origin': '*'
-//   })
-// };
-
+export class BinancePriceResult {
+  symbol: string;
+  bestAsk: string;
+  bestBid: string;
+}
 
 @Injectable({
   providedIn: 'root'
 })
 export class BinanceService {
 
   symbols: Subject<string>;
-  /*constructor(private wss: WebsocketService, private http: HttpClient) {
-  }*/
 
-  // getOrderBookTickers(): Observable<any> {
-  //   return this.http.get<any>(`${environment.BINANCE_API_URL}/api/v3/ticker/bookTicker`, binHttpOptions).pipe(
-  //     retry(3),
-  //     tap(orderbook => console.log(`fetched Binance getOrderBookTickers`)),
-  //     catchError(this.handleError('getOrderBookTickers', [])),
-  //     map(orderbook => JSON.parse(orderbook))
-  //   );
-  // }
+  getPrice(symbol: string): Subject<BinancePriceResult> {
+    const listener = this.listenSymbols([symbol]);
+
+    return <Subject<BinancePriceResult>>listener.pipe(
+      map(data => JSON.parse(data).data),
+      map(function(data) {
+        setTimeout(() => this.complete());
+        return Object.assign(new BinancePriceResult(), {
+          symbol: data.s,
+          bestAsk: data.a,
+          bestBid: data.b,
+        });
+      })
+    );
+  }
 
   listenSymbols(symbols: string[]): Subject<string> {
     if (this.symbols != null && this.symbols !== undefined) {

admin/src/app/trade-details/trade-details.component.html

@@ -74,6 +74,14 @@ <h4 class="modal-title pull-left">Trade ({{mode.str()}} mode)</h4>
             </div>
           </div>
         </div>
+
+        <div class="form-group row" *ngIf="priceInfo?.symbol == trade.symbol">
+          <label class="col-sm-2 col-form-label-sm">Price Info</label>
+          <div class="col-sm-10">
+            <span class="badge badge-success">Bid: {{ priceInfo.bestBid }}</span>&nbsp;
+            <span class="badge badge-danger">Ask: {{ priceInfo.bestAsk }}</span>
+          </div>
+        </div>
       </fieldset>
     <app-exit-details [trade]="trade" [mode]="mode"></app-exit-details>
     <app-sl-details [trade]="trade" [mode]="mode"></app-sl-details>

admin/src/app/trade-details/trade-details.component.ts

@@ -2,6 +2,7 @@ import {AfterContentInit, ChangeDetectorRef, Component, ElementRef, OnInit, View
 import {Location} from '@angular/common';
 import {ActivatedRoute, ParamMap, Router} from '@angular/router';
 import {BotApi} from '../botapi';
+import {BinanceService, BinancePriceResult} from '../binance.service';
 import {switchMap} from 'rxjs/operators';
 import {Mode, TradeDetailMode, TradeDetails} from '../trade-details';
 import {Observable} from 'rxjs';
@@ -23,6 +24,7 @@ export class TradeDetailsComponent implements OnInit {
   // editMode: boolean;
   mode: Mode;
   // trade: TradeDetails;
+  priceInfo: BinancePriceResult;
 
   exchangeInfo: any[];
   symbols: Set<string>;
@@ -41,6 +43,7 @@ export class TradeDetailsComponent implements OnInit {
               private router: Router,
               private location: Location,
               private api: BotApi,
+              private binance: BinanceService,
               private tradeService: TradeService) {
 
     this.route.paramMap.subscribe(params => this.mode = new Mode(<TradeDetailMode>params.get('mode')));
@@ -105,8 +108,17 @@ export class TradeDetailsComponent implements OnInit {
     this.router.navigate(['/trades']);
   }
 
+  onPriceUpdate(price: BinancePriceResult): void {
+    this.priceInfo = price;
+  }
+
   onSymbolSelected(event) {
     if (this.mode.isCreate()) {
+      if (this.trade.asset !== event.item.b) {
+        // query binance prices
+        this.binance.getPrice(event.item.s).subscribe(this.onPriceUpdate.bind(this));
+      }
+
       this.trade.asset = event.item.b;
     }
   }