feat: cleanup Acknowledgement.tsx (#8472)

src/components/Acknowledgement/Acknowledgement.tsx

@@ -2,24 +2,19 @@ import type { ComponentWithAs, IconProps, ThemeTypings } from '@chakra-ui/react'
 import {
   Box,
   Button,
-  Checkbox,
-  Link,
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalOverlay,
-  useColorModeValue,
 } from '@chakra-ui/react'
 import type { InterpolationOptions } from 'node-polyglot'
-import React, { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import { FiAlertTriangle } from 'react-icons/fi'
 import { useTranslate } from 'react-polyglot'
-import { StreamIcon } from 'components/Icons/Stream'
 import { RawText, Text } from 'components/Text'
-import { formatSecondsToDuration } from 'lib/utils/time'
 
-type AcknowledgementProps = {
+export type AcknowledgementProps = {
   content?: JSX.Element
   message: string | JSX.Element
   onAcknowledge: (() => void) | undefined
@@ -32,11 +27,6 @@ type AcknowledgementProps = {
   disableButton?: boolean
 }
 
-type StreamingAcknowledgementProps = Omit<AcknowledgementProps, 'message'> & {
-  estimatedTimeMs: number
-}
-type ArbitrumAcknowledgementProps = Omit<AcknowledgementProps, 'message'>
-
 const cancelHoverProps = { bg: 'rgba(255, 255, 255, 0.2)' }
 
 export const Acknowledgement = ({
@@ -116,94 +106,3 @@ export const Acknowledgement = ({
     </Modal>
   )
 }
-
-export const WarningAcknowledgement = (props: AcknowledgementProps) =>
-  Acknowledgement({ ...props, buttonColorScheme: 'red', iconColorScheme: 'red' })
-
-export const InfoAcknowledgement = (props: AcknowledgementProps) =>
-  Acknowledgement({ ...props, buttonColorScheme: 'blue', iconColorScheme: 'yellow' })
-
-export const StreamingAcknowledgement = ({
-  estimatedTimeMs,
-  ...restProps
-}: StreamingAcknowledgementProps) => {
-  const translate = useTranslate()
-
-  return (
-    <Acknowledgement
-      {...restProps}
-      buttonColorScheme='blue'
-      buttonTranslation='common.continue'
-      message={translate('streamingAcknowledgement.description', {
-        estimatedTimeHuman: formatSecondsToDuration(estimatedTimeMs / 1000),
-      })}
-      icon={StreamIcon}
-    />
-  )
-}
-
-export const ArbitrumBridgeAcknowledgement = (props: ArbitrumAcknowledgementProps) => {
-  const translate = useTranslate()
-  const [hasAgreed, setHasAgreed] = useState([false, false])
-
-  const isDisabled = useMemo(() => !hasAgreed.every(Boolean), [hasAgreed])
-
-  const handleAgree = useCallback(
-    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      const updatedAgreements = [...hasAgreed]
-      updatedAgreements[index] = event.target.checked
-      setHasAgreed(updatedAgreements)
-    },
-    [hasAgreed],
-  )
-
-  const checkboxTextColor = useColorModeValue('gray.800', 'gray.50')
-
-  const checkboxes = useMemo(
-    () => (
-      <Box py={4} textAlign='left' color={checkboxTextColor}>
-        <Checkbox onChange={handleAgree(0)} fontWeight='bold' py={2}>
-          {translate('bridge.arbitrum.waitCta')}
-        </Checkbox>
-        <Checkbox onChange={handleAgree(1)} fontWeight='bold' py={2}>
-          {translate('bridge.arbitrum.claimCta')}
-        </Checkbox>
-      </Box>
-    ),
-    [checkboxTextColor, handleAgree, translate],
-  )
-
-  const handleAcknowledge = useMemo(() => {
-    if (isDisabled) return
-
-    return props.onAcknowledge
-  }, [isDisabled, props])
-
-  const message = useMemo(
-    () => (
-      <>
-        <RawText as='span'>{translate('bridge.arbitrum.waitWarning')}</RawText>{' '}
-        <Link
-          href='https://docs.arbitrum.io/arbitrum-bridge/quickstart#withdraw-eth-or-erc-20-tokens-from-child-chain-to-parent-chain'
-          isExternal
-          colorScheme='blue'
-          color='blue.500'
-        >
-          {translate('common.learnMore')}
-        </Link>
-      </>
-    ),
-    [translate],
-  )
-
-  return (
-    <Acknowledgement
-      {...props}
-      buttonTranslation='common.continue'
-      message={message}
-      content={checkboxes}
-      disableButton={isDisabled}
-      onAcknowledge={handleAcknowledge}
-    />
-  )
-}

src/components/Acknowledgement/InfoAcknowledgement.tsx

@@ -0,0 +1,5 @@
+import type { AcknowledgementProps } from './Acknowledgement'
+import { Acknowledgement } from './Acknowledgement'
+
+export const InfoAcknowledgement = (props: AcknowledgementProps) =>
+  Acknowledgement({ ...props, buttonColorScheme: 'blue', iconColorScheme: 'yellow' })

src/components/Acknowledgement/WarningAcknowledgement.tsx

@@ -0,0 +1,5 @@
+import type { AcknowledgementProps } from './Acknowledgement'
+import { Acknowledgement } from './Acknowledgement'
+
+export const WarningAcknowledgement = (props: AcknowledgementProps) =>
+  Acknowledgement({ ...props, buttonColorScheme: 'red', iconColorScheme: 'red' })

src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useHistory } from 'react-router'
 import type { Address } from 'viem'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { TradeInputTab } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
 import { useAccountsFetchQuery } from 'context/AppProvider/hooks/useAccountsFetchQuery'

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

@@ -3,7 +3,7 @@ import { isArbitrumBridgeTradeQuoteOrRate } from '@shapeshiftoss/swapper/dist/sw
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButton'
 import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'

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

@@ -13,7 +13,7 @@ import { SwapperName } from '@shapeshiftoss/swapper'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { chainSupportsTxHistory } from 'components/MultiHopTrade/utils'
 import { RawText, Text } from 'components/Text'

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

@@ -11,11 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
-import {
-  ArbitrumBridgeAcknowledgement,
-  StreamingAcknowledgement,
-  WarningAcknowledgement,
-} from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
 import { getMixpanelEventData } from 'components/MultiHopTrade/helpers'
 import { useInputOutputDifferenceDecimalPercentage } from 'components/MultiHopTrade/hooks/useInputOutputDifference'
@@ -62,8 +58,10 @@ import { useAccountIds } from '../../hooks/useAccountIds'
 import { SharedTradeInput } from '../SharedTradeInput/SharedTradeInput'
 import { SharedTradeInputBody } from '../SharedTradeInput/SharedTradeInputBody'
 import { TradeAssetInput } from '../TradeAssetInput'
+import { ArbitrumBridgeAcknowledgement } from './components/ArbitrumBridgeAcknowledgement'
 import { CollapsibleQuoteList } from './components/CollapsibleQuoteList'
 import { ConfirmSummary } from './components/ConfirmSummary'
+import { StreamingAcknowledgement } from './components/StreamingAcknowledgement'
 import { TradeSettingsMenu } from './components/TradeSettingsMenu'
 import { useTradeReceiveAddress } from './hooks/useTradeReceiveAddress'
 

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

@@ -0,0 +1,75 @@
+import { Box, Checkbox, Link } from '@chakra-ui/react'
+import { useColorModeValue } from '@chakra-ui/system'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
+import type { AcknowledgementProps } from 'components/Acknowledgement/Acknowledgement'
+import { Acknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { RawText } from 'components/Text/Text'
+
+type ArbitrumAcknowledgementProps = Omit<AcknowledgementProps, 'message'>
+
+export const ArbitrumBridgeAcknowledgement = (props: ArbitrumAcknowledgementProps) => {
+  const translate = useTranslate()
+  const [hasAgreed, setHasAgreed] = useState([false, false])
+
+  const isDisabled = useMemo(() => !hasAgreed.every(Boolean), [hasAgreed])
+
+  const handleAgree = useCallback(
+    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const updatedAgreements = [...hasAgreed]
+      updatedAgreements[index] = event.target.checked
+      setHasAgreed(updatedAgreements)
+    },
+    [hasAgreed],
+  )
+
+  const checkboxTextColor = useColorModeValue('gray.800', 'gray.50')
+
+  const checkboxes = useMemo(
+    () => (
+      <Box py={4} textAlign='left' color={checkboxTextColor}>
+        <Checkbox onChange={handleAgree(0)} fontWeight='bold' py={2}>
+          {translate('bridge.arbitrum.waitCta')}
+        </Checkbox>
+        <Checkbox onChange={handleAgree(1)} fontWeight='bold' py={2}>
+          {translate('bridge.arbitrum.claimCta')}
+        </Checkbox>
+      </Box>
+    ),
+    [checkboxTextColor, handleAgree, translate],
+  )
+
+  const handleAcknowledge = useMemo(() => {
+    if (isDisabled) return
+
+    return props.onAcknowledge
+  }, [isDisabled, props])
+
+  const message = useMemo(
+    () => (
+      <>
+        <RawText as='span'>{translate('bridge.arbitrum.waitWarning')}</RawText>{' '}
+        <Link
+          href='https://docs.arbitrum.io/arbitrum-bridge/quickstart#withdraw-eth-or-erc-20-tokens-from-child-chain-to-parent-chain'
+          isExternal
+          colorScheme='blue'
+          color='blue.500'
+        >
+          {translate('common.learnMore')}
+        </Link>
+      </>
+    ),
+    [translate],
+  )
+
+  return (
+    <Acknowledgement
+      {...props}
+      buttonTranslation='common.continue'
+      message={message}
+      content={checkboxes}
+      disableButton={isDisabled}
+      onAcknowledge={handleAcknowledge}
+    />
+  )
+}

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

@@ -0,0 +1,28 @@
+import { useTranslate } from 'react-polyglot'
+import type { AcknowledgementProps } from 'components/Acknowledgement/Acknowledgement'
+import { Acknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { StreamIcon } from 'components/Icons/Stream'
+import { formatSecondsToDuration } from 'lib/utils/time'
+
+type StreamingAcknowledgementProps = Omit<AcknowledgementProps, 'message'> & {
+  estimatedTimeMs: number
+}
+
+export const StreamingAcknowledgement = ({
+  estimatedTimeMs,
+  ...restProps
+}: StreamingAcknowledgementProps) => {
+  const translate = useTranslate()
+
+  return (
+    <Acknowledgement
+      {...restProps}
+      buttonColorScheme='blue'
+      buttonTranslation='common.continue'
+      message={translate('streamingAcknowledgement.description', {
+        estimatedTimeHuman: formatSecondsToDuration(estimatedTimeMs / 1000),
+      })}
+      icon={StreamIcon}
+    />
+  )
+}

src/components/TradeAssetSearch/components/CustomAssetAcknowledgement.tsx

@@ -15,7 +15,7 @@ import type { Asset } from '@shapeshiftoss/types'
 import type * as CSS from 'csstype'
 import { useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { AssetIcon } from 'components/AssetIcon'
 import { InlineCopyButton } from 'components/InlineCopyButton'
 import { useToggle } from 'hooks/useToggle/useToggle'

src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Deposit.tsx

@@ -19,7 +19,7 @@ import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
 import { encodeFunctionData, getAddress, maxUint256 } from 'viem'
 import type { AccountDropdownProps } from 'components/AccountDropdown/AccountDropdown'
-import { InfoAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { InfoAcknowledgement } from 'components/Acknowledgement/InfoAcknowledgement'
 import { Amount } from 'components/Amount/Amount'
 import type { StepComponentProps } from 'components/DeFi/components/Steps'
 import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'

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

@@ -19,7 +19,7 @@ import { useTranslate } from 'react-polyglot'
 import { reactQueries } from 'react-queries'
 import { useQuoteEstimatedFeesQuery } from 'react-queries/hooks/useQuoteEstimatedFeesQuery'
 import { useHistory } from 'react-router'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { Amount } from 'components/Amount/Amount'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
 import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'

src/pages/RFOX/components/Stake/StakeInput.tsx

@@ -12,7 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm, useWatch } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
-import { InfoAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { InfoAcknowledgement } from 'components/Acknowledgement/InfoAcknowledgement'
 import { Amount } from 'components/Amount/Amount'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
 import { ButtonWalletPredicate } from 'components/ButtonWalletPredicate/ButtonWalletPredicate'

src/pages/RFOX/components/Unstake/UnstakeInput.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm, useWatch } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
-import { WarningAcknowledgement } from 'components/Acknowledgement/Acknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { Amount } from 'components/Amount/Amount'
 import { AmountSlider } from 'components/AmountSlider'
 import { ButtonWalletPredicate } from 'components/ButtonWalletPredicate/ButtonWalletPredicate'

src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx

@@ -35,10 +35,8 @@ import { useTranslate } from 'react-polyglot'
 import { reactQueries } from 'react-queries'
 import { useIsTradingActive } from 'react-queries/hooks/useIsTradingActive'
 import { useHistory } from 'react-router'
-import {
-  InfoAcknowledgement,
-  WarningAcknowledgement,
-} from 'components/Acknowledgement/Acknowledgement'
+import { InfoAcknowledgement } from 'components/Acknowledgement/InfoAcknowledgement'
+import { WarningAcknowledgement } from 'components/Acknowledgement/WarningAcknowledgement'
 import { Amount } from 'components/Amount/Amount'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
 import { ButtonWalletPredicate } from 'components/ButtonWalletPredicate/ButtonWalletPredicate'