release v1.0.0-beta.5

package.json

@@ -8,6 +8,7 @@
     "start:portal": "ng serve --project portal",
     "start:landing-page": "ng serve --project landing-page",
     "start:all": "npm run build:all && firebase emulators:start --only hosting:ununifi-alpha-test",
+    "start:all:prod": "npm run build:all:prod && firebase emulators:start --only hosting:ununifi-alpha-test",
     "build": "ng build",
     "build:explorer": "ng build --project explorer",
     "build:explorer:prod": "ng build --project explorer --configuration=production",

projects/explorer/src/app/pages/accounts/account/txs/txs.component.html

@@ -1 +1,8 @@
-<view-txs [txsWithPagination]="txsWithPagination$ | async"></view-txs>
+<view-txs
+  [pageSizeOptions]="pageSizeOptions"
+  [txsWithPagination]="txsWithPagination$ | async"
+  [txTypes]="txTypes$ | async"
+  [pageInfo]="paginationInfo$ | async"
+  [pageLength]="pageLength$ | async"
+  (paginationChange)="appPaginationChanged($event)"
+></view-txs>

projects/explorer/src/app/pages/accounts/account/txs/txs.component.ts

@@ -1,24 +1,46 @@
 import { CosmosSDKService } from '../../../../models/cosmos-sdk.service';
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { cosmosclient, rest, proto } from '@cosmos-client/core';
+import { PageEvent } from '@angular/material/paginator';
+import { Router, ActivatedRoute } from '@angular/router';
+import { rest } from '@cosmos-client/core';
 import { CosmosTxV1beta1GetTxsEventResponse } from '@cosmos-client/core/esm/openapi';
-import { combineLatest, Observable } from 'rxjs';
-import { map, mergeMap } from 'rxjs/operators';
+import { of, combineLatest, Observable } from 'rxjs';
+import { map, mergeMap, switchMap, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+
+export type PaginationInfo = {
+  pageSize: number;
+  pageNumber: number;
+};
 
 @Component({
   selector: 'app-txs',
   templateUrl: './txs.component.html',
   styleUrls: ['./txs.component.css'],
 })
 export class TxsComponent implements OnInit {
+  pageSizeOptions = [5, 10, 20, 50, 100];
+  defaultPageSize = this.pageSizeOptions[1];
+  defaultPageNumber = 1;
+
   address$: Observable<string | undefined>;
+  txs$: Observable<CosmosTxV1beta1GetTxsEventResponse | undefined>;
+  txsTotalCount$: Observable<bigint>;
+  paginationInfoChanged$: Observable<PaginationInfo>;
+
+  paginationInfo$: Observable<PaginationInfo>;
+  pageLength$: Observable<number | undefined>;
   txsWithPagination$: Observable<CosmosTxV1beta1GetTxsEventResponse | undefined>;
+  txTypes$: Observable<string[] | undefined>;
 
-  constructor(private route: ActivatedRoute, private cosmosSDK: CosmosSDKService) {
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private cosmosSDK: CosmosSDKService,
+  ) {
     this.address$ = this.route.params.pipe(map((params) => params.address));
     const sdk$ = this.cosmosSDK.sdk$;
-    this.txsWithPagination$ = combineLatest([sdk$, this.address$]).pipe(
+
+    this.txs$ = combineLatest([sdk$, this.address$]).pipe(
       mergeMap(([sdk, address]) => {
         return rest.tx
           .getTxsEvent(
@@ -36,7 +58,121 @@ export class TxsComponent implements OnInit {
           });
       }),
     );
+
+    this.txsTotalCount$ = combineLatest([sdk$, this.address$]).pipe(
+      mergeMap(([sdk, address]) => {
+        return rest.tx
+          .getTxsEvent(
+            sdk.rest,
+            [`message.sender='${address}'`],
+            undefined,
+            undefined,
+            undefined,
+            true,
+          )
+          .then((res) =>
+            res.data.pagination?.total ? BigInt(res.data.pagination?.total) : BigInt(0),
+          )
+          .catch((error) => {
+            console.error(error);
+            return BigInt(0);
+          });
+      }),
+    );
+
+    this.pageLength$ = this.txsTotalCount$.pipe(
+      map((txsTotalCount) => (txsTotalCount ? parseInt(txsTotalCount.toString()) : undefined)),
+    );
+
+    this.paginationInfo$ = combineLatest([this.txsTotalCount$, this.route.queryParams]).pipe(
+      switchMap(([txTotalCount, params]) => {
+        //get page size from query param
+        const pageSize = this.pageSizeOptions.includes(Number(params.perPage))
+          ? Number(params.perPage)
+          : this.defaultPageSize;
+
+        //get page number from query param
+        const pages = Number(params.pages);
+        const pageNumber =
+          txTotalCount === undefined || !pages || pages > Number(txTotalCount) / pageSize + 1
+            ? this.defaultPageNumber
+            : pages;
+
+        return of({ pageNumber, pageSize });
+      }),
+    );
+
+    this.paginationInfoChanged$ = this.paginationInfo$.pipe(
+      distinctUntilChanged(),
+      map((paginationInfo) => paginationInfo),
+    );
+
+    this.txsWithPagination$ = this.paginationInfoChanged$.pipe(
+      withLatestFrom(sdk$, this.address$, this.txsTotalCount$),
+      mergeMap(([paginationInfo, sdk, address, txsTotalCount]) => {
+        const pageOffset = BigInt(paginationInfo.pageSize) * BigInt(paginationInfo.pageNumber - 1);
+
+        const modifiedPageSize =
+          txsTotalCount <= pageOffset
+            ? txsTotalCount % BigInt(paginationInfo.pageSize)
+            : BigInt(paginationInfo.pageSize);
+
+        if (pageOffset < 0 || modifiedPageSize <= 0) {
+          return [];
+        }
+
+        return rest.tx
+          .getTxsEvent(
+            sdk.rest,
+            [`message.sender='${address}'`],
+            undefined,
+            pageOffset,
+            modifiedPageSize,
+            true,
+          )
+          .then((res) => res.data)
+          .catch((error) => {
+            console.error(error);
+            return undefined;
+          });
+      }),
+    );
+
+    this.txTypes$ = this.txsWithPagination$.pipe(
+      map((txs) => {
+        if (!txs?.txs) {
+          return undefined;
+        }
+        const txTypeList = txs?.txs?.map((tx) => {
+          if (!tx.body?.messages) {
+            return '';
+          }
+          const txTypes = tx.body?.messages.map((message) => {
+            if (!message) {
+              return [];
+            }
+            const txTypeRaw = (message as any)['@type'] as string;
+            const startLength = txTypeRaw.lastIndexOf('.');
+            const txType = txTypeRaw.substring(startLength + 1, txTypeRaw.length);
+            return txType;
+          });
+          return txTypes.join();
+        });
+        return txTypeList;
+      }),
+    );
   }
 
   ngOnInit(): void {}
+
+  appPaginationChanged(pageEvent: PageEvent): void {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {
+        perPage: pageEvent.pageSize,
+        pages: pageEvent.pageIndex + 1,
+      },
+      queryParamsHandling: 'merge',
+    });
+  }
 }

