Adding smart contract page
This commit is contained in:
sairaj mote
parent
8b8cda084a
commit
175a42c73d
118
css/main.css
118
css/main.css
@ -243,6 +243,13 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -792,8 +799,8 @@ header.grid-2 {
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo theme" "search search";
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "search theme";
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
@ -1134,7 +1141,84 @@ theme-toggle {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
#smart_contract_list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
|
||||
.sc-card {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: max(1rem, 1.5vw);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.sc-card__type {
|
||||
display: flex;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-right: auto;
|
||||
align-items: center;
|
||||
}
|
||||
.sc-card__type::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0.15rem;
|
||||
height: 1em;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
margin-right: 0.5rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.sc-card__info-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sc-card__info-link .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
#filter_s_c_popup {
|
||||
--width: min(36rem, 100%);
|
||||
}
|
||||
|
||||
#filter_s_c_popup__content {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.sc-filter {
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sc-filter.selected {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
.sc-filter.selected:hover {
|
||||
background-color: var(--accent-color) !important;
|
||||
}
|
||||
.sc-filter input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
.margin,
|
||||
.page {
|
||||
margin: 0 4vw;
|
||||
@ -1187,14 +1271,30 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
button {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
.interact:not([disabled]) {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.interact:not([disabled]):hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button:not([disabled]) {
|
||||
transition: background-color 0.3s, filter 0.3s;
|
||||
}
|
||||
.button:not([disabled]):hover {
|
||||
filter: contrast(2);
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
122
css/main.scss
122
css/main.scss
@ -222,7 +222,12 @@ sm-chip {
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -717,10 +722,8 @@ header.grid-2 {
|
||||
}
|
||||
#main_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"logo theme"
|
||||
"search search";
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "search theme";
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
@ -1036,7 +1039,84 @@ theme-toggle {
|
||||
min-width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
#smart_contract_page {
|
||||
}
|
||||
#smart_contract_list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
.sc-card {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: max(1rem, 1.5vw);
|
||||
border-radius: 0.5rem;
|
||||
&__type {
|
||||
display: flex;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-right: auto;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0.15rem;
|
||||
height: 1em;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
margin-right: 0.5rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
&__info-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#filter_s_c_popup {
|
||||
--width: min(36rem, 100%);
|
||||
}
|
||||
#filter_s_c_popup__content {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.sc-filter {
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
&.selected {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
&:hover {
|
||||
background-color: var(--accent-color) !important;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
.margin,
|
||||
.page {
|
||||
margin: 0 4vw;
|
||||
@ -1093,14 +1173,32 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
button {
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.interact:not([disabled]) {
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
.button:not([disabled]) {
|
||||
transition: background-color 0.3s, filter 0.3s;
|
||||
&:hover {
|
||||
filter: contrast(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
138
index.html
138
index.html
@ -64,7 +64,30 @@
|
||||
<h4 id="page_title"></h4>
|
||||
</div>
|
||||
<main id="page_container" class="flex flex-direction-column"></main>
|
||||
|
||||
<sm-popup id="filter_s_c_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<button class="popup__header__close" onclick="closePopup()">
|
||||
<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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3>
|
||||
Filter by
|
||||
</h3>
|
||||
</header>
|
||||
<div id="filter_s_c_popup__content" class="grid gap-1-5"></div>
|
||||
<footer class="flex gap-0-5">
|
||||
<button class="button button--colored margin-left-auto" onclick="clearFilter()">
|
||||
Clear
|
||||
</button>
|
||||
<button class="button button--primary" onclick="applyFilter()">
|
||||
Apply
|
||||
</button>
|
||||
</footer>
|
||||
</sm-popup>
|
||||
<!-- Set urls for token and flo Apis -->
|
||||
<script>
|
||||
const floGlobals = {
|
||||
@ -150,8 +173,65 @@
|
||||
function formatAmount(amount = 0, currency = 'inr') {
|
||||
if (!amount)
|
||||
return '0';
|
||||
return amount.toLocaleString(undefined, { currency, maximumFractionDigits: 8 })
|
||||
return amount.toLocaleString(undefined, { currency, maximumFractionDigits: 8, minimumFractionDigits: 0 })
|
||||
}
|
||||
let zIndex = 10
|
||||
// function required for popups or modals to appear
|
||||
function openPopup(popupId, pinned) {
|
||||
zIndex++
|
||||
getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
|
||||
getRef(popupId).show({ pinned })
|
||||
return getRef(popupId);
|
||||
}
|
||||
|
||||
// hides the popup or modal
|
||||
function closePopup() {
|
||||
if (popupStack.peek() === undefined)
|
||||
return;
|
||||
popupStack.peek().popup.hide()
|
||||
}
|
||||
document.addEventListener('popupopened', async e => {
|
||||
switch (e.target.id) {
|
||||
case 'filter_s_c_popup':
|
||||
function checkSelected(e) {
|
||||
const filterButton = e.target.closest('label')
|
||||
filterButton.classList.toggle('selected')
|
||||
}
|
||||
const scTypes = [['time-trigger', 'Timed Event'], ['external-trigger', 'External Trigger'], ['tokenswap', 'Token Swap']]
|
||||
renderElem(getRef('filter_s_c_popup__content'), html`
|
||||
<div class="grid gap-1">
|
||||
<h5>Type</h5>
|
||||
<div id="" class="flex flex-wrap gap-0-5">
|
||||
${scTypes.map(([type, title]) => html`
|
||||
<label class="sc-filter sc-type-filter interact">
|
||||
<input type="checkbox" name="sc-type-filter" value=${type} onchange=${checkSelected}/>
|
||||
<span class="sc-filter__name">${title}</span>
|
||||
</label>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<h5>Involved tokens</h5>
|
||||
<div id="token_filter_list" class="flex flex-wrap gap-0-5">
|
||||
${floGlobals.tokenList.map(token => html`
|
||||
<label class="sc-filter token-filter interact">
|
||||
<input type="checkbox" name="token-filter" value=${token} onchange=${checkSelected}/>
|
||||
<span class="sc-filter__name">${token}</span>
|
||||
</label>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
break;
|
||||
}
|
||||
})
|
||||
document.addEventListener('popupclosed', e => {
|
||||
zIndex--
|
||||
switch (e.target.id) {
|
||||
case 'saved_ids_popup':
|
||||
break;
|
||||
}
|
||||
})
|
||||
// fetch data and return json
|
||||
async function fetchJson(url, options = {}) {
|
||||
const response = await fetch(url, options)
|
||||
@ -347,13 +427,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function conditional(condition, value) {
|
||||
if (condition)
|
||||
return value
|
||||
else
|
||||
return ''
|
||||
}
|
||||
|
||||
const slideInLeft = [
|
||||
{
|
||||
opacity: 0,
|
||||
@ -959,6 +1032,52 @@
|
||||
await renderHome(state)
|
||||
})
|
||||
router.addRoute('home', renderHome)
|
||||
router.addRoute('smart-contracts', async state => {
|
||||
const smartContracts = floGlobals.smartContractList.map(contract => {
|
||||
const { tokenIdentification, acceptingToken, blockNumber, contractAddress, contractName, contractSubType,
|
||||
contractType, incorporationDate, oracle_address, price, sellingToken, status, transactionHash } = contract
|
||||
let type = ''
|
||||
switch (contractSubType) {
|
||||
case 'tokenswap':
|
||||
type = 'Token Swap'
|
||||
break;
|
||||
case 'time-trigger':
|
||||
type = 'Timed Event'
|
||||
break;
|
||||
case 'external-trigger':
|
||||
type = 'External Trigger'
|
||||
break;
|
||||
}
|
||||
return html`
|
||||
<li class="sc-card">
|
||||
<div class="flex align-center space-between">
|
||||
<p class="sc-card__type">${type}</p>
|
||||
<a href=${`#/contract/${contractName}-${contractAddress}`} class="sc-card__info-link">
|
||||
View details
|
||||
<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="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<h4>${contractName}</h4>
|
||||
|
||||
</li>
|
||||
`
|
||||
})
|
||||
renderElem(getRef("page_container"), html`
|
||||
<div id="smart-contract-page" class="page">
|
||||
<header>
|
||||
<div class='flex space-between'>
|
||||
<h2>Smart contracts</h2>
|
||||
<button class="button button--small button--colored gap-0-3" onclick=${() => openPopup('filter_s_c_popup')}>
|
||||
<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="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
<ul id="smart_contract_list">
|
||||
${smartContracts}
|
||||
</ul>
|
||||
</div>
|
||||
`)
|
||||
})
|
||||
router.addRoute('address', async state => {
|
||||
try {
|
||||
const [floAddress] = state.wildcards
|
||||
@ -1062,7 +1181,6 @@
|
||||
if (contractParticipants[participant].winningAmount)
|
||||
winners.push(render.contractChoiceCard(contractParticipants[participant]))
|
||||
}
|
||||
console.log(payeeAddress)
|
||||
renderElem(getRef("page_container"), html`
|
||||
<div id="contract_page" class="page">
|
||||
${status ? html` <div class=${`status ${status}`}>${status}</div> ` : ''}
|
||||
|
||||
4
scripts/components.min.js
vendored
4
scripts/components.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user