Format docs using linter and prettier.

docs/compodoc/modules/AccountsModule.html

@@ -247,35 +247,34 @@ import { CommonModule } from '@angular/common';
 
 import { AccountsRoutingModule } from '@pages/accounts/accounts-routing.module';
 import { AccountsComponent } from '@pages/accounts/accounts.component';
-import {SharedModule} from '@app/shared/shared.module';
+import { SharedModule } from '@app/shared/shared.module';
 import { AccountDetailsComponent } from '@pages/accounts/account-details/account-details.component';
-import {DataTablesModule} from 'angular-datatables';
+import { DataTablesModule } from 'angular-datatables';
 import { CreateAccountComponent } from '@pages/accounts/create-account/create-account.component';
-import {MatTableModule} from '@angular/material/table';
-import {MatSortModule} from '@angular/material/sort';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSelectModule} from '@angular/material/select';
-import {TransactionsModule} from '@pages/transactions/transactions.module';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatRippleModule} from '@angular/material/core';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {ReactiveFormsModule} from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { TransactionsModule } from '@pages/transactions/transactions.module';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatRippleModule } from '@angular/material/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ReactiveFormsModule } from '@angular/forms';
 import { AccountSearchComponent } from './account-search/account-search.component';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 @NgModule({
   declarations: [
     AccountsComponent,
     AccountDetailsComponent,
     CreateAccountComponent,
-    AccountSearchComponent
+    AccountSearchComponent,
   ],
   imports: [
     CommonModule,
@@ -298,9 +297,9 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
     MatProgressSpinnerModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-  ]
+  ],
 })
-export class AccountsModule { }
+export class AccountsModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AccountsRoutingModule.html

@@ -74,23 +74,23 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { AccountsComponent } from '@pages/accounts/accounts.component';
-import {CreateAccountComponent} from '@pages/accounts/create-account/create-account.component';
-import {AccountDetailsComponent} from '@pages/accounts/account-details/account-details.component';
-import {AccountSearchComponent} from '@pages/accounts/account-search/account-search.component';
+import { CreateAccountComponent } from '@pages/accounts/create-account/create-account.component';
+import { AccountDetailsComponent } from '@pages/accounts/account-details/account-details.component';
+import { AccountSearchComponent } from '@pages/accounts/account-search/account-search.component';
 
 const routes: Routes = [
   { path: '', component: AccountsComponent },
   { path: 'search', component: AccountSearchComponent },
   // { path: 'create', component: CreateAccountComponent },
   { path: ':id', component: AccountDetailsComponent },
-  { path: '**', redirectTo: '', pathMatch: 'full' }
+  { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AccountsRoutingModule { }
+export class AccountsRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AdminModule.html

@@ -187,36 +187,35 @@ import { CommonModule } from '@angular/common';
 
 import { AdminRoutingModule } from '@pages/admin/admin-routing.module';
 import { AdminComponent } from '@pages/admin/admin.component';
-import {SharedModule} from '@app/shared/shared.module';
-import {MatCardModule} from '@angular/material/card';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatIconModule} from '@angular/material/icon';
-import {MatTableModule} from '@angular/material/table';
-import {MatSortModule} from '@angular/material/sort';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatButtonModule} from '@angular/material/button';
-import {MatRippleModule} from '@angular/material/core';
-
+import { SharedModule } from '@app/shared/shared.module';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 
 @NgModule({
   declarations: [AdminComponent],
-    imports: [
-        CommonModule,
-        AdminRoutingModule,
-        SharedModule,
-        MatCardModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatIconModule,
-        MatTableModule,
-        MatSortModule,
-        MatPaginatorModule,
-        MatButtonModule,
-        MatRippleModule
-    ]
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    SharedModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    MatRippleModule,
+  ],
 })
-export class AdminModule { }
+export class AdminModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AdminRoutingModule.html

@@ -79,9 +79,9 @@ const routes: Routes = [{ path: '', component: AdminComponent }];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AdminRoutingModule { }
+export class AdminRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AppModule.html

@@ -65,6 +65,10 @@
 <title>cluster_AppModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1186,-268 1186,-70 8,-70"/>
 </g>
+<g id="clust6" class="cluster">
+<title>cluster_AppModule_bootstrap</title>
+<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
+</g>
 <g id="clust4" class="cluster">
 <title>cluster_AppModule_imports</title>
 <polygon fill="none" stroke="black" points="917,-78 917,-130 1178,-130 1178,-78 917,-78"/>
@@ -77,10 +81,6 @@
 <title>cluster_AppModule_declarations</title>
 <polygon fill="none" stroke="black" points="16,-78 16,-130 138,-130 138,-78 16,-78"/>
 </g>
-<g id="clust6" class="cluster">
-<title>cluster_AppModule_bootstrap</title>
-<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
-</g>
 <!-- AppComponent -->
 <g id="node1" class="node">
 <title>AppComponent</title>
@@ -277,30 +277,26 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {BrowserModule} from &#x27;@angular/platform-browser&#x27;;
-import {ErrorHandler, NgModule} from &#x27;@angular/core&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { BrowserModule } from &#x27;@angular/platform-browser&#x27;;
+import { ErrorHandler, NgModule } from &#x27;@angular/core&#x27;;
 
-import {AppRoutingModule} from &#x27;@app/app-routing.module&#x27;;
-import {AppComponent} from &#x27;@app/app.component&#x27;;
-import {BrowserAnimationsModule} from &#x27;@angular/platform-browser/animations&#x27;;
-import {HTTP_INTERCEPTORS, HttpClientModule} from &#x27;@angular/common/http&#x27;;
-import {
-  GlobalErrorHandler,
-  MockBackendProvider,
-} from &#x27;@app/_helpers&#x27;;
-import {DataTablesModule} from &#x27;angular-datatables&#x27;;
-import {SharedModule} from &#x27;@app/shared/shared.module&#x27;;
-import {MatTableModule} from &#x27;@angular/material/table&#x27;;
-import {AuthGuard} from &#x27;@app/_guards&#x27;;
-import {LoggerModule} from &#x27;ngx-logger&#x27;;
-import {environment} from &#x27;@src/environments/environment&#x27;;
-import {ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor} from &#x27;@app/_interceptors&#x27;;
-import {MutablePgpKeyStore} from &#x27;@app/_pgp&#x27;;
+import { AppRoutingModule } from &#x27;@app/app-routing.module&#x27;;
+import { AppComponent } from &#x27;@app/app.component&#x27;;
+import { BrowserAnimationsModule } from &#x27;@angular/platform-browser/animations&#x27;;
+import { HTTP_INTERCEPTORS, HttpClientModule } from &#x27;@angular/common/http&#x27;;
+import { GlobalErrorHandler, MockBackendProvider } from &#x27;@app/_helpers&#x27;;
+import { DataTablesModule } from &#x27;angular-datatables&#x27;;
+import { SharedModule } from &#x27;@app/shared/shared.module&#x27;;
+import { MatTableModule } from &#x27;@angular/material/table&#x27;;
+import { AuthGuard } from &#x27;@app/_guards&#x27;;
+import { LoggerModule } from &#x27;ngx-logger&#x27;;
+import { environment } from &#x27;@src/environments/environment&#x27;;
+import { ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor } from &#x27;@app/_interceptors&#x27;;
+import { MutablePgpKeyStore } from &#x27;@app/_pgp&#x27;;
+import { ServiceWorkerModule } from &#x27;@angular/service-worker&#x27;;
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -313,8 +309,9 @@ import {MutablePgpKeyStore} from &#x27;@app/_pgp&#x27;;
       level: environment.logLevel,
       serverLogLevel: environment.serverLogLevel,
       serverLoggingUrl: &#x60;${environment.loggingUrl}/api/logs/&#x60;,
-      disableConsoleLogging: false
-    })
+      disableConsoleLogging: false,
+    }),
+    ServiceWorkerModule.register(&#x27;ngsw-worker.js&#x27;, { enabled: environment.production }),
   ],
   providers: [
     AuthGuard,
@@ -326,9 +323,9 @@ import {MutablePgpKeyStore} from &#x27;@app/_pgp&#x27;;
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AppModule/dependencies.svg

@@ -24,6 +24,10 @@
 <title>cluster_AppModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1186,-268 1186,-70 8,-70"/>
 </g>
+<g id="clust6" class="cluster">
+<title>cluster_AppModule_bootstrap</title>
+<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
+</g>
 <g id="clust4" class="cluster">
 <title>cluster_AppModule_imports</title>
 <polygon fill="none" stroke="black" points="917,-78 917,-130 1178,-130 1178,-78 917,-78"/>
@@ -36,10 +40,6 @@
 <title>cluster_AppModule_declarations</title>
 <polygon fill="none" stroke="black" points="16,-78 16,-130 138,-130 138,-78 16,-78"/>
 </g>
-<g id="clust6" class="cluster">
-<title>cluster_AppModule_bootstrap</title>
-<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
-</g>
 <!-- AppComponent -->
 <g id="node1" class="node">
 <title>AppComponent</title>

docs/compodoc/modules/AppRoutingModule.html

@@ -71,22 +71,28 @@
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { NgModule } from &#x27;@angular/core&#x27;;
-import {Routes, RouterModule, PreloadAllModules} from &#x27;@angular/router&#x27;;
-import {AuthGuard} from &#x27;@app/_guards&#x27;;
+import { Routes, RouterModule, PreloadAllModules } from &#x27;@angular/router&#x27;;
+import { AuthGuard } from &#x27;@app/_guards&#x27;;
 
 const routes: Routes &#x3D; [
-  { path: &#x27;auth&#x27;, loadChildren: () &#x3D;&gt; &quot;import(&#x27;@app/auth/auth.module&#x27;).then(m &#x3D;&gt; m.AuthModule)&quot; },
-  { path: &#x27;&#x27;, loadChildren: () &#x3D;&gt; &quot;import(&#x27;@pages/pages.module&#x27;).then(m &#x3D;&gt; m.PagesModule)&quot;, canActivate: [AuthGuard] },
-  { path: &#x27;**&#x27;, redirectTo: &#x27;&#x27;, pathMatch: &#x27;full&#x27; }
+  { path: &#x27;auth&#x27;, loadChildren: () &#x3D;&gt; &quot;import(&#x27;@app/auth/auth.module&#x27;).then((m) &#x3D;&gt; m.AuthModule)&quot; },
+  {
+    path: &#x27;&#x27;,
+    loadChildren: () &#x3D;&gt; &quot;import(&#x27;@pages/pages.module&#x27;).then((m) &#x3D;&gt; m.PagesModule)&quot;,
+    canActivate: [AuthGuard],
+  },
+  { path: &#x27;**&#x27;, redirectTo: &#x27;&#x27;, pathMatch: &#x27;full&#x27; },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {
-    preloadingStrategy: PreloadAllModules
-  })],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes, {
+      preloadingStrategy: PreloadAllModules,
+    }),
+  ],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AuthModule.html

@@ -187,14 +187,13 @@ import { CommonModule } from '@angular/common';
 
 import { AuthRoutingModule } from '@app/auth/auth-routing.module';
 import { AuthComponent } from '@app/auth/auth.component';
-import {ReactiveFormsModule} from '@angular/forms';
-import {PasswordToggleDirective} from '@app/auth/_directives/password-toggle.directive';
-import {MatCardModule} from '@angular/material/card';
-import {MatSelectModule} from '@angular/material/select';
-import {MatInputModule} from '@angular/material/input';
-import {MatButtonModule} from '@angular/material/button';
-import {MatRippleModule} from '@angular/material/core';
-
+import { ReactiveFormsModule } from '@angular/forms';
+import { PasswordToggleDirective } from '@app/auth/_directives/password-toggle.directive';
+import { MatCardModule } from '@angular/material/card';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 
 @NgModule({
   declarations: [AuthComponent, PasswordToggleDirective],
@@ -207,9 +206,9 @@ import {MatRippleModule} from '@angular/material/core';
     MatInputModule,
     MatButtonModule,
     MatRippleModule,
-  ]
+  ],
 })
