machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5190 from mempool/simon/address-page-updates

Browse Source 
Address page ux updates
This commit is contained in:
wiz 2024-06-22 17:53:00 +09:00 committed by GitHub
commit 9394572ec3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app/components/address/address.component.html
View File

@ -3,13 +3,13 @@
<h1 i18n="shared.address">Address</h1> <h1 i18n="shared.address">Address</h1>
<div class="tx-link"> <div class="tx-link">
<app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]"> <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
<app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard> <span class="qrSpan" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
<span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true" [style.font-size]="isMobile ? '18px' : '12px'"></fa-icon> <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true" [style.font-size]="isMobile ? '18px' : '12px'"></fa-icon>
<div class="qr-wrapper" [hidden]="!showQR"> <div class="qr-wrapper" [hidden]="!showQR">
<app-qrcode [size]="200" [data]="addressString"></app-qrcode> <app-qrcode [size]="200" [data]="addressString"></app-qrcode>
</div> </div>
</span> </span>
<app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard>
</app-truncate> </app-truncate>
</div> </div>
</div> </div>
@ -237,43 +237,48 @@
<ng-template #balanceRow> <ng-template #balanceRow>
<tr> <tr>
<td i18n="address.balance">Balance</td> <td i18n="address.confirmed-balance">Confirmed balance</td>
<td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td> <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #pendingBalanceRow> <ng-template #pendingBalanceRow>
<tr> <tr>
<td i18n="address.unconfirmed-balance" class="font-italic">unconfirmed balance</td> <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
<td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td> <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #utxoRow> <ng-template #utxoRow>
<tr> <tr>
<td i18n="address.utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">UTXOs</td> <td i18n="address.confirmed-utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">Confirmed UTXOs</td>
<td>{{ chainStats.utxos }}</td> <td>{{ chainStats.utxos }}</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #pendingUtxoRow> <ng-template #pendingUtxoRow>
<tr> <tr>
<td i18n="address.unconfirmed-utxos" class="font-italic">unconfirmed UTXOs</td> <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
<td class="font-italic">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td> <td class="font-italic">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #volumeRow> <ng-template #volumeRow>
<tr> <tr>
<td i18n="address.volume">Volume</td> <td i18n="address.total-received">Total received</td>
<td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.volume + mempoolStats.volume"></app-amount></td> <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #typeRow> <ng-template #typeRow>
<tr> <tr>
<td i18n="address.type">Type</td> <td i18n="address.type">Type</td>
<td class="wrap-cell"><app-address-type [address]="addressTypeInfo"></app-address-type><app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels></td> <td class="wrap-cell">
<span placement="bottom" class="badge badge-primary">
<app-address-type [address]="addressTypeInfo"></app-address-type>
</span>
<app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels>
</td>
</tr> </tr>
</ng-template> </ng-template>

6
frontend/src/app/components/address/address.component.scss
View File

@ -11,6 +11,12 @@
z-index: 99; z-index: 99;
} }
.qrSpan {
position: relative;
cursor: pointer;
padding-left: 0.4rem;
}
.fiat { .fiat {
display: block; display: block;
@media (min-width: 992px){ @media (min-width: 992px){

4
frontend/src/app/components/address/address.component.ts
View File

@ -80,8 +80,8 @@ class AddressStats implements ChainStats {
return this.funded_txo_sum - this.spent_txo_sum; return this.funded_txo_sum - this.spent_txo_sum;
} }
get volume(): number { get totalReceived(): number {
return this.funded_txo_sum + this.spent_txo_sum; return this.funded_txo_sum;
} }
get utxos(): number { get utxos(): number {