2024-03-30 19:11:24 +01:00
|
|
|
'use client'
|
|
|
|
|
2024-09-19 22:01:39 +02:00
|
|
|
import {
|
|
|
|
ratioAgixToAsi,
|
|
|
|
ratioCudosToAsi,
|
|
|
|
ratioFetToAsi,
|
|
|
|
ratioOceanToAsi
|
|
|
|
} from '@/constants'
|
2024-04-01 14:42:08 +02:00
|
|
|
import { usePrices } from '@/features/prices'
|
2024-04-16 13:04:00 +02:00
|
|
|
import { FormAmount, Result, usePersistentState } from '@/features/strategies'
|
2024-04-01 14:42:08 +02:00
|
|
|
import stylesShared from '@/features/strategies/styles/shared.module.css'
|
2024-07-26 14:16:59 +02:00
|
|
|
import { getTokenBySymbol } from '@/lib'
|
|
|
|
import { useDebounce } from 'use-debounce'
|
2024-03-30 19:11:24 +01:00
|
|
|
|
|
|
|
export function Buy() {
|
2024-04-01 02:15:51 +02:00
|
|
|
const { prices, isValidating, isLoading } = usePrices()
|
2024-04-16 13:04:00 +02:00
|
|
|
const [amount, setAmount] = usePersistentState('buyAmount', 100)
|
2024-03-30 20:50:51 +01:00
|
|
|
const [debouncedAmount] = useDebounce(amount, 500)
|
2024-03-30 19:11:24 +01:00
|
|
|
|
|
|
|
return (
|
2024-03-30 20:50:51 +01:00
|
|
|
<div className={stylesShared.results}>
|
|
|
|
<h3 className={stylesShared.title}>
|
|
|
|
Buying with{' '}
|
|
|
|
<FormAmount amount={amount} setAmount={setAmount} token="usd" isFiat />{' '}
|
|
|
|
right now gets you:
|
2024-03-30 19:11:24 +01:00
|
|
|
</h3>
|
|
|
|
<Result
|
2024-03-31 16:58:26 +02:00
|
|
|
token={getTokenBySymbol('OCEAN')}
|
2024-04-09 14:46:15 +02:00
|
|
|
amount={debouncedAmount / prices.ocean.usd}
|
|
|
|
amountAsi={(debouncedAmount / prices.ocean.usd) * ratioOceanToAsi}
|
2024-03-30 19:11:24 +01:00
|
|
|
amountFiat={
|
2024-04-09 14:46:15 +02:00
|
|
|
(debouncedAmount / prices.ocean.usd) *
|
|
|
|
ratioOceanToAsi *
|
|
|
|
prices.asi.usd
|
2024-03-30 19:11:24 +01:00
|
|
|
}
|
2024-03-31 05:32:11 +02:00
|
|
|
isValidating={isValidating}
|
2024-04-01 02:15:51 +02:00
|
|
|
isLoading={isLoading}
|
2024-03-30 19:11:24 +01:00
|
|
|
/>
|
|
|
|
<Result
|
2024-03-31 16:58:26 +02:00
|
|
|
token={getTokenBySymbol('AGIX')}
|
2024-04-09 14:46:15 +02:00
|
|
|
amount={debouncedAmount / prices.agix.usd}
|
|
|
|
amountAsi={(debouncedAmount / prices.agix.usd) * ratioAgixToAsi}
|
2024-03-30 19:11:24 +01:00
|
|
|
amountFiat={
|
2024-04-09 14:46:15 +02:00
|
|
|
(debouncedAmount / prices.agix.usd) * ratioAgixToAsi * prices.asi.usd
|
2024-03-30 19:11:24 +01:00
|
|
|
}
|
2024-03-31 05:32:11 +02:00
|
|
|
isValidating={isValidating}
|
2024-04-01 02:15:51 +02:00
|
|
|
isLoading={isLoading}
|
2024-03-30 19:11:24 +01:00
|
|
|
/>
|
2024-09-19 22:01:39 +02:00
|
|
|
<Result
|
|
|
|
token={getTokenBySymbol('CUDOS')}
|
|
|
|
amount={debouncedAmount / prices.cudos.usd}
|
|
|
|
amountAsi={(debouncedAmount / prices.cudos.usd) * ratioCudosToAsi}
|
|
|
|
amountFiat={
|
|
|
|
(debouncedAmount / prices.cudos.usd) *
|
|
|
|
ratioCudosToAsi *
|
|
|
|
prices.asi.usd
|
|
|
|
}
|
|
|
|
isValidating={isValidating}
|
|
|
|
isLoading={isLoading}
|
|
|
|
/>
|
2024-03-30 19:11:24 +01:00
|
|
|
<Result
|
2024-03-31 16:58:26 +02:00
|
|
|
token={getTokenBySymbol('FET')}
|
2024-04-09 14:46:15 +02:00
|
|
|
amount={debouncedAmount / prices.fet.usd}
|
|
|
|
amountAsi={(debouncedAmount / prices.fet.usd) * ratioFetToAsi}
|
|
|
|
amountFiat={
|
|
|
|
(debouncedAmount / prices.fet.usd) * ratioFetToAsi * prices.asi.usd
|
|
|
|
}
|
2024-03-31 05:32:11 +02:00
|
|
|
isValidating={isValidating}
|
2024-04-01 02:15:51 +02:00
|
|
|
isLoading={isLoading}
|
2024-03-30 19:11:24 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|