Skip to content

Commit

Permalink
Merge pull request #176 from chaintope/fix/coin_page
Browse files Browse the repository at this point in the history 
Display color id on block/address/transaction page
  • Loading branch information
@Yamaguchi
Yamaguchi authored May 10, 2024
2 parents ce8a683 + 89d9245 commit 42461cb
Show file tree
Hide file tree
Showing 15 changed files with 459 additions and 232 deletions.
3 changes: 2 additions & 1 deletion backend/actions/address_detail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion backend/actions/color_list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand Down
214 changes: 141 additions & 73 deletions frontend/src/app/address/address.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,73 @@
id="copy-icon"
></ion-icon>
</div>
<div id="block-hash-bg" class="col-5">
<strong id="block-hash-text">
<strong>Balance:</strong> {{ balanced | asTpc}} TPC</strong
>
</div>
</ion-col>
<ion-col size="4" class="ion-text-end">
<qrcode [qrdata]="qrcode" [errorCorrectionLevel]="'L'"></qrcode>
</ion-col>
</ion-row>
<ion-item-divider class="mt-0 pt-0"></ion-item-divider>
<ion-grid class="font-14 text-color">
<ion-row>
<ion-col size="3" class="font-w500">Total Received:</ion-col>
<ion-col size="3" class="ion-text-right"
>{{ received | asTpc }}</ion-col
>
</ion-row>
<ion-row>
<ion-col size="3" class="font-w500">Total Sent:</ion-col>
<ion-col size="3" class="ion-text-right">{{ sent | asTpc }}</ion-col>
</ion-row>
<ion-row>
<ion-col size="3" class="font-w500">No. Transactions:</ion-col>
<ion-col size="3" class="ion-text-right">{{ txCount }}</ion-col>
</ion-row>
</ion-grid>
</div>

