Merge new features to demo (#498)

* 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

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

backend-services/src/web_asgi/main.py

@@ -23,8 +23,7 @@
 
 origins = [str(app_settings.primary_origin)]
 if app_settings.staging_mode:
-    origins.append("http://localhost:*")
-
+    origins.append("http://localhost:4200")
 
 app = FastAPI()
 app.add_middleware(

web-client/package-lock.json

@@ -38,24 +38,24 @@
     "@angular/platform-browser": "13.3.11",
     "@angular/platform-browser-dynamic": "13.3.11",
     "@angular/router": "13.3.11",
-    "@awesome-cordova-plugins/core": "^6.1.0",
-    "@awesome-cordova-plugins/printer": "^6.1.0",
-    "@capacitor/app": "^4.1.0",
-    "@capacitor/browser": "^4.0.1",
-    "@capacitor/camera": "^4.1.3",
-    "@capacitor/clipboard": "^4.0.1",
-    "@capacitor/core": "^4.4.0",
-    "@capacitor/haptics": "^4.0.1",
-    "@capacitor/keyboard": "^4.0.1",
-    "@capacitor/splash-screen": "^4.1.1",
-    "@capacitor/status-bar": "^4.0.1",
+    "@awesome-cordova-plugins/core": "^6.2.0",
+    "@awesome-cordova-plugins/printer": "^6.2.0",
+    "@capacitor/app": "^4.1.1",
+    "@capacitor/browser": "^4.1.0",
+    "@capacitor/camera": "^4.1.4",
+    "@capacitor/clipboard": "^4.1.0",
+    "@capacitor/core": "^4.6.1",
+    "@capacitor/haptics": "^4.1.0",
+    "@capacitor/keyboard": "^4.1.0",
+    "@capacitor/splash-screen": "^4.1.2",
+    "@capacitor/status-bar": "^4.1.1",
     "@datorama/akita": "^7.0.1",
     "@datorama/akita-ng-entity-service": "^7.0.0",
     "@datorama/akita-ng-router-store": "^7.0.0",
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@ionic/angular": "^6.3.2",
+    "@ionic/angular": "^6.3.9",
     "@ionic/pwa-elements": "^3.1.1",
     "@msgpack/msgpack": "^2.7.2",
     "@ngneat/input-mask": "^5.0.1",
@@ -105,7 +105,7 @@
     "@angular/elements": "13.3.11",
     "@angular/language-service": "13.3.11",
     "@babel/core": "^7.19.6",
-    "@capacitor/cli": "^4.4.0",
+    "@capacitor/cli": "^4.6.1",
     "@compodoc/compodoc": "^1.1.19",
     "@datorama/akita-cli": "^6.1.1",
     "@datorama/akita-ngdevtools": "^7.0.0",

web-client/package.json

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

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

@@ -1,11 +1,13 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppComponent],
+      imports: [RouterTestingModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));

web-client/src/app/app.component.spec.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { Platform } from '@ionic/angular';
 import { environment } from 'src/environments/environment';
