chore(governance): update test to match new functionality

Co-authored-by: bwallacee <ben@vega.xyz>

apps/explorer/src/app/components/txs/tx-list-navigation.spec.tsx

@@ -61,53 +61,4 @@ describe('TxsListNavigation', () => {
 
     expect(nextPageMock).toHaveBeenCalledTimes(1);
   });
-
-  it('disables "Older" button if hasMoreTxs is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
-
-  it('disables "Newer" button if hasPreviousPage is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={true}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-  });
-
-  it('disables both buttons when more and previous are false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
 });

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -10,7 +10,8 @@ export interface TxListNavigationProps {
   loading?: boolean;
   hasPreviousPage: boolean;
   hasMoreTxs: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  isEmpty?: boolean;
 }
 /**
  * Displays a list of transactions with filters and controls to navigate through the list.
@@ -21,9 +22,8 @@ export const TxsListNavigation = ({
   refreshTxs,
   nextPage,
   previousPage,
-  hasMoreTxs,
-  hasPreviousPage,
   children,
+  isEmpty,
   loading = false,
 }: TxListNavigationProps) => {
   return (
@@ -35,7 +35,6 @@ export const TxsListNavigation = ({
           <Button
             className="mr-2"
             size="xs"
-            disabled={!hasPreviousPage || loading}
             onClick={() => {
               previousPage();
             }}
@@ -44,7 +43,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={!hasMoreTxs}
+            disabled={isEmpty}
             onClick={() => {
               nextPage();
             }}

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -43,7 +43,7 @@ export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
     url.searchParams.append('first', count);
     url.searchParams.append('after', params.after);
   } else {
-    url.searchParams.append('last', count);
+    url.searchParams.append('first', count);
   }
 
   // Hacky fix for param as array

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -6,7 +6,7 @@ describe('getTxsDataUrl', () => {
       count: 10,
       baseUrl: 'https://example.com/transactions',
     };
-    const expectedUrl = 'https://example.com/transactions?last=10';
+    const expectedUrl = 'https://example.com/transactions?first=10';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });
@@ -41,7 +41,7 @@ describe('getTxsDataUrl', () => {
       baseUrl: 'https://example.com/transactions',
     };
     const expectedUrl =
-      'https://example.com/transactions?last=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -31,14 +31,14 @@ export interface IUseTxsData {
 }
 
 export const useTxsData = ({
-  count = 25,
+  count = 50,
   before,
   after,
   filters,
   party,
 }: IUseTxsData) => {
   const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = true;
+  let hasMoreTxs = false;
   let txsData: BlockExplorerTransactionResult[] = [];
 
   const url = getTxsDataUrl({
@@ -60,8 +60,8 @@ export const useTxsData = ({
   }
 
   const nextPage = useCallback(() => {
-    const after = data?.transactions.at(-1)?.cursor || '';
-    const params: URLSearchParamsInit = { after };
+    const before = data?.transactions.at(-1)?.cursor || '';
+    const params: URLSearchParamsInit = { before };
     if (filters) {
       params.filters = Array.from(filters).join(',');
     }
@@ -69,8 +69,8 @@ export const useTxsData = ({
   }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    const before = data?.transactions[0]?.cursor || '';
-    const params: URLSearchParamsInit = { before };
+    const after = data?.transactions[0]?.cursor || '';
+    const params: URLSearchParamsInit = { after };
     if (filters && filters.size > 0 && filters.size === 1) {
       params.filters = Array.from(filters)[0];
     }

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -51,9 +51,10 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={true}
+        hasPreviousPage={hasMoreTxs}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
+        isEmpty={txsData.length === 0}
       >
         <TxsFilter
           filters={filters}
@@ -70,7 +71,16 @@ export const TxsListFiltered = () => {
         txs={txsData}
         loadMoreTxs={nextPage}
         error={error}
-        className="mb-28 w-full min-w-[400px]"
+        className="mb-4 w-full min-w-[400px]"
+      />
+      <TxsListNavigation
+        refreshTxs={refreshTxs}
+        nextPage={nextPage}
+        previousPage={previousPage}
+        hasPreviousPage={hasMoreTxs}
+        loading={loading}
+        hasMoreTxs={hasMoreTxs}
+        isEmpty={txsData.length === 0}
       />
     </>
   );

apps/governance/src/lib/party.test.ts

@@ -0,0 +1,112 @@
+import type { ApolloError } from '@apollo/client';
+import {
+  PARTY_NOT_FOUND,
+  filterAcceptableGraphqlErrors,
+  isPartyNotFoundError,
+} from './party';
+import type { GraphQLError } from 'graphql';
+
+/**
+ *
+ * @param message
+ * @returns GraphQLError
+ */
+function createMockApolloErrors(message: string): GraphQLError {
+  return {
+    message,
+    extensions: {
+      code: message.toUpperCase().replace(/ /g, '_'),
+    },
+    locations: [],
+    originalError: new Error(message),
+    path: [],
+    nodes: [],
+    positions: [1],
+    name: message,
+    source: {
+      body: message,
+      name: message,
+      locationOffset: {
+        line: 1,
+        column: 1,
+      },
+    },
+  };
+}
+
+describe('filterAcceptableGraphqlErrors', () => {
+  it('should return undefined if the error is a party not found error', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [createMockApolloErrors('failed to get party for ID')],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the error if it is not a party not found error', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [createMockApolloErrors('Some other error')],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return the error if there are multiple errors', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [
+        createMockApolloErrors('failed to get party for ID'),
+        createMockApolloErrors('Some other error'),
+      ],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return the error if there are no errors', () => {
+    const error: Partial<ApolloError> = {
+      graphQLErrors: [],
+    };
+
+    const result = filterAcceptableGraphqlErrors(error as ApolloError);
+
+    expect(result).toEqual(error);
+  });
+
+  it('should return undefined if the error is undefined', () => {
+    const result = filterAcceptableGraphqlErrors(undefined);
+
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('isPartyNotFoundError', () => {
+  it('should return true if the error message includes PARTY_NOT_FOUND', () => {
+    const error = { message: 'failed to get party for ID' };
+
+    const result = isPartyNotFoundError(error);
+
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the error message does not include PARTY_NOT_FOUND', () => {
+    const error = { message: 'Some other error' };
+
+    const result = isPartyNotFoundError(error);
+
+    expect(result).toBe(false);
+  });
+
+  // Will trip if the error message changes, which should not be a problem, but there
+  // might be logic that depends on it
+  it('expects party not found error to remain consistent', () => {
+    const error = 'failed to get party for ID';
+
+    expect(PARTY_NOT_FOUND).toStrictEqual(error);
+  });
+});

apps/governance/src/lib/party.ts

@@ -1,3 +1,5 @@
+import type { ApolloError } from '@apollo/client';
+
 export const PARTY_NOT_FOUND = 'failed to get party for ID';
 
 export const isPartyNotFoundError = (error: { message: string }) => {
@@ -6,3 +8,23 @@ export const isPartyNotFoundError = (error: { message: string }) => {
   }
   return false;
 };
+
+/**
+ * If a party has no accounts or data, then this GraphQL query believes it does not exist
+ * Not having any rewards is a valid state, so in some cases we can filter this error out.
+ *
+ * @param error ApolloError | undefined
+ * @returns ApolloError | undefined
+ */
+export function filterAcceptableGraphqlErrors(
+  error?: ApolloError
+): ApolloError | undefined {
+  // Currently the only error we expect is when a party has no accounts
+  if (error && error.graphQLErrors.length === 1) {
+    if (isPartyNotFoundError(error.graphQLErrors[0])) {
+      return;
+    }
+  }
+
+  return error;
+}

apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx

@@ -18,6 +18,7 @@ import { ProposalMinRequirements, ProposalUserAction } from '../shared';
 import { VoteTransactionDialog } from './vote-transaction-dialog';
 import { useVoteButtonsQuery } from './__generated__/Stake';
 import type { DialogProps, VegaTxState } from '@vegaprotocol/proposals';
+import { filterAcceptableGraphqlErrors } from '../../../../lib/party';
 
 interface VoteButtonsContainerProps {
   voteState: VoteState | null;
@@ -42,8 +43,10 @@ export const VoteButtonsContainer = (props: VoteButtonsContainerProps) => {
     skip: !pubKey,
   });
 
+  const filteredErrors = filterAcceptableGraphqlErrors(error);
+
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer loading={loading} error={filteredErrors} data={data}>
       <VoteButtons
         {...props}
         currentStakeAvailable={toBigNum(

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -10,6 +10,7 @@ import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
 import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
 import { calculateEpochOffset } from '../../../lib/epoch-pagination';
 import { useNetworkParam } from '@vegaprotocol/network-parameters';
+import { filterAcceptableGraphqlErrors } from '../../../lib/party';
 
 const EPOCHS_PAGE_SIZE = 10;
 
@@ -99,17 +100,24 @@ export const EpochIndividualRewards = ({
     prevEpochIdRef.current = epochId;
   }, [epochId, refetchData]);
 
+  // Workarounds for the error handling of AsyncRenderer
+  const filteredErrors = filterAcceptableGraphqlErrors(error);
+  const filteredData = data || [];
+
   return (
     <AsyncRenderer
       loading={loading}
-      error={error}
-      data={data}
+      error={filteredErrors}
+      data={filteredData}
       render={() => (
         <div>
           <p data-testid="connected-vega-key" className="mb-10">
             {t('Connected Vega key')}:{' '}
             <span className="text-white">{pubKey}</span>
           </p>
+          {epochIndividualRewardSummaries.length === 0 && (
+            <p>{t('No rewards for key')}</p>
+          )}
           {epochIndividualRewardSummaries.map(
             (epochIndividualRewardSummary) => (
               <EpochIndividualRewardsTable
@@ -118,17 +126,19 @@ export const EpochIndividualRewards = ({
               />
             )
           )}
-          <Pagination
-            isLoading={loading}
-            hasPrevPage={page > 1}
-            hasNextPage={page < totalPages}
-            onBack={() => refetchData(page - 1)}
-            onNext={() => refetchData(page + 1)}
-            onFirst={() => refetchData(1)}
-            onLast={() => refetchData(totalPages)}
-          >
-            {t('Page')} {page}
-          </Pagination>
+          {epochIndividualRewardSummaries.length > 0 && (
+            <Pagination
+              isLoading={loading}
+              hasPrevPage={page > 1}
+              hasNextPage={page < totalPages}
+              onBack={() => refetchData(page - 1)}
+              onNext={() => refetchData(page + 1)}
+              onFirst={() => refetchData(1)}
+              onLast={() => refetchData(totalPages)}
+            >
+              {t('Page')} {page}
+            </Pagination>
+          )}
         </div>
       )}
     />

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

@@ -25,12 +25,12 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
     overlays,
     studies,
     studySizes,
-    tradingViewStudies,
     setInterval,
     setStudies,
     setStudySizes,
     setOverlays,
-    setTradingViewStudies,
+    state,
+    setState,
   } = useChartSettings();
 
   const pennantChart = (
@@ -64,13 +64,13 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
           libraryHash={CHARTING_LIBRARY_HASH}
           marketId={marketId}
           interval={toTradingViewResolution(interval)}
-          studies={tradingViewStudies}
           onIntervalChange={(newInterval) => {
             setInterval(fromTradingViewResolution(newInterval));
           }}
-          onAutoSaveNeeded={(data: { studies: string[] }) => {
-            setTradingViewStudies(data.studies);
+          onAutoSaveNeeded={(data) => {
+            setState(data);
           }}
+          state={state}
         />
       );
     }

apps/trading/components/chart-container/chart-menu.spec.tsx

@@ -27,11 +27,11 @@ describe('ChartMenu', () => {
 
     render(<ChartMenu />);
 
-    await userEvent.click(screen.getByRole('button', { name: 'Vega chart' }));
-    expect(useChartSettingsStore.getState().chartlib).toEqual('pennant');
-
-    await userEvent.click(screen.getByRole('button', { name: 'TradingView' }));
+    await userEvent.click(screen.getByTestId('chartlib-toggle-button'));
     expect(useChartSettingsStore.getState().chartlib).toEqual('tradingview');
+
+    await userEvent.click(screen.getByTestId('chartlib-toggle-button'));
+    expect(useChartSettingsStore.getState().chartlib).toEqual('pennant');
   });
 
   describe('tradingview', () => {

apps/trading/components/chart-container/chart-menu.tsx

@@ -68,6 +68,7 @@ export const ChartMenu = () => {
         setChartlib(isPennant ? 'tradingview' : 'pennant');
       }}
       size="extra-small"
+      testId="chartlib-toggle-button"
     >
       {isPennant ? 'TradingView' : t('Vega chart')}
     </TradingButton>

apps/trading/components/chart-container/use-chart-settings.ts

@@ -9,6 +9,7 @@ type StudySizes = { [S in Study]?: number };
 export type Chartlib = 'pennant' | 'tradingview';
 
 interface StoredSettings {
+  state: object | undefined; // Don't see a better type provided from TradingView type definitions
   chartlib: Chartlib;
   // For interval we use the enum from @vegaprotocol/types, this is to make mapping between different
   // chart types easier and more consistent
@@ -17,7 +18,6 @@ interface StoredSettings {
   overlays: Overlay[];
   studies: Study[];
   studySizes: StudySizes;
-  tradingViewStudies: string[];
 }
 
 export const STUDY_SIZE = 90;
@@ -30,13 +30,13 @@ const STUDY_ORDER: Study[] = [
 ];
 
 export const DEFAULT_CHART_SETTINGS = {
-  chartlib: 'tradingview' as const,
+  state: undefined,
+  chartlib: 'pennant' as const,
   interval: Interval.INTERVAL_I15M,
   type: ChartType.CANDLE,
   overlays: [Overlay.MOVING_AVERAGE],
   studies: [Study.MACD, Study.VOLUME],
   studySizes: {},
-  tradingViewStudies: ['Volume'],
 };
 
 export const useChartSettingsStore = create<
@@ -47,7 +47,7 @@ export const useChartSettingsStore = create<
     setStudies: (studies?: Study[]) => void;
     setStudySizes: (sizes: number[]) => void;
     setChartlib: (lib: Chartlib) => void;
-    setTradingViewStudies: (studies: string[]) => void;
+    setState: (state: object) => void;
   }
 >()(
   persist(
@@ -95,10 +95,8 @@ export const useChartSettingsStore = create<
           state.chartlib = lib;
         });
       },
-      setTradingViewStudies: (studies: string[]) => {
-        set((state) => {
-          state.tradingViewStudies = studies;
-        });
+      setState: (state) => {
+        set({ state });
       },
     })),
     {
@@ -147,13 +145,13 @@ export const useChartSettings = () => {
     overlays,
     studies,
     studySizes,
-    tradingViewStudies: settings.tradingViewStudies,
     setInterval: settings.setInterval,
     setType: settings.setType,
     setStudies: settings.setStudies,
     setOverlays: settings.setOverlays,
     setStudySizes: settings.setStudySizes,
     setChartlib: settings.setChartlib,
-    setTradingViewStudies: settings.setTradingViewStudies,
+    state: settings.state,
+    setState: settings.setState,
   };
 };

libs/trading-view/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "charting-library.d.ts"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

libs/trading-view/src/lib/trading-view-container.tsx

@@ -9,17 +9,17 @@ export const TradingViewContainer = ({
   libraryHash,
   marketId,
   interval,
-  studies,
   onIntervalChange,
   onAutoSaveNeeded,
+  state,
 }: {
   libraryPath: string;
   libraryHash: string;
   marketId: string;
   interval: ResolutionString;
-  studies: string[];
   onIntervalChange: (interval: string) => void;
   onAutoSaveNeeded: OnAutoSaveNeededCallback;
+  state: object | undefined;
 }) => {
   const t = useT();
   const scriptState = useScript(
@@ -48,9 +48,9 @@ export const TradingViewContainer = ({
       libraryPath={libraryPath}
       marketId={marketId}
       interval={interval}
-      studies={studies}
       onIntervalChange={onIntervalChange}
       onAutoSaveNeeded={onAutoSaveNeeded}
+      state={state}
     />
   );
 };

libs/trading-view/src/lib/trading-view.tsx

@@ -1,127 +1,167 @@
 import { useEffect, useRef } from 'react';
 import {
+  usePrevious,
   useScreenDimensions,
   useThemeSwitcher,
 } from '@vegaprotocol/react-helpers';
 import { useLanguage } from './use-t';
 import { useDatafeed } from './use-datafeed';
 import { type ResolutionString } from './constants';
+import {
+  type ChartingLibraryFeatureset,
+  type LanguageCode,
+  type ChartingLibraryWidgetOptions,
+  type IChartingLibraryWidget,
+  type ChartPropertiesOverrides,
+  type ResolutionString as TVResolutionString,
+} from '../charting-library';
 
-export type OnAutoSaveNeededCallback = (data: { studies: string[] }) => void;
+const noop = () => {};
+
+export type OnAutoSaveNeededCallback = (data: object) => void;
 
 export const TradingView = ({
   marketId,
   libraryPath,
   interval,
-  studies,
   onIntervalChange,
   onAutoSaveNeeded,
+  state,
 }: {
   marketId: string;
   libraryPath: string;
   interval: ResolutionString;
-  studies: string[];
   onIntervalChange: (interval: string) => void;
   onAutoSaveNeeded: OnAutoSaveNeededCallback;
+  state: object | undefined;
 }) => {
   const { isMobile } = useScreenDimensions();
   const { theme } = useThemeSwitcher();
   const language = useLanguage();
-  const chartContainerRef =
-    useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;
-  // Cant get types as charting_library is externally loaded
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const widgetRef = useRef<any>();
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+  const widgetRef = useRef<IChartingLibraryWidget>();
 
   const datafeed = useDatafeed();
 
-  useEffect(
-    () => {
-      const disableOnSmallScreens = isMobile ? ['left_toolbar'] : [];
+  const prevMarketId = usePrevious(marketId);
+  const prevTheme = usePrevious(theme);
 
-      const overrides = getOverrides(theme);
-
-      const widgetOptions = {
-        symbol: marketId,
-        datafeed,
-        interval: interval,
-        container: chartContainerRef.current,
-        library_path: libraryPath,
-        custom_css_url: 'vega_styles.css',
-        // Trading view accepts just 'en' rather than 'en-US' which is what react-i18next provides
-        // https://www.tradingview.com/charting-library-docs/latest/core_concepts/Localization?_highlight=language#supported-languages
-        locale: language.split('-')[0],
-        enabled_features: ['tick_resolution'],
-        disabled_features: [
-          'header_symbol_search',
-          'header_compare',
-          'show_object_tree',
-          'timeframes_toolbar',
-          ...disableOnSmallScreens,
-        ],
-        fullscreen: false,
-        autosize: true,
-        theme,
-        overrides,
-        loading_screen: {
-          backgroundColor: overrides['paneProperties.background'],
-        },
-      };
-
-      // @ts-ignore parent component loads TradingView onto window obj
-      widgetRef.current = new window.TradingView.widget(widgetOptions);
-
-      widgetRef.current.onChartReady(() => {
-        widgetRef.current.applyOverrides(getOverrides(theme));
-
-        widgetRef.current.subscribe('onAutoSaveNeeded', () => {
-          const studies = widgetRef.current
-            .activeChart()
-            .getAllStudies()
-            .map((s: { id: string; name: string }) => s.name);
-          onAutoSaveNeeded({ studies });
-        });
-
-        const activeChart = widgetRef.current.activeChart();
-
-        // Show volume study by default, second bool arg adds it as a overlay on top of the chart
-        studies.forEach((study) => {
-          activeChart.createStudy(study);
-        });
-
-        // Subscribe to interval changes so it can be persisted in chart settings
-        activeChart.onIntervalChanged().subscribe(null, onIntervalChange);
-      });
-
-      return () => {
-        if (!widgetRef.current) return;
-        widgetRef.current.remove();
-      };
-    },
-
-    // No theme in deps to avoid full chart reload when the theme changes
-    // Instead the theme is changed programmatically in a separate useEffect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [datafeed, marketId, language, libraryPath, isMobile]
-  );
-
-  // Update the trading view theme every time the app theme updates, done separately
-  // to avoid full chart reload
   useEffect(() => {
-    if (!widgetRef.current || !widgetRef.current._ready) return;
+    // Widget already created
+    if (widgetRef.current !== undefined) {
+      // Update the symbol if changed
+      if (marketId !== prevMarketId) {
+        widgetRef.current.setSymbol(
+          marketId,
+          (interval ? interval : '15') as TVResolutionString,
+          noop
+        );
+      }
 
-    // Calling changeTheme will reset the default dark/light background to the TV default
-    // so we need to re-apply the pane bg override. A promise is also required
-    // https://github.com/tradingview/charting_library/issues/6546#issuecomment-1139517908
-    widgetRef.current.changeTheme(theme).then(() => {
-      widgetRef.current.applyOverrides(getOverrides(theme));
+      // Update theme theme if changed
+      if (theme !== prevTheme) {
+        widgetRef.current.changeTheme(theme).then(() => {
+          if (!widgetRef.current) return;
+          widgetRef.current.applyOverrides(getOverrides(theme));
+        });
+      }
+
+      return;
+    }
+
+    if (!chartContainerRef.current) {
+      return;
+    }
+
+    // Create widget
+    const overrides = getOverrides(theme);
+
+    const disabledOnSmallScreens: ChartingLibraryFeatureset[] = isMobile
+      ? ['left_toolbar']
+      : [];
+    const disabledFeatures: ChartingLibraryFeatureset[] = [
+      'header_symbol_search',
+      'header_compare',
+      'show_object_tree',
+      'timeframes_toolbar',
+      ...disabledOnSmallScreens,
+    ];
+
+    const widgetOptions: ChartingLibraryWidgetOptions = {
+      symbol: marketId,
+      datafeed,
+      interval: interval as TVResolutionString,
+      container: chartContainerRef.current,
+      library_path: libraryPath,
+      custom_css_url: 'vega_styles.css',
+      // Trading view accepts just 'en' rather than 'en-US' which is what react-i18next provides
+      // https://www.tradingview.com/charting-library-docs/latest/core_concepts/Localization?_highlight=language#supported-languages
+      locale: language.split('-')[0] as LanguageCode,
+      enabled_features: ['tick_resolution'],
+      disabled_features: disabledFeatures,
+      fullscreen: false,
+      autosize: true,
+      theme,
+      overrides,
+      loading_screen: {
+        backgroundColor: overrides['paneProperties.background'],
+      },
+      auto_save_delay: 1,
+      saved_data: state,
+    };
+
+    widgetRef.current = new window.TradingView.widget(widgetOptions);
+
+    widgetRef.current.onChartReady(() => {
+      if (!widgetRef.current) return;
+
+      const activeChart = widgetRef.current.activeChart();
+
+      if (!state) {
+        // If chart has loaded with no state, create a volume study
+        activeChart.createStudy('Volume');
+      }
+
+      // Subscribe to interval changes so it can be persisted in chart settings
+      activeChart.onIntervalChanged().subscribe(null, onIntervalChange);
     });
-  }, [theme]);
+
+    widgetRef.current.subscribe('onAutoSaveNeeded', () => {
+      if (!widgetRef.current) return;
+
+      widgetRef.current.save((newState) => {
+        onAutoSaveNeeded(newState);
+      });
+    });
+  }, [
+    state,
+    datafeed,
+    interval,
+    prevTheme,
+    prevMarketId,
+    marketId,
+    theme,
+    language,
+    libraryPath,
+    isMobile,
+    onAutoSaveNeeded,
+    onIntervalChange,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      if (!widgetRef.current) return;
+      widgetRef.current.remove();
+      widgetRef.current = undefined;
+    };
+  }, []);
 
   return <div ref={chartContainerRef} className="w-full h-full" />;
 };
 
-const getOverrides = (theme: 'dark' | 'light') => {
+const getOverrides = (
+  theme: 'dark' | 'light'
+): Partial<ChartPropertiesOverrides> => {
   return {
     // colors set here, trading view lets the user set a color
     'paneProperties.background': theme === 'dark' ? '#05060C' : '#fff',

libs/trading-view/src/lib/use-datafeed.ts

@@ -2,15 +2,6 @@ import { useEffect, useMemo, useRef } from 'react';
 import compact from 'lodash/compact';
 import { useApolloClient } from '@apollo/client';
 import { type Subscription } from 'zen-observable-ts';
-/*
- * TODO: figure out how we can get the chart types
-import {
-  type LibrarySymbolInfo,
-  type IBasicDataFeed,
-  type ResolutionString,
-  type SeriesFormat,
-} from '../charting_library/charting_library';
-*/
 import {
   GetBarsDocument,
   LastBarDocument,
@@ -27,6 +18,12 @@ import {
   type SymbolQueryVariables,
 } from './__generated__/Symbol';
 import { getMarketExpiryDate, toBigNum } from '@vegaprotocol/utils';
+import {
+  type IBasicDataFeed,
+  type DatafeedConfiguration,
+  type LibrarySymbolInfo,
+  type ResolutionString,
+} from '../charting-library';
 
 const EXCHANGE = 'VEGA';
 
@@ -42,12 +39,8 @@ const resolutionMap: Record<string, Interval> = {
 
 const supportedResolutions = Object.keys(resolutionMap);
 
-const configurationData = {
-  // only showing Vega ofc
-  exchanges: [EXCHANGE],
-
+const configurationData: DatafeedConfiguration = {
   // Represents the resolutions for bars supported by your datafeed
-  // @ts-ignore cant import types as chartin_library is external
   supported_resolutions: supportedResolutions as ResolutionString[],
 } as const;
 
@@ -57,9 +50,7 @@ export const useDatafeed = () => {
   const client = useApolloClient();
 
   const datafeed = useMemo(() => {
-    // @ts-ignore cant import types as chartin_library is external
     const feed: IBasicDataFeed = {
-      // @ts-ignore cant import types as chartin_library is external
       onReady: (callback) => {
         setTimeout(() => callback(configurationData));
       },
@@ -69,11 +60,8 @@ export const useDatafeed = () => {
       },
 
       resolveSymbol: async (
-        // @ts-ignore cant import types as chartin_library is external
         marketId,
-        // @ts-ignore cant import types as chartin_library is external
         onSymbolResolvedCallback,
-        // @ts-ignore cant import types as chartin_library is external
         onResolveErrorCallback
       ) => {
         try {
@@ -110,9 +98,8 @@ export const useDatafeed = () => {
           const expirationDate = getMarketExpiryDate(instrument.metadata.tags);
           const expirationTimestamp = expirationDate
             ? Math.floor(expirationDate.getTime() / 1000)
-            : null;
+            : undefined;
 
-          // @ts-ignore cant import types as chartin_library is external
           const symbolInfo: LibrarySymbolInfo = {
             ticker: market.id, // use ticker as our unique identifier so that code/name can be used for name/description
             name: instrument.code,
@@ -120,10 +107,9 @@ export const useDatafeed = () => {
             description: instrument.name,
             listed_exchange: EXCHANGE,
             expired: productType === 'Perpetual' ? false : true,
-            expirationDate: expirationTimestamp,
+            expiration_date: expirationTimestamp,
 
-            // @ts-ignore cant import types as chartin_library is external
-            format: 'price' as SeriesFormat,
+            format: 'price',
             type,
             session: '24x7',
             timezone: 'Etc/UTC',
@@ -151,15 +137,10 @@ export const useDatafeed = () => {
       },
 
       getBars: async (
-        // @ts-ignore cant import types as chartin_library is external
         symbolInfo,
-        // @ts-ignore cant import types as chartin_library is external
         resolution,
-        // @ts-ignore cant import types as chartin_library is external
         periodParams,
-        // @ts-ignore cant import types as chartin_library is external
         onHistoryCallback,
-        // @ts-ignore cant import types as chartin_library is external
         onErrorCallback
       ) => {
         if (!symbolInfo.ticker) {
@@ -211,13 +192,9 @@ export const useDatafeed = () => {
       },
 
       subscribeBars: (
-        // @ts-ignore cant import types as chartin_library is external
         symbolInfo,
-        // @ts-ignore cant import types as chartin_library is external
         resolution,
-        // @ts-ignore cant import types as chartin_library is external
         onTick
-
         // subscriberUID,  // chart will subscribe and unsbuscribe when the parent market of the page changes so we don't need to use subscriberUID as of now
       ) => {
         if (!symbolInfo.ticker) {

libs/ui-toolkit/src/components/trading-button/trading-button.tsx

@@ -16,6 +16,7 @@ type TradingButtonProps = {
   subLabel?: ReactNode;
   fill?: boolean;
   minimal?: boolean;
+  testId?: string;
 };
 
 const getClassName = (
@@ -120,6 +121,7 @@ export const TradingButton = forwardRef<
       className,
       subLabel,
       fill,
+      testId,
       ...props
     },
     ref
@@ -132,6 +134,7 @@ export const TradingButton = forwardRef<
         { size, subLabel, intent, fill, minimal },
         className
       )}
+      data-testid={testId}
       {...props}
     >
       <Content icon={icon} subLabel={subLabel} children={children} />