m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2024-12-22 09:23:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

interactive buy scenario

Browse Source
This commit is contained in:
Matthias Kretschmann 2024-03-30 17:22:30 +00:00
parent 66a49c29fd
commit a9ee907ba1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.module.css
View File

@ -14,7 +14,7 @@
}
.description {
font-size: clamp(1.1rem, 10vw, 1.75rem);
font-size: clamp(1.1rem, 10vw, 1.5rem);
}
.footer {

20
components/FormAmount.module.css
View File

@ -8,16 +8,30 @@
padding-left: 0.2rem;
padding-right: 0.2rem;
text-align: center;
background-color: rgba(var(--foreground-rgb), 0.15);
background-color: rgba(var(--background-end-rgb), 0.4);
border-radius: var(--border-radius);
}
.input:hover {
background-color: rgba(var(--foreground-rgb), 0.2);
background-color: rgba(var(--background-end-rgb), 0.5);
}
.input:focus-within {
outline: none;
background-color: rgba(var(--foreground-rgb), 0.3);
background-color: rgba(var(--background-end-rgb), 0.9);
color: rgb(var(--foreground-rgb-highlight));
}
@media (prefers-color-scheme: dark) {
.input {
background-color: rgba(var(--foreground-rgb), 0.15);
}
.input:hover {
background-color: rgba(var(--foreground-rgb), 0.2);
}
.input:focus-within {
background-color: rgba(var(--foreground-rgb), 0.3);
}
}

1
components/Prices.module.css
View File

@ -15,4 +15,5 @@
.results h3 {
margin-bottom: 1.5rem;
font-size: 1.1rem;
min-height: 52px;
}

32
components/Prices.tsx
View File

@ -8,7 +8,6 @@ import {
tokens,
ratioOceanToAsi,
ratioAgixToAsi,
exampleBuyInUsd,
ratioFetToAsi
} from '@/constants'
import { useState } from 'react'
@ -19,6 +18,8 @@ import { Content } from '@/components/Content'
export function Prices() {
const [amountSwap, setAmountSwap] = useState(100)
const [debouncedAmountSwap] = useDebounce(amountSwap, 500)
const [amountBuy, setAmountBuy] = useState(100)
const [debouncedAmountBuy] = useDebounce(amountBuy, 500)
const { data: dataPrices } = useSWR(
`/api/prices/?tokens=${tokens.toString()}`,
@ -47,7 +48,8 @@ export function Prices() {
<h3>
Swapping{' '}
<FormAmount amount={amountSwap} setAmount={setAmountSwap} /> OCEAN (
{formatNumber(debouncedAmountSwap * priceOcean, 'USD')}) gets you:
{formatNumber(debouncedAmountSwap * priceOcean, 'USD')}) right now
gets you:
</h3>
<Result
@ -98,43 +100,49 @@ export function Prices() {
</div>
<div className={styles.results}>
<h3>Buying with ${exampleBuyInUsd} right now gets you:</h3>
<h3>
Buying with $
<FormAmount amount={amountBuy} setAmount={setAmountBuy} /> right now
gets you:
</h3>
<Result
tokenSymbol="OCEAN"
tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
amount={priceOcean ? exampleBuyInUsd / priceOcean : 0}
amount={priceOcean ? debouncedAmountBuy / priceOcean : 0}
amountAsi={
priceOcean ? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi : 0
priceOcean
? (debouncedAmountBuy / priceOcean) * ratioOceanToAsi
: 0
}
amountFiat={
priceOcean
? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi * priceAsi
? (debouncedAmountBuy / priceOcean) * ratioOceanToAsi * priceAsi
: 0
}
/>
<Result
tokenSymbol="AGIX"
tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
amount={priceAgix ? exampleBuyInUsd / priceAgix : 0}
amount={priceAgix ? debouncedAmountBuy / priceAgix : 0}
amountAsi={
priceAgix ? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi : 0
priceAgix ? (debouncedAmountBuy / priceAgix) * ratioAgixToAsi : 0
}
amountFiat={
priceAgix
? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi * priceAsi
? (debouncedAmountBuy / priceAgix) * ratioAgixToAsi * priceAsi
: 0
}
/>
<Result
tokenSymbol="FET"
tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
amount={priceFet ? exampleBuyInUsd / priceFet : 0}
amount={priceFet ? debouncedAmountBuy / priceFet : 0}
amountAsi={
priceFet ? (exampleBuyInUsd / priceFet) * ratioFetToAsi : 0
priceFet ? (debouncedAmountBuy / priceFet) * ratioFetToAsi : 0
}
amountFiat={
priceFet
? (exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi
? (debouncedAmountBuy / priceFet) * ratioFetToAsi * priceAsi
: 0
}
/>