Fetch all transactions on member transactions page

src/app/@api/member.api.ts

@@ -23,7 +23,7 @@
   CustomTokenRequest,
 } from '@build-5/interfaces';
 import dayjs from 'dayjs';
-import { Observable, combineLatest, map, of, switchMap } from 'rxjs';
+import { Observable, combineLatest, first, map, of, switchMap } from 'rxjs';
 import { BaseApi } from './base.api';
 
 export interface TokenDistributionWithAirdrops extends TokenDistribution {
@@ -210,6 +210,68 @@
     );
   }
 
+  public getAllTransactions(
+    memberId: string,
+    orderBy: string[] = ['createdOn'],
+  ): Observable<Transaction[]> {
+    return new Observable((observer) => {
+      let accumulatedTransactions: Transaction[] = [];
+
+      const fetchPage = (lastValue?: string) => {
+        this.transactionDataset
+          .getTopTransactionsLive(orderBy, lastValue, memberId)
+          .pipe(first())
+          .subscribe({
+            next: (transactions) => {
+              if (transactions.length > 0) {
+                accumulatedTransactions = [...accumulatedTransactions, ...transactions];
+                const lastTransaction = transactions[transactions.length - 1];
+                fetchPage(lastTransaction.uid);
+              } else {
+                observer.next(accumulatedTransactions);
+                observer.complete();
+              }
+            },
+            error: (err) => observer.error(err),
+          });
+      };
+
+      fetchPage();
+    });
+  }
+
+  public getTransactionsWithLimit(
+    memberId: string,
+    totalRequired: number,
+    orderBy: string[] = ['createdOn'],
+  ): Observable<Transaction[]> {
+    return new Observable((observer) => {
+      let accumulatedTransactions: Transaction[] = [];
+
+      const fetchPage = (lastValue?: string) => {
+        this.transactionDataset
+          .getTopTransactionsLive(orderBy, lastValue, memberId)
+          .pipe(first())
+          .subscribe(
+            (transactions) => {
+              accumulatedTransactions = [...accumulatedTransactions, ...transactions];
+              observer.next(accumulatedTransactions.slice(0, totalRequired));
+
+              if (transactions.length > 0 && accumulatedTransactions.length < totalRequired) {
+                const newLastValue = transactions[transactions.length - 1].uid;
+                fetchPage(newLastValue);
+              } else {
+                observer.complete();
+              }
+            },
+            (error) => observer.error(error),
+          );
+      };
+
+      fetchPage();
+    });
+  }
+
   public allSpacesAsMember = (memberId: NetworkAddress, lastValue?: string) =>
     this.spaceDataset
       .subset(Subset.MEMBERS)
@@ -239,7 +301,7 @@
     req: Build5Request<CustomTokenRequest>,
   ): Observable<string | undefined> => {
     const origin = environment.production ? BUILD5_PROD_ADDRESS_API : BUILD5_TEST_ADDRESS_API;
     return <any>this.httpClient.post(origin + WEN_FUNC.generateCustomToken, req, {
       responseType: 'text',
     });
   };

src/app/pages/member/member.module.ts

@@ -61,6 +61,8 @@ import { MemberSpacesComponent } from './pages/spaces/member-spaces.component';
 import { TokensPage } from './pages/tokens/tokens.page';
 import { TransactionsPage } from './pages/transactions/transactions.page';
 import { DataService } from './services/data.service';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 @NgModule({
   declarations: [
@@ -128,6 +130,8 @@ import { DataService } from './services/data.service';
     NftDepositModule,
     NftStakeModule,
     TokenTradingPairsTableModule,
+    NzRadioModule,
+    NzSpinModule,
   ],
 })
 export class MemberModule {}

src/app/pages/member/pages/transactions/transactions.page.html

@@ -3,6 +3,52 @@
     <span i18n></span>
   </label>
 
