### File

`src/app/app.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-root`
styleUrls | `./app.component.scss`
templateUrl | `./app.component.html`

### Index

###### Properties
accountDetailsRegex mediaQuery title url
###### Methods
Async cicConvert Async cicTransfer Async ngOnInit onResize Async routeManagement
###### HostListeners
window:cic_convert window:cic_transfer

### Constructor

`constructor(authService: AuthService, blockSyncService: BlockSyncService, errorDialogService: ErrorDialogService, loggingService: LoggingService, tokenService: TokenService, transactionService: TransactionService, userService: UserService, swUpdate: SwUpdate, router: Router)`
Defined in src/app/app.component.ts:25
Parameters :
Name | Type | Optional
authService | `AuthService` | No
blockSyncService | `BlockSyncService` | No
errorDialogService | `ErrorDialogService` | No
loggingService | `LoggingService` | No
tokenService | `TokenService` | No
transactionService | `TransactionService` | No
userService | `UserService` | No
swUpdate | `SwUpdate` | No
router | `Router` | No

### HostListeners

window:cic_convert
Arguments : `'$event'`
`window:cic_convert(event: CustomEvent)`
Defined in src/app/app.component.ts:99

window:cic_transfer
Arguments : `'$event'`
`window:cic_transfer(event: CustomEvent)`
Defined in src/app/app.component.ts:93

### Methods

Async cicConvert
`cicConvert(event: CustomEvent)`
Decorators : `@HostListener('window:cic_convert', ['$event'])`
Defined in src/app/app.component.ts:99
Parameters :
Name | Type | Optional
event | `CustomEvent` | No
Returns : `Promise<void>`

Async cicTransfer
`cicTransfer(event: CustomEvent)`
Decorators : `@HostListener('window:cic_transfer', ['$event'])`
Defined in src/app/app.component.ts:93
Parameters :
Name | Type | Optional
event | `CustomEvent` | No
Returns : `Promise<void>`

Async ngOnInit
`ngOnInit()`
Defined in src/app/app.component.ts:42
Returns : `Promise<void>`

onResize
`onResize(e)`
Defined in src/app/app.component.ts:68
Parameters :
Name | Optional
e | No
Returns : `void`

Async routeManagement
`routeManagement()`
Defined in src/app/app.component.ts:104
Returns : `Promise<void>`

### Properties

accountDetailsRegex
Type : `string`
Default value : `'/accounts/[a-z,A-Z,0-9]{40}'`
Defined in src/app/app.component.ts:25

mediaQuery
Type : `MediaQueryList`
Default value : `window.matchMedia('(max-width: 768px)')`
Defined in src/app/app.component.ts:23

title
Type : `string`
Default value : `'CICADA'`
Defined in src/app/app.component.ts:22

url
Type : `string`
Defined in src/app/app.component.ts:24

    import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
    import {
      AuthService,
      BlockSyncService,
      ErrorDialogService,
      LoggingService,
      TokenService,
      TransactionService,
      UserService,
    } from '@app/_services';
    import { SwUpdate } from '@angular/service-worker';
    import { NavigationEnd, Router } from '@angular/router';
    import { filter } from 'rxjs/operators';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class AppComponent implements OnInit {
      title = 'CICADA';
      mediaQuery: MediaQueryList = window.matchMedia('(max-width: 768px)');
      url: string;
      accountDetailsRegex = '/accounts/[a-z,A-Z,0-9]{40}';

      constructor(
        private authService: AuthService,
        private blockSyncService: BlockSyncService,
        private errorDialogService: ErrorDialogService,
        private loggingService: LoggingService,
        private tokenService: TokenService,
        private transactionService: TransactionService,
        private userService: UserService,
        private swUpdate: SwUpdate,
        private router: Router
      ) {
        this.mediaQuery.addEventListener('change', this.onResize);
        this.onResize(this.mediaQuery);
      }

      async ngOnInit(): Promise<void> {
        await this.authService.init();
        await this.tokenService.init();
        await this.userService.init();
        await this.transactionService.init();
        try {
          const publicKeys = await this.authService.getPublicKeys();
          await this.authService.mutableKeyStore.importPublicKey(publicKeys);
          this.authService.getTrustedUsers();
        } catch (error) {
          this.errorDialogService.openDialog({
            message: 'Trusted keys endpoint cannot be reached. Please try again later.',
          });
          // TODO do something to halt user progress...show a sad cicada page 🦗?
        }
        if (!this.swUpdate.isEnabled) {
          this.swUpdate.available.subscribe(() => {
            if (confirm('New Version available. Load New Version?')) {
              window.location.reload();
            }
          });
        }
        await this.routeManagement();
      }

      // Load resize
      onResize(e): void {
        const sidebar: HTMLElement = document.getElementById('sidebar');
        const content: HTMLElement = document.getElementById('content');
        const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
        if (sidebarCollapse?.classList.contains('active')) {
          sidebarCollapse?.classList.remove('active');
        }
        if (e.matches) {
          if (!sidebar?.classList.contains('active')) {
            sidebar?.classList.add('active');
          }
          if (!content?.classList.contains('active')) {
            content?.classList.add('active');
          }
        } else {
          if (sidebar?.classList.contains('active')) {
            sidebar?.classList.remove('active');
          }
          if (content?.classList.contains('active')) {
            content?.classList.remove('active');
          }
        }
      }

      @HostListener('window:cic_transfer', ['$event'])
      async cicTransfer(event: CustomEvent): Promise<void> {
        const transaction: any = event.detail.tx;
        await this.transactionService.setTransaction(transaction, 100);
      }

      @HostListener('window:cic_convert', ['$event'])
      async cicConvert(event: CustomEvent): Promise<void> {
        const conversion: any = event.detail.tx;
        await this.transactionService.setConversion(conversion, 100);
      }

      async routeManagement(): Promise<void> {
        await this.router.events
          .pipe(filter((e) => e instanceof NavigationEnd))
          .forEach(async (routeInfo) => {
            if (routeInfo instanceof NavigationEnd) {
              this.url = routeInfo.url;
              if (!this.url.match(this.accountDetailsRegex) || !this.url.includes('tx')) {
                await this.blockSyncService.blockSync();
              }
              if (!this.url.includes('accounts')) {
                try {
                  await this.userService.loadAccounts(100);
                } catch (error) {
                  this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
                }
              }
              if (!this.url.includes('tokens')) {
                this.tokenService.load.subscribe(async (status: boolean) => {
                  if (status) {
                    await this.tokenService.getTokens();
                  }
                });
              }
            }
          });
      }
    }

    <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

`./app.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""