Feat: add substrate handling

angular.json

@@ -84,6 +84,12 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "codeCoverage": true,
+            "codeCoverageExclude": [
+              "/**/*mock.ts",
+              "/**/*stub.ts",
+              "/**/test-helpers/**",
+              "src/test/**"
+            ],
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, ExtraOptions } from '@angular/router';
 import { InboxComponent } from './inbox/inbox.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -11,21 +11,26 @@ import { InboxComposeComponent } from './inbox/inbox-compose/inbox-compose.compo
 import { InboxMessageComponent } from './inbox/inbox-message/inbox-message.component';
 import { InboxMessagesComponent } from './inbox/inbox-messages/inbox-messages.component';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { SettingsComponent } from './settings/settings/settings.component';
 
 
 const routes: Routes = [
-  {
-    path: '',
-    component: InboxComponent,
-  }
+  { path: '', component: InboxComponent },
+  { path: 'settings', component: SettingsComponent }
+
 ];
 
+const routerOptions: ExtraOptions = {
+  anchorScrolling: 'enabled',
+};
+
 @NgModule({
   declarations: [
     InboxComponent,
     InboxMessagesComponent,
     InboxMessageComponent,
     InboxComposeComponent,
+    SettingsComponent,
   ],
   imports: [
     FormsModule,
@@ -34,7 +39,7 @@ const routes: Routes = [
     ModalModule.forRoot(),
     CommonModule,
     CKEditorModule,
-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes, routerOptions)
   ],
   providers: [HttpHelpersService],
   exports: [RouterModule]

src/app/app.component.html

@@ -8,9 +8,23 @@
 </div>
 <footer class="footer">
   <div class="container">
-    <span class="text-muted">
-      Made by <a href="https://mailchain.xyz" target="_blank">Mailchain</a>
-    </span>
-    <span class="text-muted pull-right">Inbox Version: {{version}} (API Version: {{apiVersion}})</span>
+
+    <div class="row">
+      <div class="col">
+        <span class="text-muted">
+          Made by <a href="https://mailchain.xyz" target="_blank">Mailchain</a>
+        </span>
+      </div>
+      <div class="col">
+        <span *ngIf="currentProtocol" class="text-muted">
+          <i class="fa fa-bolt"></i>&nbsp;Connected to {{currentNetwork | titlecase}} on {{currentProtocol | titlecase}}
+        </span>
+      </div>
+      <div class="col">
+        <span class="text-muted pull-right"><i class="fa fa-envelope"></i>&nbsp;Inbox Version: {{version}} (API Version:
+          {{apiVersion}})</span>
+      </div>
+    </div>
+
   </div>
 </footer>

src/app/app.component.spec.ts

@@ -74,53 +74,53 @@ describe('AppComponent', () => {
 
   });
 
-  describe('handleApiAvailability', () => {
+  describe('handleApiAddressesAvailability', () => {
     it('should handle connection refused error', async () => {
-      spyOn(connectivityService, 'getApiAvailability').and.returnValue(mailchainTestService.getApiAvailabilityConnectionRefused())
+      spyOn(connectivityService, 'getApiAddressAvailability').and.returnValue(mailchainTestService.getApiAddressAvailabilityConnectionRefused())
 
       expect(component.errorTitle).toEqual("")
       expect(component.errorMessage).toEqual("")
 
-      await component.handleApiAvailability()
+      await component.handleApiAddressesAvailability()
 
       expect(component.errorTitle).toEqual(errorMessages.clientNotRunningErrorTitle)
       expect(component.errorMessage).toEqual(errorMessages.clientNotRunningErrorMessage)
 
     });
 
     it('should handle unknown error', async () => {
-      spyOn(connectivityService, 'getApiAvailability').and.returnValue(mailchainTestService.getApiAvailabilityErrorUnknown())
+      spyOn(connectivityService, 'getApiAddressAvailability').and.returnValue(mailchainTestService.getApiAddressAvailabilityErrorUnknown())
 
       expect(component.errorTitle).toEqual("")
       expect(component.errorMessage).toEqual("")
 
-      await component.handleApiAvailability()
+      await component.handleApiAddressesAvailability()
 
       expect(component.errorTitle).toEqual(errorMessages.unknownErrorTitle)
       expect(component.errorMessage).toEqual(errorMessages.unknownErrorMessage)
 
     });
 
     it('should handle status ok, with 0 addresses, error', async () => {
-      spyOn(connectivityService, 'getApiAvailability').and.returnValue(mailchainTestService.getApiAvailabilitySuccessNoAddresses())
+      spyOn(connectivityService, 'getApiAddressAvailability').and.returnValue(mailchainTestService.getApiAddressAvailabilitySuccessNoAddresses())
 
       expect(component.errorTitle).toEqual("")
       expect(component.errorMessage).toEqual("")
 
-      await component.handleApiAvailability()
+      await component.handleApiAddressesAvailability()
 
       expect(component.errorTitle).toEqual(errorMessages.accountConfigurationErrorTitle)
       expect(component.errorMessage).toEqual(errorMessages.accountConfigurationErrorMessage)
 
     });
 
     it('should handle status ok, with addresses', async () => {
-      spyOn(connectivityService, 'getApiAvailability').and.returnValue(mailchainTestService.getApiAvailabilitySuccess())
+      spyOn(connectivityService, 'getApiAddressAvailability').and.returnValue(mailchainTestService.getApiAddressAvailabilitySuccess())
 
       expect(component.errorTitle).toEqual("")
       expect(component.errorMessage).toEqual("")
 
-      await component.handleApiAvailability()
+      await component.handleApiAddressesAvailability()
 
       expect(component.errorTitle).toEqual("")
       expect(component.errorMessage).toEqual("")

src/app/app.component.ts

@@ -4,6 +4,8 @@ import { ConnectivityService } from './services/mailchain/connectivity/connectiv
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ModalConnectivityErrorComponent } from './modals/modal-connectivity-error/modal-connectivity-error.component';
 import { errorMessages } from './services/helpers/error-messages/error-messages'
+import { LocalStorageProtocolService } from './services/helpers/local-storage-protocol/local-storage-protocol.service';
+import { LocalStorageServerService } from './services/helpers/local-storage-server/local-storage-server.service';
 
 @Component({
   selector: 'app-root',
@@ -14,16 +16,20 @@ import { errorMessages } from './services/helpers/error-messages/error-messages'
 export class AppComponent implements OnInit {
   public version: string = environment.version;
   public title = 'Mailchain Inbox';
-  public apiConnectivityInfo = {};
   public apiVersionInfo = {};
   public errorTitle: string = ""
   public errorMessage: string = ""
   public apiVersion = "";
   public modalConnectivityError: BsModalRef;
 
+  public currentNetwork: String;
+  public currentProtocol: String;
+
   constructor(
     private connectivityService: ConnectivityService,
-    private modalService: BsModalService
+    private modalService: BsModalService,
+    private localStorageProtocolService: LocalStorageProtocolService,
+    private localStorageServerService: LocalStorageServerService,
   ) {
 
   }
@@ -33,39 +39,50 @@ export class AppComponent implements OnInit {
   }
 
   public async ngOnInit() {
-    await this.handleApiAvailability()
+    this.currentNetwork = await this.localStorageServerService.getCurrentNetwork()
+    this.currentProtocol = await this.localStorageProtocolService.getCurrentProtocol()
+
+    await this.handleApiProtocolsAvailability()
+    await this.handleApiAddressesAvailability()
     await this.handleWebConnectivity()
     this.setApiVersion()
   }
 
   /**
-   * handleApiAvailability checks if the client is available.
+   * handleApiAddressesAvailability checks if the client is available.
    * Displays an error modal if not able to connect or hides the error modal if able to connect
    */
-  public async handleApiAvailability() {
-    this.apiConnectivityInfo = await this.connectivityService.getApiAvailability();
+  public async handleApiProtocolsAvailability() {
+    let apiConnectivityInfo = await this.connectivityService.getApiProtocolsAvailability();
+
+    if (apiConnectivityInfo["status"] == "error") {
+      this.handleApiConnectivityError(apiConnectivityInfo)
+    } else if (apiConnectivityInfo["status"] == "ok") {
+      if (apiConnectivityInfo["protocols"] == 0) {
+        // No protocols are configured
+        this.handleErrorOnPage(
+          errorMessages.protocolConfigurationErrorTitle,
+          errorMessages.protocolConfigurationErrorMessage
+        )
+      } else {
+        if (this.modalConnectivityError) {
+          this.modalConnectivityError.hide()
+        }
+      }
+    }
+  }
 
-    if (this.apiConnectivityInfo["status"] == "error") {
-      switch (this.apiConnectivityInfo["code"]) {
-        case 0:
-          // Could not connect to Mailchain client
-          this.handleErrorOnPage(
-            errorMessages.clientNotRunningErrorTitle,
-            errorMessages.clientNotRunningErrorMessage
-          )
-          break;
+  /**
+   * handleApiAddressesAvailability checks if the client is available.
+   * Displays an error modal if not able to connect or hides the error modal if able to connect
+   */
+  public async handleApiAddressesAvailability() {
+    let apiConnectivityInfo = await this.connectivityService.getApiAddressAvailability();
 
-        default:
-          // Something else happened
-          this.handleErrorOnPage(
-            errorMessages.unknownErrorTitle,
-            errorMessages.unknownErrorMessage
-          )
-          console.warn('please add a new error message for this code', this.apiConnectivityInfo["code"]);
-          break;
-      }
-    } else if (this.apiConnectivityInfo["status"] == "ok") {
-      if (this.apiConnectivityInfo["addresses"] == 0) {
+    if (apiConnectivityInfo["status"] == "error") {
+      this.handleApiConnectivityError(apiConnectivityInfo)
+    } else if (apiConnectivityInfo["status"] == "ok") {
+      if (apiConnectivityInfo["addresses"] == 0) {
         // No addresses are configured
         this.handleErrorOnPage(
           errorMessages.accountConfigurationErrorTitle,
@@ -79,6 +96,30 @@ export class AppComponent implements OnInit {
     }
   }
 
+  /**
+   * handleApiConnectivityError
+   */
+  handleApiConnectivityError(errorBlock) {
+    switch (errorBlock["code"]) {
+      case 0:
+        // Could not connect to Mailchain client
+        this.handleErrorOnPage(
+          errorMessages.clientNotRunningErrorTitle,
+          errorMessages.clientNotRunningErrorMessage
+        )
+        break;
+
+      default:
+        // Something else happened
+        this.handleErrorOnPage(
+          errorMessages.unknownErrorTitle,
+          errorMessages.unknownErrorMessage
+        )
+        console.warn('please add a new error message for this code', errorBlock["code"]);
+        break;
+    }
+  }
+
   /**
    * handleWebConnectivity
    */

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { SearchPipe } from './pipes/search-pipe/search-pipe.pipe';
 import { AddressPipe } from './pipes/address-pipe/address-pipe.pipe';
 import { LocationStrategy, HashLocationStrategy, APP_BASE_HREF } from '@angular/common';
 import { ModalConnectivityErrorComponent } from './modals/modal-connectivity-error/modal-connectivity-error.component';
+import { SettingsComponent } from './settings/settings/settings.component';
 
 @NgModule({
   declarations: [