feat: MMS-1872 destination account picker for sol-evm (standalone component and story)

ui/pages/bridge/index.scss

@@ -1,6 +1,7 @@
 @use "design-system";
 
 @import 'prepare/index';
+@import 'prepare/components/index';
 @import 'quotes/index';
 @import 'transaction-details/index';
 @import 'awaiting-signatures/index';

ui/pages/bridge/prepare/components/destination-account-list-item.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import { shortenAddress } from '../../../../helpers/utils/util';
+
+import {
+  AvatarAccount,
+  AvatarAccountSize,
+  AvatarAccountVariant,
+  Box,
+  Text,
+  AvatarToken,
+  AvatarTokenSize,
+} from '../../../../components/component-library';
+
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  Display,
+  TextColor,
+  TextVariant,
+  JustifyContent,
+  TextAlign,
+  FlexDirection,
+} from '../../../../helpers/constants/design-system';
+
+import {
+  getUseBlockie,
+  getShouldHideZeroBalanceTokens,
+  getIsTokenNetworkFilterEqualCurrentNetwork,
+  getChainIdsToPoll,
+  getShowFiatInTestnets,
+} from '../../../../selectors';
+// eslint-disable-next-line import/no-restricted-paths
+import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address';
+import { useMultichainAccountTotalFiatBalance } from '../../../../hooks/useMultichainAccountTotalFiatBalance';
+import { useGetFormattedTokensPerChain } from '../../../../hooks/useGetFormattedTokensPerChain';
+import { useAccountTotalCrossChainFiatBalance } from '../../../../hooks/useAccountTotalCrossChainFiatBalance';
+import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';
+import { PRIMARY } from '../../../../helpers/constants/common';
+import { useMultichainSelector } from '../../../../hooks/useMultichainSelector';
+import {
+  getMultichainNetwork,
+  getMultichainIsTestnet,
+  getMultichainShouldShowFiat,
+  getMultichainNativeCurrency,
+  getMultichainNativeCurrencyImage,
+} from '../../../../selectors/multichain';
+
+const MAXIMUM_CURRENCY_DECIMALS = 3;
+
+type DestinationAccountListItemProps = {
+  account: InternalAccount;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+const DestinationAccountListItem: React.FC<DestinationAccountListItemProps> = ({
+  account,
+  selected,
+  onClick,
+}) => {
+  const useBlockie = useSelector(getUseBlockie);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const isTokenNetworkFilterEqualCurrentNetwork = useSelector(
+    getIsTokenNetworkFilterEqualCurrentNetwork,
+  );
+  const allChainIDs = useSelector(getChainIdsToPoll);
+
+  const { isEvmNetwork } = useMultichainSelector(getMultichainNetwork, account);
+  const isTestnet = useMultichainSelector(getMultichainIsTestnet, account);
+  const isMainnet = !isTestnet;
+  const shouldShowFiat = useMultichainSelector(
+    getMultichainShouldShowFiat,
+    account,
+  );
+  const showFiatInTestnets = useSelector(getShowFiatInTestnets);
+  const showFiat =
+    shouldShowFiat && (isMainnet || (isTestnet && showFiatInTestnets));
+
+  const primaryTokenImage = useMultichainSelector(
+    getMultichainNativeCurrencyImage,
+    account,
+  );
+  const nativeCurrency = useMultichainSelector(
+    getMultichainNativeCurrency,
+    account,
+  );
+
+  const accountTotalFiatBalances =
+    useMultichainAccountTotalFiatBalance(account);
+
+  const { formattedTokensWithBalancesPerChain } = useGetFormattedTokensPerChain(
+    account,
+    shouldHideZeroBalanceTokens,
+    isTokenNetworkFilterEqualCurrentNetwork,
+    allChainIDs,
+  );
+
+  const { totalFiatBalance } = useAccountTotalCrossChainFiatBalance(
+    account,
+    formattedTokensWithBalancesPerChain,
+  );
+
+  // TODO: not working - troubleshoot.
+  // const chainAvatars = Object.values(formattedTokensWithBalancesPerChain).map(
+  //   (chainData) => ({
+  //     avatarValue: chainData.networkImage,
+  //   }),
+  // );
+
+  let balanceToTranslate;
+  if (isEvmNetwork) {
+    balanceToTranslate =
+      !shouldShowFiat || isTestnet || !process.env.PORTFOLIO_VIEW
+        ? // @ts-expect-error: balance is not typed.
+          account.balance
+        : totalFiatBalance;
+  } else {
+    balanceToTranslate = accountTotalFiatBalances.totalBalance;
+  }
+
+  return (
+    <Box
+      display={Display.Flex}
+      padding={4}
+      backgroundColor={
+        selected ? BackgroundColor.primaryMuted : BackgroundColor.transparent
+      }
+      className={classnames('multichain-account-list-item', {
+        'multichain-account-list-item--selected': selected,
+      })}
+      onClick={onClick}
+      alignItems={AlignItems.center}
+    >
+      <AvatarAccount
+        borderColor={BorderColor.transparent}
+        size={AvatarAccountSize.Md}
+        address={account.address}
+        variant={
+          useBlockie
+            ? AvatarAccountVariant.Blockies
+            : AvatarAccountVariant.Jazzicon
+        }
+        marginInlineEnd={2}
+      />
+
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        style={{ flex: 1 }}
+      >
+        <Box
+          display={Display.Flex}
+          justifyContent={JustifyContent.spaceBetween}
+        >
+          <Text variant={TextVariant.bodyMdMedium}>
+            {account.metadata.name}
+          </Text>
+          <Box
+            display={Display.Flex}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.flexEnd}
+            gap={1}
+          >
+            {/* <AvatarToken
+              src={primaryTokenImage}
+              name={nativeCurrency}
+              size={AvatarTokenSize.Xs}
+              borderColor={BorderColor.borderDefault}
+            /> */}
+            <Text
+              as="div"
+              display={Display.Flex}
+              flexDirection={FlexDirection.Row}
+              alignItems={AlignItems.center}
+              justifyContent={JustifyContent.flexEnd}
+              ellipsis
+              textAlign={TextAlign.End}
+            >
+              <UserPreferencedCurrencyDisplay
+                ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
+                value={balanceToTranslate}
+                type={PRIMARY}
+                showFiat={showFiat}
+                isAggregatedFiatOverviewBalance={showFiat}
+                hideLabel={true}
+                data-testid="first-currency-display"
+              />
+            </Text>
+          </Box>
+        </Box>
+
+        <Box
+          display={Display.Flex}
+          justifyContent={JustifyContent.spaceBetween}
+          alignItems={AlignItems.center}
+        >
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textAlternative}
+            data-testid="account-list-address"
+          >
+            {shortenAddress(normalizeSafeAddress(account.address))}
+          </Text>
+          <Box display={Display.Flex} gap={2}>
+            {/* // TODO: not working - troubleshoot. */}
+            {/* {chainAvatars.length > 0 && (
+              <AvatarGroup members={chainAvatars} limit={4} />
+            )} */}
+            <AvatarToken
+              src={primaryTokenImage}
+              name={nativeCurrency}
+              size={AvatarTokenSize.Xs}
+              borderColor={BorderColor.borderDefault}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default React.memo(DestinationAccountListItem);

ui/pages/bridge/prepare/components/destination-account-picker.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { DestinationAccountPicker } from './destination-account-picker';
+import { createMockInternalAccount } from '../../../../../test/jest/mocks';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+
+export default {
+  title: 'Pages/Bridge/Prepare/Components/DestinationAccountPicker',
+  component: DestinationAccountPicker,
+};
+
+const mockAccounts = [
+  createMockInternalAccount({
+    name: 'EVM Account 1',
+    keyringType: 'HD Key Tree',
+  }),
+  createMockInternalAccount({
+    name: 'Solana Account 1',
+    keyringType: 'Solana',
+  }),
+  createMockInternalAccount({
+    name: 'EVM Account 2',
+    keyringType: 'HD Key Tree',
+  }),
+  createMockInternalAccount({
+    name: 'Solana Account 2',
+    keyringType: 'Solana',
+  }),
+] as InternalAccount[];
+
+const Template: StoryFn<typeof DestinationAccountPicker> = (args) => (
+  <div style={{ width: '400px', height: '300px' }}>
+    <DestinationAccountPicker {...args} />
+  </div>
+);
+
+export const EVMAccounts = Template.bind({});
+EVMAccounts.args = {
+  accounts: mockAccounts,
+  chainType: 'evm',
+  onAccountSelect: (account) => console.log('Selected:', account),
+};
+
+export const SolanaAccounts = Template.bind({});
+SolanaAccounts.args = {
+  accounts: mockAccounts,
+  chainType: 'solana',
+  onAccountSelect: (account) => console.log('Selected:', account),
+};
+
+export const WithSelectedAccount = Template.bind({});
+WithSelectedAccount.args = {
+  accounts: mockAccounts,
+  chainType: 'evm',
+  selectedSwapToAccount: mockAccounts[0],
+  onAccountSelect: (account) => console.log('Selected:', account),
+};