Bugfix/154-service-page

UI/cypress/e2e/use-case/activity.cy.ts

@@ -10,7 +10,8 @@ describe('Go on activity page with a wallet', () => {
 
   it('Go on activity page started', () => {
     // Complete profile information
-    cy.get('#btn-use-case-bi-clipboard-data-fill').click();
+    cy.visit(`${Cypress.env('baseUrl')}/use-cases/activity`);
+    cy.get('app-transaction-activity-table [data-id="login-btn"]').click();
   });
 });
 
@@ -21,8 +22,6 @@ describe('Go on activity page without a wallet', () => {
 
   it('Go on activity page started', () => {
     // Complete profile information
-    cy.get('#btn-use-case-bi-clipboard-data-fill').click();
-
     cy.get('app-transaction-activity-table').contains('Wallet is not connected');
   });
 });

UI/cypress/e2e/use-case/login.cy.ts

@@ -11,7 +11,8 @@ describe('Log an user without Metamask', () => {
     cy.get('[data-id="explore-solutions"]').click();
 
     // Click on login button
-    cy.get('app-use-cases-sidebar-header [data-id="login-btn"]').click();
+    cy.visit(`${Cypress.env('baseUrl')}/use-cases/payment-request`);
+    cy.get('app-payment-request-profile-settings [data-id="login-btn"]').click();
     cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
 
     // Check snackbar message
@@ -35,7 +36,8 @@ describe('Log an user with MetaMask', () => {
     cy.get('[data-id="explore-solutions"]').click();
 
     // Click on login button
-    cy.get('app-use-cases-sidebar-header [data-id="login-btn"]').click();
+    cy.visit(`${Cypress.env('baseUrl')}/use-cases/payment-request`);
+    cy.get('app-payment-request-profile-settings [data-id="login-btn"]').click();
     cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
 
     // check is address is visible

UI/cypress/support/commands.ts

@@ -39,7 +39,8 @@ Cypress.Commands.add('login', (walletAddress: string, signedMessage: string, net
   cy.get('[data-id="explore-solutions"]').click();
 
   // Click on login button
-  cy.get('app-use-cases-sidebar-header [data-id="login-btn"]').click();
+  cy.visit(`${Cypress.env('baseUrl')}/use-cases/payment-request`);
+  cy.get('app-payment-request-profile-settings [data-id="login-btn"]').click();
   cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
 });
 

UI/src/app/page/use-cases-page/activity/activity.module.ts

@@ -1,15 +1,22 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { UserCasesSharedComponentsModule } from '../components/user-cases-shared-components.module';
 import { UseCasesPageRoutingModule } from '../use-cases-page-routing.module';
 import { MaterialModule } from './../../../module/material.module';
 import { SharedComponentsModule } from './../../../shared/components/shared-components.module';
-import { TransactionActivityHeaderComponent } from './components/transaction-activity-header/transaction-activity-header.component';
 import { TransactionActivityTableComponent } from './components/transaction-activity-table/transaction-activity-table.component';
 import { ActivityContainerComponent } from './containers/activity-container/activity-container.component';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @NgModule({
-  declarations: [ActivityContainerComponent, TransactionActivityHeaderComponent, TransactionActivityTableComponent],
-  imports: [CommonModule, SharedComponentsModule, UseCasesPageRoutingModule, MaterialModule, NgxSkeletonLoaderModule]
+  declarations: [ActivityContainerComponent, TransactionActivityTableComponent],
+  imports: [
+    CommonModule,
+    SharedComponentsModule,
+    UseCasesPageRoutingModule,
+    MaterialModule,
+    NgxSkeletonLoaderModule,
+    UserCasesSharedComponentsModule
+  ]
 })
 export class ActivityModule {}

UI/src/app/page/use-cases-page/activity/components/transaction-activity-table/transaction-activity-table.component.html

@@ -1,3 +1,6 @@
+<!-- Login Header -->
+<app-use-cases-sidebar-header *ngIf="userIsConnected"> </app-use-cases-sidebar-header>
+
 <!-- Loading view -->
 <table class="w-100 shadow-sm bg-white" *ngIf="transactionsIsLoading && transactionsTable.length === 0">
   <thead>
@@ -88,3 +91,15 @@
     <p class="text-center mt-3">{{ historicalTransactionsError }}</p>
   </div>
 </div>
+
+<!-- Login button -->
+<div class="d-flex flex-column align-items-center justify-content-center" *ngIf="!userIsConnected">
+  <div class="d-flex flex-column align-items-center justify-content-center">
+    <app-chainbrary-button
+      [buttonClasses]="['btn-info-gradient', 'text-light']"
+      buttonText="Connect Wallet"
+      (callToAction)="web3LoginService.openLoginModal()"
+      data-id="login-btn"
+    />
+  </div>
+</div>

UI/src/app/page/use-cases-page/activity/components/transaction-activity-table/transaction-activity-table.component.ts

@@ -4,7 +4,7 @@ import { INetworkDetail, Web3LoginService } from '@chainbrary/web3-login';
 import { FormatService } from './../../../../../shared/services/format/format.service';
 
 @Component({
-  selector: 'app-transaction-activity-table',
+  selector: 'app-transaction-activity-table[userIsConnected]',
   templateUrl: './transaction-activity-table.component.html',
   styleUrls: ['./transaction-activity-table.component.scss']
 })
@@ -13,6 +13,7 @@ export class TransactionActivityTableComponent {
   @Input() currentNetwork: INetworkDetail | null;
   @Input() transactionsIsLoading: boolean;
   @Input() historicalTransactionsError: string | null;
+  @Input() userIsConnected: boolean;
   displayedColumns: string[] = ['action', 'amount', 'date'];
   role = TransactionRole;
 

UI/src/app/page/use-cases-page/activity/containers/activity-container/activity-container.component.html

@@ -1,12 +1,17 @@
-<div class="container py-3">
-  <app-transaction-activity-header></app-transaction-activity-header>
-  <div class="my-3">
-    <app-transaction-activity-table
-      [transactionsTable]="(transactions$ | async)!"
-      [currentNetwork]="currentNetwork$ | async"
-      [transactionsIsLoading]="(transactionsIsLoading$ | async)!"
-      [historicalTransactionsError]="historicalTransactionsError$ | async"
-    >
-    </app-transaction-activity-table>
+<div class="container px-0 pt-3 pb-5">
+  <div class="row justify-content-center mx-0">
+    <div class="col-12 col-md-8 col-lg-7 col-xl-6">
+      <app-use-cases-header [header]="headerPayload"></app-use-cases-header>
+      <div class="my-3">
+        <app-transaction-activity-table
+          [userIsConnected]="(userIsConnected$ | async)!"
+          [transactionsTable]="(transactions$ | async)!"
+          [currentNetwork]="currentNetwork$ | async"
+          [transactionsIsLoading]="(transactionsIsLoading$ | async)!"
+          [historicalTransactionsError]="historicalTransactionsError$ | async"
+        >
+        </app-transaction-activity-table>
+      </div>
+    </div>
   </div>
 </div>

UI/src/app/page/use-cases-page/activity/containers/activity-container/activity-container.component.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { StoreModule } from '@ngrx/store';
-import { initialState as authInitialState } from './../../../../../store/auth-store/state/init';
-import { TransactionActivityHeaderComponent } from '../../components/transaction-activity-header/transaction-activity-header.component';
+import { UserCasesSharedComponentsModule } from '../../../components/user-cases-shared-components.module';
 import { TransactionActivityTableComponent } from '../../components/transaction-activity-table/transaction-activity-table.component';
 import { SharedTestModule } from './../../../../../shared/components/shared-components.module';
-import { ActivityContainerComponent } from './activity-container.component';
+import { initialState as authInitialState } from './../../../../../store/auth-store/state/init';
 import { initialState as transactionInitialState } from './../../../../../store/transaction-store/state/init';
+import { ActivityContainerComponent } from './activity-container.component';
 
 describe('ActivityContainerComponent', () => {
   let component: ActivityContainerComponent;
@@ -19,9 +19,10 @@ describe('ActivityContainerComponent', () => {
           auth: () => authInitialState,
           transactions: () => transactionInitialState
         }),
-        SharedTestModule
+        SharedTestModule,
+        UserCasesSharedComponentsModule
       ],
-      declarations: [ActivityContainerComponent, TransactionActivityHeaderComponent, TransactionActivityTableComponent],
+      declarations: [ActivityContainerComponent, TransactionActivityTableComponent],
       providers: [
         { provide: MatDialogRef, useValue: {} },
         { provide: MAT_DIALOG_DATA, useValue: {} }

UI/src/app/page/use-cases-page/activity/containers/activity-container/activity-container.component.ts

@@ -4,8 +4,9 @@ import { INetworkDetail } from '@chainbrary/web3-login';
 import { Actions, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { Observable, ReplaySubject, distinctUntilChanged, filter, skip, takeUntil } from 'rxjs';
+import { IUseCasesHeader } from '../../../components/use-cases-header/use-cases-header.component';
 import { setAuthPublicAddress } from './../../../../../store/auth-store/state/actions';
-import { selectCurrentNetwork } from './../../../../../store/auth-store/state/selectors';
+import { selectCurrentNetwork, selectIsConnected } from './../../../../../store/auth-store/state/selectors';
 import { loadTransactionsFromBridgeTransfer } from './../../../../../store/transaction-store/state/actions';
 import {
   selectHistoricalTransactions,
@@ -23,7 +24,13 @@ export class ActivityContainerComponent implements OnInit, OnDestroy {
   transactionsIsLoading$: Observable<boolean>;
   currentNetwork$: Observable<INetworkDetail | null>;
   historicalTransactionsError$: Observable<string | null>;
+  userIsConnected$: Observable<boolean>;
   private destroyed$: ReplaySubject<boolean> = new ReplaySubject();
+  headerPayload: IUseCasesHeader = {
+    title: 'Recent Transactions',
+    description:
+      'Quickly view your recent transactions on your wallet. This is working only for the native tokens of the network currently.'
+  };
 
   constructor(
     private store: Store,
@@ -46,6 +53,7 @@ export class ActivityContainerComponent implements OnInit, OnDestroy {
     this.currentNetwork$ = this.store.select(selectCurrentNetwork);
     this.transactionsIsLoading$ = this.store.select(selectHistoricalTransactionsIsLoading);
     this.historicalTransactionsError$ = this.store.select(selectHistoricalTransactionsError);
+    this.userIsConnected$ = this.store.select(selectIsConnected);
   }
 
   callActions(): void {

UI/src/app/page/use-cases-page/components/use-cases-header/use-cases-header.component.html

@@ -0,0 +1,15 @@
+<!-- Title container -->
+<div class="container">
+  <div class="row">
+    <div class="col-12 text-start">
+      <!-- Title -->
+      <h3 class="text-dark">
+        <i class="bi bi-arrow-left me-3" [routerLink]="'./../'"></i>
+        <span>{{ header.title }}</span>
+      </h3>
+      <hr />
+      <!-- Description -->
+      <p class="text-muted">{{ header.description }}</p>
+    </div>
+  </div>
+</div>

UI/src/app/page/use-cases-page/components/use-cases-header/use-cases-header.component.scss

@@ -0,0 +1,3 @@
+.bi-arrow-left {
+  cursor: pointer;
+}

UI/src/app/page/use-cases-page/components/use-cases-header/use-cases-header.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UseCasesHeaderComponent } from './use-cases-header.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('UseCasesHeaderComponent', () => {
+  let component: UseCasesHeaderComponent;
+  let fixture: ComponentFixture<UseCasesHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [UseCasesHeaderComponent]
+    });
+    fixture = TestBed.createComponent(UseCasesHeaderComponent);
+    component = fixture.componentInstance;
+    component.header = {
+      title: 'title',
+      description: 'description'
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

UI/src/app/page/use-cases-page/components/use-cases-header/use-cases-header.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-use-cases-header[header]',
+  templateUrl: './use-cases-header.component.html',
+  styleUrls: ['./use-cases-header.component.scss']
+})
+export class UseCasesHeaderComponent {
+  @Input() header: IUseCasesHeader;
+}
+
+export interface IUseCasesHeader {
+  title: string;
+  description: string;
+}

UI/src/app/page/use-cases-page/components/use-cases-list/use-cases-list.component.html

@@ -0,0 +1,39 @@
+<div class="container-fluid px-0">
+  <div class="row mx-0 text-light justify-content-center">
+    <div class="col-12 col-md-8 col-lg-7 p-4 mt-md-3 header-container">
+      <h3>
+        <i class="bi bi-house me-2"></i>
+        <span>Services</span>
+      </h3>
+      <p>
+        Discover Chainbrary: Your Safe, User-Friendly Blockchain Starter Kit. Begin with ease, backed by our commitment
+        to your security.
+      </p>
+    </div>
+  </div>
+</div>
+<div class="container-fluid py-3">
+  <div class="row justify-content-center">
+    <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
+      <div class="row justify-content-center menu-item" *ngFor="let item of useCaseRoutes; let i = index">
+        <div class="col-11 card my-2 shadow border-0 px-0" [routerLink]="'/use-cases' + item.path">
+          <div class="disabled-screen" *ngIf="!item.enabled"></div>
+          <div class="row mx-0">
+            <div class="col-3 icon-container h-100" [ngClass]="'color-gradient-' + i">
+              <div class="d-flex h-100">
+                <i class="bi text-light m-auto" [ngClass]="item.icon"></i>
+              </div>
+            </div>
+            <div class="col-9 py-md-2">
+              <h5 class="pt-2">
+                {{ item.title }}
+                <span *ngIf="!item.enabled" class="coming-soon-badge text-secondary">(coming soon)</span>
+              </h5>
+              <p class="text-secondary menu-item-text">{{ item.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>