projects/explorer/src/app/views/accounts/account/txs/txs.component.html

@@ -20,9 +20,9 @@ <h3 class="mb-0 ml-2">Transactions</h3>
       </mat-list-item>
     </mat-list>
     <mat-nav-list>
-      <ng-container *ngFor="let tx of txsWithPagination?.tx_responses; last as last">
+      <ng-container *ngFor="let tx of txsWithPagination?.tx_responses; let i = index; last as last">
         <mat-list-item routerLink="/txs/{{ tx.txhash }}">
-          <span class="pr-4">{{ tx.logs?.[0]?.events?.[3]?.type }}</span>
+          <span class="pr-4">{{ txTypes?.[i] }}</span>
           <span class="flex-auto"></span>
           <span
             class="w-1/5 break-all truncate"
@@ -45,4 +45,12 @@ <h3 class="mb-0 ml-2">Transactions</h3>
       </ng-container>
     </mat-nav-list>
   </ng-template>
+  <mat-paginator
+    [length]="pageLength"
+    [pageSize]="pageInfo ? pageInfo.pageSize : 5"
+    [pageIndex]="pageInfo ? pageInfo.pageNumber - 1 : 0"
+    [pageSizeOptions]="pageSizeOptions ? pageSizeOptions : []"
+    (page)="onPaginationChange($event)"
+  >
+  </mat-paginator>
 </mat-card>

projects/explorer/src/app/views/accounts/account/txs/txs.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { PaginationInfo } from '../../../../pages/accounts/account/txs/txs.component';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
 import { CosmosTxV1beta1GetTxsEventResponse } from '@cosmos-client/core/esm/openapi';
 
 @Component({
@@ -9,7 +11,23 @@ import { CosmosTxV1beta1GetTxsEventResponse } from '@cosmos-client/core/esm/open
 export class TxsComponent implements OnInit {
   @Input() txsWithPagination?: CosmosTxV1beta1GetTxsEventResponse | null;
 
-  constructor() {}
+  @Input() txTypes?: string[] | null;
+
+  @Input() pageSizeOptions?: number[] | null;
+
+  @Input() pageInfo?: PaginationInfo | null;
+
+  @Input() pageLength?: number | null;
+
+  @Output() paginationChange: EventEmitter<PageEvent>;
+
+  constructor() {
+    this.paginationChange = new EventEmitter();
+  }
 
   ngOnInit(): void {}
+
+  onPaginationChange(pageEvent: PageEvent): void {
+    this.paginationChange.emit(pageEvent);
+  }
 }

projects/explorer/src/app/views/app.component.html

@@ -9,7 +9,7 @@
       <button class="align-middle" mat-icon-button routerLink="/">
         <img class="p-1 w-10 h-10" src="assets/favicon.png" />
       </button>
-      <h1 class="align-middle">Telescope</h1>
+      <h1 class="align-middle">UnUniFi Explorer</h1>
     </mat-toolbar>
 
     <mat-form-field appearance="fill" class="w-full">

projects/explorer/src/app/views/dashboard/dashboard.component.html

@@ -29,7 +29,7 @@ <h2>Dashboard</h2>
   </mat-card>
 
   <span class="flex-auto"></span>
-  <mat-card class="lg:w-1/3">
+  <mat-card class="mb-4 lg:w-1/3">
     <mat-card-header>
       <mat-icon mat-card-avatar color="accent">generating_tokens</mat-icon>
       <mat-card-title>Inflation</mat-card-title>

projects/explorer/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Telescope</title>
+    <title>UnUniFi Explorer</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/favicon.png" />