From bf8583a085cacf9f62d155ce485822084b8fe35d Mon Sep 17 00:00:00 2001
From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:46:32 +0200
Subject: [PATCH 1/2] feat: add copy button to the send amount

---
 src/components/CopyButton/CopyButton.tsx | 25 ++++++++++++++++++++++++
 src/components/Status/Status.tsx         |  6 +++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CopyButton/CopyButton.tsx

diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
new file mode 100644
index 0000000..522417b
--- /dev/null
+++ b/src/components/CopyButton/CopyButton.tsx
@@ -0,0 +1,25 @@
+import { CheckIcon, CopyIcon } from '@chakra-ui/icons'
+import { IconButton, useClipboard } from '@chakra-ui/react'
+
+const checkIcon = <CheckIcon />
+const copyIcon = <CopyIcon />
+
+type CopyButtonProps = {
+  text: string
+  timeout?: number
+}
+
+export const CopyButton = ({ text, timeout = 3000 }: CopyButtonProps) => {
+  const { onCopy, hasCopied: isCopied } = useClipboard(text, { timeout })
+
+  return (
+    <IconButton
+      borderRadius='lg'
+      size='sm'
+      variant='ghost'
+      icon={isCopied ? checkIcon : copyIcon}
+      aria-label='Copy address'
+      onClick={onCopy}
+    />
+  )
+}
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index 3050555..b5d3ee2 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -38,6 +38,7 @@ import { FaArrowUpRightFromSquare, FaCheck, FaRegCopy } 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'
@@ -129,7 +130,10 @@ const IdleSwapCardBody = ({
           <Flex alignItems='center' gap={2}>
             <AssetIcon assetId={sellAssetId} size='sm' />
             <VStack spacing={0} alignItems='flex-start'>
-              <Amount.Crypto value={sellAmountCryptoPrecision} symbol={sellAsset.symbol} />
+              <Flex alignItems='center' gap={1}>
+                <Amount.Crypto value={sellAmountCryptoPrecision} symbol={sellAsset.symbol} />
+                <CopyButton text={sellAmountCryptoPrecision} />
+              </Flex>
               {sellAsset.relatedAssetKey && (
                 <Text fontSize='xs' color='text.subtle'>
                   on {sellAsset.networkName}

From 6377e2a090a5c5a4ed1099da9634c3513a3b6160 Mon Sep 17 00:00:00 2001
From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:52:14 +0200
Subject: [PATCH 2/2] feat: reusable

---
 src/components/CopyButton/CopyButton.tsx |  5 +-
 src/components/Status/Status.tsx         | 71 ++----------------------
 2 files changed, 7 insertions(+), 69 deletions(-)

diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
index 522417b..fa8186c 100644
--- a/src/components/CopyButton/CopyButton.tsx
+++ b/src/components/CopyButton/CopyButton.tsx
@@ -7,9 +7,10 @@ const copyIcon = <CopyIcon />
 type CopyButtonProps = {
   text: string
   timeout?: number
+  ariaLabel?: string
 }
 
-export const CopyButton = ({ text, timeout = 3000 }: CopyButtonProps) => {
+export const CopyButton = ({ text, timeout = 3000, ariaLabel }: CopyButtonProps) => {
   const { onCopy, hasCopied: isCopied } = useClipboard(text, { timeout })
 
   return (
@@ -18,7 +19,7 @@ export const CopyButton = ({ text, timeout = 3000 }: CopyButtonProps) => {
       size='sm'
       variant='ghost'
       icon={isCopied ? checkIcon : copyIcon}
-      aria-label='Copy address'
+      aria-label={ariaLabel ?? 'Copy button'}
       onClick={onCopy}
     />
   )
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index b5d3ee2..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,7 +32,7 @@ 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'
@@ -53,9 +51,6 @@ const CHAINFLIP_EXPLORER_BASE_URL = import.meta.env.VITE_CHAINFLIP_EXPLORER_BASE
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
-const copyIcon = <FaRegCopy />
-const checkIcon = <FaCheck />
-
 const pendingSlideFadeSx = { position: 'absolute', top: 0, left: 0, right: 0 } as const
 const linkHoverSx = { color: 'blue.600' }
 const slideFadeSx = { transitionProperty: 'all', transitionDuration: '0.3s' }
@@ -75,8 +70,6 @@ const IdleSwapCardBody = ({
   buyAssetId,
   sellAmountCryptoPrecision,
   buyAmountCryptoPrecision,
-  handleCopyDepositAddress,
-  isDepositAddressCopied,
   estimatedExpiryTime,
   isStatusLoading,
   isExpired,
@@ -86,8 +79,6 @@ const IdleSwapCardBody = ({
   buyAssetId: AssetId
   sellAmountCryptoPrecision: string
   buyAmountCryptoPrecision: string
-  handleCopyDepositAddress: () => void
-  isDepositAddressCopied: boolean
   estimatedExpiryTime?: string
   isStatusLoading: boolean
   isExpired?: boolean
@@ -148,14 +139,7 @@ const IdleSwapCardBody = ({
             <InputGroup>
               <Input isReadOnly value={swapData.address || ''} />
               <InputRightElement>
-                <IconButton
-                  borderRadius='lg'
-                  size='sm'
-                  variant='ghost'
-                  icon={isDepositAddressCopied ? checkIcon : copyIcon}
-                  aria-label='Copy address'
-                  onClick={handleCopyDepositAddress}
-                />
+                <CopyButton text={swapData.address} ariaLabel='Copy address' />
               </InputRightElement>
             </InputGroup>
           </Stack>
@@ -361,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
 
@@ -425,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}
@@ -476,14 +427,7 @@ export const Status = () => {
           <InputGroup>
             <Input isReadOnly value={refundAddress} />
             <InputRightElement>
-              <IconButton
-                borderRadius='lg'
-                size='sm'
-                variant='ghost'
-                icon={isRefundAddressCopied ? checkIcon : copyIcon}
-                aria-label='Copy refund address'
-                onClick={handleCopyRefundAddress}
-              />
+              <CopyButton text={refundAddress} ariaLabel='Copy refund address' />
             </InputRightElement>
           </InputGroup>
         </Stack>
@@ -497,14 +441,7 @@ export const Status = () => {
           <InputGroup>
             <Input isReadOnly value={destinationAddress} />
             <InputRightElement>
-              <IconButton
-                borderRadius='lg'
-                size='sm'
-                variant='ghost'
-                icon={isReceiveAddressCopied ? checkIcon : copyIcon}
-                aria-label='Copy receive address'
-                onClick={handleCopyReceiveAddress}
-              />
+              <CopyButton text={destinationAddress} ariaLabel='Copy receive address' />
             </InputRightElement>
           </InputGroup>
         </Stack>