+  <div
+    *ngIf="deviceService.isDesktop$ | async"
+    class="transaction-selector"
+    style="text-align: center"
+  >
+    <div class="selector-label mb-2">
+      <span i18n>Select number of transactions to view/export:</span>
+    </div>
+    <nz-radio-group
+      [(ngModel)]="selectedTransactionCount"
+      (ngModelChange)="fetchTransactionsForDisplay()"
+      class="radio-group"
+    >
+      <label
+        [class]="selectedTransactionCount === '100' ? 'radio-button active text-foregrounds-primary dark:text-foregrounds-primary-dark' : 'radio-button text-foregrounds-primary dark:text-foregrounds-primary-dark bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark'"
+        nz-radio-button
+        nzValue="100"
+        >100</label
+      >
+      <label
+        [class]="selectedTransactionCount === '200' ? 'radio-button active text-foregrounds-primary dark:text-foregrounds-primary-dark' : 'radio-button text-foregrounds-primary dark:text-foregrounds-primary-dark bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark'"
+        nz-radio-button
+        nzValue="200"
+        >200</label
+      >
+      <label
+        [class]="selectedTransactionCount === '500' ? 'radio-button active text-foregrounds-primary dark:text-foregrounds-primary-dark' : 'radio-button text-foregrounds-primary dark:text-foregrounds-primary-dark bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark'"
+        nz-radio-button
+        nzValue="500"
+        >500</label
+      >
+      <label
+        [class]="selectedTransactionCount === '1000' ? 'radio-button active text-foregrounds-primary dark:text-foregrounds-primary-dark' : 'radio-button text-foregrounds-primary dark:text-foregrounds-primary-dark bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark'"
+        nz-radio-button
+        nzValue="1000"
+        >1000</label
+      >
+      <label
+        [class]="selectedTransactionCount === 'ALL' ? 'radio-button active text-foregrounds-primary dark:text-foregrounds-primary-dark' : 'radio-button text-foregrounds-primary dark:text-foregrounds-primary-dark bg-backgrounds-secondary dark:bg-backgrounds-secondary-dark'"
+        nz-radio-button
+        nzValue="ALL"
+        >ALL</label
+      >
+    </nz-radio-group>
+  </div>
+
   <button nz-button nzType="default" nzSize="default" (click)="exportTransactions()">
     <ng-container *ngIf="!exportingTransactions">
       <wen-icon-file-export></wen-icon-file-export>
@@ -17,6 +63,18 @@
 
 <nz-card *ngIf="deviceService.isDesktop$ | async" nzTitle="Transactions" i18n-nzTitle>
   <div class="overflow-x-auto">
+    <div *ngIf="(isLoadingTransactions$ | async)" class="loading-overlay p-4">
+      <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
+    </div>
+    <p
+      nz-typography
+      nzType="secondary"
+      class="mb-2"
+      *ngIf="(isLoadingTransactions$ | async) === false"
+    >
+      {{ ((transactions$ | async)?.length || 0) + ((likelyAllFetched$ | async) === false ? '+' : '')
+      }} Transactions
+    </p>
     <nz-table class="block" #table [nzData]="(transactions$ | async) || []" [nzPageSize]="50">
       <thead>
         <tr>
@@ -95,8 +153,17 @@
 </nz-card>
 
 <div class="mt-3" *ngIf="deviceService.isMobile$ | async">
-  <p nz-typography nzType="secondary" class="mb-6" *ngIf="!isLoading(transactions$ | async)">
-    {{ ((transactions$ | async)?.length || 0) + ((maxRecords$ | async) === false ? '+' : '') }} NFTs
+  <div *ngIf="(isLoadingTransactions$ | async)" class="loading-overlay">
+    <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
+  </div>
+  <p
+    nz-typography
+    nzType="secondary"
+    class="mb-2"
+    *ngIf="(isLoadingTransactions$ | async) === false"
+  >
+    {{ ((transactions$ | async)?.length || 0) + ((likelyAllFetched$ | async) === false ? '+' : '')
+    }} Transactions
   </p>
   <div
     class="mb-10"
@@ -106,7 +173,7 @@
     (scrolled)="onScroll()"
   >
     <nz-skeleton
-      *ngIf="isLoading(transactions$ | async)"
+      *ngIf="(isLoadingTransactions$ | async)"
       class="p-4 bg-backgrounds-tertiary dark:bg-backgrounds-tertiary-dark rounded-2xl w-76 lg:w-full h-76 lg:h-16"
       [nzActive]="true"
       [nzAvatar]="{ size: 'default' }"

src/app/pages/member/pages/transactions/transactions.page.less

@@ -0,0 +1,18 @@
+.radio-button {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.radio-button.active {
+  font-weight: bold;
+  cursor: pointer;
+  background-color: rgba(243, 146, 0, 0.8);
+}
+
+.radio-button:hover {
+  background-color: rgba(243, 146, 0, 0.5);
+}
+
+.radio-button.active:hover {
+  background-color: rgba(243, 146, 0, 0.8);
+}