diff --git a/backend/actions/address_detail.js b/backend/actions/address_detail.js index df4b24b..324e422 100644 --- a/backend/actions/address_detail.js +++ b/backend/actions/address_detail.js @@ -38,8 +38,9 @@ app.get('/api/address/:address', async (req, res) => { txs = sortTxs(txs); txs.forEach(updateAddress); let balances = []; - for (let [, scriptStats] of Object.entries(stats.chain_stats)) { + for (let [colorId, scriptStats] of Object.entries(stats.chain_stats)) { balances.push({ + colorId: colorId, count: scriptStats.tx_count, received: scriptStats.funded_txo_sum, sent: scriptStats.spent_txo_sum, diff --git a/backend/actions/color_list.js b/backend/actions/color_list.js index 52910f2..7808c38 100644 --- a/backend/actions/color_list.js +++ b/backend/actions/color_list.js @@ -16,7 +16,6 @@ app.get('/api/colors', async (req, res) => { try { const colors = await rest.color.list(lastSeenColorId); - console.log(colors); res.json({ colors: colors }); } catch (err) { logger.error(`Error retrieving colors. Error Message - ${err.message}`); diff --git a/frontend/src/app/address/address.page.html b/frontend/src/app/address/address.page.html index 5676203..af06534 100644 --- a/frontend/src/app/address/address.page.html +++ b/frontend/src/app/address/address.page.html @@ -15,39 +15,73 @@ id="copy-icon" > -
- - Balance: {{ balanced | asTpc}} TPC -
- - - - Total Received: - {{ received | asTpc }} - - - Total Sent: - {{ sent | asTpc }} - - - No. Transactions: - {{ txCount }} - -
-

Transactions

+

Balances

+ + + + Color ID + Total Balance + Total Received + Total Sent + No. Transactions + + + + {{ color['colorId'] | formatColorId }} + {{ color['balanced'] }} + {{ color['received'] }} + {{ color['sent'] }} + {{ color['count'] }} + + + {{ color['colorId'] | formatColorId }} + {{ color['balanced'] | asTpc }} + {{ color['received'] | asTpc }} + {{ color['sent'] | asTpc }} + {{ color['count'] }} + + +
+
+ + +

Transactions

 @@ -80,60 +114,94 @@ {{ tx.status?.block_height || "" }} {{ tx.status?.block_time | momentFromNow }} - - {{ input.prevout?.scriptpubkey_uncolored_address }} - - IN - COINBASE - - - {{ input.prevout?.value | asTpc}} - + + +
+ {{ input.prevout?.scriptpubkey_uncolored_address }} +
+ + + IN + COINBASE + + + + + {{ input.prevout?.value }} + COIN + + + + {{ input.prevout?.value | asTpc}} + TPC + + + + + COIN - - TPC - - + > + Color ID: {{ input.prevout?.colorId | formatColorId }} + + + + - - {{ output.scriptpubkey_uncolored_address }} - - OUT - - {{ output.value | asTpc }} - + + {{ output.scriptpubkey_uncolored_address }} + + OUT + + + + {{ output.value }} + COIN + + + + {{ output.value | asTpc }} + TPC + + + + + COIN - - TPC - - + > + Color ID: {{ output.colorId | formatColorId }} + + + +
diff --git a/frontend/src/app/address/address.page.scss b/frontend/src/app/address/address.page.scss index 7dcfc5d..8cf1941 100644 --- a/frontend/src/app/address/address.page.scss +++ b/frontend/src/app/address/address.page.scss @@ -19,6 +19,20 @@ ion-content { font-weight: 500; } +.table-title { + @media (max-width: 539px) { + font-size: 12px; + margin: 17px 10px 10px; + } + + @media (min-width: 540px) { + font-size: 27px; + margin: 0px 10px 20px; + } + + font-weight: 500; +} + #block-hash-bg { display: flex; flex-wrap: wrap; @@ -79,11 +93,6 @@ ion-content { color: #aaaaaa; } -.table-border-bottom { - border-bottom: 1px solid #f6f6f6; - padding: 10px 10px; -} - .pt-10 { padding-top: 10px; } @@ -91,9 +100,3 @@ ion-content { .text-wrap { word-break: break-all; } - -.ellipsis { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} diff --git a/frontend/src/app/address/address.page.ts b/frontend/src/app/address/address.page.ts index daaf2fa..701b48b 100644 --- a/frontend/src/app/address/address.page.ts +++ b/frontend/src/app/address/address.page.ts @@ -16,9 +16,7 @@ export class AddressPage implements OnInit { block = {}; qrcode = 'tapyrus:'; address = ''; - balanced: number; - received: number; - sent: number; + colors = []; transactions = []; txids = new Set(); copied = false; @@ -71,10 +69,7 @@ export class AddressPage implements OnInit { .getAddressInfo(this.address, this.lastSeenTxid) .subscribe( data => { - this.received = data['balances'][0]['received'] || 0; - this.sent = data['balances'][0]['sent'] || 0; - this.balanced = data['balances'][0]['balanced'] || 0; - this.txCount = data['balances'][0]['count'] || 0; + this.colors = data['balances']; data['tx']['txs'] .filter(tx => !this.txids.has(tx.txid)) .forEach(tx => { @@ -99,4 +94,11 @@ export class AddressPage implements OnInit { this.statusMsg = null; this.detailMsg = null; } + + isColored(colorId) { + return ( + colorId !== + '000000000000000000000000000000000000000000000000000000000000000000' + ); + } } diff --git a/frontend/src/app/backend.service.ts b/frontend/src/app/backend.service.ts index e6b7074..d9ca29b 100644 --- a/frontend/src/app/backend.service.ts +++ b/frontend/src/app/backend.service.ts @@ -11,7 +11,12 @@ export class BackendService { constructor(private http: HttpClient, private configService: ConfigService) {} getBlocks(page: number, perPage: number): Observable { - return this.request('/api/blocks'); + return this.request( + '/api/blocks', + new HttpParams({ + fromObject: { page: page.toString(), perPage: perPage.toString() } + }) + ); } searchBlock(query: string): Observable { @@ -108,7 +113,7 @@ export class BackendService { private request(url: string, params?: HttpParams): Observable { return this.getConfig().pipe( mergeMap((config: Config) => { - return this.http.get(`${config.backendUrl}/${url}`, { params }); + return this.http.get(`${config.backendUrl}${url}`, { params }); }) ); } diff --git a/frontend/src/app/block/block.page.html b/frontend/src/app/block/block.page.html index 574973c..a8899ce 100644 --- a/frontend/src/app/block/block.page.html +++ b/frontend/src/app/block/block.page.html @@ -164,24 +164,42 @@ No Inputs (Newly Generated Coins)
- {{ input.prevout.scriptpubkey_uncolored_address }} - {{ input.prevout.value | asTpc }} - + {{ input.prevout.scriptpubkey_uncolored_address + }} + + + {{ input.prevout.value }} + COIN + + + + {{ input.prevout.value | asTpc }} + TPC + + + + + COIN - - TPC - + > + Color ID: {{ input.prevout.colorId | formatColorId }} + + +
@@ -204,22 +222,37 @@
- {{ vout.scriptpubkey_uncolored_address }} - {{ vout.value | asTpc }} - + {{ vout.scriptpubkey_uncolored_address }} + + + {{ vout.value }} + COIN + + + + {{ vout.value | asTpc }} + TPC + + + + + COIN - - TPC - + > + Color ID: {{ vout.colorId | formatColorId }} + +
diff --git a/frontend/src/app/blocks/blocks.page.scss b/frontend/src/app/blocks/blocks.page.scss index f1a9821..a26d8f2 100644 --- a/frontend/src/app/blocks/blocks.page.scss +++ b/frontend/src/app/blocks/blocks.page.scss @@ -21,11 +21,6 @@ ion-content { } } -.table-border-bottom { - border-bottom: 1px solid #f6f6f6; - padding: 10px 10px; -} - .display-none-max-md { @media (max-width: 768px) { display: none; diff --git a/frontend/src/app/color/color.page.html b/frontend/src/app/color/color.page.html index a733731..be7f73a 100644 --- a/frontend/src/app/color/color.page.html +++ b/frontend/src/app/color/color.page.html @@ -59,60 +59,120 @@

Transactions

{{ tx.status?.block_height || "" }} {{ tx.status?.block_time | momentFromNow }} - - {{ input.prevout?.scriptpubkey_uncolored_address }} - - IN - COINBASE + + {{ input.prevout?.scriptpubkey_uncolored_address }} - - - {{ input.prevout?.value | asTpc}} - + IN + COINBASE + + + + + {{ input.prevout?.value }} + COIN + + + + {{ input.prevout?.value }} + COIN + + + {{ input.prevout?.value | asTpc}} + TPC + + + + + COIN - - TPC - - + > + Color ID: {{ input.prevout.colorId | formatColorId }} + + + + + Color ID: {{ input.prevout.colorId | formatColorId }} + + + + - - {{ output.scriptpubkey_uncolored_address }} - - OUT - - {{ output.value | asTpc }} - + + {{ output.scriptpubkey_uncolored_address }} + + OUT + + + + {{ output.value }} + COIN + + + + {{ output.value }} + COIN + + + {{ output.value | asTpc }} + TPC + + + + + COIN - - TPC - - + > + Color ID: {{ output.colorId | formatColorId }} + + + + + Color ID: {{ output.colorId | formatColorId }} + + + + diff --git a/frontend/src/app/colors/colors.page.scss b/frontend/src/app/colors/colors.page.scss index 9e27b98..48bebe1 100644 --- a/frontend/src/app/colors/colors.page.scss +++ b/frontend/src/app/colors/colors.page.scss @@ -24,14 +24,3 @@ ion-content { font-size: 14px; color: #aaaaaa; } - -.table-border-bottom { - border-bottom: 1px solid #f6f6f6; - padding: 10px 10px; -} - -.ellipsis { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} diff --git a/frontend/src/app/modules/sharePipe.module.ts b/frontend/src/app/modules/sharePipe.module.ts index 6688476..f48e200 100644 --- a/frontend/src/app/modules/sharePipe.module.ts +++ b/frontend/src/app/modules/sharePipe.module.ts @@ -3,9 +3,15 @@ import { CommonModule } from '@angular/common'; import { MomentFromNowPipe } from '../pipes/moment-from-now.pipe'; import { AsTpcPipe } from '../pipes/as-tpc.pipe'; import { DateFormatPipe } from '../pipes/date-format.pipe'; +import { FormatColorIdPipe } from '../pipes/format-color-id.pipe'; @NgModule({ - declarations: [MomentFromNowPipe, AsTpcPipe, DateFormatPipe], + declarations: [ + MomentFromNowPipe, + AsTpcPipe, + DateFormatPipe, + FormatColorIdPipe + ], imports: [CommonModule], - exports: [MomentFromNowPipe, AsTpcPipe, DateFormatPipe] + exports: [MomentFromNowPipe, AsTpcPipe, DateFormatPipe, FormatColorIdPipe] }) export class SharedPipeModule {} diff --git a/frontend/src/app/pipes/format-color-id.pipe.ts b/frontend/src/app/pipes/format-color-id.pipe.ts new file mode 100644 index 0000000..02ca751 --- /dev/null +++ b/frontend/src/app/pipes/format-color-id.pipe.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { Injectable } from '@angular/core'; + +@Injectable() +@Pipe({ + name: 'formatColorId', + pure: false +}) +export class FormatColorIdPipe implements PipeTransform { + transform(colorId: any, ...args: any[]): any { + if ( + colorId === + '000000000000000000000000000000000000000000000000000000000000000000' + ) { + return '(TPC)'; + } else { + return colorId; + } + } +} diff --git a/frontend/src/app/transaction/transaction.page.html b/frontend/src/app/transaction/transaction.page.html index 300b4e7..0209e9e 100644 --- a/frontend/src/app/transaction/transaction.page.html +++ b/frontend/src/app/transaction/transaction.page.html @@ -93,24 +93,42 @@ #{{ i }} - {{ vin.prevout.scriptpubkey_uncolored_address }} - - {{ vin.prevout.value | asTpc }} - COIN - - TPC + + + {{ vin.prevout.scriptpubkey_uncolored_address + }} + + + {{ vin.prevout.value }} + COIN + + + + {{ vin.prevout.value | asTpc }} + TPC + + + + + + Color ID: {{ vin.prevout.colorId | formatColorId }} + + @@ -198,21 +216,38 @@ #{{ i }} - {{ vout.scriptpubkey_uncolored_address }} - - {{vout.value | asTpc }} - COIN - - TPC + + + {{ vout.scriptpubkey_uncolored_address }} + + + {{ vout.value }} + COIN + + + + {{vout.value | asTpc }} + TPC + + + + + + Color ID: {{ vout.colorId | formatColorId }} + +