-export class AuthModule { }
+export class AuthModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/AuthRoutingModule.html

@@ -77,14 +77,14 @@ import { AuthComponent } from '@app/auth/auth.component';
 
 const routes: Routes = [
   { path: '', component: AuthComponent },
-  { path: '**', redirectTo: '', pathMatch: 'full'},
+  { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AuthRoutingModule { }
+export class AuthRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/PagesModule.html

@@ -187,30 +187,29 @@ import { CommonModule } from '@angular/common';
 
 import { PagesRoutingModule } from '@pages/pages-routing.module';
 import { PagesComponent } from '@pages/pages.component';
-import {SharedModule} from '@app/shared/shared.module';
-import {ChartsModule} from 'ng2-charts';
-import {MatButtonModule} from '@angular/material/button';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatSelectModule} from '@angular/material/select';
-import {MatInputModule} from '@angular/material/input';
-import {MatCardModule} from '@angular/material/card';
-
+import { SharedModule } from '@app/shared/shared.module';
+import { ChartsModule } from 'ng2-charts';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
   declarations: [PagesComponent],
-    imports: [
-        CommonModule,
-        PagesRoutingModule,
-        SharedModule,
-        ChartsModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatInputModule,
-        MatCardModule
-    ]
+  imports: [
+    CommonModule,
+    PagesRoutingModule,
+    SharedModule,
+    ChartsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatCardModule,
+  ],
 })
-export class PagesModule { }
+export class PagesModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/PagesRoutingModule.html

@@ -77,19 +77,35 @@ import { PagesComponent } from './pages.component';
 
 const routes: Routes = [
   { path: 'home', component: PagesComponent },
-  { path: 'tx', loadChildren: () => "import('@pages/transactions/transactions.module').then(m => m.TransactionsModule)" },
-  { path: 'settings', loadChildren: () => "import('@pages/settings/settings.module').then(m => m.SettingsModule)" },
-  { path: 'accounts', loadChildren: () => "import('@pages/accounts/accounts.module').then(m => m.AccountsModule)" },
-  { path: 'tokens', loadChildren: () => "import('@pages/tokens/tokens.module').then(m => m.TokensModule)" },
-  { path: 'admin', loadChildren: () => "import('@pages/admin/admin.module').then(m => m.AdminModule)" },
-  { path: '**', redirectTo: 'home', pathMatch: 'full'}
+  {
+    path: 'tx',
+    loadChildren: () =>
+      "import('@pages/transactions/transactions.module').then((m) => m.TransactionsModule)",
+  },
+  {
+    path: 'settings',
+    loadChildren: () => "import('@pages/settings/settings.module').then((m) => m.SettingsModule)",
+  },
+  {
+    path: 'accounts',
+    loadChildren: () => "import('@pages/accounts/accounts.module').then((m) => m.AccountsModule)",
+  },
+  {
+    path: 'tokens',
+    loadChildren: () => "import('@pages/tokens/tokens.module').then((m) => m.TokensModule)",
+  },
+  {
+    path: 'admin',
+    loadChildren: () => "import('@pages/admin/admin.module').then((m) => m.AdminModule)",
+  },
+  { path: '**', redirectTo: 'home', pathMatch: 'full' },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class PagesRoutingModule { }
+export class PagesRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/SettingsModule.html

@@ -65,67 +65,67 @@
 <title>cluster_SettingsModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-195 628,-195 628,-70 8,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_SettingsModule_imports</title>
-<polygon fill="none" stroke="black" points="338,-78 338,-130 620,-130 620,-78 338,-78"/>
-</g>
 <g id="clust2" class="cluster">
 <title>cluster_SettingsModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 330,-130 330,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="306,-78 306,-130 620,-130 620,-78 306,-78"/>
+</g>
+<g id="clust5" class="cluster">
+<title>cluster_SettingsModule_imports</title>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 298,-130 298,-78 16,-78"/>
 </g>
 <!-- OrganizationComponent -->
 <g id="node1" class="node">
 <title>OrganizationComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="322.42,-122 167.58,-122 167.58,-86 322.42,-86 322.42,-122"/>
-<text text-anchor="middle" x="245" y="-99.8" font-family="Times,serif" font-size="14.00">OrganizationComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="612.42,-122 457.58,-122 457.58,-86 612.42,-86 612.42,-122"/>
+<text text-anchor="middle" x="535" y="-99.8" font-family="Times,serif" font-size="14.00">OrganizationComponent</text>
 </g>
 <!-- SettingsModule -->
 <g id="node3" class="node">
 <title>SettingsModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="372.16,-187 369.16,-191 348.16,-191 345.16,-187 267.84,-187 267.84,-151 372.16,-151 372.16,-187"/>
-<text text-anchor="middle" x="320" y="-164.8" font-family="Times,serif" font-size="14.00">SettingsModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="348.16,-187 345.16,-191 324.16,-191 321.16,-187 243.84,-187 243.84,-151 348.16,-151 348.16,-187"/>
+<text text-anchor="middle" x="296" y="-164.8" font-family="Times,serif" font-size="14.00">SettingsModule</text>
 </g>
 <!-- OrganizationComponent&#45;&gt;SettingsModule -->
 <g id="edge1" class="edge">
 <title>OrganizationComponent&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M294.94,-122.11C294.94,-122.11 294.94,-140.99 294.94,-140.99"/>
-<polygon fill="black" stroke="black" points="291.44,-140.99 294.94,-150.99 298.44,-140.99 291.44,-140.99"/>
+<path fill="none" stroke="black" d="M535,-122.11C535,-141.34 535,-169 535,-169 535,-169 358.45,-169 358.45,-169"/>
+<polygon fill="black" stroke="black" points="358.45,-165.5 348.45,-169 358.45,-172.5 358.45,-165.5"/>
 </g>
 <!-- SettingsComponent -->
 <g id="node2" class="node">
 <title>SettingsComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="150.45,-122 23.55,-122 23.55,-86 150.45,-86 150.45,-122"/>
-<text text-anchor="middle" x="87" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="440.45,-122 313.55,-122 313.55,-86 440.45,-86 440.45,-122"/>
+<text text-anchor="middle" x="377" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsComponent</text>
 </g>
 <!-- SettingsComponent&#45;&gt;SettingsModule -->
 <g id="edge2" class="edge">
 <title>SettingsComponent&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M87,-122.11C87,-141.34 87,-169 87,-169 87,-169 257.71,-169 257.71,-169"/>
-<polygon fill="black" stroke="black" points="257.71,-172.5 267.71,-169 257.71,-165.5 257.71,-172.5"/>
+<path fill="none" stroke="black" d="M331.05,-122.11C331.05,-122.11 331.05,-140.99 331.05,-140.99"/>
+<polygon fill="black" stroke="black" points="327.55,-140.99 331.05,-150.99 334.55,-140.99 327.55,-140.99"/>
 </g>
 <!-- SettingsRoutingModule -->
 <g id="node4" class="node">
 <title>SettingsRoutingModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="611.78,-122 608.78,-126 587.78,-126 584.78,-122 462.22,-122 462.22,-86 611.78,-86 611.78,-122"/>
-<text text-anchor="middle" x="537" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsRoutingModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="289.78,-122 286.78,-126 265.78,-126 262.78,-122 140.22,-122 140.22,-86 289.78,-86 289.78,-122"/>
+<text text-anchor="middle" x="215" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsRoutingModule</text>
 </g>
 <!-- SettingsRoutingModule&#45;&gt;SettingsModule -->
 <g id="edge3" class="edge">
 <title>SettingsRoutingModule&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M537,-122.11C537,-141.34 537,-169 537,-169 537,-169 382.25,-169 382.25,-169"/>
-<polygon fill="black" stroke="black" points="382.25,-165.5 372.25,-169 382.25,-172.5 382.25,-165.5"/>
+<path fill="none" stroke="black" d="M266.78,-122.11C266.78,-122.11 266.78,-140.99 266.78,-140.99"/>
+<polygon fill="black" stroke="black" points="263.28,-140.99 266.78,-150.99 270.28,-140.99 263.28,-140.99"/>
 </g>
 <!-- SharedModule -->
 <g id="node5" class="node">
 <title>SharedModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="444.42,-122 441.42,-126 420.42,-126 417.42,-122 345.58,-122 345.58,-86 444.42,-86 444.42,-122"/>
-<text text-anchor="middle" x="395" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="122.42,-122 119.42,-126 98.42,-126 95.42,-122 23.58,-122 23.58,-86 122.42,-86 122.42,-122"/>
+<text text-anchor="middle" x="73" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
 </g>
 <!-- SharedModule&#45;&gt;SettingsModule -->
 <g id="edge4" class="edge">
 <title>SharedModule&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M359.06,-122.11C359.06,-122.11 359.06,-140.99 359.06,-140.99"/>
-<polygon fill="black" stroke="black" points="355.56,-140.99 359.06,-150.99 362.56,-140.99 355.56,-140.99"/>
+<path fill="none" stroke="black" d="M73,-122.11C73,-141.34 73,-169 73,-169 73,-169 233.72,-169 233.72,-169"/>
+<polygon fill="black" stroke="black" points="233.72,-172.5 243.72,-169 233.72,-165.5 233.72,-172.5"/>
 </g>
 </g>
 </svg>
@@ -202,22 +202,21 @@ import { CommonModule } from &#x27;@angular/common&#x27;;
 
 import { SettingsRoutingModule } from &#x27;@pages/settings/settings-routing.module&#x27;;
 import { SettingsComponent } from &#x27;@pages/settings/settings.component&#x27;;
-import {SharedModule} from &#x27;@app/shared/shared.module&#x27;;
+import { SharedModule } from &#x27;@app/shared/shared.module&#x27;;
 import { OrganizationComponent } from &#x27;@pages/settings/organization/organization.component&#x27;;
-import {MatTableModule} from &#x27;@angular/material/table&#x27;;
-import {MatSortModule} from &#x27;@angular/material/sort&#x27;;
-import {MatPaginatorModule} from &#x27;@angular/material/paginator&#x27;;
-import {MatInputModule} from &#x27;@angular/material/input&#x27;;
-import {MatFormFieldModule} from &#x27;@angular/material/form-field&#x27;;
-import {MatButtonModule} from &#x27;@angular/material/button&#x27;;
-import {MatIconModule} from &#x27;@angular/material/icon&#x27;;
-import {MatCardModule} from &#x27;@angular/material/card&#x27;;
-import {MatRadioModule} from &#x27;@angular/material/radio&#x27;;
-import {MatCheckboxModule} from &#x27;@angular/material/checkbox&#x27;;
-import {MatSelectModule} from &#x27;@angular/material/select&#x27;;
-import {MatMenuModule} from &#x27;@angular/material/menu&#x27;;
-import {ReactiveFormsModule} from &#x27;@angular/forms&#x27;;
-
+import { MatTableModule } from &#x27;@angular/material/table&#x27;;
+import { MatSortModule } from &#x27;@angular/material/sort&#x27;;
+import { MatPaginatorModule } from &#x27;@angular/material/paginator&#x27;;
+import { MatInputModule } from &#x27;@angular/material/input&#x27;;
+import { MatFormFieldModule } from &#x27;@angular/material/form-field&#x27;;
+import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
+import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
+import { MatCardModule } from &#x27;@angular/material/card&#x27;;
+import { MatRadioModule } from &#x27;@angular/material/radio&#x27;;
+import { MatCheckboxModule } from &#x27;@angular/material/checkbox&#x27;;
+import { MatSelectModule } from &#x27;@angular/material/select&#x27;;
+import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
+import { ReactiveFormsModule } from &#x27;@angular/forms&#x27;;
 
 @NgModule({
   declarations: [SettingsComponent, OrganizationComponent],
@@ -237,10 +236,10 @@ import {ReactiveFormsModule} from &#x27;@angular/forms&#x27;;
     MatCheckboxModule,
     MatSelectModule,
     MatMenuModule,
-    ReactiveFormsModule
-  ]
+    ReactiveFormsModule,
+  ],
 })
