asi-calculator/features/Prices/components/Prices.tsx

141 lines
4.1 KiB
TypeScript
Raw Normal View History

2024-03-29 19:54:14 +01:00
'use client'
import useSWR from 'swr'
2024-03-29 22:54:07 +01:00
import { useDebounce } from 'use-debounce'
2024-03-29 19:54:14 +01:00
import styles from './Prices.module.css'
import { Result } from './Result'
import {
tokens,
ratioOceanToAsi,
ratioAgixToAsi,
exampleBuyInUsd,
ratioFetToAsi
} from '@/constants'
2024-03-29 22:54:07 +01:00
import { useState } from 'react'
import { FormAmount } from './FormAmount'
import { fetcher } from '../utils'
2024-03-29 19:54:14 +01:00
export function Prices() {
2024-03-29 22:54:07 +01:00
const [amountSwap, setAmountSwap] = useState(100)
const [debouncedAmountSwap] = useDebounce(amountSwap, 500)
console.log(debouncedAmountSwap)
2024-03-29 19:54:14 +01:00
const { data: dataPrices } = useSWR(
`https://web3.kremalicious.com/api/prices/?tokens=${tokens.toString()}`,
fetcher
)
const { data: dataSwapOceanToAgix } = useSWR(
`/api/quote/?src=${tokens[0]}&dst=${tokens[2]}&amount=${
2024-03-29 22:54:07 +01:00
debouncedAmountSwap * 1e18
2024-03-29 19:54:14 +01:00
}`,
fetcher
)
const { data: dataSwapOceanToFet } = useSWR(
`/api/quote/?src=${tokens[0]}&dst=${tokens[1]}&amount=${
2024-03-29 22:54:07 +01:00
debouncedAmountSwap * 1e18
2024-03-29 19:54:14 +01:00
}`,
fetcher
)
const priceOcean = dataPrices?.[tokens[0]]?.usd || 0
const priceFet = dataPrices?.[tokens[1]]?.usd || 0
const priceAgix = dataPrices?.[tokens[2]]?.usd || 0
const priceAsi = priceFet
return (
<>
2024-03-29 22:54:07 +01:00
<div className={styles.header}>
<p>
1 OCEAN = {ratioOceanToAsi} ASI (fixed) = ${priceOcean}
</p>
<p>
1 AGIX = {ratioAgixToAsi} ASI (fixed) = ${priceAgix}
</p>
<p>1 Fet = 1 ASI (fixed) = ${priceAsi}</p>
2024-03-29 19:54:14 +01:00
</div>
2024-03-29 22:54:07 +01:00
<div className={styles.grid}>
<div className={styles.results}>
<h3>${exampleBuyInUsd} right now gets you:</h3>
<Result
symbol="OCEAN"
amount={exampleBuyInUsd / priceOcean}
amountAsi={(exampleBuyInUsd / priceOcean) * ratioOceanToAsi}
amountFiat={
(exampleBuyInUsd / priceOcean) * ratioOceanToAsi * priceAsi
}
/>
<Result
symbol="AGIX"
amount={exampleBuyInUsd / priceAgix}
amountAsi={(exampleBuyInUsd / priceAgix) * ratioAgixToAsi}
amountFiat={
(exampleBuyInUsd / priceAgix) * ratioAgixToAsi * priceAsi
}
/>
<Result
symbol="FET"
amount={exampleBuyInUsd / priceFet}
amountAsi={(exampleBuyInUsd / priceFet) * ratioFetToAsi}
amountFiat={(exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi}
/>
</div>
<div className={styles.results}>
<h3>
<FormAmount amount={amountSwap} setAmount={setAmountSwap} /> OCEAN
(${(debouncedAmountSwap * priceOcean).toFixed(2)}) right now gets
you:
</h3>
2024-03-29 19:54:14 +01:00
2024-03-29 22:54:07 +01:00
<Result
symbol="OCEAN"
amount={debouncedAmountSwap}
amountAsi={debouncedAmountSwap * ratioOceanToAsi}
amountFiat={debouncedAmountSwap * ratioOceanToAsi * priceAsi}
/>
2024-03-29 19:54:14 +01:00
2024-03-29 22:54:07 +01:00
<Result
symbol="AGIX"
amount={
dataSwapOceanToAgix?.dstAmount /
Number(`1e${dataSwapOceanToAgix?.dstToken?.decimals}`) || 0
}
amountAsi={
(dataSwapOceanToAgix?.dstAmount /
Number(`1e${dataSwapOceanToAgix?.dstToken?.decimals}`) || 0) *
ratioAgixToAsi
}
amountFiat={
(dataSwapOceanToAgix?.dstAmount /
Number(`1e${dataSwapOceanToAgix?.dstToken?.decimals}`) || 0) *
ratioAgixToAsi *
priceAsi
}
/>
2024-03-29 19:54:14 +01:00
2024-03-29 22:54:07 +01:00
<Result
symbol="FET"
amount={
dataSwapOceanToFet?.dstAmount /
Number(`1e${dataSwapOceanToFet?.dstToken?.decimals}`) || 0
}
amountAsi={
(dataSwapOceanToFet?.dstAmount /
Number(`1e${dataSwapOceanToFet?.dstToken?.decimals}`) || 0) *
ratioFetToAsi
}
amountFiat={
(dataSwapOceanToFet?.dstAmount /
Number(`1e${dataSwapOceanToFet?.dstToken?.decimals}`) || 0) *
priceAsi
}
/>
</div>
2024-03-29 19:54:14 +01:00
</div>
</>
)
}