refactor

.env.example

@@ -1,2 +1 @@
-ONEINCH_API_KEY=""
 WEB3_API_URL=""

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

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 { getTokenBySymbol } from '@/utils'
-import useSWR from 'swr'
 import { TokenSymbol } from '@/types'
-
+import { useQuote } from '@/hooks'
-const options = {
-  keepPreviousData: true // so loading UI can kick in properly
-}
 
 export function SwapResults({
   tokenSymbol,
@@ -22,118 +18,46 @@ export function SwapResults({
     isLoading: isLoadingPrices
   } = usePrices()
 
-  // -> AGIX
   const {
-    data: dataSwapToAgix,
+    amountToOcean,
-    isValidating: isValidatingToAgix,
+    amountToAgix,
-    isLoading: isLoadingToAgix
+    amountToFet,
-  } = useSWR(
+    isValidatingToAgix,
-    `/api/quote/?tokenIn=${getTokenAddressBySymbol(
+    isLoadingToAgix,
-      tokenSymbol
+    isValidatingToFet,
-    )}&tokenOut=${getTokenAddressBySymbol('AGIX')}&amountIn=${amount}`,
+    isLoadingToFet,
-    fetcher,
+    isValidatingToOcean,
-    options
+    isLoadingToOcean
-  )
+  } = useQuote(tokenSymbol, amount)
-
-  // -> 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
-  )
 
   return (
     <>
       <Result
         token={getTokenBySymbol('OCEAN')}
-        amount={
+        amount={amountToOcean}
-          dataSwapToOcean?.amountOut / Number(`1e${dataSwapToOcean?.decimals}`)
+        amountAsi={amountToOcean * ratioOceanToAsi}
-        }
+        amountFiat={amountToOcean * ratioOceanToAsi * prices.asi}
-        amountAsi={
+        amountOriginalFiat={amountToOcean * prices.ocean}
-          (dataSwapToOcean?.amountOut /
-            Number(`1e${dataSwapToOcean?.decimals}`)) *
-          ratioOceanToAsi
-        }
-        amountFiat={
-          (dataSwapToOcean?.amountOut /
-            Number(`1e${dataSwapToOcean?.decimals}`)) *
-          ratioOceanToAsi *
-          prices.asi
-        }
-        amountOriginalFiat={
-          tokenSymbol
-            ? (dataSwapToOcean?.amountOut /
-                Number(`1e${dataSwapToOcean?.decimals}`)) *
-              prices[
-                tokenSymbol.toLowerCase() as 'ocean' | 'agix' | 'fet' | 'asi'
-              ]
-            : undefined
-        }
         isValidating={isValidatingToOcean || isValidatingPrices}
         isLoading={isLoadingToOcean || isLoadingPrices}
       />
 
       <Result
         token={getTokenBySymbol('AGIX')}
-        amount={
+        amount={amountToAgix}
-          dataSwapToAgix?.amountOut / Number(`1e${dataSwapToAgix?.decimals}`)
+        amountAsi={amountToAgix * ratioAgixToAsi}
-        }
+        amountFiat={amountToAgix * ratioAgixToAsi * prices.asi}
-        amountAsi={
+        amountOriginalFiat={amountToAgix * prices.agix}
-          (dataSwapToAgix?.amountOut /
-            Number(`1e${dataSwapToAgix?.decimals}`)) *
-          ratioAgixToAsi
-        }
-        amountFiat={
-          (dataSwapToAgix?.amountOut /
-            Number(`1e${dataSwapToAgix?.decimals}`)) *
-          ratioAgixToAsi *
-          prices.asi
-        }
-        amountOriginalFiat={
-          (dataSwapToAgix?.amountOut /
-            Number(`1e${dataSwapToAgix?.decimals}`)) *
-          prices.agix
-        }
         isValidating={isValidatingToAgix || isValidatingPrices}
         isLoading={isLoadingToAgix || isLoadingPrices}
       />
 
       <Result
         token={getTokenBySymbol('FET')}
-        amount={
+        amount={amountToFet}
-          dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)
+        amountAsi={amountToFet * ratioFetToAsi}
-        }
+        amountFiat={amountToFet * prices.asi}
-        amountAsi={
+        amountOriginalFiat={amountToFet * prices.asi}
-          (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
-          ratioFetToAsi
-        }
-        amountFiat={
-          (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
-          prices.asi
-        }
-        amountOriginalFiat={
-          (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
-          prices.asi
-        }
         isValidating={isValidatingToFet || isValidatingPrices}
         isLoading={isLoadingToFet || isLoadingPrices}
       />

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.

hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-prices'
+export * from './use-quote'

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
+  }
+}