mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Bisq markets dashboard: Offers list. WIP.

Browse Source
This commit is contained in:
softsimon 2021-03-05 02:02:21 +07:00
parent 38e866995f
commit 2fca34faaa
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
7 changed files with 106 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/bisq/bisq-api.service.ts
View File

@ -60,6 +60,10 @@ export class BisqApiService {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
}
getMarketOffers$(market: string): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
}
getMarket24hVolumes$(): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
}

2
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@ -39,4 +39,4 @@
<tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
<td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</ng-template>

1
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
View File

@ -32,7 +32,6 @@ export class BisqDashboardComponent implements OnInit {
tickers[t].volume = volumes[t];
newTickers.push(tickers[t]);
}
console.log(newTickers);
newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));

118
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@ -5,44 +5,90 @@
<ng-container *ngIf="currency$ | async as currency">
<h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
<div class="float-left">
<ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</ng-container>
<ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
<span class="priceheader">
<ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</span>
</div>
</ng-container>
<form [formGroup]="radioGroupForm" class="mb-3 float-right">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'minute'"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_hour'"> 30M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'hour'"> 1H
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_day'"> 12H
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'day'"> 1D
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'week'"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'month'"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'year'"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'auto'" fragment="auto"> Auto
</label>
</div>
</form>
<form [formGroup]="radioGroupForm" class="mb-3 float-right">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'minute'"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_hour'"> 30M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'hour'"> 1H
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_day'"> 12H
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'day'"> 1D
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'week'"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'month'"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'year'"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'auto'" fragment="auto"> Auto
</label>
</div>
</form>
<app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
<app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
<br>
<ng-container *ngIf="offers$ | async as offers">
<div class="row row-cols-1 row-cols-md-2">
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.buys, direction: 'BUY', market: currency.market }"></ng-container>
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.sells, direction: 'SELL', market: currency.market }"></ng-container>
</div>
</ng-container>
</ng-container>
</ng-container>
</div>
<ng-template #offersList let-offers="offers" let-direction="direction", let-market="market">
<div class="col">
<h2>
<ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers">Buy Offers</ng-template>
<ng-template #sellOffers>Sell Offers</ng-template>
</h2>
<table class="table table-borderless table-striped">
<thead>
<th i18n>Price</th>
<th i18n>Amount ({{ market.lsymbol }})</th>
<th i18n>Amount ({{ market.rsymbol }})</th>
</thead>
<tbody>
<tr *ngFor="let offer of offers">
<td>
<ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} {{ market.lsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>

3
frontend/src/app/bisq/bisq-market/bisq-market.component.scss
View File

@ -0,0 +1,3 @@
.priceheader {
font-size: 24px;
}

19
frontend/src/app/bisq/bisq-market/bisq-market.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { combineLatest, merge, Observable, of } from 'rxjs';
@ -8,11 +8,13 @@ import { BisqApiService } from '../bisq-api.service';
@Component({
selector: 'app-bisq-market',
templateUrl: './bisq-market.component.html',
styleUrls: ['./bisq-market.component.scss']
styleUrls: ['./bisq-market.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BisqMarketComponent implements OnInit {
hlocData$: Observable<any>;
currency$: Observable<any>;
offers$: Observable<any>;
radioGroupForm: FormGroup;
defaultInterval = 'half_hour';
@ -32,7 +34,6 @@ export class BisqMarketComponent implements OnInit {
switchMap((markets) => combineLatest([of(markets), this.route.paramMap])),
map(([markets, routeParams]) => {
const pair = routeParams.get('pair');
console.log(markets);
return {
pair: pair.replace('_', '/').toUpperCase(),
market: markets[pair],
@ -40,6 +41,15 @@ export class BisqMarketComponent implements OnInit {
})
);
this.offers$ = this.route.paramMap
.pipe(
map(routeParams => routeParams.get('pair')),
switchMap((marketPair) => this.bisqApiService.getMarketOffers$(marketPair)),
map((offers) => {
return offers[Object.keys(offers)[0]];
})
);
this.hlocData$ = combineLatest([
this.route.paramMap,
merge(this.radioGroupForm.get('interval').valueChanges, of(this.defaultInterval)),
@ -55,9 +65,6 @@ export class BisqMarketComponent implements OnInit {
return h;
});
}),
tap((data) => {
console.log(data);
}),
);
}

5
frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts
View File

@ -1,10 +1,11 @@
import { createChart, CrosshairMode } from 'lightweight-charts';
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
@Component({
selector: 'app-lightweight-charts',
template: '<ng-component></ng-component>',
styleUrls: ['./lightweight-charts.component.scss']
styleUrls: ['./lightweight-charts.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy {
@Input() data: any;