Merge pull request #5 from vivekteega/master
Integrating token swap contract
This commit is contained in:
sairaj mote
GitHub
commit
07c5b675a5
55
css/main.css
55
css/main.css
@ -377,6 +377,10 @@ ul {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
@ -656,9 +660,6 @@ ul {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.card h4 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.card h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@ -870,12 +871,6 @@ theme-toggle {
|
||||
.page > h3.heading {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -908,6 +903,7 @@ p {
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: capitalize;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.choice-container {
|
||||
@ -925,6 +921,10 @@ p {
|
||||
.status {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.status.active {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.status.closed {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
@ -947,7 +947,6 @@ p {
|
||||
.contract-choice {
|
||||
display: grid;
|
||||
gap: 0.5rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.contract-choice:last-of-type {
|
||||
margin-bottom: 0;
|
||||
@ -1050,14 +1049,31 @@ p {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.view-wrapper {
|
||||
#view-wrappe .view-wrapper {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.view-wrapper > * {
|
||||
#view-wrappe .view-wrapper > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#participant_container,
|
||||
#deposits_container {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.participant,
|
||||
.deposit-card {
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.margin,
|
||||
.page {
|
||||
@ -1096,6 +1112,21 @@ p {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
#contract_info {
|
||||
-moz-columns: 24rem auto;
|
||||
columns: 24rem auto;
|
||||
-moz-column-gap: 4rem;
|
||||
column-gap: 4rem;
|
||||
}
|
||||
.info-row {
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.info-row h5 {
|
||||
min-width: 11rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.2rem !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.margin,
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -350,7 +350,9 @@ ul {
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
align-self: start;
|
||||
}
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
@ -615,9 +617,6 @@ ul {
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
margin: 1.5rem 0;
|
||||
h4 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@ -793,10 +792,6 @@ theme-toggle {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.balance-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -829,6 +824,7 @@ p {
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: capitalize;
|
||||
margin-right: auto;
|
||||
}
|
||||
.choice-container {
|
||||
display: flex;
|
||||
@ -842,6 +838,10 @@ p {
|
||||
}
|
||||
.status {
|
||||
font-size: 0.8rem;
|
||||
&.active {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&.closed {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
@ -862,7 +862,6 @@ p {
|
||||
.contract-choice {
|
||||
display: grid;
|
||||
gap: 0.5rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -956,13 +955,27 @@ p {
|
||||
#error_page {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.view-wrapper {
|
||||
#view-wrappe .view-wrapper {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
& > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#participant_container,
|
||||
#deposits_container {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
.participant,
|
||||
.deposit-card {
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.margin,
|
||||
.page {
|
||||
@ -1007,6 +1020,19 @@ p {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
#contract_info {
|
||||
columns: 24rem auto;
|
||||
column-gap: 4rem;
|
||||
}
|
||||
.info-row {
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
h5 {
|
||||
min-width: 11rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.margin,
|
||||
|
||||
470
index.html
470
index.html
@ -53,7 +53,7 @@
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3 id="page_title"></h3>
|
||||
<h4 id="page_title"></h4>
|
||||
</div>
|
||||
<main id="page_container" class="flex flex-direction-column"></main>
|
||||
|
||||
@ -350,6 +350,7 @@
|
||||
getRef("page_title").textContent = 'Address'
|
||||
renderTransactions('address_transaction_container', addressTxs)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
|
||||
}
|
||||
})
|
||||
@ -372,34 +373,93 @@
|
||||
}
|
||||
})
|
||||
router.addRoute('contract', async state => {
|
||||
const [contractId] = state.wildcards
|
||||
if (!contractId) return;
|
||||
// todo: load contract variable dynamically
|
||||
const contract = splitContractNameAddress(contractId);
|
||||
let [contractInfo, contractTransactions, contractParticipants] = await Promise.all([getContractInfo(contract), getContractTransactions(contract), getContractParticipants(contract)])
|
||||
// todo : check the type of contract & then further checks like fetching details of contractParticipant
|
||||
getRef("page_container").append(render.contractPage(contractInfo));
|
||||
getRef("page_title").textContent = "Contract";
|
||||
try {
|
||||
const [contractId] = state.wildcards
|
||||
if (!contractId) return;
|
||||
const contract = splitContractNameAddress(contractId);
|
||||
const contractInfo = await getContractInfo(contract)
|
||||
const { contractType, contractSubtype, accepting_token, selling_token } = contractInfo
|
||||
const detailsToFetch = [getContractTransactions(contract), getContractParticipants(contract)]
|
||||
if (contractType === 'continuos-event' && contractSubtype === 'tokenswap')
|
||||
detailsToFetch.push(getContractDeposits(contract))
|
||||
let [contractTransactions, contractParticipants, contractDeposits] = await Promise.all(detailsToFetch)
|
||||
renderElem(getRef("page_container"), html`${render.contractPage(contractInfo)}`);
|
||||
getRef("page_title").textContent = "Contract";
|
||||
|
||||
console.log(contractParticipants)
|
||||
let winners = []
|
||||
for (const participant in contractParticipants) {
|
||||
if (contractParticipants[participant].winningAmount)
|
||||
winners.push(contractParticipants[participant])
|
||||
// append latest transactions
|
||||
renderTransactions('contract_transaction_container', contractTransactions)
|
||||
console.log(contractParticipants)
|
||||
switch (contractType) {
|
||||
case 'one-time-event':
|
||||
switch (contractSubtype) {
|
||||
case 'external-trigger':
|
||||
let winners = []
|
||||
for (const participant in contractParticipants) {
|
||||
if (contractParticipants[participant].winningAmount)
|
||||
winners.push(contractParticipants[participant])
|
||||
}
|
||||
if (winners.length) {
|
||||
renderElem(document.getElementById('winners_container'), html`${winners.map(winner => render.contractChoiceCard(winner))}`)
|
||||
} else {
|
||||
renderElem(document.getElementById('winners_container'), html`<div>No winners found</div>`)
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break
|
||||
}
|
||||
if (Object.keys(contractParticipants).length)
|
||||
renderElem(
|
||||
document.getElementById('participant_container'),
|
||||
html`${Object.keys(contractParticipants).map(participant => render.contractChoiceCard(contractParticipants[participant]))}`
|
||||
)
|
||||
else
|
||||
renderElem(
|
||||
document.getElementById('participant_container'),
|
||||
html`<div>No participants found</div>`
|
||||
)
|
||||
break;
|
||||
case 'continuos-event':
|
||||
switch (contractSubtype) {
|
||||
case 'tokenswap':
|
||||
if (Object.keys(contractParticipants).length)
|
||||
renderElem(
|
||||
document.getElementById('participant_container'),
|
||||
html`${Object.keys(contractParticipants)
|
||||
.map(participant => render.participantCard({
|
||||
accepting_token: accepting_token,
|
||||
selling_token: selling_token,
|
||||
...contractParticipants[participant]
|
||||
}))
|
||||
}`
|
||||
)
|
||||
else
|
||||
renderElem(
|
||||
document.getElementById('participant_container'),
|
||||
html`<div>No participants found</div>`
|
||||
)
|
||||
if (contractDeposits.length)
|
||||
renderElem(
|
||||
document.getElementById('deposits_container'),
|
||||
html`${contractDeposits.map(deposit => render.depositCard({
|
||||
...deposit,
|
||||
accepting_token: accepting_token,
|
||||
}))}`
|
||||
)
|
||||
else
|
||||
renderElem(
|
||||
document.getElementById('deposits_container'),
|
||||
html`<div>No deposits found</div>`
|
||||
)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
|
||||
}
|
||||
// append latest transactions
|
||||
renderTransactions('contract_transaction_container', contractTransactions)
|
||||
for (participant in contractParticipants) {
|
||||
let { participantFloAddress, tokenIdentification, userChoice, tokenAmount } = contractParticipants[participant]
|
||||
frag.append(render.contractChoiceCard(participantFloAddress, tokenIdentification, userChoice, tokenAmount))
|
||||
}
|
||||
document.getElementById('participant_container').append(frag)
|
||||
|
||||
winners.forEach(winner => {
|
||||
let { participantFloAddress, tokenIdentification, userChoice, tokenAmount, winningAmount } = winner;
|
||||
frag.append(render.contractChoiceCard(participantFloAddress, tokenIdentification, userChoice, tokenAmount, winningAmount))
|
||||
})
|
||||
document.getElementById('winners_container').append(frag)
|
||||
})
|
||||
|
||||
router.addRoute('block', async state => {
|
||||
@ -689,7 +749,7 @@
|
||||
<h5 class="label">Transaction ID</h5>
|
||||
<sm-copy value=${hash} clip-text></sm-copy>
|
||||
</div>
|
||||
<div class="card grid gap-1-5">
|
||||
<div class="card grid gap-1-5 align-start align-self-start">
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">Block</h5>
|
||||
<a href=${`#/block/${blockHeight}`} class="block-height">${blockHeight}</a>
|
||||
@ -698,18 +758,24 @@
|
||||
<h5 class="label">Sender</h5>
|
||||
<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a>
|
||||
</div>
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">Receiver</h5>
|
||||
<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
|
||||
</div>
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">Amount</h5>
|
||||
<h4>${formatAmount(amount, 'usd')}</h4>
|
||||
</div>
|
||||
${receiver ? html`
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">Receiver</h5>
|
||||
<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
|
||||
</div>
|
||||
`: ''
|
||||
}
|
||||
${amount ? html`
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">Amount</h5>
|
||||
<h4>${formatAmount(amount, 'usd')}</h4>
|
||||
</div>
|
||||
`: ''
|
||||
}
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5 class="label">FLO Data</h5>
|
||||
<p>${floData}</p>
|
||||
<p class="wrap-around">${floData}</p>
|
||||
<h5 class="label">Block Confirmations</h5>
|
||||
<h4>${confirmations}</h4>
|
||||
${nftHash ? html`
|
||||
@ -766,79 +832,228 @@
|
||||
`;
|
||||
},
|
||||
contractPage(obj) {
|
||||
let { status, contract, contractType, contractAddress, expiration, token, participationFees, userChoices, payeeAddress, minAmount, maxAmount } = obj;
|
||||
let {
|
||||
status,
|
||||
contract,
|
||||
contractType,
|
||||
contractSubtype,
|
||||
contractAddress,
|
||||
expiration,
|
||||
token,
|
||||
participationFees,
|
||||
userChoices,
|
||||
payeeAddress,
|
||||
minAmount,
|
||||
maxAmount,
|
||||
accepting_token,
|
||||
selling_token,
|
||||
numberOfDeposits,
|
||||
numberOfParticipants,
|
||||
totalHonorAmount,
|
||||
totalParticipationAmount,
|
||||
priceType,
|
||||
oracle_address,
|
||||
price
|
||||
} = obj;
|
||||
console.log(obj)
|
||||
return html`
|
||||
<div id="contract_page" class="page">
|
||||
<div class="status closed">${status}</div>
|
||||
<h3 class="uppercase">${replaceDash(contract)}</h3>
|
||||
${status ? html`
|
||||
<div class=${`status ${status}`}>${status}</div>
|
||||
`: ''}
|
||||
<h2 class="uppercase">${replaceDash(contract)}</h2>
|
||||
<div id="contract_info" class="card">
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Contract Type</h5>
|
||||
<h4>${replaceDash(contractType)}</h4>
|
||||
</div>
|
||||
${contractSubtype ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Contract Subtype</h5>
|
||||
<h4>${replaceDash(contractSubtype)}</h4>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Contract Address</h5>
|
||||
<a href=${`#/address/${contractAddress}`} class="address wrap-around">${contractAddress}</a>
|
||||
</div>
|
||||
${expiration ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Expiration</h5>
|
||||
<h4>${getFormattedTime(new Date(expiration).getTime())}</h4>
|
||||
</div>
|
||||
` : ''}
|
||||
${payeeAddress ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Payee Address</h5>
|
||||
${Object.keys(payeeAddress).map(address => html`
|
||||
<a href=${`#/address/${address}`} class="address wrap-around">${address}</a>
|
||||
`)}
|
||||
</div>
|
||||
`: ''}
|
||||
${minAmount ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Min. Subscription Amount</h5>
|
||||
<h4>${formatAmount(minAmount, 'usd')} ${token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${maxAmount ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Max. Subscription Amount</h5>
|
||||
<h4>${formatAmount(maxAmount, 'usd')} ${token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${participationFees ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Participation Fees</h5>
|
||||
<h4>${formatAmount(participationFees, 'usd')} ${token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${contractType === 'one-time-event' ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Token Used</h5>
|
||||
<h4>${token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Input token</h5>
|
||||
<h4>${accepting_token}</h4>
|
||||
</div>
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Output token</h5>
|
||||
<h4>${selling_token}</h4>
|
||||
</div>
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Exchange rate (${priceType === 'dynamic' ? 'Dynamic' : 'Fixed'})</h5>
|
||||
<h4>1 ${selling_token} = ${price} ${accepting_token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${numberOfDeposits ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Number of deposits</h5>
|
||||
<h4>${numberOfDeposits}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${numberOfParticipants ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Number of participants</h5>
|
||||
<h4>${numberOfParticipants}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${oracle_address ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Oracle address</h5>
|
||||
<a href=${`#/address/${oracle_address}`} class="address wrap-around">${oracle_address}</a>
|
||||
</div>
|
||||
`: ''}
|
||||
${totalParticipationAmount ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Total participation amount</h5>
|
||||
<h4>${formatAmount(totalParticipationAmount, 'usd')} ${accepting_token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
${totalHonorAmount ? html`
|
||||
<div class="flex info-row">
|
||||
<h5 class="label">Total output amount</h5>
|
||||
<h4>${formatAmount(totalHonorAmount, 'usd')} ${selling_token}</h4>
|
||||
</div>
|
||||
`: ''}
|
||||
</div>
|
||||
${userChoices ? html`
|
||||
<h3 class="heading">User Choices</h3>
|
||||
<h3>Available Choices</h3>
|
||||
<ul type="circle" class="card">
|
||||
${object.keys(userChoices).map(choice => html`
|
||||
${Object.keys(userChoices).map(choice => html`
|
||||
<li>${userChoices[choice]}</li>
|
||||
`)}
|
||||
</ul>
|
||||
`: ''}
|
||||
<div class="card">
|
||||
<h5 class="label">Contract Type</h5>
|
||||
<h4>${replaceDash(contractType)}</h4>
|
||||
<h5 class="label">Contract Address</h5>
|
||||
<a href=${`#/address/${contractAddress}`} class="address wrap-around">${contractAddress}</a>
|
||||
${expiration ? html`
|
||||
<h5 class="label">Expiration</h5>
|
||||
<h4>${expiration}</h4>
|
||||
` : ''}
|
||||
${payeeAddress ? html`
|
||||
<h5 class="label">Payee Address</h5>
|
||||
<h4>${payeeAddress}</h4>
|
||||
`: ''}
|
||||
${minAmount ? html`
|
||||
<h5 class="label">Min. Subscription Amount</h5>
|
||||
<h4>${formatAmount(minAmount, 'usd')}</h4>
|
||||
`: ''}
|
||||
${maxAmount ? html`
|
||||
<h5 class="label">Max. Subscription Amount</h5>
|
||||
<h4>${formatAmount(maxAmount, 'usd')}</h4>
|
||||
`: ''}
|
||||
${participationFees ? html`
|
||||
<h5 class="label">Participation Fees</h5>
|
||||
<h4>${formatAmount(participationFees, 'usd')}</h4>
|
||||
`: ''}
|
||||
<h5 class="label">Token Used</h5>
|
||||
<h4>${token}</h4>
|
||||
<sm-chips class="margin-top-1" data-target="contract_views" onchange="changeView(event)">
|
||||
<sm-chip value="0" selected>Transactions</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 === 'continuos-event' && contractSubtype === 'tokenswap' ? html`<sm-chip value="2">Deposits</sm-chip>` : ''}
|
||||
</sm-chips>
|
||||
<div id="contract_views" class="view-wrapper">
|
||||
<div id="contract_transaction_container" class="transaction-container"></div>
|
||||
<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 === 'continuos-event' && contractSubtype === 'tokenswap' ? html`<ul id="deposits_container" class="card hidden"></ul>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<sm-chips data-target="contract_views" onchange="changeView(event)">
|
||||
<sm-chip value="0" selected>Transactions</sm-chip>
|
||||
<sm-chip value="1">Participants</sm-chip>
|
||||
<sm-chip value="2">Winners</sm-chip>
|
||||
</sm-chips>
|
||||
<div id="contract_views" class="view-wrapper">
|
||||
<ul id="participant_container" class="card"></ul>
|
||||
<ul id="winners_container" class="card hidden"></ul>
|
||||
<div id="contract_transaction_container" class="transaction-container"></div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
contractChoiceCard(address, token, choice, amount, winningAmount) {
|
||||
let card = document.createElement('li'),
|
||||
action;
|
||||
card.classList.add('contract-choice')
|
||||
participantCard(details) {
|
||||
const { participantFloAddress, participationAmount, swapAmount, swapPrice, transactionHash, accepting_token, selling_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>Token swap</h5>
|
||||
</div>
|
||||
<a href=${`#/address/${participantFloAddress}`} class="address wrap-around">${participantFloAddress}</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">Input amount</h5>
|
||||
<b>${formatAmount(participationAmount, 'usd')} ${accepting_token}</b>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="label">Output amount</h5>
|
||||
<b>${formatAmount(swapAmount, 'usd')} ${selling_token}</b>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="label">Exchange rate</h5>
|
||||
<b>${formatAmount(swapPrice, 'usd')} ${accepting_token}</b>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
},
|
||||
depositCard(details) {
|
||||
const { currentBalance, depositorAddress, originalBalance, status, time, transactionHash, accepting_token } = details
|
||||
return html`
|
||||
<li class="flex deposit-card">
|
||||
<div class="grid gap-0-5 flex-1">
|
||||
<h5>Deposit</h5>
|
||||
<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) {
|
||||
const { participantFloAddress, userChoice, tokenAmount, transactionHash, winningAmount } = details;
|
||||
let action;
|
||||
if (winningAmount) {
|
||||
action = 'Won'
|
||||
amount = winningAmount
|
||||
}
|
||||
else
|
||||
} else
|
||||
action = 'Invested'
|
||||
card.innerHTML = `
|
||||
<a href=${`#/address/${address}`} class="address wrap-around">${address}</a>
|
||||
<h4>${choice}</h4>
|
||||
<h4>${formatAmount(amount, token.toLowerCase() === 'rupee' ? 'inr' : 'usd')} ${token} ${action}</h4>
|
||||
`
|
||||
return card;
|
||||
return html`
|
||||
<li class="contract-choice">
|
||||
<a href=${`#/address/${participantFloAddress}`} class="address wrap-around">${participantFloAddress}</a>
|
||||
<h4>${userChoice}</h4>
|
||||
<h4>${formatAmount(tokenAmount, 'usd')} ${action}</h4>
|
||||
</li>
|
||||
`;
|
||||
},
|
||||
contractTransferCard(obj) {
|
||||
const { hash, blockHeight, token, sender, receiver, amount, contractName, userChoice, time } = obj;
|
||||
const { hash, token, sender, receiver, amount, contractName, userChoice, time } = obj;
|
||||
return html`
|
||||
<div id=${hash} class="transaction token-transfer">
|
||||
<svg class="icon" viewBox="0 0 64 64"> <title>contract</title> <path d="M4.75,49.27A8,8,0,0,0,4.2,61.14a7.82,7.82,0,0,0,4.34,2.24,7.42,7.42,0,0,0,1.34.12H47.41a8.06,8.06,0,0,0,8.05-8V7.87"/> <path d="M8.54,56.13V8.54a8.06,8.06,0,0,1,8.05-8H54.12a7.42,7.42,0,0,1,1.34.12A7.82,7.82,0,0,1,59.8,2.86a8,8,0,0,1-.55,11.87"/> <line x1="17.93" y1="22.62" x2="46.07" y2="22.62"/> <line x1="17.93" y1="32" x2="46.07" y2="32"/> <line x1="17.93" y1="41.38" x2="38.03" y2="41.38"/> </svg>
|
||||
@ -987,6 +1202,7 @@
|
||||
},
|
||||
contractCreationCard(obj) {
|
||||
const { hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices, time } = obj;
|
||||
console.log(obj);
|
||||
return html`
|
||||
<div id=${hash} class="transaction contract-creation">
|
||||
<svg class="icon" viewBox="0 0 64 64"> <title>contract creation</title> <path d="M47.07,23.85V11"/> <path d="M3,47A7,7,0,0,0,.48,52.39a6.89,6.89,0,0,0,2.05,4.93,6.78,6.78,0,0,0,3.78,2,6.34,6.34,0,0,0,1.16.1H40.09a7,7,0,0,0,7-7V44"/> <path d="M6.31,53V11.61a7,7,0,0,1,7-7H45.91a6.26,6.26,0,0,1,1.16.1,6.74,6.74,0,0,1,3.78,1.95A7,7,0,0,1,50.37,17"/> <line x1="14.46" y1="23.85" x2="38.92" y2="23.85"/> <line x1="14.46" y1="32" x2="38.92" y2="32"/> <line x1="14.46" y1="40.15" x2="31.93" y2="40.15"/> <path d="M57.79,24.44l-2.88-2.9,3.79-3.79a1,1,0,0,1,1.39,0l3.11,3.11a1,1,0,0,1,0,1.39L40.34,45.1a1,1,0,0,1-.52.28L36,46A1,1,0,0,1,34.9,44.9l.67-3.77a1,1,0,0,1,.27-.52L52.65,23.8"/> </svg>
|
||||
@ -1012,10 +1228,11 @@
|
||||
<h5 class="label">contract type</h5>
|
||||
<h4>${replaceDash(contractType)}</h4>
|
||||
</div>
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">expiration</h5>
|
||||
<h4 class="capitalise">${expiration}</h4>
|
||||
</div>
|
||||
${expiration ? html`
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">expiration</h5>
|
||||
<h4 class="capitalise">${getFormattedTime(new Date(expiration).getTime())}</h4>
|
||||
</div>`: ''}
|
||||
<div class="flex flex-direction-column">
|
||||
<h5 class="label">participation amount</h5>
|
||||
<h4>${participationFees} ${token}</h4>
|
||||
@ -1178,19 +1395,52 @@
|
||||
async function getContractInfo(contract) {
|
||||
const info = await fetchJson(`${tokenApiUrl}/api/v2/smartContractInfo?contractName=${contract.name}&contractAddress=${contract.address}`);
|
||||
console.log(info, contract)
|
||||
const { contractInfo: { contractType, status, expiryTime, payeeAddress, userChoice, tokenIdentification, contractAmount, minimumsubscriptionamount, maximumsubscriptionamount }, contractAddress, contractName } = info
|
||||
const {
|
||||
contractInfo: {
|
||||
contractType,
|
||||
numberOfDeposits,
|
||||
numberOfParticipants,
|
||||
priceType,
|
||||
oracle_address,
|
||||
contractSubtype,
|
||||
status,
|
||||
expiryTime,
|
||||
payeeAddress,
|
||||
userChoice,
|
||||
tokenIdentification,
|
||||
accepting_token,
|
||||
selling_token,
|
||||
contractAmount,
|
||||
minimumsubscriptionamount,
|
||||
maximumsubscriptionamount,
|
||||
totalHonorAmount,
|
||||
totalParticipationAmount,
|
||||
price
|
||||
}, contractAddress,
|
||||
contractName
|
||||
} = info
|
||||
return {
|
||||
contract: contractName,
|
||||
contractAddress,
|
||||
contractType,
|
||||
contractSubtype,
|
||||
status,
|
||||
expiration: expiryTime,
|
||||
payeeAddress,
|
||||
userChoices: userChoice,
|
||||
token: tokenIdentification,
|
||||
accepting_token,
|
||||
selling_token,
|
||||
participationFees: contractAmount,
|
||||
minAmount: minimumsubscriptionamount,
|
||||
maxAmount: maximumsubscriptionamount
|
||||
maxAmount: maximumsubscriptionamount,
|
||||
numberOfDeposits,
|
||||
numberOfParticipants,
|
||||
priceType,
|
||||
oracle_address,
|
||||
totalHonorAmount,
|
||||
totalParticipationAmount,
|
||||
price
|
||||
}
|
||||
}
|
||||
|
||||
@ -1204,6 +1454,12 @@
|
||||
return transactions.contractTransactions
|
||||
}
|
||||
|
||||
async function getContractDeposits(contract) {
|
||||
console.log(`${tokenApiUrl}/api/v2/smartContractDeposits?contractName=${contract.name}&contractAddress=${contract.address}`)
|
||||
const deposits = await fetchJson(`${tokenApiUrl}/api/v2/smartContractDeposits?contractName=${contract.name}&contractAddress=${contract.address}`)
|
||||
return deposits.depositInfo
|
||||
}
|
||||
|
||||
function parseTransactions(txList) {
|
||||
if (!Array.isArray(txList))
|
||||
txList = Object.values(txList)
|
||||
@ -1213,11 +1469,23 @@
|
||||
// if(transactionKey == '11571ce7e5eed0bce30e24de89bb1ba6cc432df7b5b40bbc9f0225b98968cb47'){
|
||||
// //debugger
|
||||
// }
|
||||
console.log(tx)
|
||||
const {
|
||||
transactionDetails: {
|
||||
txid, blockHeight, vin, vout, time },
|
||||
parsedFloData: {
|
||||
contractAddress, contractType, expiryTime, contractAmount, type, tokenAmount, tokenIdentification, transferType, contractName, triggerCondition, userChoice, nftHash
|
||||
contractAddress,
|
||||
contractType,
|
||||
contractConditions: { expiryTime } = {},
|
||||
contractAmount,
|
||||
type,
|
||||
tokenAmount,
|
||||
tokenIdentification,
|
||||
transferType,
|
||||
contractName,
|
||||
triggerCondition,
|
||||
userChoice,
|
||||
nftHash
|
||||
}
|
||||
} = tx;
|
||||
let obj = {
|
||||
@ -1364,8 +1632,8 @@
|
||||
let transactionHash = transaction.transactionHash,
|
||||
{ flodata, tokenAmount, tokenIdentification, type, nftHash } = transaction.parsedFloData,
|
||||
{ blockheight, vin, vout, confirmations } = transaction.transactionDetails;
|
||||
let receiver = "",
|
||||
sender = vin[0].addr;
|
||||
let sender = vin[0].addr;
|
||||
let receiver = sender
|
||||
for (let i = 0; i < vout.length; i++) {
|
||||
if (vout[i]["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
|
||||
receiver = vout[i]["scriptPubKey"]["addresses"][0];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user