Merge pull request #5611 from mempool/nymkappa/demo-mode-but-it-does-not-crash-the-tv-anymore-well-maybe-we-ll-see-about-this

[demo] better? demo mode

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

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { StateService } from '@app/services/state.service';
 import { WebsocketService } from '@app/services/websocket.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { handleDemoRedirect } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-graphs',
@@ -13,7 +15,9 @@ export class GraphsComponent implements OnInit {
 
   constructor(
     public stateService: StateService,
-    private websocketService: WebsocketService
+    private websocketService: WebsocketService,
+    private router: Router,
+    private route: ActivatedRoute
   ) { }
 
   ngOnInit(): void {
@@ -22,5 +26,7 @@ export class GraphsComponent implements OnInit {
     if (this.stateService.env.ACCELERATOR === true && (this.stateService.env.MINING_DASHBOARD === true || this.stateService.env.LIGHTNING === true)) {
       this.flexWrap = true;
     }
+
+    handleDemoRedirect(this.route, this.router);
   }
 }

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

@@ -3,8 +3,8 @@ import { Subscription } from 'rxjs';
 import { MarkBlockState, StateService } from '@app/services/state.service';
 import { specialBlocks } from '@app/app.constants';
 import { BlockExtended } from '@interfaces/node-api.interface';
-import { Router } from '@angular/router';
-import { sleep$ } from '@app/shared/common.utils';
+import { Router, ActivatedRoute } from '@angular/router';
+import { handleDemoRedirect } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-start',
@@ -63,7 +63,8 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
   constructor(
     public stateService: StateService,
     private cd: ChangeDetectorRef,
-    private router: Router
+    private router: Router,
+    private route: ActivatedRoute
   ) {
     this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
     if (this.stateService.network === '') {
@@ -71,26 +72,8 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
     }
   }
 
-  async demoMode() {
-    // @ts-ignore
-    if (!window.demoMode) {
-      // @ts-ignore
-      window.demoMode = true;
-      const paths = ['', 'acceleration', 'mining', 'lightning'];
-      let i = 0;
-      while ('Bitcoin is still alive') {
-        i = (i + 1) % paths.length;
-        this.router.navigateByUrl(paths[i]);
-        await sleep$(30000);
-      }
-    }
-  }
-
   ngOnInit() {
-    // @ts-ignore
-    if (window.location.search === '?demo=1') {
-      this.demoMode();
-    }
+    handleDemoRedirect(this.route, this.router);
 
     this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
     this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {

frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { WebsocketService } from '@app/services/websocket.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { handleDemoRedirect } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-lightning-wrapper',
@@ -11,10 +13,14 @@ export class LightningWrapperComponent implements OnInit {
 
   constructor(
     private websocketService: WebsocketService,
+    private router: Router,
+    private route: ActivatedRoute
   ) { }
 
   ngOnInit() {
     this.websocketService.want(['blocks']);
+
+    handleDemoRedirect(this.route, this.router);
   }
 
 }

frontend/src/app/shared/common.utils.ts

@@ -1,6 +1,7 @@
 import { MempoolBlockDelta, MempoolBlockDeltaCompressed, MempoolDeltaChange, TransactionCompressed } from "../interfaces/websocket.interface";
 import { TransactionStripped } from "@interfaces/node-api.interface";
 import { AmountShortenerPipe } from "@app/shared/pipes/amount-shortener.pipe";
+import { Router, ActivatedRoute } from '@angular/router';
 const amountShortenerPipe = new AmountShortenerPipe();
 
 export function isMobile(): boolean {
@@ -234,6 +235,21 @@ export function sleep$(ms: number): Promise<void> {
   });
 }
 
+export function handleDemoRedirect(route: ActivatedRoute, router: Router) {
+  route.queryParams
+    .subscribe(params => {
+      if (params.next) {
+        const path = ['/', '/acceleration', '/mining', '/lightning'];
+        const index = path.indexOf(params.next);
+        if (index >= 0) {
+          const nextPath = path[(index + 1) % path.length];
+          setTimeout(() => { window.location.replace(`${params.next}?next=${nextPath}`) }, 3000);
+        }
+      }
+    }
+  );
+}
+
 // https://stackoverflow.com/a/60467595
 export function md5(inputString): string {
     var hc="0123456789abcdef";