diff --git a/src/components/Acknowledgement/Acknowledgement.tsx b/src/components/Acknowledgement/Acknowledgement.tsx index dd2215c7404..b3ac42db4a2 100644 --- a/src/components/Acknowledgement/Acknowledgement.tsx +++ b/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 & { - estimatedTimeMs: number -} -type ArbitrumAcknowledgementProps = Omit - const cancelHoverProps = { bg: 'rgba(255, 255, 255, 0.2)' } export const Acknowledgement = ({ @@ -116,94 +106,3 @@ export const Acknowledgement = ({ ) } - -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 ( - - ) -} - -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) => { - const updatedAgreements = [...hasAgreed] - updatedAgreements[index] = event.target.checked - setHasAgreed(updatedAgreements) - }, - [hasAgreed], - ) - - const checkboxTextColor = useColorModeValue('gray.800', 'gray.50') - - const checkboxes = useMemo( - () => ( - - - {translate('bridge.arbitrum.waitCta')} - - - {translate('bridge.arbitrum.claimCta')} - - - ), - [checkboxTextColor, handleAgree, translate], - ) - - const handleAcknowledge = useMemo(() => { - if (isDisabled) return - - return props.onAcknowledge - }, [isDisabled, props]) - - const message = useMemo( - () => ( - <> - {translate('bridge.arbitrum.waitWarning')}{' '} - - {translate('common.learnMore')} - - - ), - [translate], - ) - - return ( - - ) -} diff --git a/src/components/Acknowledgement/InfoAcknowledgement.tsx b/src/components/Acknowledgement/InfoAcknowledgement.tsx new file mode 100644 index 00000000000..825e243e4eb --- /dev/null +++ b/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' }) diff --git a/src/components/Acknowledgement/WarningAcknowledgement.tsx b/src/components/Acknowledgement/WarningAcknowledgement.tsx new file mode 100644 index 00000000000..221d3b35f22 --- /dev/null +++ b/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' }) diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx index 5130afc331b..9c64a57fdba 100644 --- a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx +++ b/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' diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx index 60584bf2e9d..ade8909ffa1 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx +++ b/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' diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx index 7aab43e2f32..641be843fe7 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx +++ b/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' diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx index aa9e6648b05..e3eebf76383 100644 --- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx +++ b/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' diff --git a/src/components/MultiHopTrade/components/TradeInput/components/ArbitrumBridgeAcknowledgement.tsx b/src/components/MultiHopTrade/components/TradeInput/components/ArbitrumBridgeAcknowledgement.tsx new file mode 100644 index 00000000000..f22c05b2b67 --- /dev/null +++ b/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 + +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) => { + const updatedAgreements = [...hasAgreed] + updatedAgreements[index] = event.target.checked + setHasAgreed(updatedAgreements) + }, + [hasAgreed], + ) + + const checkboxTextColor = useColorModeValue('gray.800', 'gray.50') + + const checkboxes = useMemo( + () => ( + + + {translate('bridge.arbitrum.waitCta')} + + + {translate('bridge.arbitrum.claimCta')} + + + ), + [checkboxTextColor, handleAgree, translate], + ) + + const handleAcknowledge = useMemo(() => { + if (isDisabled) return + + return props.onAcknowledge + }, [isDisabled, props]) + + const message = useMemo( + () => ( + <> + {translate('bridge.arbitrum.waitWarning')}{' '} + + {translate('common.learnMore')} + + + ), + [translate], + ) + + return ( + + ) +} diff --git a/src/components/MultiHopTrade/components/TradeInput/components/StreamingAcknowledgement.tsx b/src/components/MultiHopTrade/components/TradeInput/components/StreamingAcknowledgement.tsx new file mode 100644 index 00000000000..aabb5717996 --- /dev/null +++ b/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 & { + estimatedTimeMs: number +} + +export const StreamingAcknowledgement = ({ + estimatedTimeMs, + ...restProps +}: StreamingAcknowledgementProps) => { + const translate = useTranslate() + + return ( + + ) +} diff --git a/src/components/TradeAssetSearch/components/CustomAssetAcknowledgement.tsx b/src/components/TradeAssetSearch/components/CustomAssetAcknowledgement.tsx index 1d89b2f859d..167c8af3fd0 100644 --- a/src/components/TradeAssetSearch/components/CustomAssetAcknowledgement.tsx +++ b/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' diff --git a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Deposit.tsx b/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Deposit.tsx index 695ce4c363d..ad88d1a0aab 100644 --- a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Deposit.tsx +++ b/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' diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx index 783b5ea76f6..84b8e75c3b6 100644 --- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx +++ b/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' diff --git a/src/pages/RFOX/components/Stake/StakeInput.tsx b/src/pages/RFOX/components/Stake/StakeInput.tsx index a5d8754af50..116d298f3ac 100644 --- a/src/pages/RFOX/components/Stake/StakeInput.tsx +++ b/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' diff --git a/src/pages/RFOX/components/Unstake/UnstakeInput.tsx b/src/pages/RFOX/components/Unstake/UnstakeInput.tsx index 98f7cad56cd..8e6ca7e0f61 100644 --- a/src/pages/RFOX/components/Unstake/UnstakeInput.tsx +++ b/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' diff --git a/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx index 22a8afc59a0..926c3f7c65f 100644 --- a/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx +++ b/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'