<div class="bg-white ion-padding ion-margin-top">
<ion-row>
<ion-col size="12">
<p id="block-header-text">Transactions</p>
<p class="table-title">Balances</p>
</ion-col>
</ion-row>
<ion-row class="table-header">
<ion-col size="4" class="pt-10">Color ID</ion-col>
<ion-col size="2" class="pt-10">Total Balance</ion-col>
<ion-col size="2" class="pt-10">Total Received</ion-col>
<ion-col size="2" class="pt-10">Total Sent</ion-col>
<ion-col size="2" class="pt-10">No. Transactions</ion-col>
</ion-row>
<ion-row
class="text-color table-border-bottom"
*ngFor="let color of colors"
>
<ng-container *ngIf="isColored(color['colorId'])">
<ion-col
size="4"
class="pt-10 link-color cursor-pointer"
(click)="goToCoin(color['colorId'])"
>{{ color['colorId'] | formatColorId }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['balanced'] }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['received'] }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['sent'] }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['count'] }}</ion-col
>
</ng-container>
<ng-container *ngIf="!isColored(color['colorId'])">
<ion-col size="4" class="pt-10"
>{{ color['colorId'] | formatColorId }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['balanced'] | asTpc }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['received'] | asTpc }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['sent'] | asTpc }}</ion-col
>
<ion-col size="2" class="pt-10 ion-text-right"
>{{ color['count'] }}</ion-col
>
</ng-container>
</ion-row>
</div>
<div class="bg-white ion-padding ion-margin-top">
<ion-row>
<ion-col size="12">
<p class="table-title">Transactions</p>
</ion-col>
</ion-row>
<ion-row class="table-header">
Expand Down Expand Up @@ -80,60 +114,94 @@
<ion-col size="1">{{ tx.status?.block_height || "" }}</ion-col>
<ion-col size="1">{{ tx.status?.block_time | momentFromNow }}</ion-col>
<ion-col size="4">
<ion-row *ngFor="let input of tx.vin">
<ion-col
size="6"
(click)="!input.prevout?.scriptpubkey_uncolored_address || goToAddressPage(input.prevout?.scriptpubkey_uncolored_address)"
[ngClass]="{'link-color cursor-pointer ellipsis': input.prevout?.scriptpubkey_uncolored_address}"
>{{ input.prevout?.scriptpubkey_uncolored_address }}</ion-col
>
<ion-col size="2">
<ion-badge *ngIf="!input.is_coinbase" color="primary"
>IN</ion-badge
>
<ion-badge *ngIf="input.is_coinbase" color="warning"
>COINBASE</ion-badge
>
</ion-col>
<ion-col
size="4"
class="ion-text-right"
*ngIf="input.is_coinbase"
></ion-col>
<ion-col size="4" class="ion-text-right" *ngIf="!input.is_coinbase"
>{{ input.prevout?.value | asTpc}}
<span
*ngIf="!!input.prevout.colorId"
class="link-color cursor-pointer"
<ng-container *ngFor="let input of tx.vin">
<ion-row>
<ion-col size="6">
<div
(click)="!input.prevout?.scriptpubkey_uncolored_address || goToAddressPage(input.prevout?.scriptpubkey_uncolored_address)"
[ngClass]="{'link-color cursor-pointer ellipsis': input.prevout?.scriptpubkey_uncolored_address}"
>
{{ input.prevout?.scriptpubkey_uncolored_address }}
</div>
</ion-col>
<ion-col size="2">
<ion-badge *ngIf="!input.is_coinbase" color="primary"
>IN</ion-badge
>
<ion-badge *ngIf="input.is_coinbase" color="warning"
>COINBASE</ion-badge
>
</ion-col>
<ion-col size="4" class="ion-text-right">
<ng-container *ngIf="input.is_coinbase"> </ng-container>
<ng-container
*ngIf="!input.is_coinbase && !!input.prevout.colorId"
>
{{ input.prevout?.value }}
<span
class="link-color cursor-pointer"
(click)="goToCoin(input.prevout.colorId)"
>COIN
</span>
</ng-container>
<ng-container
*ngIf="!input.is_coinbase && !input.prevout.colorId"
>
{{ input.prevout?.value | asTpc}}
<span>TPC</span>
</ng-container>
</ion-col>
</ion-row>
<ion-row *ngIf="!!input.prevout.colorId">
<ion-col
size="8"
class="ion-margin-bottom link-color cursor-pointer font-14 ellipsis"
(click)="goToCoin(input.prevout.colorId)"
>COIN
</span>
<span *ngIf="!input.prevout.colorId">TPC</span>
</ion-col>
</ion-row>
>
Color ID: {{ input.prevout?.colorId | formatColorId }}
</ion-col>
</ion-row>
<ion-row class="table-border-bottom"></ion-row>
</ng-container>
</ion-col>
<ion-col size="4">
<ion-row *ngFor="let output of tx.vout">
<ion-col
size="6"
(click)="!output.scriptpubkey_uncolored_address || goToAddressPage(output.scriptpubkey_uncolored_address)"
[ngClass]="{'link-color cursor-pointer ellipsis': output.scriptpubkey_uncolored_address}"
>{{ output.scriptpubkey_uncolored_address }}</ion-col
>
<ion-col size="2">
<ion-badge color="danger">OUT</ion-badge>
</ion-col>
<ion-col size="4" class="ion-text-right"
>{{ output.value | asTpc }}
<span
*ngIf="!!output.colorId"
class="link-color cursor-pointer"
<ng-container *ngFor="let output of tx.vout">
<ion-row>
<ion-col
size="6"
(click)="!output.scriptpubkey_uncolored_address || goToAddressPage(output.scriptpubkey_uncolored_address)"
[ngClass]="{'link-color cursor-pointer ellipsis': output.scriptpubkey_uncolored_address}"
>{{ output.scriptpubkey_uncolored_address }}</ion-col
>
<ion-col size="2">
<ion-badge color="danger">OUT</ion-badge>
</ion-col>
<ion-col size="4" class="ion-text-right">
<ng-container *ngIf="!!output.colorId">
{{ output.value }}
<span
class="link-color cursor-pointer"
(click)="goToCoin(output.colorId)"
>COIN
</span>
</ng-container>
<ng-container *ngIf="!output.colorId">
{{ output.value | asTpc }}
<span>TPC</span>
</ng-container>
</ion-col>
</ion-row>
<ion-row *ngIf="!!output.colorId">
<ion-col
size="8"
class="ion-margin-bottom link-color cursor-pointer font-14 ellipsis"
(click)="goToCoin(output.colorId)"
>COIN
</span>
<span *ngIf="!output.colorId">TPC</span>
</ion-col>
</ion-row>
>
Color ID: {{ output.colorId | formatColorId }}
</ion-col>
</ion-row>
<ion-row class="table-border-bottom"></ion-row>
</ng-container>
</ion-col>
</ion-row>
</div>
Expand Down
25 changes: 14 additions & 11 deletions frontend/src/app/address/address.page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -79,21 +93,10 @@ ion-content {
color: #aaaaaa;
}

.table-border-bottom {
border-bottom: 1px solid #f6f6f6;
padding: 10px 10px;
}

.pt-10 {
padding-top: 10px;
}

.text-wrap {
word-break: break-all;
}

.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
16 changes: 9 additions & 7 deletions frontend/src/app/address/address.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 => {
Expand All @@ -99,4 +94,11 @@ export class AddressPage implements OnInit {
this.statusMsg = null;
this.detailMsg = null;
}

isColored(colorId) {
return (
colorId !==
'000000000000000000000000000000000000000000000000000000000000000000'
);
}
}
9 changes: 7 additions & 2 deletions frontend/src/app/backend.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ export class BackendService {
constructor(private http: HttpClient, private configService: ConfigService) {}

getBlocks(page: number, perPage: number): Observable<any> {
return this.request('/api/blocks');
return this.request(
'/api/blocks',
new HttpParams({
fromObject: { page: page.toString(), perPage: perPage.toString() }
})
);
}

searchBlock(query: string): Observable<any> {
Expand Down Expand Up @@ -108,7 +113,7 @@ export class BackendService {
private request(url: string, params?: HttpParams): Observable<any> {
return this.getConfig().pipe(
mergeMap((config: Config) => {
return this.http.get(`${config.backendUrl}/${url}`, { params });
return this.http.get(`${config.backendUrl}${url}`, { params });
})
);
}
Expand Down
Loading

0 comments on commit 42461cb

Please sign in to comment.