+import { AutoLogoutService } from './services/auto-logout.service';
 import { SetupService } from './state/setup';
 
 @Component({
@@ -11,7 +12,11 @@ import { SetupService } from './state/setup';
 })
 export class AppComponent {
   logo: string | undefined;
-  constructor(private platform: Platform, private setupService: SetupService) {
+  constructor(
+    private platform: Platform,
+    private setupService: SetupService,
+    private autoLogoutService: AutoLogoutService
+  ) {
     this.initializeApp();
   }
 

web-client/src/app/app.component.ts

@@ -0,0 +1,33 @@
+<ion-list lines="none">
+  <ion-list-header>
+    <ion-label color="primary">
+      <h1 class="font-nasalization">Recipients list</h1>
+    </ion-label>
+  </ion-list-header>
+
+  <div *ngIf="bookmarkQuery.selectCount() | async; else empty">
+    <ng-container *ngFor="let bookmark of bookmarkQuery.selectAll() | async">
+      <ion-item class="app-item" *ngIf="bookmark?.id">
+        <ion-icon slot="start" name="bookmark"></ion-icon>
+        <ion-label>
+          <h2 class="!font-black">{{ bookmark?.name }}</h2>
+          <h6>{{ bookmark?.address }}</h6>
+        </ion-label>
+        <ion-buttons>
+          <ion-button (click)="sendFund(bookmark.address)">
+            <ion-icon slot="icon-only" name="cash"></ion-icon>
+          </ion-button>
+          <ion-button (click)="deleteBookmark(bookmark.id)">
+            <ion-icon slot="icon-only" name="trash" color="danger"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-item>
+    </ng-container>
+  </div>
+
+  <ng-template #empty>
+    <div class="ion-padding-horizontal ion-text-center">
+      <p>Your recipient list is empty</p>
+    </div>
+  </ng-template>
+</ion-list>

web-client/src/app/components/bookmark-list/bookmark-list.component.html

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IonicModule } from '@ionic/angular';
+import { BookmarkListComponent } from './bookmark-list.component';
+
+describe('BookmarkListComponent', () => {
+  let component: BookmarkListComponent;
+  let fixture: ComponentFixture<BookmarkListComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [BookmarkListComponent],
+      imports: [IonicModule.forRoot(), RouterTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BookmarkListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-client/src/app/components/bookmark-list/bookmark-list.component.scss

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { BookmarkQuery, BookmarkService } from 'src/app/state/bookmark';
+import { SwalHelper } from 'src/app/utils/notification/swal-helper';
+
+@Component({
+  selector: 'app-bookmark-list',
+  templateUrl: './bookmark-list.component.html',
+  styleUrls: ['./bookmark-list.component.scss'],
+})
+export class BookmarkListComponent implements OnInit {
+  @Input() bookmarks = [];
+
+  constructor(
+    public bookmarkQuery: BookmarkQuery,
+    private bookmarkService: BookmarkService,
+    private navCtrl: NavController,
+    private notification: SwalHelper
+  ) {}
+
+  ngOnInit() {}
+
+  sendFund(address: string) {
+    this.navCtrl.navigateForward('pay', {
+      state: { address },
+    });
+  }
+
+  deleteBookmark(id: string) {
+    this.notification.swal.fire({
+      icon: 'warning',
+      titleText: 'Delete bookmark',
+      text: 'Are you sure you want to delete this bookmark?',
+      showCancelButton: true,
+      confirmButtonText: 'Yes',
+      showLoaderOnConfirm: true,
+      confirmButtonColor: 'var(--ion-color-primary)',
+      cancelButtonColor: 'var(--ion-color-medium)',
+      reverseButtons: true,
+      preConfirm: async () => {
+        await this.bookmarkService.deleteBookmark(id);
+      },
+    });
+  }
+}

web-client/src/app/components/bookmark-list/bookmark-list.component.spec.ts

@@ -0,0 +1,33 @@
+<ion-accordion-group class="app-item">
+  <ion-accordion value="new">
+    <ion-item slot="header" lines="none">
+      <ion-icon slot="start" name="add-circle"></ion-icon>
+      <ion-label>Add a recipient</ion-label>
+    </ion-item>
+    <div slot="content">
+      <ion-list lines="none" class="p-0">
+        <form
+          id="form-bookmark"
+          [formGroup]="bookmarkForm"
+          (ngSubmit)="createBookmark(bookmarkForm)"
+        >
+          <ion-item>
+            <ion-label position="stacked">Name</ion-label>
+            <ion-input type="text" formControlName="name"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="stacked">Address</ion-label>
+            <ion-textarea
+              class="px-0"
+              type="text"
+              formControlName="address"
+            ></ion-textarea>
+          </ion-item>
+        </form>
+      </ion-list>
+      <ion-button expand="full" class="m-0" type="submit" form="form-bookmark">
+        Click to add new bookmark
+      </ion-button>
+    </div>
+  </ion-accordion>
+</ion-accordion-group>

web-client/src/app/components/bookmark-list/bookmark-list.component.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { NewBookmarkComponent } from './new-bookmark.component';
+
+describe('NewBookmarkComponent', () => {
+  let component: NewBookmarkComponent;
+  let fixture: ComponentFixture<NewBookmarkComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewBookmarkComponent],
+      imports: [IonicModule.forRoot(), ReactiveFormsModule, FormsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewBookmarkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-client/src/app/components/new-bookmark/new-bookmark.component.html

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { BookmarkService } from 'src/app/state/bookmark';
+
+@Component({
+  selector: 'app-new-bookmark',
+  templateUrl: './new-bookmark.component.html',
+  styleUrls: ['./new-bookmark.component.scss'],
+})
+export class NewBookmarkComponent implements OnInit {
+  bookmarkForm: FormGroup;
+
+  constructor(
+    private bookmarkService: BookmarkService,
+    private formBuilder: FormBuilder
+  ) {
+    this.bookmarkForm = this.formBuilder.group({
+      name: [
+        '',
+        Validators.compose([Validators.minLength(2), Validators.required]),
+      ],
+      address: [
+        '',
+        Validators.compose([Validators.minLength(10), Validators.required]),
+      ],
+    });
+  }
+
+  ngOnInit() {}
+
+  async createBookmark(form: FormGroup) {
+    form.markAllAsTouched();
+    if (form.valid) {
+      const { name, address } = form.value;
+      await this.bookmarkService
+        .createBookmark({ name, address })
+        .then((success) => {
+          if (success) {
+            form.reset();
+          }
+        });
+    }
+  }
+}

web-client/src/app/components/new-bookmark/new-bookmark.component.scss

@@ -38,6 +38,6 @@
     shape="round"
     type="submit"
     [disabled]="!paymentForm.valid"
-    >PAY
+    >{{ buttonHeading }}
   </ion-button>
 </form>

web-client/src/app/components/new-bookmark/new-bookmark.component.spec.ts

@@ -48,6 +48,8 @@ export class PayAmountFormComponent implements OnInit, OnChanges {
   /** (Optional) Hook to set an initial amount value, if defined. */
   @Input() setInitialAmountValue?: string;
 
+  @Input() buttonHeading = 'PAY';
+
   #paymentForm?: FormGroup;
 
   constructor() {}

web-client/src/app/components/new-bookmark/new-bookmark.component.ts

@@ -2,7 +2,7 @@
   <div class="inline-block w-auto m-auto">
     <ion-icon name="lock-closed-outline" class="!text-5xl"></ion-icon>
 
-    <h1 class="font-semibold font-nasalization">Enter Pin</h1>
+    <h1 class="font-semibold font-nasalization">{{ titleHeading }}</h1>
 
     <form [formGroup]="pinForm" (ngSubmit)="onSubmit()">
       <div>

web-client/src/app/components/pay-amount-form/pay-amount-form.component.html

@@ -17,6 +17,8 @@ import { checkClass } from 'src/helpers/helpers';
   styleUrls: ['./pin-entry.component.scss'],
 })
 export class PinEntryComponent implements OnInit {
+  @Input() titleHeading = '';
+
   /** Emit the PIN confirmed by the user. */
   @Output() pinConfirmed = new EventEmitter<PinValue>();
 

web-client/src/app/components/pay-amount-form/pay-amount-form.component.ts

@@ -11,7 +11,9 @@ import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
 import { ActionItemComponent } from 'src/app/components/action-item/action-item.component';
 import { AssetAccordionComponent } from 'src/app/components/asset-accordion/asset-accordion.component';
 import { BalanceSummaryCardComponent } from 'src/app/components/balance-summary-card/balance-summary-card.component';
+import { BookmarkListComponent } from 'src/app/components/bookmark-list/bookmark-list.component';
 import { LogoutButtonComponent } from 'src/app/components/logout-button/logout-button.component';
+import { NewBookmarkComponent } from 'src/app/components/new-bookmark/new-bookmark.component';
 import { ProfileCardHorizontalComponent } from 'src/app/components/profile-card-horizontal/profile-card-horizontal.component';
 import { SecurityQuestionsComponent } from 'src/app/components/security-questions/security-questions.component';
 import { AssetPipesModule } from 'src/app/pipes/asset-pipes.module';
@@ -24,6 +26,8 @@ import { AssetPipesModule } from 'src/app/pipes/asset-pipes.module';
     BalanceSummaryCardComponent,
     AssetAccordionComponent,
     LogoutButtonComponent,
+    NewBookmarkComponent,
+    BookmarkListComponent,
   ],
   imports: [
     IonicModule,
@@ -48,6 +52,8 @@ import { AssetPipesModule } from 'src/app/pipes/asset-pipes.module';
     BalanceSummaryCardComponent,
     AssetAccordionComponent,
     LogoutButtonComponent,
+    NewBookmarkComponent,
+    BookmarkListComponent,
     NgxScannerQrcodeModule,
   ],
   providers: [Printer],

web-client/src/app/components/pin-entry/pin-entry.component.html

@@ -0,0 +1,19 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AutoLogoutService } from './auto-logout.service';
+
+describe('AutoLogoutService', () => {
+  let service: AutoLogoutService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+    });
+    service = TestBed.inject(AutoLogoutService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});