feat(yields): mini swapper modal

src/assets/translations/en/main.json

@@ -2819,7 +2819,11 @@
     "otherYields": "Other %{symbol} Yields",
     "availableToDeposit": "Available to Deposit",
     "availableToDepositTooltip": "This is the amount of %{symbol} in your wallet that you can deposit into this yield opportunity.",
-    "getAsset": "Get %{symbol}"
+    "getAsset": "Get %{symbol}",
+    "potentialEarningsAmount": "%{amount}/yr at %{apy}% APY",
+    "depositNow": "Deposit Now",
+    "strategyInfo": "Strategy Info",
+    "overview": "Overview"
   },
   "earn": {
     "enterFrom": "Enter from",

src/components/MultiHopTrade/StandaloneMultiHopTrade.tsx

@@ -25,7 +25,10 @@ import {
 import { tradeInput } from '@/state/slices/tradeInputSlice/tradeInputSlice'
 import { useAppDispatch, useAppSelector } from '@/state/store'
 
-export type StandaloneTradeCardProps = TradeCardProps
+export type StandaloneTradeCardProps = TradeCardProps & {
+  onSuccess?: () => void
+  isModal?: boolean
+}
 
 const GetTradeRates = () => {
   useGetTradeRates()
@@ -38,7 +41,9 @@ export const StandaloneMultiHopTrade = memo(
     defaultSellAssetId,
     isCompact,
     onChangeTab,
+    onSuccess,
     isStandalone,
+    isModal,
   }: StandaloneTradeCardProps) => {
     const dispatch = useAppDispatch()
     const location = useLocation()
@@ -129,7 +134,9 @@ export const StandaloneMultiHopTrade = memo(
       <StandaloneTradeRoutes
         isCompact={isCompact}
         onChangeTab={onChangeTab}
+        onSuccess={onSuccess}
         isStandalone={isStandalone}
+        isModal={isModal}
       />
     )
   },
@@ -138,11 +145,13 @@ export const StandaloneMultiHopTrade = memo(
 type StandaloneTradeRoutesProps = {
   isCompact?: boolean
   isStandalone?: boolean
+  isModal?: boolean
   onChangeTab: (newTab: TradeInputTab) => void
+  onSuccess?: () => void
 }
 
 const StandaloneTradeRoutes = memo(
-  ({ isCompact, isStandalone, onChangeTab }: StandaloneTradeRoutesProps) => {
+  ({ isCompact, isStandalone, isModal, onChangeTab, onSuccess }: StandaloneTradeRoutesProps) => {
     const location = useLocation()
 
     const tradeInputRef = useRef<HTMLDivElement | null>(null)
@@ -165,7 +174,10 @@ const StandaloneTradeRoutes = memo(
     }, [location.pathname])
 
     // Create memoized elements for each route
-    const tradeConfirmElement = useMemo(() => <TradeConfirm isCompact={isCompact} />, [isCompact])
+    const tradeConfirmElement = useMemo(
+      () => <TradeConfirm isCompact={isCompact} isModal={isModal} onSuccess={onSuccess} />,
+      [isCompact, isModal, onSuccess],
+    )
 
     const verifyAddressesElement = useMemo(() => <VerifyAddresses />, [])
 
@@ -192,12 +204,13 @@ const StandaloneTradeRoutes = memo(
       () => (
         <TradeInput
           isCompact={isCompact}
+          isModal={isModal}
           tradeInputRef={tradeInputRef}
           onChangeTab={onChangeTab}
           isStandalone={isStandalone}
         />
       ),
-      [isCompact, onChangeTab, isStandalone],
+      [isCompact, isModal, onChangeTab, isStandalone],
     )
 
     return (

src/components/MultiHopTrade/components/SharedConfirm/SharedConfirm.tsx

@@ -2,7 +2,7 @@ import type { CardFooterProps } from '@chakra-ui/react'
 import { Card, CardBody, CardFooter, CardHeader, Heading } from '@chakra-ui/react'
 import type { JSX } from 'react'
 
-import { cardstyles } from '../../const'
+import { cardstyles, modalCardStyles } from '../../const'
 import { WithBackButton } from '../WithBackButton'
 
 import { TradeSlideTransition } from '@/components/MultiHopTrade/TradeSlideTransition'
@@ -15,6 +15,7 @@ type SharedConfirmProps = {
   onBack: () => void
   headerTranslation: TextPropTypes['translation']
   isLoading?: boolean
+  isModal?: boolean
 }
 
 const cardMinHeight = { base: 'calc(100vh - var(--mobile-nav-offset))', md: 'initial' }
@@ -25,10 +26,17 @@ export const SharedConfirm = ({
   footerContent,
   onBack,
   headerTranslation,
+  isModal,
 }: SharedConfirmProps) => {
   return (
     <TradeSlideTransition>
-      <Card flex={1} width='full' maxWidth='500px' minHeight={cardMinHeight} {...cardstyles}>
+      <Card
+        flex={1}
+        width='full'
+        maxWidth='500px'
+        minHeight={cardMinHeight}
+        {...(isModal ? modalCardStyles : cardstyles)}
+      >
         <CardHeader px={6} pt={4} borderTop={'none'}>
           <WithBackButton onBack={onBack}>
             <Heading textAlign='center' fontSize='md'>

src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx

@@ -2,7 +2,7 @@ import type { CardProps } from '@chakra-ui/react'
 import { Box, Card, Center, Flex, useMediaQuery } from '@chakra-ui/react'
 import type { FormEvent, JSX } from 'react'
 
-import { cardstyles } from '../../const'
+import { cardstyles, modalCardStyles } from '../../const'
 import { SharedTradeInputHeader } from '../SharedTradeInput/SharedTradeInputHeader'
 import { useSharedWidth } from '../TradeInput/hooks/useSharedWidth'
 
@@ -32,6 +32,7 @@ type SharedTradeInputProps = {
   onChangeTab: (newTab: TradeInputTab) => void
   onSubmit: (e: FormEvent<unknown>) => void
   isStandalone?: boolean
+  isModal?: boolean
 }
 
 const cardBorderRadius = { base: '0', md: '2xl' }
@@ -53,6 +54,7 @@ export const SharedTradeInput: React.FC<SharedTradeInputProps> = ({
   onChangeTab,
   onSubmit,
   isStandalone,
+  isModal,
 }) => {
   const [isSmallerThanMd] = useMediaQuery(`(max-width: ${breakpoints.md})`, { ssr: false })
   const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`, { ssr: false })
@@ -79,7 +81,7 @@ export const SharedTradeInput: React.FC<SharedTradeInputProps> = ({
               borderRadius={cardBorderRadius}
               minHeight={cardMinHeight}
               height={!hasUserEnteredAmount && isSmallerThanMd ? cardMinHeight.base : 'initial'}
-              {...cardstyles}
+              {...(isModal ? modalCardStyles : cardstyles)}
             >
               <SharedTradeInputHeader
                 initialTab={tradeInputTab}

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx

@@ -26,7 +26,13 @@ import { tradeQuoteSlice } from '@/state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from '@/state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from '@/state/store'
 
-export const TradeConfirm = ({ isCompact }: { isCompact: boolean | undefined }) => {
+type TradeConfirmProps = {
+  isCompact?: boolean
+  isModal?: boolean
+  onSuccess?: () => void
+}
+
+export const TradeConfirm = ({ isCompact, isModal, onSuccess }: TradeConfirmProps) => {
   const navigate = useNavigate()
   const { isLoading } = useIsApprovalInitiallyNeeded()
   const dispatch = useAppDispatch()
@@ -90,9 +96,18 @@ export const TradeConfirm = ({ isCompact }: { isCompact: boolean | undefined })
         isCompact={isCompact}
         tradeQuoteStep={tradeQuoteStep}
         activeTradeId={activeTradeId}
+        onSwapTxBroadcast={onSuccess}
       />
     )
-  }, [isTradeComplete, activeQuote, tradeQuoteLastHop, tradeQuoteStep, activeTradeId, isCompact])
+  }, [
+    isTradeComplete,
+    activeQuote,
+    tradeQuoteLastHop,
+    tradeQuoteStep,
+    activeTradeId,
+    isCompact,
+    onSuccess,
+  ])
 
   const isArbitrumBridgeWithdraw = useMemo(() => {
     return isArbitrumBridgeTradeQuoteOrRate(activeQuote) && activeQuote.direction === 'withdrawal'
@@ -141,6 +156,7 @@ export const TradeConfirm = ({ isCompact }: { isCompact: boolean | undefined })
       isLoading={isLoading}
       onBack={handleBack}
       headerTranslation={headerTranslation}
+      isModal={isModal}
     />
   )
 }

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx

@@ -51,11 +51,13 @@ type TradeConfirmFooterProps = {
   tradeQuoteStep: TradeQuoteStep
   activeTradeId: string
   isCompact: boolean | undefined
+  onSwapTxBroadcast?: () => void
 }
 
 export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
   tradeQuoteStep,
   activeTradeId,
+  onSwapTxBroadcast,
 }) => {
   const [isExactAllowance, toggleIsExactAllowance] = useToggle(true)
   const translate = useTranslate()
@@ -412,6 +414,7 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
         activeTradeId={activeTradeId}
         isExactAllowance={isExactAllowance}
         isLoading={isNetworkFeeCryptoBaseUnitLoading || isNetworkFeeCryptoBaseUnitRefetching}
+        onSwapTxBroadcast={onSwapTxBroadcast}
       />
     )
   }, [
@@ -421,6 +424,7 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
     isExactAllowance,
     isNetworkFeeCryptoBaseUnitLoading,
     isNetworkFeeCryptoBaseUnitRefetching,
+    onSwapTxBroadcast,
   ])
 
   return (

src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx

@@ -56,6 +56,7 @@ type TradeFooterButtonProps = {
   activeTradeId: string
   isExactAllowance: boolean
   isLoading?: boolean
+  onSwapTxBroadcast?: () => void
 }
 
 export const TradeFooterButton: FC<TradeFooterButtonProps> = ({
@@ -64,6 +65,7 @@ export const TradeFooterButton: FC<TradeFooterButtonProps> = ({
   activeTradeId,
   isExactAllowance,
   isLoading = false,
+  onSwapTxBroadcast,
 }) => {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
@@ -76,6 +78,7 @@ export const TradeFooterButton: FC<TradeFooterButtonProps> = ({
     currentHopIndex,
     activeTradeId,
     isExactAllowance,
+    onSwapTxBroadcast,
   })
   const translate = useTranslate()
   const swapperName = useAppSelector(selectActiveSwapperName)

src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeButtonProps.tsx

@@ -31,6 +31,7 @@ type UseTradeButtonPropsProps = {
   currentHopIndex: SupportedTradeQuoteStepIndex
   activeTradeId: string
   isExactAllowance: boolean
+  onSwapTxBroadcast?: () => void
 }
 
 type TradeButtonProps = {
@@ -45,6 +46,7 @@ export const useTradeButtonProps = ({
   currentHopIndex,
   activeTradeId,
   isExactAllowance,
+  onSwapTxBroadcast,
 }: UseTradeButtonPropsProps): TradeButtonProps | undefined => {
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
@@ -143,7 +145,7 @@ export const useTradeButtonProps = ({
     relayerTxHash,
   ])
 
-  const executeTrade = useTradeExecution(currentHopIndex, activeTradeId)
+  const executeTrade = useTradeExecution(currentHopIndex, activeTradeId, onSwapTxBroadcast)
 
   const handleSignTx = useCallback(() => {
     if (

src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeExecution.tsx

@@ -67,6 +67,7 @@ import { store, useAppDispatch, useAppSelector } from '@/state/store'
 export const useTradeExecution = (
   hopIndex: SupportedTradeQuoteStepIndex,
   confirmedTradeId: TradeQuote['id'],
+  onSwapTxBroadcast?: () => void,
 ) => {
   const translate = useTranslate()
   const dispatch = useAppDispatch()
@@ -238,6 +239,8 @@ export const useTradeExecution = (
           })
         }
 
+        onSwapTxBroadcast?.()
+
         // Don't navigate away during QuickBuy - let the QuickBuy component handle the success state
         if (!isQuickBuy) {
           navigate(TradeRoutePaths.Input)
@@ -772,6 +775,7 @@ export const useTradeExecution = (
     swapsById,
     toast,
     isQuickBuy,
+    onSwapTxBroadcast,
   ])
 
   return executeTrade

src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx

@@ -86,12 +86,14 @@ type TradeInputProps = {
   tradeInputRef: React.MutableRefObject<HTMLDivElement | null>
   isCompact?: boolean
   isStandalone?: boolean
+  isModal?: boolean
   onChangeTab: (newTab: TradeInputTab) => void
 }
 
 export const TradeInput = ({
   isCompact,
   isStandalone,
+  isModal,
   tradeInputRef,
   onChangeTab,
 }: TradeInputProps) => {
@@ -609,6 +611,7 @@ export const TradeInput = ({
         onSubmit={handleTradeQuoteConfirm}
         onChangeTab={onChangeTab}
         isStandalone={isStandalone}
+        isModal={isModal}
       />
     </>
   )

src/components/MultiHopTrade/const.ts

@@ -27,3 +27,16 @@ export const cardstyles: CardProps = {
     boxShadow: '0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 5px rgba(0,0,0,.2)',
   },
 }
+
+export const modalCardStyles: CardProps = {
+  bg: 'transparent',
+  borderColor: 'transparent',
+  boxShadow: 'none',
+  borderWidth: 0,
+  borderRadius: 0,
+  _dark: {
+    bg: 'transparent',
+    borderColor: 'transparent',
+    boxShadow: 'none',
+  },
+}