@oanda/labs-spread-cost-calculator-widget 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.6 (2024-12-11)
+
+
+
+## 1.0.172 (2024-11-29)
+
+
+
+## 1.0.171 (2024-11-28)
+
+
+
+## 1.0.170 (2024-11-28)
+
+
+
+## 1.0.169 (2024-11-20)
+
+
+
+## 1.0.168 (2024-11-19)
+
+**Note:** Version bump only for package @oanda/labs-spread-cost-calculator-widget
+
+
+
+
+
 ## 1.0.5 (2024-11-29)
 
 

package/dist/main/SpreadCostCalculatorWidget/Main.js

@@ -17,7 +17,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const selectOptions = instruments.map(instrument => ({
     id: instrument.name,

package/dist/main/SpreadCostCalculatorWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_useCalculateSpread","_useInstrumentChange","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","useNumberFormat","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","useInstrumentChange","initialInstrument","useEffect","floatValue","formattedValue","toString","lang","useLocale","spreadCost","useCalculateSpread","createElement","Fragment","className","ChartError","Label","htmlFor","Select","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","cn","NumberInput","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useContext, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  ThemeContext,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\n        <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      ) : (\n        <div\n          data-testid=\"spread-cost-calculator\"\n          className=\"lw-mx-auto lw-flex lw-w-full lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-8 lw-p-4\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_useCalculateSpread","_useInstrumentChange","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","size","useLayoutProvider","isDesktop","Size","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","useNumberFormat","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","useInstrumentChange","initialInstrument","useEffect","floatValue","formattedValue","toString","lang","useLocale","spreadCost","useCalculateSpread","createElement","Fragment","className","ChartError","Label","htmlFor","Select","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","cn","NumberInput","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  useLayoutProvider,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\n        <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      ) : (\n        <div\n          data-testid=\"spread-cost-calculator\"\n          className=\"lw-mx-auto lw-flex lw-w-full lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-8 lw-p-4\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpreadCostCalculatorWidget = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _labsLiveRatesTableWidget = require("@oanda/labs-live-rates-table-widget");
-var _monoI18n = require("@oanda/mono-i18n");
 var _translations = require("../translations");
 var _ValidationWrapper = require("./ValidationWrapper");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SpreadCostCalculatorWidget = _ref => {
   let {
     graphqlUrl,
@@ -31,29 +29,30 @@ const SpreadCostCalculatorWidget = _ref => {
   });
   const divisionCode = division === _labsLiveRatesTableWidget.Division.Opt ? _labsLiveRatesTableWidget.Division.Ogm : division;
   const dataSource = divisionCode === _labsLiveRatesTableWidget.Division.Ogm ? 'MT5' : 'V20';
-  return _react.default.createElement(_monoI18n.LocaleProvider, {
-    locale: (0, _labsWidgetCommon.getLocale)(locale),
-    translations: _translations.translations
-  }, _react.default.createElement(_labsWidgetCommon.LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
-    }
-  }, _react.default.createElement(_client.ApolloProvider, {
-    client: client
-  }, _react.default.createElement(_react.Suspense, null, _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
+  return _react.default.createElement(_labsWidgetCommon.WidgetProvider, {
+    withSuspense: true,
+    locale: locale,
+    translations: _translations.translations,
+    client: client,
     theme: theme,
-    removePadding: removePadding
-  }, (0, _labsWidgetCommon.renderComponent)({
-    Component: _react.default.createElement(_ValidationWrapper.ValidationWrapper, {
-      instruments: instruments,
-      division: division,
-      isParamError: isParamError
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))))));
+    styling: {
+      removePadding
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
+    }
+  }, _react.default.createElement(_labsWidgetCommon.WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo"
+  }, _react.default.createElement(_ValidationWrapper.ValidationWrapper, {
+    instruments: instruments,
+    division: division,
+    isParamError: isParamError
+  })));
 };
 exports.SpreadCostCalculatorWidget = SpreadCostCalculatorWidget;
 //# sourceMappingURL=SpreadCostCalculatorWidget.js.map

package/dist/main/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_labsLiveRatesTableWidget","_monoI18n","_translations","_ValidationWrapper","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","LocaleProvider","getLocale","translations","LiveRatesProvider","url","options","ApolloProvider","Suspense","ThemeProvider","renderComponent","Component","ValidationWrapper","linkArea","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC, Suspense } from 'react';\nimport { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';\nimport {\n  getLocale, LiveRatesProvider, renderComponent, ThemeProvider,\n} from '@oanda/labs-widget-common';\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <LocaleProvider locale={getLocale(locale)} translations={translations}>\n      <LiveRatesProvider\n        url={liveRatesUrl}\n        options={{ divisionCode, dataSource }}\n      >\n        <ApolloProvider client={client}>\n          <Suspense>\n            <ThemeProvider theme={theme} removePadding={removePadding}>\n              {renderComponent({\n                Component: <ValidationWrapper\n                  instruments={instruments}\n                  division={division}\n                  isParamError={isParamError}\n                />,\n                logoLink,\n                linkArea: 'logo',\n              })}\n            </ThemeProvider>\n          </Suspense>\n        </ApolloProvider>\n      </LiveRatesProvider>\n    </LocaleProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_labsLiveRatesTableWidget","_translations","_ValidationWrapper","e","__esModule","default","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","WidgetProvider","withSuspense","translations","styling","liveRates","url","options","WidgetWrapper","linkArea","ValidationWrapper","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\n\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <WidgetProvider\n      withSuspense\n      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n      styling={{\n        removePadding,\n      }}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n      >\n        <ValidationWrapper\n          instruments={instruments}\n          division={division}\n          isParamError={isParamError}\n        />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,yBAAA,GAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AAAwD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAExD,MAAMG,0BAAgE,GAAGC,IAAA,IAUnE;EAAA,IAVoE;IACxEC,UAAU;IACVC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEX,UAAU;IACfY,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMC,YAAY,GAAGR,QAAQ,KAAKS,kCAAQ,CAACC,GAAG,GAAGD,kCAAQ,CAACE,GAAG,GAAGX,QAAQ;EACxE,MAAMY,UAAU,GAAGJ,YAAY,KAAKC,kCAAQ,CAACE,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACE9B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC5B,iBAAA,CAAA6B,cAAc;IACbC,YAAY;IACZlB,MAAM,EAAEA,MAAO;IACfmB,YAAY,EAAEA,0BAAa;IAC3Bb,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAM;IACbqB,OAAO,EAAE;MACPlB;IACF,CAAE;IACFmB,SAAS,EAAE;MACTC,GAAG,EAAExB,YAAY;MACjByB,OAAO,EAAE;QAAEZ,YAAY;QAAEI;MAAW;IACtC;EAAE,GAEF/B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC5B,iBAAA,CAAAoC,aAAa;IACZnB,QAAQ,EAAEA,QAAS;IACnBoB,QAAQ,EAAC;EAAM,GAEfzC,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAACzB,kBAAA,CAAAmC,iBAAiB;IAChBtB,WAAW,EAAEA,WAAY;IACzBD,QAAQ,EAAEA,QAAS;IACnBF,YAAY,EAAEA;EAAa,CAC5B,CACY,CACD,CAAC;AAErB,CAAC;AAAC0B,OAAA,CAAAhC,0BAAA,GAAAA,0BAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/ValidationWrapper.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValidationWrapper = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _Main = require("./Main");
 var _validateInstruments = require("../gql/validateInstruments");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ValidationWrapper = _ref => {
   let {
     division,
@@ -19,7 +18,7 @@ const ValidationWrapper = _ref => {
   } = _ref;
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const {
     data,
     error

package/dist/main/SpreadCostCalculatorWidget/ValidationWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_Main","_validateInstruments","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ValidationWrapper","_ref","division","instruments","isParamError","size","useContext","ThemeContext","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className","ChartError","Main","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, ThemeContext } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useContext(ThemeContext);\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_Main","_validateInstruments","e","__esModule","default","ValidationWrapper","_ref","division","instruments","isParamError","size","useLayoutProvider","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className","ChartError","Main","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useLayoutProvider();\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAAiE,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIjE,MAAMG,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EACpC,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,wBAAgB,EAGtCC,wCAAmB,EAAE;IACrBC,SAAS,EAAE;MACTR,WAAW;MACXD;IACF,CAAC;IACDU,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGP,IAAI,EAAEQ,kBAAkB,EAAEC,GAAG,CAAEC,UAAU,KAAM;IACrEC,IAAI,EAAED,UAAU,CAAEC,IAAI;IACtBC,WAAW,EAAEF,UAAU,CAAEE;EAC3B,CAAC,CAAC,CAAC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAG,CAAC,CAACZ,KAAK,IAAIJ,YAAY;EAEzC,OACEd,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAA/B,MAAA,CAAAS,OAAA,CAAAuB,QAAA,QACGjB,IAAI,IACLf,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAA/B,MAAA,CAAAS,OAAA,CAAAuB,QAAA,QACGF,SAAS,GACR9B,MAAA,CAAAS,OAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChHjC,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC3B,iBAAA,CAAA8B,UAAU,MAAE,CACV,CAAC,GAENlC,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,KAAA,CAAA8B,IAAI;IAACtB,WAAW,EAAEW;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAACY,OAAA,CAAA1B,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["_monoI18n","require"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<\nWidgetWrapperProps,\n'removePadding'\n> & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":";;;;;;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["_monoI18n","require"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":";;;;;;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/Main.js

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useLocale } from '@oanda/mono-i18n';
-import { ChartError, cn, Label, NumberInput, Select, Size, ThemeContext, useNumberFormat } from '@oanda/labs-widget-common';
+import { ChartError, cn, Label, NumberInput, Select, Size, useLayoutProvider, useNumberFormat } from '@oanda/labs-widget-common';
 import { useCalculateSpread } from './useCalculateSpread';
 import { useInstrumentChange } from './useInstrumentChange';
 const Main = _ref => {
@@ -9,7 +9,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const selectOptions = instruments.map(instrument => ({
     id: instrument.name,

package/dist/module/SpreadCostCalculatorWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","useContext","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","ThemeContext","useNumberFormat","useCalculateSpread","useInstrumentChange","Main","_ref","instruments","size","isDesktop","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","initialInstrument","floatValue","formattedValue","toString","lang","spreadCost","createElement","Fragment","className","htmlFor","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useContext, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  ThemeContext,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\n        <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      ) : (\n        <div\n          data-testid=\"spread-cost-calculator\"\n          className=\"lw-mx-auto lw-flex lw-w-full lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-8 lw-p-4\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["React","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","useLayoutProvider","useNumberFormat","useCalculateSpread","useInstrumentChange","Main","_ref","instruments","size","isDesktop","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","initialInstrument","floatValue","formattedValue","toString","lang","spreadCost","createElement","Fragment","className","htmlFor","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  useLayoutProvider,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\n        <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      ) : (\n        <div\n          data-testid=\"spread-cost-calculator\"\n          className=\"lw-mx-auto lw-flex lw-w-full lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-8 lw-p-4\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js

@@ -1,8 +1,7 @@
-import React, { Suspense } from 'react';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { getLocale, LiveRatesProvider, renderComponent, ThemeProvider } from '@oanda/labs-widget-common';
+import React from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import { Division } from '@oanda/labs-live-rates-table-widget';
-import { LocaleProvider } from '@oanda/mono-i18n';
 import { translations } from '../translations';
 import { ValidationWrapper } from './ValidationWrapper';
 const SpreadCostCalculatorWidget = _ref => {
@@ -23,29 +22,30 @@ const SpreadCostCalculatorWidget = _ref => {
   });
   const divisionCode = division === Division.Opt ? Division.Ogm : division;
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
-  return React.createElement(LocaleProvider, {
-    locale: getLocale(locale),
-    translations: translations
-  }, React.createElement(LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
-    }
-  }, React.createElement(ApolloProvider, {
-    client: client
-  }, React.createElement(Suspense, null, React.createElement(ThemeProvider, {
+  return React.createElement(WidgetProvider, {
+    withSuspense: true,
+    locale: locale,
+    translations: translations,
+    client: client,
     theme: theme,
-    removePadding: removePadding
-  }, renderComponent({
-    Component: React.createElement(ValidationWrapper, {
-      instruments: instruments,
-      division: division,
-      isParamError: isParamError
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))))));
+    styling: {
+      removePadding
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
+    }
+  }, React.createElement(WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo"
+  }, React.createElement(ValidationWrapper, {
+    instruments: instruments,
+    division: division,
+    isParamError: isParamError
+  })));
 };
 export { SpreadCostCalculatorWidget };
 //# sourceMappingURL=SpreadCostCalculatorWidget.js.map

package/dist/module/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["React","Suspense","ApolloClient","ApolloProvider","InMemoryCache","getLocale","LiveRatesProvider","renderComponent","ThemeProvider","Division","LocaleProvider","translations","ValidationWrapper","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","url","options","Component","linkArea"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC, Suspense } from 'react';\nimport { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';\nimport {\n  getLocale, LiveRatesProvider, renderComponent, ThemeProvider,\n} from '@oanda/labs-widget-common';\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <LocaleProvider locale={getLocale(locale)} translations={translations}>\n      <LiveRatesProvider\n        url={liveRatesUrl}\n        options={{ divisionCode, dataSource }}\n      >\n        <ApolloProvider client={client}>\n          <Suspense>\n            <ThemeProvider theme={theme} removePadding={removePadding}>\n              {renderComponent({\n                Component: <ValidationWrapper\n                  instruments={instruments}\n                  division={division}\n                  isParamError={isParamError}\n                />,\n                logoLink,\n                linkArea: 'logo',\n              })}\n            </ThemeProvider>\n          </Suspense>\n        </ApolloProvider>\n      </LiveRatesProvider>\n    </LocaleProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,YAAY,EAAEC,cAAc,EAAEC,aAAa,QAAQ,gBAAgB;AAC5E,SACEC,SAAS,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,QACvD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,MAAMC,0BAAgE,GAAGC,IAAA,IAUnE;EAAA,IAVoE;IACxEC,UAAU;IACVC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,MAAM,GAAG,IAAItB,YAAY,CAAC;IAC9BuB,GAAG,EAAEV,UAAU;IACfW,KAAK,EAAE,IAAItB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMuB,YAAY,GAAGN,QAAQ,KAAKZ,QAAQ,CAACmB,GAAG,GAAGnB,QAAQ,CAACoB,GAAG,GAAGR,QAAQ;EACxE,MAAMS,UAAU,GAAGH,YAAY,KAAKlB,QAAQ,CAACoB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACE7B,KAAA,CAAA+B,aAAA,CAACrB,cAAc;IAACQ,MAAM,EAAEb,SAAS,CAACa,MAAM,CAAE;IAACP,YAAY,EAAEA;EAAa,GACpEX,KAAA,CAAA+B,aAAA,CAACzB,iBAAiB;IAChB0B,GAAG,EAAEhB,YAAa;IAClBiB,OAAO,EAAE;MAAEN,YAAY;MAAEG;IAAW;EAAE,GAEtC9B,KAAA,CAAA+B,aAAA,CAAC5B,cAAc;IAACqB,MAAM,EAAEA;EAAO,GAC7BxB,KAAA,CAAA+B,aAAA,CAAC9B,QAAQ,QACPD,KAAA,CAAA+B,aAAA,CAACvB,aAAa;IAACS,KAAK,EAAEA,KAAM;IAACG,aAAa,EAAEA;EAAc,GACvDb,eAAe,CAAC;IACf2B,SAAS,EAAElC,KAAA,CAAA+B,aAAA,CAACnB,iBAAiB;MAC3BU,WAAW,EAAEA,WAAY;MACzBD,QAAQ,EAAEA,QAAS;MACnBF,YAAY,EAAEA;IAAa,CAC5B,CAAC;IACFI,QAAQ;IACRY,QAAQ,EAAE;EACZ,CAAC,CACY,CACP,CACI,CACC,CACL,CAAC;AAErB,CAAC;AAED,SAAStB,0BAA0B","ignoreList":[]}
+{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["React","ApolloClient","InMemoryCache","WidgetProvider","WidgetWrapper","Division","translations","ValidationWrapper","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","withSuspense","styling","liveRates","url","options","linkArea"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\n\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <WidgetProvider\n      withSuspense\n      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n      styling={{\n        removePadding,\n      }}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n      >\n        <ValidationWrapper\n          instruments={instruments}\n          division={division}\n          isParamError={isParamError}\n        />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SAASC,YAAY,EAAEC,aAAa,QAAQ,gBAAgB;AAC5D,SAASC,cAAc,EAAEC,aAAa,QAAQ,2BAA2B;AAEzE,SAASC,QAAQ,QAAQ,qCAAqC;AAE9D,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,MAAMC,0BAAgE,GAAGC,IAAA,IAUnE;EAAA,IAVoE;IACxEC,UAAU;IACVC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,MAAM,GAAG,IAAIlB,YAAY,CAAC;IAC9BmB,GAAG,EAAEV,UAAU;IACfW,KAAK,EAAE,IAAInB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMoB,YAAY,GAAGN,QAAQ,KAAKX,QAAQ,CAACkB,GAAG,GAAGlB,QAAQ,CAACmB,GAAG,GAAGR,QAAQ;EACxE,MAAMS,UAAU,GAAGH,YAAY,KAAKjB,QAAQ,CAACmB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACExB,KAAA,CAAA0B,aAAA,CAACvB,cAAc;IACbwB,YAAY;IACZd,MAAM,EAAEA,MAAO;IACfP,YAAY,EAAEA,YAAa;IAC3Ba,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAM;IACbgB,OAAO,EAAE;MACPb;IACF,CAAE;IACFc,SAAS,EAAE;MACTC,GAAG,EAAEnB,YAAY;MACjBoB,OAAO,EAAE;QAAET,YAAY;QAAEG;MAAW;IACtC;EAAE,GAEFzB,KAAA,CAAA0B,aAAA,CAACtB,aAAa;IACZc,QAAQ,EAAEA,QAAS;IACnBc,QAAQ,EAAC;EAAM,GAEfhC,KAAA,CAAA0B,aAAA,CAACnB,iBAAiB;IAChBU,WAAW,EAAEA,WAAY;IACzBD,QAAQ,EAAEA,QAAS;IACnBF,YAAY,EAAEA;EAAa,CAC5B,CACY,CACD,CAAC;AAErB,CAAC;AAED,SAASN,0BAA0B","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/ValidationWrapper.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
-import { ChartError, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from './Main';
 import { validateInstruments } from '../gql/validateInstruments';
 const ValidationWrapper = _ref => {
@@ -11,7 +11,7 @@ const ValidationWrapper = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const {
     data,
     error

package/dist/module/SpreadCostCalculatorWidget/ValidationWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["React","useContext","useSuspenseQuery","ChartError","ThemeContext","Main","validateInstruments","ValidationWrapper","_ref","division","instruments","isParamError","size","data","error","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, ThemeContext } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useContext(ThemeContext);\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,2BAA2B;AACpE,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,mBAAmB,QAAQ,4BAA4B;AAIhE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAGX,UAAU,CAACG,YAAY,CAAC;EACzC,MAAM;IAAES,IAAI;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBS,SAAS,EAAE;MACTL,WAAW;MACXD;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGL,IAAI,EAAEM,kBAAkB,EAAEC,GAAG,CAAEC,UAAU,KAAM;IACrEC,IAAI,EAAED,UAAU,CAAEC,IAAI;IACtBC,WAAW,EAAEF,UAAU,CAAEE;EAC3B,CAAC,CAAC,CAAC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAG,CAAC,CAACV,KAAK,IAAIH,YAAY;EAEzC,OACEX,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACGd,IAAI,IACLZ,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACGF,SAAS,GACRxB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH3B,KAAA,CAAAyB,aAAA,CAACtB,UAAU,MAAE,CACV,CAAC,GAENH,KAAA,CAAAyB,aAAA,CAACpB,IAAI;IAACK,WAAW,EAAEQ;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAED,SAASX,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["React","useSuspenseQuery","ChartError","useLayoutProvider","Main","validateInstruments","ValidationWrapper","_ref","division","instruments","isParamError","size","data","error","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useLayoutProvider();\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,2BAA2B;AACzE,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,mBAAmB,QAAQ,4BAA4B;AAIhE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EACpC,MAAM;IAAES,IAAI;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBS,SAAS,EAAE;MACTL,WAAW;MACXD;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGL,IAAI,EAAEM,kBAAkB,EAAEC,GAAG,CAAEC,UAAU,KAAM;IACrEC,IAAI,EAAED,UAAU,CAAEC,IAAI;IACtBC,WAAW,EAAEF,UAAU,CAAEE;EAC3B,CAAC,CAAC,CAAC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAG,CAAC,CAACV,KAAK,IAAIH,YAAY;EAEzC,OACEV,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGd,IAAI,IACLX,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGF,SAAS,GACRvB,KAAA,CAAAwB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH1B,KAAA,CAAAwB,aAAA,CAACtB,UAAU,MAAE,CACV,CAAC,GAENF,KAAA,CAAAwB,aAAA,CAACpB,IAAI;IAACK,WAAW,EAAEQ;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAED,SAASX,iBAAiB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["Locale"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<\nWidgetWrapperProps,\n'removePadding'\n> & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":"AAGA,SAASA,MAAM,QAAQ,kBAAkB","ignoreList":[]}
+{"version":3,"file":"types.js","names":["Locale"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":"AAGA,SAASA,MAAM,QAAQ,kBAAkB","ignoreList":[]}

package/dist/types/SpreadCostCalculatorWidget/types.d.ts

@@ -1,7 +1,7 @@
-import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';
+import { WidgetConfig } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 export { Locale } from '@oanda/mono-i18n';
-export type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<WidgetWrapperProps, 'removePadding'> & {
+export type SpreadCostCalculatorWidgetConfig = WidgetConfig & {
     liveRatesUrl: string;
     division: Division;
     instruments: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-spread-cost-calculator-widget",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Labs Spread Cost Calculator 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.172",
+    "@oanda/labs-widget-common": "^1.0.173",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -22,5 +22,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
+  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
 }

package/src/SpreadCostCalculatorWidget/Main.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useContext, useEffect,
+  FC, useEffect,
 } from 'react';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -9,7 +9,7 @@ import {
   NumberInput,
   Select,
   Size,
-  ThemeContext,
+  useLayoutProvider,
   useNumberFormat,
 } from '@oanda/labs-widget-common';
 import { useCalculateSpread } from './useCalculateSpread';
@@ -19,7 +19,7 @@ import { MainProps } from './types';
 const Main: FC<MainProps> = ({
   instruments,
 }) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const selectOptions = instruments.map((instrument) => ({

package/src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx

@@ -1,10 +1,8 @@
-import React, { FC, Suspense } from 'react';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import {
-  getLocale, LiveRatesProvider, renderComponent, ThemeProvider,
-} from '@oanda/labs-widget-common';
+import React, { FC } from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+
 import { Division } from '@oanda/labs-live-rates-table-widget';
-import { LocaleProvider } from '@oanda/mono-i18n';
 import { SpreadCostCalculatorWidgetConfig } from './types';
 import { translations } from '../translations';
 import { ValidationWrapper } from './ValidationWrapper';
@@ -29,28 +27,31 @@ const SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
   return (
-    <LocaleProvider locale={getLocale(locale)} translations={translations}>
-      <LiveRatesProvider
-        url={liveRatesUrl}
-        options={{ divisionCode, dataSource }}
+    <WidgetProvider
+      withSuspense
+      locale={locale}
+      translations={translations}
+      client={client}
+      theme={theme}
+      styling={{
+        removePadding,
+      }}
+      liveRates={{
+        url: liveRatesUrl,
+        options: { divisionCode, dataSource },
+      }}
+    >
+      <WidgetWrapper
+        logoLink={logoLink}
+        linkArea="logo"
       >
-        <ApolloProvider client={client}>
-          <Suspense>
-            <ThemeProvider theme={theme} removePadding={removePadding}>
-              {renderComponent({
-                Component: <ValidationWrapper
-                  instruments={instruments}
-                  division={division}
-                  isParamError={isParamError}
-                />,
-                logoLink,
-                linkArea: 'logo',
-              })}
-            </ThemeProvider>
-          </Suspense>
-        </ApolloProvider>
-      </LiveRatesProvider>
-    </LocaleProvider>
+        <ValidationWrapper
+          instruments={instruments}
+          division={division}
+          isParamError={isParamError}
+        />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/SpreadCostCalculatorWidget/ValidationWrapper.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
-import { ChartError, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from './Main';
 import { validateInstruments } from '../gql/validateInstruments';
 import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
@@ -11,7 +11,7 @@ const ValidationWrapper = ({
   instruments,
   isParamError,
 }: ValidationWrapperProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const { data, error } = useSuspenseQuery<
   ValidateInstrumentsQuery,
   ValidateInstrumentsQueryVariables

package/src/SpreadCostCalculatorWidget/types.ts

@@ -1,12 +1,9 @@
-import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';
+import { WidgetConfig } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 
 export { Locale } from '@oanda/mono-i18n';
 
-export type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<
-WidgetWrapperProps,
-'removePadding'
-> & {
+export type SpreadCostCalculatorWidgetConfig = WidgetConfig & {
   liveRatesUrl: string;
   division: Division;
   instruments: string[];

package/test/SpreadCostCalculator.test.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { LiveRatesProvider, MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from '../src/SpreadCostCalculatorWidget/Main';
 
 describe('Spread Cost Calculator', () => {
@@ -20,9 +21,13 @@ describe('Spread Cost Calculator', () => {
   it('should render spread cost calculator component', async () => {
     // When
     const { findByTestId } = render(
-      <Main
-        instruments={[{ name: 'EUR_USD', displayName: 'EUR/USD' }]}
-      />,
+      <LiveRatesProvider url="oanda.com">
+        <MockLayoutProvider>
+          <Main
+            instruments={[{ name: 'EUR_USD', displayName: 'EUR/USD' }]}
+          />
+        </MockLayoutProvider>
+      </LiveRatesProvider>,
     );
 
     // Then