Asset detail page clean up #253
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import Snabbdom from "snabbdom-pragma"; | ||
| import { formatJson, formatAssetAmount, formatSat, formatNumber } from './util' | ||
|
|
||
| export default (asset, is_native_asset, mempool_stats, chain_stats, t) => { | ||
|
|
||
| return( | ||
| <div className= "stats-table"> | ||
| { is_native_asset | ||
| // Native asset | ||
| ? [ | ||
| mempool_stats.peg_in_amount > 0 && <div> | ||
| <div>{t`Pegged in (unconfirmed)`}</div> | ||
| <div className="mono">{formatSat(mempool_stats.peg_in_amount)}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.peg_out_amount > 0 && <div> | ||
| <div>{t`Pegged out (unconfirmed)`}</div> | ||
| <div className="mono">{formatSat(mempool_stats.peg_out_amount)}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.burned_amount > 0 && <div> | ||
| <div>{t`Burned (unconfirmed)`}</div> | ||
| <div className="mono">{formatSat(mempool_stats.burned_amount)}</div> | ||
| </div> | ||
|
|
||
| , <div> | ||
| <div>{t`Peg/burn transaction count`}</div> | ||
| <div className="mono">{formatNumber(chain_stats.tx_count)}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.peg_out_amount > 0 && <div> | ||
| <div>{t`Peg/burn transaction count (unconfirmed)`}</div> | ||
| <div className="mono">{formatNumber(mempool_stats.tx_count)}</div> | ||
| </div> | ||
| ] | ||
|
|
||
| // Issued assets | ||
| : [ | ||
| <div> | ||
| <div>{t`Issuance transaction`}</div> | ||
| <div><a href={`tx/${asset.issuance_txin.txid}?input:${asset.issuance_txin.vin}&expand`}>{`${asset.issuance_txin.txid}:${asset.issuance_txin.vin}`}</a></div> | ||
| </div> | ||
|
|
||
| , <div> | ||
| <div>{t`Included in Block`}</div> | ||
| <div>{ asset.status.confirmed | ||
| ? <a href={`block/${asset.status.block_hash}`} className="mono">{asset.status.block_hash}</a> | ||
| : t`Unconfirmed` | ||
| }</div> | ||
| </div> | ||
|
|
||
| , asset.contract_hash && <div> | ||
| <div>{t`Contract hash`}</div> | ||
| <div className="mono">{asset.contract_hash}</div> | ||
| </div> | ||
|
|
||
| , asset.contract && <div> | ||
| <div>{t`Contract JSON`}</div> | ||
| <div className="mono contract-json">{formatJson(asset.contract)}</div> | ||
| </div> | ||
|
|
||
| , <div> | ||
| <div>{t`Decimal places`}</div> | ||
| <div>{asset.precision || 0}</div> | ||
| </div> | ||
|
|
||
| , <div> | ||
| <div>{t`Number of issuances`}</div> | ||
| <div>{chain_stats.issuance_count}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.issuance_count > 0 && <div> | ||
| <div>{t`Number of issuances (unconfirmed)`}</div> | ||
| <div>{mempool_stats.issuance_count}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.issued_amount > 0 && <div> | ||
| <div>{t`Issued amount (unconfirmed)`}</div> | ||
| <div>{formatAssetAmount(mempool_stats.issued_amount, asset.precision, t)}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.burned_amount > 0 && <div> | ||
| <div>{t`Burned amount (unconfirmed)`}</div> | ||
| <div>{formatAssetAmount(mempool_stats.burned_amount, asset.precision, t)}</div> | ||
| </div> | ||
|
|
||
| , <div> | ||
| <div>{t`Reissuance tokens created`}</div> | ||
| <div>{chain_stats.reissuance_tokens == null ? t`Confidential` | ||
| : chain_stats.reissuance_tokens === 0 ? t`None` | ||
| : formatNumber(chain_stats.reissuance_tokens) }</div> | ||
| </div> | ||
|
|
||
| , chain_stats.burned_reissuance_tokens > 0 && <div> | ||
| <div>{t`Reissuance tokens burned`}</div> | ||
| <div>{formatNumber(chain_stats.burned_reissuance_tokens)}</div> | ||
| </div> | ||
|
|
||
| , mempool_stats.burned_reissuance_tokens > 0 && <div> | ||
| <div>{t`Reissuance tokens burned (unconfirmed)`}</div> | ||
| <div>{formatNumber(mempool_stats.burned_reissuance_tokens)}</div> | ||
| </div> | ||
|
|
||
| ] | ||
| } | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import Snabbdom from "snabbdom-pragma"; | ||
| import { formatTime, formatAssetAmount } from './util' | ||
|
|
||
| export default (assetTxs, chain_stats, asset, t) => { | ||
|
|
||
| const getCalculatedAssetTx = () => { | ||
| // Supply Starts at Zero | ||
| let supply = 0 | ||
| // Sort AssetTxs by block_time and Calculate Supply Change / Total Supply | ||
| assetTxs.sort((a,b) => (a.status.block_time > b.status.block_time) ? 1 : ((b.status.block_time > a.status.block_time) ? -1 : 0)) | ||
| let calAssetTx = assetTxs.map(tx => { | ||
| let calTxObj = {} | ||
| calTxObj.txid = tx.txid | ||
| calTxObj.block_height = tx.status.block_height | ||
| calTxObj.block_time = formatTime(tx.status.block_time) | ||
|
|
||
| // Find all Issuance and add them to Supply | ||
| tx.vin.forEach(vinTx => { | ||
| if("issuance" in vinTx && vinTx.issuance.asset_id === asset.asset_id){ | ||
| calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : `+ ${formatAssetAmount((vinTx.issuance.assetamount), asset.precision, t).text}` | ||
| calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply + vinTx.issuance.assetamount), asset.precision, t) | ||
| supply = (supply + vinTx.issuance.assetamount) | ||
| } | ||
| }) | ||
|
|
||
| // Find all Burn Transactions and Remove them from Supply | ||
| tx.vout.forEach(voutTx => { | ||
| if(voutTx.scriptpubkey_type === "op_return" && voutTx.asset === asset.asset_id){ | ||
| if(voutTx.value > 0){ | ||
| calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : `- ${formatAssetAmount((voutTx.value), asset.precision, t).text}` | ||
| calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply - voutTx.value), asset.precision, t) | ||
| supply = (supply - voutTx.value) | ||
| } | ||
| } | ||
| }) | ||
| return calTxObj | ||
| }) | ||
|
|
||
| // Reverse Calculated AssetTx to Display Newest to Older | ||
| return calAssetTx.reverse() | ||
| } | ||
|
There was a problem hiding this comment. You could consider deriving |
||
|
|
||
| let calculatedAssetTx = assetTxs === null ? "" : getCalculatedAssetTx() | ||
|
|
||
|
|
||
| return( | ||
| <div> | ||
| { assetTxs === null ? <p>{t`No Issuance History`}</p> | ||
|
There was a problem hiding this comment. A Better to show nothing (or more ideally, a loading indicator) rather than the user seeing "No Issuance History" flashing for a moment and disappearing. |
||
| : <div className="assets-table"> | ||
| <div className="assets-table-row header"> | ||
| <div className="assets-table-cell">{t`Block`}</div> | ||
| <div className="assets-table-cell">{t`Time`}</div> | ||
| <div className="assets-table-cell right-align">{t`Supply Change`}</div> | ||
| <div className="assets-table-cell right-align">{t`Total Supply`}</div> | ||
| </div> | ||
| {calculatedAssetTx.map(tx => | ||
| <div className="assets-table-link-row"> | ||
| <a className="assets-table-row asset-data" href={`tx/${tx.txid}`}> | ||
| <div className="assets-table-cell highlighted-text" data-label={t`Block`}>{tx.block_height}</div> | ||
| <div className="assets-table-cell" data-label={t`Time`}>{tx.block_time}</div> | ||
| <div className="assets-table-cell right-align asset-id" data-label={t`Supply Change`}>{tx.supplyChange}</div> | ||
| <div className="assets-table-cell right-align" data-label={t`Total Supply`}>{tx.totalSupply}</div> | ||
| </a> | ||
| </div> | ||
| )} | ||
| </div> | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import Snabbdom from "snabbdom-pragma"; | ||
| import { formatAssetAmount, formatSat } from './util' | ||
|
|
||
| export default (is_native_asset, asset, assetIcons, nativeAssetName, | ||
| nativeAssetLabel, entity_type, circulating, chain_stats, is_non_reissuable, t) => { | ||
| return( | ||
| <div className="asset-summary"> | ||
| { is_native_asset | ||
| // Native asset | ||
| ? [ | ||
| <div> | ||
| <div className="asset-logo-name"> | ||
| <div className="asset-logo"> | ||
| <div> | ||
| {assetIcons === null ? "" : | ||
| assetIcons[`${asset.asset_id}`] === undefined ? | ||
| <div className="asset-icon-placeholder"></div> : | ||
| <img src={`data:image/png;base64,${assetIcons[`${asset.asset_id}`]}`} className="asset-icon"/>} | ||
| </div> | ||
| </div> | ||
| <div className="asset-name">{nativeAssetName}<br/><span>{nativeAssetLabel}</span></div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Asset ID`)}</div> | ||
| <div className="asset-text">{asset.asset_id} | ||
| { process.browser && <div className="code-button"> | ||
| <div className="code-button-btn" role="button" data-clipboardCopy={asset.asset_id}></div> | ||
| </div> } | ||
| </div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Total Active Supply`)}</div> | ||
| <div className="asset-text">{formatSat(circulating)}</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Total Amount Burned`)}</div> | ||
| <div className="asset-text">{formatSat(chain_stats.burned_amount)}</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t`Pegged in`}</div> | ||
| <div className="asset-text">{formatSat(chain_stats.peg_in_amount)}</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t`Pegged out`}</div> | ||
| <div className="asset-text">{formatSat(chain_stats.peg_out_amount)}</div> | ||
| </div> | ||
| </div> | ||
| ] | ||
| // Issued assets | ||
| : [ | ||
| <div> | ||
| <div className="asset-logo-name"> | ||
| <div className="asset-logo"> | ||
| <div> | ||
| {assetIcons === null ? "" : | ||
| assetIcons[`${asset.asset_id}`] === undefined ? | ||
| <div className="asset-icon-placeholder"></div> : | ||
| <img src={`data:image/png;base64,${assetIcons[`${asset.asset_id}`]}`} className="asset-icon"/>} | ||
| </div> | ||
| </div> | ||
| <div className="asset-name">{asset.name}<br/><span>{asset.ticker}</span></div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Issuer`)}</div> | ||
| <div className="asset-text">{asset.entity[entity_type]}</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Asset ID`)}</div> | ||
| <div className="asset-text">{asset.asset_id} | ||
| { process.browser && <div className="code-button"> | ||
| <div className="code-button-btn" role="button" data-clipboardCopy={asset.asset_id}></div> | ||
| </div> } | ||
| </div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Total Active Supply`)}</div> | ||
| <div className="asset-text">{ circulating == null ? t`Confidential` | ||
| : formatAssetAmount(circulating, asset.precision, t) }</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Total Amount Burned`)}</div> | ||
| <div className="asset-text">{formatAssetAmount(chain_stats.burned_amount, asset.precision, t)}</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Reissuable`)}</div> | ||
| <div className="asset-text">{ is_non_reissuable ? t`No` : t`Yes` }</div> | ||
| </div> | ||
| <div className="asset-label-text"> | ||
| <div className="asset-label">{t(`Reissuable Token for Asset`)}</div> | ||
| <div className="asset-text">{asset.reissuance_token}</div> | ||
| </div> | ||
| </div> | ||
| ] | ||
| } | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The transactions are already sorted with newest first, if you want oldest first you can just
reverse()it.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried "assetTxs.reverse()" It wasn't working that's why I used ".sort"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wasn't working how? It didn't reverse the array?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It didn't reverse the array. I tried console.log(assetTxs) and assetTxs.reverse() got the same array. No changes. :(