From 8242ad21a5593785377b97fd1e6f4890ad283073 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 3 Jul 2024 16:15:51 +0100
Subject: [PATCH 1/2] fix: broken display of asset dropdown in transfer form

---
 .../sidebar-accounts-container.tsx            |  2 +-
 .../deposit-container/deposit-container.tsx   | 13 +--
 .../withdraw-container/withdraw-container.tsx |  6 +-
 .../src/lib/accounts-actions-dropdown.tsx     |  2 +-
 libs/accounts/src/lib/transfer-form.tsx       | 86 +++++++++++--------
 libs/assets/src/lib/asset-option.tsx          |  9 +-
 .../components/trading-select/select.spec.tsx | 14 +--
 .../trading-select/select.stories.tsx         | 30 ++++---
 .../src/components/trading-select/select.tsx  |  2 +-
 9 files changed, 97 insertions(+), 67 deletions(-)

diff --git a/apps/trading/components/accounts-container/sidebar-accounts-container.tsx b/apps/trading/components/accounts-container/sidebar-accounts-container.tsx
index 0ac23343a0..1f47c4ddee 100644
--- a/apps/trading/components/accounts-container/sidebar-accounts-container.tsx
+++ b/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>
diff --git a/apps/trading/components/deposit-container/deposit-container.tsx b/apps/trading/components/deposit-container/deposit-container.tsx
index 8450bb1e73..b3cea584e5 100644
--- a/apps/trading/components/deposit-container/deposit-container.tsx
+++ b/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>
diff --git a/apps/trading/components/withdraw-container/withdraw-container.tsx b/apps/trading/components/withdraw-container/withdraw-container.tsx
index 2fa082c30e..f5f611d516 100644
--- a/apps/trading/components/withdraw-container/withdraw-container.tsx
+++ b/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>
diff --git a/libs/accounts/src/lib/accounts-actions-dropdown.tsx b/libs/accounts/src/lib/accounts-actions-dropdown.tsx
index 1334fd33e0..0d9fb2f441 100644
--- a/libs/accounts/src/lib/accounts-actions-dropdown.tsx
+++ b/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>
diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx
index a9f1f80089..d235e30376 100644
--- a/libs/accounts/src/lib/transfer-form.tsx
+++ b/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,36 +194,25 @@ export const TransferForm = ({
         <Controller
           control={control}
           name="asset"
-          render={({ field }) =>
-            assets.length > 0 ? (
-              <TradingRichSelect
-                data-testid="select-asset"
-                id={field.name}
-                name={field.name}
-                onValueChange={(value) => {
-                  field.onChange(value);
-                  setValue('fromAccount', '');
-                }}
-                placeholder={t('Please select an asset')}
-                value={field.value}
-              >
-                {assets.map((a) => (
-                  <AssetOption
-                    key={a.key}
-                    asset={a}
-                    balance={<Balance balance={a.balance} symbol={a.symbol} />}
-                  />
-                ))}
-              </TradingRichSelect>
-            ) : (
-              <span
-                data-testid="no-assets-available"
-                className="text-xs text-vega-clight-100 dark:text-vega-cdark-100"
-              >
-                {t('No assets available')}
-              </span>
-            )
-          }
+          render={({ field }) => (
+            <TradingRichSelect
+              data-testid="select-asset"
+              id={field.name}
+              name={field.name}
+              onValueChange={(value) => {
+                field.onChange(value);
+                setValue('fromAccount', '');
+              }}
+              placeholder={t('Please select an asset')}
+              value={field.value}
+            >
+              {assets.map((a) => (
+                <TradingRichSelectOption key={a.key} value={a.id}>
+                  <AssetOption asset={a} />
+                </TradingRichSelectOption>
+              ))}
+            </TradingRichSelect>
+          )}
         />
         {errors.asset?.message && (
           <TradingInputError forInput="asset">
@@ -570,3 +559,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>
+  );
+};
diff --git a/libs/assets/src/lib/asset-option.tsx b/libs/assets/src/lib/asset-option.tsx
index 39849dc07f..66354015a0 100644
--- a/libs/assets/src/lib/asset-option.tsx
+++ b/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>
   );
 };
diff --git a/libs/ui-toolkit/src/components/trading-select/select.spec.tsx b/libs/ui-toolkit/src/components/trading-select/select.spec.tsx
index 8b20dfb802..845cc89c7f 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.spec.tsx
+++ b/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(
diff --git a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx b/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
index 351eea7c89..ca46c1f2ac 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
+++ b/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>
     </>
   ),
 };
diff --git a/libs/ui-toolkit/src/components/trading-select/select.tsx b/libs/ui-toolkit/src/components/trading-select/select.tsx
index b4d9d53668..6b2d972831 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.tsx
+++ b/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) => (

From 968e28aaaed47b766450bf30fd32ecb860e159db Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 4 Jul 2024 11:07:14 +0100
Subject: [PATCH 2/2] fix: show no asset text and add mock wallet provider

---
 libs/accounts/src/lib/transfer-form.spec.tsx |  7 ++-
 libs/accounts/src/lib/transfer-form.tsx      | 51 ++++++++++++--------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/libs/accounts/src/lib/transfer-form.spec.tsx b/libs/accounts/src/lib/transfer-form.spec.tsx
index 609a1f6e05..089339b2f1 100644
--- a/libs/accounts/src/lib/transfer-form.spec.tsx
+++ b/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 () => {
diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx
index d235e30376..7a6dde82f9 100644
--- a/libs/accounts/src/lib/transfer-form.tsx
+++ b/libs/accounts/src/lib/transfer-form.tsx
@@ -194,25 +194,38 @@ export const TransferForm = ({
         <Controller
           control={control}
           name="asset"
-          render={({ field }) => (
-            <TradingRichSelect
-              data-testid="select-asset"
-              id={field.name}
-              name={field.name}
-              onValueChange={(value) => {
-                field.onChange(value);
-                setValue('fromAccount', '');
-              }}
-              placeholder={t('Please select an asset')}
-              value={field.value}
-            >
-              {assets.map((a) => (
-                <TradingRichSelectOption key={a.key} value={a.id}>
-                  <AssetOption asset={a} />
-                </TradingRichSelectOption>
-              ))}
-            </TradingRichSelect>
-          )}
+          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}
+                name={field.name}
+                onValueChange={(value) => {
+                  field.onChange(value);
+                  setValue('fromAccount', '');
+                }}
+                placeholder={t('Please select an asset')}
+                value={field.value}
+              >
+                {assets.map((a) => (
+                  <TradingRichSelectOption key={a.key} value={a.id}>
+                    <AssetOption asset={a} />
+                  </TradingRichSelectOption>
+                ))}
+              </TradingRichSelect>
+            );
+          }}
         />
         {errors.asset?.message && (
           <TradingInputError forInput="asset">