diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index c57fc9750..73a5f9365 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ import { StatisticsComponent } from './components/statistics/statistics.componen import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component'; import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component'; import { AssetComponent } from './components/asset/asset.component'; +import { AssetsComponent } from './assets/assets.component'; const routes: Routes = [ { @@ -37,10 +38,6 @@ const routes: Routes = [ path: 'mempool-block/:id', component: MempoolBlockComponent }, - { - path: 'asset/:id', - component: AssetComponent - }, ], }, { @@ -56,6 +53,14 @@ const routes: Routes = [ children: [], component: AddressComponent }, + { + path: 'asset/:id', + component: AssetComponent + }, + { + path: 'assets', + component: AssetsComponent, + }, ], }, { diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1af136245..a3744d1fa 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -47,6 +47,7 @@ import { SeoService } from './services/seo.service'; import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component'; import { AssetComponent } from './components/asset/asset.component'; import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe'; +import { AssetsComponent } from './assets/assets.component'; @NgModule({ declarations: [ @@ -84,6 +85,7 @@ import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubke MempoolGraphComponent, AssetComponent, ScriptpubkeyTypePipe, + AssetsComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/assets/assets.component.html b/frontend/src/app/assets/assets.component.html new file mode 100644 index 000000000..9163c9e0f --- /dev/null +++ b/frontend/src/app/assets/assets.component.html @@ -0,0 +1,61 @@ +
+

Registered assets

