diff --git a/components/CalculationBaseOutput/CalculationBase.tsx b/components/CalculationBaseOutput/CalculationBase.tsx index c1a5846..7187bcc 100644 --- a/components/CalculationBaseOutput/CalculationBase.tsx +++ b/components/CalculationBaseOutput/CalculationBase.tsx @@ -3,7 +3,7 @@ import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants' import styles from './CalculationBase.module.css' import { usePrices } from '@/hooks' -import { Label } from '../Label' +import { Label } from '@/components/Label' export function CalculationBase() { const { prices, isValidating } = usePrices() diff --git a/components/FormAmount/FormAmount.tsx b/components/FormAmount/FormAmount.tsx index 587769b..137c28e 100644 --- a/components/FormAmount/FormAmount.tsx +++ b/components/FormAmount/FormAmount.tsx @@ -2,7 +2,7 @@ import { InputAmount } from '@/components/FormAmount/Inputs/InputAmount' import { InputToken } from './Inputs/InputToken' import styles from './FormAmount.module.css' import { Dispatch, SetStateAction } from 'react' -import { Token } from './types' +import { TokenSymbol } from '@/types' export function FormAmount({ amount, @@ -13,8 +13,8 @@ export function FormAmount({ }: { amount: number setAmount: Dispatch> - token: Token | string - setToken?: Dispatch> + token: TokenSymbol | string + setToken?: Dispatch> isFiat?: boolean }) { return ( diff --git a/components/FormAmount/Inputs/InputToken.tsx b/components/FormAmount/Inputs/InputToken.tsx index ac110ee..ef15601 100644 --- a/components/FormAmount/Inputs/InputToken.tsx +++ b/components/FormAmount/Inputs/InputToken.tsx @@ -1,33 +1,35 @@ import { Dispatch, SetStateAction } from 'react' import styles from './InputToken.module.css' import { CaretDownIcon } from '@radix-ui/react-icons' -import { Token } from '../types' +import { TokenSymbol } from '@/types' export function InputToken({ token, setToken, isFiat }: { - token: Token | string + token: TokenSymbol | string isFiat?: boolean - setToken?: Dispatch> + setToken?: Dispatch> }) { return ( diff --git a/components/FormAmount/index.tsx b/components/FormAmount/index.tsx index c10166f..02478c5 100644 --- a/components/FormAmount/index.tsx +++ b/components/FormAmount/index.tsx @@ -1,2 +1 @@ export * from './FormAmount' -export * from './types' diff --git a/components/FormAmount/types.ts b/components/FormAmount/types.ts deleted file mode 100644 index 5cb3977..0000000 --- a/components/FormAmount/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type Token = 'ocean' | 'fet' | 'agix' | undefined diff --git a/components/Strategies/Swap.tsx b/components/Strategies/Swap/Results.tsx similarity index 68% rename from components/Strategies/Swap.tsx rename to components/Strategies/Swap/Results.tsx index 00b060c..8d5f1a0 100644 --- a/components/Strategies/Swap.tsx +++ b/components/Strategies/Swap/Results.tsx @@ -1,58 +1,49 @@ -'use client' - +import { Result } from '@/components/ResultRow' import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi, tokens } from '@/constants' -import { fetcher } from '@/utils' -import { Result } from '@/components/ResultRow' -import stylesShared from './styles.module.css' -import { useState } from 'react' -import useSWR from 'swr' -import { useDebounce } from 'use-debounce' import { usePrices } from '@/hooks' -import { FormAmount, type Token } from '@/components/FormAmount' +import { fetcher } from '@/utils' +import useSWR from 'swr' +import { TokenSymbol } from '@/types' -export function Swap() { +export function SwapResults({ + token, + amount +}: { + token: TokenSymbol + amount: number +}) { const { prices, isValidating: isValidatingPrices } = usePrices() - const [amount, setAmount] = useState(100) - const [debouncedAmount] = useDebounce(amount, 500) - const [token, setToken] = useState('ocean') - const { data: dataSwapOceanToAgix, isValidating: isValidatingOceanToAgix } = useSWR( - `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[2]}&amountIn=${debouncedAmount}`, + `/api/quote/?tokenIn=${tokens[0].address}&tokenOut=${tokens[2].address}&amountIn=${amount}`, fetcher ) const { data: dataSwapOceanToFet, isValidating: isValidatingOceanToFet } = useSWR( - `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[1]}&amountIn=${debouncedAmount}`, + `/api/quote/?tokenIn=${tokens[0].address}&tokenOut=${tokens[1].address}&amountIn=${amount}`, fetcher ) return ( -
-

- Holding or swapping{' '} - {' '} - right now gets you: -