-export class SettingsModule { }
+export class SettingsModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/SettingsModule/dependencies.svg

@@ -24,67 +24,67 @@
 <title>cluster_SettingsModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-195 628,-195 628,-70 8,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_SettingsModule_imports</title>
-<polygon fill="none" stroke="black" points="338,-78 338,-130 620,-130 620,-78 338,-78"/>
-</g>
 <g id="clust2" class="cluster">
 <title>cluster_SettingsModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 330,-130 330,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="306,-78 306,-130 620,-130 620,-78 306,-78"/>
+</g>
+<g id="clust5" class="cluster">
+<title>cluster_SettingsModule_imports</title>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 298,-130 298,-78 16,-78"/>
 </g>
 <!-- OrganizationComponent -->
 <g id="node1" class="node">
 <title>OrganizationComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="322.42,-122 167.58,-122 167.58,-86 322.42,-86 322.42,-122"/>
-<text text-anchor="middle" x="245" y="-99.8" font-family="Times,serif" font-size="14.00">OrganizationComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="612.42,-122 457.58,-122 457.58,-86 612.42,-86 612.42,-122"/>
+<text text-anchor="middle" x="535" y="-99.8" font-family="Times,serif" font-size="14.00">OrganizationComponent</text>
 </g>
 <!-- SettingsModule -->
 <g id="node3" class="node">
 <title>SettingsModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="372.16,-187 369.16,-191 348.16,-191 345.16,-187 267.84,-187 267.84,-151 372.16,-151 372.16,-187"/>
-<text text-anchor="middle" x="320" y="-164.8" font-family="Times,serif" font-size="14.00">SettingsModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="348.16,-187 345.16,-191 324.16,-191 321.16,-187 243.84,-187 243.84,-151 348.16,-151 348.16,-187"/>
+<text text-anchor="middle" x="296" y="-164.8" font-family="Times,serif" font-size="14.00">SettingsModule</text>
 </g>
 <!-- OrganizationComponent&#45;&gt;SettingsModule -->
 <g id="edge1" class="edge">
 <title>OrganizationComponent&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M294.94,-122.11C294.94,-122.11 294.94,-140.99 294.94,-140.99"/>
-<polygon fill="black" stroke="black" points="291.44,-140.99 294.94,-150.99 298.44,-140.99 291.44,-140.99"/>
+<path fill="none" stroke="black" d="M535,-122.11C535,-141.34 535,-169 535,-169 535,-169 358.45,-169 358.45,-169"/>
+<polygon fill="black" stroke="black" points="358.45,-165.5 348.45,-169 358.45,-172.5 358.45,-165.5"/>
 </g>
 <!-- SettingsComponent -->
 <g id="node2" class="node">
 <title>SettingsComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="150.45,-122 23.55,-122 23.55,-86 150.45,-86 150.45,-122"/>
-<text text-anchor="middle" x="87" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="440.45,-122 313.55,-122 313.55,-86 440.45,-86 440.45,-122"/>
+<text text-anchor="middle" x="377" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsComponent</text>
 </g>
 <!-- SettingsComponent&#45;&gt;SettingsModule -->
 <g id="edge2" class="edge">
 <title>SettingsComponent&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M87,-122.11C87,-141.34 87,-169 87,-169 87,-169 257.71,-169 257.71,-169"/>
-<polygon fill="black" stroke="black" points="257.71,-172.5 267.71,-169 257.71,-165.5 257.71,-172.5"/>
+<path fill="none" stroke="black" d="M331.05,-122.11C331.05,-122.11 331.05,-140.99 331.05,-140.99"/>
+<polygon fill="black" stroke="black" points="327.55,-140.99 331.05,-150.99 334.55,-140.99 327.55,-140.99"/>
 </g>
 <!-- SettingsRoutingModule -->
 <g id="node4" class="node">
 <title>SettingsRoutingModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="611.78,-122 608.78,-126 587.78,-126 584.78,-122 462.22,-122 462.22,-86 611.78,-86 611.78,-122"/>
-<text text-anchor="middle" x="537" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsRoutingModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="289.78,-122 286.78,-126 265.78,-126 262.78,-122 140.22,-122 140.22,-86 289.78,-86 289.78,-122"/>
+<text text-anchor="middle" x="215" y="-99.8" font-family="Times,serif" font-size="14.00">SettingsRoutingModule</text>
 </g>
 <!-- SettingsRoutingModule&#45;&gt;SettingsModule -->
 <g id="edge3" class="edge">
 <title>SettingsRoutingModule&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M537,-122.11C537,-141.34 537,-169 537,-169 537,-169 382.25,-169 382.25,-169"/>
-<polygon fill="black" stroke="black" points="382.25,-165.5 372.25,-169 382.25,-172.5 382.25,-165.5"/>
+<path fill="none" stroke="black" d="M266.78,-122.11C266.78,-122.11 266.78,-140.99 266.78,-140.99"/>
+<polygon fill="black" stroke="black" points="263.28,-140.99 266.78,-150.99 270.28,-140.99 263.28,-140.99"/>
 </g>
 <!-- SharedModule -->
 <g id="node5" class="node">
 <title>SharedModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="444.42,-122 441.42,-126 420.42,-126 417.42,-122 345.58,-122 345.58,-86 444.42,-86 444.42,-122"/>
-<text text-anchor="middle" x="395" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="122.42,-122 119.42,-126 98.42,-126 95.42,-122 23.58,-122 23.58,-86 122.42,-86 122.42,-122"/>
+<text text-anchor="middle" x="73" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
 </g>
 <!-- SharedModule&#45;&gt;SettingsModule -->
 <g id="edge4" class="edge">
 <title>SharedModule&#45;&gt;SettingsModule</title>
-<path fill="none" stroke="black" d="M359.06,-122.11C359.06,-122.11 359.06,-140.99 359.06,-140.99"/>
-<polygon fill="black" stroke="black" points="355.56,-140.99 359.06,-150.99 362.56,-140.99 355.56,-140.99"/>
+<path fill="none" stroke="black" d="M73,-122.11C73,-141.34 73,-169 73,-169 73,-169 233.72,-169 233.72,-169"/>
+<polygon fill="black" stroke="black" points="233.72,-172.5 243.72,-169 233.72,-165.5 233.72,-172.5"/>
 </g>
 </g>
 </svg>

docs/compodoc/modules/SettingsRoutingModule.html

