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

Implementing contract deposits UI

Browse Source
This commit is contained in:
sairaj mote 2023-04-16 00:05:46 +05:30
parent 8ef6ed9ec4
commit dd63e06ec5
4 changed files with 136 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/main.css
View File

@ -656,9 +656,6 @@ ul {
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
.card h4 {
margin-bottom: 0.4rem;
}
.card h2 { .card h2 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -857,7 +854,6 @@ theme-toggle {
align-items: center; align-items: center;
} }
#page_header h3 { #page_header h3 {
font-weight: 500;
text-transform: capitalize; text-transform: capitalize;
} }
@ -948,7 +944,6 @@ theme-toggle {
.contract-choice { .contract-choice {
display: grid; display: grid;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
margin-bottom: 2rem;
} }
.contract-choice:last-of-type { .contract-choice:last-of-type {
margin-bottom: 0; margin-bottom: 0;
@ -1046,6 +1041,7 @@ theme-toggle {
.info-row { .info-row {
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
#participant_container { #participant_container {
@ -1097,15 +1093,19 @@ theme-toggle {
align-items: center; align-items: center;
} }
#contract_info { #contract_info {
gap: 1rem 4rem; -moz-columns: 24rem auto;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); columns: 24rem auto;
-moz-column-gap: 4rem;
column-gap: 4rem;
} }
.info-row { .info-row {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.5rem;
} }
.info-row h5 { .info-row h5 {
min-width: 11rem; min-width: 11rem;
margin-bottom: 0;
} }
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
css/main.scss
View File

@ -615,9 +615,6 @@ ul {
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
margin: 1.5rem 0; margin: 1.5rem 0;
h4 {
margin-bottom: 0.4rem;
}
h2 { h2 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -780,7 +777,6 @@ theme-toggle {
padding: 1rem 0; padding: 1rem 0;
align-items: center; align-items: center;
h3 { h3 {
font-weight: 500;
text-transform: capitalize; text-transform: capitalize;
} }
} }
@ -864,7 +860,6 @@ theme-toggle {
.contract-choice { .contract-choice {
display: grid; display: grid;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
margin-bottom: 2rem;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
@ -954,6 +949,7 @@ theme-toggle {
} }
.info-row { .info-row {
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
#participant_container { #participant_container {
display: grid; display: grid;
@ -1008,14 +1004,16 @@ theme-toggle {
align-items: center; align-items: center;
} }
#contract_info { #contract_info {
gap: 1rem 4rem; columns: 24rem auto;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); column-gap: 4rem;
} }
.info-row { .info-row {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.5rem;
h5 { h5 {
min-width: 11rem; min-width: 11rem;
margin-bottom: 0;
} }
} }
} }

202
index.html
View File

@ -53,7 +53,7 @@
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg> </svg>
</button> </button>
<h3 id="page_title"></h3> <h4 id="page_title"></h4>
</div> </div>
<main id="page_container" class="flex flex-direction-column"></main> <main id="page_container" class="flex flex-direction-column"></main>
@ -378,57 +378,73 @@
} }
}) })
router.addRoute('contract', async state => { router.addRoute('contract', async state => {
const [contractId] = state.wildcards try {
if (!contractId) return; const [contractId] = state.wildcards
// todo: load contract variable dynamically if (!contractId) return;
const contract = splitContractNameAddress(contractId); // todo: load contract variable dynamically
let [contractInfo, contractTransactions, contractParticipants] = await Promise.all([getContractInfo(contract), getContractTransactions(contract), getContractParticipants(contract)]) const contract = splitContractNameAddress(contractId);
// todo : check the type of contract & then further checks like fetching details of contractParticipant const contractInfo = await getContractInfo(contract)
renderElem(getRef("page_container"), html`${render.contractPage(contractInfo)}`); const detailsToFetch = [getContractTransactions(contract), getContractParticipants(contract)]
getRef("page_title").textContent = "Contract"; console.log(contractInfo)
if (contractInfo.contractType === 'continuos-event' && contractInfo.contractSubtype === 'tokenswap')
detailsToFetch.push(getContractDeposits(contract))
console.log(detailsToFetch)
let [contractTransactions, contractParticipants, contractDeposits] = await Promise.all(detailsToFetch)
// todo : check the type of contract & then further checks like fetching details of contractParticipant
renderElem(getRef("page_container"), html`${render.contractPage(contractInfo)}`);
getRef("page_title").textContent = "Contract";
const { contractName, contractAddress, contractType, contractSubtype, participantInfo } = contractParticipants const { contractName, contractAddress, contractType, contractSubtype, participantInfo } = contractParticipants
// append latest transactions // append latest transactions
renderTransactions('contract_transaction_container', contractTransactions) renderTransactions('contract_transaction_container', contractTransactions)
console.log(contractParticipants) console.log(contractParticipants)
switch (contractInfo.contractType) { switch (contractInfo.contractType) {
case 'one-time-event': case 'one-time-event':
let winners = [] let winners = []
for (const participant in contractParticipants) { for (const participant in contractParticipants) {
if (contractParticipants[participant].winningAmount) if (contractParticipants[participant].winningAmount)
winners.push(contractParticipants[participant]) winners.push(contractParticipants[participant])
} }
if (winners.length) { if (winners.length) {
renderElem(document.getElementById('winners_container'), html`${winners.map(winner => render.contractChoiceCard(winner))}`) renderElem(document.getElementById('winners_container'), html`${winners.map(winner => render.contractChoiceCard(winner))}`)
} else { } else {
renderElem(document.getElementById('winners_container'), html`<div>No winners found</div>`) renderElem(document.getElementById('winners_container'), html`<div>No winners found</div>`)
} }
renderElem( renderElem(
document.getElementById('participant_container'), document.getElementById('participant_container'),
html`${Object.keys(contractParticipants).map(participant => render.contractChoiceCard(contractParticipants[participant]))}` html`${Object.keys(contractParticipants).map(participant => render.contractChoiceCard(contractParticipants[participant]))}`
) )
break; break;
case 'continuos-event': case 'continuos-event':
console.log('should render continuos-event') switch (contractInfo.contractSubtype) {
switch (contractInfo.contractSubtype) { case 'tokenswap':
case 'tokenswap': renderElem(
renderElem( document.getElementById('participant_container'),
document.getElementById('participant_container'), html`${Object.keys(contractParticipants)
html`${Object.keys(contractParticipants) .map(participant => render.participantCard({
.map(participant => render.participantCard({ accepting_token: contractInfo.accepting_token,
selling_token: contractInfo.selling_token,
...contractParticipants[participant]
}))
}`
)
renderElem(
document.getElementById('deposits_container'),
html`${contractDeposits.map(deposit => render.depositCard({
...deposit,
accepting_token: contractInfo.accepting_token, accepting_token: contractInfo.accepting_token,
selling_token: contractInfo.selling_token, }))}`
...contractParticipants[participant] )
} break;
)) default:
}` break;
) }
break; break;
default: }
break; } catch (e) {
} console.log(e)
break; renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
} }
}) })
@ -827,112 +843,106 @@
${status ? html` ${status ? html`
<div class=${`status ${status}`}>${status}</div> <div class=${`status ${status}`}>${status}</div>
`: ''} `: ''}
<h3 class="uppercase">${replaceDash(contract)}</h3> <h2 class="uppercase">${replaceDash(contract)}</h2>
${userChoices ? html` ${userChoices ? html`
<h3 class="heading">User Choices</h3> <h3 class="heading">Available Choices</h3>
<ul type="circle" class="card"> <ul type="circle" class="card">
${Object.keys(userChoices).map(choice => html` ${Object.keys(userChoices).map(choice => html`
<li>${userChoices[choice]}</li> <li>${userChoices[choice]}</li>
`)} `)}
</ul> </ul>
`: ''} `: ''}
<div id="contract_info" class="card grid gap-1-5"> <div id="contract_info" class="card">
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Contract Type</h5> <h5 class="label">Contract Type</h5>
<h4>${replaceDash(contractType)}</h4> <h4>${replaceDash(contractType)}</h4>
</div> </div>
${contractSubtype ? html` ${contractSubtype ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Contract Subtype</h5> <h5 class="label">Contract Subtype</h5>
<h4>${replaceDash(contractSubtype)}</h4> <h4>${replaceDash(contractSubtype)}</h4>
</div> </div>
` : ''} ` : ''}
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Contract Address</h5> <h5 class="label">Contract Address</h5>
<a href=${`#/address/${contractAddress}`} class="address wrap-around">${contractAddress}</a> <a href=${`#/address/${contractAddress}`} class="address wrap-around">${contractAddress}</a>
</div> </div>
${expiration ? html` ${expiration ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Expiration</h5> <h5 class="label">Expiration</h5>
<h4>${expiration}</h4> <h4>${expiration}</h4>
</div> </div>
` : ''} ` : ''}
${payeeAddress ? html` ${payeeAddress ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Payee Address</h5> <h5 class="label">Payee Address</h5>
<h4>${payeeAddress}</h4> <h4>${payeeAddress}</h4>
</div> </div>
`: ''} `: ''}
${minAmount ? html` ${minAmount ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Min. Subscription Amount</h5> <h5 class="label">Min. Subscription Amount</h5>
<h4>${formatAmount(minAmount, 'usd')} ${token}</h4> <h4>${formatAmount(minAmount, 'usd')} ${token}</h4>
</div> </div>
`: ''} `: ''}
${maxAmount ? html` ${maxAmount ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Max. Subscription Amount</h5> <h5 class="label">Max. Subscription Amount</h5>
<h4>${formatAmount(maxAmount, 'usd')} ${token}</h4> <h4>${formatAmount(maxAmount, 'usd')} ${token}</h4>
</div> </div>
`: ''} `: ''}
${participationFees ? html` ${participationFees ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Participation Fees</h5> <h5 class="label">Participation Fees</h5>
<h4>${formatAmount(participationFees, 'usd')} ${token}</h4> <h4>${formatAmount(participationFees, 'usd')} ${token}</h4>
</div> </div>
`: ''} `: ''}
${contractType === 'one-time-event' ? html` ${contractType === 'one-time-event' ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Token Used</h5> <h5 class="label">Token Used</h5>
<h4>${token}</h4> <h4>${token}</h4>
</div> </div>
`: ''} `: ''}
${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html` ${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Input token</h5> <h5 class="label">Input token</h5>
<h4>${accepting_token}</h4> <h4>${accepting_token}</h4>
</div> </div>
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Output token</h5> <h5 class="label">Output token</h5>
<h4>${selling_token}</h4> <h4>${selling_token}</h4>
</div> </div>
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">exchange rate</h5> <h5 class="label">Exchange rate (${priceType === 'dynamic' ? 'Dynamic' : 'Fixed'})</h5>
<h4>1 ${selling_token} = ${price} ${accepting_token}</h4> <h4>1 ${selling_token} = ${price} ${accepting_token}</h4>
</div> </div>
`: ''} `: ''}
${numberOfDeposits ? html` ${numberOfDeposits ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Number of deposits</h5> <h5 class="label">Number of deposits</h5>
<h4>${numberOfDeposits}</h4> <h4>${numberOfDeposits}</h4>
</div> </div>
`: ''} `: ''}
${numberOfParticipants ? html` ${numberOfParticipants ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Number of participants</h5> <h5 class="label">Number of participants</h5>
<h4>${numberOfParticipants}</h4> <h4>${numberOfParticipants}</h4>
</div> </div>
`: ''} `: ''}
${priceType ? html`
<div class="flex gap-0-5 info-row">
<h5 class="label">Price type</h5>
<h4>${priceType}</h4>
</div>
`: ''}
${oracle_address ? html` ${oracle_address ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Oracle address</h5> <h5 class="label">Oracle address</h5>
<a href=${`#/address/${oracle_address}`} class="address wrap-around">${oracle_address}</a> <a href=${`#/address/${oracle_address}`} class="address wrap-around">${oracle_address}</a>
</div> </div>
`: ''} `: ''}
${totalParticipationAmount ? html` ${totalParticipationAmount ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Total participation amount</h5> <h5 class="label">Total participation amount</h5>
<h4>${formatAmount(totalParticipationAmount, 'usd')} ${accepting_token}</h4> <h4>${formatAmount(totalParticipationAmount, 'usd')} ${accepting_token}</h4>
</div> </div>
`: ''} `: ''}
${totalHonorAmount ? html` ${totalHonorAmount ? html`
<div class="flex gap-0-5 info-row"> <div class="flex info-row">
<h5 class="label">Total output amount</h5> <h5 class="label">Total output amount</h5>
<h4>${formatAmount(totalHonorAmount, 'usd')} ${selling_token}</h4> <h4>${formatAmount(totalHonorAmount, 'usd')} ${selling_token}</h4>
</div> </div>
@ -942,13 +952,13 @@
<sm-chip value="0" selected>Transactions</sm-chip> <sm-chip value="0" selected>Transactions</sm-chip>
<sm-chip value="1">Participants</sm-chip> <sm-chip value="1">Participants</sm-chip>
${contractType === 'one-time-event' && contractSubtype === 'external-trigger' ? html`<sm-chip value="2">Winners</sm-chip>` : ''} ${contractType === 'one-time-event' && contractSubtype === 'external-trigger' ? html`<sm-chip value="2">Winners</sm-chip>` : ''}
${contractType === 'continuos-event' && contractSubtype === 'token-swap' ? html`<sm-chip value="2">Deposits</sm-chip>` : ''} ${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html`<sm-chip value="2">Deposits</sm-chip>` : ''}
</sm-chips> </sm-chips>
<div id="contract_views" class="view-wrapper"> <div id="contract_views" class="view-wrapper">
<div id="contract_transaction_container" class="transaction-container"></div> <div id="contract_transaction_container" class="transaction-container"></div>
<ul id="participant_container" class="card hidden"></ul> <ul id="participant_container" class="card hidden"></ul>
${contractType === 'one-time-event' && contractSubtype === 'external-trigger' ? html`<ul id="winners_container" class="card hidden"></ul>` : ''} ${contractType === 'one-time-event' && contractSubtype === 'external-trigger' ? html`<ul id="winners_container" class="card hidden"></ul>` : ''}
${contractType === 'continuos-event' && contractSubtype === 'token-swap' ? html`<ul id="deposits_container" class="card hidden"></ul>` : ''} ${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html`<ul id="deposits_container" class="card hidden"></ul>` : ''}
</div> </div>
</div> </div>
`; `;
@ -974,13 +984,41 @@
<b>${formatAmount(swapAmount, 'usd')} ${selling_token}</b> <b>${formatAmount(swapAmount, 'usd')} ${selling_token}</b>
</div> </div>
<div> <div>
<h5 class="label">Swap rate</h5> <h5 class="label">Exchange rate</h5>
<b>${formatAmount(swapPrice, 'usd')} ${accepting_token}</b> <b>${formatAmount(swapPrice, 'usd')} ${accepting_token}</b>
</div> </div>
</div> </div>
</li> </li>
`; `;
}, },
depositCard(details) {
const { currentBalance, depositorAddress, originalBalance, status, time, transactionHash, accepting_token } = details
return html`
<li class="flex participant">
<div class="grid gap-0-5 flex-1">
<div class="flex align-center gap-0-5">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
<h5>Deposit</h5>
</div>
<a href=${`#/address/${depositorAddress}`} class="address wrap-around">${depositorAddress}</a>
</div>
<div class="grid align-center gap-1 flex-1" style="grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr))">
<div>
<h5 class="label">Deposited</h5>
<b>${formatAmount(originalBalance, 'usd')} ${accepting_token}</b>
</div>
<div>
<h5 class="label">Current balance</h5>
<b>${formatAmount(currentBalance, 'usd')} ${accepting_token}</b>
</div>
<div>
<h5 class="label">Status</h5>
<b>${status}</b>
</div>
</div>
</li>
`
},
contractChoiceCard(details) { contractChoiceCard(details) {
const { participantFloAddress, userChoice, tokenAmount, transactionHash, winningAmount } = details; const { participantFloAddress, userChoice, tokenAmount, transactionHash, winningAmount } = details;
let action; let action;
@ -1398,6 +1436,12 @@
return transactions.contractTransactions return transactions.contractTransactions
} }
async function getContractDeposits(contract) {
const deposits = await fetchJson(`${tokenApiUrl}/api/v2/smartContractDeposits?contractName=${contract.name}&contractAddress=${contract.address}`)
console.log(`${tokenApiUrl}/api/v2/smartContractDeposits?contractName=${contract.name}&contractAddress=${contract.address}`)
return deposits.depositInfo
}
function parseTransactions(txList) { function parseTransactions(txList) {
if (!Array.isArray(txList)) if (!Array.isArray(txList))
txList = Object.values(txList) txList = Object.values(txList)