refactor: global receive/send fixups

- remove fiat rates from global receive
- add search by account index
- adjust list item spacing
- update help url in global receive
- remove hover state of icon in select (network filter) and fix text color based on design

Author: cermakjiri

packages/product-components/src/components/SelectAssetModal/SearchAsset.tsx

@@ -17,6 +17,24 @@ const SelectWrapper = styled.div`
         &:focus-within {
             border-color: transparent;
         }
+
+        &:hover .react-select__indicators {
+            color: unset;
+        }
+    }
+
+    .react-select__single-value {
+        color: ${({ theme }) => theme.textSubdued};
+    }
+
+    .react-select__dropdown-indicator > svg {
+        fill: ${({ theme }) => theme.iconSubdued};
+        stroke: ${({ theme }) => theme.iconSubdued};
+    }
+
+    &:hover .react-select__dropdown-indicator > svg {
+        fill: ${({ theme }) => theme.iconSubdued};
+        stroke: ${({ theme }) => theme.iconSubdued};
     }
     /* stylelint-enable selector-class-pattern */
 `;

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowReceiveToAccount.tsx

@@ -1,12 +1,15 @@
+import { useMemo } from 'react';
+
+import { getNetworkFeatures } from '@suite-common/wallet-config';
 import { Account } from '@suite-common/wallet-types';
-import { Row, Text } from '@trezor/components';
+import { Column, Row, Text } from '@trezor/components';
 import { CoinLogo } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { AccountLabel } from 'src/components/suite/AccountLabel';
+import { Translation } from 'src/components/suite/Translation';
 
 import { ItemClickableContainer } from '../ItemClickableContainer';
