|
1 | | -<mat-toolbar *transloco="let t"> |
2 | | - <app-capture-back-button></app-capture-back-button> |
3 | | - <span>{{ t('networkActionOrderDetails') }}</span> |
4 | | -</mat-toolbar> |
| 1 | +<ng-container *ngIf="isOffline$ | ngrxPush; else onlineTemplate"> |
| 2 | + <mat-toolbar *transloco="let t"> |
| 3 | + <app-capture-back-button></app-capture-back-button> |
| 4 | + <span>{{ t('networkActionOrderDetails') }}</span> |
| 5 | + </mat-toolbar> |
| 6 | +</ng-container> |
5 | 7 |
|
6 | | -<ion-content *ngrxLet="order$ as order"> |
7 | | - <div *transloco="let t"> |
8 | | - <h4 class="datetime"> |
9 | | - {{ order['Created Date'] | date: 'short' }} |
10 | | - </h4> |
11 | | - <ion-card> |
12 | | - <ion-grid> |
13 | | - <ion-row> |
14 | | - <img |
15 | | - decoding="async" |
16 | | - loading="lazy" |
17 | | - [src]=" |
18 | | - (order.assetThumbnailUrl$ | ngrxPush) || |
19 | | - '/assets/images/image-placeholder.png' |
20 | | - " |
21 | | - /> |
22 | | - </ion-row> |
23 | | - |
24 | | - <ion-row> |
25 | | - <ion-col size="12"> |
26 | | - <h4 id="network-action-name">{{ order.network_app_name_text }}</h4> |
27 | | - </ion-col> |
28 | | - </ion-row> |
29 | | - <ion-row id="order-id-row" class="detail-info-rows"> |
30 | | - <ion-col size="3.5"> |
31 | | - <ion-label>{{ t('order') + ' ID' }}:</ion-label> |
32 | | - </ion-col> |
33 | | - <ion-col class="wrap-text" align="end"> |
34 | | - <ion-label>{{ order.order_id_text }} </ion-label> |
35 | | - </ion-col> |
36 | | - <ion-col size="1" align="end"> |
37 | | - <ion-icon |
38 | | - size="small" |
39 | | - name="copy-outline" |
40 | | - (click)="copyToClipboard(order.order_id_text)" |
41 | | - ></ion-icon> |
42 | | - </ion-col> |
43 | | - </ion-row> |
44 | | - |
45 | | - <ion-row class="detail-info-rows"> |
46 | | - <ion-col size="3.5"> |
47 | | - <ion-label>{{ t('resultUrl') }}:</ion-label> |
48 | | - </ion-col> |
49 | | - <ion-col class="wrap-text" align="end"> |
50 | | - <ion-label |
51 | | - *ngIf="order.result_url_text !== undefined" |
52 | | - (click)="openResultUrl(order.result_url_text)" |
53 | | - > |
54 | | - <a> {{ order.result_url_text }} </a> |
55 | | - </ion-label> |
56 | | - |
57 | | - <ion-label |
58 | | - *ngIf="order.result_url_text === undefined" |
59 | | - (click)="openResultUrl(resultUrlFromAssetId(order.asset_id_text))" |
60 | | - > |
61 | | - <a> {{ resultUrlFromAssetId(order.asset_id_text) }} </a> |
62 | | - </ion-label> |
63 | | - </ion-col> |
64 | | - <ion-col size="1"> </ion-col> |
65 | | - </ion-row> |
66 | | - |
67 | | - <ion-row class="detail-info-rows"> |
68 | | - <ion-col size="3.5"> |
69 | | - <ion-label>{{ t('payment.price') }}:</ion-label> |
70 | | - </ion-col> |
71 | | - <ion-col align="end"> |
72 | | - <ion-label |
73 | | - >{{ order.price_number | number: '1.4-4' }} |
74 | | - {{ order.cost_token_ticker_text || 'NUM' }}</ion-label |
75 | | - > |
76 | | - </ion-col> |
77 | | - <ion-col size="1"></ion-col> |
78 | | - </ion-row> |
79 | | - <ion-row class="detail-info-rows"> |
80 | | - <ion-col size="3.5"> |
81 | | - <ion-label>{{ t('payment.fee') }}:</ion-label> |
82 | | - </ion-col> |
83 | | - <ion-col align="end"> |
84 | | - <ion-label |
85 | | - >{{ order.gas_fee_number | number: '1.4-4' }} |
86 | | - {{ order.cost_token_ticker_text || 'NUM' }}</ion-label |
87 | | - > |
88 | | - </ion-col> |
89 | | - <ion-col size="1"></ion-col> |
90 | | - </ion-row> |
91 | | - <ion-row class="detail-info-rows"> |
92 | | - <ion-col size="3.5"> |
93 | | - <ion-label>{{ t('payment.totalCost') }}:</ion-label> |
94 | | - </ion-col> |
95 | | - <ion-col align="end"> |
96 | | - <ion-label |
97 | | - >{{ order.total_cost_number | number: '1.4-4' }} |
98 | | - {{ order.cost_token_ticker_text || 'NUM' }}</ion-label |
99 | | - > |
100 | | - </ion-col> |
101 | | - <ion-col size="1"></ion-col> |
102 | | - </ion-row> |
103 | | - |
104 | | - <ion-row> |
105 | | - <ion-col id="status-col"> |
106 | | - <button |
107 | | - [class]="order.status_text" |
108 | | - mat-stroked-button |
109 | | - disableRipple |
110 | | - > |
111 | | - {{ t('networkActionOrderState.' + order.status_text) }} |
112 | | - </button> |
113 | | - </ion-col> |
114 | | - </ion-row> |
115 | | - </ion-grid> |
116 | | - </ion-card> |
117 | | - </div> |
118 | | -</ion-content> |
| 8 | +<ng-template #onlineTemplate> |
| 9 | + <ng-container *ngIf="iframeUrl$ | ngrxPush as iframeUrl"> |
| 10 | + <iframe [src]="iframeUrl | safeResourceUrl"> </iframe> |
| 11 | + </ng-container> |
| 12 | + <ion-spinner |
| 13 | + *ngIf="(iframeLoaded$ | async) !== true" |
| 14 | + name="lines-sharp" |
| 15 | + ></ion-spinner> |
| 16 | +</ng-template> |
0 commit comments