refactor(receive): make address cards self-contained and use shared copy action

Author: OriginalEveres

packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.tsx

@@ -15,7 +15,14 @@ import { AUTH_DEVICE, type NotificationEntry } from '@suite-common/toast-notific
 import { getTradingErrorDisplay } from '@suite-common/trading';
 import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 import { DEVICE } from '@trezor/connect';
-import { ArrowDownIcon, ArrowUpIcon, CheckIcon, GearIcon, TorBrowserIcon } from '@trezor/icons';
+import {
+    ArrowDownIcon,
+    ArrowUpIcon,
+    CheckIcon,
+    CopyIcon,
+    GearIcon,
+    TorBrowserIcon,
+} from '@trezor/icons';
 import { exhaustive } from '@trezor/type-utils';
 
 import { ActionRenderer } from './ActionRenderer';
@@ -161,8 +168,9 @@ export const NotificationRenderer = ({
 
         case 'copy-to-clipboard':
             return renderNotificationView(render, notification, {
-                variant: 'success',
+                variant: 'transparent',
                 message: 'TOAST_COPY_TO_CLIPBOARD',
+                icon: CopyIcon,
             });
 
         case 'raw-tx-sent':

suite-common/address/src/getFirstFreshAddress.ts

@@ -1,8 +1,6 @@
-import { type Account, type ReceiveInfo } from '@suite-common/wallet-types';
+import { type Account, type AccountAddress, type ReceiveInfo } from '@suite-common/wallet-types';
 import { comparePath } from '@trezor/crypto-utils';
 
-type AccountAddress = NonNullable<Account['addresses']>['used'][number];
-
 const isPathLowerThanAnyUsedPath = (path: string, usedPaths: string[]) =>
     usedPaths.some(usedPath => comparePath(path, usedPath) < 0);
 

suite-common/address/src/getReceiveAddressHistory.ts

@@ -1,10 +1,8 @@
-import { type Account, type ReceiveInfo } from '@suite-common/wallet-types';
+import { type Account, type AccountAddress, type ReceiveInfo } from '@suite-common/wallet-types';
 import { comparePath } from '@trezor/crypto-utils';
 
 import { getFirstFreshAddress, getFreshAddresses } from './getFirstFreshAddress';
 
-type AccountAddress = NonNullable<Account['addresses']>['used'][number];
-
 type CurrentFreshAddress = {
     path: string;
     address: string;

suite-common/wallet-types/src/account.ts

@@ -7,11 +7,13 @@ import type {
     StakingPool,
     TronAccountExtraData,
 } from '@trezor/blockchain-link-types';
-import type { AccountInfo, PROTO, TokenInfo } from '@trezor/connect';
+import type { AccountAddress, AccountInfo, PROTO, TokenInfo } from '@trezor/connect';
 import type { Bip43Path } from '@trezor/crypto-utils';
 import type { StaticSessionId } from '@trezor/device-utils';
 import { type Branded } from '@trezor/type-utils';
 
+export type { AccountAddress };
+
 export type XpubAddress = string;
 
 export type TokenSymbol = string & Branded<'TokenSymbol'>;

suite/intl/src/messages.ts

@@ -1929,7 +1929,7 @@ export const messages = defineMessages({
         id: 'TR_CONFIRM_ACTION_ON_YOUR',
     },
     TR_COMPARE_ADDRESS_ON_TREZOR: {
-        defaultMessage: 'Compare the pasted address against your Trezor',
+        defaultMessage: 'View the address on your Trezor',
         id: 'TR_COMPARE_ADDRESS_ON_TREZOR',
     },
     TR_CONFIRM_EMPTY_HIDDEN_WALLET_ON: {
@@ -4976,6 +4976,10 @@ export const messages = defineMessages({
         id: 'RECEIVE_ADDRESS_LIMIT_REACHED',
         defaultMessage: "You've reached the maximum limit of 21 fresh, unused addresses",
     },
+    RECEIVE_UNUSED_ADDRESS_LIMIT_REACHED: {
+        id: 'RECEIVE_UNUSED_ADDRESS_LIMIT_REACHED',
+        defaultMessage: 'You can generate only 20 unused addresses.',
+    },
     RECEIVE_ADDRESS_UNAVAILABLE: {
         id: 'RECEIVE_ADDRESS_UNAVAILABLE',
         defaultMessage: 'Unavailable',

suite/labeling/src/index.ts

@@ -2,4 +2,7 @@ export { Labeling, type LabelingProps } from './Labeling';
 export { LabelingSettings, type LabelingSelectValue } from './LabelingSettings';
 export { LabelingSwitchToLegacyModal } from './LabelingSwitchToLegacyModal';
 export { processLegacyMetadataIntoSuiteSyncThunk } from './processLegacyMetadataIntoSuiteSyncThunk';
-export { selectIsLabelActionEnabled } from './selectIsLabelActionEnabled';
+export {
+    type SelectIsLabelActionEnabledState,
+    selectIsLabelActionEnabled,
+} from './selectIsLabelActionEnabled';

suite/labeling/src/selectIsLabelActionEnabled.ts

@@ -18,11 +18,13 @@ import {
 } from '@suite-common/suite-sync';
 import { type StaticSessionId } from '@trezor/connect';
 
+export type SelectIsLabelActionEnabledState = WithSuiteSyncAndDeviceState &
+    MetadataRootState &
+    DesktopSuiteSyncRootState &
+    MessageSystemRootState;
+
 export const selectIsLabelActionEnabled = (
-    state: WithSuiteSyncAndDeviceState &
-        MetadataRootState &
-        DesktopSuiteSyncRootState &
-        MessageSystemRootState,
+    state: SelectIsLabelActionEnabledState,
     deviceStaticSessionId: StaticSessionId,
     legacyEntityKey: string,
 ): boolean => {

suite/receive/package.json

@@ -31,7 +31,6 @@
         "@trezor/components": "workspace:*",
         "@trezor/crypto-utils": "workspace:*",
         "@trezor/device-utils": "workspace:*",
-        "@trezor/dom-utils": "workspace:*",
         "@trezor/icons": "workspace:*",
         "@trezor/product-components": "workspace:*",
         "react": "19.2.3",

suite/receive/src/AddressCardDetail.tsx

@@ -1,5 +1,6 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { copyAddressToClipboard } from '@suite/address';
 import { Translation } from '@suite/intl';
 import { type AccountsRootState, selectAccountByKey } from '@suite-common/wallet-core';
 import { type AccountKey } from '@suite-common/wallet-types';
@@ -10,8 +11,8 @@ import { belowBreakpoint, breakpoints } from '@trezor/theme';
 
 import { AddressLabeling } from './AddressLabeling';
 import { CoinQrCode } from './CoinQrCode';
-import { type ReceiveAddressItem } from './receiveTypes';
-import { canShareAddress, shareAddress } from './share';
+import { type ReceiveAddressItem } from './receive';
+import { canShareAddress, shareAddress } from './sharing/share';
 
 const QR_SIZE = 148;
 
@@ -21,7 +22,7 @@ type AddressCardDetailProps = {
     disabled: boolean;
     isVerifyLoading: boolean;
     isVerifyDisabled: boolean;
-    onCopy: (path: string, address: string) => void;
+    onCopied: (path: string) => void;
     onVerify: (path: string) => void;
 };
 
@@ -31,14 +32,20 @@ export const AddressCardDetail = ({
     disabled,
     isVerifyLoading,
     isVerifyDisabled,
-    onCopy,
+    onCopied,
     onVerify,
 }: AddressCardDetailProps) => {
+    const dispatch = useDispatch();
     const account = useSelector((state: AccountsRootState) =>
         selectAccountByKey(state, accountKey),
     );
     const isBelowTablet = useMediaQuery(belowBreakpoint(breakpoints.tablet));
 
+    const handleCopy = () => {
+        dispatch(copyAddressToClipboard(item.address));
+        onCopied(item.path);
+    };
+
     if (!account) {
         return null;
     }
@@ -81,11 +88,7 @@ export const AddressCardDetail = ({
                         </Text>
                     </Column>
                     <Row gap={12} flexWrap="wrap">
-                        <Button
-                            size="large"
-                            iconLeft={CopyIcon}
-                            onClick={() => onCopy(item.path, item.address)}
-                        >
+                        <Button size="large" iconLeft={CopyIcon} onClick={handleCopy}>
                             <Translation id="TR_COPY_TO_CLIPBOARD" />
                         </Button>
                         {canShareAddress() && (