-import { AccountAmount } from './AccountAmount';
 
 export type AssetRowReceiveToAccountProps = {
     account: Account;
@@ -19,21 +22,31 @@ export function AssetRowReceiveToAccount({
     account,
     onClick,
 }: AssetRowReceiveToAccountProps) {
+    const supportsTokens = useMemo(
+        () => getNetworkFeatures(account.symbol).includes('tokens'),
+        [account.symbol],
+    );
+
     return (
         <ItemClickableContainer onClick={() => onClick(account)}>
             <Row data-testid={dataTestId} gap={spacings.sm} alignItems="center">
                 <CoinLogo symbol={account.symbol} size={40} type="token" />
 
-                <Text variant="default" typographyStyle="body">
-                    <AccountLabel
-                        account={account}
-                        accountTypeBadgeSize="medium"
-                        showAccountTypeBadge={true}
-                    />
-                </Text>
+                <Column alignItems="flex-start" justifyContent="flex-start">
+                    <Text variant="default" typographyStyle="body">
+                        <AccountLabel
+                            account={account}
+                            accountTypeBadgeSize="medium"
+                            showAccountTypeBadge={true}
+                        />
+                    </Text>
+                    {supportsTokens && (
+                        <Text typographyStyle="hint" as="div" variant="tertiary">
+                            <Translation id="TR_INCLUDING_TOKENS" />
+                        </Text>
+                    )}
+                </Column>
             </Row>
-
-            <AccountAmount account={account} />
         </ItemClickableContainer>
     );
 }

packages/suite/src/components/suite/asset-picker/components/AssetRow/ItemClickableContainer.tsx

@@ -8,10 +8,11 @@ const ClickableContainer = styled.button`
     background: unset;
     box-shadow: unset;
 
-    width: 100%;
+    width: calc(100% - ${spacings.xxs * 2}px);
 
     cursor: pointer;
-    padding: ${spacingsPx.sm} 0;
+    padding: ${spacingsPx.xs} 0;
+    margin: ${spacingsPx.xxs} ${spacingsPx.xxs};
     border-radius: 4px;
     transition: background-color 150ms ease-in-out;
 

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/GlobalSendReceive/GlobalReceiveModal/GlobalReceiveModal.tsx

@@ -5,7 +5,7 @@ import { useTheme } from 'styled-components';
 import { Divider, Link, Row } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
-import { HELP_CENTER_VERIFY_TREZOR_SUITE_ADDRESSES_URL } from '@trezor/urls';
+import { HOW_TO_CHOOSE_RIGHT_NETWORK_URL } from '@trezor/urls';
 
 import {
     AssetRowReceiveToAccount,
@@ -65,7 +65,7 @@ export const GlobalReceiveModal = ({ onCancel, onSubmit }: GlobalReceiveModalPro
                                 color={theme.textSubdued}
                                 variant="underline"
                                 target="_blank"
-                                href={HELP_CENTER_VERIFY_TREZOR_SUITE_ADDRESSES_URL}
+                                href={HOW_TO_CHOOSE_RIGHT_NETWORK_URL}
                             >
                                 {chunks}
                             </Link>

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/GlobalSendReceive/GlobalReceiveModal/hooks/useAccountsOptions.ts

@@ -1,31 +1,24 @@
 import { useMemo } from 'react';
 import { useThrottle } from 'react-use';
 
-import { selectAllAccountsToList, selectCurrentFiatRates } from '@suite-common/wallet-core';
+import { selectAllAccountsToList } from '@suite-common/wallet-core';
 import { sortByCoin } from '@suite-common/wallet-utils';
-import { useCurrentRef } from '@trezor/react-utils';
 
 import { ASSET_ROW_ACCOUNT_HEIGHT } from 'src/components/suite/asset-picker/components';
 import { useSelector } from 'src/hooks/suite';
 
 export function useAccountsOptions() {
     const accounts = useSelector(selectAllAccountsToList);
-    const fiatRates = useSelector(selectCurrentFiatRates);
-    const fiatRatesRef = useCurrentRef(fiatRates);
     const throttledAccounts = useThrottle(accounts, 500);
 
-    return useMemo(() => {
-        const fiatRates = fiatRatesRef.current;
-
-        if (!fiatRates) {
-            return [];
-        }
-
-        return sortByCoin(throttledAccounts).map(account => ({
-            account,
-            height: ASSET_ROW_ACCOUNT_HEIGHT,
-        }));
-    }, [throttledAccounts, fiatRatesRef]);
+    return useMemo(
+        () =>
+            sortByCoin(throttledAccounts).map(account => ({
+                account,
+                height: ASSET_ROW_ACCOUNT_HEIGHT,
+            })),
+        [throttledAccounts],
+    );
 }
 
 export type AccountOption = ReturnType<typeof useAccountsOptions>[number];

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/GlobalSendReceive/GlobalReceiveModal/hooks/useFilterAccounts.ts

@@ -12,11 +12,9 @@ export function useFilterAccounts(accounts: AccountOption[]) {
 
     return useMemo(
         () =>
-            accounts
-                .filter(account =>
-                    networkSymbol ? account.account.symbol === networkSymbol : true,
-                )
-                .filter(account => (search ? accountSearchFn(account.account, search) : true)),
+            accounts.filter(account =>
+                search ? accountSearchFn(account.account, search, networkSymbol) : true,
+            ),
         [accounts, networkSymbol, search],
     );
 }

packages/suite/src/support/messages.ts

@@ -3213,16 +3213,15 @@ export default defineMessages({
         id: 'TR_RANDOM_SEED_WORDS_DISCLAIMER',
     },
     TR_RECEIVE: {
-        defaultMessage: 'Receive',
+        defaultMessage: 'Select an account to receive funds',
         id: 'TR_RECEIVE',
     },
     TR_RECEIVE_SELECT_ACCOUNT: {
         defaultMessage: 'Select an account to receive funds',
         id: 'TR_RECEIVE_SELECT_ACCOUNT',
     },
     TR_RECEIVE_DESCRIPTION: {
-        defaultMessage:
-            'Tokens exist on multiple networks, so be sure to select the correct one. <a>Learn more</a>',
+        defaultMessage: 'How to <a>choose the right network</a> to receive your tokens',
         id: 'TR_RECEIVE_DESCRIPTION',
     },
     TR_RECEIVE_SEARCH: {

suite-common/wallet-utils/src/accountUtils.ts

@@ -931,6 +931,9 @@ export const accountSearchFn = (
     const searchString = rawSearchString?.trim().toLowerCase();
     if (!searchString) return true; // no search string
 
+    // Search by account number
+    if (`#${account.index + 1}`.startsWith(searchString)) return true;
+
     const network = networks[account.symbol];
 
     // helper func for searching in account's addresses