+
{formatNumber(amountAsi || 0, 'ASI')}
diff --git a/components/Strategies/Buy.tsx b/components/Strategies/Buy.tsx
index 0386953..29f5534 100644
--- a/components/Strategies/Buy.tsx
+++ b/components/Strategies/Buy.tsx
@@ -9,7 +9,7 @@ import { usePrices } from '@/hooks'
import { FormAmount } from '@/components/FormAmount'
export function Buy() {
- const prices = usePrices()
+ const { prices, isValidating } = usePrices()
const [amount, setAmount] = useState(100)
const [debouncedAmount] = useDebounce(amount, 500)
@@ -32,6 +32,7 @@ export function Buy() {
? (debouncedAmount / prices.ocean) * ratioOceanToAsi * prices.asi
: 0
}
+ isValidating={isValidating}
/>
)
diff --git a/components/Strategies/Swap.tsx b/components/Strategies/Swap.tsx
index 49a4cd9..88b2fc5 100644
--- a/components/Strategies/Swap.tsx
+++ b/components/Strategies/Swap.tsx
@@ -16,20 +16,22 @@ import { usePrices } from '@/hooks'
import { FormAmount, type Token } from '@/components/FormAmount'
export function Swap() {
- const prices = usePrices()
+ const { prices, isValidating: isValidatingPrices } = usePrices()
const [amount, setAmount] = useState(100)
const [debouncedAmount] = useDebounce(amount, 500)
const [token, setToken] = useState
('ocean')
- const { data: dataSwapOceanToAgix } = useSWR(
- `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[2]}&amountIn=${debouncedAmount}`,
- fetcher
- )
+ const { data: dataSwapOceanToAgix, isValidating: isValidatingOceanToAgix } =
+ useSWR(
+ `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[2]}&amountIn=${debouncedAmount}`,
+ fetcher
+ )
- const { data: dataSwapOceanToFet } = useSWR(
- `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[1]}&amountIn=${debouncedAmount}`,
- fetcher
- )
+ const { data: dataSwapOceanToFet, isValidating: isValidatingOceanToFet } =
+ useSWR(
+ `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[1]}&amountIn=${debouncedAmount}`,
+ fetcher
+ )
return (
@@ -51,6 +53,11 @@ export function Swap() {
amountAsi={debouncedAmount * ratioOceanToAsi}
amountFiat={debouncedAmount * ratioOceanToAsi * prices.asi}
amountOriginalFiat={token ? debouncedAmount * prices[token] : undefined}
+ isValidating={
+ isValidatingOceanToAgix ||
+ isValidatingOceanToFet ||
+ isValidatingPrices
+ }
/>
)
diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css
index 52f936b..a79bd4d 100644
--- a/components/Strategies/styles.module.css
+++ b/components/Strategies/styles.module.css
@@ -1,23 +1,12 @@
.results {
border: 1px solid rgba(var(--foreground-rgb), 0.2);
border-radius: var(--border-radius);
- padding: 1.25rem 1.5rem;
+ padding: 1.5rem 2rem;
}
-/* .results form {
- border-color: transparent;
-}
-
-.results input {
- background: none;
-}
-
-.results:hover form {
- border-color: rgba(var(--foreground-rgb), 0.2);
-} */
-
.title {
margin-bottom: 1.5rem;
font-size: 1.2rem;
color: rgb(var(--foreground-rgb-highlight));
+ min-height: 58px;
}
diff --git a/hooks/use-prices.tsx b/hooks/use-prices.tsx
index 0ab4dcf..6ec0c0c 100644
--- a/hooks/use-prices.tsx
+++ b/hooks/use-prices.tsx
@@ -4,16 +4,19 @@ import { tokens } from '@/constants'
import { fetcher } from '@/utils'
import useSWR from 'swr'
-export function usePrices(): { [key: string]: number } {
- const { data: dataPrices } = useSWR(
+export function usePrices(): {
+ prices: { ocean: number; fet: number; agix: number; asi: number }
+ isValidating: boolean
+} {
+ const { data, isValidating } = useSWR(
`/api/prices/?tokens=${tokens.toString()}`,
fetcher
)
- const ocean = dataPrices?.[tokens[0]]?.usd || 0
- const fet = dataPrices?.[tokens[1]]?.usd || 0
- const agix = dataPrices?.[tokens[2]]?.usd || 0
+ const ocean = data?.[tokens[0]]?.usd || 0
+ const fet = data?.[tokens[1]]?.usd || 0
+ const agix = data?.[tokens[2]]?.usd || 0
const asi = fet
- return { ocean, fet, agix, asi }
+ return { prices: { ocean, fet, agix, asi }, isValidating }
}