From 002dde6efb1db4ddf4b1573d7a49c5c89c91fc63 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 1 Apr 2024 02:25:23 +0100 Subject: [PATCH] refactor --- .env.example | 1 - app/api/quote/route.ts | 3 +- components/Strategies/Swap/Results.tsx | 124 +++++-------------------- content.md | 8 +- hooks/index.ts | 1 + hooks/use-quote.ts | 67 +++++++++++++ 6 files changed, 95 insertions(+), 109 deletions(-) create mode 100644 hooks/use-quote.ts diff --git a/.env.example b/.env.example index 4a4032e..d144b04 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1 @@ -ONEINCH_API_KEY="" WEB3_API_URL="" \ No newline at end of file diff --git a/app/api/quote/route.ts b/app/api/quote/route.ts index 5de51a4..468f69a 100644 --- a/app/api/quote/route.ts +++ b/app/api/quote/route.ts @@ -18,9 +18,8 @@ export async function GET(request: NextRequest) { const tokenOut = searchParams?.get('tokenOut') const amountIn = searchParams?.get('amountIn') - if (!tokenIn || !tokenOut || !amountIn) { + if (!tokenIn || !tokenOut || !amountIn) return Response.json(null, { status: 400 }) - } const url = `${apiUrl}/quote?tokenIn=${tokenIn}&tokenOut=${tokenOut}&amountIn=${amountIn}` let data diff --git a/components/Strategies/Swap/Results.tsx b/components/Strategies/Swap/Results.tsx index 7c90ca4..a995427 100644 --- a/components/Strategies/Swap/Results.tsx +++ b/components/Strategies/Swap/Results.tsx @@ -1,13 +1,9 @@ import { Result } from '@/components/ResultRow' import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants' import { usePrices } from '@/hooks' -import { fetcher, getTokenAddressBySymbol, getTokenBySymbol } from '@/utils' -import useSWR from 'swr' +import { getTokenBySymbol } from '@/utils' import { TokenSymbol } from '@/types' - -const options = { - keepPreviousData: true // so loading UI can kick in properly -} +import { useQuote } from '@/hooks' export function SwapResults({ tokenSymbol, @@ -22,118 +18,46 @@ export function SwapResults({ isLoading: isLoadingPrices } = usePrices() - // -> AGIX const { - data: dataSwapToAgix, - isValidating: isValidatingToAgix, - isLoading: isLoadingToAgix - } = useSWR( - `/api/quote/?tokenIn=${getTokenAddressBySymbol( - tokenSymbol - )}&tokenOut=${getTokenAddressBySymbol('AGIX')}&amountIn=${amount}`, - fetcher, - options - ) - - // -> FET - const { - data: dataSwapToFet, - isValidating: isValidatingToFet, - isLoading: isLoadingToFet - } = useSWR( - `/api/quote/?tokenIn=${getTokenAddressBySymbol( - tokenSymbol - )}&tokenOut=${getTokenAddressBySymbol('FET')}&amountIn=${amount}`, - fetcher, - options - ) - - // -> OCEAN - const { - data: dataSwapToOcean, - isValidating: isValidatingToOcean, - isLoading: isLoadingToOcean - } = useSWR( - `/api/quote/?tokenIn=${getTokenAddressBySymbol( - tokenSymbol - )}&tokenOut=${getTokenAddressBySymbol('OCEAN')}&amountIn=${amount}`, - fetcher, - options - ) + amountToOcean, + amountToAgix, + amountToFet, + isValidatingToAgix, + isLoadingToAgix, + isValidatingToFet, + isLoadingToFet, + isValidatingToOcean, + isLoadingToOcean + } = useQuote(tokenSymbol, amount) return ( <> diff --git a/content.md b/content.md index 4108f59..3d757af 100644 --- a/content.md +++ b/content.md @@ -1,6 +1,6 @@ -The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET. +The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET. The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes. -The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes. +All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk. ### All About Token Merge @@ -9,7 +9,3 @@ You can find all the details about the token merger in every team's announcement - [Ocean Protocol: Ocean Protocol is joining the Superintelligence Alliance](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24) - [Fetch.ai: Superintelligence Alliance Token Merge $ASI](https://fetch.ai/blog/superintelligence-alliance-token-merge-asi) - [SingularityNET: Introducing the Artificial Superintelligence Alliance](https://blog.singularitynet.io/introducing-the-artificial-superintelligence-alliance-40a4dea01e62) - -### Disclaimer - -All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk. diff --git a/hooks/index.ts b/hooks/index.ts index 95409a3..5ec829b 100644 --- a/hooks/index.ts +++ b/hooks/index.ts @@ -1 +1,2 @@ export * from './use-prices' +export * from './use-quote' diff --git a/hooks/use-quote.ts b/hooks/use-quote.ts new file mode 100644 index 0000000..4bee7df --- /dev/null +++ b/hooks/use-quote.ts @@ -0,0 +1,67 @@ +import { TokenSymbol } from '@/types' +import { getTokenAddressBySymbol, fetcher } from '@/utils' +import useSWR from 'swr' + +const options = { + keepPreviousData: true // so loading UI can kick in properly +} + +export function useQuote(tokenSymbol: TokenSymbol, amount: number) { + // -> AGIX + const { + data: dataSwapToAgix, + isValidating: isValidatingToAgix, + isLoading: isLoadingToAgix + } = useSWR( + `/api/quote/?tokenIn=${getTokenAddressBySymbol( + tokenSymbol + )}&tokenOut=${getTokenAddressBySymbol('AGIX')}&amountIn=${amount}`, + fetcher, + options + ) + + // -> FET + const { + data: dataSwapToFet, + isValidating: isValidatingToFet, + isLoading: isLoadingToFet + } = useSWR( + `/api/quote/?tokenIn=${getTokenAddressBySymbol( + tokenSymbol + )}&tokenOut=${getTokenAddressBySymbol('FET')}&amountIn=${amount}`, + fetcher, + options + ) + + // -> OCEAN + const { + data: dataSwapToOcean, + isValidating: isValidatingToOcean, + isLoading: isLoadingToOcean + } = useSWR( + `/api/quote/?tokenIn=${getTokenAddressBySymbol( + tokenSymbol + )}&tokenOut=${getTokenAddressBySymbol('OCEAN')}&amountIn=${amount}`, + fetcher, + options + ) + + const amountToOcean = + dataSwapToOcean?.amountOut / Number(`1e${dataSwapToOcean?.decimals}`) + const amountToAgix = + dataSwapToAgix?.amountOut / Number(`1e${dataSwapToAgix?.decimals}`) + const amountToFet = + dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`) + + return { + amountToOcean, + amountToAgix, + amountToFet, + isValidatingToAgix, + isLoadingToAgix, + isValidatingToFet, + isLoadingToFet, + isValidatingToOcean, + isLoadingToOcean + } +}