@oanda/labs-instruments-table-widget 1.0.23 → 1.0.25

package/dist/types/InstrumentsTableWidget/config.d.ts

@@ -1,10 +1,11 @@
 import type { HeaderColumns } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
+import type { AssetClassLabels } from './components/Filters/types';
 type HeaderRecordType = DataRecordType.INSTRUMENT | DataRecordType.SELL | DataRecordType.BUY | DataRecordType.DAILY_CHANGE | DataRecordType.SPREAD | DataRecordType.HIGH | DataRecordType.LOW;
 declare const headerConfig: Record<HeaderRecordType, {
     displayName: string;
     additionalStyles: string;
 }>;
-declare const assetClassLabels: Record<string, string>;
+declare const assetClassLabels: Record<AssetClassLabels, string>;
 declare const getHeaderConfig: (activeColumns: DataRecordType[]) => HeaderColumns[];
 export { assetClassLabels, getHeaderConfig, headerConfig };

package/dist/types/InstrumentsTableWidget/types.d.ts

@@ -1,5 +1,5 @@
 import type { DataRecordType, WidgetConfig } from '@oanda/labs-widget-common';
-import type { Division, InstrumentDataSource } from '../gql/types/graphql';
+import type { AssetClassName, Division, InstrumentDataSource } from '../gql/types/graphql';
 export declare enum PriceType {
     Raw = "raw",
     Division = "division"
@@ -9,7 +9,7 @@ export interface InstrumentsTableConfig extends WidgetConfig {
     instruments?: string[];
     division: Division;
     columns?: DataRecordType[];
-    assetClasses?: string[];
+    assetClasses?: AssetClassName[];
     isAssetClassFilterEnabled?: boolean;
     isInstrumentSearchEnabled?: boolean;
     recordsPerPage?: number;
@@ -20,7 +20,7 @@ export interface MainProps {
     instruments?: string[];
     division: Division;
     columns?: DataRecordType[];
-    assetClasses?: string[];
+    assetClasses?: AssetClassName[];
     isAssetClassFilterEnabled?: boolean;
     isInstrumentSearchEnabled?: boolean;
     recordsPerPage?: number;

package/dist/types/gql/types/gql.d.ts

@@ -11,9 +11,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n': DocumentNode<types.ResolveInstrumentsWithFiltersQuery, types.Exact<{
+    '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n': DocumentNode<types.ResolveInstrumentsWithFiltersQuery, types.Exact<{
         division: types.Division;
-        assetClass?: types.InputMaybe<Array<types.InputMaybe<types.Scalars["String"]["input"]>> | types.InputMaybe<types.Scalars["String"]["input"]>>;
+        assetClass?: types.InputMaybe<Array<types.InputMaybe<types.AssetClassName>> | types.InputMaybe<types.AssetClassName>>;
         dataSource?: types.InputMaybe<types.InstrumentDataSource>;
         instruments?: types.InputMaybe<Array<types.InputMaybe<types.Scalars["String"]["input"]>> | types.InputMaybe<types.Scalars["String"]["input"]>>;
         searchPattern?: types.InputMaybe<types.Scalars["String"]["input"]>;
@@ -37,6 +37,6 @@ export declare function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
+export declare function graphql(source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/types/gql/types/graphql.d.ts

@@ -53,6 +53,7 @@ export declare enum AssetClassName {
     Cryptocurrency = "CRYPTOCURRENCY",
     Currency = "CURRENCY",
     EquityShares = "EQUITY_SHARES",
+    Etfs = "ETFS",
     Indices = "INDICES",
     Rates = "RATES"
 }
@@ -235,7 +236,7 @@ export type QueryResolveInstrumentsByDivisionArgs = {
     instruments: Array<InputMaybe<Scalars['String']['input']>>;
 };
 export type QueryResolveInstrumentsWithFiltersArgs = {
-    assetClass?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+    assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>>>;
     count?: InputMaybe<Scalars['Int']['input']>;
     dataSource?: InputMaybe<InstrumentDataSource>;
     division: Division;
@@ -395,7 +396,7 @@ export declare enum VolatilityChartTimeUnit {
 }
 export type ResolveInstrumentsWithFiltersQueryVariables = Exact<{
     division: Division;
-    assetClass?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>>;
+    assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>> | InputMaybe<AssetClassName>>;
     dataSource?: InputMaybe<InstrumentDataSource>;
     instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>>;
     searchPattern?: InputMaybe<Scalars['String']['input']>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-instruments-table-widget",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Labs Instruments Table Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.203",
+    "@oanda/labs-widget-common": "^1.0.205",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "b686126bf921097400e16b67184865f22f46c520"
+  "gitHead": "c3d9e64eb9cf5a50d714b8147501b7dfe7aa4aed"
 }

package/src/InstrumentsTableWidget/Main.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useEventListener } from 'usehooks-ts';
 
 import { resolveInstrumentsWithFilters } from '../gql/resolveInstrumentsWithFilters';
-import type { Division, InstrumentDataSource } from '../gql/types/graphql';
+import type { AssetClassName } from '../gql/types/graphql';
 import {
   type ResolveInstrumentsWithFiltersQuery,
   type ResolveInstrumentsWithFiltersQueryVariables,
@@ -23,7 +23,7 @@ import type { MainProps } from './types';
 const Main = ({
   instruments = [],
   division,
-  assetClasses: paramsAssetClasses,
+  assetClasses,
   columns = DEFAULT_COLUMNS,
   isAssetClassFilterEnabled,
   isInstrumentSearchEnabled,
@@ -38,31 +38,22 @@ const Main = ({
     new Array(recordsPerPage).fill({})
   );
 
-  const assetClasses = paramsAssetClasses?.map((assetClass) =>
-    assetClass.toUpperCase()
-  );
-
   const [totalRecords, setTotalRecords] = useState<number>(0);
 
-  const [queryVariables, setQueryVariables] = useState<{
-    division: Division;
-    count: number;
-    searchPattern: string;
-    offset: number;
-    assetClass: string[];
-    instruments: string[];
-    dataSource?: InstrumentDataSource;
-  }>({
-    division,
-    count: recordsPerPage,
-    searchPattern: '',
-    offset: 0,
-    assetClass: assetClasses || [],
-    instruments,
-    dataSource,
-  });
+  const [queryVariables, setQueryVariables] =
+    useState<ResolveInstrumentsWithFiltersQueryVariables>({
+      division,
+      count: recordsPerPage,
+      searchPattern: '',
+      offset: 0,
+      assetClass: assetClasses || [],
+      instruments,
+      dataSource,
+    });
 
-  const pageNumber = Math.floor(queryVariables.offset / recordsPerPage);
+  const pageNumber = queryVariables.offset
+    ? Math.floor(queryVariables.offset / recordsPerPage)
+    : 0;
 
   const { data, error, loading } = useQuery<
     ResolveInstrumentsWithFiltersQuery,
@@ -141,7 +132,7 @@ const Main = ({
               assetClassOptions={[
                 {
                   id: 'ALL',
-                  label: lang('all'),
+                  label: lang(assetClassLabels.ALL),
                 },
                 ...(assetClasses || []).map((assetClass) => ({
                   id: assetClass,
@@ -156,7 +147,9 @@ const Main = ({
                   offset: 0,
                   searchPattern: '',
                   assetClass:
-                    assetClass[0] === 'ALL' ? assetClasses || [] : assetClass,
+                    assetClass[0] === 'ALL'
+                      ? assetClasses || []
+                      : (assetClass as AssetClassName[]),
                 }));
               }}
               onSearchChange={(searchPattern) => {

package/src/InstrumentsTableWidget/components/Filters/Filters.tsx

@@ -9,7 +9,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
 import { useDebounceCallback } from 'usehooks-ts';
 
-import type { FiltersProps } from './types';
+import type { AssetClassLabels, FiltersProps } from './types';
 
 export const Filters = ({
   assetClassOptions,
@@ -62,7 +62,7 @@ export const Filters = ({
             }
             setSelectedOption={(option) => {
               setAssetClass([option.id]);
-              onAssetClassChange([option.id]);
+              onAssetClassChange([option.id as AssetClassLabels]);
               setSearchInputValue('');
               onSearchChange('');
             }}

package/src/InstrumentsTableWidget/components/Filters/types.ts

@@ -1,7 +1,11 @@
 import type { SelectOption } from '@oanda/labs-widget-common';
 
+import type { AssetClassName } from '../../../gql/types/graphql';
+
+export type AssetClassLabels = AssetClassName | 'ALL';
+
 export interface FiltersProps {
-  onAssetClassChange: (assetClass: string[]) => void;
+  onAssetClassChange: (assetClass: AssetClassLabels[]) => void;
   onSearchChange: (searchPattern: string) => void;
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;

package/src/InstrumentsTableWidget/config.ts

@@ -1,6 +1,9 @@
 import type { HeaderColumns } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
 
+import { AssetClassName } from '../gql/types/graphql';
+import type { AssetClassLabels } from './components/Filters/types';
+
 type HeaderRecordType =
   | DataRecordType.INSTRUMENT
   | DataRecordType.SELL
@@ -44,13 +47,15 @@ const headerConfig: Record<
   },
 };
 
-const assetClassLabels: Record<string, string> = {
-  CURRENCY: 'currency',
-  COMMODITIES: 'commodity',
-  RATES: 'bond',
-  CRYPTOCURRENCY: 'crypto',
-  EQUITY_SHARES: 'share_sfds',
-  INDICES: 'index',
+const assetClassLabels: Record<AssetClassLabels, string> = {
+  ALL: 'all',
+  [AssetClassName.Currency]: 'currency',
+  [AssetClassName.Commodities]: 'commodity',
+  [AssetClassName.Rates]: 'bond',
+  [AssetClassName.Cryptocurrency]: 'crypto',
+  [AssetClassName.EquityShares]: 'share_cfds',
+  [AssetClassName.Etfs]: 'etf_cfds',
+  [AssetClassName.Indices]: 'index',
 };
 
 const getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {

package/src/InstrumentsTableWidget/types.ts

@@ -1,6 +1,10 @@
 import type { DataRecordType, WidgetConfig } from '@oanda/labs-widget-common';
 
-import type { Division, InstrumentDataSource } from '../gql/types/graphql';
+import type {
+  AssetClassName,
+  Division,
+  InstrumentDataSource,
+} from '../gql/types/graphql';
 
 export enum PriceType {
   Raw = 'raw',
@@ -12,7 +16,7 @@ export interface InstrumentsTableConfig extends WidgetConfig {
   instruments?: string[];
   division: Division;
   columns?: DataRecordType[];
-  assetClasses?: string[];
+  assetClasses?: AssetClassName[];
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;
@@ -24,7 +28,7 @@ export interface MainProps {
   instruments?: string[];
   division: Division;
   columns?: DataRecordType[];
-  assetClasses?: string[];
+  assetClasses?: AssetClassName[];
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;

package/src/gql/resolveInstrumentsWithFilters.ts

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 export const resolveInstrumentsWithFilters = gql`
   query resolveInstrumentsWithFilters(
     $division: Division!
-    $assetClass: [String]
+    $assetClass: [AssetClassName]
     $dataSource: InstrumentDataSource
     $instruments: [String]
     $searchPattern: String

package/src/gql/types/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n':
+  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n':
     types.ResolveInstrumentsWithFiltersDocument,
 };
 
@@ -35,8 +35,8 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'
-): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
+  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'
+): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/gql/types/graphql.ts

@@ -40,6 +40,7 @@ export enum AssetClassName {
   Cryptocurrency = 'CRYPTOCURRENCY',
   Currency = 'CURRENCY',
   EquityShares = 'EQUITY_SHARES',
+  Etfs = 'ETFS',
   Indices = 'INDICES',
   Rates = 'RATES',
 }
@@ -251,7 +252,7 @@ export type QueryResolveInstrumentsByDivisionArgs = {
 };
 
 export type QueryResolveInstrumentsWithFiltersArgs = {
-  assetClass?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+  assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>>>;
   count?: InputMaybe<Scalars['Int']['input']>;
   dataSource?: InputMaybe<InstrumentDataSource>;
   division: Division;
@@ -439,8 +440,7 @@ export enum VolatilityChartTimeUnit {
 export type ResolveInstrumentsWithFiltersQueryVariables = Exact<{
   division: Division;
   assetClass?: InputMaybe<
-    | Array<InputMaybe<Scalars['String']['input']>>
-    | InputMaybe<Scalars['String']['input']>
+    Array<InputMaybe<AssetClassName>> | InputMaybe<AssetClassName>
   >;
   dataSource?: InputMaybe<InstrumentDataSource>;
   instruments?: InputMaybe<
@@ -497,7 +497,7 @@ export const ResolveInstrumentsWithFiltersDocument = {
             kind: 'ListType',
             type: {
               kind: 'NamedType',
-              name: { kind: 'Name', value: 'String' },
+              name: { kind: 'Name', value: 'AssetClassName' },
             },
           },
         },

package/src/translations/sources/en.json

@@ -8,6 +8,7 @@
   "currency": "Currency",
   "daily_percent_change": "Daily % Change",
   "data_unavailable": "Data unavailable",
+  "etf_cfds": "ETF CFDs",
   "index": "Index",
   "instrument": "Instrument",
   "instrument_name": "Instrument name",
@@ -15,7 +16,7 @@
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "search": "Search",
   "sell": "Sell",
-  "share_sfds": "Share CFDs",
+  "share_cfds": "Share CFDs",
   "spread": "Spread",
   "today_high": "Today High",
   "today_low": "Today Low"

package/test/Main.test.tsx

@@ -9,7 +9,11 @@ import {
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { Division, InstrumentDataSource } from '../src/gql/types/graphql';
+import {
+  AssetClassName,
+  Division,
+  InstrumentDataSource,
+} from '../src/gql/types/graphql';
 import { Main } from '../src/InstrumentsTableWidget/Main';
 import {
   mockErrorQuery,
@@ -47,7 +51,7 @@ describe('Main component', () => {
             <Main
               isAssetClassFilterEnabled
               isInstrumentSearchEnabled
-              assetClasses={['FX', 'BONDS']}
+              assetClasses={[AssetClassName.Etfs, AssetClassName.Currency]}
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}
@@ -67,7 +71,7 @@ describe('Main component', () => {
           <MockLayoutProvider>
             <Main
               isAssetClassFilterEnabled
-              assetClasses={['FX', 'BONDS']}
+              assetClasses={[AssetClassName.Etfs, AssetClassName.Currency]}
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}