feat: use WarningAcknowledgement component

src/assets/translations/en/main.json

@@ -2336,7 +2336,7 @@
     "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 unssafe, proceed with caution."
+    "unsafeTrade": "This trade may be unsafe, proceed with caution."
   },
   "watchlist": {
     "empty": {

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

@@ -1,8 +1,5 @@
 import { ArrowDownIcon } from '@chakra-ui/icons'
 import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
   Button,
   Card,
   CardFooter,
@@ -48,14 +45,12 @@ import { useWallet } from 'hooks/useWallet/useWallet'
 import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
 import { positiveOrZero } from 'lib/bignumber/bignumber'
 import type { ParameterModel } from 'lib/fees/parameters/types'
-import { fromBaseUnit } from 'lib/math'
 import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
 import { MixPanelEvent } from 'lib/mixpanel/types'
 import {
   THORCHAIN_LONGTAIL_STREAMING_SWAP_SOURCE,
   THORCHAIN_LONGTAIL_SWAP_SOURCE,
 } from 'lib/swapper/swappers/ThorchainSwapper/constants'
-import type { ThorTradeQuote } from 'lib/swapper/swappers/ThorchainSwapper/getThorTradeQuote/getTradeQuote'
 import { isKeplrHDWallet, isToken } from 'lib/utils'
 import { selectIsSnapshotApiQueriesPending, selectVotingPower } from 'state/apis/snapshot/selectors'
 import { selectIsTradeQuoteApiQueryPending } from 'state/apis/swapper/selectors'
@@ -379,10 +374,6 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
     wallet,
   ])
 
-  useEffect(() => {
-    if (isUnsafeQuote) setShouldShowWarningAcknowledgement(true)
-  }, [isUnsafeQuote])
-
   useEffect(() => {
     // Reset the trade warning if the active quote has changed, i.e. a better quote has come in and the
     // user has not yet confirmed the previous one
@@ -430,34 +421,6 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
     isTradeQuoteApiQueryPending,
   ])
 
-  const maybeUnsafeTradeWarning = useMemo(() => {
-    if (!isUnsafeQuote) return null
-
-    const recommendedMinimumCryptoBaseUnit = (activeQuote as ThorTradeQuote)
-      ?.recommendedMinimumCryptoBaseUnit
-    if (!recommendedMinimumCryptoBaseUnit) return null
-    const recommendedMinimumCryptoPrecision = fromBaseUnit(
-      recommendedMinimumCryptoBaseUnit,
-      sellAsset.precision,
-    )
-
-    return (
-      <Flex direction='column' gap={2}>
-        <Alert status='error' width='auto' fontSize='sm' variant='solid'>
-          <AlertIcon color='red' />
-          <Stack spacing={0}>
-            <AlertDescription lineHeight='short'>
-              {translate('trade.errors.unsafeQuote', {
-                symbol: sellAsset.symbol,
-                recommendedMin: recommendedMinimumCryptoPrecision,
-              })}
-            </AlertDescription>
-          </Stack>
-        </Alert>
-      </Flex>
-    )
-  }, [activeQuote, isUnsafeQuote, sellAsset.precision, sellAsset.symbol, translate])
-
   const handleCloseCompactQuoteList = useCallback(() => setIsCompactQuoteListOpen(false), [])
 
   const handleOpenCompactQuoteList = useCallback(() => {
@@ -522,7 +485,6 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
         >
           <WithLazyMount shouldUse={Boolean(receiveAddress)} component={RecipientAddress} />
           <WithLazyMount shouldUse={!walletSupportsBuyAssetChain} component={ManualAddressEntry} />
-          {maybeUnsafeTradeWarning}
 
           <Button
             type='submit'
@@ -556,21 +518,17 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
       priceImpactPercentage,
       receiveAddress,
       walletSupportsBuyAssetChain,
-      maybeUnsafeTradeWarning,
       quoteHasError,
       shouldDisablePreviewButton,
       quoteStatusTranslation,
     ],
   )
 
   const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit])
-  const handleTradeQouteConfirm = useCallback(() => {
-    if (isUnsafeQuote) {
-      return setShouldShowWarningAcknowledgement(true)
-    } else {
-      handleFormSubmit()
-    }
-  }, [handleFormSubmit, isUnsafeQuote])
+  const handleTradeQouteConfirm = useCallback(
+    () => (isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : handleFormSubmit()),
+    [handleFormSubmit, isUnsafeQuote],
+  )
 
   const sellTradeAssetSelect = useMemo(
     () => (

src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx

@@ -486,9 +486,10 @@ export const BorrowInput = ({
     lendingQuoteError?.message,
   ])
 
-  const handleBorrowSubmit = useCallback(() => {
-    return !!isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : onSubmit()
-  }, [isUnsafeQuote, onSubmit])
+  const handleBorrowSubmit = useCallback(
+    () => (isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : onSubmit()),
+    [isUnsafeQuote, onSubmit],
+  )
 
   if (!(collateralAsset && borrowAsset && collateralFeeAsset)) return null