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 { .description {
font-size: clamp(1.1rem, 10vw, 1.75rem); font-size: clamp(1.1rem, 10vw, 1.5rem);
} }
.footer { .footer {

20
components/FormAmount.module.css
View File

@ -8,16 +8,30 @@
padding-left: 0.2rem; padding-left: 0.2rem;
padding-right: 0.2rem; padding-right: 0.2rem;
text-align: center; 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); border-radius: var(--border-radius);
} }
.input:hover { .input:hover {
background-color: rgba(var(--foreground-rgb), 0.2); background-color: rgba(var(--background-end-rgb), 0.5);
} }
.input:focus-within { .input:focus-within {
outline: none; 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)); 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 { .results h3 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.1rem; font-size: 1.1rem;
min-height: 52px;
} }

32
components/Prices.tsx
View File

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