chore(trading): add timezone note to the ledger entries form (#5018)

apps/governance/jest.config.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
+process.env.TZ = 'GMT';
 export default {
   displayName: 'governance',
   preset: '../../jest.preset.js',

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

@@ -161,6 +161,50 @@ describe('LedgerExportForm', () => {
       expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
     });
   });
+
+  it('Time zone sentence should be properly displayed', () => {
+    let timeZoneOffset = -120;
+    Date.prototype.getTimezoneOffset = jest.fn(() => timeZoneOffset);
+
+    const { rerender } = render(
+      <LedgerExportForm
+        partyId={partyId}
+        vegaUrl={vegaUrl}
+        assets={assetsMock}
+      />
+    );
+
+    expect(
+      screen.getByText(/^The downloaded file uses the UTC/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Your time zone is UTC-02:00\.$/)
+    ).toBeInTheDocument();
+
+    timeZoneOffset = 270;
+    rerender(
+      <LedgerExportForm
+        partyId={partyId}
+        vegaUrl={vegaUrl}
+        assets={assetsMock}
+      />
+    );
+    expect(
+      screen.getByText(/Your time zone is UTC\+04:30\.$/)
+    ).toBeInTheDocument();
+
+    timeZoneOffset = 0;
+    rerender(
+      <LedgerExportForm
+        partyId={partyId}
+        vegaUrl={vegaUrl}
+        assets={assetsMock}
+      />
+    );
+    expect(
+      screen.queryByText(/^The downloaded file uses the UTC/)
+    ).not.toBeInTheDocument();
+  });
 });
 
 describe('createDownloadUrl', () => {

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

@@ -15,6 +15,16 @@ import { subDays } from 'date-fns';
 
 const DEFAULT_EXPORT_FILE_NAME = 'ledger_entries.csv';
 
+const toHoursAndMinutes = (totalMinutes: number) => {
+  const minutes = totalMinutes % 60;
+  const hours = Math.floor(totalMinutes / 60);
+  return `${hours > 0 ? '+' : '-'}${padTo2Digits(hours)}:${padTo2Digits(
+    minutes
+  )}`;
+};
+
+const padTo2Digits = (num: number) => Math.abs(num).toString().padStart(2, '0');
+
 const getProtoHost = (vegaurl: string) => {
   const loc = new URL(vegaurl);
   return `${loc.protocol}//${loc.host}`;
@@ -120,6 +130,8 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
     return null;
   }
 
+  const offset = new Date().getTimezoneOffset();
+
   return (
     <form onSubmit={startDownload} className="p-4 w-[350px]">
       <h2 className="mb-4">{t('Export ledger entries')}</h2>
@@ -166,6 +178,14 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
           {t('Download')}
         </TradingButton>
       </div>
+      {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>
+      )}
     </form>
   );
 };