Merge pull request #5010 from mempool/mononaut/tracker-tx-routing

Transparently redirect direct mobile tx visits to pizza tracker

frontend/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { StatusViewComponent } from './components/status-view/status-view.compon
 import { AddressGroupComponent } from './components/address-group/address-group.component';
 import { TrackerComponent } from './components/tracker/tracker.component';
 import { AccelerateCheckout } from './components/accelerate-checkout/accelerate-checkout.component';
+import { TrackerGuard } from './route-guards';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -140,16 +141,17 @@ let routes: Routes = [
     loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
+  {
+    path: 'tx',
+    canMatch: [TrackerGuard],
+    runGuardsAndResolvers: 'always',
+    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
+  },
   {
     path: '',
     loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
     data: { preload: true },
   },
-  {
-    path: 'tracker',
-    data: { networkSpecific: true },
-    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
-  },
   {
     path: 'wallet',
     children: [],
@@ -213,10 +215,6 @@ let routes: Routes = [
     loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
-  {
-    path: '**',
-    redirectTo: ''
-  },
 ];
 
 if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
@@ -301,13 +299,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
       loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
       data: { preload: true },
     },
-    {
-      path: '**',
-      redirectTo: ''
-    },
   ];
 }
 
+if (!window['isMempoolSpaceBuild']) {
+  routes.push({
+    path: '**',
+    redirectTo: ''
+  });
+}
+
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',

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

@@ -185,7 +185,11 @@
       }
     </div>
 
-    <div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
+    <div class="footer-link"
+      [routerLink]="['/tx' | relativeUrl, tx?.txid]"
+      [queryParams]="{ mode: 'details' }"
+      queryParamsHandling="merge"
+    >
       <span><ng-container i18n="accelerator.show-more-details">See more details</ng-container>&nbsp;<fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
     </div>
   </div>

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

@@ -31,6 +31,8 @@ import { TrackerStage } from './tracker-bar.component';
 import { MiningService, MiningStats } from '../../services/mining.service';
 import { ETA, EtaService } from '../../services/eta.service';
 import { getTransactionFlags, getUnacceleratedFeeRate } from '../../shared/transaction.utils';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+
 
 interface Pool {
   id: number;
@@ -140,6 +142,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
     private priceService: PriceService,
     private enterpriseService: EnterpriseService,
     private miningService: MiningService,
+    private router: Router,
     private cd: ChangeDetectorRef,
     private zone: NgZone,
     @Inject(ZONE_SERVICE) private zoneService: any,

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

@@ -518,6 +518,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
               });
             }
           }
+          if (window.innerWidth <= 767.98) {
+            this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.txId], {
+              queryParamsHandling: 'merge',
+              preserveFragment: true,
+              queryParams: { mode: 'details' },
+            });
+          }
           this.seoService.setTitle(
             $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
           );

frontend/src/app/route-guards.ts

@@ -0,0 +1,22 @@
+import { Injectable, inject } from '@angular/core';
+import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
+import { NavigationService } from './services/navigation.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+class GuardService {
+  constructor(
+    private router: Router,
+    private navigationService: NavigationService,
+  ) {}
+
+  trackerGuard(route: Route, segments: UrlSegment[]): boolean {
+    const preferredRoute = this.router.getCurrentNavigation()?.extractedUrl.queryParams?.mode;
+    return preferredRoute !== 'details' && this.navigationService.isInitialLoad() && window.innerWidth <= 767.98;
+  }
+}
+
+export const TrackerGuard: CanMatchFn = (route: Route, segments: UrlSegment[]): boolean => {
+  return inject(GuardService).trackerGuard(route, segments);
+};

frontend/src/app/services/navigation.service.ts

@@ -27,6 +27,7 @@ export class NavigationService {
     }
   };
   networks = Object.keys(this.networkModules);
+  initialLoad = true;
 
   constructor(
     private stateService: StateService,
@@ -40,6 +41,10 @@ export class NavigationService {
       if (this.enforceSubnetRestrictions(state)) {
         this.updateSubnetPaths(state);
       }
+      if (this.initialLoad) {
+        this.initialLoad = false;
+      }
+      this.updateSubnetPaths(state);
     });
   }
 
@@ -98,4 +103,8 @@ export class NavigationService {
     });
     this.subnetPaths.next(subnetPaths);
   }
+
+  isInitialLoad(): boolean {
+    return this.initialLoad;
+  }
 }