fix: bns overflow issue

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx

@@ -1,46 +1,44 @@
-import { useCallback } from 'react';
-
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { HStack, styled } from 'leather-styles/jsx';
+import { motion } from 'framer-motion';
+import { HStack } from 'leather-styles/jsx';
 
-import { CopyIcon } from '@leather.io/ui';
+import { AddressDisplayer, CopyIcon } from '@leather.io/ui';
 
 import { analytics } from '@shared/utils/analytics';
 
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { useToast } from '@app/features/toasts/use-toast';
 
 interface RecipientAddressDisplayerProps {
   address: string;
 }
 export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayerProps) {
-  const { onCopy, hasCopied } = useClipboard(address);
+  const { onCopy } = useClipboard(address);
+  const toast = useToast();
+
+  function copyToClipboard() {
+    toast.success('Copied to clipboard!');
 
-  const copyToClipboard = useCallback(() => {
     void analytics.track('copy_recipient_bns_address_to_clipboard');
     onCopy();
-  }, [onCopy]);
+  }
 
   return (
-    <HStack mb="space.04" width="100%" px="space.04" mt="space.02">
-      <styled.span
-        textStyle="caption.01"
-        data-testid={SendCryptoAssetSelectors.RecipientBnsAddressLabel}
-      >
-        {address}
-      </styled.span>
-      {/** TODO: We need to persist the tooltip after it is clicked.
-           Current implementation of radix-ui tooltip doesn't allow that, ref: https://github.com/radix-ui/primitives/issues/2029 */}
-      <BasicTooltip label={hasCopied ? 'Copied!' : 'Copy address'} side="right" asChild>
-        <styled.button
-          _hover={{ cursor: 'pointer' }}
-          data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}
-          onClick={copyToClipboard}
+    <HStack mb="space.04" width="100%" mt="space.02">
+      <HStack onClick={copyToClipboard} cursor="pointer">
+        <AddressDisplayer
+          data-testid={SendCryptoAssetSelectors.RecipientBnsAddressLabel}
+          address={address}
+        />
+
+        <motion.button
           type="button"
+          whileTap={{ scale: 0.85 }}
+          data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}
         >
           <CopyIcon />
-        </styled.button>
-      </BasicTooltip>
+        </motion.button>
+      </HStack>
     </HStack>
   );
 }