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 = () => {
-
+