+
+ +
+ + + + + + + + + + + + + + + + + + + +
NameTickerIssuer domainAsset IDIssuance TX
{{ asset.name }}{{ asset.ticker }}{{ asset.entity.domain }}{{ asset.asset_id | shortenString : 13 }} {{ asset.issuance_txin.txid | shortenString : 13 }}
+ + + + + + + + + + + + + + + + + + + + + +
NameTickerIssuer domainAsset IDIssuance TX
+ + + + +
+ Error loading assets data. +
+ {{ error.error }} +
+ + +
+ +
\ No newline at end of file diff --git a/frontend/src/app/assets/assets.component.scss b/frontend/src/app/assets/assets.component.scss new file mode 100644 index 000000000..2cfc390fb --- /dev/null +++ b/frontend/src/app/assets/assets.component.scss @@ -0,0 +1,6 @@ +.td-name { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} \ No newline at end of file diff --git a/frontend/src/app/assets/assets.component.spec.ts b/frontend/src/app/assets/assets.component.spec.ts new file mode 100644 index 000000000..ed39b7122 --- /dev/null +++ b/frontend/src/app/assets/assets.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AssetsComponent } from './assets.component'; + +describe('AssetsComponent', () => { + let component: AssetsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AssetsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AssetsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/assets/assets.component.ts b/frontend/src/app/assets/assets.component.ts new file mode 100644 index 000000000..8d3e6abda --- /dev/null +++ b/frontend/src/app/assets/assets.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core'; +import { AssetsService } from '../services/assets.service'; +import { environment } from 'src/environments/environment'; + +@Component({ + selector: 'app-assets', + templateUrl: './assets.component.html', + styleUrls: ['./assets.component.scss'] +}) +export class AssetsComponent implements OnInit { + nativeAssetId = environment.nativeAssetId; + + isLoading = true; + error: any; + + assets: any; + + constructor( + private assetsService: AssetsService, + ) { } + + ngOnInit() { + this.assetsService.getAssetsJson$() + .subscribe((assets) => { + this.assets = Object.values(assets); + this.assets.push({ + name: 'Liquid Bitcoin', + ticker: 'L-BTC', + asset_id: this.nativeAssetId, + }); + this.assets = this.assets.sort((a: any, b: any) => a.name.localeCompare(b.name)); + this.isLoading = false; + }, + (error) => { + console.log(error); + this.error = error; + this.isLoading = false; + }); + } + +} diff --git a/frontend/src/app/components/asset/asset.component.html b/frontend/src/app/components/asset/asset.component.html index 4c24ca1b1..bb4984302 100644 --- a/frontend/src/app/components/asset/asset.component.html +++ b/frontend/src/app/components/asset/asset.component.html @@ -24,11 +24,11 @@ Precision {{ assetContract[3] }} - + Issuer {{ assetContract[0] }} - + Issuance tx {{ asset.issuance_txin.txid | shortenString : 13 }} @@ -38,17 +38,29 @@
- - - + + + - + + + + + - + - + + + + + + + + +
Circulating amount{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) / 100000000 | number: '1.0-' + assetContract[3] }}
Pegged in{{ asset.chain_stats.peg_in_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
Pegged out{{ asset.chain_stats.peg_out_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
Issued amount{{ asset.chain_stats.issued_amount / 100000000 | number: '1.0-' + assetContract[3] }}{{ asset.chain_stats.issued_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
Burned amount{{ asset.chain_stats.burned_amount / 100000000 | number: '1.0-' + assetContract[3] }}{{ asset.chain_stats.burned_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
Circulating amount{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
Circulating amount{{ (asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}
@@ -59,7 +71,7 @@
-

{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions

+

{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} Peg In/Out and Burn TransactionsIn/Out and Burn Transactions

@@ -86,26 +98,28 @@ + +
+ + + + + + + + + + + + +
+
+ +
-
- - - - - - - - - - - - -
-
-
- -
+ +
diff --git a/frontend/src/app/components/asset/asset.component.ts b/frontend/src/app/components/asset/asset.component.ts index 1e471f7f5..ad99233d5 100644 --- a/frontend/src/app/components/asset/asset.component.ts +++ b/frontend/src/app/components/asset/asset.component.ts @@ -19,6 +19,7 @@ import { AssetsService } from 'src/app/services/assets.service'; }) export class AssetComponent implements OnInit, OnDestroy { network = environment.network; + nativeAssetId = environment.nativeAssetId; asset: Asset; assetContract: any; @@ -26,6 +27,7 @@ export class AssetComponent implements OnInit, OnDestroy { isLoadingAsset = true; transactions: Transaction[]; isLoadingTransactions = true; + isNativeAsset = false; error: any; mainSubscription: Subscription; @@ -94,6 +96,8 @@ export class AssetComponent implements OnInit, OnDestroy { switchMap(([asset, assetsData]) => { this.asset = asset; this.assetContract = assetsData[this.asset.asset_id]; + console.log(this.assetContract); + this.isNativeAsset = asset.asset_id === this.nativeAssetId; this.updateChainStats(); this.websocketService.startTrackAsset(asset.asset_id); this.isLoadingAsset = false; diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 11e2915fb..751332775 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -21,6 +21,9 @@
  • TV view  
    • +
  • + Assets +
  • Contributors
    • diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index 4ba949633..7989f32c4 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -28,11 +28,10 @@     -
    - - Coinbase (Newly Generated Coins) - - +
    + Coinbase (Newly Generated Coins) + PEG IN + {{ vin.prevout.scriptpubkey_address | shortenString : 16 }} {{ vin.prevout.scriptpubkey_address | shortenString : 42 }} @@ -40,7 +39,7 @@
    - +
    @@ -66,7 +65,12 @@ {{ vout.scriptpubkey_address | shortenString : 42 }} - {{ vout.scriptpubkey_type | scriptpubkeyType }} + + PEG OUT + + + {{ vout.scriptpubkey_type | scriptpubkeyType }} + diff --git a/frontend/src/app/interfaces/electrs.interface.ts b/frontend/src/app/interfaces/electrs.interface.ts index f0673e04a..cfdf5d59a 100644 --- a/frontend/src/app/interfaces/electrs.interface.ts +++ b/frontend/src/app/interfaces/electrs.interface.ts @@ -37,6 +37,7 @@ export interface Vin { sequence: any; witness?: string[]; inner_witnessscript_asm?: string; + is_pegin?: boolean; } export interface Vout { @@ -45,7 +46,16 @@ export interface Vout { scriptpubkey_type: string; scriptpubkey_address: string; value: number; + valuecommitment?: number; asset?: string; + pegout?: Pegout; +} + +interface Pegout { + genesis_hash: string; + scriptpubkey: string; + scriptpubkey_asm: string; + scriptpubkey_addres: string; } export interface Status { diff --git a/frontend/src/app/services/assets.service.ts b/frontend/src/app/services/assets.service.ts index 41f3fa69a..fec37cfab 100644 --- a/frontend/src/app/services/assets.service.ts +++ b/frontend/src/app/services/assets.service.ts @@ -22,8 +22,11 @@ export class AssetsService { getAssetsMinimalJson$() { this.httpClient.get('/assets/assets.minimal.json') .subscribe((data) => { - console.log(data); this.assetsMinimal$.next(data); }); } + + getAssetsJson$() { + return this.httpClient.get('/assets/assets.json'); + } } diff --git a/frontend/sync-asset-registry.js b/frontend/sync-asset-registry.js index 71dab5d42..6813bb081 100644 --- a/frontend/sync-asset-registry.js +++ b/frontend/sync-asset-registry.js @@ -17,5 +17,3 @@ console.log('Downloading assets'); download(PATH + 'assets.json', 'https://raw.githubusercontent.com/Blockstream/asset_registry_db/master/index.json'); console.log('Downloading assets minimal'); download(PATH + 'assets.minimal.json', 'https://raw.githubusercontent.com/Blockstream/asset_registry_db/master/index.minimal.json'); -console.log('Downloading asset icons'); -download(PATH + 'asset.icons.json', 'https://raw.githubusercontent.com/Blockstream/asset_registry_db/master/icons.json');