diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index 47e12cfcd..0456f2647 100644
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -157,3 +157,97 @@ export const specialBlocks = {
labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
}
};
+
+export const fiatCurrencies = {
+ AED: {
+ name: 'UAE Dirham',
+ code: 'AED'
+ },
+ AUD: {
+ name: 'Australian Dollar',
+ code: 'AUD',
+ indexed: true,
+ },
+ BRL: {
+ name: 'Brazilian Real',
+ code: 'BRL'
+ },
+ CAD: {
+ name: 'Canadian Dollar',
+ code: 'CAD',
+ indexed: true,
+ },
+ CHF: {
+ name: 'Swiss Franc',
+ code: 'CHF',
+ indexed: true,
+ },
+ EUR: {
+ name: 'Euro',
+ code: 'EUR',
+ indexed: true,
+ },
+ GBP: {
+ name: 'Pound Sterling',
+ code: 'GBP',
+ indexed: true,
+ },
+ HKD: {
+ name: 'Hong Kong Dollar',
+ code: 'HKD'
+ },
+ IDR: {
+ name: 'Indonesian Rupiah',
+ code: 'IDR'
+ },
+ JPY: {
+ name: 'Japanese Yen',
+ code: 'JPY',
+ indexed: true,
+ },
+ KRW: {
+ name: 'Korean Won',
+ code: 'KRW'
+ },
+ MYR: {
+ name: 'Malaysian Ringgit',
+ code: 'MYR'
+ },
+ NGN: {
+ name: 'Nigerian Naira',
+ code: 'NGN'
+ },
+ NZD: {
+ name: 'New Zealand Dollar',
+ code: 'NZD'
+ },
+ PLN: {
+ name: 'Polish Złoty',
+ code: 'PLN'
+ },
+ RUB: {
+ name: 'Russian Ruble',
+ code: 'RUB'
+ },
+ SGD: {
+ name: 'Singapore Dollar',
+ code: 'SGD'
+ },
+ TRY: {
+ name: 'Turkish Lira',
+ code: 'TRY'
+ },
+ UAH: {
+ name: 'Ukrainian Hryvnia',
+ code: 'UAH'
+ },
+ USD: {
+ name: 'US Dollar',
+ code: 'USD',
+ indexed: true,
+ },
+ ZAR: {
+ name: 'South African Rand',
+ code: 'ZAR'
+ },
+};
\ No newline at end of file
diff --git a/frontend/src/app/components/fiat-selector/fiat-selector.component.html b/frontend/src/app/components/fiat-selector/fiat-selector.component.html
new file mode 100644
index 000000000..7fa8c0d00
--- /dev/null
+++ b/frontend/src/app/components/fiat-selector/fiat-selector.component.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/frontend/src/app/components/fiat-selector/fiat-selector.component.scss b/frontend/src/app/components/fiat-selector/fiat-selector.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/fiat-selector/fiat-selector.component.ts b/frontend/src/app/components/fiat-selector/fiat-selector.component.ts
new file mode 100644
index 000000000..f967b7d77
--- /dev/null
+++ b/frontend/src/app/components/fiat-selector/fiat-selector.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '../../services/storage.service';
+import { fiatCurrencies } from '../../app.constants';
+import { StateService } from '../../services/state.service';
+
+@Component({
+ selector: 'app-fiat-selector',
+ templateUrl: './fiat-selector.component.html',
+ styleUrls: ['./fiat-selector.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FiatSelectorComponent implements OnInit {
+ fiatForm: UntypedFormGroup;
+ currencies = fiatCurrencies;
+ currencyList = Object.keys(fiatCurrencies).sort();
+
+ constructor(
+ private formBuilder: UntypedFormBuilder,
+ private stateService: StateService,
+ private storageService: StorageService,
+ ) { }
+
+ ngOnInit() {
+ this.fiatForm = this.formBuilder.group({
+ fiat: ['USD']
+ });
+ this.stateService.fiatCurrency$.subscribe((fiat) => {
+ this.fiatForm.get('fiat')?.setValue(fiat);
+ });
+ }
+
+ changeFiat() {
+ const newFiat = this.fiatForm.get('fiat')?.value;
+ this.storageService.setValue('fiat-preference', newFiat);
+ this.stateService.fiatCurrency$.next(newFiat);
+ }
+}
diff --git a/frontend/src/app/components/language-selector/language-selector.component.html b/frontend/src/app/components/language-selector/language-selector.component.html
index dee1e3acb..b23b2b7b7 100644
--- a/frontend/src/app/components/language-selector/language-selector.component.html
+++ b/frontend/src/app/components/language-selector/language-selector.component.html
@@ -1,5 +1,5 @@
-
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 397021048..1df7baabc 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -144,7 +144,14 @@
-
+
Terms of Service
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index a7e21ba94..4a844eb52 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -323,4 +323,19 @@
margin-bottom: 10px;
text-decoration: none;
color: inherit;
+}
+
+.pref-selectors {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .selector {
+ margin-left: .5em;
+ margin-bottom: .5em;
+ &:first {
+ margin-left: 0;
+ }
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 091490715..02b160fe9 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -119,6 +119,7 @@ export class StateService {
timeLtr: BehaviorSubject
;
hideFlow: BehaviorSubject;
hideAudit: BehaviorSubject;
+ fiatCurrency$: BehaviorSubject;
constructor(
@Inject(PLATFORM_ID) private platformId: any,
@@ -184,6 +185,9 @@ export class StateService {
this.hideAudit.subscribe((hide) => {
this.storageService.setValue('audit-preference', hide ? 'hide' : 'show');
});
+
+ const fiatPreference = this.storageService.getValue('fiat-preference');
+ this.fiatCurrency$ = new BehaviorSubject(fiatPreference || 'USD');
}
setNetworkBasedonUrl(url: string) {
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index d82f03493..e87107fe5 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
+import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
import { ColoredPriceDirective } from './directives/colored-price.directive';
import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
@@ -93,6 +94,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
TxFeaturesComponent,
TxFeeRatingComponent,
LanguageSelectorComponent,
+ FiatSelectorComponent,
ScriptpubkeyTypePipe,
RelativeUrlPipe,
NoSanitizePipe,
@@ -199,6 +201,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
TxFeaturesComponent,
TxFeeRatingComponent,
LanguageSelectorComponent,
+ FiatSelectorComponent,
ScriptpubkeyTypePipe,
RelativeUrlPipe,
Hex2asciiPipe,