fix(accounts): broken display of asset dropdown in transfer form

apps/trading/components/accounts-container/sidebar-accounts-container.tsx

@@ -38,7 +38,7 @@ export const SidebarAccountsContainer = ({
               }}
             >
               <span className="text-muted inline-flex items-center">
-                <VegaIcon name={VegaIconNames.CHEVRON_LEFT} />
+                <VegaIcon name={VegaIconNames.CHEVRON_LEFT} size={20} />
               </span>
               <span>{t(innerView[0])}</span>
             </button>

apps/trading/components/deposit-container/deposit-container.tsx

@@ -16,7 +16,7 @@ import {
   TradingInputError,
   Intent,
   TradingRichSelect,
-  TradingOption,
+  TradingRichSelectOption,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet-react';
 import { Emblem } from '@vegaprotocol/emblem';
@@ -231,9 +231,9 @@ const DepositForm = ({
               >
                 {assets.map((a) => {
                   return (
-                    <TradingOption value={a.id} key={a.id}>
+                    <TradingRichSelectOption value={a.id} key={a.id}>
                       <AssetOption asset={a} />
-                    </TradingOption>
+                    </TradingRichSelectOption>
                   );
                 })}
               </TradingRichSelect>
@@ -273,14 +273,17 @@ const DepositForm = ({
                   >
                     {pubKeys.map((k) => {
                       return (
-                        <TradingOption value={k.publicKey} key={k.publicKey}>
+                        <TradingRichSelectOption
+                          value={k.publicKey}
+                          key={k.publicKey}
+                        >
                           <div className="leading-4">
                             <div>{k.name}</div>
                             <div className="text-xs text-secondary">
                               {truncateMiddle(k.publicKey)}
                             </div>
                           </div>
-                        </TradingOption>
+                        </TradingRichSelectOption>
                       );
                     })}
                   </TradingRichSelect>

apps/trading/components/withdraw-container/withdraw-container.tsx

@@ -30,7 +30,7 @@ import {
   TradingInputError,
   Intent,
   TradingRichSelect,
-  TradingOption,
+  TradingRichSelectOption,
 } from '@vegaprotocol/ui-toolkit';
 import { ConnectKitButton } from 'connectkit';
 import { useEffect } from 'react';
@@ -287,9 +287,9 @@ const WithdrawForm = ({
                 {accounts.map((a) => {
                   const asset = a.asset as AssetERC20;
                   return (
-                    <TradingOption value={asset.id} key={asset.id}>
+                    <TradingRichSelectOption value={asset.id} key={asset.id}>
                       <AssetOption asset={{ ...asset, balance: a.balance }} />
-                    </TradingOption>
+                    </TradingRichSelectOption>
                   );
                 })}
               </TradingRichSelect>

libs/accounts/src/lib/accounts-actions-dropdown.tsx

@@ -90,7 +90,7 @@ export const AccountsActionsDropdown = ({
             target="_blank"
           >
             <span className="flex gap-2">
-              <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={16} />
+              <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={14} />
               {t('View on Etherscan')}
             </span>
           </Link>

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -21,6 +21,7 @@ import {
 import { removeDecimal } from '@vegaprotocol/utils';
 import type { TransferFeeQuery } from './__generated__/TransferFee';
 import { type AssetFieldsFragment } from '@vegaprotocol/assets';
+import { MockedWalletProvider } from '@vegaprotocol/wallet-react/testing';
 
 const feeFactor = 0.001;
 
@@ -48,7 +49,11 @@ jest.mock('./__generated__/TransferFee', () => ({
 
 describe('TransferForm', () => {
   const renderComponent = (props: TransferFormProps) => {
-    return render(<TransferForm {...props} />);
+    return render(
+      <MockedWalletProvider>
+        <TransferForm {...props} />
+      </MockedWalletProvider>
+    );
   };
 
   const submit = async () => {

libs/accounts/src/lib/transfer-form.tsx

@@ -14,23 +14,23 @@ import {
   TradingInput,
   TradingInputError,
   TradingRichSelect,
+  TradingRichSelectOption,
   TradingSelect,
   Tooltip,
   TradingButton,
+  truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
 import type { Key, Transfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import {
-  type AssetFieldsFragment,
-  AssetOption,
-  Balance,
-} from '@vegaprotocol/assets';
+import { type AssetFieldsFragment } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { useTransferFeeQuery } from './__generated__/TransferFee';
 import { normalizeTransfer } from './utils';
+import { useWallet } from '@vegaprotocol/wallet-react';
+import { EmblemByAsset } from '@vegaprotocol/emblem';
 
 interface FormFields {
   toVegaKey: string;
@@ -194,8 +194,19 @@ export const TransferForm = ({
         <Controller
           control={control}
           name="asset"
-          render={({ field }) =>
-            assets.length > 0 ? (
+          render={({ field }) => {
+            if (assets.length <= 0) {
+              return (
+                <span
+                  data-testid="no-assets-available"
+                  className="text-xs text-vega-clight-100 dark:text-vega-cdark-100"
+                >
+                  {t('No assets available')}
+                </span>
+              );
+            }
+
+            return (
               <TradingRichSelect
                 data-testid="select-asset"
                 id={field.name}
@@ -208,22 +219,13 @@ export const TransferForm = ({
                 value={field.value}
               >
                 {assets.map((a) => (
-                  <AssetOption
-                    key={a.key}
-                    asset={a}
-                    balance={<Balance balance={a.balance} symbol={a.symbol} />}
-                  />
+                  <TradingRichSelectOption key={a.key} value={a.id}>
+                    <AssetOption asset={a} />
+                  </TradingRichSelectOption>
                 ))}
               </TradingRichSelect>
-            ) : (
-              <span
-                data-testid="no-assets-available"
-                className="text-xs text-vega-clight-100 dark:text-vega-cdark-100"
-              >
-                {t('No assets available')}
-              </span>
-            )
-          }
+            );
+          }}
         />
         {errors.asset?.message && (
           <TradingInputError forInput="asset">
@@ -570,3 +572,30 @@ export const AddressField = ({
 const parseFromAccount = (fromAccountStr: string) => {
   return fromAccountStr.split('-') as [AccountType, string];
 };
+
+const AssetOption = ({
+  asset,
+}: {
+  asset: AssetFieldsFragment & { balance: string };
+}) => {
+  const vegaChainId = useWallet((store) => store.chainId);
+
+  return (
+    <div className="w-full flex items-center gap-2 h-10">
+      <EmblemByAsset asset={asset.id} vegaChain={vegaChainId} />
+      <div className="text-sm text-left leading-4">
+        <div>
+          {asset.name} | {asset.symbol}
+        </div>
+        <div className="text-secondary text-xs">
+          {asset.source.__typename === 'ERC20'
+            ? truncateMiddle(asset.source.contractAddress)
+            : asset.source.__typename}
+        </div>
+      </div>
+      <div className="ml-auto text-sm">
+        {addDecimalsFormatNumber(asset.balance, asset.decimals)}
+      </div>
+    </div>
+  );
+};

libs/assets/src/lib/asset-option.tsx

@@ -1,4 +1,7 @@
-import { TradingOption, truncateMiddle } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingRichSelectOption,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
 import type { AssetFieldsFragment } from './__generated__/Asset';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
@@ -55,7 +58,7 @@ export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
     asset.source.__typename === 'ERC20' && asset.source.contractAddress;
 
   return (
-    <TradingOption key={asset.id} value={asset.id}>
+    <TradingRichSelectOption key={asset.id} value={asset.id}>
       <div className="flex gap-2 items-center">
         <AssetLogo asset={asset} />
         <div className="flex flex-col items-start gap-1">
@@ -89,6 +92,6 @@ export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
           </div>
         </div>
       </div>
-    </TradingOption>
+    </TradingRichSelectOption>
   );
 };

libs/ui-toolkit/src/components/trading-select/select.spec.tsx

@@ -1,5 +1,9 @@
 import { render } from '@testing-library/react';
-import { TradingRichSelect, TradingSelect, TradingOption } from './select';
+import {
+  TradingRichSelect,
+  TradingSelect,
+  TradingRichSelectOption,
+} from './select';
 
 describe('Select', () => {
   it('should render successfully', () => {
@@ -12,8 +16,8 @@ describe('RichSelect', () => {
   it('should render select element with placeholder when no value is pre-selected', async () => {
     const { findByTestId } = render(
       <TradingRichSelect placeholder={'Select'}>
-        <TradingOption value={'1'}>1</TradingOption>
-        <TradingOption value={'2'}>2</TradingOption>
+        <TradingRichSelectOption value={'1'}>1</TradingRichSelectOption>
+        <TradingRichSelectOption value={'2'}>2</TradingRichSelectOption>
       </TradingRichSelect>
     );
     const btn = (await findByTestId(
@@ -25,8 +29,8 @@ describe('RichSelect', () => {
   it('should render select element with pre-selected value', async () => {
     const { findByTestId } = render(
       <TradingRichSelect placeholder={'Select'} value={'1'}>
-        <TradingOption value={'1'}>1</TradingOption>
-        <TradingOption value={'2'}>2</TradingOption>
+        <TradingRichSelectOption value={'1'}>1</TradingRichSelectOption>
+        <TradingRichSelectOption value={'2'}>2</TradingRichSelectOption>
       </TradingRichSelect>
     );
     const btn = (await findByTestId(

libs/ui-toolkit/src/components/trading-select/select.stories.tsx

@@ -1,5 +1,9 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { TradingOption, TradingSelect, TradingRichSelect } from './select';
+import {
+  TradingRichSelectOption,
+  TradingSelect,
+  TradingRichSelect,
+} from './select';
 import { FormGroup } from '../form-group';
 
 export default {
@@ -51,42 +55,42 @@ RichDefaultSelect.args = {
   },
   children: (
     <>
-      <TradingOption value="1">
+      <TradingRichSelectOption value="1">
         <div className="flex flex-col justify-start items-start">
           <span>Option One</span>
           <span className="text-xs">First option</span>
         </div>
-      </TradingOption>
-      <TradingOption value="2">
+      </TradingRichSelectOption>
+      <TradingRichSelectOption value="2">
         <div className="flex flex-col justify-start items-start">
           <span>Option Two</span>
           <span className="text-xs">Second option</span>
         </div>
-      </TradingOption>
-      <TradingOption value="3">
+      </TradingRichSelectOption>
+      <TradingRichSelectOption value="3">
         <div className="flex flex-col justify-start items-start">
           <span>Option Three</span>
           <span className="text-xs">Third option</span>
         </div>
-      </TradingOption>
-      <TradingOption value="4">
+      </TradingRichSelectOption>
+      <TradingRichSelectOption value="4">
         <div className="flex flex-col justify-start items-start">
           <span>Option Four</span>
           <span className="text-xs">Fourth option</span>
         </div>
-      </TradingOption>
-      <TradingOption value="5">
+      </TradingRichSelectOption>
+      <TradingRichSelectOption value="5">
         <div className="flex flex-col justify-start items-start">
           <span>Option Five</span>
           <span className="text-xs">Fifth option</span>
         </div>
-      </TradingOption>
-      <TradingOption value="6">
+      </TradingRichSelectOption>
+      <TradingRichSelectOption value="6">
         <div className="flex flex-col justify-start items-start">
           <span>Option Six</span>
           <span className="text-xs">Sixth option</span>
         </div>
-      </TradingOption>
+      </TradingRichSelectOption>
     </>
   ),
 };

libs/ui-toolkit/src/components/trading-select/select.tsx

@@ -81,7 +81,7 @@ export const TradingRichSelect = forwardRef<
   );
 });
 
-export const TradingOption = forwardRef<
+export const TradingRichSelectOption = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentProps<typeof SelectPrimitive.Item>
 >(({ children, className, ...props }, forwardedRef) => (