chore(accounts): no assets avaiable in transfer form (#5358)

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

@@ -23,7 +23,7 @@ export const ALLOWED_ACCOUNTS = [
 
 export const TransferContainer = ({ assetId }: { assetId?: string }) => {
   const t = useT();
-  const { pubKey, pubKeys } = useVegaWallet();
+  const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
   const { params } = useNetworkParams([
     NetworkParams.transfer_fee_factor,
     NetworkParams.transfer_minTransferQuantumMultiple,
@@ -70,6 +70,7 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
       <TransferForm
         pubKey={pubKey}
         pubKeys={pubKeys ? pubKeys?.map((pk) => pk.publicKey) : null}
+        isReadOnly={isReadOnly}
         assetId={assetId}
         feeFactor={params.transfer_fee_factor}
         minQuantumMultiple={params.transfer_minTransferQuantumMultiple}

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

@@ -73,6 +73,28 @@ describe('TransferForm', () => {
     minQuantumMultiple: '1',
   };
 
+  const propsNoAssets = {
+    pubKey,
+    pubKeys: [
+      pubKey,
+      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
+    ],
+    feeFactor: '0.001',
+    submitTransfer: jest.fn(),
+    accounts: [],
+    minQuantumMultiple: '1',
+  };
+
+  it('renders no assets', async () => {
+    renderComponent(propsNoAssets);
+    expect(screen.getByTestId('no-assets-available')).toBeVisible();
+  });
+
+  it('renders no accounts', async () => {
+    renderComponent(propsNoAssets);
+    expect(screen.getByTestId('no-accounts-available')).toBeVisible();
+  });
+
   it.each([
     {
       targetText: 'Include transfer fee',

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

@@ -45,6 +45,7 @@ interface Asset {
 export interface TransferFormProps {
   pubKey: string | null;
   pubKeys: string[] | null;
+  isReadOnly?: boolean;
   accounts: Array<{
     type: AccountType;
     balance: string;
@@ -59,6 +60,7 @@ export interface TransferFormProps {
 export const TransferForm = ({
   pubKey,
   pubKeys,
+  isReadOnly,
   assetId: initialAssetId,
   feeFactor,
   submitTransfer,
@@ -201,7 +203,8 @@ export const TransferForm = ({
         <Controller
           control={control}
           name="asset"
-          render={({ field }) => (
+          render={({ field }) =>
+            assets.length > 0 ? (
               <TradingRichSelect
                 data-testid="select-asset"
                 id={field.name}
@@ -221,7 +224,15 @@ export const TransferForm = ({
                   />
                 ))}
               </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">
@@ -249,7 +260,8 @@ export const TransferForm = ({
               },
             },
           }}
-          render={({ field }) => (
+          render={({ field }) =>
+            accounts.length > 0 ? (
               <TradingSelect
                 id="fromAccount"
                 defaultValue=""
@@ -284,13 +296,21 @@ export const TransferForm = ({
                     return (
                       <option value={id} key={id}>
                         {AccountTypeMapping[a.type]} (
-                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
-                      )
+                        {addDecimal(a.balance, a.asset.decimals)}{' '}
+                        {a.asset.symbol})
                       </option>
                     );
                   })}
               </TradingSelect>
-          )}
+            ) : (
+              <span
+                data-testid="no-accounts-available"
+                className="text-xs text-vega-clight-100 dark:text-vega-cdark-100"
+              >
+                {t('No accounts available')}
+              </span>
+            )
+          }
         />
         {errors.fromAccount?.message && (
           <TradingInputError forInput="fromAccount">
@@ -454,7 +474,7 @@ export const TransferForm = ({
           decimals={asset?.decimals}
         />
       )}
-      <TradingButton type="submit" fill={true}>
+      <TradingButton type="submit" fill={true} disabled={isReadOnly}>
         {t('Confirm transfer')}
       </TradingButton>
     </form>