Merge branch 'nymkappa/subscription-tag' into nymkappa/mega-branch

frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts

@@ -4,6 +4,7 @@ import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
 import { Transaction } from '../../interfaces/electrs.interface';
 import { nextRoundNumber } from '../../shared/common.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 export type AccelerationEstimate = {
   txSummary: TxSummary;
@@ -61,7 +62,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   maxRateOptions: RateOption[] = [];
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private storageService: StorageService,
     private cd: ChangeDetectorRef
   ) { }
@@ -81,7 +82,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   ngOnInit() {
     this.user = this.storageService.getAuth()?.user ?? null;
 
-    this.estimateSubscription = this.apiService.estimate$(this.tx.txid).pipe(
+    this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
       tap((response) => {
         if (response.status === 204) {
           this.estimate = undefined;
@@ -181,7 +182,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
     if (this.accelerationSubscription) {
       this.accelerationSubscription.unsubscribe();
     }
-    this.accelerationSubscription = this.apiService.accelerate$(
+    this.accelerationSubscription = this.servicesApiService.accelerate$(
       this.tx.txid,
       this.userBid
     ).subscribe({

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
-import { EChartsOption, graphic } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { Observable, Subscription, combineLatest } from 'rxjs';
-import { map, max, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
+import { map, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -11,6 +10,8 @@ import { StorageService } from '../../../services/storage.service';
 import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
 import { Acceleration } from '../../../interfaces/node-api.interface';
+import { ServicesApiServices } from '../../../services/services-api.service';
+import { ApiService } from '../../../services/api.service';
 
 @Component({
   selector: 'app-acceleration-fees-graph',
@@ -54,6 +55,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
@@ -73,7 +75,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       this.timespan = this.miningWindowPreference;
 
       this.statsObservable$ = combineLatest([
-        (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
+        (this.accelerations$ || this.servicesApiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
@@ -101,7 +103,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
             this.isLoading = true;
             this.storageService.setValue('miningWindowPreference', timespan);
             this.timespan = timespan;
-            return this.apiService.getAccelerationHistory$({});
+            return this.servicesApiService.getAccelerationHistory$({});
           })
         ),
         this.radioGroupForm.get('dateSpan').valueChanges.pipe(

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
 import { Observable, catchError, of, switchMap, tap } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
-import { ApiService } from '../../../services/api.service';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -26,7 +26,7 @@ export class AccelerationsListComponent implements OnInit {
   skeletonLines: number[] = [];
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private websocketService: WebsocketService,
     public stateService: StateService,
     private cd: ChangeDetectorRef,
@@ -41,7 +41,7 @@ export class AccelerationsListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
-    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.apiService.getAccelerations$() : this.apiService.getAccelerationHistory$({ timeframe: '1m' }));
+    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistory$({ timeframe: '1m' }));
     this.accelerationList$ = accelerationObservable$.pipe(
       switchMap(accelerations => {
         if (this.pending) {

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -3,12 +3,12 @@ import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
-import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
-import { ApiService } from '../../../services/api.service';
+import { Observable, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
 import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
@@ -33,7 +33,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
-    private apiService: ApiService,
+    private serviceApiServices: ServicesApiServices,
     private stateService: StateService,
   ) {
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
@@ -45,7 +45,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.pendingAccelerations$ = interval(30000).pipe(
       startWith(true),
       switchMap(() => {
-        return this.apiService.getAccelerations$();
+        return this.serviceApiServices.getAccelerations$();
       }),
       catchError((e) => {
         return of([]);
@@ -56,7 +56,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
       switchMap((chainTip) => {
-        return this.apiService.getAccelerationHistory$({ timeframe: '1m' });
+        return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m' });
       }),
       catchError((e) => {
         return of([]);

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
 import { Acceleration } from '../../../interfaces/node-api.interface';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 @Component({
   selector: 'app-pending-stats',
@@ -15,11 +15,11 @@ export class PendingStatsComponent implements OnInit {
   public accelerationStats$: Observable<any>;
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = (this.accelerations$ || this.apiService.getAccelerations$()).pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.servicesApiService.getAccelerations$()).pipe(
       switchMap(accelerations => {
         let totalAccelerations = 0;
         let totalFeeDelta = 0;

frontend/src/app/components/menu/menu.component.html

@@ -2,8 +2,19 @@
   <div class="d-flex menu-click">
 
     <nav class="scrollable menu-click">
-      <span *ngIf="userAuth" class="menu-click">
-        <strong class="menu-click text-nowrap ellipsis">@ {{ userAuth.user.username }}</strong>
+      <span *ngIf="user$ | async as user" class="menu-click">
+        <span class="menu-click text-nowrap ellipsis">
+          <strong>
+            <span *ngIf="user.username.includes('@'); else usernamenospace">{{ user.username }}</span>
+            <ng-template #usernamenospace>@{{ user.username }}</ng-template>
+          </strong>
+        </span>
+        <span class="badge mr-1 badge-og" *ngIf="user.ogRank">
+          OG #{{ user.ogRank }}
+        </span>
+        <span class="badge mr-1 badge-default" [class]="'badge-' + user.subscription_tag" *ngIf="user.subscription_tag !== 'free'">
+          {{ user.subscription_tag.toUpperCase() }}
+        </span>
       </span>
       <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>

frontend/src/app/components/menu/menu.component.scss

@@ -55,4 +55,36 @@
 
 @media screen and (max-height: 450px) {
   .sidenav a {font-size: 18px;}
+}
+
+.badge-default {
+  background-color: black;
+}
+
+.badge-og {
+  background-color: #4a68b9;
+}
+
+.badge-pleb {
+  background-color: #3ccbe3;
+}
+
+.badge-chad {
+  background-color: #957d0b;
+}
+
+.badge-whale {
+  background-color: #653b9c;
+}
+
+.badge-silver {
+  background-color: #95a5a6;
+}
+
+.badge-gold {
+  background-color: #f1c40f;
+}
+
+.badge-platinium {
+  background-color: #653b9c;
 }

frontend/src/app/components/menu/menu.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostListener, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ApiService } from '../../services/api.service';
 import { MenuGroup } from '../../interfaces/services.interface';
 import { StorageService } from '../../services/storage.service';
 import { Router, NavigationStart } from '@angular/router';
 import { StateService } from '../../services/state.service';
+import { IUser, ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-menu',
@@ -18,11 +18,12 @@ export class MenuComponent implements OnInit, OnDestroy {
   @Output() menuToggled = new EventEmitter<boolean>();
   
   userMenuGroups$: Observable<MenuGroup[]> | undefined;
+  user$: Observable<IUser | null>;
   userAuth: any | undefined;
   isServicesPage = false;
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiServices: ServicesApiServices,
     private storageService: StorageService,
     private router: Router,
     private stateService: StateService
@@ -32,7 +33,8 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.userAuth = this.storageService.getAuth();
     
     if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
-      this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+      this.userMenuGroups$ = this.servicesApiServices.getUserMenuGroups$();
+      this.user$ = this.servicesApiServices.userSubject$;
     }
 
     this.isServicesPage = this.router.url.includes('/services/');
@@ -55,10 +57,10 @@ export class MenuComponent implements OnInit, OnDestroy {
   }
 
   logout(): void {
-    this.apiService.logout$().subscribe(() => {
+    this.servicesApiServices.logout$().subscribe(() => {
       this.loggedOut.emit(true);
       if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
-        this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+        this.userMenuGroups$ = this.servicesApiServices.getUserMenuGroups$();
         this.router.navigateByUrl('/');
       }
     });

frontend/src/app/components/transaction/transaction.component.ts

@@ -7,7 +7,6 @@ import {
   catchError,
   retryWhen,
   delay,
-  map,
   mergeMap,
   tap
 } from 'rxjs/operators';
@@ -26,6 +25,7 @@ import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Price, PriceService } from '../../services/price.service';
 import { isFeatureActive } from '../../bitcoin.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-transaction',
@@ -113,6 +113,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private seoService: SeoService,
     private priceService: PriceService,
     private storageService: StorageService
@@ -246,7 +247,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.accelerationInfo = null;
       }),
       switchMap((blockHash: string) => {
-        return this.apiService.getAccelerationHistory$({ blockHash });
+        return this.servicesApiService.getAccelerationHistory$({ blockHash });
       }),
       catchError(() => {
         return of(null);