diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx new file mode 100644 index 0000000..fa8186c --- /dev/null +++ b/src/components/CopyButton/CopyButton.tsx @@ -0,0 +1,26 @@ +import { CheckIcon, CopyIcon } from '@chakra-ui/icons' +import { IconButton, useClipboard } from '@chakra-ui/react' + +const checkIcon = +const copyIcon = + +type CopyButtonProps = { + text: string + timeout?: number + ariaLabel?: string +} + +export const CopyButton = ({ text, timeout = 3000, ariaLabel }: CopyButtonProps) => { + const { onCopy, hasCopied: isCopied } = useClipboard(text, { timeout }) + + return ( + + ) +} diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index 3050555..5242d07 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -11,7 +11,6 @@ import { Circle, Divider, Flex, - IconButton, Input, InputGroup, InputRightElement, @@ -20,7 +19,6 @@ import { Stack, Tag, Text, - useClipboard, VStack, } from '@chakra-ui/react' import type { AssetId } from '@shapeshiftoss/caip' @@ -34,10 +32,11 @@ import type { ChainflipSwapStatus } from 'queries/chainflip/types' import { useMarketDataByAssetIdQuery } from 'queries/marketData' import { useCallback, useEffect, useMemo, useRef } from 'react' import { useFormContext, useWatch } from 'react-hook-form' -import { FaArrowUpRightFromSquare, FaCheck, FaRegCopy } from 'react-icons/fa6' +import { FaArrowUpRightFromSquare } from 'react-icons/fa6' import { useNavigate, useSearchParams } from 'react-router' import { useAssetById } from 'store/assets' import { Amount } from 'components/Amount/Amount' +import { CopyButton } from 'components/CopyButton/CopyButton' import { QRCode } from 'components/QRCode/QRCode' import { bnOrZero, fromBaseUnit } from 'lib/bignumber/bignumber' import { mixpanel, MixPanelEvent } from 'lib/mixpanel' @@ -52,9 +51,6 @@ const CHAINFLIP_EXPLORER_BASE_URL = import.meta.env.VITE_CHAINFLIP_EXPLORER_BASE dayjs.extend(duration) dayjs.extend(relativeTime) -const copyIcon = -const checkIcon = - const pendingSlideFadeSx = { position: 'absolute', top: 0, left: 0, right: 0 } as const const linkHoverSx = { color: 'blue.600' } const slideFadeSx = { transitionProperty: 'all', transitionDuration: '0.3s' } @@ -74,8 +70,6 @@ const IdleSwapCardBody = ({ buyAssetId, sellAmountCryptoPrecision, buyAmountCryptoPrecision, - handleCopyDepositAddress, - isDepositAddressCopied, estimatedExpiryTime, isStatusLoading, isExpired, @@ -85,8 +79,6 @@ const IdleSwapCardBody = ({ buyAssetId: AssetId sellAmountCryptoPrecision: string buyAmountCryptoPrecision: string - handleCopyDepositAddress: () => void - isDepositAddressCopied: boolean estimatedExpiryTime?: string isStatusLoading: boolean isExpired?: boolean @@ -129,7 +121,10 @@ const IdleSwapCardBody = ({ - + + + + {sellAsset.relatedAssetKey && ( on {sellAsset.networkName} @@ -144,14 +139,7 @@ const IdleSwapCardBody = ({ - + @@ -357,39 +345,8 @@ export const Status = () => { return fromBaseUnit(quote.egressAmountNative, buyAsset.precision) }, [quote?.egressAmountNative, buyAsset?.precision]) - const { onCopy: copyDepositAddress, hasCopied: isDepositAddressCopied } = useClipboard( - swapData.address || '', - { timeout: 3000 }, - ) - const { onCopy: copyReceiveAddress, hasCopied: isReceiveAddressCopied } = useClipboard( - destinationAddress || '', - { timeout: 3000 }, - ) - const { onCopy: copyRefundAddress, hasCopied: isRefundAddressCopied } = useClipboard( - refundAddress || '', - { timeout: 3000 }, - ) - - const handleCopyDepositAddress = useCallback(() => { - if (swapData.address) { - copyDepositAddress() - } - }, [copyDepositAddress, swapData.address]) - const handleCancel = useCallback(() => navigate('/'), [navigate]) - const handleCopyReceiveAddress = useCallback(() => { - if (destinationAddress) { - copyReceiveAddress() - } - }, [copyReceiveAddress, destinationAddress]) - - const handleCopyRefundAddress = useCallback(() => { - if (refundAddress) { - copyRefundAddress() - } - }, [copyRefundAddress, refundAddress]) - if (!(sellAssetId && buyAssetId)) return null if (!(sellAsset && buyAsset)) return null @@ -421,8 +378,6 @@ export const Status = () => { buyAssetId={buyAssetId} sellAmountCryptoPrecision={sellAmountCryptoPrecision} buyAmountCryptoPrecision={buyAmountCryptoPrecision} - handleCopyDepositAddress={handleCopyDepositAddress} - isDepositAddressCopied={isDepositAddressCopied} estimatedExpiryTime={swapStatus?.status.depositChannel?.estimatedExpiryTime} isStatusLoading={isStatusLoading} isExpired={swapStatus?.status.depositChannel?.isExpired} @@ -472,14 +427,7 @@ export const Status = () => { - + @@ -493,14 +441,7 @@ export const Status = () => { - +