4658b47007
This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
145 lines
6.1 KiB
HTML
145 lines
6.1 KiB
HTML
<div class="container-xl">
|
|
<h1 style="float: left;">Asset</h1>
|
|
<a [routerLink]="['/asset/' | relativeUrl, assetString]" style="line-height: 56px; margin-left: 10px;">
|
|
<span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
|
|
<span class="d-none d-lg-inline">{{ assetString }}</span>
|
|
</a>
|
|
<app-clipboard [text]="assetString"></app-clipboard>
|
|
<br>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<ng-template [ngIf]="!isLoadingAsset && !error && assetContract">
|
|
<div class="box">
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td i18n="asset.name|Liquid Asset name">Name</td>
|
|
<td>{{ assetContract[2] }} ({{ assetContract[1] }})</td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="asset.precision|Liquid Asset precision">Precision</td>
|
|
<td>{{ assetContract[3] }}</td>
|
|
</tr>
|
|
<tr *ngIf="!isNativeAsset && assetContract[0]">
|
|
<td i18n="asset.issuer|Liquid Asset issuer">Issuer</td>
|
|
<td><a target="_blank" href="{{ 'http://' + assetContract[0] }}">{{ assetContract[0] }}</a></td>
|
|
</tr>
|
|
<tr *ngIf="!isNativeAsset">
|
|
<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>
|
|
</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">
|
|
<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>
|
|
</tr>
|
|
<tr *ngIf="isNativeAsset">
|
|
<td i18n="asset.pegged-out|Liquid Asset pegged-out amount">Pegged out</td>
|
|
<td>{{ formatAmount(asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
|
|
</tr>
|
|
<tr *ngIf="!isNativeAsset">
|
|
<td i18n="asset.issued-amount|Liquid Asset issued amount">Issued amount</td>
|
|
<td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.issued_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="asset.burned-amount|Liquid Asset burned amount">Burned amount</td>
|
|
<td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
|
|
</tr>
|
|
<tr *ngIf="!isNativeAsset">
|
|
<td i18n="asset.circulating-amount|Liquid Asset circulating amount">Circulating amount</td>
|
|
<td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.issued_amount - asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
|
|
</tr>
|
|
<tr *ngIf="isNativeAsset">
|
|
<td i18n="asset.circulating-amount|Liquid Asset circulating amount">Circulating amount</td>
|
|
<td>{{ formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset">Peg In/Out and Burn Transactions</ng-template><ng-template #defaultAsset>In/Out and Burn Transactions</ng-template></h2>
|
|
|
|
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
|
|
|
|
<div class="text-center">
|
|
<ng-template [ngIf]="isLoadingTransactions">
|
|
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
|
|
<span class="skeleton-loader"></span>
|
|
</div>
|
|
|
|
<div class="header-bg box">
|
|
<div class="row" style="height: 107px;">
|
|
<div class="col-sm">
|
|
<span class="skeleton-loader"></span>
|
|
</div>
|
|
<div class="w-100 d-block d-md-none"></div>
|
|
<div class="col-sm">
|
|
<span class="skeleton-loader"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template [ngIf]="isLoadingAsset && !error">
|
|
|
|
<ng-template #loadingTmpl>
|
|
<div class="col">
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="2"><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<div class="box">
|
|
<div class="row">
|
|
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
|
|
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template [ngIf]="error">
|
|
<div class="text-center">
|
|
<span i18n="asset.error.loading-asset-data">Error loading asset data.</span>
|
|
<br>
|
|
<i>{{ error.error }}</i>
|
|
</div>
|
|
</ng-template>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<ng-template #confidentialTd>
|
|
<td i18n="shared.confidential">Confidential</td>
|
|
</ng-template>
|