feat: use WarningAcknowledgement component

src/assets/translations/en/main.json

@@ -2226,8 +2226,7 @@
       "yourLoans": "Your Loans",
       "emptyTitle": "The Land of Zero Loans!",
       "emptyBody": "It appears you don't have any loans at the moment. Is this financial zen or just a break before your next big lending adventure? Either way, enjoy the calm!"
-    },
-    "unsafeBorrow": "This borrow has high slippage (%{slippagePercentage}%). Proceed with caution."
+    }
   },
   "foxDiscounts": {
     "currentFoxPower": "Your FOX Power",
@@ -2332,6 +2331,14 @@
       }
     }
   },
+  "warningAcknowledgement": {
+    "understand": "I understand",
+    "attention": "Attention!",
+    "highSlippageDeposit": "This deposit has high slippage (%{slippagePercentage}%). Proceed with caution.",
+    "highSlippageBorrow": "This borrow has high slippage (%{slippagePercentage}%). Proceed with caution.",
+    "highSlippageTrade": "This trade is impacted by price movement (%{slippagePercentage}%). Proceed with caution.",
+    "unsafeTrade": "This trade may be unsafe or below the recommended minimum size, proceed with caution."
+  },
   "watchlist": {
     "empty": {
       "title": "Start building your watchlist",

src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx

@@ -1,11 +1,18 @@
 import { Card, CardBody, CardHeader, Heading, useDisclosure, usePrevious } from '@chakra-ui/react'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
 import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButton'
+import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
-import { selectTradeExecutionState } from 'state/slices/tradeQuoteSlice/selectors'
+import { WarningAcknowledgement } from 'components/WarningAcknowledgement/WarningAcknowledgement'
+import { bnOrZero } from 'lib/bignumber/bignumber'
+import {
+  selectActiveQuote,
+  selectTradeExecutionState,
+} from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from 'state/store'
@@ -22,10 +29,15 @@ const useDisclosureProps = {
 
 export const MultiHopTradeConfirm = memo(() => {
   const dispatch = useAppDispatch()
+  const translate = useTranslate()
   const tradeExecutionState = useAppSelector(selectTradeExecutionState)
   const previousTradeExecutionState = usePrevious(tradeExecutionState)
   const history = useHistory()
 
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
+  const activeQuote = useAppSelector(selectActiveQuote)
+  const { isModeratePriceImpact, priceImpactPercentage } = usePriceImpact(activeQuote)
+
   const { isLoading } = useIsApprovalInitiallyNeeded()
 
   useEffect(() => {
@@ -65,6 +77,18 @@ export const MultiHopTradeConfirm = memo(() => {
     [tradeExecutionState],
   )
 
+  const handleTradeConfirm = useCallback(() => {
+    dispatch(tradeQuoteSlice.actions.confirmTrade())
+  }, [dispatch])
+
+  const handleSubmit = useCallback(() => {
+    if (isModeratePriceImpact) {
+      setShouldShowWarningAcknowledgement(true)
+    } else {
+      handleTradeConfirm()
+    }
+  }, [handleTradeConfirm, isModeratePriceImpact])
+
   return (
     <TradeSlideTransition>
       <Card
@@ -74,38 +98,47 @@ export const MultiHopTradeConfirm = memo(() => {
         variant='dashboard'
         maxWidth='500px'
       >
-        <CardHeader px={6} pt={4}>
-          <WithBackButton onBack={handleBack}>
-            <Heading textAlign='center' fontSize='md'>
-              <Text
-                translation={
-                  [TradeExecutionState.Initializing, TradeExecutionState.Previewing].includes(
-                    tradeExecutionState,
-                  )
-                    ? 'trade.confirmDetails'
-                    : 'trade.trade'
-                }
-              />
-            </Heading>
-          </WithBackButton>
-        </CardHeader>
-        {isTradeComplete ? (
-          <TradeSuccessTemp handleBack={handleBack}>
-            <Hops isFirstHopOpen isSecondHopOpen />
-          </TradeSuccessTemp>
-        ) : (
-          <>
-            <CardBody py={0} px={0}>
-              <Hops
-                isFirstHopOpen={isFirstHopOpen}
-                isSecondHopOpen={isSecondHopOpen}
-                onToggleFirstHop={onToggleFirstHop}
-                onToggleSecondHop={onToggleSecondHop}
-              />
-            </CardBody>
-            <Footer />
-          </>
-        )}
+        <WarningAcknowledgement
+          message={translate('warningAcknowledgement.highSlippageTrade', {
+            slippagePercentage: bnOrZero(priceImpactPercentage).toFixed(2).toString(),
+          })}
+          onAcknowledge={handleTradeConfirm}
+          shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+          setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+        >
+          <CardHeader px={6} pt={4}>
+            <WithBackButton onBack={handleBack}>
+              <Heading textAlign='center' fontSize='md'>
+                <Text
+                  translation={
+                    [TradeExecutionState.Initializing, TradeExecutionState.Previewing].includes(
+                      tradeExecutionState,
+                    )
+                      ? 'trade.confirmDetails'
+                      : 'trade.trade'
+                  }
+                />
+              </Heading>
+            </WithBackButton>
+          </CardHeader>
+          {isTradeComplete ? (
+            <TradeSuccessTemp handleBack={handleBack}>
+              <Hops isFirstHopOpen isSecondHopOpen />
+            </TradeSuccessTemp>
+          ) : (
+            <>
+              <CardBody py={0} px={0}>
+                <Hops
+                  isFirstHopOpen={isFirstHopOpen}
+                  isSecondHopOpen={isSecondHopOpen}
+                  onToggleFirstHop={onToggleFirstHop}
+                  onToggleSecondHop={onToggleSecondHop}
+                />
+              </CardBody>
+              <Footer handleSubmit={handleSubmit} />
+            </>
+          )}
+        </WarningAcknowledgement>
       </Card>
     </TradeSlideTransition>
   )

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx

@@ -9,39 +9,34 @@ import {
   Stack,
 } from '@chakra-ui/react'
 import { SwapperName } from '@shapeshiftoss/swapper'
-import { useCallback, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { chainSupportsTxHistory } from 'components/MultiHopTrade/utils'
 import { Text } from 'components/Text'
 import type { TextPropTypes } from 'components/Text/Text'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import {
-  selectActiveQuote,
   selectActiveSwapperName,
   selectLastHopBuyAsset,
   selectQuoteSellAmountUserCurrency,
   selectTotalNetworkFeeUserCurrencyPrecision,
   selectTradeExecutionState,
 } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
-import { useAppDispatch, useAppSelector } from 'state/store'
+import { useAppSelector } from 'state/store'
 
-export const Footer = () => {
+type FooterProps = {
+  handleSubmit: () => void
+}
+
+export const Footer: FC<FooterProps> = ({ handleSubmit }) => {
   const translate = useTranslate()
-  const dispatch = useAppDispatch()
   const swapperName = useAppSelector(selectActiveSwapperName)
-  const activeQuote = useAppSelector(selectActiveQuote)
   const lastHopBuyAsset = useAppSelector(selectLastHopBuyAsset)
   const tradeExecutionState = useAppSelector(selectTradeExecutionState)
   const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
   const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
-  const { isModeratePriceImpact } = usePriceImpact(activeQuote)
-
-  const handleConfirm = useCallback(() => {
-    dispatch(tradeQuoteSlice.actions.confirmTrade())
-  }, [dispatch])
 
   const networkFeeToTradeRatioPercentage = useMemo(
     () =>
@@ -140,13 +135,13 @@ export const Footer = () => {
         </Alert>
       )}
       <Button
-        colorScheme={isModeratePriceImpact ? 'red' : 'blue'}
+        colorScheme={'blue'}
         size='lg'
         width='full'
-        onClick={handleConfirm}
+        onClick={handleSubmit}
         isLoading={isLoading}
       >
-        <Text translation={isModeratePriceImpact ? 'trade.tradeAnyway' : 'trade.confirmAndTrade'} />
+        <Text translation={'trade.confirmAndTrade'} />
       </Button>
     </CardFooter>
   ) : null