Working fiat/btc calculator

2023-06-17 21:04:23 +02:00 · 2023-06-17 21:04:23 +02:00 · 67a998c69f
commit 67a998c69f
parent 0ec98d03e5
6 changed files with 142 additions and 2 deletions
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -22,6 +22,7 @@ import { AssetsFeaturedComponent } from './components/assets/assets-featured/ass
 import { AssetsComponent } from './components/assets/assets.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
+import { CalculatorComponent } from './components/calculator/calculator.component';

 const browserWindow = window || {};
 // @ts-ignore
@ -278,6 +279,10 @@ let routes: Routes = [
        path: 'rbf',
        component: RbfList,
      },
+      {
+        path: 'calculator',
+        component: CalculatorComponent
+      },
      {
        path: 'terms-of-service',
        component: TermsOfServiceComponent
--- a/frontend/src/app/components/calculator/calculator.component.html
+++ b/frontend/src/app/components/calculator/calculator.component.html
@ -0,0 +1,44 @@
+<div class="container-xl">
+  <div class="text-center">
+    <h2>Calculator</h2>
+  </div>
+
+  <div class="row justify-content-md-center" *ngIf="price$ | async; else loading">
+    <div class="col-md-auto">
+
+      <form [formGroup]="form">
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">{{ currency$ | async }}</span>
+          </div>
+          <input type="text" class="form-control" formControlName="fiat">
+          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><app-svg-images name="bitcoin" width="30" height="30" viewBox="0 0 75 80" style="width: 25px; height: 24px; margin-left: 8px;"></app-svg-images></span>
+          </div>
+          <input type="text" class="form-control" formControlName="bitcoin">
+          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><app-svg-images name="sats" width="30" height="30" viewBox="-9 0 370 450" style="width: 25px; height: 24px; margin-left: 6px;"></app-svg-images></span>
+          </div>
+          <input type="text" class="form-control" formControlName="satoshis">
+          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+      </form>
+
+    </div>
+  </div>
+
+  <ng-template #loading>
+    <div class="text-center">
+      Waiting for price feed...
+    </div>
+  </ng-template>
+
+</div>
--- a/frontend/src/app/components/calculator/calculator.component.scss
+++ b/frontend/src/app/components/calculator/calculator.component.scss
@ -0,0 +1,3 @@
+.input-group-text {
+  width: 75px;
+}
--- a/frontend/src/app/components/calculator/calculator.component.ts
+++ b/frontend/src/app/components/calculator/calculator.component.ts
@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { Price, PriceService } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-calculator',
+  templateUrl: './calculator.component.html',
+  styleUrls: ['./calculator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CalculatorComponent implements OnInit {
+  satoshis = 10000;
+  form: FormGroup;
+
+  currency: string;
+  currency$ = this.stateService.fiatCurrency$;
+  mainSubscription$: Observable<any>;
+  price$: Observable<number>;
+
+  constructor(
+    private priceService: PriceService,
+    private stateService: StateService,
+    private formBuilder: FormBuilder,
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      fiat: [0],
+      bitcoin: [0],
+      satoshis: [0],
+    });
+
+    this.price$ = this.currency$.pipe(
+      switchMap((currency) => {
+        this.currency = currency; 
+        return this.stateService.conversions$.asObservable();
+      }),
+      map((conversions) => {
+        return conversions[this.currency];
+      })
+    );
+
+    combineLatest([
+      this.price$,
+      this.form.get('fiat').valueChanges
+    ]).subscribe(([price, value]) => {
+      value = parseFloat(value.replace(',', '.'));
+      value = value || 0;
+      const rate = (value / price).toFixed(8);
+      const satsRate = Math.round(value / price * 100_000_000);
+      this.form.get('bitcoin').setValue(rate, { emitEvent: false });
+      this.form.get('satoshis').setValue(satsRate, { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('bitcoin').valueChanges
+    ]).subscribe(([price, value]) => {
+      value = parseFloat(value.replace(',', '.'));
+      value = value || 0;
+      const rate = parseFloat((value * price).toFixed(8));
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('satoshis').setValue(Math.round(value * 100_000_000), { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('satoshis').valueChanges
+    ]).subscribe(([price, value]) => {
+      value = parseFloat(value.replace(',', '.'));
+      value = value || 0;
+      const rate = parseFloat((value / 100_000_000 * price).toFixed(8));
+      const bitcoinRate = (value / 100_000_000).toFixed(8);
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('bitcoin').setValue(bitcoinRate, { emitEvent: false });
+    });
+
+  }
+
+}
--- a/frontend/src/app/components/svg-images/svg-images.component.html
+++ b/frontend/src/app/components/svg-images/svg-images.component.html
@ -74,6 +74,9 @@
      <path fill="#FFFFFF" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
    </svg>
  </ng-container>
+  <ng-container *ngSwitchCase="'sats'">
+    <svg [attr.width]="width" [attr.height]="height" [attr.viewBox]="viewBox" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><defs><style>.cls-1{fill:#f8991d;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="180" cy="180" r="179"/><rect class="cls-2" x="201.48" y="37.16" width="23.49" height="40.14" transform="translate(21.82 -52.79) rotate(14.87)"/><rect class="cls-2" x="135.03" y="287.5" width="23.49" height="40.14" transform="translate(83.82 -27.36) rotate(14.87)"/><rect class="cls-2" x="184.27" y="38.29" width="23.49" height="167.49" transform="translate(364.26 -36.11) rotate(104.87)"/><rect class="cls-2" x="168.36" y="98.26" width="23.49" height="167.49" transform="translate(402.22 54.61) rotate(104.87)"/><rect class="cls-2" x="152.89" y="156.52" width="23.49" height="167.49" transform="translate(439.1 142.78) rotate(104.87)"/></svg>
+  </ng-container>
 </ng-container>

 <ng-template #bitcoinLogo let-color let-width="width" let-height="height" let-viewBox="viewBox">
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@ -97,6 +97,7 @@ import { MempoolBlockOverviewComponent } from '../components/mempool-block-overv
 import { ClockchainComponent } from '../components/clockchain/clockchain.component';
 import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
 import { ClockComponent } from '../components/clock/clock.component';
+import { CalculatorComponent } from '../components/calculator/calculator.component';

 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';

@ -185,12 +186,11 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    GeolocationComponent,
    TestnetAlertComponent,
    GlobalFooterComponent,
-
+    CalculatorComponent,
    MempoolBlockOverviewComponent,
    ClockchainComponent,
    ClockComponent,
    ClockFaceComponent,
-
    OnlyVsizeDirective,
    OnlyWeightDirective
  ],