@oanda/labs-currency-strength-widget 1.0.89 → 1.0.91

package/dist/main/CurrencyStrengthWidget/ChartsWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsWithData.js","names":["_react","_interopRequireWildcard","require","_client","_monoI18n","_labsWidgetCommon","_classnames","_interopRequireDefault","_getCurrencyStrength","_Chart","_formatters","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ChartWithData","_ref","currency","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","lang","useLocale","loading","data","error","useQuery","getCurrencyStrength","fetchPolicy","showChart","currencyStrength","length","showError","currencyData","filter","item","slice","sort","sortCurrencies","createElement","Fragment","className","classnames","Spinner","SpinnerSize","lg","map","key","Chart","values","strengthRelation","ChartError","LastUpdated","timestamp","updatedAt","labelCallback","exports"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  LastUpdated,\n  Size,\n  Spinner,\n  SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortCurrencies } from './components/Chart/formatters';\nimport { WidgetProps } from './types';\n\nconst ChartWithData = ({ currency }: WidgetProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { lang } = useLocale();\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  const currencyData = currency\n    ? data?.currencyStrength?.filter((item) => item.currency === currency)\n    : data?.currencyStrength?.slice().sort(sortCurrencies);\n\n  return (\n    <>\n      {loading\n      && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[461px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop && !currency,\n            'lw-grid-cols-1': !isDesktop || currency,\n          })}\n        >\n          {currencyData && currencyData.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart\n                currency={item.currency}\n                values={item.strengthRelation?.slice().sort(sortCurrencies)!}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[425px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <ChartError />\n        </div>\n      )}\n      {!loading && !showError && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <LastUpdated timestamp={data?.currencyStrength![0]?.updatedAt} labelCallback={lang} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChartsWithData.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_classnames","_getCurrencyStrength","_Chart","_formatters","e","__esModule","default","ChartWithData","_ref","currency","size","useLayoutProvider","isDesktop","Size","DESKTOP","lang","useLocale","loading","data","error","useQuery","getCurrencyStrength","fetchPolicy","showChart","currencyStrength","length","showError","currencyData","filter","item","slice","sort","sortCurrencies","createElement","Fragment","className","classnames","Spinner","SpinnerSize","lg","map","key","Chart","values","strengthRelation","ChartError","LastUpdated","timestamp","updatedAt","labelCallback","exports"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React from 'react';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  LastUpdated,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortCurrencies } from './components/Chart/formatters';\nimport { WidgetProps } from './types';\n\nconst ChartWithData = ({ currency }: WidgetProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const { lang } = useLocale();\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  const currencyData = currency\n    ? data?.currencyStrength?.filter((item) => item.currency === currency)\n    : data?.currencyStrength?.slice().sort(sortCurrencies);\n\n  return (\n    <>\n      {loading\n      && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[461px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop && !currency,\n            'lw-grid-cols-1': !isDesktop || currency,\n          })}\n        >\n          {currencyData && currencyData.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart\n                currency={item.currency}\n                values={item.strengthRelation?.slice().sort(sortCurrencies)!}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[425px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <ChartError />\n        </div>\n      )}\n      {!loading && !showError && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <LastUpdated timestamp={data?.currencyStrength![0]?.updatedAt} labelCallback={lang} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/CurrencyStrengthWidget.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CurrencyStrengthWidget = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _monoI18n = require("@oanda/mono-i18n");
 var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _translations = require("../translations");
@@ -24,23 +23,19 @@ const CurrencyStrengthWidget = _ref => {
     uri: graphqlUrl,
     cache: new _client.InMemoryCache()
   });
-  return _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
+  return _react.default.createElement(_labsWidgetCommon.WidgetProvider, {
+    locale: locale,
+    translations: _translations.translations,
+    client: client,
     theme: theme
-  }, _react.default.createElement(_monoI18n.LocaleProvider, {
-    locale: (0, _labsWidgetCommon.getLocale)(locale),
-    translations: _translations.translations
-  }, _react.default.createElement(_client.ApolloProvider, {
-    client: client
-  }, isParamError ? _react.default.createElement("div", {
-    className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
-  }, _react.default.createElement(_labsWidgetCommon.ChartError, null)) : (0, _labsWidgetCommon.renderComponent)({
-    Component: _react.default.createElement(_Main.Main, {
-      currency: currency,
-      theme: theme
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))));
+  }, _react.default.createElement(_labsWidgetCommon.WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo",
+    isParamError: isParamError
+  }, _react.default.createElement(_Main.Main, {
+    currency: currency,
+    theme: theme
+  })));
 };
 exports.CurrencyStrengthWidget = CurrencyStrengthWidget;
 //# sourceMappingURL=CurrencyStrengthWidget.js.map

