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

package/dist/module/OrderBookWidget/render.js

@@ -2,11 +2,14 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { 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
+  locale: configLocale,
+  division: configDivision
 } = window.volatilityChartWidgetConfig || {};
 const {
   graphqlUrl
@@ -19,23 +22,48 @@ if (orderBookElements.length > 0) {
     const mode = element.getAttribute('data-mode');
     const {
       instrument,
-      locale
+      locale,
+      division
     } = JSON.parse(params);
-    const isParamError = validateToolParams({
+    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
+      graphqlUrl,
+      division
     }, [{
       name: 'locale',
       valueCheck: value => validateLocale(value)
     }, {
       name: 'graphqlUrl'
+    }, {
+      name: 'division',
+      valueCheck: value => Object.values(Division).includes(value)
     }]);
     root.render(React.createElement(OrderBookWidget, {
       locale: locale,
       graphqlUrl: graphqlUrl,
       instrument: instrument,
       theme: mode,
-      isParamError: isParamError
+      isParamError: isParamError,
+      division: division
     }));
   });
 } else {
@@ -44,7 +72,8 @@ if (orderBookElements.length > 0) {
   root.render(React.createElement(OrderBookWidget, {
     locale: configLocale,
     graphqlUrl: configGraphQl,
-    instrument: configInstrument
+    instrument: configInstrument,
+    division: configDivision
   }));
 }
 //# sourceMappingURL=render.js.map

package/dist/module/OrderBookWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","createRoot","validateLocale","validateToolParams","OrderBookWidget","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","render","createElement","theme","container","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const root = createRoot(element);\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => validateLocale(value),\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    root.render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAgBC,cAAc,EAAEC,kBAAkB,QAAQ,2BAA2B;AACrF,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,IAAI,GAAGrB,UAAU,CAACoB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEjB,UAAU;MAAEI;IAAO,CAAC,GAAGe,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3D,MAAMK,YAAY,GAAGzB,kBAAkB,CAAC;MAAEQ,MAAM;MAAEN;IAAW,CAAC,EAAE,CAC9D;MACEwB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAK7B,cAAc,CAAC6B,KAAK;IAC7C,CAAC,EAAE;MACDF,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLP,IAAI,CAACU,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC7B,eAAe;MACdO,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvB2B,KAAK,EAAET,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMO,SAAS,GAAGlB,QAAQ,CAACmB,cAAc,CAAC1B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGrB,UAAU,CAACkC,SAAU,CAAC;EAEnCb,IAAI,CAACU,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC7B,eAAe;IACdO,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CACH,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"render.js","names":["React","createRoot","validateLocale","validateToolParams","OrderBookWidget","Division","instrumentSelectConfigOC","instrumentSelectConfig","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","division","configDivision","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","Object","values","includes","acceptableInstruments","Oc","map","x","id","replace","render","createElement","theme","container","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\nimport { Division } from '../gql/types/graphql';\nimport { instrumentSelectConfigOC, instrumentSelectConfig } from './config';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n  division: configDivision,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const root = createRoot(element);\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale, division } = JSON.parse(params as string);\n\n    const isParamError = instrument ? validateToolParams({\n      locale, graphqlUrl, division, instrument,\n    }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => validateLocale(value),\n      }, {\n        name: 'graphqlUrl',\n      }, {\n        name: 'division',\n        valueCheck: (value) => Object.values(Division).includes(value),\n      }, {\n        name: 'instrument',\n        valueCheck: (value) => {\n          const acceptableInstruments = division === Division.Oc\n            ? instrumentSelectConfigOC\n            : instrumentSelectConfig;\n\n          return Object.values(\n            acceptableInstruments.map((x) => x.id),\n          ).includes(value.replace(/\\/|_/g, ''));\n        },\n      },\n    ]) : validateToolParams({ locale, graphqlUrl, division }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => validateLocale(value),\n      }, {\n        name: 'graphqlUrl',\n      }, {\n        name: 'division',\n        valueCheck: (value) => Object.values(Division).includes(value),\n      }]);\n\n    root.render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n        division={division}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n      division={configDivision}\n    />,\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/module/OrderBookWidget/types.js

@@ -1,20 +1,20 @@
 export let InstrumentId = function (InstrumentId) {
-  InstrumentId["EUR_AUD"] = "EUR_AUD";
-  InstrumentId["EUR_GBP"] = "EUR_GBP";
-  InstrumentId["EUR_JPY"] = "EUR_JPY";
-  InstrumentId["EUR_USD"] = "EUR_USD";
-  InstrumentId["EUR_CHF"] = "EUR_CHF";
-  InstrumentId["USD_CHF"] = "USD_CHF";
-  InstrumentId["USD_JPY"] = "USD_JPY";
-  InstrumentId["USD_CAD"] = "USD_CAD";
-  InstrumentId["GBP_USD"] = "GBP_USD";
-  InstrumentId["GBP_JPY"] = "GBP_JPY";
-  InstrumentId["GBP_CHF"] = "GBP_CHF";
-  InstrumentId["AUD_JPY"] = "AUD_JPY";
-  InstrumentId["AUD_USD"] = "AUD_USD";
-  InstrumentId["NZD_USD"] = "NZD_USD";
-  InstrumentId["XAU_USD"] = "XAU_USD";
-  InstrumentId["XAG_USD"] = "XAG_USD";
+  InstrumentId["EUR_AUD"] = "EURAUD";
+  InstrumentId["EUR_GBP"] = "EURGBP";
+  InstrumentId["EUR_JPY"] = "EURJPY";
+  InstrumentId["EUR_USD"] = "EURUSD";
+  InstrumentId["EUR_CHF"] = "EURCHF";
+  InstrumentId["USD_CHF"] = "USDCHF";
+  InstrumentId["USD_JPY"] = "USDJPY";
+  InstrumentId["USD_CAD"] = "USDCAD";
+  InstrumentId["GBP_USD"] = "GBPUSD";
+  InstrumentId["GBP_JPY"] = "GBPJPY";
+  InstrumentId["GBP_CHF"] = "GBPCHF";
+  InstrumentId["AUD_JPY"] = "AUDJPY";
+  InstrumentId["AUD_USD"] = "AUDUSD";
+  InstrumentId["NZD_USD"] = "NZDUSD";
+  InstrumentId["XAU_USD"] = "XAUUSD";
+  InstrumentId["XAG_USD"] = "XAGUSD";
   return InstrumentId;
 }({});
 //# sourceMappingURL=types.js.map

package/dist/module/OrderBookWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["InstrumentId"],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { Locale } from '@oanda/mono-i18n';\nimport { BookType } from '../gql/types/graphql';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: InstrumentId;\n  locale: Locale;\n  theme?: Theme;\n  isParamError?: boolean;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n}\n\nexport interface ChartWithDataProps {\n  instrument: InstrumentId;\n  bookType: BookType;\n}\n\nexport enum InstrumentId {\n  EUR_AUD = 'EUR_AUD',\n  EUR_GBP = 'EUR_GBP',\n  EUR_JPY = 'EUR_JPY',\n  EUR_USD = 'EUR_USD',\n  EUR_CHF = 'EUR_CHF',\n  USD_CHF = 'USD_CHF',\n  USD_JPY = 'USD_JPY',\n  USD_CAD = 'USD_CAD',\n  GBP_USD = 'GBP_USD',\n  GBP_JPY = 'GBP_JPY',\n  GBP_CHF = 'GBP_CHF',\n  AUD_JPY = 'AUD_JPY',\n  AUD_USD = 'AUD_USD',\n  NZD_USD = 'NZD_USD',\n  XAU_USD = 'XAU_USD',\n  XAG_USD = 'XAG_USD',\n}\n"],"mappings":"AAyBA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["InstrumentId"],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { Locale } from '@oanda/mono-i18n';\nimport { BookType, Division } from '../gql/types/graphql';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: InstrumentId;\n  locale: Locale;\n  theme?: Theme;\n  isParamError?: boolean;\n  division: Division;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n  division: Division;\n}\n\nexport interface ChartWithDataProps {\n  instrument: InstrumentId;\n  bookType: BookType;\n}\n\nexport enum InstrumentId {\n  EUR_AUD = 'EURAUD',\n  EUR_GBP = 'EURGBP',\n  EUR_JPY = 'EURJPY',\n  EUR_USD = 'EURUSD',\n  EUR_CHF = 'EURCHF',\n  USD_CHF = 'USDCHF',\n  USD_JPY = 'USDJPY',\n  USD_CAD = 'USDCAD',\n  GBP_USD = 'GBPUSD',\n  GBP_JPY = 'GBPJPY',\n  GBP_CHF = 'GBPCHF',\n  AUD_JPY = 'AUDJPY',\n  AUD_USD = 'AUDUSD',\n  NZD_USD = 'NZDUSD',\n  XAU_USD = 'XAUUSD',\n  XAG_USD = 'XAGUSD',\n}\n"],"mappings":"AA2BA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA","ignoreList":[]}

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.156",
   "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.156",
     "@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": "0805ed728b9b0cf74d1cf0ef6db7beab69943000"
 }

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>,
     );