Skip to content

Commit 7023429

Browse files
adebayooriyomiadebayooriyomi
committed
Clean up Asset Detail Page
1 parent fb57823 commit 7023429

File tree

8 files changed

+456
-202
lines changed

8 files changed

+456
-202
lines changed

‎client/src/.DS_Store‎

0 Bytes
Binary file not shown.

‎client/src/views/asset-advanced-details.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import Snabbdom from "snabbdom-pragma";
2+
import { formatJson, formatAssetAmount, formatSat, formatNumber } from './util'
3+
4+
export default (asset, is_native_asset, mempool_stats, chain_stats, t) => {
5+
6+
return(
7+
<div className= "stats-table">
8+
{ is_native_asset
9+
// Native asset
10+
? [
11+
mempool_stats.peg_in_amount > 0 && <div>
12+
<div>{t`Pegged in (unconfirmed)`}</div>
13+
<div className="mono">{formatSat(mempool_stats.peg_in_amount)}</div>
14+
</div>
15+
16+
, mempool_stats.peg_out_amount > 0 && <div>
17+
<div>{t`Pegged out (unconfirmed)`}</div>
18+
<div className="mono">{formatSat(mempool_stats.peg_out_amount)}</div>
19+
</div>
20+
21+
, mempool_stats.burned_amount > 0 && <div>
22+
<div>{t`Burned (unconfirmed)`}</div>
23+
<div className="mono">{formatSat(mempool_stats.burned_amount)}</div>
24+
</div>
25+
26+
, <div>
27+
<div>{t`Peg/burn transaction count`}</div>
28+
<div className="mono">{formatNumber(chain_stats.tx_count)}</div>
29+
</div>
30+
31+
, mempool_stats.peg_out_amount > 0 && <div>
32+
<div>{t`Peg/burn transaction count (unconfirmed)`}</div>
33+
<div className="mono">{formatNumber(mempool_stats.tx_count)}</div>
34+
</div>
35+
]
36+
37+
// Issued assets
38+
: [
39+
<div>
40+
<div>{t`Issuance transaction`}</div>
41+
<div><a href={`tx/${asset.issuance_txin.txid}?input:${asset.issuance_txin.vin}&expand`}>{`${asset.issuance_txin.txid}:${asset.issuance_txin.vin}`}</a></div>
42+
</div>
43+
44+
, <div>
45+
<div>{t`Included in Block`}</div>
46+
<div>{ asset.status.confirmed
47+
? <a href={`block/${asset.status.block_hash}`} className="mono">{asset.status.block_hash}</a>
48+
: t`Unconfirmed`
49+
}</div>
50+
</div>
51+
52+
, asset.contract_hash && <div>
53+
<div>{t`Contract hash`}</div>
54+
<div className="mono">{asset.contract_hash}</div>
55+
</div>
56+
57+
, asset.contract && <div>
58+
<div>{t`Contract JSON`}</div>
59+
<div className="mono contract-json">{formatJson(asset.contract)}</div>
60+
</div>
61+
62+
, <div>
63+
<div>{t`Decimal places`}</div>
64+
<div>{asset.precision || 0}</div>
65+
</div>
66+
67+
, <div>
68+
<div>{t`Number of issuances`}</div>
69+
<div>{chain_stats.issuance_count}</div>
70+
</div>
71+
72+
, mempool_stats.issuance_count > 0 && <div>
73+
<div>{t`Number of issuances (unconfirmed)`}</div>
74+
<div>{mempool_stats.issuance_count}</div>
75+
</div>
76+
77+
, mempool_stats.issued_amount > 0 && <div>
78+
<div>{t`Issued amount (unconfirmed)`}</div>
79+
<div>{formatAssetAmount(mempool_stats.issued_amount, asset.precision, t)}</div>
80+
</div>
81+
82+
, mempool_stats.burned_amount > 0 && <div>
83+
<div>{t`Burned amount (unconfirmed)`}</div>
84+
<div>{formatAssetAmount(mempool_stats.burned_amount, asset.precision, t)}</div>
85+
</div>
86+
87+
, <div>
88+
<div>{t`Reissuance tokens created`}</div>
89+
<div>{chain_stats.reissuance_tokens == null ? t`Confidential`
90+
: chain_stats.reissuance_tokens === 0 ? t`None`
91+
: formatNumber(chain_stats.reissuance_tokens) }</div>
92+
</div>
93+
94+
, chain_stats.burned_reissuance_tokens > 0 && <div>
95+
<div>{t`Reissuance tokens burned`}</div>
96+
<div>{formatNumber(chain_stats.burned_reissuance_tokens)}</div>
97+
</div>
98+
99+
, mempool_stats.burned_reissuance_tokens > 0 && <div>
100+
<div>{t`Reissuance tokens burned (unconfirmed)`}</div>
101+
<div>{formatNumber(mempool_stats.burned_reissuance_tokens)}</div>
102+
</div>
103+
104+
]
105+
}
106+
</div>
107+
)
108+
}