package/dist/main/CurrencyStrengthWidget/CurrencyStrengthWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyStrengthWidget.js","names":["_react","_interopRequireDefault","require","_monoI18n","_client","_labsWidgetCommon","_translations","_Main","e","__esModule","default","CurrencyStrengthWidget","_ref","graphqlUrl","currency","locale","theme","isParamError","logoLink","client","ApolloClient","uri","cache","InMemoryCache","createElement","ThemeProvider","LocaleProvider","getLocale","translations","ApolloProvider","className","ChartError","renderComponent","Component","Main","linkArea","exports"],"sources":["../../../src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport {\n  ChartError, ThemeProvider, getLocale, renderComponent,\n} from '@oanda/labs-widget-common';\nimport { CurrencyStrengthConfig } from './types';\nimport { translations } from '../translations';\nimport { Main } from './Main';\n\nconst CurrencyStrengthWidget = ({\n  graphqlUrl, currency, locale, theme, isParamError, logoLink,\n}: CurrencyStrengthConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {isParamError ? (\n            <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n              <ChartError />\n            </div>\n          ) : renderComponent({\n            Component: <Main currency={currency} theme={theme} />,\n            logoLink,\n            linkArea: 'logo',\n          })}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { CurrencyStrengthWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAIA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAA8B,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9B,MAAMG,sBAAsB,GAAGC,IAAA,IAED;EAAA,IAFE;IAC9BC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAC7B,CAAC,GAAAN,IAAA;EACvB,MAAMO,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAER,UAAU;IACfS,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEvB,MAAA,CAAAU,OAAA,CAAAc,aAAA,CAACnB,iBAAA,CAAAoB,aAAa;IAACT,KAAK,EAAEA;EAAM,GAC1BhB,MAAA,CAAAU,OAAA,CAAAc,aAAA,CAACrB,SAAA,CAAAuB,cAAc;IAACX,MAAM,EAAE,IAAAY,2BAAS,EAACZ,MAAM,CAAE;IAACa,YAAY,EAAEA;EAAa,GACpE5B,MAAA,CAAAU,OAAA,CAAAc,aAAA,CAACpB,OAAA,CAAAyB,cAAc;IAACV,MAAM,EAAEA;EAAO,GAC5BF,YAAY,GACXjB,MAAA,CAAAU,OAAA,CAAAc,aAAA;IAAKM,SAAS,EAAC;EAAmG,GAChH9B,MAAA,CAAAU,OAAA,CAAAc,aAAA,CAACnB,iBAAA,CAAA0B,UAAU,MAAE,CACV,CAAC,GACJ,IAAAC,iCAAe,EAAC;IAClBC,SAAS,EAAEjC,MAAA,CAAAU,OAAA,CAAAc,aAAA,CAACjB,KAAA,CAAA2B,IAAI;MAACpB,QAAQ,EAAEA,QAAS;MAACE,KAAK,EAAEA;IAAM,CAAE,CAAC;IACrDE,QAAQ;IACRiB,QAAQ,EAAE;EACZ,CAAC,CACa,CACF,CACH,CAAC;AAEpB,CAAC;AAACC,OAAA,CAAAzB,sBAAA,GAAAA,sBAAA","ignoreList":[]}
+{"version":3,"file":"CurrencyStrengthWidget.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_translations","_Main","e","__esModule","default","CurrencyStrengthWidget","_ref","graphqlUrl","currency","locale","theme","isParamError","logoLink","client","ApolloClient","uri","cache","InMemoryCache","createElement","WidgetProvider","translations","WidgetWrapper","linkArea","Main","exports"],"sources":["../../../src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\nimport { CurrencyStrengthConfig } from './types';\nimport { translations } from '../translations';\nimport { Main } from './Main';\n\nconst CurrencyStrengthWidget = ({\n  graphqlUrl, currency, locale, theme, isParamError, logoLink,\n}: CurrencyStrengthConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <WidgetProvider\n      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n        isParamError={isParamError}\n      >\n        <Main currency={currency} theme={theme} />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { CurrencyStrengthWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAA8B,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9B,MAAMG,sBAAsB,GAAGC,IAAA,IAED;EAAA,IAFE;IAC9BC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAC7B,CAAC,GAAAN,IAAA;EACvB,MAAMO,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAER,UAAU;IACfS,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEtB,MAAA,CAAAS,OAAA,CAAAc,aAAA,CAACnB,iBAAA,CAAAoB,cAAc;IACbV,MAAM,EAAEA,MAAO;IACfW,YAAY,EAAEA,0BAAa;IAC3BP,MAAM,EAAEA,MAAO;IACfH,KAAK,EAAEA;EAAM,GAEbf,MAAA,CAAAS,OAAA,CAAAc,aAAA,CAACnB,iBAAA,CAAAsB,aAAa;IACZT,QAAQ,EAAEA,QAAS;IACnBU,QAAQ,EAAC,MAAM;IACfX,YAAY,EAAEA;EAAa,GAE3BhB,MAAA,CAAAS,OAAA,CAAAc,aAAA,CAACjB,KAAA,CAAAsB,IAAI;IAACf,QAAQ,EAAEA,QAAS;IAACE,KAAK,EAAEA;EAAM,CAAE,CAC5B,CACD,CAAC;AAErB,CAAC;AAACc,OAAA,CAAAnB,sBAAA,GAAAA,sBAAA","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/Main.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Main = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _monoI18n = require("@oanda/mono-i18n");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _ChartsWithData = require("./ChartsWithData");
-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 Main = _ref => {
   let {
     currency
@@ -19,7 +18,7 @@ const Main = _ref => {
   } = (0, _monoI18n.useLocale)();
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   return _react.default.createElement(_react.default.Fragment, null, size && _react.default.createElement("div", {
     "data-testid": "currency-strength-wrapper"
   }, _react.default.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_ChartsWithData","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","currency","lang","useLocale","size","useContext","ThemeContext","createElement","Fragment","className","count","ChartWithData","exports"],"sources":["../../../src/CurrencyStrengthWidget/Main.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { ThemeContext } from '@oanda/labs-widget-common';\nimport { ChartWithData } from './ChartsWithData';\nimport { WidgetProps } from './types';\n\nconst Main = ({ currency }: WidgetProps) => {\n  const { lang } = useLocale();\n  const { size } = useContext(ThemeContext);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"currency-strength-wrapper\">\n        <div className=\"lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold\">\n          <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>\n        </div>\n        <ChartWithData currency={currency} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAAiD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGjD,MAAMW,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EAEzC,OACEjC,MAAA,CAAAY,OAAA,CAAAsB,aAAA,CAAAlC,MAAA,CAAAY,OAAA,CAAAuB,QAAA,QACGJ,IAAI,IACL/B,MAAA,CAAAY,OAAA,CAAAsB,aAAA;IAAK,eAAY;EAA2B,GAC1ClC,MAAA,CAAAY,OAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAC;EAAwE,GACrFpC,MAAA,CAAAY,OAAA,CAAAsB,aAAA,eAAO,GAAGL,IAAI,CAAC,OAAO,CAAC,KAAKA,IAAI,CAAC,QAAQ,EAAE;IAAEQ,KAAK,EAAE;EAAE,CAAC,CAAC,GAAU,CAC/D,CAAC,EACNrC,MAAA,CAAAY,OAAA,CAAAsB,aAAA,CAAC7B,eAAA,CAAAiC,aAAa;IAACV,QAAQ,EAAEA;EAAS,CAAE,CACjC,CAEL,CAAC;AAEP,CAAC;AAACW,OAAA,CAAAb,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_react","_interopRequireDefault","require","_monoI18n","_labsWidgetCommon","_ChartsWithData","e","__esModule","default","Main","_ref","currency","lang","useLocale","size","useLayoutProvider","createElement","Fragment","className","count","ChartWithData","exports"],"sources":["../../../src/CurrencyStrengthWidget/Main.tsx"],"sourcesContent":["import React from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useLayoutProvider } from '@oanda/labs-widget-common';\nimport { ChartWithData } from './ChartsWithData';\nimport { WidgetProps } from './types';\n\nconst Main = ({ currency }: WidgetProps) => {\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"currency-strength-wrapper\">\n        <div className=\"lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold\">\n          <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>\n        </div>\n        <ChartWithData currency={currency} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAAiD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGjD,MAAMG,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EAEpC,OACEf,MAAA,CAAAQ,OAAA,CAAAQ,aAAA,CAAAhB,MAAA,CAAAQ,OAAA,CAAAS,QAAA,QACGH,IAAI,IACLd,MAAA,CAAAQ,OAAA,CAAAQ,aAAA;IAAK,eAAY;EAA2B,GAC1ChB,MAAA,CAAAQ,OAAA,CAAAQ,aAAA;IAAKE,SAAS,EAAC;EAAwE,GACrFlB,MAAA,CAAAQ,OAAA,CAAAQ,aAAA,eAAO,GAAGJ,IAAI,CAAC,OAAO,CAAC,KAAKA,IAAI,CAAC,QAAQ,EAAE;IAAEO,KAAK,EAAE;EAAE,CAAC,CAAC,GAAU,CAC/D,CAAC,EACNnB,MAAA,CAAAQ,OAAA,CAAAQ,aAAA,CAACX,eAAA,CAAAe,aAAa;IAACT,QAAQ,EAAEA;EAAS,CAAE,CACjC,CAEL,CAAC;AAEP,CAAC;AAACU,OAAA,CAAAZ,IAAA,GAAAA,IAAA","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/components/Chart/Chart.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chart = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _core = _interopRequireDefault(require("echarts-for-react/lib/core"));
 var echarts = _interopRequireWildcard(require("echarts/core"));
 var _charts = require("echarts/charts");
@@ -14,9 +14,9 @@ var _monoI18n = require("@oanda/mono-i18n");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _constants = require("./constants");
 var _getOption = require("./getOption");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
 echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _components.TooltipComponent, _components.TitleComponent, _charts.BarChart, _renderers.CanvasRenderer]);
 echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
 echarts.registerTheme('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));
@@ -30,7 +30,7 @@ const Chart = _ref => {
   } = (0, _monoI18n.useLocale)();
   const {
     isDark
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   return _react.default.createElement(_core.default, {
     echarts: echarts,
     theme: isDark ? 'dark_theme' : 'light_theme',

package/dist/main/CurrencyStrengthWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_core","_interopRequireDefault","echarts","_charts","_renderers","_components","_monoI18n","_labsWidgetCommon","_constants","_getOption","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","BarChart","CanvasRenderer","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","currency","lang","useLocale","isDark","useContext","ThemeContext","createElement","theme","style","height","CHART_HEIGHT","width","option","getOption","exports"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,\n} from 'echarts/components';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './constants';\nimport { getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, currency }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useContext(ThemeContext);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption({\n        values, currency, lang, isDark,\n      })}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_react","_interopRequireDefault","require","_core","echarts","_interopRequireWildcard","_charts","_renderers","_components","_monoI18n","_labsWidgetCommon","_constants","_getOption","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","BarChart","CanvasRenderer","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","values","currency","lang","useLocale","isDark","useLayoutProvider","createElement","theme","style","height","CHART_HEIGHT","width","option","getOption","exports"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,\n} from 'echarts/components';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { Theme, useLayoutProvider, getChartTheme } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './constants';\nimport { getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, currency }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption({\n        values, currency, lang, isDark,\n      })}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/ChartsWithData.js

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/client';
 import { useLocale } from '@oanda/mono-i18n';
-import { ChartError, LastUpdated, Size, Spinner, SpinnerSize, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, LastUpdated, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
 import { getCurrencyStrength } from '../gql/getCurrencyStrength';
 import { Chart } from './components/Chart';
@@ -12,7 +12,7 @@ const ChartWithData = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const {
     lang

package/dist/module/CurrencyStrengthWidget/ChartsWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsWithData.js","names":["React","useContext","useQuery","useLocale","ChartError","LastUpdated","Size","Spinner","SpinnerSize","ThemeContext","classnames","getCurrencyStrength","Chart","sortCurrencies","ChartWithData","_ref","currency","size","isDesktop","DESKTOP","lang","loading","data","error","fetchPolicy","showChart","currencyStrength","length","showError","currencyData","filter","item","slice","sort","createElement","Fragment","className","lg","map","key","values","strengthRelation","timestamp","updatedAt","labelCallback"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  LastUpdated,\n  Size,\n  Spinner,\n  SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortCurrencies } from './components/Chart/formatters';\nimport { WidgetProps } from './types';\n\nconst ChartWithData = ({ currency }: WidgetProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { lang } = useLocale();\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  const currencyData = currency\n    ? data?.currencyStrength?.filter((item) => item.currency === currency)\n    : data?.currencyStrength?.slice().sort(sortCurrencies);\n\n  return (\n    <>\n      {loading\n      && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[461px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop && !currency,\n            'lw-grid-cols-1': !isDesktop || currency,\n          })}\n        >\n          {currencyData && currencyData.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart\n                currency={item.currency}\n                values={item.strengthRelation?.slice().sort(sortCurrencies)!}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[425px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <ChartError />\n        </div>\n      )}\n      {!loading && !showError && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <LastUpdated timestamp={data?.currencyStrength![0]?.updatedAt} labelCallback={lang} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChartsWithData.js","names":["React","useQuery","useLocale","ChartError","LastUpdated","Size","Spinner","SpinnerSize","useLayoutProvider","classnames","getCurrencyStrength","Chart","sortCurrencies","ChartWithData","_ref","currency","size","isDesktop","DESKTOP","lang","loading","data","error","fetchPolicy","showChart","currencyStrength","length","showError","currencyData","filter","item","slice","sort","createElement","Fragment","className","lg","map","key","values","strengthRelation","timestamp","updatedAt","labelCallback"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React from 'react';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  LastUpdated,\n  Size,\n  Spinner,\n  SpinnerSize,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortCurrencies } from './components/Chart/formatters';\nimport { WidgetProps } from './types';\n\nconst ChartWithData = ({ currency }: WidgetProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const { lang } = useLocale();\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  const currencyData = currency\n    ? data?.currencyStrength?.filter((item) => item.currency === currency)\n    : data?.currencyStrength?.slice().sort(sortCurrencies);\n\n  return (\n    <>\n      {loading\n      && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[461px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop && !currency,\n            'lw-grid-cols-1': !isDesktop || currency,\n          })}\n        >\n          {currencyData && currencyData.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart\n                currency={item.currency}\n                values={item.strengthRelation?.slice().sort(sortCurrencies)!}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className={classnames('lw-flex lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary', {\n          'lw-h-[425px]': !currency,\n          'lw-h-[135px]': currency,\n        })}\n        >\n          <ChartError />\n        </div>\n      )}\n      {!loading && !showError && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <LastUpdated timestamp={data?.currencyStrength![0]?.updatedAt} labelCallback={lang} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/CurrencyStrengthWidget.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { ChartError, ThemeProvider, getLocale, renderComponent } from '@oanda/labs-widget-common';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import { translations } from '../translations';
 import { Main } from './Main';
 const CurrencyStrengthWidget = _ref => {
@@ -17,23 +16,19 @@ const CurrencyStrengthWidget = _ref => {
     uri: graphqlUrl,
     cache: new InMemoryCache()
   });
-  return React.createElement(ThemeProvider, {
+  return React.createElement(WidgetProvider, {
+    locale: locale,
+    translations: translations,
+    client: client,
     theme: theme
-  }, React.createElement(LocaleProvider, {
-    locale: getLocale(locale),
-    translations: translations
-  }, React.createElement(ApolloProvider, {
-    client: client
-  }, isParamError ? React.createElement("div", {
-    className: "lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
-  }, React.createElement(ChartError, null)) : renderComponent({
-    Component: React.createElement(Main, {
-      currency: currency,
-      theme: theme
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))));
+  }, React.createElement(WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo",
+    isParamError: isParamError
+  }, React.createElement(Main, {
+    currency: currency,
+    theme: theme
+  })));
 };
 export { CurrencyStrengthWidget };
 //# sourceMappingURL=CurrencyStrengthWidget.js.map

package/dist/module/CurrencyStrengthWidget/CurrencyStrengthWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyStrengthWidget.js","names":["React","LocaleProvider","ApolloClient","InMemoryCache","ApolloProvider","ChartError","ThemeProvider","getLocale","renderComponent","translations","Main","CurrencyStrengthWidget","_ref","graphqlUrl","currency","locale","theme","isParamError","logoLink","client","uri","cache","createElement","className","Component","linkArea"],"sources":["../../../src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport {\n  ChartError, ThemeProvider, getLocale, renderComponent,\n} from '@oanda/labs-widget-common';\nimport { CurrencyStrengthConfig } from './types';\nimport { translations } from '../translations';\nimport { Main } from './Main';\n\nconst CurrencyStrengthWidget = ({\n  graphqlUrl, currency, locale, theme, isParamError, logoLink,\n}: CurrencyStrengthConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {isParamError ? (\n            <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n              <ChartError />\n            </div>\n          ) : renderComponent({\n            Component: <Main currency={currency} theme={theme} />,\n            logoLink,\n            linkArea: 'logo',\n          })}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { CurrencyStrengthWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SACEC,UAAU,EAAEC,aAAa,EAAEC,SAAS,EAAEC,eAAe,QAChD,2BAA2B;AAElC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,IAAI,QAAQ,QAAQ;AAE7B,MAAMC,sBAAsB,GAAGC,IAAA,IAED;EAAA,IAFE;IAC9BC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAC7B,CAAC,GAAAN,IAAA;EACvB,MAAMO,MAAM,GAAG,IAAIjB,YAAY,CAAC;IAC9BkB,GAAG,EAAEP,UAAU;IACfQ,KAAK,EAAE,IAAIlB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEH,KAAA,CAAAsB,aAAA,CAAChB,aAAa;IAACU,KAAK,EAAEA;EAAM,GAC1BhB,KAAA,CAAAsB,aAAA,CAACrB,cAAc;IAACc,MAAM,EAAER,SAAS,CAACQ,MAAM,CAAE;IAACN,YAAY,EAAEA;EAAa,GACpET,KAAA,CAAAsB,aAAA,CAAClB,cAAc;IAACe,MAAM,EAAEA;EAAO,GAC5BF,YAAY,GACXjB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAmG,GAChHvB,KAAA,CAAAsB,aAAA,CAACjB,UAAU,MAAE,CACV,CAAC,GACJG,eAAe,CAAC;IAClBgB,SAAS,EAAExB,KAAA,CAAAsB,aAAA,CAACZ,IAAI;MAACI,QAAQ,EAAEA,QAAS;MAACE,KAAK,EAAEA;IAAM,CAAE,CAAC;IACrDE,QAAQ;IACRO,QAAQ,EAAE;EACZ,CAAC,CACa,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAASd,sBAAsB","ignoreList":[]}
+{"version":3,"file":"CurrencyStrengthWidget.js","names":["React","ApolloClient","InMemoryCache","WidgetProvider","WidgetWrapper","translations","Main","CurrencyStrengthWidget","_ref","graphqlUrl","currency","locale","theme","isParamError","logoLink","client","uri","cache","createElement","linkArea"],"sources":["../../../src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\nimport { CurrencyStrengthConfig } from './types';\nimport { translations } from '../translations';\nimport { Main } from './Main';\n\nconst CurrencyStrengthWidget = ({\n  graphqlUrl, currency, locale, theme, isParamError, logoLink,\n}: CurrencyStrengthConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <WidgetProvider\n      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n        isParamError={isParamError}\n      >\n        <Main currency={currency} theme={theme} />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { CurrencyStrengthWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,gBAAgB;AAC5D,SAASC,cAAc,EAAEC,aAAa,QAAQ,2BAA2B;AAEzE,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,IAAI,QAAQ,QAAQ;AAE7B,MAAMC,sBAAsB,GAAGC,IAAA,IAED;EAAA,IAFE;IAC9BC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAC7B,CAAC,GAAAN,IAAA;EACvB,MAAMO,MAAM,GAAG,IAAId,YAAY,CAAC;IAC9Be,GAAG,EAAEP,UAAU;IACfQ,KAAK,EAAE,IAAIf,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAkB,aAAA,CAACf,cAAc;IACbQ,MAAM,EAAEA,MAAO;IACfN,YAAY,EAAEA,YAAa;IAC3BU,MAAM,EAAEA,MAAO;IACfH,KAAK,EAAEA;EAAM,GAEbZ,KAAA,CAAAkB,aAAA,CAACd,aAAa;IACZU,QAAQ,EAAEA,QAAS;IACnBK,QAAQ,EAAC,MAAM;IACfN,YAAY,EAAEA;EAAa,GAE3Bb,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACI,QAAQ,EAAEA,QAAS;IAACE,KAAK,EAAEA;EAAM,CAAE,CAC5B,CACD,CAAC;AAErB,CAAC;AAED,SAASL,sBAAsB","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/Main.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useLocale } from '@oanda/mono-i18n';
-import { ThemeContext } from '@oanda/labs-widget-common';
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { ChartWithData } from './ChartsWithData';
 const Main = _ref => {
   let {
@@ -11,7 +11,7 @@ const Main = _ref => {
   } = useLocale();
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   return React.createElement(React.Fragment, null, size && React.createElement("div", {
     "data-testid": "currency-strength-wrapper"
   }, React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","useContext","useLocale","ThemeContext","ChartWithData","Main","_ref","currency","lang","size","createElement","Fragment","className","count"],"sources":["../../../src/CurrencyStrengthWidget/Main.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { ThemeContext } from '@oanda/labs-widget-common';\nimport { ChartWithData } from './ChartsWithData';\nimport { WidgetProps } from './types';\n\nconst Main = ({ currency }: WidgetProps) => {\n  const { lang } = useLocale();\n  const { size } = useContext(ThemeContext);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"currency-strength-wrapper\">\n        <div className=\"lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold\">\n          <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>\n        </div>\n        <ChartWithData currency={currency} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,aAAa,QAAQ,kBAAkB;AAGhD,MAAMC,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAGN,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEO;EAAK,CAAC,GAAGR,UAAU,CAACE,YAAY,CAAC;EAEzC,OACEH,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,QACGF,IAAI,IACLT,KAAA,CAAAU,aAAA;IAAK,eAAY;EAA2B,GAC1CV,KAAA,CAAAU,aAAA;IAAKE,SAAS,EAAC;EAAwE,GACrFZ,KAAA,CAAAU,aAAA,eAAO,GAAGF,IAAI,CAAC,OAAO,CAAC,KAAKA,IAAI,CAAC,QAAQ,EAAE;IAAEK,KAAK,EAAE;EAAE,CAAC,CAAC,GAAU,CAC/D,CAAC,EACNb,KAAA,CAAAU,aAAA,CAACN,aAAa;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACjC,CAEL,CAAC;AAEP,CAAC;AAED,SAASF,IAAI","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["React","useLocale","useLayoutProvider","ChartWithData","Main","_ref","currency","lang","size","createElement","Fragment","className","count"],"sources":["../../../src/CurrencyStrengthWidget/Main.tsx"],"sourcesContent":["import React from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useLayoutProvider } from '@oanda/labs-widget-common';\nimport { ChartWithData } from './ChartsWithData';\nimport { WidgetProps } from './types';\n\nconst Main = ({ currency }: WidgetProps) => {\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"currency-strength-wrapper\">\n        <div className=\"lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold\">\n          <span>{`${lang('daily')} (${lang('minute', { count: 5 })})`}</span>\n        </div>\n        <ChartWithData currency={currency} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAGhD,MAAMC,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAGN,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEO;EAAK,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EAEpC,OACEF,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QACGF,IAAI,IACLR,KAAA,CAAAS,aAAA;IAAK,eAAY;EAA2B,GAC1CT,KAAA,CAAAS,aAAA;IAAKE,SAAS,EAAC;EAAwE,GACrFX,KAAA,CAAAS,aAAA,eAAO,GAAGF,IAAI,CAAC,OAAO,CAAC,KAAKA,IAAI,CAAC,QAAQ,EAAE;IAAEK,KAAK,EAAE;EAAE,CAAC,CAAC,GAAU,CAC/D,CAAC,EACNZ,KAAA,CAAAS,aAAA,CAACN,aAAa;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACjC,CAEL,CAAC;AAEP,CAAC;AAED,SAASF,IAAI","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/components/Chart/Chart.js

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { BarChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent } from 'echarts/components';
 import { useLocale } from '@oanda/mono-i18n';
-import { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';
+import { Theme, useLayoutProvider, getChartTheme } from '@oanda/labs-widget-common';
 import { CHART_HEIGHT } from './constants';
 import { getOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, BarChart, CanvasRenderer]);
@@ -21,7 +21,7 @@ const Chart = _ref => {
   } = useLocale();
   const {
     isDark
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   return React.createElement(ReactEChartsCore, {
     echarts: echarts,
     theme: isDark ? 'dark_theme' : 'light_theme',

package/dist/module/CurrencyStrengthWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useContext","ReactEChartsCore","echarts","BarChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","useLocale","Theme","ThemeContext","getChartTheme","CHART_HEIGHT","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","currency","lang","isDark","createElement","theme","style","height","width","option"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,\n} from 'echarts/components';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './constants';\nimport { getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, currency }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useContext(ThemeContext);\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption({\n        values, currency, lang, isDark,\n      })}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,QAClE,oBAAoB;AAC3B,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,KAAK,EAAEC,YAAY,EAAEC,aAAa,QAAQ,2BAA2B;AAC9E,SACEC,YAAY,QACP,aAAa;AACpB,SAASC,SAAS,QAAQ,aAAa;AAGvCZ,OAAO,CAACa,GAAG,CAAC,CACVV,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdL,QAAQ,EACRC,cAAc,CACf,CAAC;AAEFF,OAAO,CAACc,aAAa,CAAC,YAAY,EAAEJ,aAAa,CAACF,KAAK,CAACO,IAAI,CAAC,CAAC;AAC9Df,OAAO,CAACc,aAAa,CAAC,aAAa,EAAEJ,aAAa,CAACF,KAAK,CAACQ,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EAC7C,MAAM;IAAEG;EAAK,CAAC,GAAGd,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEe;EAAO,CAAC,GAAGxB,UAAU,CAACW,YAAY,CAAC;EAE3C,OACEZ,KAAA,CAAA0B,aAAA,CAACxB,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjBwB,KAAK,EAAEF,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CG,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGf,YAAY,IAAI;MAC3BgB,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEhB,SAAS,CAAC;MAChBO,MAAM;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAC1B,CAAC;EAAE,CACJ,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["React","ReactEChartsCore","echarts","BarChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","useLocale","Theme","useLayoutProvider","getChartTheme","CHART_HEIGHT","getOption","use","registerTheme","Dark","Light","Chart","_ref","values","currency","lang","isDark","createElement","theme","style","height","width","option"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,\n} from 'echarts/components';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { Theme, useLayoutProvider, getChartTheme } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n} from './constants';\nimport { getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  BarChart,\n  CanvasRenderer,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ values, currency }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark } = useLayoutProvider();\n\n  return (\n    <ReactEChartsCore\n      echarts={echarts}\n      theme={isDark ? 'dark_theme' : 'light_theme'}\n      style={{\n        height: `${CHART_HEIGHT}px`,\n        width: '100%',\n      }}\n      option={getOption({\n        values, currency, lang, isDark,\n      })}\n    />\n  );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,gBAAgB,MAAM,4BAA4B;AACzD,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SACEC,mBAAmB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,QAClE,oBAAoB;AAC3B,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,KAAK,EAAEC,iBAAiB,EAAEC,aAAa,QAAQ,2BAA2B;AACnF,SACEC,YAAY,QACP,aAAa;AACpB,SAASC,SAAS,QAAQ,aAAa;AAGvCZ,OAAO,CAACa,GAAG,CAAC,CACVV,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdL,QAAQ,EACRC,cAAc,CACf,CAAC;AAEFF,OAAO,CAACc,aAAa,CAAC,YAAY,EAAEJ,aAAa,CAACF,KAAK,CAACO,IAAI,CAAC,CAAC;AAC9Df,OAAO,CAACc,aAAa,CAAC,aAAa,EAAEJ,aAAa,CAACF,KAAK,CAACQ,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EAC7C,MAAM;IAAEG;EAAK,CAAC,GAAGd,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEe;EAAO,CAAC,GAAGb,iBAAiB,CAAC,CAAC;EAEtC,OACEX,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB;IACfC,OAAO,EAAEA,OAAQ;IACjBwB,KAAK,EAAEF,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7CG,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGf,YAAY,IAAI;MAC3BgB,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAEhB,SAAS,CAAC;MAChBO,MAAM;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAC1B,CAAC;EAAE,CACJ,CAAC;AAEN,CAAC;AAED,SAASL,KAAK","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-strength-widget",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "Labs Currency Strength 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.171",
+    "@oanda/labs-widget-common": "^1.0.173",
     "@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": "f978676624ce706f807cbecc432c67ed809dbf48"
+  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
 }

package/src/CurrencyStrengthWidget/ChartsWithData.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/client';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -7,7 +7,7 @@ import {
   Size,
   Spinner,
   SpinnerSize,
-  ThemeContext,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
 import { getCurrencyStrength } from '../gql/getCurrencyStrength';
@@ -17,7 +17,7 @@ import { sortCurrencies } from './components/Chart/formatters';
 import { WidgetProps } from './types';
 
 const ChartWithData = ({ currency }: WidgetProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { lang } = useLocale();
   const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {

package/src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import {
-  ChartError, ThemeProvider, getLocale, renderComponent,
-} from '@oanda/labs-widget-common';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import { CurrencyStrengthConfig } from './types';
 import { translations } from '../translations';
 import { Main } from './Main';
@@ -17,21 +14,20 @@ const CurrencyStrengthWidget = ({
   });
 
   return (
-    <ThemeProvider theme={theme}>
-      <LocaleProvider locale={getLocale(locale)} translations={translations}>
-        <ApolloProvider client={client}>
-          {isParamError ? (
-            <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-              <ChartError />
-            </div>
-          ) : renderComponent({
-            Component: <Main currency={currency} theme={theme} />,
-            logoLink,
-            linkArea: 'logo',
-          })}
-        </ApolloProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <WidgetProvider
+      locale={locale}
+      translations={translations}
+      client={client}
+      theme={theme}
+    >
+      <WidgetWrapper
+        logoLink={logoLink}
+        linkArea="logo"
+        isParamError={isParamError}
+      >
+        <Main currency={currency} theme={theme} />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/CurrencyStrengthWidget/Main.tsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useLocale } from '@oanda/mono-i18n';
-import { ThemeContext } from '@oanda/labs-widget-common';
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { ChartWithData } from './ChartsWithData';
 import { WidgetProps } from './types';
 
 const Main = ({ currency }: WidgetProps) => {
   const { lang } = useLocale();
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
 
   return (
     <>

package/src/CurrencyStrengthWidget/components/Chart/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { BarChart } from 'echarts/charts';
@@ -7,7 +7,7 @@ import {
   GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,
 } from 'echarts/components';
 import { useLocale } from '@oanda/mono-i18n';
-import { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';
+import { Theme, useLayoutProvider, getChartTheme } from '@oanda/labs-widget-common';
 import {
   CHART_HEIGHT,
 } from './constants';
@@ -28,7 +28,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values, currency }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark } = useContext(ThemeContext);
+  const { isDark } = useLayoutProvider();
 
   return (
     <ReactEChartsCore

package/test/Main.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from '../src/CurrencyStrengthWidget/Main';
 import { mock } from './mocks/responsesMocks';
 
@@ -18,9 +18,9 @@ describe('Main component', () => {
   it('should render tool view', async () => {
     const { findByTestId, getByTestId } = render(
       <MockedProvider mocks={mock}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -32,9 +32,9 @@ describe('Main component', () => {
   it('should render widget view', async () => {
     const { findByTestId, getByTestId } = render(
       <MockedProvider mocks={mock}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main currency="USD" />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );