Bug fixes and UI improvements
-- fixed calculation error when rounding to 8 decimal places
This commit is contained in:
sairaj mote
parent
c9ea1e00bb
commit
83df56f259
@ -16,7 +16,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #504dff;
|
||||
--accent-color: #516beb;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
@ -30,7 +30,7 @@ body {
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #a3a1ff;
|
||||
--accent-color: #a4b3ff;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
@ -62,11 +62,22 @@ a:where([class]):focus-visible {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
a:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
a.button {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -77,31 +88,47 @@ button,
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
button:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
justify-content: center;
|
||||
}
|
||||
.button--primary, .button--danger {
|
||||
color: rgba(var(--background-color), 1) !important;
|
||||
}
|
||||
.button--primary .icon, .button--danger .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
.button--danger {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
.button--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
.cta {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
a:-webkit-any-link:focus-visible {
|
||||
@ -151,23 +178,6 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
@ -193,26 +203,6 @@ ul {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -443,10 +433,9 @@ ul {
|
||||
.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.3rem;
|
||||
margin-right: 1rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
.logo h4 {
|
||||
text-transform: capitalize;
|
||||
@ -635,13 +624,18 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
#user_popup_button {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
@ -732,13 +726,13 @@ sm-checkbox {
|
||||
.listed-asset__countdown .icon {
|
||||
margin-left: 0.3rem;
|
||||
overflow: visible;
|
||||
stroke-width: 4;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
}
|
||||
.listed-asset__countdown .icon .path-a {
|
||||
stroke: var(--accent-color);
|
||||
stroke-dashoffset: var(--path-length, 0);
|
||||
stroke-dasharray: 65;
|
||||
stroke-dasharray: 63;
|
||||
}
|
||||
.listed-asset__countdown .icon .path-b {
|
||||
stroke: rgba(var(--text-color), 0.2);
|
||||
@ -1212,6 +1206,14 @@ sm-checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#user_popup_button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main_navbar__item--active .item__title {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
@ -1220,10 +1222,6 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
@ -1232,28 +1230,16 @@ sm-checkbox {
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
@ -1287,6 +1273,10 @@ sm-checkbox {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
#user_popup_button {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
flex-direction: column;
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -16,7 +16,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #504dff;
|
||||
--accent-color: #516beb;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
@ -30,7 +30,7 @@ body {
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #a3a1ff;
|
||||
--accent-color: #a4b3ff;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
@ -63,11 +63,21 @@ a:where([class]) {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
a.button {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
button {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -75,30 +85,46 @@ button,
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.button {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
justify-content: center;
|
||||
&--primary {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
&--primary,
|
||||
&--danger {
|
||||
color: rgba(var(--background-color), 1) !important;
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
&--primary {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&--danger {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
&--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
}
|
||||
.cta {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
@ -140,22 +166,6 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
@ -182,26 +192,6 @@ ul {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -422,11 +412,9 @@ ul {
|
||||
.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.3rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
margin-right: auto;
|
||||
h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
@ -601,13 +589,17 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
#user_popup_button {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#main_navbar {
|
||||
width: 100%;
|
||||
@ -692,12 +684,12 @@ sm-checkbox {
|
||||
.icon {
|
||||
margin-left: 0.3rem;
|
||||
overflow: visible;
|
||||
stroke-width: 4;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
.path-a {
|
||||
stroke: var(--accent-color);
|
||||
stroke-dashoffset: var(--path-length, 0);
|
||||
stroke-dasharray: 65;
|
||||
stroke-dasharray: 63;
|
||||
}
|
||||
.path-b {
|
||||
stroke: rgba(var(--text-color), 0.2);
|
||||
@ -1110,6 +1102,12 @@ sm-checkbox {
|
||||
.empty-state {
|
||||
align-self: center;
|
||||
}
|
||||
#main_header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#user_popup_button {
|
||||
width: 100%;
|
||||
}
|
||||
.main_navbar__item--active {
|
||||
.item__title {
|
||||
transform: translateY(100%);
|
||||
@ -1119,9 +1117,6 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
}
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
@ -1129,26 +1124,14 @@ sm-checkbox {
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
@ -1175,6 +1158,9 @@ sm-checkbox {
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
}
|
||||
#user_popup_button {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
flex-direction: column;
|
||||
|
||||
@ -75,12 +75,13 @@
|
||||
</div>
|
||||
<theme-toggle id="theme_toggle"></theme-toggle>
|
||||
<button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
<div class="my-flo-id"></div>
|
||||
</button>
|
||||
</header>
|
||||
<section id="pages_container">
|
||||
@ -1447,8 +1448,14 @@
|
||||
return [`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`, ((diff % 3600000) / 60000).toFixed(2)]
|
||||
}
|
||||
|
||||
// remove digitals after specified decimal places without rounding
|
||||
function toFixed(num, fixed = 8) {
|
||||
var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
|
||||
return parseFloat(num.toString().match(re)[0]);
|
||||
}
|
||||
|
||||
function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
|
||||
return parseFloat((parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType]).toFixed(8))
|
||||
return toFixed(parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType], 8)
|
||||
}
|
||||
|
||||
function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
|
||||
@ -1497,7 +1504,7 @@
|
||||
floGlobals.countDowns.intervals[asset] = setInterval(() => {
|
||||
const [timeLeft, minutes] = getTimeLeft(countDown)
|
||||
clone.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
|
||||
const pathLength = 65 - Math.ceil((minutes / 60) * 65)
|
||||
const pathLength = 63 - Math.ceil((minutes / 60) * 63)
|
||||
clone.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
|
||||
}, 1000);
|
||||
floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
|
||||
@ -1725,7 +1732,7 @@
|
||||
function getChartTheme() {
|
||||
const theme = getRef('theme_toggle').value
|
||||
const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
|
||||
const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
|
||||
const accentColor = window.getComputedStyle(document.body).getPropertyValue('--accent-color')
|
||||
return {
|
||||
chart: {
|
||||
layout: {
|
||||
@ -1841,11 +1848,11 @@
|
||||
const unitValue = getSuggestedPrice()
|
||||
const fraction = parseFloat(target.value)
|
||||
if (tradeType === 'buy') {
|
||||
getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(8))
|
||||
getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / getSuggestedPrice()).toFixed(8))
|
||||
getRef('get_total').value = toFixed(fraction * allTokens['rupee'].net)
|
||||
getRef('get_quantity').value = toFixed((allTokens['rupee'].net * fraction) / getSuggestedPrice())
|
||||
} else {
|
||||
getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * getSuggestedPrice()).toFixed(8))
|
||||
getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(8))
|
||||
getRef('get_total').value = toFixed(fraction * allTokens[selectedAsset].net * getSuggestedPrice())
|
||||
getRef('get_quantity').value = toFixed(allTokens[selectedAsset].net * fraction)
|
||||
|
||||
}
|
||||
}
|
||||
@ -1866,11 +1873,11 @@
|
||||
})
|
||||
getRef('get_quantity').addEventListener('keyup', e => {
|
||||
const unitValue = getSuggestedPrice()
|
||||
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(8)) || 0
|
||||
getRef('get_total').value = toFixed(parseFloat(e.target.value) * unitValue)
|
||||
})
|
||||
getRef('get_total').addEventListener('keyup', e => {
|
||||
const unitValue = getSuggestedPrice()
|
||||
getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(8)) || 0
|
||||
getRef('get_quantity').value = toFixed(parseFloat(e.target.value) / unitValue)
|
||||
})
|
||||
|
||||
getRef('wallet_actions').addEventListener('click', e => {
|
||||
@ -1879,7 +1886,7 @@
|
||||
const type = target.value
|
||||
const asset = getRef('wallet_asset_selector').value
|
||||
|
||||
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${parseFloat(allTokens[asset].net.toFixed(8))} ${asset}`
|
||||
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${toFixed(allTokens[asset].net)} ${asset}`
|
||||
getRef('wallet_popup__cta').textContent = `${type} ${asset}`
|
||||
getRef('wallet_popup__cta').setAttribute('value', type)
|
||||
getRef('wallet_popup__title').textContent = `${type} ${asset}`
|
||||
@ -1966,7 +1973,7 @@
|
||||
const target = e.target.closest('button')
|
||||
const asset = getRef('wallet_asset_selector').value
|
||||
const fraction = parseFloat(target.value)
|
||||
let total = parseFloat((allTokens[asset].net * fraction).toFixed(8));
|
||||
let total = toFixed(allTokens[asset].net * fraction);
|
||||
if (asset == 'FLO' && fraction === 1 & total > 0.1) {
|
||||
total -= 0.1;
|
||||
}
|
||||
@ -2242,10 +2249,10 @@
|
||||
case 'confirm_trade_popup':
|
||||
const asset = pagesData.params.asset;
|
||||
const quantity = parseFloat(getRef('get_quantity').value)
|
||||
const currentPrice = parseFloat(floGlobals.exchangeRates[asset].toFixed(8));
|
||||
const price = parseFloat(getSuggestedPrice().toFixed(8));
|
||||
const currentPrice = toFixed(floGlobals.exchangeRates[asset]);
|
||||
const price = toFixed(getSuggestedPrice());
|
||||
const total = formatAmount(parseFloat(getRef('get_total').value))
|
||||
const minTotal = formatAmount(parseFloat((currentPrice * quantity).toFixed(8)))
|
||||
const minTotal = formatAmount(toFixed(currentPrice * quantity))
|
||||
getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
|
||||
getRef('confirm_trade__details').innerHTML = `
|
||||
<div class="grid">
|
||||
@ -2421,7 +2428,7 @@
|
||||
floGlobals.countDowns.intervals[asset] = setInterval(() => {
|
||||
const [timeLeft, minutes] = getTimeLeft(countDown[asset])
|
||||
listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
|
||||
const pathLength = 65 - Math.ceil((minutes / 60) * 65)
|
||||
const pathLength = 63 - Math.ceil((minutes / 60) * 63)
|
||||
listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
|
||||
}, 1000)
|
||||
if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
|
||||
@ -2485,6 +2492,7 @@
|
||||
console.debug(acc);
|
||||
//Element display
|
||||
document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide'))
|
||||
document.querySelectorAll(".my-flo-id").forEach(elem => elem.textContent = acc.floID)
|
||||
getRef("user_id").value = acc.floID;
|
||||
getRef("sink_id").value = acc.sinkID;
|
||||
if (acc.subAdmin)
|
||||
|
||||
@ -743,6 +743,7 @@ smNotifications.innerHTML = `
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);
|
||||
touch-action: none;
|
||||
}
|
||||
.icon-container:not(:empty){
|
||||
@ -803,6 +804,25 @@ smNotifications.innerHTML = `
|
||||
.close:active{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.action{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.2rem;
|
||||
border: none;
|
||||
background-color: rgba(var(--text-color, (17,17,17)), 0.03);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: var(--accent-color, teal);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
.notification-panel:not(:empty){
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 640px){
|
||||
.notification-panel{
|
||||
max-width: 28rem;
|
||||
@ -880,7 +900,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
}
|
||||
|
||||
createNotification(message, options = {}) {
|
||||
const { pinned = false, icon = '' } = options;
|
||||
const { pinned = false, icon = '', action } = options;
|
||||
const notification = document.createElement('output')
|
||||
notification.id = this.randString(8)
|
||||
notification.classList.add('notification');
|
||||
@ -889,6 +909,11 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
<div class="icon-container">${icon}</div>
|
||||
<p>${message}</p>
|
||||
`;
|
||||
if (action) {
|
||||
composition += `
|
||||
<button class="action">${action.label}</button>
|
||||
`
|
||||
}
|
||||
if (pinned) {
|
||||
notification.classList.add('pinned');
|
||||
composition += `
|
||||
@ -930,6 +955,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
e.target.commitStyles()
|
||||
e.target.cancel()
|
||||
}
|
||||
if (notification.querySelector('.action'))
|
||||
notification.querySelector('.action').addEventListener('click', options.action.callback)
|
||||
return notification.id;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user