@@ -74,19 +74,19 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { SettingsComponent } from '@pages/settings/settings.component';
-import {OrganizationComponent} from '@pages/settings/organization/organization.component';
+import { OrganizationComponent } from '@pages/settings/organization/organization.component';
 
 const routes: Routes = [
   { path: '', component: SettingsComponent },
   { path: 'organization', component: OrganizationComponent },
-  { path: '**', redirectTo: '', pathMatch: 'full' }
+  { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class SettingsRoutingModule { }
+export class SettingsRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/SharedModule.html

@@ -45,207 +45,231 @@
 <!-- Generated by graphviz version 2.47.0 (20210316.0004)
  -->
 <!-- Title: dependencies Pages: 1 -->
-<svg width="1160pt" height="284pt"
- viewBox="0.00 0.00 1160.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="1342pt" height="284pt"
+ viewBox="0.00 0.00 1342.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
 <title>dependencies</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1156,-280 1156,4 -4,4"/>
-<text text-anchor="start" x="555.01" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00">Legend</text>
-<polygon fill="#ffffb3" stroke="transparent" points="342,-10 342,-30 362,-30 362,-10 342,-10"/>
-<text text-anchor="start" x="365.63" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Declarations</text>
-<polygon fill="#8dd3c7" stroke="transparent" points="455,-10 455,-30 475,-30 475,-10 455,-10"/>
-<text text-anchor="start" x="478.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Module</text>
-<polygon fill="#80b1d3" stroke="transparent" points="541,-10 541,-30 561,-30 561,-10 541,-10"/>
-<text text-anchor="start" x="564.78" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Bootstrap</text>
-<polygon fill="#fdb462" stroke="transparent" points="638,-10 638,-30 658,-30 658,-10 638,-10"/>
-<text text-anchor="start" x="661.67" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Providers</text>
-<polygon fill="#fb8072" stroke="transparent" points="734,-10 734,-30 754,-30 754,-10 734,-10"/>
-<text text-anchor="start" x="757.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Exports</text>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1338,-280 1338,4 -4,4"/>
+<text text-anchor="start" x="646.01" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00">Legend</text>
+<polygon fill="#ffffb3" stroke="transparent" points="433,-10 433,-30 453,-30 453,-10 433,-10"/>
+<text text-anchor="start" x="456.63" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Declarations</text>
+<polygon fill="#8dd3c7" stroke="transparent" points="546,-10 546,-30 566,-30 566,-10 546,-10"/>
+<text text-anchor="start" x="569.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Module</text>
+<polygon fill="#80b1d3" stroke="transparent" points="632,-10 632,-30 652,-30 652,-10 632,-10"/>
+<text text-anchor="start" x="655.78" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Bootstrap</text>
+<polygon fill="#fdb462" stroke="transparent" points="729,-10 729,-30 749,-30 749,-10 729,-10"/>
+<text text-anchor="start" x="752.67" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Providers</text>
+<polygon fill="#fb8072" stroke="transparent" points="825,-10 825,-30 845,-30 845,-10 825,-10"/>
+<text text-anchor="start" x="848.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Exports</text>
 <g id="clust1" class="cluster">
 <title>cluster_SharedModule</title>
-<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1144,-268 1144,-70 8,-70"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1326,-268 1326,-70 8,-70"/>
 </g>
-<g id="clust12" class="cluster">
+<g id="clust13" class="cluster">
 <title>cluster_SharedModule_exports</title>
-<polygon fill="none" stroke="black" points="122,-208 122,-260 939,-260 939,-208 122,-208"/>
+<polygon fill="none" stroke="black" points="137,-208 137,-260 1140,-260 1140,-208 137,-208"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_SharedModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 1136,-130 1136,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 1318,-130 1318,-78 16,-78"/>
 </g>
 <!-- ErrorDialogComponent -->
 <g id="node1" class="node">
 <title>ErrorDialogComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="1128.47,-122 979.53,-122 979.53,-86 1128.47,-86 1128.47,-122"/>
-<text text-anchor="middle" x="1054" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorDialogComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="1310.47,-122 1161.53,-122 1161.53,-86 1310.47,-86 1310.47,-122"/>
+<text text-anchor="middle" x="1236" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorDialogComponent</text>
 </g>
 <!-- SharedModule -->
-<g id="node9" class="node">
+<g id="node10" class="node">
 <title>SharedModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="573.42,-187 570.42,-191 549.42,-191 546.42,-187 474.58,-187 474.58,-151 573.42,-151 573.42,-187"/>
-<text text-anchor="middle" x="524" y="-164.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="646.42,-187 643.42,-191 622.42,-191 619.42,-187 547.58,-187 547.58,-151 646.42,-151 646.42,-187"/>
+<text text-anchor="middle" x="597" y="-164.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
 </g>
 <!-- ErrorDialogComponent&#45;&gt;SharedModule -->
 <g id="edge1" class="edge">
 <title>ErrorDialogComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M1054,-122.11C1054,-141.34 1054,-169 1054,-169 1054,-169 583.39,-169 583.39,-169"/>
-<polygon fill="black" stroke="black" points="583.39,-165.5 573.39,-169 583.39,-172.5 583.39,-165.5"/>
+<path fill="none" stroke="black" d="M1236,-122.22C1236,-142.37 1236,-172 1236,-172 1236,-172 656.34,-172 656.34,-172"/>
+<polygon fill="black" stroke="black" points="656.34,-168.5 646.34,-172 656.34,-175.5 656.34,-168.5"/>
 </g>
 <!-- FooterComponent -->
 <g id="node2" class="node">
 <title>FooterComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="961.88,-122 844.12,-122 844.12,-86 961.88,-86 961.88,-122"/>
-<text text-anchor="middle" x="903" y="-99.8" font-family="Times,serif" font-size="14.00">FooterComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="1143.88,-122 1026.12,-122 1026.12,-86 1143.88,-86 1143.88,-122"/>
+<text text-anchor="middle" x="1085" y="-99.8" font-family="Times,serif" font-size="14.00">FooterComponent</text>
 </g>
 <!-- FooterComponent&#45;&gt;SharedModule -->
 <g id="edge2" class="edge">
 <title>FooterComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M887.38,-122.02C887.38,-139.37 887.38,-163 887.38,-163 887.38,-163 583.38,-163 583.38,-163"/>
-<polygon fill="black" stroke="black" points="583.38,-159.5 573.38,-163 583.38,-166.5 583.38,-159.5"/>
+<path fill="none" stroke="black" d="M1078.88,-122.22C1078.88,-140.83 1078.88,-167 1078.88,-167 1078.88,-167 656.3,-167 656.3,-167"/>
+<polygon fill="black" stroke="black" points="656.3,-163.5 646.3,-167 656.3,-170.5 656.3,-163.5"/>
 </g>
 <!-- MenuSelectionDirective -->
 <g id="node3" class="node">
 <title>MenuSelectionDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="826.34,-122 673.66,-122 673.66,-86 826.34,-86 826.34,-122"/>
-<text text-anchor="middle" x="750" y="-99.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="1008.34,-122 855.66,-122 855.66,-86 1008.34,-86 1008.34,-122"/>
+<text text-anchor="middle" x="932" y="-99.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective</text>
 </g>
 <!-- MenuSelectionDirective&#45;&gt;SharedModule -->
 <g id="edge3" class="edge">
 <title>MenuSelectionDirective&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M732.38,-122.24C732.38,-137.57 732.38,-157 732.38,-157 732.38,-157 583.38,-157 583.38,-157"/>
-<polygon fill="black" stroke="black" points="583.38,-153.5 573.38,-157 583.38,-160.5 583.38,-153.5"/>
+<path fill="none" stroke="black" d="M923.88,-122.03C923.88,-139.06 923.88,-162 923.88,-162 923.88,-162 656.29,-162 656.29,-162"/>
+<polygon fill="black" stroke="black" points="656.29,-158.5 646.29,-162 656.29,-165.5 656.29,-158.5"/>
 </g>
 <!-- MenuToggleDirective -->
 <g id="node4" class="node">
 <title>MenuToggleDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="655.4,-122 514.6,-122 514.6,-86 655.4,-86 655.4,-122"/>
-<text text-anchor="middle" x="585" y="-99.8" font-family="Times,serif" font-size="14.00">MenuToggleDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="837.4,-122 696.6,-122 696.6,-86 837.4,-86 837.4,-122"/>
+<text text-anchor="middle" x="767" y="-99.8" font-family="Times,serif" font-size="14.00">MenuToggleDirective</text>
 </g>
 <!-- MenuToggleDirective&#45;&gt;SharedModule -->
 <g id="edge4" class="edge">
 <title>MenuToggleDirective&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M544.01,-122.11C544.01,-122.11 544.01,-140.99 544.01,-140.99"/>
-<polygon fill="black" stroke="black" points="540.51,-140.99 544.01,-150.99 547.51,-140.99 540.51,-140.99"/>
+<path fill="none" stroke="black" d="M757.41,-122.24C757.41,-137.57 757.41,-157 757.41,-157 757.41,-157 656.44,-157 656.44,-157"/>
+<polygon fill="black" stroke="black" points="656.44,-153.5 646.44,-157 656.44,-160.5 656.44,-153.5"/>
+</g>
+<!-- NetworkStatusComponent -->
+<g id="node5" class="node">
+<title>NetworkStatusComponent</title>
+<polygon fill="#ffffb3" stroke="black" points="679.04,-122 514.96,-122 514.96,-86 679.04,-86 679.04,-122"/>
+<text text-anchor="middle" x="597" y="-99.8" font-family="Times,serif" font-size="14.00">NetworkStatusComponent</text>
+</g>
+<!-- NetworkStatusComponent&#45;&gt;SharedModule -->
+<g id="edge5" class="edge">
+<title>NetworkStatusComponent&#45;&gt;SharedModule</title>
+<path fill="none" stroke="black" d="M597,-122.11C597,-122.11 597,-140.99 597,-140.99"/>
+<polygon fill="black" stroke="black" points="593.5,-140.99 597,-150.99 600.5,-140.99 593.5,-140.99"/>
 </g>
 <!-- SafePipe -->
-<g id="node5" class="node">
+<g id="node6" class="node">
 <title>SafePipe</title>
 <polygon fill="#ffffb3" stroke="black" points="496.76,-122 431.24,-122 431.24,-86 496.76,-86 496.76,-122"/>
 <text text-anchor="middle" x="464" y="-99.8" font-family="Times,serif" font-size="14.00">SafePipe</text>
 </g>
 <!-- SafePipe&#45;&gt;SharedModule -->
-<g id="edge5" class="edge">
+<g id="edge6" class="edge">
 <title>SafePipe&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M485.83,-122.11C485.83,-122.11 485.83,-140.99 485.83,-140.99"/>
-<polygon fill="black" stroke="black" points="482.33,-140.99 485.83,-150.99 489.33,-140.99 482.33,-140.99"/>
+<path fill="none" stroke="black" d="M464,-122.24C464,-137.57 464,-157 464,-157 464,-157 537.48,-157 537.48,-157"/>
+<polygon fill="black" stroke="black" points="537.48,-160.5 547.48,-157 537.48,-153.5 537.48,-160.5"/>
 </g>
 <!-- SidebarComponent -->
-<g id="node6" class="node">
+<g id="node7" class="node">
 <title>SidebarComponent</title>
 <polygon fill="#ffffb3" stroke="black" points="413.1,-122 288.9,-122 288.9,-86 413.1,-86 413.1,-122"/>
 <text text-anchor="middle" x="351" y="-99.8" font-family="Times,serif" font-size="14.00">SidebarComponent</text>
 </g>
 <!-- SidebarComponent&#45;&gt;SharedModule -->
-<g id="edge6" class="edge">
+<g id="edge7" class="edge">
 <title>SidebarComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M407.62,-122.24C407.62,-137.57 407.62,-157 407.62,-157 407.62,-157 464.65,-157 464.65,-157"/>
-<polygon fill="black" stroke="black" points="464.65,-160.5 474.65,-157 464.65,-153.5 464.65,-160.5"/>
+<path fill="none" stroke="black" d="M406.15,-122.03C406.15,-139.06 406.15,-162 406.15,-162 406.15,-162 537.35,-162 537.35,-162"/>
+<polygon fill="black" stroke="black" points="537.35,-165.5 547.35,-162 537.35,-158.5 537.35,-165.5"/>
 </g>
 <!-- TokenRatioPipe -->
-<g id="node7" class="node">
+<g id="node8" class="node">
 <title>TokenRatioPipe</title>
 <polygon fill="#ffffb3" stroke="black" points="270.49,-122 163.51,-122 163.51,-86 270.49,-86 270.49,-122"/>
 <text text-anchor="middle" x="217" y="-99.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe</text>
 </g>
 <!-- TokenRatioPipe&#45;&gt;SharedModule -->
-<g id="edge7" class="edge">
+<g id="edge8" class="edge">
 <title>TokenRatioPipe&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M263.06,-122.02C263.06,-139.37 263.06,-163 263.06,-163 263.06,-163 464.61,-163 464.61,-163"/>
-<polygon fill="black" stroke="black" points="464.61,-166.5 474.61,-163 464.61,-159.5 464.61,-166.5"/>
+<path fill="none" stroke="black" d="M234.83,-122.22C234.83,-140.83 234.83,-167 234.83,-167 234.83,-167 537.78,-167 537.78,-167"/>
+<polygon fill="black" stroke="black" points="537.78,-170.5 547.78,-167 537.78,-163.5 537.78,-170.5"/>
 </g>
 <!-- TopbarComponent -->
-<g id="node8" class="node">
+<g id="node9" class="node">
 <title>TopbarComponent</title>
 <polygon fill="#ffffb3" stroke="black" points="145.76,-122 24.24,-122 24.24,-86 145.76,-86 145.76,-122"/>
 <text text-anchor="middle" x="85" y="-99.8" font-family="Times,serif" font-size="14.00">TopbarComponent</text>
 </g>
 <!-- TopbarComponent&#45;&gt;SharedModule -->
-<g id="edge8" class="edge">
+<g id="edge9" class="edge">
 <title>TopbarComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M138.12,-122.11C138.12,-141.34 138.12,-169 138.12,-169 138.12,-169 464.74,-169 464.74,-169"/>
-<polygon fill="black" stroke="black" points="464.74,-172.5 474.74,-169 464.74,-165.5 464.74,-172.5"/>
+<path fill="none" stroke="black" d="M84.74,-122.22C84.74,-142.37 84.74,-172 84.74,-172 84.74,-172 537.42,-172 537.42,-172"/>
+<polygon fill="black" stroke="black" points="537.42,-175.5 547.42,-172 537.42,-168.5 537.42,-175.5"/>
 </g>
 <!-- FooterComponent  -->
-<g id="node10" class="node">
+<g id="node11" class="node">
 <title>FooterComponent </title>
-<polygon fill="#fb8072" stroke="black" points="930.88,-252 809.12,-252 809.12,-216 930.88,-216 930.88,-252"/>
-<text text-anchor="middle" x="870" y="-229.8" font-family="Times,serif" font-size="14.00">FooterComponent </text>
+<polygon fill="#fb8072" stroke="black" points="1131.88,-252 1010.12,-252 1010.12,-216 1131.88,-216 1131.88,-252"/>
+<text text-anchor="middle" x="1071" y="-229.8" font-family="Times,serif" font-size="14.00">FooterComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;FooterComponent  -->
-<g id="edge9" class="edge">
+<g id="edge10" class="edge">
 <title>SharedModule&#45;&gt;FooterComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M573.52,-175C657.27,-175 817.86,-175 817.86,-175 817.86,-175 817.86,-205.98 817.86,-205.98"/>
-<polygon fill="black" stroke="black" points="814.36,-205.98 817.86,-215.98 821.36,-205.98 814.36,-205.98"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M646.55,-177C757.89,-177 1018.18,-177 1018.18,-177 1018.18,-177 1018.18,-205.96 1018.18,-205.96"/>
+<polygon fill="black" stroke="black" points="1014.68,-205.96 1018.18,-215.96 1021.68,-205.96 1014.68,-205.96"/>
 </g>
 <!-- MenuSelectionDirective  -->
-<g id="node11" class="node">
+<g id="node12" class="node">
 <title>MenuSelectionDirective </title>
-<polygon fill="#fb8072" stroke="black" points="791.34,-252 634.66,-252 634.66,-216 791.34,-216 791.34,-252"/>
-<text text-anchor="middle" x="713" y="-229.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective </text>
+<polygon fill="#fb8072" stroke="black" points="992.34,-252 835.66,-252 835.66,-216 992.34,-216 992.34,-252"/>
+<text text-anchor="middle" x="914" y="-229.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective </text>
 </g>
 <!-- SharedModule&#45;&gt;MenuSelectionDirective  -->
-<g id="edge10" class="edge">
+<g id="edge11" class="edge">
 <title>SharedModule&#45;&gt;MenuSelectionDirective </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M573.22,-181C606.73,-181 645.01,-181 645.01,-181 645.01,-181 645.01,-205.76 645.01,-205.76"/>
-<polygon fill="black" stroke="black" points="641.51,-205.76 645.01,-215.76 648.51,-205.76 641.51,-205.76"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M646.27,-182C718.95,-182 846.39,-182 846.39,-182 846.39,-182 846.39,-205.81 846.39,-205.81"/>
+<polygon fill="black" stroke="black" points="842.89,-205.81 846.39,-215.81 849.89,-205.81 842.89,-205.81"/>
+</g>
+<!-- NetworkStatusComponent  -->
+<g id="node13" class="node">
+<title>NetworkStatusComponent </title>
+<polygon fill="#fb8072" stroke="black" points="818.03,-252 649.97,-252 649.97,-216 818.03,-216 818.03,-252"/>
+<text text-anchor="middle" x="734" y="-229.8" font-family="Times,serif" font-size="14.00">NetworkStatusComponent </text>
+</g>
+<!-- SharedModule&#45;&gt;NetworkStatusComponent  -->
+<g id="edge12" class="edge">
+<title>SharedModule&#45;&gt;NetworkStatusComponent </title>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M638.92,-187.11C638.92,-206.34 638.92,-234 638.92,-234 638.92,-234 640.01,-234 640.01,-234"/>
+<polygon fill="black" stroke="black" points="639.83,-237.5 649.83,-234 639.83,-230.5 639.83,-237.5"/>
 </g>
 <!-- SafePipe  -->
-<g id="node12" class="node">
+<g id="node14" class="node">
 <title>SafePipe </title>
-<polygon fill="#fb8072" stroke="black" points="616.76,-252 547.24,-252 547.24,-216 616.76,-216 616.76,-252"/>
-<text text-anchor="middle" x="582" y="-229.8" font-family="Times,serif" font-size="14.00">SafePipe </text>
+<polygon fill="#fb8072" stroke="black" points="631.76,-252 562.24,-252 562.24,-216 631.76,-216 631.76,-252"/>
+<text text-anchor="middle" x="597" y="-229.8" font-family="Times,serif" font-size="14.00">SafePipe </text>
 </g>
 <!-- SharedModule&#45;&gt;SafePipe  -->
-<g id="edge11" class="edge">
+<g id="edge13" class="edge">
 <title>SharedModule&#45;&gt;SafePipe </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M560.29,-187.11C560.29,-187.11 560.29,-205.99 560.29,-205.99"/>
-<polygon fill="black" stroke="black" points="556.79,-205.99 560.29,-215.99 563.79,-205.99 556.79,-205.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M597,-187.11C597,-187.11 597,-205.99 597,-205.99"/>
+<polygon fill="black" stroke="black" points="593.5,-205.99 597,-215.99 600.5,-205.99 593.5,-205.99"/>
 </g>
 <!-- SidebarComponent  -->
-<g id="node13" class="node">
+<g id="node15" class="node">
 <title>SidebarComponent </title>
-<polygon fill="#fb8072" stroke="black" points="529.6,-252 402.4,-252 402.4,-216 529.6,-216 529.6,-252"/>
-<text text-anchor="middle" x="466" y="-229.8" font-family="Times,serif" font-size="14.00">SidebarComponent </text>
+<polygon fill="#fb8072" stroke="black" points="544.6,-252 417.4,-252 417.4,-216 544.6,-216 544.6,-252"/>
+<text text-anchor="middle" x="481" y="-229.8" font-family="Times,serif" font-size="14.00">SidebarComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;SidebarComponent  -->
-<g id="edge12" class="edge">
+<g id="edge14" class="edge">
 <title>SharedModule&#45;&gt;SidebarComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M502.29,-187.11C502.29,-187.11 502.29,-205.99 502.29,-205.99"/>
-<polygon fill="black" stroke="black" points="498.79,-205.99 502.29,-215.99 505.79,-205.99 498.79,-205.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M555.08,-187.11C555.08,-206.34 555.08,-234 555.08,-234 555.08,-234 554.05,-234 554.05,-234"/>
+<polygon fill="black" stroke="black" points="554.78,-230.5 544.78,-234 554.78,-237.5 554.78,-230.5"/>
 </g>
 <!-- TokenRatioPipe  -->
-<g id="node14" class="node">
+<g id="node16" class="node">
 <title>TokenRatioPipe </title>
-<polygon fill="#fb8072" stroke="black" points="384.49,-252 273.51,-252 273.51,-216 384.49,-216 384.49,-252"/>
-<text text-anchor="middle" x="329" y="-229.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe </text>
+<polygon fill="#fb8072" stroke="black" points="399.49,-252 288.51,-252 288.51,-216 399.49,-216 399.49,-252"/>
+<text text-anchor="middle" x="344" y="-229.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe </text>
 </g>
 <!-- SharedModule&#45;&gt;TokenRatioPipe  -->
-<g id="edge13" class="edge">
+<g id="edge15" class="edge">
 <title>SharedModule&#45;&gt;TokenRatioPipe </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M474.76,-181C419.24,-181 336.6,-181 336.6,-181 336.6,-181 336.6,-205.76 336.6,-205.76"/>
-<polygon fill="black" stroke="black" points="333.1,-205.76 336.6,-215.76 340.1,-205.76 333.1,-205.76"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.64,-182C474.04,-182 344.1,-182 344.1,-182 344.1,-182 344.1,-205.81 344.1,-205.81"/>
+<polygon fill="black" stroke="black" points="340.6,-205.81 344.1,-215.81 347.6,-205.81 340.6,-205.81"/>
 </g>
 <!-- TopbarComponent  -->
-<g id="node15" class="node">
+<g id="node17" class="node">
 <title>TopbarComponent </title>
-<polygon fill="#fb8072" stroke="black" points="255.76,-252 130.24,-252 130.24,-216 255.76,-216 255.76,-252"/>
-<text text-anchor="middle" x="193" y="-229.8" font-family="Times,serif" font-size="14.00">TopbarComponent </text>
+<polygon fill="#fb8072" stroke="black" points="270.76,-252 145.24,-252 145.24,-216 270.76,-216 270.76,-252"/>
+<text text-anchor="middle" x="208" y="-229.8" font-family="Times,serif" font-size="14.00">TopbarComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;TopbarComponent  -->
-<g id="edge14" class="edge">
+<g id="edge16" class="edge">
 <title>SharedModule&#45;&gt;TopbarComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M474.52,-175C385.98,-175 209.57,-175 209.57,-175 209.57,-175 209.57,-205.98 209.57,-205.98"/>
-<polygon fill="black" stroke="black" points="206.07,-205.98 209.57,-215.98 213.07,-205.98 206.07,-205.98"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.42,-177C440.77,-177 199.17,-177 199.17,-177 199.17,-177 199.17,-205.96 199.17,-205.96"/>
+<polygon fill="black" stroke="black" points="195.67,-205.96 199.17,-215.96 202.67,-205.96 195.67,-205.96"/>
 </g>
 </g>
 </svg>
@@ -301,6 +325,9 @@
                         <li class="list-group-item">
                             <a href="../directives/MenuToggleDirective.html">MenuToggleDirective</a>
                         </li>
+                        <li class="list-group-item">
+                            <a href="../components/NetworkStatusComponent.html">NetworkStatusComponent</a>
+                        </li>
                         <li class="list-group-item">
                             <a href="../pipes/SafePipe.html">SafePipe</a>
                         </li>
@@ -325,6 +352,9 @@
                         <li class="list-group-item">
                             <a href="../directives/MenuSelectionDirective.html">MenuSelectionDirective</a>
                         </li>
+                        <li class="list-group-item">
+                            <a href="../components/NetworkStatusComponent.html">NetworkStatusComponent</a>
+                        </li>
                         <li class="list-group-item">
                             <a href="../pipes/SafePipe.html">SafePipe</a>
                         </li>
@@ -354,14 +384,13 @@ import { FooterComponent } from &#x27;@app/shared/footer/footer.component&#x27;;
 import { SidebarComponent } from &#x27;@app/shared/sidebar/sidebar.component&#x27;;
 import { MenuSelectionDirective } from &#x27;@app/shared/_directives/menu-selection.directive&#x27;;
 import { MenuToggleDirective } from &#x27;@app/shared/_directives/menu-toggle.directive&#x27;;
-import {RouterModule} from &#x27;@angular/router&#x27;;
-import {MatIconModule} from &#x27;@angular/material/icon&#x27;;
-import {TokenRatioPipe} from &#x27;@app/shared/_pipes/token-ratio.pipe&#x27;;
+import { RouterModule } from &#x27;@angular/router&#x27;;
+import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
+import { TokenRatioPipe } from &#x27;@app/shared/_pipes/token-ratio.pipe&#x27;;
 import { ErrorDialogComponent } from &#x27;@app/shared/error-dialog/error-dialog.component&#x27;;
-import {MatDialogModule} from &#x27;@angular/material/dialog&#x27;;
+import { MatDialogModule } from &#x27;@angular/material/dialog&#x27;;
 import { SafePipe } from &#x27;@app/shared/_pipes/safe.pipe&#x27;;
-
-
+import { NetworkStatusComponent } from &#x27;./network-status/network-status.component&#x27;;
 
 @NgModule({
   declarations: [
@@ -372,7 +401,8 @@ import { SafePipe } from &#x27;@app/shared/_pipes/safe.pipe&#x27;;
     MenuToggleDirective,
     TokenRatioPipe,
     ErrorDialogComponent,
-    SafePipe
+    SafePipe,
+    NetworkStatusComponent,
   ],
   exports: [
     TopbarComponent,
@@ -380,16 +410,12 @@ import { SafePipe } from &#x27;@app/shared/_pipes/safe.pipe&#x27;;
     SidebarComponent,
     MenuSelectionDirective,
     TokenRatioPipe,
-    SafePipe
+    SafePipe,
+    NetworkStatusComponent,
   ],
-  imports: [
-    CommonModule,
-    RouterModule,
-    MatIconModule,
-    MatDialogModule,
-  ]
+  imports: [CommonModule, RouterModule, MatIconModule, MatDialogModule],
 })
-export class SharedModule { }
+export class SharedModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/SharedModule/dependencies.svg

@@ -4,207 +4,231 @@
 <!-- Generated by graphviz version 2.47.0 (20210316.0004)
  -->
 <!-- Title: dependencies Pages: 1 -->
-<svg width="1160pt" height="284pt"
- viewBox="0.00 0.00 1160.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="1342pt" height="284pt"
+ viewBox="0.00 0.00 1342.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
 <title>dependencies</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1156,-280 1156,4 -4,4"/>
-<text text-anchor="start" x="555.01" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00">Legend</text>
-<polygon fill="#ffffb3" stroke="transparent" points="342,-10 342,-30 362,-30 362,-10 342,-10"/>
-<text text-anchor="start" x="365.63" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Declarations</text>
-<polygon fill="#8dd3c7" stroke="transparent" points="455,-10 455,-30 475,-30 475,-10 455,-10"/>
-<text text-anchor="start" x="478.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Module</text>
-<polygon fill="#80b1d3" stroke="transparent" points="541,-10 541,-30 561,-30 561,-10 541,-10"/>
-<text text-anchor="start" x="564.78" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Bootstrap</text>
-<polygon fill="#fdb462" stroke="transparent" points="638,-10 638,-30 658,-30 658,-10 638,-10"/>
-<text text-anchor="start" x="661.67" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Providers</text>
-<polygon fill="#fb8072" stroke="transparent" points="734,-10 734,-30 754,-30 754,-10 734,-10"/>
-<text text-anchor="start" x="757.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Exports</text>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1338,-280 1338,4 -4,4"/>
+<text text-anchor="start" x="646.01" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00">Legend</text>
+<polygon fill="#ffffb3" stroke="transparent" points="433,-10 433,-30 453,-30 453,-10 433,-10"/>
+<text text-anchor="start" x="456.63" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Declarations</text>
+<polygon fill="#8dd3c7" stroke="transparent" points="546,-10 546,-30 566,-30 566,-10 546,-10"/>
+<text text-anchor="start" x="569.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Module</text>
+<polygon fill="#80b1d3" stroke="transparent" points="632,-10 632,-30 652,-30 652,-10 632,-10"/>
+<text text-anchor="start" x="655.78" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Bootstrap</text>
+<polygon fill="#fdb462" stroke="transparent" points="729,-10 729,-30 749,-30 749,-10 729,-10"/>
+<text text-anchor="start" x="752.67" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Providers</text>
+<polygon fill="#fb8072" stroke="transparent" points="825,-10 825,-30 845,-30 845,-10 825,-10"/>
+<text text-anchor="start" x="848.73" y="-15.4" font-family="sans-serif" font-size="14.00"> &#160;Exports</text>
 <g id="clust1" class="cluster">
 <title>cluster_SharedModule</title>
-<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1144,-268 1144,-70 8,-70"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1326,-268 1326,-70 8,-70"/>
 </g>
-<g id="clust12" class="cluster">
+<g id="clust13" class="cluster">
 <title>cluster_SharedModule_exports</title>
-<polygon fill="none" stroke="black" points="122,-208 122,-260 939,-260 939,-208 122,-208"/>
+<polygon fill="none" stroke="black" points="137,-208 137,-260 1140,-260 1140,-208 137,-208"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_SharedModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 1136,-130 1136,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 1318,-130 1318,-78 16,-78"/>
 </g>
 <!-- ErrorDialogComponent -->
 <g id="node1" class="node">
 <title>ErrorDialogComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="1128.47,-122 979.53,-122 979.53,-86 1128.47,-86 1128.47,-122"/>
-<text text-anchor="middle" x="1054" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorDialogComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="1310.47,-122 1161.53,-122 1161.53,-86 1310.47,-86 1310.47,-122"/>
+<text text-anchor="middle" x="1236" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorDialogComponent</text>
 </g>
 <!-- SharedModule -->
-<g id="node9" class="node">
+<g id="node10" class="node">
 <title>SharedModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="573.42,-187 570.42,-191 549.42,-191 546.42,-187 474.58,-187 474.58,-151 573.42,-151 573.42,-187"/>
-<text text-anchor="middle" x="524" y="-164.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="646.42,-187 643.42,-191 622.42,-191 619.42,-187 547.58,-187 547.58,-151 646.42,-151 646.42,-187"/>
+<text text-anchor="middle" x="597" y="-164.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
 </g>
 <!-- ErrorDialogComponent&#45;&gt;SharedModule -->
 <g id="edge1" class="edge">
 <title>ErrorDialogComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M1054,-122.11C1054,-141.34 1054,-169 1054,-169 1054,-169 583.39,-169 583.39,-169"/>
-<polygon fill="black" stroke="black" points="583.39,-165.5 573.39,-169 583.39,-172.5 583.39,-165.5"/>
+<path fill="none" stroke="black" d="M1236,-122.22C1236,-142.37 1236,-172 1236,-172 1236,-172 656.34,-172 656.34,-172"/>
+<polygon fill="black" stroke="black" points="656.34,-168.5 646.34,-172 656.34,-175.5 656.34,-168.5"/>
 </g>
 <!-- FooterComponent -->
 <g id="node2" class="node">
 <title>FooterComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="961.88,-122 844.12,-122 844.12,-86 961.88,-86 961.88,-122"/>
-<text text-anchor="middle" x="903" y="-99.8" font-family="Times,serif" font-size="14.00">FooterComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="1143.88,-122 1026.12,-122 1026.12,-86 1143.88,-86 1143.88,-122"/>
+<text text-anchor="middle" x="1085" y="-99.8" font-family="Times,serif" font-size="14.00">FooterComponent</text>
 </g>
 <!-- FooterComponent&#45;&gt;SharedModule -->
 <g id="edge2" class="edge">
 <title>FooterComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M887.38,-122.02C887.38,-139.37 887.38,-163 887.38,-163 887.38,-163 583.38,-163 583.38,-163"/>
-<polygon fill="black" stroke="black" points="583.38,-159.5 573.38,-163 583.38,-166.5 583.38,-159.5"/>
+<path fill="none" stroke="black" d="M1078.88,-122.22C1078.88,-140.83 1078.88,-167 1078.88,-167 1078.88,-167 656.3,-167 656.3,-167"/>
+<polygon fill="black" stroke="black" points="656.3,-163.5 646.3,-167 656.3,-170.5 656.3,-163.5"/>
 </g>
 <!-- MenuSelectionDirective -->
 <g id="node3" class="node">
 <title>MenuSelectionDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="826.34,-122 673.66,-122 673.66,-86 826.34,-86 826.34,-122"/>
-<text text-anchor="middle" x="750" y="-99.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="1008.34,-122 855.66,-122 855.66,-86 1008.34,-86 1008.34,-122"/>
+<text text-anchor="middle" x="932" y="-99.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective</text>
 </g>
 <!-- MenuSelectionDirective&#45;&gt;SharedModule -->
 <g id="edge3" class="edge">
 <title>MenuSelectionDirective&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M732.38,-122.24C732.38,-137.57 732.38,-157 732.38,-157 732.38,-157 583.38,-157 583.38,-157"/>
-<polygon fill="black" stroke="black" points="583.38,-153.5 573.38,-157 583.38,-160.5 583.38,-153.5"/>
+<path fill="none" stroke="black" d="M923.88,-122.03C923.88,-139.06 923.88,-162 923.88,-162 923.88,-162 656.29,-162 656.29,-162"/>
+<polygon fill="black" stroke="black" points="656.29,-158.5 646.29,-162 656.29,-165.5 656.29,-158.5"/>
 </g>
 <!-- MenuToggleDirective -->
 <g id="node4" class="node">
 <title>MenuToggleDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="655.4,-122 514.6,-122 514.6,-86 655.4,-86 655.4,-122"/>
-<text text-anchor="middle" x="585" y="-99.8" font-family="Times,serif" font-size="14.00">MenuToggleDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="837.4,-122 696.6,-122 696.6,-86 837.4,-86 837.4,-122"/>
+<text text-anchor="middle" x="767" y="-99.8" font-family="Times,serif" font-size="14.00">MenuToggleDirective</text>
 </g>
 <!-- MenuToggleDirective&#45;&gt;SharedModule -->
 <g id="edge4" class="edge">
 <title>MenuToggleDirective&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M544.01,-122.11C544.01,-122.11 544.01,-140.99 544.01,-140.99"/>
-<polygon fill="black" stroke="black" points="540.51,-140.99 544.01,-150.99 547.51,-140.99 540.51,-140.99"/>
+<path fill="none" stroke="black" d="M757.41,-122.24C757.41,-137.57 757.41,-157 757.41,-157 757.41,-157 656.44,-157 656.44,-157"/>
+<polygon fill="black" stroke="black" points="656.44,-153.5 646.44,-157 656.44,-160.5 656.44,-153.5"/>
+</g>
+<!-- NetworkStatusComponent -->
+<g id="node5" class="node">
+<title>NetworkStatusComponent</title>
+<polygon fill="#ffffb3" stroke="black" points="679.04,-122 514.96,-122 514.96,-86 679.04,-86 679.04,-122"/>
+<text text-anchor="middle" x="597" y="-99.8" font-family="Times,serif" font-size="14.00">NetworkStatusComponent</text>
+</g>
+<!-- NetworkStatusComponent&#45;&gt;SharedModule -->
+<g id="edge5" class="edge">
+<title>NetworkStatusComponent&#45;&gt;SharedModule</title>
+<path fill="none" stroke="black" d="M597,-122.11C597,-122.11 597,-140.99 597,-140.99"/>
+<polygon fill="black" stroke="black" points="593.5,-140.99 597,-150.99 600.5,-140.99 593.5,-140.99"/>
 </g>
 <!-- SafePipe -->
-<g id="node5" class="node">
+<g id="node6" class="node">
 <title>SafePipe</title>
 <polygon fill="#ffffb3" stroke="black" points="496.76,-122 431.24,-122 431.24,-86 496.76,-86 496.76,-122"/>
 <text text-anchor="middle" x="464" y="-99.8" font-family="Times,serif" font-size="14.00">SafePipe</text>
 </g>
 <!-- SafePipe&#45;&gt;SharedModule -->
-<g id="edge5" class="edge">
+<g id="edge6" class="edge">
 <title>SafePipe&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M485.83,-122.11C485.83,-122.11 485.83,-140.99 485.83,-140.99"/>
-<polygon fill="black" stroke="black" points="482.33,-140.99 485.83,-150.99 489.33,-140.99 482.33,-140.99"/>
+<path fill="none" stroke="black" d="M464,-122.24C464,-137.57 464,-157 464,-157 464,-157 537.48,-157 537.48,-157"/>
+<polygon fill="black" stroke="black" points="537.48,-160.5 547.48,-157 537.48,-153.5 537.48,-160.5"/>
 </g>
 <!-- SidebarComponent -->
-<g id="node6" class="node">
+<g id="node7" class="node">
 <title>SidebarComponent</title>
 <polygon fill="#ffffb3" stroke="black" points="413.1,-122 288.9,-122 288.9,-86 413.1,-86 413.1,-122"/>
 <text text-anchor="middle" x="351" y="-99.8" font-family="Times,serif" font-size="14.00">SidebarComponent</text>
 </g>
 <!-- SidebarComponent&#45;&gt;SharedModule -->
-<g id="edge6" class="edge">
+<g id="edge7" class="edge">
 <title>SidebarComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M407.62,-122.24C407.62,-137.57 407.62,-157 407.62,-157 407.62,-157 464.65,-157 464.65,-157"/>
-<polygon fill="black" stroke="black" points="464.65,-160.5 474.65,-157 464.65,-153.5 464.65,-160.5"/>
+<path fill="none" stroke="black" d="M406.15,-122.03C406.15,-139.06 406.15,-162 406.15,-162 406.15,-162 537.35,-162 537.35,-162"/>
+<polygon fill="black" stroke="black" points="537.35,-165.5 547.35,-162 537.35,-158.5 537.35,-165.5"/>
 </g>
 <!-- TokenRatioPipe -->
-<g id="node7" class="node">
+<g id="node8" class="node">
 <title>TokenRatioPipe</title>
 <polygon fill="#ffffb3" stroke="black" points="270.49,-122 163.51,-122 163.51,-86 270.49,-86 270.49,-122"/>
 <text text-anchor="middle" x="217" y="-99.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe</text>
 </g>
 <!-- TokenRatioPipe&#45;&gt;SharedModule -->
-<g id="edge7" class="edge">
+<g id="edge8" class="edge">
 <title>TokenRatioPipe&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M263.06,-122.02C263.06,-139.37 263.06,-163 263.06,-163 263.06,-163 464.61,-163 464.61,-163"/>
-<polygon fill="black" stroke="black" points="464.61,-166.5 474.61,-163 464.61,-159.5 464.61,-166.5"/>
+<path fill="none" stroke="black" d="M234.83,-122.22C234.83,-140.83 234.83,-167 234.83,-167 234.83,-167 537.78,-167 537.78,-167"/>
+<polygon fill="black" stroke="black" points="537.78,-170.5 547.78,-167 537.78,-163.5 537.78,-170.5"/>
 </g>
 <!-- TopbarComponent -->
-<g id="node8" class="node">
+<g id="node9" class="node">
 <title>TopbarComponent</title>
 <polygon fill="#ffffb3" stroke="black" points="145.76,-122 24.24,-122 24.24,-86 145.76,-86 145.76,-122"/>
 <text text-anchor="middle" x="85" y="-99.8" font-family="Times,serif" font-size="14.00">TopbarComponent</text>
 </g>
 <!-- TopbarComponent&#45;&gt;SharedModule -->
-<g id="edge8" class="edge">
+<g id="edge9" class="edge">
 <title>TopbarComponent&#45;&gt;SharedModule</title>
-<path fill="none" stroke="black" d="M138.12,-122.11C138.12,-141.34 138.12,-169 138.12,-169 138.12,-169 464.74,-169 464.74,-169"/>
-<polygon fill="black" stroke="black" points="464.74,-172.5 474.74,-169 464.74,-165.5 464.74,-172.5"/>
+<path fill="none" stroke="black" d="M84.74,-122.22C84.74,-142.37 84.74,-172 84.74,-172 84.74,-172 537.42,-172 537.42,-172"/>
+<polygon fill="black" stroke="black" points="537.42,-175.5 547.42,-172 537.42,-168.5 537.42,-175.5"/>
 </g>
 <!-- FooterComponent  -->
-<g id="node10" class="node">
+<g id="node11" class="node">
 <title>FooterComponent </title>
-<polygon fill="#fb8072" stroke="black" points="930.88,-252 809.12,-252 809.12,-216 930.88,-216 930.88,-252"/>
-<text text-anchor="middle" x="870" y="-229.8" font-family="Times,serif" font-size="14.00">FooterComponent </text>
+<polygon fill="#fb8072" stroke="black" points="1131.88,-252 1010.12,-252 1010.12,-216 1131.88,-216 1131.88,-252"/>
+<text text-anchor="middle" x="1071" y="-229.8" font-family="Times,serif" font-size="14.00">FooterComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;FooterComponent  -->
-<g id="edge9" class="edge">
+<g id="edge10" class="edge">
 <title>SharedModule&#45;&gt;FooterComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M573.52,-175C657.27,-175 817.86,-175 817.86,-175 817.86,-175 817.86,-205.98 817.86,-205.98"/>
-<polygon fill="black" stroke="black" points="814.36,-205.98 817.86,-215.98 821.36,-205.98 814.36,-205.98"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M646.55,-177C757.89,-177 1018.18,-177 1018.18,-177 1018.18,-177 1018.18,-205.96 1018.18,-205.96"/>
+<polygon fill="black" stroke="black" points="1014.68,-205.96 1018.18,-215.96 1021.68,-205.96 1014.68,-205.96"/>
 </g>
 <!-- MenuSelectionDirective  -->
-<g id="node11" class="node">
+<g id="node12" class="node">
 <title>MenuSelectionDirective </title>
-<polygon fill="#fb8072" stroke="black" points="791.34,-252 634.66,-252 634.66,-216 791.34,-216 791.34,-252"/>
-<text text-anchor="middle" x="713" y="-229.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective </text>
+<polygon fill="#fb8072" stroke="black" points="992.34,-252 835.66,-252 835.66,-216 992.34,-216 992.34,-252"/>
+<text text-anchor="middle" x="914" y="-229.8" font-family="Times,serif" font-size="14.00">MenuSelectionDirective </text>
 </g>
 <!-- SharedModule&#45;&gt;MenuSelectionDirective  -->
-<g id="edge10" class="edge">
+<g id="edge11" class="edge">
 <title>SharedModule&#45;&gt;MenuSelectionDirective </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M573.22,-181C606.73,-181 645.01,-181 645.01,-181 645.01,-181 645.01,-205.76 645.01,-205.76"/>
-<polygon fill="black" stroke="black" points="641.51,-205.76 645.01,-215.76 648.51,-205.76 641.51,-205.76"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M646.27,-182C718.95,-182 846.39,-182 846.39,-182 846.39,-182 846.39,-205.81 846.39,-205.81"/>
+<polygon fill="black" stroke="black" points="842.89,-205.81 846.39,-215.81 849.89,-205.81 842.89,-205.81"/>
+</g>
+<!-- NetworkStatusComponent  -->
+<g id="node13" class="node">
+<title>NetworkStatusComponent </title>
+<polygon fill="#fb8072" stroke="black" points="818.03,-252 649.97,-252 649.97,-216 818.03,-216 818.03,-252"/>
+<text text-anchor="middle" x="734" y="-229.8" font-family="Times,serif" font-size="14.00">NetworkStatusComponent </text>
+</g>
+<!-- SharedModule&#45;&gt;NetworkStatusComponent  -->
+<g id="edge12" class="edge">
+<title>SharedModule&#45;&gt;NetworkStatusComponent </title>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M638.92,-187.11C638.92,-206.34 638.92,-234 638.92,-234 638.92,-234 640.01,-234 640.01,-234"/>
+<polygon fill="black" stroke="black" points="639.83,-237.5 649.83,-234 639.83,-230.5 639.83,-237.5"/>
 </g>
 <!-- SafePipe  -->
-<g id="node12" class="node">
+<g id="node14" class="node">
 <title>SafePipe </title>
-<polygon fill="#fb8072" stroke="black" points="616.76,-252 547.24,-252 547.24,-216 616.76,-216 616.76,-252"/>
-<text text-anchor="middle" x="582" y="-229.8" font-family="Times,serif" font-size="14.00">SafePipe </text>
+<polygon fill="#fb8072" stroke="black" points="631.76,-252 562.24,-252 562.24,-216 631.76,-216 631.76,-252"/>
+<text text-anchor="middle" x="597" y="-229.8" font-family="Times,serif" font-size="14.00">SafePipe </text>
 </g>
 <!-- SharedModule&#45;&gt;SafePipe  -->
-<g id="edge11" class="edge">
+<g id="edge13" class="edge">
 <title>SharedModule&#45;&gt;SafePipe </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M560.29,-187.11C560.29,-187.11 560.29,-205.99 560.29,-205.99"/>
-<polygon fill="black" stroke="black" points="556.79,-205.99 560.29,-215.99 563.79,-205.99 556.79,-205.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M597,-187.11C597,-187.11 597,-205.99 597,-205.99"/>
+<polygon fill="black" stroke="black" points="593.5,-205.99 597,-215.99 600.5,-205.99 593.5,-205.99"/>
 </g>
 <!-- SidebarComponent  -->
-<g id="node13" class="node">
+<g id="node15" class="node">
 <title>SidebarComponent </title>
-<polygon fill="#fb8072" stroke="black" points="529.6,-252 402.4,-252 402.4,-216 529.6,-216 529.6,-252"/>
-<text text-anchor="middle" x="466" y="-229.8" font-family="Times,serif" font-size="14.00">SidebarComponent </text>
+<polygon fill="#fb8072" stroke="black" points="544.6,-252 417.4,-252 417.4,-216 544.6,-216 544.6,-252"/>
+<text text-anchor="middle" x="481" y="-229.8" font-family="Times,serif" font-size="14.00">SidebarComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;SidebarComponent  -->
-<g id="edge12" class="edge">
+<g id="edge14" class="edge">
 <title>SharedModule&#45;&gt;SidebarComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M502.29,-187.11C502.29,-187.11 502.29,-205.99 502.29,-205.99"/>
-<polygon fill="black" stroke="black" points="498.79,-205.99 502.29,-215.99 505.79,-205.99 498.79,-205.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M555.08,-187.11C555.08,-206.34 555.08,-234 555.08,-234 555.08,-234 554.05,-234 554.05,-234"/>
+<polygon fill="black" stroke="black" points="554.78,-230.5 544.78,-234 554.78,-237.5 554.78,-230.5"/>
 </g>
 <!-- TokenRatioPipe  -->
-<g id="node14" class="node">
+<g id="node16" class="node">
 <title>TokenRatioPipe </title>
-<polygon fill="#fb8072" stroke="black" points="384.49,-252 273.51,-252 273.51,-216 384.49,-216 384.49,-252"/>
-<text text-anchor="middle" x="329" y="-229.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe </text>
+<polygon fill="#fb8072" stroke="black" points="399.49,-252 288.51,-252 288.51,-216 399.49,-216 399.49,-252"/>
+<text text-anchor="middle" x="344" y="-229.8" font-family="Times,serif" font-size="14.00">TokenRatioPipe </text>
 </g>
 <!-- SharedModule&#45;&gt;TokenRatioPipe  -->
-<g id="edge13" class="edge">
+<g id="edge15" class="edge">
 <title>SharedModule&#45;&gt;TokenRatioPipe </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M474.76,-181C419.24,-181 336.6,-181 336.6,-181 336.6,-181 336.6,-205.76 336.6,-205.76"/>
-<polygon fill="black" stroke="black" points="333.1,-205.76 336.6,-215.76 340.1,-205.76 333.1,-205.76"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.64,-182C474.04,-182 344.1,-182 344.1,-182 344.1,-182 344.1,-205.81 344.1,-205.81"/>
+<polygon fill="black" stroke="black" points="340.6,-205.81 344.1,-215.81 347.6,-205.81 340.6,-205.81"/>
 </g>
 <!-- TopbarComponent  -->
-<g id="node15" class="node">
+<g id="node17" class="node">
 <title>TopbarComponent </title>
-<polygon fill="#fb8072" stroke="black" points="255.76,-252 130.24,-252 130.24,-216 255.76,-216 255.76,-252"/>
-<text text-anchor="middle" x="193" y="-229.8" font-family="Times,serif" font-size="14.00">TopbarComponent </text>
+<polygon fill="#fb8072" stroke="black" points="270.76,-252 145.24,-252 145.24,-216 270.76,-216 270.76,-252"/>
+<text text-anchor="middle" x="208" y="-229.8" font-family="Times,serif" font-size="14.00">TopbarComponent </text>
 </g>
 <!-- SharedModule&#45;&gt;TopbarComponent  -->
-<g id="edge14" class="edge">
+<g id="edge16" class="edge">
 <title>SharedModule&#45;&gt;TopbarComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M474.52,-175C385.98,-175 209.57,-175 209.57,-175 209.57,-175 209.57,-205.98 209.57,-205.98"/>
-<polygon fill="black" stroke="black" points="206.07,-205.98 209.57,-215.98 213.07,-205.98 206.07,-205.98"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.42,-177C440.77,-177 199.17,-177 199.17,-177 199.17,-177 199.17,-205.96 199.17,-205.96"/>
+<polygon fill="black" stroke="black" points="195.67,-205.96 199.17,-215.96 202.67,-205.96 195.67,-205.96"/>
 </g>
 </g>
 </svg>

docs/compodoc/modules/TokensModule.html

@@ -203,43 +203,42 @@ import { CommonModule } from '@angular/common';
 import { TokensRoutingModule } from '@pages/tokens/tokens-routing.module';
 import { TokensComponent } from '@pages/tokens/tokens.component';
 import { TokenDetailsComponent } from '@pages/tokens/token-details/token-details.component';
-import {SharedModule} from '@app/shared/shared.module';
-import {MatTableModule} from '@angular/material/table';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatSortModule} from '@angular/material/sort';
-import {MatPseudoCheckboxModule, MatRippleModule} from '@angular/material/core';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatButtonModule} from '@angular/material/button';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatCardModule} from '@angular/material/card';
-
+import { SharedModule } from '@app/shared/shared.module';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
   declarations: [TokensComponent, TokenDetailsComponent],
