asi-calculator/components/Content/Content.tsx
2024-03-30 18:11:24 +00:00

51 lines
1.5 KiB
TypeScript

'use client'
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
import styles from './Content.module.css'
import { usePrices } from '@/hooks'
export function Content() {
const prices = usePrices()
return (
<div className={styles.content}>
<p>
All displayed values should be seen as estimates. Except for the{' '}
<a href="https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e">
fixed ASI exchange rate
</a>
, the fiat values fetched from{' '}
<a href="https://coingecko.com">Coingecko</a> and the token swap quotes
from <a href="https://uniswap.org">Uniswap</a> v3 routes are constantly
changing.
</p>
<p>
There is no guarantee they reflect the value of your investment once the
actual ASI swap mechanism is released. Use at your own risk.
</p>
<ul className={styles.calculationBase}>
<li>
1 OCEAN = {ratioOceanToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.ocean}
</li>
<li>
1 AGIX = {ratioAgixToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.agix}
</li>
<li>
1 Fet = {ratioFetToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.fet}
</li>
<li>
1 ASI
<br />= ${prices.asi}
</li>
</ul>
</div>
)
}