wallet/src/app/ipo/ipo.component.html at ac8b598e7bc940ba972cd0a1439d626b816df188 · qubic/wallet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<ng-container *transloco="let t">
    <div class="content_container">
        <h1>{{ t("ipoComponent.title") }}</h1>
        <div class="description">
            {{ t("ipoComponent.description") }}
        </div>
        <div *ngIf="ipoContracts.length <= 0 && !loaded">
            <div class="loading">
                <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
            </div>
            <div class="text-center">
                {{ t("general.loading") }}
            </div>
        </div>
        <div *ngIf="ipoContracts.length <= 0  && loaded">
            <mat-card class="proposal-card">
                <mat-card-content>
                    {{ t("ipoComponent.noIpos") }}
                </mat-card-content>
            </mat-card>
        </div>
        <div *ngIf="ipoContracts.length > 0">
            <mat-card class="proposal-card word-break" *ngFor="let p of ipoContracts">
                <mat-card-content>
                    <h2>{{ p.name }}</h2>
                    <button [routerLink]="['/ipo/participate/', p.index]" mat-raised-button color="primary">
                        <mat-icon>payments</mat-icon> {{ t("ipoComponent.buttons.place-bid") }}
                    </button>
                    <button mat-raised-button class="refresh-btn" (click)="init()" [disabled]="refreshing">
                        <mat-spinner *ngIf="refreshing" class="refresh-spinner" diameter="20"></mat-spinner>
                        <span class="refresh-content" [class.hidden]="refreshing">
                            <mat-icon>refresh</mat-icon>
                            <span>{{ t("ipoComponent.buttons.refresh") }}</span>
                        </span>
                    </button>
                    <button mat-raised-button (click)="openStats(p.index)">
                        <mat-icon>query_stats</mat-icon> {{ t("ipoComponent.livPanelHint") }}
                    </button>
                    <div *ngIf="ipoContracts">
                        <h3>{{ t("ipoComponent.yourShares") }}</h3>
                        <div class="status-valid">({{ t("ipoComponent.statusValid", {tick: getBidOverview(p.index).tick | number: '1.0-0'}) }})</div>
                        <ng-container *ngIf="getMyShares(p.index) as shares">
                            <div *ngIf="shares.length === 0" class="empty-state">
                                {{ t("ipoComponent.noShares") }}
                            </div>
                            <div *ngFor="let bid of shares" class="transaction-list">
                                <strong>{{ bid.bids.length }} ({{ getTotalPrice(bid.bids) | number: '1.0-0'}} {{
                                    t("general.currency") }})</strong> {{ t("ipoComponent.sharesFor") }}
                                <div [class]="{copy: true, ownId: isOwnId(bid.computorId)}">
                                    <span matTooltip="{{ t('general.copy.tooltip') }}"
                                        [cdkCopyToClipboard]="bid.computorId">{{ bid.computorId }} {{
                                        getSeedName(bid.computorId) }}</span>
                                </div>
                            </div>
                        </ng-container>
                    </div>
                    <div>
                        <h3>{{ t("ipoComponent.yourBids") }}</h3>

                        <ng-container *ngIf="getContractBids(p.index) as bids">
                            <div *ngIf="bids.length === 0" class="empty-state">
                                {{ t("ipoComponent.noBids") }}
                            </div>

                            <div *ngFor="let transaction of bids" class="transaction-list">
                                <span class="status-icon">
                                    <mat-icon *ngIf="transaction.status == 'Success'" class="trx-executed"
                                        matTooltip="{{ t('balanceComponent.transactions.status.executed.tooltip') }}">check_circle_outline</mat-icon>
                                    <mat-icon *ngIf="transaction.status == 'Failed'" class="transfer-failed"
                                        matTooltip="{{ t('balanceComponent.transactions.status.failure.tooltip') }}">highlight_off</mat-icon>
                                    <mat-icon *ngIf="transaction.status != 'Success' && transaction.status != 'Failed'" class="trx-pending"
                                        matTooltip="{{ t('balanceComponent.transactions.status.pending.tooltip') }}">schedule</mat-icon>
                                </span>
                                <div class="center">
                                    <div class="trans-amount currency-value">{{ transaction.price | number: '1.0-0' }}
                                        {{
                                        t("general.currency") }} / {{ transaction.quantity | number: '1.0-0' }} {{
                                        t("ipoComponent.bidStatus.pcs") }} </div>
                                    <div class="trans-date"> Tick: {{ transaction.targetTick | number: '1.0-0' }} </div>
                                </div>
                                <div class="address-group">
                                    <div class="send-receive-indicator">
                                        <mat-icon class="send"
                                            matTooltip="{{ t('balanceComponent.transactions.send.tooltip') }}"
                                            *ngIf="isOwnId(transaction.sourceId)">arrow_downward</mat-icon>
                                        <mat-icon class="receive"
                                            matTooltip="{{ t('balanceComponent.transactions.receive.tooltip') }}"
                                            *ngIf="isOwnId(transaction.destId)">arrow_upward</mat-icon>
                                    </div>
                                    <div>
                                        <div [class]="{copy: true, ownId: isOwnId(transaction.sourceId)}">
                                            From: <span matTooltip="{{ t('general.copy.tooltip') }}"
                                                [cdkCopyToClipboard]="transaction.sourceId">{{
                                                getAddressDisplayName(transaction.sourceId) }}</span>
                                        </div>
                                        <div [class]="{copy: true, ownId: isOwnId(transaction.destId)}">
                                            To: <span matTooltip="{{ t('general.copy.tooltip') }}"
                                                [cdkCopyToClipboard]="transaction.destId">{{
                                                getAddressDisplayName(transaction.destId) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="trans-dates">
                                    <span *ngIf="transaction.created">{{ transaction.created | dateTime }}</span>
                                </div>
                            </div>
                        </ng-container>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</ng-container>