feat(trading): update copy for reset dialog and jest

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

@@ -15,12 +15,15 @@ export const LedgerContainer = () => {
   });
 
   const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .map((item) => item?.node?.asset)
-    .filter((asset): asset is PartyAssetFieldsFragment => !!asset?.id)
-    .reduce(
-      (aggr, item) => Object.assign(aggr, { [item.id]: item.symbol }),
-      {} as Record<string, string>
-    );
+    .map<PartyAssetFieldsFragment>(
+      (item) => item?.node?.asset ?? ({} as PartyAssetFieldsFragment)
+    )
+    .reduce((aggr, item) => {
+      if ('id' in item && 'symbol' in item) {
+        aggr[item.id as string] = item.symbol as string;
+      }
+      return aggr;
+    }, {} as Record<string, string>);
 
   if (!pubKey) {
     return (

libs/ledger/src/lib/ledger-export-form.spec.tsx

@@ -278,4 +278,18 @@ describe('createDownloadUrl', () => {
       )}&dateRange.endTimestamp=${toNanoSeconds(dateTo)}`
     );
   });
+
+  it('should throw if invalid args are provided', () => {
+    // invalid url
+    expect(() => {
+      // @ts-ignore override z.infer type
+      createDownloadUrl({ ...args, protohost: 'foo' });
+    }).toThrow();
+
+    // invalid partyId
+    expect(() => {
+      // @ts-ignore override z.infer type
+      createDownloadUrl({ ...args, partyId: 'z'.repeat(64) });
+    }).toThrow();
+  });
 });

libs/ledger/src/lib/ledger-export-form.tsx

@@ -1,18 +1,18 @@
-import { useRef, useCallback } from 'react';
-import { subDays } from 'date-fns';
-import { Controller, useForm } from 'react-hook-form';
+import { useRef, useState } from 'react';
+import { format, subDays } from 'date-fns';
 import {
-  InputError,
   Intent,
+  Loader,
   TradingButton,
   TradingFormGroup,
   TradingInput,
   TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
+import { z } from 'zod';
 import {
   formatForInput,
-  getDateTimeFormat,
   toNanoSeconds,
+  VEGA_ID_REGEX,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
@@ -35,18 +35,18 @@ const getProtoHost = (vegaurl: string) => {
   return `${loc.protocol}//${loc.host}`;
 };
 
-type LedgerFormValues = {
-  assetId: string;
-  dateFrom: string;
-  dateTo?: string;
-};
+const downloadSchema = z.object({
+  protohost: z.string().url().nonempty(),
+  partyId: z.string().regex(VEGA_ID_REGEX).nonempty(),
+  assetId: z.string().regex(VEGA_ID_REGEX).nonempty(),
+  dateFrom: z.string().nonempty(),
+  dateTo: z.string().optional(),
+});
+
+export const createDownloadUrl = (args: z.infer<typeof downloadSchema>) => {
+  // check args from form inputs
+  downloadSchema.parse(args);
 
-export const createDownloadUrl = (
-  args: LedgerFormValues & {
-    partyId: string;
-    protohost: string;
-  }
-) => {
   const params = new URLSearchParams();
   params.append('partyId', args.partyId);
   params.append('assetId', args.assetId);
@@ -71,102 +71,115 @@ interface Props {
 
 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const now = useRef(new Date());
-  const { control, handleSubmit, watch } = useForm<LedgerFormValues>({
-    defaultValues: {
-      dateFrom: formatForInput(subDays(now.current, 7)),
-      dateTo: '',
-      assetId: Object.keys(assets)[0],
-    },
+  const [dateFrom, setDateFrom] = useState(() => {
+    return formatForInput(subDays(now.current, 7));
   });
-  const dateTo = watch('dateTo');
+  const [dateTo, setDateTo] = useState('');
   const maxFromDate = formatForInput(new Date(dateTo || now.current));
   const maxToDate = formatForInput(now.current);
+
+  const [assetId, setAssetId] = useState(Object.keys(assets)[0]);
   const protohost = getProtoHost(vegaUrl);
+  const disabled = Boolean(!assetId);
 
   const hasItem = useLedgerDownloadFile((store) => store.hasItem);
   const updateDownloadQueue = useLedgerDownloadFile(
     (store) => store.updateQueue
   );
 
-  const startDownload = useCallback(
-    async (formValues: LedgerFormValues) => {
-      const link = createDownloadUrl({
-        protohost,
-        partyId,
-        ...formValues,
-      });
-
-      const dateTimeFormatter = getDateTimeFormat();
-      const title = t('Downloading for %s from %s till %s', [
-        assets[formValues.assetId],
-        dateTimeFormatter.format(new Date(formValues.dateFrom)),
-        dateTimeFormatter.format(new Date(formValues.dateTo || Date.now())),
-      ]);
-
-      const downloadStoreItem = {
-        title,
-        link,
-        isChanged: true,
-      };
-      if (hasItem(link)) {
-        updateDownloadQueue(downloadStoreItem);
-        return;
-      }
-      const ts = setTimeout(() => {
-        updateDownloadQueue({
-          ...downloadStoreItem,
-          intent: Intent.Warning,
-          isDelayed: true,
-          isChanged: true,
-        });
-      }, 1000 * 30);
-
-      try {
-        updateDownloadQueue(downloadStoreItem);
-        const resp = await fetch(link);
-        if (!resp?.ok) {
-          if (resp?.status === 429) {
-            throw new Error('Too many requests. Try again later.');
-          }
-          throw new Error('Download of ledger entries failed');
-        }
-        const { headers } = resp;
-        const nameHeader = headers.get('content-disposition');
-        const filename =
-          nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
-        updateDownloadQueue({
-          ...downloadStoreItem,
-          filename,
-        });
-        const blob = await resp.blob();
-        if (blob) {
-          updateDownloadQueue({
-            ...downloadStoreItem,
-            blob,
-            isDownloaded: true,
-            isChanged: true,
-            intent: Intent.Success,
-          });
-        }
-      } catch (err) {
-        localLoggerFactory({ application: 'ledger' }).error(
-          'Download file',
-          err
-        );
-        updateDownloadQueue({
-          ...downloadStoreItem,
-          intent: Intent.Danger,
-          isError: true,
-          isChanged: true,
-          errorMessage: (err as Error).message || undefined,
-        });
-      } finally {
-        clearTimeout(ts);
-      }
-    },
-    [assets, hasItem, partyId, protohost, updateDownloadQueue]
+  const assetDropDown = (
+    <TradingSelect
+      id="select-ledger-asset"
+      value={assetId}
+      onChange={(e) => {
+        setAssetId(e.target.value);
+      }}
+      className="w-full"
+      data-testid="select-ledger-asset"
+    >
+      {Object.keys(assets).map((assetKey) => (
+        <option key={assetKey} value={assetKey}>
+          {assets[assetKey]}
+        </option>
+      ))}
+    </TradingSelect>
   );
 
+  const link = createDownloadUrl({
+    protohost,
+    partyId,
+    assetId,
+    dateFrom,
+    dateTo,
+  });
+
+  const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const title = t('Downloading for %s from %s till %s', [
+      assets[assetId],
+      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
+      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
+    ]);
+
+    const downloadStoreItem = {
+      title,
+      link,
+      isChanged: true,
+    };
+    if (hasItem(link)) {
+      updateDownloadQueue(downloadStoreItem);
+      return;
+    }
+    const ts = setTimeout(() => {
+      updateDownloadQueue({
+        ...downloadStoreItem,
+        intent: Intent.Warning,
+        isDelayed: true,
+        isChanged: true,
+      });
+    }, 1000 * 30);
+
+    try {
+      updateDownloadQueue(downloadStoreItem);
+      const resp = await fetch(link);
+      if (!resp?.ok) {
+        if (resp?.status === 429) {
+          throw new Error('Too many requests. Try again later.');
+        }
+        throw new Error('Download of ledger entries failed');
+      }
+      const { headers } = resp;
+      const nameHeader = headers.get('content-disposition');
+      const filename = nameHeader?.split('=').pop() ?? DEFAULT_EXPORT_FILE_NAME;
+      updateDownloadQueue({
+        ...downloadStoreItem,
+        filename,
+      });
+      const blob = await resp.blob();
+      if (blob) {
+        updateDownloadQueue({
+          ...downloadStoreItem,
+          blob,
+          isDownloaded: true,
+          isChanged: true,
+          intent: Intent.Success,
+        });
+      }
+    } catch (err) {
+      localLoggerFactory({ application: 'ledger' }).error('Download file', err);
+      updateDownloadQueue({
+        ...downloadStoreItem,
+        intent: Intent.Danger,
+        isError: true,
+        isChanged: true,
+        errorMessage: (err as Error).message || undefined,
+      });
+    } finally {
+      clearTimeout(ts);
+    }
+  };
+
   if (!protohost || Object.keys(assets).length === 0) {
     return null;
   }
@@ -174,117 +187,49 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const offset = new Date().getTimezoneOffset();
 
   return (
-    <form
-      onSubmit={handleSubmit(startDownload)}
-      className="p-4 w-[350px]"
-      noValidate
-    >
+    <form onSubmit={startDownload} className="p-4 w-[350px]">
       <h2 className="mb-4">{t('Export ledger entries')}</h2>
-      <Controller
-        name="assetId"
-        control={control}
-        rules={{
-          required: t('You need to select an asset'),
-        }}
-        render={({ field, fieldState }) => (
-          <div className="mb-2">
-            <TradingFormGroup
-              label={t('Select asset')}
-              labelFor="asset"
-              compact
-            >
-              <TradingSelect
-                {...field}
-                id="select-ledger-asset"
-                className="w-full"
-                data-testid="select-ledger-asset"
-              >
-                {Object.keys(assets).map((assetKey) => (
-                  <option key={assetKey} value={assetKey}>
-                    {assets[assetKey]}
-                  </option>
-                ))}
-              </TradingSelect>
-            </TradingFormGroup>
-            {fieldState.error && (
-              <InputError>{fieldState.error.message}</InputError>
-            )}
-          </div>
-        )}
-      />
-      <Controller
-        name="dateFrom"
-        control={control}
-        rules={{
-          required: t('You need to provide a date from'),
-          max: {
-            value: maxFromDate,
-            message: dateTo
-              ? t('Date from cannot be greater than date to')
-              : t('Date from cannot be in the future'),
-          },
-          deps: ['dateTo'],
-        }}
-        render={({ field, fieldState }) => (
-          <div className="mb-2">
-            <TradingFormGroup
-              label={t('Date from')}
-              labelFor="date-from"
-              compact
-            >
-              <TradingInput
-                {...field}
-                type="datetime-local"
-                data-testid="date-from"
-                id="date-from"
-                max={maxFromDate}
-              />
-            </TradingFormGroup>
-            {fieldState.error && (
-              <InputError>{fieldState.error.message}</InputError>
-            )}
-          </div>
-        )}
-      />
-      <Controller
-        name="dateTo"
-        control={control}
-        rules={{
-          max: {
-            value: maxToDate,
-            message: t('Date to cannot be in the future'),
-          },
-        }}
-        render={({ field, fieldState }) => (
-          <div className="mb-2">
-            <TradingFormGroup label={t('Date to')} labelFor="date-to" compact>
-              <TradingInput
-                {...field}
-                type="datetime-local"
-                data-testid="date-to"
-                id="date-to"
-                max={maxToDate}
-              />
-            </TradingFormGroup>
-            {fieldState.error && (
-              <InputError>{fieldState.error.message}</InputError>
-            )}
-          </div>
-        )}
-      />
+      <TradingFormGroup label={t('Select asset')} labelFor="asset">
+        {assetDropDown}
+      </TradingFormGroup>
+      <TradingFormGroup label={t('Date from')} labelFor="date-from">
+        <TradingInput
+          type="datetime-local"
+          data-testid="date-from"
+          id="date-from"
+          value={dateFrom}
+          onChange={(e) => setDateFrom(e.target.value)}
+          max={maxFromDate}
+        />
+      </TradingFormGroup>
+      <TradingFormGroup label={t('Date to')} labelFor="date-to">
+        <TradingInput
+          type="datetime-local"
+          data-testid="date-to"
+          id="date-to"
+          value={dateTo}
+          onChange={(e) => setDateTo(e.target.value)}
+          max={maxToDate}
+        />
+      </TradingFormGroup>
       <div className="relative text-sm" title={t('Download all to .csv file')}>
-        <TradingButton fill type="submit" data-testid="ledger-download-button">
+        <TradingButton
+          fill
+          disabled={disabled}
+          type="submit"
+          data-testid="ledger-download-button"
+        >
           {t('Download')}
         </TradingButton>
       </div>
-      {offset ? (
+      {offset && (
         <p className="text-xs text-neutral-400 mt-1">
           {t(
             'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC%s.',
             [toHoursAndMinutes(offset)]
           )}
         </p>
-      ) : null}
+      )}
     </form>
   );
 };

libs/positions/src/lib/positions-manager.spec.tsx

@@ -27,9 +27,7 @@ jest.mock('@vegaprotocol/data-provider', () => ({
 }));
 
 describe('PositionsManager', () => {
-  // TODO: temporarily disable close position
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('should close position with max uint64', async () => {
+  it('should close position with max uint64', async () => {
     render(<PositionsManager partyIds={['partyId']} isReadOnly={false} />, {
       wrapper: MockedProvider,
     });

libs/positions/src/lib/positions-manager.tsx

@@ -29,7 +29,6 @@ export const PositionsManager = ({
 }: PositionsManagerProps) => {
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onClose = useCallback(
     ({ marketId, openVolume }: { marketId: string; openVolume: string }) =>
       create({
@@ -74,8 +73,7 @@ export const PositionsManager = ({
       pubKeys={pubKeys}
       rowData={data}
       onMarketClick={onMarketClick}
-      // TODO: temporarily disable close position
-      // onClose={onClose}
+      onClose={onClose}
       isReadOnly={isReadOnly}
       multipleKeys={partyIds.length > 1}
       overlayNoRowsTemplate={error ? error.message : t('No positions')}

libs/wallet/src/connect-dialog/use-chain-id.spec.ts

@@ -1,72 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { useVegaWallet } from '../use-vega-wallet';
-import { useChainId } from './use-chain-id';
-
-global.fetch = jest.fn();
-const mockFetch = global.fetch as jest.Mock;
-mockFetch.mockImplementation((url: string) => {
-  return Promise.resolve({ ok: true });
-});
-
-jest.mock('../use-vega-wallet', () => {
-  const original = jest.requireActual('../use-vega-wallet');
-  return {
-    ...original,
-    useVegaWallet: jest.fn(),
-  };
-});
-
-describe('useChainId', () => {
-  it('does not call fetch when statistics url could not be determined', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: '',
-    });
-    renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  it('calls fetch with correct statistics url', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:1234/statistics'
-      );
-    });
-  });
-
-  it('does not return chain id when chain id is not present in response', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    const { result } = renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(result.current).toBeUndefined();
-    });
-  });
-
-  it('returns chain id when chain id is present in response', async () => {
-    (useVegaWallet as jest.Mock).mockReturnValue({
-      vegaUrl: 'http://localhost:1234/graphql',
-    });
-    mockFetch.mockImplementation(() => {
-      return Promise.resolve({
-        ok: true,
-        json: () => ({
-          statistics: {
-            chainId: '1234',
-          },
-        }),
-      });
-    });
-    const { result } = renderHook(() => useChainId());
-    await waitFor(() => {
-      expect(result.current).not.toBeUndefined();
-      expect(result.current).toEqual('1234');
-    });
-  });
-});

libs/wallet/src/connect-dialog/use-chain-id.ts

@@ -3,37 +3,17 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 const cache: Record<string, string> = {};
 
-/**
- * Gets the statistics url for a given vega url.
- * Example:
- * https://graphql.example.com/graphql -> https://graphql.example.com/statistics
- */
-const getNodeStatisticsUrl = (vegaUrl: string) => {
-  try {
-    const url = new URL(vegaUrl);
-    url.pathname = 'statistics';
-    return url.toString();
-  } catch (err) {
-    return undefined;
-  }
-};
-
 export const useChainId = () => {
   const { vegaUrl } = useVegaWallet();
   const [chainId, setChainId] = useState<undefined | string>(cache[vegaUrl]);
   const [fetchAttempt, setFetchAttempt] = useState(1);
-
-  const statisticsUrl = getNodeStatisticsUrl(vegaUrl);
-
   useEffect(() => {
-    // abort when `/statistics` URL could not be determined
-    if (!statisticsUrl) return;
     let isCancelled = false;
     if (cache[vegaUrl]) {
       setChainId(cache[vegaUrl]);
       return;
     }
-    fetch(statisticsUrl)
+    fetch(vegaUrl.replace('graphql', 'statistics'))
       .then((response) => response.json())
       .then((response) => {
         if (isCancelled) {
@@ -52,6 +32,6 @@ export const useChainId = () => {
     return () => {
       isCancelled = true;
     };
-  }, [fetchAttempt, statisticsUrl, vegaUrl]);
+  }, [fetchAttempt, vegaUrl]);
   return chainId;
 };