Merge pull request #1653 from IndexCoop/feat/earn

feat: Earn

Author: 0xonramp

next.config.js

@@ -53,12 +53,7 @@ const nextConfig = {
       },
       {
         source: '/',
-        destination: '/swap',
-        permanent: true,
-      },
-      {
-        source: '/earn',
-        destination: '/swap',
+        destination: '/products',
         permanent: true,
       },
       {

package-lock.json

@@ -27,7 +27,7 @@
     "@fontsource/open-sauce-sans": "^5.0.7",
     "@headlessui/react": "2.1.6",
     "@heroicons/react": "^2.1.3",
-    "@indexcoop/flash-mint-sdk": "3.11.0",
+    "@indexcoop/flash-mint-sdk": "3.12.0",
     "@indexcoop/tokenlists": "3.2.0",
     "@rainbow-me/rainbowkit": "^2.0.7",
     "@safe-global/api-kit": "2.5.4",

package.json

@@ -1,20 +1,11 @@
-import {
-  EthAddress,
-  FlashMintQuoteProvider,
-  QuoteToken,
-} from '@indexcoop/flash-mint-sdk'
+import { EthAddress, QuoteToken } from '@indexcoop/flash-mint-sdk'
 import {
   getTokenByChainAndAddress,
   isAddressEqual,
   isProductToken,
 } from '@indexcoop/tokenlists'
-import { BigNumber } from 'ethers'
 import { NextRequest, NextResponse } from 'next/server'
-import { Address, isAddress } from 'viem'
-
-import { QuoteType } from '@/lib/hooks/use-best-quote/types'
-import { getConfiguredZeroExSwapQuoteProvider } from '@/lib/utils/api/zeroex'
-import { getAlchemyBaseUrl } from '@/lib/utils/urls'
+import { Address } from 'viem'
 
 export interface IndexQuoteRequest {
   chainId: number
@@ -39,27 +30,14 @@ export async function POST(req: NextRequest) {
       slippage,
     } = request
 
-    if (slippage < 0 || slippage > 1) {
-      return BadRequest('Bad Request')
-    }
-
-    if (!isAddress(inputTokenAddress) || !isAddress(outputTokenAddress)) {
-      return BadRequest('Bad Request')
-    }
-
-    if (!inputAmount && !outputAmount) {
-      return BadRequest(
-        'Either `inputAmount` or outputAmount` needs to be set.',
-      )
-    }
+    const inputToken = getQuoteToken(inputTokenAddress, chainId)
+    const outputToken = getQuoteToken(outputTokenAddress, chainId)
+    const isMintingIcUsd = outputToken?.quoteToken.symbol === 'icUSD'
 
-    if (inputAmount && outputAmount) {
+    if (!isMintingIcUsd && inputAmount && outputAmount) {
       return BadRequest('You can only set `inputAmount` or outputAmount`.')
     }
 
-    const inputToken = getQuoteToken(inputTokenAddress, chainId)
-    const outputToken = getQuoteToken(outputTokenAddress, chainId)
-
     if (
       !inputToken ||
       !outputToken ||
@@ -68,44 +46,48 @@ export async function POST(req: NextRequest) {
       return BadRequest('Bad Request')
     }
 
-    const rpcUrl = getAlchemyBaseUrl(chainId) + process.env.ALCHEMY_API_KEY
-    const zeroexSwapQuoteProvider =
-      getConfiguredZeroExSwapQuoteProvider(chainId)
-    const quoteProvider = new FlashMintQuoteProvider(
-      rpcUrl,
-      zeroexSwapQuoteProvider,
-    )
-
     const isMinting = outputToken.isIndex
-    const quote = await quoteProvider.getQuote({
-      isMinting,
-      inputToken: inputToken.quoteToken,
-      outputToken: outputToken.quoteToken,
-      indexTokenAmount: BigNumber.from(
-        isMinting ? outputAmount! : inputAmount!,
-      ),
-      slippage,
+    const quoteRequest: {
+      account: string
+      chainId: string
+      inputToken: string
+      outputToken: string
+      inputAmount?: string
+      outputAmount?: string
+      slippage: string
+    } = {
+      account,
+      chainId: String(chainId),
+      inputToken: inputToken.quoteToken.address,
+      outputToken: outputToken.quoteToken.address,
+      slippage: String(slippage),
+    }
+    if (isMinting) {
+      quoteRequest.outputAmount = outputAmount
+    } else {
+      quoteRequest.inputAmount = inputAmount
+    }
+    if (isMintingIcUsd) {
+      quoteRequest.inputAmount = inputAmount ?? '0'
+    }
+
+    const query = new URLSearchParams(quoteRequest).toString()
+    const url = `https://api.indexcoop.com/v2/quote?${query}`
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': process.env.INDEX_COOP_API_V2_KEY,
+      } as HeadersInit,
     })
 
+    const quote = await response.json()
+
     if (!quote) {
       return NextResponse.json({ message: 'No quote found.' }, { status: 404 })
     }
 
-    return NextResponse.json({
-      type: QuoteType.flashmint,
-      chainId: quote.chainId,
-      contract: quote.contract,
-      contractType: quote.contractType,
-      takerAddress: account,
-      isMinting: quote.isMinting,
-      inputToken: quote.inputToken,
-      outputToken: quote.outputToken,
-      indexTokenAmount: quote.indexTokenAmount.toString(),
-      inputAmount: quote.inputAmount.toString(),
-      outputAmount: quote.outputAmount.toString(),
-      slippage: quote.slippage,
-      transaction: quote.tx,
-    })
+    return NextResponse.json(quote)
   } catch (error) {
     console.error(error)
     return NextResponse.json(error, { status: 500 })

src/app/api/quote/route.ts

@@ -1,28 +1,29 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import Image from 'next/image'
 
-import { Token } from '@/constants/tokens'
-
-type BaseTokenSelectorProps = {
-  baseToken: Token
+type TokenSelectorProps = {
+  selectedToken: { image: string; symbol: string }
   onClick: () => void
 }
 
-export function BaseTokenSelector({
-  baseToken,
-  onClick,
-}: BaseTokenSelectorProps) {
-  const { image, symbol } = baseToken
+export function TokenSelector({ selectedToken, onClick }: TokenSelectorProps) {
+  const { image, symbol } = selectedToken
   return (
     <div
-      className='flex cursor-pointer flex-row items-center py-2'
+      className='flex cursor-pointer flex-row items-center'
       onClick={onClick}
     >
-      <Image alt={`${symbol} logo`} src={image} width={24} height={24} />
-      <span className='text-ic-black dark:text-ic-white mx-1 text-xl font-medium'>
+      <Image
+        alt={`${symbol} logo`}
+        src={image}
+        width={24}
+        height={24}
+        priority
+      />
+      <span className='text-ic-black dark:text-ic-white ml-2 text-base font-bold'>
         {symbol}
       </span>
-      <ChevronDownIcon className='dark:text-ic-white text-ic-black size-6' />
+      <ChevronDownIcon className='dark:text-ic-white text-ic-black size-5' />
     </div>
   )
 }

src/app/earn/components/earn-widget/components/base-token-selector.tsx

@@ -1,11 +1,10 @@
 import { Disclosure } from '@headlessui/react'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 
-import { useEarnContext } from '@/app/earn/provider'
 import { GasFees } from '@/components/gas-fees'
 import { StyledSkeleton } from '@/components/skeleton'
 
-import { useFormattedLeverageData } from '../../../use-formatted-data'
+import { useFormattedEarnData } from '../../../use-formatted-data'
 
 type SummaryQuoteProps = {
   label: string
@@ -15,18 +14,19 @@ type SummaryQuoteProps = {
 
 function SummaryQuote(props: SummaryQuoteProps) {
   return (
-    <div className='text-ic-gray-300 flex flex-row items-center justify-between text-xs'>
+    <div className='text-ic-gray-600 dark:text-ic-gray-300 flex flex-row items-center justify-between text-xs'>
       <div className='font-medium'>{props.label}</div>
       <div className='flex flex-row gap-1'>
-        <div className='text-ic-white font-bold'>{props.value}</div>
+        <div className='text-ic-black dark:text-ic-white font-bold'>
+          {props.value}
+        </div>
         <div className='font-normal'>{props.valueUsd}</div>
       </div>
     </div>
   )
 }
 
 export function Summary() {
-  const { stats } = useEarnContext()
   const {
     gasFeesEth,
     gasFeesUsd,
@@ -36,14 +36,17 @@ export function Summary() {
     ouputAmount,
     outputAmountUsd,
     shouldShowSummaryDetails,
-  } = useFormattedLeverageData(stats)
+  } = useFormattedEarnData()
   if (!shouldShowSummaryDetails && !isFetchingQuote) return null
   return (
-    <Disclosure as='div' className='rounded-lg border border-[#3A6060]'>
+    <Disclosure
+      as='div'
+      className='border-ic-gray-100 rounded-lg border dark:border-[#3A6060]'
+    >
       {({ open }) => (
         <div className='p-4'>
           <dt>
-            <Disclosure.Button className='text-ic-gray-300 flex w-full items-center justify-between text-left'>
+            <Disclosure.Button className='text-ic-gray-600 dark:text-ic-gray-300 flex w-full items-center justify-between text-left'>
               <span className='text-xs font-medium'>
                 {open && 'Summary'}
                 {!open && isFetchingQuote && <StyledSkeleton width={120} />}
@@ -56,7 +59,10 @@ export function Summary() {
                 {!open && !isFetchingQuote ? (
                   <GasFees
                     valueUsd={gasFeesUsd}
-                    styles={{ valueUsdTextColor: 'text-ic-gray-300' }}
+                    styles={{
+                      valueUsdTextColor:
+                        'text-ic-gray-600 dark:text-ic-gray-300',
+                    }}
                   />
                 ) : null}
                 {!open && isFetchingQuote && <StyledSkeleton width={70} />}
@@ -83,7 +89,7 @@ export function Summary() {
                   value={ouputAmount}
                   valueUsd={`(${outputAmountUsd})`}
                 />
-                <div className='text-ic-gray-300 flex flex-row items-center justify-between text-xs'>
+                <div className='text-ic-gray-600 dark:text-ic-gray-300 flex flex-row items-center justify-between text-xs'>
                   <div className='font-normal'>Network Fee</div>
                   <div>
                     <GasFees valueUsd={gasFeesUsd} value={gasFeesEth} />