‎client/src/views/asset-issuance-history.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import Snabbdom from "snabbdom-pragma";
2+
import { formatTime, formatAssetAmount } from './util'
3+
4+
export default (assetTxs, chain_stats, asset, t) => {
5+
6+
//Calculated AssetTx
7+
let calculatedAssetTx = []
8+
9+
if(assetTxs != null){
10+
// Supply Starts at Zero
11+
let supply = 0
12+
// Sort AssetTxs by block_time and Calculate Supply Change / Total Supply
13+
assetTxs.sort((a,b) => (a.status.block_time > b.status.block_time) ? 1 : ((b.status.block_time > a.status.block_time) ? -1 : 0))
14+
assetTxs.map(tx => {
15+
let calTxObj = {}
16+
calTxObj.txid = tx.txid
17+
calTxObj.block_height = tx.status.block_height
18+
calTxObj.block_time = formatTime(tx.status.block_time)
19+
20+
// Find all Issuance and add them to Supply
21+
tx.vin.map(vinTx => {
22+
if("issuance" in vinTx){
23+
calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount(("+ " + vinTx.issuance.assetamount), asset.precision, t)
24+
calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply + vinTx.issuance.assetamount), asset.precision, t)
25+
supply = (supply + vinTx.issuance.assetamount)
26+
}
27+
})
28+
29+
// Find all Burn Transactions and Remove them from Supply
30+
tx.vout.map(voutTx => {
31+
if(voutTx.scriptpubkey_type === "op_return"){
32+
if(voutTx.value > 0){
33+
calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount(("- " + voutTx.value), asset.precision, t)
34+
calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply - voutTx.value), asset.precision, t)
35+
supply = (supply - voutTx.value)
36+
}
37+
}
38+
})
39+
calculatedAssetTx.push(calTxObj)
40+
})
41+
}
42+
// Reverse Calculated AssetTx to Display Newest to Older
43+
calculatedAssetTx.reverse()
44+
45+
46+
47+
return(
48+
<div>
49+
{ assetTxs === null ? <p>{t`No Issuance History`}</p>
50+
: <div className="assets-table">
51+
<div className="assets-table-row header">
52+
<div className="assets-table-cell">{t`Block`}</div>
53+
<div className="assets-table-cell">{t`Time`}</div>
54+
<div className="assets-table-cell right-align">{t`Supply Change`}</div>
55+
<div className="assets-table-cell right-align">{t`Total Supply`}</div>
56+
</div>
57+
{calculatedAssetTx.map(tx =>
58+
<div className="assets-table-link-row">
59+
<a className="assets-table-row asset-data" href={`tx/${tx.txid}`}>
60+
<div className="assets-table-cell highlighted-text" data-label={t`Block`}>{tx.block_height}</div>
61+
<div className="assets-table-cell" data-label={t`Time`}>{tx.block_time}</div>
62+
<div className="assets-table-cell right-align asset-id" data-label={t`Supply Change`}>{tx.supplyChange}</div>
63+
<div className="assets-table-cell right-align" data-label={t`Total Supply`}>{tx.totalSupply}</div>
64+
</a>
65+
</div>
66+
)}
67+
</div>
68+
}
69+
</div>
70+
)
71+
}

