import { Component , ChangeDetectionStrategy , ChangeDetectorRef , Inject } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; import { HeaderStore } from 'src/app/core/header/services/header.store' ; import { ThemeService } from 'src/app/core/services/theme/theme.service' ; import { POLYMORPHEUS_CONTEXT , PolymorpheusComponent } from '@tinkoff/ng-polymorpheus' ; import { RubicLanguageSelectComponent } from 'src/app/core/header/components/header/components/rubic-language-select/rubic-language-select.component' ; import { TranslateService } from '@ngx-translate/core' ; import { LanguageListElement } from 'src/app/core/header/models/language-list-element' ; import { SettingsComponentData } from 'src/app/core/header/models/settings-component' ; import { GasIndicatorComponent } from 'src/app/shared/components/gas-indicator/gas-indicator.component' ; import { CurrentLanguageComponent } from 'src/app/core/header/components/header/components/current-language/current-language.component' ; import { TutorialsComponent } from 'src/app/core/header/components/header/components/tutorials/tutorials.component' ; import { SettingsListItem } from 'src/app/core/header/models/settings-list-item' ; import { ThemeSwitcherComponent } from 'src/app/core/header/components/header/components/theme-switcher/theme-switcher.component' ; import { LANGUAGES_LIST } from '@core/header/models/languages-list' ; @ Component ( { selector : 'app-settings-list' , templateUrl : './settings-list.component.html' , styleUrls : [ './settings-list.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class SettingsListComponent { public readonly settingsList : SettingsListItem [ ] ; return public get currentLanguage ( ) : LanguageListElement { return LANGUAGES_LIST . find ( lang => lang . lng === this . translateService . currentLang ) ; } constructor ( private readonly headerStore , private readonly themeService , private readonly cdr , private readonly translateService , @ Inject ( POLYMORPHEUS_CONTEXT ) private readonly context$ ) { this . settingsList = [ { title : 'settings.header.switchTheme.title' , description : 'settings.header.switchTheme.desc' , component : new PolymorpheusComponent ( ThemeSwitcherComponent ) , action : this . switchTheme . bind ( this ) } , { title : 'settings.header.language.title' , description : 'settings.header.language.desc' , component : new PolymorpheusComponent ( CurrentLanguageComponent ) , action : this . switchToLanguageSettings . bind ( this ) , arrow : true } , { title : 'settings.header.gasPrice.title' , description : 'settings.header.gasPrice.desc' , component : new PolymorpheusComponent ( GasIndicatorComponent ) , arrow : false } , { title : 'settings.header.tutorials.title' , description : 'settings.header.tutorials.desc' , component : new PolymorpheusComponent ( TutorialsComponent ) , action : this . navigateExternalLink . bind ( null , [ 'https://www.youtube.com/c/RubicExchange' ] ) , arrow : true } ] ; } /**
     * Toggle dark or light site theme.
     */ public switchTheme ( ) { this . themeService . switchTheme ( ) ; } param Url public navigateExternalLink ( url ) { window . open ( url , '_blank' ) ; } /**
     * Switch component to LanguageSettings.
     */ public switchToLanguageSettings ( ) { this . context$ . next ( { titleKey : 'Languages' , component : new PolymorpheusComponent ( RubicLanguageSelectComponent ) } ) ; } }