Feature v230725 showing order information in the transaction

src/app/features/home/activities/activities.page.html

@@ -22,7 +22,7 @@
       [text]="t('userGuide.viewNetworkActionsHistory')"
     >
       <ion-label>
-        {{ t('networkActions') }}
+        {{ t('orders') }}
       </ion-label>
     </ion-segment-button>
   </ion-segment>

src/app/features/home/activities/activities.page.scss

@@ -3,3 +3,11 @@ mat-toolbar {
     padding-right: 40px;
   }
 }
+
+ion-segment {
+  display: flex;
+
+  ion-segment-button {
+    flex: 1;
+  }
+}

src/app/features/home/activities/network-action-order-details/network-action-order-details.page.html

@@ -1,118 +1,16 @@
-<mat-toolbar *transloco="let t">
-  <app-capture-back-button></app-capture-back-button>
-  <span>{{ t('networkActionOrderDetails') }}</span>
-</mat-toolbar>
+<ng-container *ngIf="isOffline$ | ngrxPush; else onlineTemplate">
+  <mat-toolbar *transloco="let t">
+    <app-capture-back-button></app-capture-back-button>
+    <span>{{ t('networkActionOrderDetails') }}</span>
+  </mat-toolbar>
+</ng-container>
 
-<ion-content *ngrxLet="order$ as order">
-  <div *transloco="let t">
-    <h4 class="datetime">
-      {{ order['Created Date'] | date: 'short' }}
-    </h4>
-    <ion-card>
-      <ion-grid>
-        <ion-row>
-          <img
-            decoding="async"
-            loading="lazy"
-            [src]="
-              (order.assetThumbnailUrl$ | ngrxPush) ||
-              '/assets/images/image-placeholder.png'
-            "
-          />
-        </ion-row>
-
-        <ion-row>
-          <ion-col size="12">
-            <h4 id="network-action-name">{{ order.network_app_name_text }}</h4>
-          </ion-col>
-        </ion-row>
-        <ion-row id="order-id-row" class="detail-info-rows">
-          <ion-col size="3.5">
-            <ion-label>{{ t('order') + ' ID' }}:</ion-label>
-          </ion-col>
-          <ion-col class="wrap-text" align="end">
-            <ion-label>{{ order.order_id_text }} </ion-label>
-          </ion-col>
-          <ion-col size="1" align="end">
-            <ion-icon
-              size="small"
-              name="copy-outline"
-              (click)="copyToClipboard(order.order_id_text)"
-            ></ion-icon>
-          </ion-col>
-        </ion-row>
-
-        <ion-row class="detail-info-rows">
-          <ion-col size="3.5">
-            <ion-label>{{ t('resultUrl') }}:</ion-label>
-          </ion-col>
-          <ion-col class="wrap-text" align="end">
-            <ion-label
-              *ngIf="order.result_url_text !== undefined"
-              (click)="openResultUrl(order.result_url_text)"
-            >
-              <a> {{ order.result_url_text }} </a>
-            </ion-label>
-
-            <ion-label
-              *ngIf="order.result_url_text === undefined"
-              (click)="openResultUrl(resultUrlFromAssetId(order.asset_id_text))"
-            >
-              <a> {{ resultUrlFromAssetId(order.asset_id_text) }} </a>
-            </ion-label>
-          </ion-col>
-          <ion-col size="1"> </ion-col>
-        </ion-row>
-
-        <ion-row class="detail-info-rows">
-          <ion-col size="3.5">
-            <ion-label>{{ t('payment.price') }}:</ion-label>
-          </ion-col>
-          <ion-col align="end">
-            <ion-label
-              >{{ order.price_number | number: '1.4-4' }}
-              {{ order.cost_token_ticker_text || 'NUM' }}</ion-label
-            >
-          </ion-col>
-          <ion-col size="1"></ion-col>
-        </ion-row>
-        <ion-row class="detail-info-rows">
-          <ion-col size="3.5">
-            <ion-label>{{ t('payment.fee') }}:</ion-label>
-          </ion-col>
-          <ion-col align="end">
-            <ion-label
-              >{{ order.gas_fee_number | number: '1.4-4' }}
-              {{ order.cost_token_ticker_text || 'NUM' }}</ion-label
-            >
-          </ion-col>
-          <ion-col size="1"></ion-col>
-        </ion-row>
-        <ion-row class="detail-info-rows">
-          <ion-col size="3.5">
-            <ion-label>{{ t('payment.totalCost') }}:</ion-label>
-          </ion-col>
-          <ion-col align="end">
-            <ion-label
-              >{{ order.total_cost_number | number: '1.4-4' }}
-              {{ order.cost_token_ticker_text || 'NUM' }}</ion-label
-            >
-          </ion-col>
-          <ion-col size="1"></ion-col>
-        </ion-row>
-
-        <ion-row>
-          <ion-col id="status-col">
-            <button
-              [class]="order.status_text"
-              mat-stroked-button
-              disableRipple
-            >
-              {{ t('networkActionOrderState.' + order.status_text) }}
-            </button>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </ion-card>
-  </div>
-</ion-content>
+<ng-template #onlineTemplate>
+  <ng-container *ngIf="iframeUrl$ | ngrxPush as iframeUrl">
+    <iframe [src]="iframeUrl | safeResourceUrl"> </iframe>
+  </ng-container>
+  <ion-spinner
+    *ngIf="(iframeLoaded$ | async) !== true"
+    name="lines-sharp"
+  ></ion-spinner>
+</ng-template>

