RanchiMall/floscout
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added UI for sub transactions

Browse Source
This commit is contained in:
sairaj mote 2023-07-13 03:55:59 +05:30
parent d8727050c7
commit edefd5ec97
4 changed files with 128 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/main.css
View File

@ -1108,6 +1108,15 @@ theme-toggle {
min-width: 12rem; min-width: 12rem;
} }
#transaction_page {
display: grid;
gap: 3rem;
}
#transaction_page .card {
margin: 0;
min-width: 12rem;
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.margin, .margin,
.page { .page {
@ -1127,15 +1136,6 @@ theme-toggle {
#page_header { #page_header {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
#transaction_page {
display: grid;
gap: 0 1.5rem;
grid-template-columns: 40% 60%;
grid-template-areas: "header header" ". .";
}
#transaction_page .head {
grid-area: header;
}
.transaction { .transaction {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
css/main.scss
View File

@ -728,17 +728,17 @@ header.grid-2 {
grid-area: logo; grid-area: logo;
color: inherit; color: inherit;
} }
.app-brand{ .app-brand {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
align-items: center; align-items: center;
.icon{ .icon {
height: 1.7rem; height: 1.7rem;
width: 1.7rem; width: 1.7rem;
} }
} }
.app-name{ .app-name {
&__company{ &__company {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -1007,6 +1007,14 @@ theme-toggle {
min-width: 12rem; min-width: 12rem;
} }
} }
#transaction_page {
display: grid;
gap: 3rem;
.card {
margin: 0;
min-width: 12rem;
}
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.margin, .margin,
.page { .page {
@ -1031,15 +1039,6 @@ theme-toggle {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
#transaction_page { #transaction_page {
display: grid;
gap: 0 1.5rem;
grid-template-columns: 40% 60%;
grid-template-areas:
"header header"
". .";
.head {
grid-area: header;
}
} }
.transaction { .transaction {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;

192
index.html
View File

@ -472,12 +472,12 @@
router.addRoute('block', async state => { router.addRoute('block', async state => {
const [blockId] = state.wildcards const [blockId] = state.wildcards
if (!blockId) return; if (!blockId) return;
try{ try {
let [blockInfo, blockTxs] = await Promise.all([getBlockInfo(blockId), getBlockTransactions(blockId)]) let [blockInfo, blockTxs] = await Promise.all([getBlockInfo(blockId), getBlockTransactions(blockId)])
renderElem(getRef("page_container"), html`${render.blockPage(blockInfo)}`); renderElem(getRef("page_container"), html`${render.blockPage(blockInfo)}`);
getRef("page_title").textContent = 'Block' getRef("page_title").textContent = 'Block'
renderTransactions('block_transaction_container', blockTxs) renderTransactions('block_transaction_container', blockTxs)
}catch(e){ } catch (e) {
console.error(e) console.error(e)
renderElem(getRef("page_container"), html`${render.errorPage(e)}`); renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
} }
@ -509,7 +509,7 @@
const [status, txInfo] = await getTxInfo(txId); const [status, txInfo] = await getTxInfo(txId);
if (status) { if (status) {
renderElem(getRef("page_container"), html`${render.transactionPage(txInfo)}`); renderElem(getRef("page_container"), html`${render.transactionPage(txInfo)}`);
getRef("page_title").textContent = "transaction"; getRef("page_title").textContent = "Transaction";
} else { } else {
renderElem(getRef("page_container"), html`${render.errorPage(txInfo)}`); renderElem(getRef("page_container"), html`${render.errorPage(txInfo)}`);
@ -752,14 +752,20 @@
}, },
transactionPage(obj) { transactionPage(obj) {
console.log(obj) console.log(obj)
let { type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations, nftHash } = obj; let { type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations, nftHash, subTransactions, time } = obj;
if (type == 'smartContractPays' || type == ' smartContractPays') { switch (type.trim()) {
name = '' case 'smartContractPays':
case 'smartContractPays':
name = ''
break
case 'nftIncorporation':
type = 'NFT Incorporation'
break
case 'nft transfer':
type = 'NFT Transfer'
break
} }
if (type.trim() === 'nftIncorporation') const renderedSubTransactions = subTransactions?.map(tx => render.offChainTransferCard({ ...tx, hideUnnecessary: true }))
type = 'NFT Incorporation'
else if (type.trim() === 'nft transfer')
type = 'NFT Transfer'
return html` return html`
<div id="transaction_page" class="page"> <div id="transaction_page" class="page">
@ -771,44 +777,52 @@
<h5 class="label">Transaction ID</h5> <h5 class="label">Transaction ID</h5>
<sm-copy value=${hash} clip-text></sm-copy> <sm-copy value=${hash} clip-text></sm-copy>
</div> </div>
<div class="card grid gap-1-5 align-start align-self-start"> <div class="flex flex-wrap gap-1">
<div class="flex flex-direction-column"> <div class="card grid gap-1-5">
<time class="label">${getFormattedTime(time)}</time>
<div class="flex flex-direction-column">
<h5 class="label">Sender</h5>
<sm-copy value=${sender}>
<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a>
</sm-copy>
</div>
${receiver ? html`
<div class="flex flex-direction-column">
<h5 class="label">Receiver</h5>
<sm-copy value=${receiver}>
<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
</sm-copy>
</div>
`: ''}
${amount ? html`
<div class="flex flex-direction-column">
<h5 class="label">Amount</h5>
<h4>${formatAmount(amount, 'usd')}</h4>
</div>
`: ''}
</div>
<div class="card flex-1">
<h5 class="label">FLO Data</h5>
<p class="wrap-around">${floData}</p>
<h5 class="label">Block</h5> <h5 class="label">Block</h5>
<a href=${`#/block/${blockHeight}`} class="block-height">${blockHeight}</a> <a href=${`#/block/${blockHeight}`} class="block-height">${blockHeight}</a>
<h5 class="label">Block Confirmations</h5>
<h4>${confirmations}</h4>
${nftHash ? html`
<h5 class="label">NFT hash</h5>
<sm-copy value=${nftHash} clip-text></sm-copy>
`: ''}
</div> </div>
<div class="flex flex-direction-column"> </div>
<h5 class="label">Sender</h5> ${renderedSubTransactions ? html`
<sm-copy value=${sender}> <div class="grid gap-1">
<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a> <div class="grid gap-0-3">
</sm-copy> <h4>Sub Transactions</h4>
</div> <p>These are Off-chain transactions that are triggered by above transaction</p>
${receiver ? html`
<div class="flex flex-direction-column">
<h5 class="label">Receiver</h5>
<sm-copy value=${receiver}>
<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
</sm-copy>
</div>
`: ''
}
${amount ? html`
<div class="flex flex-direction-column">
<h5 class="label">Amount</h5>
<h4>${formatAmount(amount, 'usd')}</h4>
</div> </div>
`: '' <ul class="grid gap-1">${renderedSubTransactions}</ul>
} </div>
</div> `: ''}
<div class="card">
<h5 class="label">FLO Data</h5>
<p class="wrap-around">${floData}</p>
<h5 class="label">Block Confirmations</h5>
<h4>${confirmations}</h4>
${nftHash ? html`
<h5 class="label">NFT hash</h5>
<sm-copy value=${nftHash} clip-text></sm-copy>
`: ''}
</div>
</div> </div>
`; `;
}, },
@ -1374,14 +1388,14 @@
`; `;
}, },
offChainTransferCard(transferDetails) { offChainTransferCard(transferDetails) {
const { tokenAmount, transactionTrigger, tokenIdentification, contractName, senderAddress, receiverAddress, time, type } = transferDetails; const { tokenAmount, transactionTrigger, tokenIdentification, contractName, senderAddress, receiverAddress, time, type, hideUnnecessary } = transferDetails;
return html` return html`
<li class="transaction"> <li class="transaction">
<svg class="icon" viewBox="0 0 64 64"> <title>transfer</title> <polyline points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03"/> </svg> <svg class="icon" viewBox="0 0 64 64"> <title>transfer</title> <polyline points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03"/> </svg>
<div class="contract-type"> <div class="contract-type">
<div class="flex align-center gap-1"> <div class="flex align-center gap-1">
<h5 class="label">Token transfer</h5> <h5 class="label">Token transfer</h5>
<div class="badge">Off-chain</div> ${hideUnnecessary ? html`` : html`<div class="badge">Off-chain</div>`}
</div> </div>
<a href=${`#/token/${tokenIdentification}`} class=""><b>${tokenIdentification}</b></a> <a href=${`#/token/${tokenIdentification}`} class=""><b>${tokenIdentification}</b></a>
</div> </div>
@ -1405,13 +1419,15 @@
<h5 class="label">Amount</h5> <h5 class="label">Amount</h5>
<h4>${tokenAmount} ${tokenIdentification}</h4> <h4>${tokenAmount} ${tokenIdentification}</h4>
</div> </div>
<div class="flex align-center space-between flex-wrap gap-1"> ${hideUnnecessary ? html`` : html`
<div class="flex flex-direction-column"> <div class="flex align-center space-between flex-wrap gap-1">
<h5 class="label">Transfer trigger ID</h5> <div class="flex flex-direction-column">
<sm-copy value=${transactionTrigger} clip-text></sm-copy> <h5 class="label">Transfer trigger ID</h5>
<sm-copy value=${transactionTrigger} clip-text></sm-copy>
</div>
<a href=${`#/transaction/${transactionTrigger}`} class="button button--small button--colored">View details</a>
</div> </div>
<a href=${`#/transaction/${transactionTrigger}`} class="button button--small button--colored">View details</a> `}
</div>
</div> </div>
</li>`; </li>`;
} }
@ -1817,42 +1833,46 @@
try { try {
const transaction = await fetchJson(`${floGlobals.tokenApiUrl}/api/v2/transactionDetails/${thisTx}`) const transaction = await fetchJson(`${floGlobals.tokenApiUrl}/api/v2/transactionDetails/${thisTx}`)
console.log(transaction) console.log(transaction)
if (transaction.result === 'error') { if (transaction.result === 'error')
return [false, transaction.description] return [false, transaction.description]
} else { let {
let { floData,
floData, tokenAmount,
tokenAmount, tokenIdentification,
tokenIdentification, type,
type, nftHash,
nftHash, blockheight,
blockheight, vin,
vin, vout,
vout, confirmations,
confirmations, transferType,
transferType, senderAddress,
senderAddress, receiverAddress,
receiverAddress, txid,
txid onChain,
} = transaction; subTransactions,
if (type == 'smartContractPays') { time
tokenAmount = '-' } = transaction;
} if (type == 'smartContractPays') {
return [ tokenAmount = '-'
true, {
type: `${transferType || ''} ${type}`,
name: tokenIdentification,
blockHeight: blockheight,
amount: tokenAmount,
sender: senderAddress,
receiver: receiverAddress,
floData,
hash: txid,
confirmations,
nftHash
}
]
} }
return [
true, {
type: `${transferType || ''} ${type}`,
name: tokenIdentification,
blockHeight: blockheight,
amount: tokenAmount,
sender: senderAddress,
receiver: receiverAddress,
floData,
hash: txid,
confirmations,
nftHash,
onChain,
subTransactions,
time
}
]
} }
catch (err) { catch (err) {
console.error(err) console.error(err)