chore(suite-native): Introduce AccountAddress component

suite-native/module-trading/src/components/buy/ReceiveAccountPicker.tsx

@@ -7,6 +7,7 @@ import { Color } from '@trezor/theme';
 
 import { useTradeSheetControls } from '../../hooks/useTradeSheetControls';
 import { ReceiveAccount } from '../../types';
+import { AccountAddress } from '../general/AccountAddress';
 import { AccountSheet } from '../general/AccountSheet/AccountSheet';
 import { TradingOverviewRow } from '../general/TradingOverviewRow';
 
@@ -60,9 +61,13 @@ const ReceiveAccountPickerRight = ({
     return (
         <>
             <RightText color="textSubdued">{selectedAccountLabel}</RightText>
-            <RightText color="textSubdued" variant="hint">
-                {selectedAddress}
-            </RightText>
+            <AccountAddress
+                address={selectedAddress}
+                form="short"
+                color="textSubdued"
+                variant="hint"
+                textAlign="right"
+            />
         </>
     );
 };

suite-native/module-trading/src/components/general/AccountAddress.tsx

@@ -0,0 +1,21 @@
+import { Text, TextProps } from '@suite-native/atoms';
+
+type AccountAddressProps = {
+    address: string;
+    form?: 'short' | 'full';
+} & Omit<TextProps, 'numberOfLines' | 'children'>;
+
+const SHORT_ADDRESS_TRUNCATION_LENGTH = 8;
+
+export const AccountAddress = ({ address, form = 'full', ...textProps }: AccountAddressProps) => {
+    const addressToDisplay =
+        form === 'short' && address.length > SHORT_ADDRESS_TRUNCATION_LENGTH
+            ? `${address.substring(0, SHORT_ADDRESS_TRUNCATION_LENGTH)}...`
+            : address;
+
+    return (
+        <Text {...textProps} numberOfLines={1}>
+            {addressToDisplay}
+        </Text>
+    );
+};

suite-native/module-trading/src/components/general/AccountSheet/AccountListItem.tsx

@@ -9,6 +9,7 @@ import { useTranslate } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { ReceiveAccount } from '../../../types';
+import { AccountAddress } from '../AccountAddress';
 
 export type AccountListItemProps = {
     symbol: NetworkSymbol;
@@ -48,7 +49,16 @@ export const AccountListItem = ({
 
     const shouldDisplayCaret = !isAddressDetail && !!account.addresses;
     const shouldDisplayBalance = !isAddressDetail || address?.balance != null;
-    const label = isAddressDetail ? address.address : account.accountLabel;
+    const label = isAddressDetail ? (
+        <AccountAddress address={address.address} form="full" />
+    ) : (
+        account.accountLabel
+    );
+    const info = isAddressDetail ? (
+        address.path
+    ) : (
+        <DisplaySymbolFormatter value={symbol} areAmountUnitsEnabled={false} />
+    );
 
     return (
         <Pressable
@@ -91,7 +101,7 @@ export const AccountListItem = ({
                             variant="hint"
                             style={applyStyle(labelTextStyle, { textColor: 'textSubdued' })}
                         >
-                            <DisplaySymbolFormatter value={symbol} areAmountUnitsEnabled={false} />
+                            {info}
                         </Text>
                         {shouldDisplayBalance && cryptoValue && (
                             <CryptoToFiatAmountFormatter

suite-native/module-trading/src/components/general/__tests__/AccountAddress.comp.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@suite-native/test-utils';
+
+import { AccountAddress } from '../AccountAddress';
+
+describe('AccountAddress', () => {
+    describe('full form', () => {
+        it('should render full address', () => {
+            const { getByText } = render(<AccountAddress address="0x1234567890abcdef" />);
+
+            expect(getByText('0x1234567890abcdef')).toBeDefined();
+        });
+    });
+
+    describe('short form', () => {
+        it('should render address with ellipsis', () => {
+            const { getByText } = render(
+                <AccountAddress address="0x1234567890abcdef" form="short" />,
+            );
+
+            expect(getByText('0x123456...')).toBeDefined();
+        });
+
+        it('should render full address when it is shorter than 9 characters', () => {
+            const { getByText } = render(<AccountAddress address="0x123456" />);
+
+            expect(getByText('0x123456')).toBeDefined();
+        });
+    });
+});