fix: filter, ordering and other improvements

frontend/src/app/generic-viewer/generic-viewer.page.html

@@ -45,7 +45,8 @@
             <source [src]="inscription.content_path" type="audio/wav">
             Audio not supported by browser
           </audio>
-          <iframe width="100%" height="100%" sandbox [src]="untrustedURL" *ngSwitchCase="'HTML'"></iframe>
+          <iframe width="100%" height="100%" sandbox="allow-scripts" [src]="untrustedURL"
+            *ngSwitchCase="'HTML'"></iframe>
           <div class="main-content text-start p-3 full" *ngSwitchCase="'Markdown'">
             <ng-scrollbar autoHeightDisabled="false" visibility="hover">
               <markdown [src]="inscription.content_path">

frontend/src/app/list-inscriptions/list-inscriptions.page.html

@@ -12,23 +12,29 @@
             </ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-row>
-
-          <ion-item  class="ion-padding-start">
-            <ion-select interface="popover" placeholder="Order" [(ngModel)]="order" (ionChange)="onChangeOrder()">
-              <ion-select-option value="desc">Latest</ion-select-option>
-              <ion-select-option value="asc">Oldest</ion-select-option>
-            </ion-select>
-          </ion-item>
-
-          <ion-item>
-
-            <ion-searchbar [debounce]="500" (ionInput)="onChangeSearch($event.target.value)"  placeholder="Search for #">
-            </ion-searchbar>
-
-          </ion-item>
-        </ion-row>
-
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="12" offset="0" size-md="12" offset-md="0" size-md="10" offset-md="1" size-xl="10" offset-xl="1">
+        <ion-grid>
+          <ion-row>
+            <ion-col>
+              <ion-item lines="none">
+                <ion-searchbar [debounce]="500" (ionInput)="onChangeSearch($event.target.value)"
+                  placeholder="Search for #">
+                </ion-searchbar>
+              </ion-item>
+            </ion-col>
+            <ion-col size="12" size-md="3">
+              <ion-item class="ion-padding-start" lines="none">
+                <ion-select interface="popover" placeholder="Order" [(ngModel)]="order" (ionChange)="onChangeOrder()">
+                  <ion-select-option value="desc">Latest</ion-select-option>
+                  <ion-select-option value="asc">Oldest</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
       </ion-col>
     </ion-row>
 
@@ -40,7 +46,7 @@
           </div>
           <div class="list" *ngIf="!isLoading && inscriptions.length > 0">
             <a class="inscription-item main-content" [routerLink]="['/app/inscription', item.transaction.hash]"
-               *ngFor="let item of inscriptions; let index">
+              *ngFor="let item of inscriptions; let index">
               <div class="content">
                 <app-generic-preview [mime]="item.mime" [contentPath]="item.content_path"></app-generic-preview>
               </div>
@@ -71,4 +77,4 @@ <h4>{{ item.name }}</h4>
       </ion-col>
     </ion-row>
   </ion-grid>
-</ion-content>
+</ion-content>

frontend/src/app/list-tokens/list-tokens.page.html

@@ -23,8 +23,8 @@
             <ion-progress-bar type="indeterminate"></ion-progress-bar>
           </div>
 
-          <p-table #data [value]="tokens" [tableStyle]="{ 'min-width': '40rem' }" [paginator]="true" [rows]="50"
-            [showCurrentPageReport]="true"
+          <p-table #data (sortFunction)="customSort($event)" [customSort]="true" [value]="tokens"
+            [tableStyle]="{ 'min-width': '40rem' }" [paginator]="true" [rows]="50" [showCurrentPageReport]="true"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} tokens" [globalFilterFields]="
             ['name', 'ticker' ]" styleClass="token-list">
             <ng-template pTemplate="caption">
@@ -42,7 +42,7 @@
                 <th pSortableColumn="id" pFrozenColumn># <p-sortIcon field="id"></p-sortIcon></th>
                 <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                 <th pSortableColumn="ticker" pFrozenColumn>Ticker <p-sortIcon field="ticker"></p-sortIcon></th>
-                <th pSortableColumn="price">Token Price <p-sortIcon field="price"></p-sortIcon></th>
+                <th pSortableColumn="last_price_base">Token Price <p-sortIcon field="last_price_base"></p-sortIcon></th>
                 <th pSortableColumn="minted">Minted <p-sortIcon field="minted"></p-sortIcon></th>
               </tr>
             </ng-template>

frontend/src/app/list-tokens/list-tokens.page.ts

@@ -11,6 +11,7 @@ import { TokenDecimalsPipe } from '../core/pipe/token-with-decimals.pipe';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { TableModule } from 'primeng/table';
 import { PriceService } from '../core/service/price.service';
+import { SortEvent } from 'primeng/api';
 
 @Component({
   selector: 'app-list-tokens',
@@ -26,7 +27,7 @@ export class ListTokensPage implements OnInit {
   tokens: any = null;
   holdings: any = null;
   offset = 0;
-  limit = 500;
+  limit = 2000;
   lastFetchCount = 0;
   baseTokenPrice: number = 0;
 
@@ -111,4 +112,39 @@ export class ListTokensPage implements OnInit {
     });
   }
 
+  customSort(event: SortEvent) {
+    if (event.field == 'minted') {
+      event.data?.sort((data1, data2) => {
+
+        let value1 = parseInt(data1["circulating_supply"]) / parseInt(data1["max_supply"]);
+        let value2 = parseInt(data2["circulating_supply"]) / parseInt(data2["max_supply"]);
+        let result = null;
+
+        if (value1 == null && value2 != null) result = -1;
+        else if (value1 != null && value2 == null) result = 1;
+        else if (value1 == null && value2 == null) result = 0;
+        else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+        return event.order as number * result;
+      });
+
+    }
+
+    event.data?.sort((data1, data2) => {
+      let value1 = data1[event.field as string];
+      let value2 = data2[event.field as string];
+      let result = null;
+
+      if (value1 == null && value2 != null) result = -1;
+      else if (value1 != null && value2 == null) result = 1;
+      else if (value1 == null && value2 == null) result = 0;
+      else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2);
+      else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+      return event.order as number * result;
+    });
+  }
+
+
+
 }

frontend/src/app/transfer-modal/transfer-modal.page.ts

@@ -118,7 +118,7 @@ export class TransferModalPage implements OnInit {
     // Construct metaprotocol memo message
     const params = new Map([
       ["tic", this.ticker],
-      ["amt", this.transferForm.value.basic.amount],
+      ["amt", this.transferForm.value.basic.amount.replace(/\s/g, '')],
       ["dst", this.transferForm.value.basic.destination],
     ]);
     const urn = this.protocolService.buildURN(environment.chain.chainId, 'transfer', params);