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

vegaprotocol · Dec 1, 2023 · 7100b0e · 7100b0e
1 parent 614a83b
commit 7100b0e
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 65 deletions.
diff --git a/libs/accounts/src/lib/transfer-container.tsx b/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}

diff --git a/libs/accounts/src/lib/transfer-form.spec.tsx b/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',

diff --git a/libs/accounts/src/lib/transfer-form.tsx b/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 }) => (
-            <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>
-          )}
+          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>
+            )
+          }
         />
         {errors.asset?.message && (
           <TradingInputError forInput="asset">
@@ -249,48 +260,57 @@ export const TransferForm = ({
               },
             },
           }}
-          render={({ field }) => (
-            <TradingSelect
-              id="fromAccount"
-              defaultValue=""
-              {...field}
-              onChange={(e) => {
-                field.onChange(e);
-
-                const [type] = parseFromAccount(e.target.value);
-
-                // Enforce that if transferring from a vested rewards account it must go to
-                // the current connected general account
-                if (
-                  type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS &&
-                  pubKey
-                ) {
-                  setValue('toVegaKey', pubKey);
-                  setToVegaKeyMode('select');
-                  setIncludeFee(false);
-                }
-              }}
-            >
-              <option value="" disabled={true}>
-                {t('Please select')}
-              </option>
-              {accounts
-                .filter((a) => {
-                  if (!selectedAssetId) return true;
-                  return selectedAssetId === a.asset.id;
-                })
-                .map((a) => {
-                  const id = `${a.type}-${a.asset.id}`;
-                  return (
-                    <option value={id} key={id}>
-                      {AccountTypeMapping[a.type]} (
-                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
-                      )
-                    </option>
-                  );
-                })}
-            </TradingSelect>
-          )}
+          render={({ field }) =>
+            accounts.length > 0 ? (
+              <TradingSelect
+                id="fromAccount"
+                defaultValue=""
+                {...field}
+                onChange={(e) => {
+                  field.onChange(e);
+
+                  const [type] = parseFromAccount(e.target.value);
+
+                  // Enforce that if transferring from a vested rewards account it must go to
+                  // the current connected general account
+                  if (
+                    type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS &&
+                    pubKey
+                  ) {
+                    setValue('toVegaKey', pubKey);
+                    setToVegaKeyMode('select');
+                    setIncludeFee(false);
+                  }
+                }}
+              >
+                <option value="" disabled={true}>
+                  {t('Please select')}
+                </option>
+                {accounts
+                  .filter((a) => {
+                    if (!selectedAssetId) return true;
+                    return selectedAssetId === a.asset.id;
+                  })
+                  .map((a) => {
+                    const id = `${a.type}-${a.asset.id}`;
+                    return (
+                      <option value={id} key={id}>
+                        {AccountTypeMapping[a.type]} (
+                        {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>