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/:id',
+    canMatch: [TrackerGuard],
+    runGuardsAndResolvers: 'always',
+    component: TrackerComponent,
+  },
   {
     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: [],

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

@@ -140,6 +140,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/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;
+  }
 }