fix: add copy and qr options to receive modal, closes #3307

src/app/components/receive/receive-collectible-item.tsx

@@ -1,21 +1,27 @@
 import { FiCopy } from 'react-icons/fi';
 
 import { Box, Button, ButtonProps, Flex, Stack } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
+import { color, truncateMiddle } from '@stacks/ui-utils';
+
+import { QrCodeIcon } from '@app/components/qr-code-icon';
 
 import { Flag } from '../layout/flag';
 import { Caption } from '../typography';
 
 interface ReceiveCollectibleItemProps extends ButtonProps {
   address: string;
+  dataTestId?: string;
   icon: React.JSX.Element;
   onCopyAddress(): void;
+  onClickQrCode?(): void;
   title: string;
 }
 export function ReceiveCollectibleItem({
   address,
+  dataTestId,
   icon,
   onCopyAddress,
+  onClickQrCode,
   title,
   ...rest
 }: ReceiveCollectibleItemProps) {
@@ -31,6 +37,19 @@ export function ReceiveCollectibleItem({
             <Button borderRadius="10px" mode="tertiary" onClick={onCopyAddress} {...rest}>
               <FiCopy />
             </Button>
+            {onClickQrCode && (
+              <Button
+                borderRadius="10px"
+                data-testid={dataTestId}
+                mode="tertiary"
+                ml="tight"
+                onClick={onClickQrCode}
+              >
+                <Box color={color('text-caption')} size="14px">
+                  <QrCodeIcon />
+                </Box>
+              </Button>
+            )}
           </Box>
         </Stack>
       </Flex>

src/app/components/receive/receive-collectible.tsx

@@ -29,6 +29,7 @@ export function ReceiveCollectible() {
   // const { isLoading, isError, data: btcAddress } = useNextFreshTaprootAddressQuery(accountIndex);
 
   const stxAddress = useCurrentAccountStxAddressState();
+  const { onCopy: onCopyOrdinal } = useClipboard(btcAddressTaproot);
   const { onCopy: onCopyBitcoin } = useClipboard(btcAddressNativeSegwit);
   const { onCopy: onCopyStacks } = useClipboard(stxAddress);
 
@@ -51,8 +52,9 @@ export function ReceiveCollectible() {
       <ReceiveCollectibleItem
         address={btcAddressTaproot}
         icon={<OrdinalIcon />}
-        data-testid={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn}
-        onCopyAddress={() => {
+        dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn}
+        onCopyAddress={() => copyBitcoinAddressToClipboard(onCopyOrdinal)}
+        onClickQrCode={() => {
           void analytics.track('select_inscription_to_add_new_collectible');
           navigate(RouteUrls.ReceiveCollectibleOrdinal, { state: { btcAddressTaproot } });
         }}
@@ -71,7 +73,9 @@ export function ReceiveCollectible() {
       <ReceiveCollectibleItem
         address={stxAddress}
         icon={<StxAvatar />}
+        dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn}
         onCopyAddress={() => copyStacksAddressToClipboard(onCopyStacks)}
+        onClickQrCode={() => navigate(RouteUrls.ReceiveStx)}
         title="Stacks NFT"
       />
     </Stack>

src/app/pages/receive-tokens/receive-modal.tsx

@@ -24,6 +24,7 @@ export function ReceiveModal() {
   const navigate = useNavigate();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const stxAddress = useCurrentAccountStxAddressState();
+  const { onCopy: onCopyBtc } = useClipboard(btcAddress);
   const { onCopy: onCopyStacks } = useClipboard(stxAddress);
 
   function copyToClipboard(copyHandler: () => void) {
@@ -45,10 +46,18 @@ export function ReceiveModal() {
               </Box>
               <Stack>
                 <Box>
+                  <Button
+                    borderRadius="10px"
+                    mode="tertiary"
+                    onClick={() => copyToClipboard(onCopyBtc)}
+                  >
+                    <FiCopy />
+                  </Button>
                   <Button
                     borderRadius="10px"
                     data-testid={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn}
                     mode="tertiary"
+                    ml="tight"
                     onClick={() => navigate(RouteUrls.ReceiveBtc)}
                   >
                     <Box color={color('text-caption')} size="14px">
@@ -70,7 +79,6 @@ export function ReceiveModal() {
                   <Button
                     borderRadius="10px"
                     mode="tertiary"
-                    mr="tight"
                     onClick={() => copyToClipboard(onCopyStacks)}
                   >
                     <FiCopy />
@@ -79,6 +87,7 @@ export function ReceiveModal() {
                     borderRadius="10px"
                     data-testid={HomePageSelectors.ReceiveStxQrCodeBtn}
                     mode="tertiary"
+                    ml="tight"
                     onClick={() => navigate(RouteUrls.ReceiveStx)}
                   >
                     <Box color={color('text-caption')} size="14px">