‎client/src/views/asset-summary.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import Snabbdom from "snabbdom-pragma";
2+
import { formatAssetAmount, formatSat } from './util'
3+
4+
export default (is_native_asset, asset, assetIcons, nativeAssetName,
5+
nativeAssetLabel, entity_type, circulating, chain_stats, is_non_reissuable, t) => {
6+
return(
7+
<div className="asset-summary">
8+
{ is_native_asset
9+
// Native asset
10+
? [
11+
<div>
12+
<div className="asset-logo-name">
13+
<div className="asset-logo">
14+
<div>
15+
{assetIcons === null ? "" :
16+
assetIcons[`${asset.asset_id}`] === undefined ?
17+
<div className="asset-icon-placeholder"></div> :
18+
<img src={`data:image/png;base64,${assetIcons[`${asset.asset_id}`]}`} className="asset-icon"/>}
19+
</div>
20+
</div>
21+
<div className="asset-name">{nativeAssetName}<br/><span>{nativeAssetLabel}</span></div>
22+
</div>
23+
<div className="asset-label-text">
24+
<div className="asset-label">{t(`Asset ID`)}</div>
25+
<div className="asset-text">{asset.asset_id}
26+
{ process.browser && <div className="code-button">
27+
<div className="code-button-btn" role="button" data-clipboardCopy={asset.asset_id}></div>
28+
</div> }
29+
</div>
30+
</div>
31+
<div className="asset-label-text">
32+
<div className="asset-label">{t(`Total Active Supply`)}</div>
33+
<div className="asset-text">{formatSat(circulating)}</div>
34+
</div>
35+
<div className="asset-label-text">
36+
<div className="asset-label">{t(`Total Amount Burned`)}</div>
37+
<div className="asset-text">{formatSat(chain_stats.burned_amount)}</div>
38+
</div>
39+
<div className="asset-label-text">
40+
<div className="asset-label">{t`Pegged in`}</div>
41+
<div className="asset-text">{formatSat(chain_stats.peg_in_amount)}</div>
42+
</div>
43+
<div className="asset-label-text">
44+
<div className="asset-label">{t`Pegged out`}</div>
45+
<div className="asset-text">{formatSat(chain_stats.peg_out_amount)}</div>
46+
</div>
47+
</div>
48+
]
49+
// Issued assets
50+
: [
51+
<div>
52+
<div className="asset-logo-name">
53+
<div className="asset-logo">
54+
<div>
55+
{assetIcons === null ? "" :
56+
assetIcons[`${asset.asset_id}`] === undefined ?
57+
<div className="asset-icon-placeholder"></div> :
58+
<img src={`data:image/png;base64,${assetIcons[`${asset.asset_id}`]}`} className="asset-icon"/>}
59+
</div>
60+
</div>
61+
<div className="asset-name">{asset.name}<br/><span>{asset.ticker}</span></div>
62+
</div>
63+
<div className="asset-label-text">
64+
<div className="asset-label">{t(`Issuer`)}</div>
65+
<div className="asset-text">{asset.entity[entity_type]}</div>
66+
</div>
67+
<div className="asset-label-text">
68+
<div className="asset-label">{t(`Asset ID`)}</div>
69+
<div className="asset-text">{asset.asset_id}
70+
{ process.browser && <div className="code-button">
71+
<div className="code-button-btn" role="button" data-clipboardCopy={asset.asset_id}></div>
72+
</div> }
73+
</div>
74+
</div>
75+
<div className="asset-label-text">
76+
<div className="asset-label">{t(`Total Active Supply`)}</div>
77+
<div className="asset-text">{ circulating == null ? t`Confidential`
78+
: formatAssetAmount(circulating, asset.precision, t) }</div>
79+
</div>
80+
<div className="asset-label-text">
81+
<div className="asset-label">{t(`Total Amount Burned`)}</div>
82+
<div className="asset-text">{formatAssetAmount(chain_stats.burned_amount, asset.precision, t)}</div>
83+
</div>
84+
<div className="asset-label-text">
85+
<div className="asset-label">{t(`Reissuable`)}</div>
86+
<div className="asset-text">{ is_non_reissuable ? t`No` : t`Yes` }</div>
87+
</div>
88+
<div className="asset-label-text">
89+
<div className="asset-label">{t(`Reissuable Token for Asset`)}</div>
90+
<div className="asset-text">{asset.reissuance_token}</div>
91+
</div>
92+
</div>
93+
]
94+
}
95+
</div>
96+
)
97+
}

0 commit comments

Comments
 (0)