mirror of
https://github.com/kremalicious/asi-calculator.git
synced 2024-12-23 01:39:40 +01:00
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
|
|
import { FormAmount } from '../FormAmount'
|
|
import { Result } from '../ResultRow'
|
|
import { useState } from 'react'
|
|
import { useDebounce } from 'use-debounce'
|
|
import styles from './styles.module.css'
|
|
import { usePrices } from '@/hooks'
|
|
|
|
export function Buy() {
|
|
const prices = usePrices()
|
|
const [amountBuy, setAmountBuy] = useState(100)
|
|
const [debouncedAmountBuy] = useDebounce(amountBuy, 500)
|
|
|
|
return (
|
|
<div className={styles.results}>
|
|
<h3>
|
|
Buying with $
|
|
<FormAmount amount={amountBuy} setAmount={setAmountBuy} /> right now
|
|
gets you:
|
|
</h3>
|
|
<Result
|
|
tokenSymbol="OCEAN"
|
|
tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
|
|
amount={prices.ocean ? debouncedAmountBuy / prices.ocean : 0}
|
|
amountAsi={
|
|
prices.ocean
|
|
? (debouncedAmountBuy / prices.ocean) * ratioOceanToAsi
|
|
: 0
|
|
}
|
|
amountFiat={
|
|
prices.ocean
|
|
? (debouncedAmountBuy / prices.ocean) * ratioOceanToAsi * prices.asi
|
|
: 0
|
|
}
|
|
/>
|
|
<Result
|
|
tokenSymbol="AGIX"
|
|
tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
|
|
amount={prices.agix ? debouncedAmountBuy / prices.agix : 0}
|
|
amountAsi={
|
|
prices.agix ? (debouncedAmountBuy / prices.agix) * ratioAgixToAsi : 0
|
|
}
|
|
amountFiat={
|
|
prices.agix
|
|
? (debouncedAmountBuy / prices.agix) * ratioAgixToAsi * prices.asi
|
|
: 0
|
|
}
|
|
/>
|
|
<Result
|
|
tokenSymbol="FET"
|
|
tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
|
|
amount={prices.fet ? debouncedAmountBuy / prices.fet : 0}
|
|
amountAsi={
|
|
prices.fet ? (debouncedAmountBuy / prices.fet) * ratioFetToAsi : 0
|
|
}
|
|
amountFiat={
|
|
prices.fet
|
|
? (debouncedAmountBuy / prices.fet) * ratioFetToAsi * prices.asi
|
|
: 0
|
|
}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|