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,27 +203,36 @@ export const TransferForm = ({
         <Controller
           control={control}
           name="asset"
-          render={({ field }) => (
+          render={({ field }) =>
-            <TradingRichSelect
+            assets.length > 0 ? (
-              data-testid="select-asset"
+              <TradingRichSelect
-              id={field.name}
+                data-testid="select-asset"
-              name={field.name}
+                id={field.name}
-              onValueChange={(value) => {
+                name={field.name}
-                field.onChange(value);
+                onValueChange={(value) => {
-                setValue('fromAccount', '');
+                  field.onChange(value);
-              }}
+                  setValue('fromAccount', '');
-              placeholder={t('Please select an asset')}
+                }}
-              value={field.value}
+                placeholder={t('Please select an asset')}
-            >
+                value={field.value}
-              {assets.map((a) => (
+              >
-                <AssetOption
+                {assets.map((a) => (
-                  key={a.key}
+                  <AssetOption
-                  asset={a}
+                    key={a.key}
-                  balance={<Balance balance={a.balance} symbol={a.symbol} />}
+                    asset={a}
-                />
+                    balance={<Balance balance={a.balance} symbol={a.symbol} />}
-              ))}
+                  />
-            </TradingRichSelect>
+                ))}
-          )}
+              </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,48 +260,57 @@ export const TransferForm = ({
               },
             },
           }}
-          render={({ field }) => (
+          render={({ field }) =>
-            <TradingSelect
+            accounts.length > 0 ? (
-              id="fromAccount"
+              <TradingSelect
-              defaultValue=""
+                id="fromAccount"
-              {...field}
+                defaultValue=""
-              onChange={(e) => {
+                {...field}
-                field.onChange(e);
+                onChange={(e) => {
+                  field.onChange(e);
 
-                const [type] = parseFromAccount(e.target.value);
+                  const [type] = parseFromAccount(e.target.value);
 
-                // Enforce that if transferring from a vested rewards account it must go to
+                  // Enforce that if transferring from a vested rewards account it must go to
-                // the current connected general account
+                  // the current connected general account
-                if (
+                  if (
-                  type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS &&
+                    type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS &&
-                  pubKey
+                    pubKey
-                ) {
+                  ) {
-                  setValue('toVegaKey', pubKey);
+                    setValue('toVegaKey', pubKey);
-                  setToVegaKeyMode('select');
+                    setToVegaKeyMode('select');
-                  setIncludeFee(false);
+                    setIncludeFee(false);
-                }
+                  }
-              }}
+                }}
-            >
+              >
-              <option value="" disabled={true}>
+                <option value="" disabled={true}>
-                {t('Please select')}
+                  {t('Please select')}
-              </option>
+                </option>
-              {accounts
+                {accounts
-                .filter((a) => {
+                  .filter((a) => {
-                  if (!selectedAssetId) return true;
+                    if (!selectedAssetId) return true;
-                  return selectedAssetId === a.asset.id;
+                    return selectedAssetId === a.asset.id;
-                })
+                  })
-                .map((a) => {
+                  .map((a) => {
-                  const id = `${a.type}-${a.asset.id}`;
+                    const id = `${a.type}-${a.asset.id}`;
-                  return (
+                    return (
-                    <option value={id} key={id}>
+                      <option value={id} key={id}>
-                      {AccountTypeMapping[a.type]} (
+                        {AccountTypeMapping[a.type]} (
-                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
+                        {addDecimal(a.balance, a.asset.decimals)}{' '}
-                      )
+                        {a.asset.symbol})
-                    </option>
+                      </option>
-                  );
+                    );
-                })}
+                  })}
-            </TradingSelect>
+              </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>