diff --git a/src/app/components/receive/receive-collectible-item.tsx b/src/app/components/receive/receive-collectible-item.tsx
index daf75c06..5991a6b3 100644
--- a/src/app/components/receive/receive-collectible-item.tsx
+++ b/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({
+ {onClickQrCode && (
+
+ )}
diff --git a/src/app/components/receive/receive-collectible.tsx b/src/app/components/receive/receive-collectible.tsx
index bfb5b40e..e9f4e74f 100644
--- a/src/app/components/receive/receive-collectible.tsx
+++ b/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() {
}
- 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() {
}
+ dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn}
onCopyAddress={() => copyStacksAddressToClipboard(onCopyStacks)}
+ onClickQrCode={() => navigate(RouteUrls.ReceiveStx)}
title="Stacks NFT"
/>
diff --git a/src/app/pages/receive-tokens/receive-modal.tsx b/src/app/pages/receive-tokens/receive-modal.tsx
index 859d256f..2757bfac 100644
--- a/src/app/pages/receive-tokens/receive-modal.tsx
+++ b/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() {
+