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

UI changes

Browse Source
This commit is contained in:
sairaj mote 2023-04-15 02:51:49 +05:30
parent ea6773a768
commit 74e341cb26
6 changed files with 61 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/main.css
View File

@ -1045,6 +1045,10 @@ p {
grid-area: 1/1; grid-area: 1/1;
} }
.info-row {
flex-direction: column;
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.margin, .margin,
.page { .page {
@ -1083,8 +1087,12 @@ p {
grid-template-columns: 2fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr;
align-items: center; align-items: center;
} }
.info-row {
flex-wrap: wrap;
flex-direction: row;
}
.info-row h5 { .info-row h5 {
min-width: 8rem; min-width: 12rem;
} }
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
@ -1104,5 +1112,4 @@ p {
.hover { .hover {
cursor: pointer; cursor: pointer;
} }
} }
/*# sourceMappingURL=main.css.map */

1
css/main.css.map
View File

File diff suppressed because one or more lines are too long

3
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/main.min.css.map
View File

File diff suppressed because one or more lines are too long

11
css/main.scss
View File

@ -952,6 +952,9 @@ p {
grid-area: 1/1; grid-area: 1/1;
} }
} }
.info-row {
flex-direction: column;
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.margin, .margin,
.page { .page {
@ -996,9 +999,11 @@ p {
grid-template-columns: 2fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr;
align-items: center; align-items: center;
} }
.info-row{ .info-row {
h5{ flex-wrap: wrap;
min-width: 8rem; flex-direction: row;
h5 {
min-width: 12rem;
} }
} }
} }

84
index.html
View File

@ -384,7 +384,7 @@
renderElem(getRef("page_container"), html`${render.contractPage(contractInfo)}`); renderElem(getRef("page_container"), html`${render.contractPage(contractInfo)}`);
getRef("page_title").textContent = "Contract"; 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)
@ -770,25 +770,25 @@
`; `;
}, },
contractPage(obj) { contractPage(obj) {
let { let {
status, status,
contract, contract,
contractType, contractType,
contractSubtype, contractSubtype,
contractAddress, contractAddress,
expiration, token, expiration, token,
participationFees, participationFees,
userChoices, userChoices,
payeeAddress, payeeAddress,
minAmount, minAmount,
maxAmount , maxAmount,
accepting_token, accepting_token,
selling_token, selling_token,
numberOfDeposits, numberOfDeposits,
numberOfParticipants, numberOfParticipants,
totalHonorAmount, totalHonorAmount,
totalParticipationAmount, totalParticipationAmount,
priceType, priceType,
oracle_address, oracle_address,
price price
} = obj; } = obj;
@ -797,7 +797,7 @@
<div id="contract_page" class="page"> <div id="contract_page" class="page">
${status ? html` ${status ? html`
<div class="status closed">${status}</div> <div class="status closed">${status}</div>
`:''} `: ''}
<h3 class="uppercase">${replaceDash(contract)}</h3> <h3 class="uppercase">${replaceDash(contract)}</h3>
${userChoices ? html` ${userChoices ? html`
<h3 class="heading">User Choices</h3> <h3 class="heading">User Choices</h3>
@ -807,103 +807,103 @@
`)} `)}
</ul> </ul>
`: ''} `: ''}
<div class="card"> <div class="card grid gap-1-5">
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 info-row">
<h5 class="label">Min. Subscription Amount</h5> <h5 class="label">Min. Subscription Amount</h5>
<h4>${formatAmount(minAmount, 'usd')}</h4> <h4>${formatAmount(minAmount, 'usd')}</h4>
</div> </div>
`: ''} `: ''}
${maxAmount ? html` ${maxAmount ? html`
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 info-row">
<h5 class="label">Max. Subscription Amount</h5> <h5 class="label">Max. Subscription Amount</h5>
<h4>${formatAmount(maxAmount, 'usd')}</h4> <h4>${formatAmount(maxAmount, 'usd')}</h4>
</div> </div>
`: ''} `: ''}
${participationFees ? html` ${participationFees ? html`
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 info-row">
<h5 class="label">Participation Fees</h5> <h5 class="label">Participation Fees</h5>
<h4>${formatAmount(participationFees, 'usd')}</h4> <h4>${formatAmount(participationFees, 'usd')}</h4>
</div> </div>
`: ''} `: ''}
${contractType === 'one-time-event' ? html` ${contractType === 'one-time-event' ? html`
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 info-row">
<h5 class="label">exchange rate</h5> <h5 class="label">exchange rate</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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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` ${priceType ? html`
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 info-row">
<h5 class="label">Price type</h5> <h5 class="label">Price type</h5>
<h4>${priceType}</h4> <h4>${priceType}</h4>
</div> </div>
`: ''} `: ''}
${oracle_address ? html` ${oracle_address ? html`
<div class="flex align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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 align-center gap-0-5 info-row"> <div class="flex gap-0-5 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>
@ -913,12 +913,12 @@
<sm-chips data-target="contract_views" onchange="changeView(event)"> <sm-chips data-target="contract_views" onchange="changeView(event)">
<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>` : ''}
</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"></ul> <ul id="participant_container" class="card"></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>` : ''}
</div> </div>
`; `;
}, },
@ -1281,29 +1281,29 @@
async function getContractInfo(contract) { async function getContractInfo(contract) {
const info = await fetchJson(`${tokenApiUrl}/api/v2/smartContractInfo?contractName=${contract.name}&contractAddress=${contract.address}`); const info = await fetchJson(`${tokenApiUrl}/api/v2/smartContractInfo?contractName=${contract.name}&contractAddress=${contract.address}`);
console.log(info, contract) console.log(info, contract)
const { const {
contractInfo: { contractInfo: {
contractType, contractType,
numberOfDeposits, numberOfDeposits,
numberOfParticipants, numberOfParticipants,
priceType, priceType,
oracle_address, oracle_address,
contractSubtype, contractSubtype,
status, status,
expiryTime, expiryTime,
payeeAddress, payeeAddress,
userChoice, userChoice,
tokenIdentification, tokenIdentification,
accepting_token, accepting_token,
selling_token, selling_token,
contractAmount, contractAmount,
minimumsubscriptionamount, minimumsubscriptionamount,
maximumsubscriptionamount, maximumsubscriptionamount,
totalHonorAmount, totalHonorAmount,
totalParticipationAmount, totalParticipationAmount,
price price
}, contractAddress, }, contractAddress,
contractName contractName
} = info } = info
return { return {
contract: contractName, contract: contractName,