FEAT: Earn Widget Outtoken selector (#1869)

* fix lint

* fix output token select

Author: surewht

src/app/earn/components/earn-widget/index.tsx

@@ -1,12 +1,14 @@
 'use client'
 
+import { AnimatePresence, motion } from 'framer-motion'
 import { useAtom } from 'jotai'
 import range from 'lodash/range'
 import { useCallback, useEffect, useMemo } from 'react'
 import { isAddressEqual } from 'viem'
 
 import { useQueryParams } from '@/app/earn-old/use-query-params'
 import { tradeMachineAtom } from '@/app/store/trade-machine'
+import { Receive } from '@/components/receive'
 import { SelectTokenModal } from '@/components/swap/components/select-token-modal'
 import { TransactionReviewModal } from '@/components/swap/components/transaction-review'
 import { WarningType } from '@/components/swap/components/warning'
@@ -39,11 +41,13 @@ export function EarnWidget() {
     indexToken,
     inputToken,
     inputTokens,
+    outputTokens,
     inputTokenAmount,
     inputValue,
     isMinting,
     onChangeInputTokenAmount,
     onSelectInputToken,
+    onSelectOutputToken,
     balances,
     products,
     outputToken,
@@ -60,6 +64,8 @@ export function EarnWidget() {
     inputBalance,
     inputBalanceFormatted,
     isFetchingQuote,
+    ouputAmount,
+    outputAmountUsd,
     resetData,
   } = useFormattedEarnData()
 
@@ -73,6 +79,12 @@ export function EarnWidget() {
     onClose: onCloseSelectInputToken,
   } = useDisclosure()
 
+  const {
+    isOpen: isSelectOutputTokenOpen,
+    onOpen: onOpenSelectOutputToken,
+    onClose: onCloseSelectOutputToken,
+  } = useDisclosure()
+
   const [tradeState, sendTradeEvent] = useAtom(tradeMachineAtom)
 
   const onClickBalance = useCallback(() => {
@@ -112,6 +124,30 @@ export function EarnWidget() {
         onClickBalance={onClickBalance}
         onSelectToken={() => isMinting && onOpenSelectInputToken()}
       />
+      <AnimatePresence mode='wait'>
+        {!isMinting && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{
+              duration: 0.3,
+              height: { duration: 0.2 },
+              opacity: { duration: 0.2 },
+            }}
+            className='overflow-hidden'
+          >
+            <Receive
+              isLoading={isFetchingQuote}
+              outputAmount={ouputAmount}
+              outputAmountUsd={outputAmountUsd}
+              selectedOutputToken={outputToken}
+              onSelectToken={onOpenSelectOutputToken}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       <Projection
         isQuoteLoading={isFetchingQuote}
         amount={inputValue}
@@ -170,6 +206,17 @@ export function EarnWidget() {
         address={address}
         tokens={inputTokens}
       />
+      <SelectTokenModal
+        isDarkMode={true}
+        isOpen={isSelectOutputTokenOpen}
+        onClose={onCloseSelectOutputToken}
+        onSelectedToken={(tokenSymbol, chainId) => {
+          onSelectOutputToken(tokenSymbol, chainId)
+          onCloseSelectOutputToken()
+        }}
+        address={address}
+        tokens={outputTokens}
+      />
       <TransactionReviewModal
         isDarkMode
         onClose={() => {