From 308dd2c7adebff911b6a6e873a897adb162a29cd Mon Sep 17 00:00:00 2001 From: softsimon Date: Sat, 13 Mar 2021 18:24:50 +0700 Subject: [PATCH] Bisq markets: Recent trades. Separate Bisq master page. --- frontend/src/app/app-routing.module.ts | 15 +++- frontend/src/app/app.module.ts | 2 + frontend/src/app/bisq/bisq-api.service.ts | 4 + .../bisq-dashboard.component.html | 12 +-- .../bisq-market/bisq-market.component.html | 65 +++++++++++--- .../bisq/bisq-market/bisq-market.component.ts | 9 +- .../lightweight-charts.component.ts | 23 +---- .../bisq-master-page.component.html | 30 +++++++ .../bisq-master-page.component.scss | 85 +++++++++++++++++++ .../bisq-master-page.component.ts | 29 +++++++ frontend/src/app/services/state.service.ts | 2 + 11 files changed, 235 insertions(+), 41 deletions(-) create mode 100644 frontend/src/app/components/bisq-master-page/bisq-master-page.component.html create mode 100644 frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss create mode 100644 frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index b76526582..d9f020593 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -16,8 +16,9 @@ import { DashboardComponent } from './dashboard/dashboard.component'; import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component'; import { ApiDocsComponent } from './components/api-docs/api-docs.component'; import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; +import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component'; -const routes: Routes = [ +let routes: Routes = [ { path: '', component: MasterPageComponent, @@ -283,6 +284,18 @@ const routes: Routes = [ }, ]; +const browserWindow = window || {}; +// @ts-ignore +const browserWindowEnv = browserWindow.__env || {}; + +if (browserWindowEnv && browserWindowEnv.OFFICIAL_BISQ_MARKETS) { + routes = [{ + path: '', + component: BisqMasterPageComponent, + loadChildren: () => import('./bisq/bisq.module').then(m => m.BisqModule) + }]; +} + @NgModule({ imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled' diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1b30e0d21..f6b7351de 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -21,6 +21,7 @@ import { WebsocketService } from './services/websocket.service'; import { AddressLabelsComponent } from './components/address-labels/address-labels.component'; import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component'; import { MasterPageComponent } from './components/master-page/master-page.component'; +import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component'; import { AboutComponent } from './components/about/about.component'; import { TelevisionComponent } from './components/television/television.component'; import { StatisticsComponent } from './components/statistics/statistics.component'; @@ -55,6 +56,7 @@ import { HttpCacheInterceptor } from './services/http-cache.interceptor'; AppComponent, AboutComponent, MasterPageComponent, + BisqMasterPageComponent, TelevisionComponent, BlockchainComponent, StartComponent, diff --git a/frontend/src/app/bisq/bisq-api.service.ts b/frontend/src/app/bisq/bisq-api.service.ts index 94c065142..cb0ece96e 100644 --- a/frontend/src/app/bisq/bisq-api.service.ts +++ b/frontend/src/app/bisq/bisq-api.service.ts @@ -64,6 +64,10 @@ export class BisqApiService { return this.httpClient.get(API_BASE_URL + '/markets/offers?market=' + market); } + getMarketTrades$(market: string): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/trades?market=' + market); + } + getMarketVolumesByTime$(period: string): Observable { return this.httpClient.get(API_BASE_URL + '/markets/volumes/' + period); } diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html index c9f3d772c..bfd31677a 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html @@ -4,12 +4,12 @@ - - - - - - + + + + + + diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html index fef8aeb58..b1501ee62 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html @@ -1,8 +1,8 @@
- + - +

{{ currency.market.lname }} - {{ currency.pair }}

@@ -40,18 +40,50 @@
- - -
Powered by Tradingview
- +
- +
+ +
+ + +

Trade History (Last 100 trades)

+ +
RankCurrencyPairPriceVolume (7d)Trades (7d)RankCurrencyPairPriceVolume (7d)Trades (7d)
+ + + + + + + + + + + + + + +
DatePrice ({{ currency.market.rsymbol }})Trade size ({{ currency.market.rsymbol }})Trade size ({{ currency.market.lsymbol }})
+ {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }} + + {{ trade.price | currency: currency.market.rsymbol }} + {{ trade.price | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }} + + {{ trade.volume | currency: currency.market.rsymbol }} + {{ trade.volume | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }} + + {{ trade.amount | currency: currency.market.rsymbol }} + {{ trade.amount | number: '1.2-' + currency.market.lprecision }} {{ currency.market.lsymbol }} +
+ + @@ -67,9 +99,9 @@ - - - + + + @@ -88,6 +120,13 @@
PriceAmount ({{ market.lsymbol }})Amount ({{ market.rsymbol }})PriceAmount ({{ market.lsymbol }})Amount ({{ market.rsymbol }})
- - - \ No newline at end of file + + + + +
+
+
+ +
+ diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts index 05e9a79e9..de03e1aad 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts @@ -16,8 +16,9 @@ export class BisqMarketComponent implements OnInit, OnDestroy { hlocData$: Observable; currency$: Observable; offers$: Observable; + trades$: Observable; radioGroupForm: FormGroup; - defaultInterval = 'half_hour'; + defaultInterval = 'day'; constructor( private websocketService: WebsocketService, @@ -43,6 +44,12 @@ export class BisqMarketComponent implements OnInit, OnDestroy { }) ); + this.trades$ = this.route.paramMap + .pipe( + map(routeParams => routeParams.get('pair')), + switchMap((marketPair) => this.bisqApiService.getMarketTrades$(marketPair)), + ); + this.offers$ = this.route.paramMap .pipe( map(routeParams => routeParams.get('pair')), diff --git a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts index 30bfc1e9e..928030a49 100644 --- a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts +++ b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts @@ -1,5 +1,5 @@ import { createChart, CrosshairMode } from 'lightweight-charts'; -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy } from '@angular/core'; @Component({ selector: 'app-lightweight-charts', @@ -7,7 +7,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, O styleUrls: ['./lightweight-charts.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy { +export class LightweightChartsComponent implements OnChanges, OnDestroy { @Input() data: any; @Input() volumeData: any; @Input() precision: number; @@ -48,29 +48,12 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD }, priceScaleId: '', scaleMargins: { - top: 0.8, + top: 0.85, bottom: 0, }, }); } - ngAfterViewInit(): void { - /* - lineSeries.setData([ - { time: '2019-04-11', value: 80.01 }, - { time: '2019-04-12', value: 96.63 }, - { time: '2019-04-13', value: 76.64 }, - { time: '2019-04-14', value: 81.89 }, - { time: '2019-04-15', value: 74.43 }, - { time: '2019-04-16', value: 80.01 }, - { time: '2019-04-17', value: 96.63 }, - { time: '2019-04-18', value: 76.64 }, - { time: '2019-04-19', value: 81.89 }, - { time: '2019-04-20', value: 74.43 }, - ]); - */ - } - ngOnChanges() { if (!this.data) { return; diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html new file mode 100644 index 000000000..a15768b18 --- /dev/null +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html @@ -0,0 +1,30 @@ +
+ +
+ +
+ + + +
diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss new file mode 100644 index 000000000..3c0e31490 --- /dev/null +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss @@ -0,0 +1,85 @@ +li.nav-item.active { + background-color: #653b9c; +} + +fa-icon { + font-size: 1.66em; +} + +.navbar { + z-index: 100; +} + +li.nav-item { + padding-left: 10px; + padding-right: 10px; +} + +@media (min-width: 768px) { + .navbar { + padding: 0rem 2rem; + } + fa-icon { + font-size: 1.2em; + } + .dropdown-container { + margin-right: 16px; + } + li.nav-item { + padding: 10px; + } +} + +li.nav-item a { + color: #ffffff; +} + +.navbar-nav { + flex-direction: row; + justify-content: center; +} + +nav { + box-shadow: 0px 0px 15px 0px #000; +} + +.connection-badge { + position: absolute; + top: 13px; + left: 0px; + width: 140px; +} + +.badge { + margin: 0 auto; + display: table; +} + +.mainnet.active { + background-color: #653b9c; +} + +.liquid.active { + background-color: #116761; +} + +.testnet.active { + background-color: #1d486f; +} + +.signet.active { + background-color: #6f1d5d; +} + +.dropdown-divider { + border-top: 1px solid #121420; +} + +.dropdown-toggle::after { + vertical-align: 0.1em; +} + +.dropdown-item { + display: flex; + align-items:center; +} diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts new file mode 100644 index 000000000..cd9244ab0 --- /dev/null +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { Env, StateService } from '../../services/state.service'; +import { Observable, merge, of } from 'rxjs'; + +@Component({ + selector: 'app-bisq-master-page', + templateUrl: './bisq-master-page.component.html', + styleUrls: ['./bisq-master-page.component.scss'], +}) +export class BisqMasterPageComponent implements OnInit { + env: Env; + connectionState$: Observable; + navCollapsed = false; + isMobile = window.innerWidth <= 767.98; + officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; + + constructor( + private stateService: StateService, + ) { } + + ngOnInit() { + this.env = this.stateService.env; + this.connectionState$ = this.stateService.connectionState$; + } + + collapse(): void { + this.navCollapsed = !this.navCollapsed; + } +} diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 58eb75faf..30b4fd65c 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -24,6 +24,7 @@ export interface Env { ITEMS_PER_PAGE: number; KEEP_BLOCKS_AMOUNT: number; OFFICIAL_MEMPOOL_SPACE: boolean; + OFFICIAL_BISQ_MARKETS: boolean; NGINX_PROTOCOL?: string; NGINX_HOSTNAME?: string; NGINX_PORT?: string; @@ -33,6 +34,7 @@ const defaultEnv: Env = { 'TESTNET_ENABLED': false, 'SIGNET_ENABLED': false, 'LIQUID_ENABLED': false, + 'OFFICIAL_BISQ_MARKETS': false, 'BISQ_ENABLED': false, 'BISQ_SEPARATE_BACKEND': false, 'ITEMS_PER_PAGE': 10,