- + <> -
+ ) } diff --git a/components/Strategies/Swap/Swap.tsx b/components/Strategies/Swap/Swap.tsx new file mode 100644 index 0000000..890bafa --- /dev/null +++ b/components/Strategies/Swap/Swap.tsx @@ -0,0 +1,31 @@ +'use client' + +import stylesShared from '../styles.module.css' +import { useState } from 'react' +import { useDebounce } from 'use-debounce' +import { FormAmount } from '@/components/FormAmount' +import { SwapResults } from './Results' +import { TokenSymbol } from '@/types' + +export function Swap() { + const [amount, setAmount] = useState(100) + const [debouncedAmount] = useDebounce(amount, 500) + const [token, setToken] = useState('OCEAN') + + return ( +
+

+ Holding or swapping{' '} + {' '} + right now gets you: +

+ + +
+ ) +} diff --git a/components/Strategies/index.tsx b/components/Strategies/index.tsx index 5b6d400..0f0b6ce 100644 --- a/components/Strategies/index.tsx +++ b/components/Strategies/index.tsx @@ -1,2 +1,2 @@ export * from './Buy' -export * from './Swap' +export * from './Swap/Swap' diff --git a/constants.ts b/constants.ts index d6ba5ed..9705db9 100644 --- a/constants.ts +++ b/constants.ts @@ -1,9 +1,11 @@ +import { Token } from '@/types' + export const ratioOceanToAsi = 0.433226 export const ratioAgixToAsi = 0.43335 export const ratioFetToAsi = 1 -export const tokens: `0x${string}`[] = [ - '0x967da4048cd07ab37855c090aaf366e4ce1b9f48', // OCEAN - '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85', // FET - '0x5b7533812759b45c2b44c19e320ba2cd2681b542' // AGIX +export const tokens: Token[] = [ + { symbol: 'OCEAN', address: '0x967da4048cd07ab37855c090aaf366e4ce1b9f48' }, + { symbol: 'FET', address: '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85' }, + { symbol: 'AGIX', address: '0x5b7533812759b45c2b44c19e320ba2cd2681b542' } ] diff --git a/hooks/use-prices.tsx b/hooks/use-prices.tsx index e0e0486..caf63e9 100644 --- a/hooks/use-prices.tsx +++ b/hooks/use-prices.tsx @@ -1,22 +1,33 @@ -'use client' - import { tokens } from '@/constants' -import { fetcher } from '@/utils' +import { fetcher, getTokenAddressBySymbol } from '@/utils' import useSWR from 'swr' +const tokenAddresses = tokens.map((token) => token.address).toString() + export function usePrices(): { prices: { ocean: number; fet: number; agix: number; asi: number } isValidating: boolean isLoading: boolean } { const { data, isValidating, isLoading } = useSWR( - `/api/prices/?tokens=${tokens.toString()}`, + `/api/prices/?tokens=${tokenAddresses}`, fetcher ) - const ocean = data?.[tokens[0]]?.usd || 0 - const fet = data?.[tokens[1]]?.usd || 0 - const agix = data?.[tokens[2]]?.usd || 0 + const oceanAddress = getTokenAddressBySymbol('OCEAN') + const fetAddress = getTokenAddressBySymbol('FET') + const agixAddress = getTokenAddressBySymbol('AGIX') + + if (!oceanAddress || !fetAddress || !agixAddress) + return { + prices: { ocean: 0, fet: 0, agix: 0, asi: 0 }, + isValidating, + isLoading + } + + const ocean = data?.[oceanAddress]?.usd || 0 + const fet = data?.[fetAddress]?.usd || 0 + const agix = data?.[agixAddress]?.usd || 0 const asi = fet return { prices: { ocean, fet, agix, asi }, isValidating, isLoading } diff --git a/types/Token.ts b/types/Token.ts new file mode 100644 index 0000000..e151749 --- /dev/null +++ b/types/Token.ts @@ -0,0 +1,7 @@ +export type TokenSymbol = 'OCEAN' | 'FET' | 'AGIX' | 'ASI' +export type TokenAddress = `0x${string}` + +export type Token = { + symbol: TokenSymbol + address: `0x${string}` +} diff --git a/types/index.ts b/types/index.ts new file mode 100644 index 0000000..9945bb7 --- /dev/null +++ b/types/index.ts @@ -0,0 +1 @@ +export * from './Token' diff --git a/utils/index.ts b/utils/index.ts index 77063f9..416d50a 100644 --- a/utils/index.ts +++ b/utils/index.ts @@ -1,3 +1,5 @@ +import { tokens } from '@/constants' +import type { TokenAddress, Token } from '@/types' import { formatCurrency } from '@coingecko/cryptoformat' export function formatNumber(price: number, currency: string) { @@ -12,3 +14,15 @@ export async function fetcher(url: string) { if (!res.ok) throw new Error('Failed to fetch') return await res.json() } + +export function getTokenBySymbol(symbol: string): Token | undefined { + const token = tokens.find((t) => t.symbol === symbol) + return token +} + +export function getTokenAddressBySymbol( + symbol: string +): TokenAddress | undefined { + const token = getTokenBySymbol(symbol) + return token?.address +}