feat: add swap component

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.html

@@ -1,6 +1,5 @@
-@let info = info$ | async;
-@if (info) {
-    @let data = info.data;
+@let data = info$ | async;
+@if (data) {
     <div
         tuiCardLarge
         class="price-list"

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.ts

@@ -34,7 +34,7 @@ import {CryptoService} from '../../../../../services/crypto.service';
 })
 export class PriceListComponent {
     protected pricesService = inject(CryptoService);
-    protected info$ = this.pricesService.info$;
+    protected info$ = this.pricesService.getTokens();
     protected showTokens = 4;
 
     @Input()

apps/taiga-lumbermill/src/dashboards/crypto/components/swap/swap.component.html

@@ -0,0 +1,103 @@
+@let data = info();
+@if (data) {
+    <div
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        [style.height]="'100%'"
+    >
+        <header tuiHeader>
+            <h2
+                tuiTitle
+                [style.text-align]="'center'"
+            >
+                Swap
+            </h2>
+        </header>
+        @for (title of titles; track $index) {
+            <div>
+                <div tuiCell="l">
+                    <div TuiTitle>{{ title }}</div>
+                    <div TuiTitle>Balance: 1000 {{ chosen()[$index].toUpperCase() }}</div>
+                </div>
+                <button
+                    tuiButton
+                    tuiChevron
+                    type="button"
+                    class="choose-crypto"
+                    [tuiDropdown]="dropdownContent"
+                    [(tuiDropdownOpen)]="openedDialog[$index]"
+                    (click)="openedDialog[$index] = !openedDialog[$index]"
+                >
+                    <tui-avatar
+                        size="xs"
+                        [src]="'https://assets.coincap.io/assets/icons/' + chosen()[$index].toLowerCase() + '@2x.png'"
+                    />
+                    {{ chosen()[$index].toUpperCase() }}
+                    @let current = $index;
+                    <ng-template
+                        #dropdownContent
+                        let-close
+                    >
+                        <tui-data-list size="s">
+                            @for (token of data; track token.symbol) {
+                                <button
+                                    tuiOption
+                                    [value]="token.symbol"
+                                    (click)="[newToken(current, token.symbol), close()]"
+                                >
+                                    {{ token.symbol.toUpperCase() }}
+                                    <tui-icon
+                                        *ngIf="token.symbol.toLowerCase() === chosen()[current].toLowerCase()"
+                                        icon="@tui.check"
+                                        [style.font-size.em]="1"
+                                        [style.margin-left.rem]="0.5"
+                                    />
+                                </button>
+                            }
+                        </tui-data-list>
+                    </ng-template>
+                </button>
+            </div>
+            <div>
+                <tui-input-inline tuiTitle="l">
+                    @if ($index) {
+                        <input
+                            max="1000"
+                            min="0"
+                            type="number"
+                            [(ngModel)]="to"
+                            (change)="newSwapTo()"
+                        />
+                    } @else {
+                        <input
+                            max="1000"
+                            min="0"
+                            type="number"
+                            [(ngModel)]="from"
+                            (change)="newSwapFrom()"
+                        />
+                    }
+                </tui-input-inline>
+                <div>
+                    <div
+                        tuiSubtitle
+                        class="equal-number"
+                    >
+                        @if ($index) {
+                            ≈{{ priceTo() * toNum(to()) | tuiAmount: 'USD' | async }}
+                        } @else {
+                            ≈{{ priceFrom() * toNum(from()) | tuiAmount: 'USD' | async }}
+                        }
+                    </div>
+                    <hr />
+                </div>
+            </div>
+        }
+        <button
+            appearance="primary"
+            tuiButton
+        >
+            Swap
+        </button>
+    </div>
+}

apps/taiga-lumbermill/src/dashboards/crypto/components/swap/swap.component.less

@@ -0,0 +1,19 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+.choose-crypto {
+    height: 2rem;
+}
+
+.equal-number {
+    text-align: right;
+}
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

apps/taiga-lumbermill/src/dashboards/crypto/components/swap/swap.component.ts

@@ -0,0 +1,112 @@
+import {CommonModule} from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    signal,
+} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
+import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    TuiExpand,
+    TuiIcon,
+    TuiTextfield,
+    TuiTitle,
+} from '@taiga-ui/core';
+import {TuiAvatar, TuiChevron, TuiFade, TuiInputInline} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
+import {
+    TuiInputModule,
+    TuiInputNumberModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/legacy';
+
+import type {PricesData} from '../../../../services/crypto.service';
+import {CryptoService} from '../../../../services/crypto.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-swap',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiActiveZone,
+        TuiAmountPipe,
+        TuiAppearance,
+        TuiAvatar,
+        TuiButton,
+        TuiCardLarge,
+        TuiCell,
+        TuiChevron,
+        TuiDataList,
+        TuiDropdown,
+        TuiExpand,
+        TuiFade,
+        TuiHeader,
+        TuiIcon,
+        TuiInputInline,
+        TuiInputModule,
+        TuiInputNumberModule,
+        TuiObscured,
+        TuiTextfield,
+        TuiTextfieldControllerModule,
+        TuiTitle,
+    ],
+    templateUrl: './swap.component.html',
+    styleUrl: './swap.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SwapComponent {
+    protected cryptoService = inject(CryptoService);
+    protected info = toSignal(this.cryptoService.getTokens());
+    protected priceFrom = computed(() => this.getPrice(this.info(), this.chosen()[0]));
+
+    protected priceTo = computed(() => this.getPrice(this.info(), this.chosen()[1]));
+
+    protected titles = ['From', 'To'];
+
+    protected from = signal('0');
+    protected to = signal('0');
+    protected chosen = signal(['eth', 'btc']);
+    protected openedDialog = [false, false];
+    protected val = 0;
+
+    protected newToken(index: number, title: string): void {
+        this.chosen()[index] = title;
+        this.openedDialog[index] = false;
+    }
+
+    protected toNum(val: string): number {
+        return Number(val);
+    }
+
+    protected getPrice(data: PricesData[] | undefined, title: string): number {
+        for (const token of data ?? []) {
+            if (token && token.symbol.toLowerCase() === title.toLowerCase()) {
+                return Number(token.priceUsd);
+            }
+        }
+
+        return 0;
+    }
+
+    protected newSwapFrom(): void {
+        this.to.set(
+            ((this.priceFrom() * Number(this.from())) / this.priceTo()).toFixed(2),
+        );
+    }
+
+    protected newSwapTo(): void {
+        this.from.set(
+            ((this.priceTo() * Number(this.to())) / this.priceFrom()).toFixed(2),
+        );
+    }
+}

apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.html

@@ -1,5 +1,6 @@
 <div class="column">
     <div class="row">
         <lmb-prices class="grow" />
+        <lmb-swap class="grow" />
     </div>
 </div>

apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.ts

@@ -2,11 +2,12 @@ import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 import {PricesComponent} from './components/prices/prices.component';
+import {SwapComponent} from './components/swap/swap.component';
 
 @Component({
     standalone: true,
     selector: 'lmb-crypto',
-    imports: [CommonModule, PricesComponent],
+    imports: [CommonModule, PricesComponent, SwapComponent],
     templateUrl: './crypto.component.html',
     styleUrl: './crypto.component.less',
     changeDetection: ChangeDetectionStrategy.OnPush,

apps/taiga-lumbermill/src/services/crypto.service.ts

@@ -34,12 +34,11 @@ export const CryptoApi = new InjectionToken('', {
 })
 export class CryptoService {
     private readonly http = inject(HttpClient);
-    private readonly API = inject(CryptoApi);
 
-    public info$: Observable<ResponseData> = this.getTokens();
+    private readonly API = inject(CryptoApi);
 
-    public getTokens(): Observable<ResponseData> {
-        return this.http.get<ResponseData>(this.API);
+    public getTokens(): Observable<PricesData[]> {
+        return this.http.get<ResponseData>(this.API).pipe(map((info) => info.data));
     }
 
     public getHistory(id: string, interval: string): Observable<HistoryData[]> {