src/app/features/home/activities/network-action-order-details/network-action-order-details.page.scss

@@ -1,9 +1,35 @@
 mat-toolbar {
   span {
     padding-right: 40px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+    color: white;
   }
 }
 
+.no-network-text {
+  font-size: 18px;
+  margin: auto;
+}
+
+iframe {
+  background-color: black;
+  width: 100vw;
+  height: 100vh;
+  border: 0;
+}
+
+ion-spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  scale: 1.5;
+}
+
 ion-content {
   .datetime {
     width: 90vw;

src/app/features/home/activities/network-action-order-details/network-action-order-details.page.ts

@@ -2,12 +2,24 @@ import { Component } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { Plugins } from '@capacitor/core';
+import { NavController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
-import { UntilDestroy } from '@ngneat/until-destroy';
-import { combineLatest } from 'rxjs';
-import { catchError, first, map } from 'rxjs/operators';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { BehaviorSubject, combineLatest, fromEvent } from 'rxjs';
+import {
+  catchError,
+  concatMap,
+  first,
+  map,
+  switchMap,
+  tap,
+} from 'rxjs/operators';
 import { OrderHistoryService } from '../../../../shared/actions/service/order-history.service';
+import { BUBBLE_IFRAME_URL } from '../../../../shared/dia-backend/secret';
+import { DiaBackendStoreService } from '../../../../shared/dia-backend/store/dia-backend-store.service';
 import { ErrorService } from '../../../../shared/error/error.service';
+import { BubbleToIonicPostMessage } from '../../../../shared/iframe/iframe';
+import { NetworkService } from '../../../../shared/network/network.service';
 import { isNonNullable } from '../../../../utils/rx-operators/rx-operators';
 import { getAssetProfileForNSE } from '../../../../utils/url';
 
@@ -19,26 +31,99 @@ const { Browser, Clipboard } = Plugins;
   styleUrls: ['./network-action-order-details.page.scss'],
 })
 export class NetworkActionOrderDetailsPage {
+  readonly orderId$ = this.route.paramMap.pipe(
+    map(params => params.get('order_id')),
+    isNonNullable()
+  );
+  readonly assetId$ = this.orderId$.pipe(
+    switchMap(orderId => this.storeService.retrieveNetworkAppOrder$(orderId)),
+    map(order => {
+      if ('nid' in order.action_args) return order.action_args.nid as string;
+      if ('cid' in order.action_args) return order.action_args.cid as string;
+      return undefined;
+    })
+  );
   readonly order$ = combineLatest([
     this.orderHistoryService.networkActionOrders$,
-    this.route.paramMap.pipe(
-      map(params => params.get('order_id')),
-      isNonNullable()
-    ),
+    this.orderId$,
   ]).pipe(
     first(),
     map(([orders, orderId]) => orders.find(o => o.order_id_text === orderId)),
     isNonNullable(),
     catchError((err: unknown) => this.errorService.toastError$(err))
   );
+  readonly isOffline$ = this.networkService.connected$.pipe(
+    map(connected => connected === false)
+  );
+
+  readonly iframeUrl$ = combineLatest([this.orderId$, this.assetId$]).pipe(
+    map(([orderId, assetId]) => {
+      const queryParams = new URLSearchParams();
+
+      queryParams.append('order_id', orderId);
+
+      /**
+       * Some network action orders might not have releated asset id (aka nid, cid).
+       * For example:
+       * - "Creator Gallery"
+       * - "One-NUM-price"
+       * - "CustodialWalletWithdraw"
+       * - etc
+       */
+      if (assetId) queryParams.append('asset_id', assetId);
+
+      return `${BUBBLE_IFRAME_URL}/version-test/order_details?${queryParams}`;
+    })
+  );
+
+  readonly iframeLoaded$ = new BehaviorSubject(false);
 
   constructor(
     private readonly route: ActivatedRoute,
     private readonly orderHistoryService: OrderHistoryService,
+    private readonly storeService: DiaBackendStoreService,
     private readonly errorService: ErrorService,
     private readonly snackBar: MatSnackBar,
-    private readonly translocoService: TranslocoService
-  ) {}
+    private readonly translocoService: TranslocoService,
+    private readonly networkService: NetworkService,
+    private readonly navController: NavController
+  ) {
+    this.processIframeEvents();
+  }
+
+  private processIframeEvents() {
+    fromEvent(window, 'message')
+      .pipe(
+        tap(event => {
+          const postMessageEvent = event as MessageEvent;
+          const data = postMessageEvent.data as BubbleToIonicPostMessage;
+          switch (data) {
+            case BubbleToIonicPostMessage.IFRAME_ON_LOAD:
+              this.iframeLoaded$.next(true);
+              break;
+            case BubbleToIonicPostMessage.IFRAME_BACK_BUTTON_CLICKED:
+              this.navController.back();
+              break;
+            case BubbleToIonicPostMessage.IFRAME_COPY_TO_CLIPBOARD_ORDER_ID:
+              this.copyToClipboardOrderId();
+              break;
+            default:
+              break;
+          }
+        }),
+        untilDestroyed(this)
+      )
+      .subscribe();
+  }
+
+  private copyToClipboardOrderId() {
+    this.order$
+      .pipe(
+        first(),
+        concatMap(({ order_id_text }) => this.copyToClipboard(order_id_text))
+      )
+      .subscribe();
+  }
 
   // eslint-disable-next-line class-methods-use-this
   openResultUrl(url: string) {