chore: refactor receive modal to share code better

src/app/components/icons/btc-stamps-icon.tsx

@@ -0,0 +1,6 @@
+import BitcoinStampImg from '@assets/images/bitcoin-stamp.png';
+import { Box } from '@stacks/ui';
+
+export function BtcStampsIcon() {
+  return <Box as="img" src={BitcoinStampImg} width="36px" />;
+}

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

@@ -3,28 +3,26 @@ import { FiCopy } from 'react-icons/fi';
 import { Box, Button, ButtonProps, Flex, Stack } from '@stacks/ui';
 import { color, truncateMiddle } from '@stacks/ui-utils';
 
+import { Caption } from '@app/components//typography';
+import { Flag } from '@app/components/layout/flag';
 import { QrCodeIcon } from '@app/components/qr-code-icon';
 
-import { Flag } from '../layout/flag';
-import { Caption } from '../typography';
-
-interface ReceiveCollectibleItemProps extends ButtonProps {
+interface ReceiveItemProps extends ButtonProps {
   address: string;
   dataTestId?: string;
   icon: React.JSX.Element;
   onCopyAddress(): void;
   onClickQrCode?(): void;
   title: string;
 }
-export function ReceiveCollectibleItem({
+export function ReceiveItem({
   address,
   dataTestId,
   icon,
   onCopyAddress,
   onClickQrCode,
   title,
-  ...rest
-}: ReceiveCollectibleItemProps) {
+}: ReceiveItemProps) {
   return (
     <Flag img={icon} spacing="base">
       <Flex justifyContent="space-between">
@@ -34,7 +32,7 @@ export function ReceiveCollectibleItem({
         </Box>
         <Stack>
           <Box>
-            <Button borderRadius="10px" mode="tertiary" onClick={onCopyAddress} {...rest}>
+            <Button borderRadius="10px" mode="tertiary" onClick={onCopyAddress}>
               <FiCopy />
             </Button>
             {onClickQrCode && (
@@ -45,9 +43,7 @@ export function ReceiveCollectibleItem({
                 ml="tight"
                 onClick={onClickQrCode}
               >
-                <Box color={color('text-caption')} size="14px">
-                  <QrCodeIcon />
-                </Box>
+                <QrCodeIcon color={color('text-caption')} size="14px" />
               </Button>
             )}
           </Box>

src/app/pages/receive/components/receive-items.tsx

@@ -0,0 +1,18 @@
+import { ButtonProps, Stack } from '@stacks/ui';
+
+import { Caption } from '@app/components//typography';
+
+interface ReceiveItemListProps extends ButtonProps {
+  children: React.ReactNode;
+  title?: string;
+}
+export function ReceiveItemList({ children, title }: ReceiveItemListProps) {
+  return (
+    <>
+      {title && <Caption>{title}</Caption>}
+      <Stack spacing="loose" mt="base" mb="extra-loose">
+        {children}
+      </Stack>
+    </>
+  );
+}

src/app/pages/receive-tokens/receive-tokens.tsx → src/app/pages/receive/legacy/receive-tokens.tsx

@@ -6,7 +6,7 @@ import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-acco
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
-import { ReceiveTokensLayout } from './components/receive-tokens.layout';
+import { ReceiveTokensLayout } from '../components/receive-tokens.layout';
 
 // ts-unused-exports:disable-next-line
 export function ReceiveTokens() {