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

Merge pull request #1167 from mempool/simon/asset-icons

Browse Source 
Display Liquid asset icons
This commit is contained in:
wiz 2022-01-20 16:11:12 +00:00 committed by GitHub
commit 2b1367afd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/components/asset/asset.component.html
View File

@ -35,13 +35,6 @@
<td i18n="asset.issuance-tx|Liquid Asset issuance TX">Issuance TX</td> <td i18n="asset.issuance-tx|Liquid Asset issuance TX">Issuance TX</td>
<td><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></td> <td><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></td>
</tr> </tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr *ngIf="isNativeAsset && asset.chain_stats.peg_in_amount"> <tr *ngIf="isNativeAsset && asset.chain_stats.peg_in_amount">
<td i18n="asset.pegged-in|Liquid Asset pegged-in amount">Pegged in</td> <td i18n="asset.pegged-in|Liquid Asset pegged-in amount">Pegged in</td>
<td>{{ formatAmount(asset.chain_stats.peg_in_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td> <td>{{ formatAmount(asset.chain_stats.peg_in_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
@ -69,6 +62,13 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="w-100 d-block d-md-none"></div>
<div class="col icon-holder">
<img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
<ng-template #defaultIcon>
<fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" size="10x"></fa-icon>
</ng-template>
</div>
</div> </div>
</div> </div>

14
frontend/src/app/components/asset/asset.component.scss
View File

@ -50,3 +50,17 @@ h1 {
} }
} }
.assetIcon {
max-height: 150px;
margin: 25px;
@media (min-width: 768px) {
max-height: 300px;
margin: 0;
}
}
.icon-holder {
display: flex;
justify-content: center;
align-items: center;
}

1
frontend/src/app/components/asset/asset.component.ts
View File

@ -32,6 +32,7 @@ export class AssetComponent implements OnInit, OnDestroy {
isNativeAsset = false; isNativeAsset = false;
error: any; error: any;
mainSubscription: Subscription; mainSubscription: Subscription;
imageError = false;
totalConfirmedTxCount = 0; totalConfirmedTxCount = 0;
loadedConfirmedTxCount = 0; loadedConfirmedTxCount = 0;