@oanda/labs-order-book-widget 1.0.154 → 1.0.155

package/dist/types/OrderBookWidget/Main.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MainProps } from './types';
-declare const Main: ({ instrument }: MainProps) => React.JSX.Element;
+declare const Main: ({ instrument, division }: MainProps) => React.JSX.Element;
 export { Main };

package/dist/types/OrderBookWidget/OrderBookWidget.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { OrderBookWidgetConfig } from './types';
-declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, theme, isParamError, }: OrderBookWidgetConfig) => React.JSX.Element;
+declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, theme, isParamError, division, }: OrderBookWidgetConfig) => React.JSX.Element;
 export { OrderBookWidget };

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

@@ -4,9 +4,13 @@ declare const navigationConfig: {
     id: BookType;
     label: string;
 }[];
+declare const instrumentSelectConfigOC: {
+    id: InstrumentId;
+    label: string;
+}[];
 declare const instrumentSelectConfig: {
     id: InstrumentId;
     label: string;
 }[];
 declare const instrumentPrecisionConfig: Record<InstrumentId, number>;
-export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };
+export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig, instrumentSelectConfigOC, };

package/dist/types/OrderBookWidget/types.d.ts

@@ -1,38 +1,40 @@
 import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
-import { BookType } from '../gql/types/graphql';
+import { BookType, Division } from '../gql/types/graphql';
 export interface OrderBookWidgetConfig {
     graphqlUrl: string;
     instrument: InstrumentId;
     locale: Locale;
     theme?: Theme;
     isParamError?: boolean;
+    division: Division;
 }
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
     renderElementId: string;
 }
 export interface MainProps {
     instrument?: InstrumentId;
+    division: Division;
 }
 export interface ChartWithDataProps {
     instrument: InstrumentId;
     bookType: BookType;
 }
 export declare enum InstrumentId {
-    EUR_AUD = "EUR_AUD",
-    EUR_GBP = "EUR_GBP",
-    EUR_JPY = "EUR_JPY",
-    EUR_USD = "EUR_USD",
-    EUR_CHF = "EUR_CHF",
-    USD_CHF = "USD_CHF",
-    USD_JPY = "USD_JPY",
-    USD_CAD = "USD_CAD",
-    GBP_USD = "GBP_USD",
-    GBP_JPY = "GBP_JPY",
-    GBP_CHF = "GBP_CHF",
-    AUD_JPY = "AUD_JPY",
-    AUD_USD = "AUD_USD",
-    NZD_USD = "NZD_USD",
-    XAU_USD = "XAU_USD",
-    XAG_USD = "XAG_USD"
+    EUR_AUD = "EURAUD",
+    EUR_GBP = "EURGBP",
+    EUR_JPY = "EURJPY",
+    EUR_USD = "EURUSD",
+    EUR_CHF = "EURCHF",
+    USD_CHF = "USDCHF",
+    USD_JPY = "USDJPY",
+    USD_CAD = "USDCAD",
+    GBP_USD = "GBPUSD",
+    GBP_JPY = "GBPJPY",
+    GBP_CHF = "GBPCHF",
+    AUD_JPY = "AUDJPY",
+    AUD_USD = "AUDUSD",
+    NZD_USD = "NZDUSD",
+    XAU_USD = "XAUUSD",
+    XAG_USD = "XAGUSD"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.154",
+  "version": "1.0.155",
   "description": "Labs Order Book 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.154",
+    "@oanda/labs-widget-common": "^1.0.155",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "c243cddcf6c1cb5f70403bae1c8c927356f33a78"
+  "gitHead": "eecb0d8d995023c4374b106577b8be81b27604d4"
 }

package/src/OrderBookWidget/ChartWithData.tsx

@@ -84,11 +84,11 @@ const ChartWithData = ({
           </div>
         )}
       </div>
-      {!loading && !isError && (
       <div className="lw-mt-2 lw-h-8">
-        <LastUpdated timestamp={updatedAt} labelCallback={lang} />
+        {!loading && !isError && (
+          <LastUpdated timestamp={updatedAt} labelCallback={lang} />
+        )}
       </div>
-      )}
     </>
   );
 };

package/src/OrderBookWidget/Main.tsx

@@ -5,15 +5,16 @@ import {
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { InstrumentId, MainProps } from './types';
-import { BookType } from '../gql/types/graphql';
-import { instrumentSelectConfig, navigationConfig } from './config';
+import { BookType, Division } from '../gql/types/graphql';
+import { instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig } from './config';
 import { ChartWithData } from './ChartWithData';
 
-const Main = ({ instrument }: MainProps) => {
+const Main = ({ instrument, division }: MainProps) => {
+  const selectConfig = division === Division.Oc ? instrumentSelectConfigOC : instrumentSelectConfig;
   const { size } = useContext(ThemeContext);
   const isDesktop = size === Size.DESKTOP;
   const [bookType, setBookType] = useState(BookType.Order);
-  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);
+  const [toolInstrument, setToolInstrument] = useState(selectConfig[0]);
   const { lang } = useLocale();
 
   return (
@@ -35,7 +36,7 @@ const Main = ({ instrument }: MainProps) => {
         >
           <Select
             selectLabel={lang('instrument')}
-            options={instrumentSelectConfig}
+            options={selectConfig}
             selectedOption={toolInstrument}
             setSelectedOption={
               (val) => setToolInstrument(val as { id: InstrumentId; label: string })

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -12,6 +12,7 @@ const OrderBookWidget = ({
   locale,
   theme,
   isParamError,
+  division,
 }: OrderBookWidgetConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -26,7 +27,7 @@ const OrderBookWidget = ({
             <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
               <ChartError />
             </div>
-          ) : <Main instrument={instrument} />}
+          ) : <Main instrument={instrument} division={division} />}
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/OrderBookWidget/config.ts

@@ -9,7 +9,7 @@ const navigationConfig = [{
   label: 'position_book',
 }];
 
-const instrumentSelectConfig = [{
+const instrumentSelectConfigOC = [{
   id: InstrumentId.EUR_AUD,
   label: 'EUR/AUD',
 }, {
@@ -51,14 +51,18 @@ const instrumentSelectConfig = [{
 }, {
   id: InstrumentId.NZD_USD,
   label: 'NZD/USD',
-}, {
-  id: InstrumentId.XAU_USD,
-  label: 'XAU/USD',
-}, {
-  id: InstrumentId.XAG_USD,
-  label: 'XAG/USD',
 }];
 
+const instrumentSelectConfig = [
+  ...instrumentSelectConfigOC,
+  {
+    id: InstrumentId.XAU_USD,
+    label: 'XAU/USD',
+  }, {
+    id: InstrumentId.XAG_USD,
+    label: 'XAG/USD',
+  }];
+
 const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.EUR_AUD]: 5,
   [InstrumentId.EUR_GBP]: 5,
@@ -77,4 +81,6 @@ const instrumentPrecisionConfig: Record<InstrumentId, number> = {
   [InstrumentId.XAU_USD]: 3,
   [InstrumentId.XAG_USD]: 5,
 };
-export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };
+export {
+  navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig, instrumentSelectConfigOC,
+};

package/src/OrderBookWidget/render.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
 import { OrderBookWidget } from './OrderBookWidget';
+import { Division } from '../gql/types/graphql';
+import { instrumentSelectConfigOC, instrumentSelectConfig } from './config';
 
 const {
   graphqlUrl: configGraphQl,
   instrument: configInstrument,
   renderElementId: configRenderElementId,
   locale: configLocale,
+  division: configDivision,
 } = window.volatilityChartWidgetConfig || {};
 
 const {
@@ -21,15 +24,42 @@ if (orderBookElements.length > 0) {
     const root = createRoot(element);
     const params = element.getAttribute('data-order-book-params');
     const mode = element.getAttribute('data-mode');
-    const { instrument, locale } = JSON.parse(params as string);
+    const { instrument, locale, division } = JSON.parse(params as string);
 
-    const isParamError = validateToolParams({ locale, graphqlUrl }, [
+    const isParamError = instrument ? validateToolParams({
+      locale, graphqlUrl, division, instrument,
+    }, [
       {
         name: 'locale',
         valueCheck: (value) => validateLocale(value),
       }, {
         name: 'graphqlUrl',
+      }, {
+        name: 'division',
+        valueCheck: (value) => Object.values(Division).includes(value),
+      }, {
+        name: 'instrument',
+        valueCheck: (value) => {
+          const acceptableInstruments = division === Division.Oc
+            ? instrumentSelectConfigOC
+            : instrumentSelectConfig;
+
+          return Object.values(
+            acceptableInstruments.map((x) => x.id),
+          ).includes(value.replace(/\/|_/g, ''));
+        },
+      },
+    ]) : validateToolParams({ locale, graphqlUrl, division }, [
+      {
+        name: 'locale',
+        valueCheck: (value) => validateLocale(value),
+      }, {
+        name: 'graphqlUrl',
+      }, {
+        name: 'division',
+        valueCheck: (value) => Object.values(Division).includes(value),
       }]);
+
     root.render(
       <OrderBookWidget
         locale={locale}
@@ -37,6 +67,7 @@ if (orderBookElements.length > 0) {
         instrument={instrument}
         theme={mode as Theme}
         isParamError={isParamError}
+        division={division}
       />,
     );
   });
@@ -49,6 +80,7 @@ if (orderBookElements.length > 0) {
       locale={configLocale}
       graphqlUrl={configGraphQl}
       instrument={configInstrument}
+      division={configDivision}
     />,
   );
 }

package/src/OrderBookWidget/types.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
-import { BookType } from '../gql/types/graphql';
+import { BookType, Division } from '../gql/types/graphql';
 
 export interface OrderBookWidgetConfig {
   graphqlUrl: string;
@@ -8,6 +8,7 @@ export interface OrderBookWidgetConfig {
   locale: Locale;
   theme?: Theme;
   isParamError?: boolean;
+  division: Division;
 }
 
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
@@ -16,6 +17,7 @@ export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
 
 export interface MainProps {
   instrument?: InstrumentId;
+  division: Division;
 }
 
 export interface ChartWithDataProps {
@@ -24,20 +26,20 @@ export interface ChartWithDataProps {
 }
 
 export enum InstrumentId {
-  EUR_AUD = 'EUR_AUD',
-  EUR_GBP = 'EUR_GBP',
-  EUR_JPY = 'EUR_JPY',
-  EUR_USD = 'EUR_USD',
-  EUR_CHF = 'EUR_CHF',
-  USD_CHF = 'USD_CHF',
-  USD_JPY = 'USD_JPY',
-  USD_CAD = 'USD_CAD',
-  GBP_USD = 'GBP_USD',
-  GBP_JPY = 'GBP_JPY',
-  GBP_CHF = 'GBP_CHF',
-  AUD_JPY = 'AUD_JPY',
-  AUD_USD = 'AUD_USD',
-  NZD_USD = 'NZD_USD',
-  XAU_USD = 'XAU_USD',
-  XAG_USD = 'XAG_USD',
+  EUR_AUD = 'EURAUD',
+  EUR_GBP = 'EURGBP',
+  EUR_JPY = 'EURJPY',
+  EUR_USD = 'EURUSD',
+  EUR_CHF = 'EURCHF',
+  USD_CHF = 'USDCHF',
+  USD_JPY = 'USDJPY',
+  USD_CAD = 'USDCAD',
+  GBP_USD = 'GBPUSD',
+  GBP_JPY = 'GBPJPY',
+  GBP_CHF = 'GBPCHF',
+  AUD_JPY = 'AUDJPY',
+  AUD_USD = 'AUDUSD',
+  NZD_USD = 'NZDUSD',
+  XAU_USD = 'XAUUSD',
+  XAG_USD = 'XAGUSD',
 }

package/test/Main.test.tsx

@@ -7,7 +7,7 @@ import { MockedProvider } from '@apollo/client/testing';
 import { Size, ThemeContext } from '@oanda/labs-widget-common';
 import { Main } from '../src/OrderBookWidget/Main';
 import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
-import { BookType } from '../src/gql/types/graphql';
+import { BookType, Division } from '../src/gql/types/graphql';
 import { InstrumentId } from '../src';
 
 const mocks = [
@@ -68,7 +68,7 @@ describe('Main component', () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main />
+          <Main division={Division.Oc} />
         </ThemeContext.Provider>
       </MockedProvider>,
     );
@@ -82,7 +82,7 @@ describe('Main component', () => {
     const { findByTestId, queryAllByTestId } = render(
       <MockedProvider mocks={mocks}>
         <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main instrument={InstrumentId.EUR_AUD} />
+          <Main division={Division.Oc} instrument={InstrumentId.EUR_AUD} />
         </ThemeContext.Provider>
       </MockedProvider>,
     );