Merge autofund wait message to demo (#501)

* refactor(backend/tests): remove superfluous mocks (#473)

* refactor(backend): use odmantic engine (#479)

* rename(backend/setting): maximum list length

* feat(backend): improve `GET` endpoint semantics

The endpoint should receive the `wallet_id` as a query parameter and
return the internal mongodb document id.

* chore(backend): remove dead code

* refactor(backend): use odmantic engine

* fix(web-client): add issuers for servers (#482)

* fix(web-client): add issuers for servers

* Update web-client/src/environments/environment.palau-prod.ts

Co-authored-by: Jean-Pierre de Villiers <[email protected]>

Co-authored-by: Jean-Pierre de Villiers <[email protected]>

* feat(web-client): Pull payment flag (#486)

* feat(web-client): Add hidePullPayment flag.

* style(web-client): run prettier

* fix(web-client): Fix ESLint error.

* style(web-client): run prettier

* fix(web-client): Change auth_map type to Object type. (#485)

* fix(web-client): Change auth_map type to Object type.

* fix(web-client): Fix ESLint error.

* feat(web-client): add auto logout (#481)

* feat(web-client): add auto logout

* feat(web-client): add ngZone for auto logout

* refactor(web-client): remove redundant isLogin variable in auto logout

* refactor(web-client): move auto logout to app component

* refactor(web-client): remove autoLogOutService from logout-button

* refactor(web-client): remove console log line in auto-logout service

* feat(web-client): add environment flag for auto logout

* fix(web-client): initialize localStorage lastAction for auto logout first

* fix(web-client): pull payment minor text fixes (#491)

* fix(cors): allow `localhost:4200` on staging (#492)

* feat(web-client): bookmark management (#451)

* fix(web-client): Update Pin Entry text for pull payment. (#497)

* fix(web-client): Update Pin Entry text for pull payment.

* style(web-client): run prettier.

* fix(web-client): update prod feature flags (#499)

* fix(web-client): update prod feature flags

* fix(web-client): update prod feature flags

* feat(web-client): Add transaction history  (#468)

* fix(web-client): display wait message while creating wallet. (#493)

* fix(web-client): display wait message and error messages while creating wallet.

* fix(web-client): clean up comments and other code.

* fix(web-client) add routertesting to asset accordian

* fix(web-client) fix txresponse import format and message html and text fields.

* fix(web-client) run prettier.

Co-authored-by: Jean-Pierre de Villiers <[email protected]>
Co-authored-by: Francisco Rutayebesibwa <[email protected]>
Co-authored-by: Bill Guo <[email protected]>
Co-authored-by: Jonathan Ngbonga <[email protected]>

Author: 5 people

web-client/capacitor.config.ts

@@ -1,4 +1,5 @@
 import { CapacitorConfig } from '@capacitor/cli';
+import { KeyboardResize } from '@capacitor/keyboard';
 
 const config: CapacitorConfig = {
   appId: 'io.ionic.starter',
@@ -11,7 +12,7 @@ const config: CapacitorConfig = {
       androidScaleType: 'CENTER_CROP',
     },
     Keyboard: {
-      resize: 'ionic',
+      resize: KeyboardResize.Ionic,
     },
   },
 };

web-client/src/app/app-routing.module.ts

@@ -120,6 +120,11 @@ export const routes: Routes = [
         (m) => m.SearchWalletPageModule
       ),
   },
+  {
+    path: 'history',
+    loadChildren: () =>
+      import('./views/history/history.module').then((m) => m.HistoryPageModule),
+  },
   {
     path: 'bookmarks',
     loadChildren: () =>

web-client/src/app/components/asset-accordion/asset-accordion.component.spec.ts

@@ -1,5 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { IonicModule } from '@ionic/angular';
 import { AssetAccordionComponent } from './asset-accordion.component';
 
@@ -10,7 +11,11 @@ describe('AssetAccordionComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AssetAccordionComponent],
-      imports: [IonicModule.forRoot(), HttpClientTestingModule],
+      imports: [
+        IonicModule.forRoot(),
+        HttpClientTestingModule,
+        RouterTestingModule,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AssetAccordionComponent);

web-client/src/app/pipes/is-me.pipe.spec.ts

@@ -0,0 +1,11 @@
+import { TestBed } from '@angular/core/testing';
+import { SessionQuery } from '../state/session.query';
+import { IsMePipe } from './is-me.pipe';
+
+describe('IsMePipe', () => {
+  it('create an instance', () => {
+    const sessionQuery: SessionQuery = TestBed.get(SessionQuery);
+    const pipe = new IsMePipe(sessionQuery);
+    expect(pipe).toBeTruthy();
+  });
+});

web-client/src/app/pipes/is-me.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SessionQuery } from '../state/session.query';
+
+@Pipe({
+  name: 'isMe',
+})
+export class IsMePipe implements PipeTransform {
+  constructor(private sessionQuery: SessionQuery) {}
+
+  transform(address: string | undefined): boolean {
+    const me = this.sessionQuery.getValue().wallet?.wallet_id;
+    return address === me;
+  }
+}

web-client/src/app/pipes/xrp-date.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { XrpDatePipe } from './xrp-date.pipe';
+
+describe('XrpDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new XrpDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

web-client/src/app/pipes/xrp-date.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'xrpDate',
+})
+export class XrpDatePipe implements PipeTransform {
+  transform(date: number | undefined): string {
+    if (date) {
+      const from = new Date('01/01/2000');
+      const finalDate = new Date(from.setSeconds(from.getSeconds() + date));
+      return new Date(finalDate).toLocaleString();
+    }
+    return '';
+  }
+}

web-client/src/app/services/xrpl.service.ts

@@ -181,6 +181,21 @@ export class XrplService {
     );
   }
 
+  /**
+   * Retrieves a list of transactions that involved the specified account
+   *
+   * @see https://js.xrpl.org/interfaces/AccountTxRequest.html
+   */
+  async getAccountTx(account: string): Promise<xrpl.AccountTxResponse> {
+    return await this.withConnection(
+      async (client) =>
+        await client.request({
+          command: 'account_tx',
+          account,
+        })
+    );
+  }
+
   // For Reference: https://github.com/XRPLF/xrpl.js/blob/6e4868e6c7a03f0d48de1ddee5d9a88700ab5a7c/src/transaction/sign.ts#L54
   /*
   async submitTransaction(

web-client/src/app/state/history/history.model.ts

@@ -0,0 +1,18 @@
+import { Transaction, TransactionMetadata } from 'xrpl';
+
+export interface History {
+  meta: string | TransactionMetadata;
+  tx?: Transaction & {
+    Destination?: string;
+    Amount?: {
+      currency?: string;
+      value?: string;
+    };
+    date?: number;
+    hash?: string;
+    ledger_index?: number;
+  };
+  validated: boolean;
+}
+
+export const createHistory = (params: Partial<History>) => ({} as History);

web-client/src/app/state/history/history.query.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { QueryEntity } from '@datorama/akita';
+import { SetupQuery } from '../setup';
+import { HistoryState, HistoryStore } from './history.store';
+
+@Injectable({ providedIn: 'root' })
+export class HistoryQuery extends QueryEntity<HistoryState> {
+  transactions = this.selectAll({
+    filterBy: ({ tx }: any) =>
+      tx?.TransactionType === 'Payment' &&
+      tx.Amount?.currency === this.setupQuery.tokenSymbol,
+  });
+
+  constructor(protected store: HistoryStore, private setupQuery: SetupQuery) {
+    super(store);
+  }
+}

web-client/src/app/state/history/history.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { XrplService } from 'src/app/services/xrpl.service';
+import { SessionQuery } from '../session.query';
+import { HistoryStore } from './history.store';
+
+@Injectable({ providedIn: 'root' })
+export class HistoryService {
+  constructor(
+    private historyStore: HistoryStore,
+    private xrplService: XrplService,
+    private sessionQuery: SessionQuery
+  ) {}
+
+  async getTxList() {
+    const address = this.sessionQuery.getValue().wallet?.wallet_id;
+    if (address) {
+      await this.xrplService.getAccountTx(address).then(({ result }) => {
+        const { transactions } = result;
+        this.historyStore.set(transactions);
+      });
+    }
+  }
+}

web-client/src/app/state/history/history.store.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
+import { History } from './history.model';
+
+export type HistoryState = EntityState<History>;
+
+@Injectable({ providedIn: 'root' })
+@StoreConfig({
+  name: 'history',
+  idKey: 'date',
+  resettable: true,
+})
+export class HistoryStore extends EntityStore<HistoryState> {
+  constructor() {
+    super();
+  }
+
+  akitaPreAddEntity(
+    newEntity: History
+  ): History & { date: number | undefined } {
+    return {
+      ...newEntity,
+      date: newEntity.tx?.date,
+    };
+  }
+}

web-client/src/app/state/history/index.ts

@@ -0,0 +1,4 @@
+export * from './history.model';
+export * from './history.query';
+export * from './history.service';
+export { HistoryState, HistoryStore } from './history.store';

web-client/src/app/state/session-xrpl.service.spec.ts

@@ -1,5 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { SessionXrplService } from './session-xrpl.service';
 import { SessionStore } from './session.store';
 
@@ -9,7 +10,7 @@ describe('SessionXrplService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule],
       providers: [SessionXrplService, SessionStore],
     });
 

web-client/src/app/state/session-xrpl.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { NavController } from '@ionic/angular';
 import { firstValueFrom } from 'rxjs';
 import { EnclaveService } from 'src/app/services/enclave';
 import { XrplService } from 'src/app/services/xrpl.service';
@@ -27,7 +28,6 @@ import { SwalHelper } from '../utils/notification/swal-helper';
 import { ConnectorQuery } from './connector';
 import { SessionQuery } from './session.query';
 import { SessionStore, XrplBalance } from './session.store';
-
 /**
  * This service manages session state and operations related to the XRP ledger.
  */
@@ -68,7 +68,7 @@ export class SessionXrplService {
     private enclaveService: EnclaveService,
     private xrplService: XrplService,
     private connectorQuery: ConnectorQuery,
-
+    private navCtrl: NavController,
     private notification: SwalHelper
   ) {}
 
@@ -139,7 +139,7 @@ export class SessionXrplService {
   async sendAutoFunds(
     receiverId: string,
     amount: number
-  ): Promise<xrpl.TxResponse> {
+  ): Promise<{ xrplResult: xrpl.TxResponse }> {
     const public_key_hex = environment.autofundXrpPublicKey;
     const issuer_id = environment.xrpIssuer;
     const pin = environment.autofundAccountPin;
@@ -161,9 +161,8 @@ export class SessionXrplService {
     );
 
     const txResponse = await this.submitTransaction(txnSignedEncoded);
-    const txSucceeded = checkTxResponseSucceeded(txResponse);
 
-    return txResponse;
+    return { xrplResult: txResponse };
   }
 
   async sendFundsCommissioned(
@@ -555,10 +554,16 @@ export class SessionXrplService {
         err instanceof Error &&
         err.message.includes('SessionService.signTransaction: invalid auth')
       ) {
-        await this.notification.swal.fire({
-          icon: 'error',
-          text: 'Invalid PIN',
-        });
+        await this.notification.swal
+          .fire({
+            icon: 'error',
+            text: 'Invalid PIN',
+          })
+          .then(({ isConfirmed }) => {
+            if (isConfirmed) {
+              this.navCtrl.navigateRoot('/');
+            }
+          });
         throw new Error('Local error:');
       } else {
         throw err;

web-client/src/app/state/setup/setup.query.ts

@@ -7,6 +7,7 @@ import { SetupState, SetupStore } from './setup.store';
 export class SetupQuery extends Query<SetupState> {
   tokenIssuer = this.getValue().tokenIssuer.trim() || environment.tokenIssuer;
   xrpIssuer = this.getValue().xrpIssuer.trim() || environment.xrpIssuer;
+  tokenSymbol = this.getValue().tokenSymbol.trim() || environment.tokenSymbol;
   ledger = this.getValue().ledger.trim()
     ? { ...environment.xrplClient, server: this.getValue().ledger }
     : environment.xrplClient;

web-client/src/app/views/history/history-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HistoryPage } from './history.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HistoryPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HistoryPageRoutingModule {}

web-client/src/app/views/history/history.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { SharedModule } from 'src/app/modules/shared/shared.module';
+import { IsMePipe } from 'src/app/pipes/is-me.pipe';
+import { XrpDatePipe } from 'src/app/pipes/xrp-date.pipe';
+import { HistoryPageRoutingModule } from './history-routing.module';
+import { HistoryPage } from './history.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HistoryPageRoutingModule,
+    SharedModule,
+  ],
+  declarations: [HistoryPage, XrpDatePipe, IsMePipe],
+})
+export class HistoryPageModule {}

web-client/src/app/views/history/history.page.html

@@ -0,0 +1,51 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>History</ion-title>
+    <ion-buttons slot="end">
+      <app-logout-button></app-logout-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="ion-padding">
+    <h2 class="font-bold">Recent transactions</h2>
+  </div>
+
+  <ng-container *ngIf="(historyQuery.transactions| async)?.length; else empty">
+    <ion-list lines="full" *ngIf="historyQuery.transactions| async">
+      <ion-item *ngFor="let item of historyQuery.transactions| async">
+        <ion-icon
+          slot="start"
+          [name]="(item?.tx?.Account | isMe) ? 'arrow-forward' : 'arrow-back'"
+        ></ion-icon>
+        <ion-label>
+          <ion-text class="font-bold" color="primary">
+            <small>
+              {{(item?.tx?.Account | isMe) ? 'Sent To' : 'Received From'}}
+            </small>
+          </ion-text>
+          <h2>
+            {{(item?.tx?.Account | isMe) ? item?.tx?.Destination :
+            item?.tx?.Account}}
+          </h2>
+          <h6>{{item?.tx?.date | xrpDate}}</h6>
+        </ion-label>
+        <ion-note slot="end" color="primary">
+          <small class="font-bold">
+            {{item?.tx?.Amount?.value | currency: 'FOO'}}
+          </small>
+        </ion-note>
+      </ion-item>
+    </ion-list>
+  </ng-container>
+
+  <ng-template #empty>
+    <div class="ion-padding-horizontal ion-text-center">
+      <p>Your transactions list is empty</p>
+    </div>
+  </ng-template>
+</ion-content>