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