-    imports: [
-        CommonModule,
-        TokensRoutingModule,
-        SharedModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatPseudoCheckboxModule,
-        MatCheckboxModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatSidenavModule,
-        MatButtonModule,
-        MatToolbarModule,
-        MatCardModule,
-        MatRippleModule
-    ]
+  imports: [
+    CommonModule,
+    TokensRoutingModule,
+    SharedModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatPseudoCheckboxModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatRippleModule,
+  ],
 })
-export class TokensModule { }
+export class TokensModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/TokensRoutingModule.html

@@ -74,7 +74,7 @@
 import { Routes, RouterModule } from '@angular/router';
 
 import { TokensComponent } from '@pages/tokens/tokens.component';
-import {TokenDetailsComponent} from '@pages/tokens/token-details/token-details.component';
+import { TokenDetailsComponent } from '@pages/tokens/token-details/token-details.component';
 
 const routes: Routes = [
   { path: '', component: TokensComponent },
@@ -83,9 +83,9 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class TokensRoutingModule { }
+export class TokensRoutingModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/TransactionsModule.html

@@ -228,47 +228,44 @@ import { CommonModule } from '@angular/common';
 import { TransactionsRoutingModule } from '@pages/transactions/transactions-routing.module';
 import { TransactionsComponent } from '@pages/transactions/transactions.component';
 import { TransactionDetailsComponent } from '@pages/transactions/transaction-details/transaction-details.component';
-import {DataTablesModule} from 'angular-datatables';
-import {SharedModule} from '@app/shared/shared.module';
-import {MatTableModule} from '@angular/material/table';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatSortModule} from '@angular/material/sort';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSelectModule} from '@angular/material/select';
-import {MatCardModule} from '@angular/material/card';
-import {MatRippleModule} from '@angular/material/core';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-
+import { DataTablesModule } from 'angular-datatables';
+import { SharedModule } from '@app/shared/shared.module';
+import { MatTableModule } from '@angular/material/table';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 @NgModule({
   declarations: [TransactionsComponent, TransactionDetailsComponent],
-  exports: [
-    TransactionDetailsComponent
+  exports: [TransactionDetailsComponent],
+  imports: [
+    CommonModule,
+    TransactionsRoutingModule,
+    DataTablesModule,
+    SharedModule,
+    MatTableModule,
+    MatCheckboxModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatCardModule,
+    MatRippleModule,
+    MatSnackBarModule,
   ],
-    imports: [
-        CommonModule,
-        TransactionsRoutingModule,
-        DataTablesModule,
-        SharedModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatButtonModule,
-        MatIconModule,
-        MatSelectModule,
-        MatCardModule,
-        MatRippleModule,
-      MatSnackBarModule,
-    ]
 })
-export class TransactionsModule { }
+export class TransactionsModule {}
 </code></pre>
     </div>
 </div>

docs/compodoc/modules/TransactionsRoutingModule.html

@@ -79,9 +79,9 @@ const routes: Routes = [{ path: '', component: TransactionsCompon
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class TransactionsRoutingModule { }
+export class TransactionsRoutingModule {}
 </code></pre>
     </div>
 </div>