@oanda/labs-live-rates-table-widget 1.0.38 → 1.0.39

package/CHANGELOG.md

@@ -3,6 +3,166 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.39 (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)
+
+
+
+## 1.0.167 (2024-10-14)
+
+
+
+## 1.0.166 (2024-10-07)
+
+
+
+## 1.0.165 (2024-10-03)
+
+
+
+## 1.0.164 (2024-09-26)
+
+
+
+## 1.0.163 (2024-09-18)
+
+
+
+## 1.0.162 (2024-09-12)
+
+
+
+## 1.0.161 (2024-09-11)
+
+
+
+## 1.0.160 (2024-09-10)
+
+
+
+## 1.0.159 (2024-09-09)
+
+
+
+## 1.0.158 (2024-09-04)
+
+
+
+## 1.0.157 (2024-09-04)
+
+
+
+## 1.0.156 (2024-09-02)
+
+
+
+## 1.0.155 (2024-08-29)
+
+
+
+## 1.0.154 (2024-08-29)
+
+
+
+## 1.0.153 (2024-08-23)
+
+
+
+## 1.0.152 (2024-08-23)
+
+
+
+## 1.0.151 (2024-08-20)
+
+
+
+## 1.0.150 (2024-08-19)
+
+
+
+## 1.0.149 (2024-08-07)
+
+
+
+## 1.0.148 (2024-08-01)
+
+
+
+## 1.0.147 (2024-08-01)
+
+
+
+## 1.0.146 (2024-07-26)
+
+
+
+## 1.0.145 (2024-07-25)
+
+
+
+## 1.0.144 (2024-07-22)
+
+
+
+## 1.0.143 (2024-07-19)
+
+
+
+## 1.0.142 (2024-07-16)
+
+
+
+## 1.0.141 (2024-07-16)
+
+
+
+## 1.0.140 (2024-07-12)
+
+
+
+## 1.0.139 (2024-07-12)
+
+
+
+## 1.0.138 (2024-07-10)
+
+
+
+## 1.0.137 (2024-07-05)
+
+
+
+## 1.0.136 (2024-07-03)
+
+
+
+## 1.0.135 (2024-07-03)
+
+**Note:** Version bump only for package @oanda/labs-live-rates-table-widget
+
+
+
+
+
 ## 1.0.38 (2024-11-29)
 
 

package/dist/main/LiveRatesTableWidget/LiveRatesTableWidget.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.LiveRatesTableWidget = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _client = require("@apollo/client");
-var _monoI18n = require("@oanda/mono-i18n");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _translations = require("../translations");
 var _Main = require("./Main");
@@ -33,32 +32,31 @@ const LiveRatesTableWidget = _ref => {
   });
   const divisionCode = division === _types.Division.Opt ? _types.Division.Ogm : division;
   const dataSource = divisionCode === _types.Division.Ogm ? 'MT5' : 'V20';
-  return _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
-    removePadding: removePadding,
+  return _react.default.createElement(_labsWidgetCommon.WidgetProvider, {
+    locale: locale,
+    translations: _translations.translations,
+    client: client,
     theme: theme,
-    size: view && _config.sizeConfig[view]
-  }, _react.default.createElement(_monoI18n.LocaleProvider, {
-    locale: (0, _labsWidgetCommon.getLocale)(locale),
-    translations: _translations.translations
-  }, _react.default.createElement(_labsWidgetCommon.LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
+    styling: {
+      removePadding,
+      size: view && _config.sizeConfig[view]
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
     }
-  }, _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, {
-      instruments: instruments,
-      division: division,
-      columns: columns
-    }),
-    logoLink,
-    linkArea: 'logo'
-  })))));
+  }, _react.default.createElement(_labsWidgetCommon.WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo",
+    isParamError: isParamError
+  }, _react.default.createElement(_Main.Main, {
+    instruments: instruments,
+    division: division,
+    columns: columns
+  })));
 };
 exports.LiveRatesTableWidget = LiveRatesTableWidget;
 //# sourceMappingURL=LiveRatesTableWidget.js.map

package/dist/main/LiveRatesTableWidget/LiveRatesTableWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveRatesTableWidget.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_translations","_Main","_types","_config","e","__esModule","default","LiveRatesTableWidget","_ref","graphqlUrl","liveRatesUrl","instruments","division","columns","locale","theme","isParamError","removePadding","view","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","ThemeProvider","size","sizeConfig","LocaleProvider","getLocale","translations","LiveRatesProvider","url","options","ApolloProvider","className","ChartError","renderComponent","Component","Main","linkArea","exports"],"sources":["../../../src/LiveRatesTableWidget/LiveRatesTableWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport {\n  ChartError, LiveRatesProvider, ThemeProvider, getLocale,\n  renderComponent,\n} from '@oanda/labs-widget-common';\nimport { translations } from '../translations';\nimport { Main } from './Main';\nimport { Division, LiveRatesTableConfig } from './types';\nimport { sizeConfig } from './config';\n\nconst LiveRatesTableWidget = ({\n  graphqlUrl,\n  liveRatesUrl,\n  instruments,\n  division,\n  columns,\n  locale,\n  theme,\n  isParamError,\n  removePadding,\n  view,\n  logoLink,\n}: LiveRatesTableConfig) => {\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    <ThemeProvider removePadding={removePadding} theme={theme} size={view && sizeConfig[view]}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <LiveRatesProvider\n          url={liveRatesUrl}\n          options={{ divisionCode, dataSource }}\n        >\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            )\n              : (\n                renderComponent({\n                  Component: <Main\n                    instruments={instruments}\n                    division={division}\n                    columns={columns}\n                  />,\n                  logoLink,\n                  linkArea: 'logo',\n                })\n              )}\n          </ApolloProvider>\n        </LiveRatesProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { LiveRatesTableWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAIA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAAsC,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAMG,oBAAoB,GAAGC,IAAA,IAYD;EAAA,IAZE;IAC5BC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,IAAI;IACJC;EACoB,CAAC,GAAAX,IAAA;EACrB,MAAMY,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEb,UAAU;IACfc,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMC,YAAY,GAAGb,QAAQ,KAAKc,eAAQ,CAACC,GAAG,GAAGD,eAAQ,CAACE,GAAG,GAAGhB,QAAQ;EACxE,MAAMiB,UAAU,GAAGJ,YAAY,KAAKC,eAAQ,CAACE,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACElC,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAC/B,iBAAA,CAAAgC,aAAa;IAACd,aAAa,EAAEA,aAAc;IAACF,KAAK,EAAEA,KAAM;IAACiB,IAAI,EAAEd,IAAI,IAAIe,kBAAU,CAACf,IAAI;EAAE,GACxFxB,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAChC,SAAA,CAAAoC,cAAc;IAACpB,MAAM,EAAE,IAAAqB,2BAAS,EAACrB,MAAM,CAAE;IAACsB,YAAY,EAAEA;EAAa,GACpE1C,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAC/B,iBAAA,CAAAsC,iBAAiB;IAChBC,GAAG,EAAE5B,YAAa;IAClB6B,OAAO,EAAE;MAAEd,YAAY;MAAEI;IAAW;EAAE,GAEtCnC,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAACjC,OAAA,CAAA2C,cAAc;IAACpB,MAAM,EAAEA;EAAO,GAC5BJ,YAAY,GACXtB,MAAA,CAAAY,OAAA,CAAAwB,aAAA;IAAKW,SAAS,EAAC;EAAmG,GAChH/C,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAC/B,iBAAA,CAAA2C,UAAU,MAAE,CACV,CAAC,GAGJ,IAAAC,iCAAe,EAAC;IACdC,SAAS,EAAElD,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAC7B,KAAA,CAAA4C,IAAI;MACdlC,WAAW,EAAEA,WAAY;MACzBC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB,CAAC;IACFM,QAAQ;IACR2B,QAAQ,EAAE;EACZ,CAAC,CAES,CACC,CACL,CACH,CAAC;AAEpB,CAAC;AAACC,OAAA,CAAAxC,oBAAA,GAAAA,oBAAA","ignoreList":[]}
+{"version":3,"file":"LiveRatesTableWidget.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_translations","_Main","_types","_config","e","__esModule","default","LiveRatesTableWidget","_ref","graphqlUrl","liveRatesUrl","instruments","division","columns","locale","theme","isParamError","removePadding","view","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","WidgetProvider","translations","styling","size","sizeConfig","liveRates","url","options","WidgetWrapper","linkArea","Main","exports"],"sources":["../../../src/LiveRatesTableWidget/LiveRatesTableWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\n\nimport { translations } from '../translations';\nimport { Main } from './Main';\nimport { Division, LiveRatesTableConfig } from './types';\nimport { sizeConfig } from './config';\n\nconst LiveRatesTableWidget = ({\n  graphqlUrl,\n  liveRatesUrl,\n  instruments,\n  division,\n  columns,\n  locale,\n  theme,\n  isParamError,\n  removePadding,\n  view,\n  logoLink,\n}: LiveRatesTableConfig) => {\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      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n      styling={{\n        removePadding,\n        size: view && sizeConfig[view],\n      }}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n        isParamError={isParamError}\n      >\n        <Main\n          instruments={instruments}\n          division={division}\n          columns={columns}\n        />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { LiveRatesTableWidget };\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;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAAsC,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAMG,oBAAoB,GAAGC,IAAA,IAYD;EAAA,IAZE;IAC5BC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,IAAI;IACJC;EACoB,CAAC,GAAAX,IAAA;EACrB,MAAMY,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEb,UAAU;IACfc,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMC,YAAY,GAAGb,QAAQ,KAAKc,eAAQ,CAACC,GAAG,GAAGD,eAAQ,CAACE,GAAG,GAAGhB,QAAQ;EACxE,MAAMiB,UAAU,GAAGJ,YAAY,KAAKC,eAAQ,CAACE,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACEjC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAC/B,iBAAA,CAAAgC,cAAc;IACbjB,MAAM,EAAEA,MAAO;IACfkB,YAAY,EAAEA,0BAAa;IAC3BZ,MAAM,EAAEA,MAAO;IACfL,KAAK,EAAEA,KAAM;IACbkB,OAAO,EAAE;MACPhB,aAAa;MACbiB,IAAI,EAAEhB,IAAI,IAAIiB,kBAAU,CAACjB,IAAI;IAC/B,CAAE;IACFkB,SAAS,EAAE;MACTC,GAAG,EAAE3B,YAAY;MACjB4B,OAAO,EAAE;QAAEb,YAAY;QAAEI;MAAW;IACtC;EAAE,GAEFlC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAC/B,iBAAA,CAAAwC,aAAa;IACZpB,QAAQ,EAAEA,QAAS;IACnBqB,QAAQ,EAAC,MAAM;IACfxB,YAAY,EAAEA;EAAa,GAE3BrB,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAC7B,KAAA,CAAAwC,IAAI;IACH9B,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA;EAAQ,CAClB,CACY,CACD,CAAC;AAErB,CAAC;AAAC6B,OAAA,CAAAnC,oBAAA,GAAAA,oBAAA","ignoreList":[]}

package/dist/main/LiveRatesTableWidget/Main.js

@@ -21,7 +21,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const {
     target,

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_utils","_components","_constant","_validateInstruments","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","division","columns","DEFAULT_COLUMNS","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","target","setQuery","useLiveRatesQuery","records","setRecords","useState","Array","length","fill","loading","data","error","useQuery","validateInstruments","variables","fetchPolicy","useEffect","getRecords","instrumentsNames","map","_ref2","instrument","showError","createElement","Fragment","className","Table","isError","headerConfig","getHeaderConfig","renderRow","record","index","isScrolled","RowWithData","key","hasBackgroundColor","activeColumns","Cards","isLoading","Tooltip","id","INSTRUMENT_TOOLTIP_ID","exports"],"sources":["../../../src/LiveRatesTableWidget/Main.tsx"],"sourcesContent":["import React, { useEffect, useState, useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Size,\n  Table,\n  ThemeContext,\n  Tooltip,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { getHeaderConfig, getRecords } from './utils';\nimport { DataRecord, MainProps } from './types';\nimport { RowWithData, Cards } from './components';\nimport {\n  DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\n\nconst Main = ({\n  instruments,\n  division,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { target, setQuery } = useLiveRatesQuery();\n  const [records, setRecords] = useState<DataRecord[]>(new Array(instruments.length).fill({}));\n\n  const { loading, data, error } = useQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!loading && data) {\n      setRecords(getRecords(data)!);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  const instrumentsNames = records.map(({ instrument }) => instrument);\n\n  useEffect(() => {\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records, isDesktop]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"live-rates-table-wrapper\" className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {isDesktop ? (\n          <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n            <Table<DataRecord>\n              isError={showError}\n              records={records}\n              headerConfig={getHeaderConfig(columns)}\n              renderRow={(record, index, isScrolled) => (\n                <RowWithData\n                  isScrolled={isScrolled}\n                  loading={loading}\n                  key={`row_${index}`}\n                  record={record}\n                  target={target}\n                  hasBackgroundColor={index % 2 === 0}\n                  activeColumns={columns}\n                  division={division}\n                />\n              )}\n            />\n          </div>\n        ) : (\n          <Cards\n            records={records}\n            division={division}\n            target={target}\n            columns={columns}\n            isError={showError}\n            isLoading={loading}\n          />\n        )}\n        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\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","_client","_labsWidgetCommon","_utils","_components","_constant","_validateInstruments","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","division","columns","DEFAULT_COLUMNS","size","useLayoutProvider","isDesktop","Size","DESKTOP","target","setQuery","useLiveRatesQuery","records","setRecords","useState","Array","length","fill","loading","data","error","useQuery","validateInstruments","variables","fetchPolicy","useEffect","getRecords","instrumentsNames","map","_ref2","instrument","showError","createElement","Fragment","className","Table","isError","headerConfig","getHeaderConfig","renderRow","record","index","isScrolled","RowWithData","key","hasBackgroundColor","activeColumns","Cards","isLoading","Tooltip","id","INSTRUMENT_TOOLTIP_ID","exports"],"sources":["../../../src/LiveRatesTableWidget/Main.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Size,\n  Table,\n  useLayoutProvider,\n  Tooltip,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { getHeaderConfig, getRecords } from './utils';\nimport { DataRecord, MainProps } from './types';\nimport { RowWithData, Cards } from './components';\nimport {\n  DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\n\nconst Main = ({\n  instruments,\n  division,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const { target, setQuery } = useLiveRatesQuery();\n  const [records, setRecords] = useState<DataRecord[]>(new Array(instruments.length).fill({}));\n\n  const { loading, data, error } = useQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!loading && data) {\n      setRecords(getRecords(data)!);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  const instrumentsNames = records.map(({ instrument }) => instrument);\n\n  useEffect(() => {\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records, isDesktop]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"live-rates-table-wrapper\" className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {isDesktop ? (\n          <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n            <Table<DataRecord>\n              isError={showError}\n              records={records}\n              headerConfig={getHeaderConfig(columns)}\n              renderRow={(record, index, isScrolled) => (\n                <RowWithData\n                  isScrolled={isScrolled}\n                  loading={loading}\n                  key={`row_${index}`}\n                  record={record}\n                  target={target}\n                  hasBackgroundColor={index % 2 === 0}\n                  activeColumns={columns}\n                  division={division}\n                />\n              )}\n            />\n          </div>\n        ) : (\n          <Cards\n            records={records}\n            division={division}\n            target={target}\n            columns={columns}\n            isError={showError}\n            isLoading={loading}\n          />\n        )}\n        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/LiveRatesTableWidget/components/RowWithData/RowWithData.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowWithData = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _types = require("../../types");
@@ -12,8 +12,6 @@ var _LineChartWithData = require("../LineChartWithData");
 var _utils = require("../../utils");
 var _constant = require("../../constant");
 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; }
 const RowWithData = _ref => {
   let {
     loading,
@@ -26,7 +24,7 @@ const RowWithData = _ref => {
   } = _ref;
   const {
     isDark
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const {
     updatedRecord,
     error,

package/dist/main/LiveRatesTableWidget/components/RowWithData/RowWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowWithData.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_labsWidgetCommon","_types","_LineChartWithData","_utils","_constant","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RowWithData","_ref","loading","record","hasBackgroundColor","target","activeColumns","division","isScrolled","isDark","useContext","ThemeContext","updatedRecord","error","ref","useRecords","instrument","checkLoading","id","undefined","createElement","TableRow","Fragment","TableCell","type","classNames","classnames","key","ColumnsNames","INSTRUMENT","isLoading","Truncate","maxWidth","text","displayName","tooltipId","INSTRUMENT_TOOLTIP_ID","map","item","SELL","isError","additionalPaddingRight","Price","priceMovement","sellPriceMovement","movementIndicator","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","CHART","className","LineChartWithData","SPREAD","loaderSize","LoaderSize","sm","spread","exports"],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n  TableCell, TableRow, Price, LoaderSize, Truncate, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ColumnsNames, RowWithDataProps } from '../../types';\nimport { LineChartWithData } from '../LineChartWithData';\nimport { useRecords } from '../../utils';\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\n\nconst RowWithData = ({\n  loading,\n  record,\n  hasBackgroundColor,\n  target,\n  activeColumns,\n  division,\n  isScrolled,\n}: RowWithDataProps) => {\n  const { isDark } = useContext(ThemeContext);\n  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <TableRow ref={ref} isScrolled={isScrolled} hasBackgroundColor={hasBackgroundColor}>\n      <>\n        <TableCell\n          type=\"text\"\n          classNames={classnames(\n            'lw-font-bold',\n            {\n              '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled,\n            },\n          )}\n          key={ColumnsNames.INSTRUMENT}\n          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}\n        >\n          <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />\n        </TableCell>\n        {activeColumns.map((item) => {\n          if (item === ColumnsNames.SELL) {\n            return (\n              <TableCell\n                key={ColumnsNames.SELL}\n                isLoading={checkLoading(ColumnsNames.SELL)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.sellPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.BUY) {\n            return (\n              <TableCell\n                key={ColumnsNames.BUY}\n                isLoading={checkLoading(ColumnsNames.BUY)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.DAILY_CHANGE) {\n            return (\n              <TableCell\n                key={ColumnsNames.DAILY_CHANGE}\n                isLoading={checkLoading('dailyPercentChange')}\n                isError={!!error}\n              >\n                <span>{updatedRecord.dailyPercentChange}</span>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.CHART) {\n            return (\n              <td data-testid=\"chart-table-cell\" className=\"lw-relative lw-px-3 lw-py-0 lw-text-right\" key={ColumnsNames.CHART}>\n                <div className=\"lw-flex lw-justify-center\">\n                  <LineChartWithData\n                    record={updatedRecord}\n                    isLoading={checkLoading('instrument')}\n                    division={division}\n                  />\n                </div>\n              </td>\n            );\n          }\n\n          if (item === ColumnsNames.SPREAD) {\n            return (\n              <TableCell\n                key={ColumnsNames.SPREAD}\n                isLoading={checkLoading(ColumnsNames.SPREAD)}\n                isError={!!error}\n                loaderSize={LoaderSize.sm}\n              >\n                <span>{updatedRecord.spread}</span>\n              </TableCell>\n            );\n          }\n          return null;\n        })}\n      </>\n    </TableRow>\n  );\n};\n\nexport { RowWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RowWithData.js","names":["_react","_interopRequireDefault","require","_classnames","_labsWidgetCommon","_types","_LineChartWithData","_utils","_constant","e","__esModule","default","RowWithData","_ref","loading","record","hasBackgroundColor","target","activeColumns","division","isScrolled","isDark","useLayoutProvider","updatedRecord","error","ref","useRecords","instrument","checkLoading","id","undefined","createElement","TableRow","Fragment","TableCell","type","classNames","classnames","key","ColumnsNames","INSTRUMENT","isLoading","Truncate","maxWidth","text","displayName","tooltipId","INSTRUMENT_TOOLTIP_ID","map","item","SELL","isError","additionalPaddingRight","Price","priceMovement","sellPriceMovement","movementIndicator","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","CHART","className","LineChartWithData","SPREAD","loaderSize","LoaderSize","sm","spread","exports"],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  TableCell, TableRow, Price, LoaderSize, Truncate, useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { ColumnsNames, RowWithDataProps } from '../../types';\nimport { LineChartWithData } from '../LineChartWithData';\nimport { useRecords } from '../../utils';\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\n\nconst RowWithData = ({\n  loading,\n  record,\n  hasBackgroundColor,\n  target,\n  activeColumns,\n  division,\n  isScrolled,\n}: RowWithDataProps) => {\n  const { isDark } = useLayoutProvider();\n  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <TableRow ref={ref} isScrolled={isScrolled} hasBackgroundColor={hasBackgroundColor}>\n      <>\n        <TableCell\n          type=\"text\"\n          classNames={classnames(\n            'lw-font-bold',\n            {\n              '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled,\n            },\n          )}\n          key={ColumnsNames.INSTRUMENT}\n          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}\n        >\n          <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />\n        </TableCell>\n        {activeColumns.map((item) => {\n          if (item === ColumnsNames.SELL) {\n            return (\n              <TableCell\n                key={ColumnsNames.SELL}\n                isLoading={checkLoading(ColumnsNames.SELL)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.sellPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.BUY) {\n            return (\n              <TableCell\n                key={ColumnsNames.BUY}\n                isLoading={checkLoading(ColumnsNames.BUY)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.DAILY_CHANGE) {\n            return (\n              <TableCell\n                key={ColumnsNames.DAILY_CHANGE}\n                isLoading={checkLoading('dailyPercentChange')}\n                isError={!!error}\n              >\n                <span>{updatedRecord.dailyPercentChange}</span>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.CHART) {\n            return (\n              <td data-testid=\"chart-table-cell\" className=\"lw-relative lw-px-3 lw-py-0 lw-text-right\" key={ColumnsNames.CHART}>\n                <div className=\"lw-flex lw-justify-center\">\n                  <LineChartWithData\n                    record={updatedRecord}\n                    isLoading={checkLoading('instrument')}\n                    division={division}\n                  />\n                </div>\n              </td>\n            );\n          }\n\n          if (item === ColumnsNames.SPREAD) {\n            return (\n              <TableCell\n                key={ColumnsNames.SPREAD}\n                isLoading={checkLoading(ColumnsNames.SPREAD)}\n                isError={!!error}\n                loaderSize={LoaderSize.sm}\n              >\n                <span>{updatedRecord.spread}</span>\n              </TableCell>\n            );\n          }\n          return null;\n        })}\n      </>\n    </TableRow>\n  );\n};\n\nexport { RowWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/LiveRatesTableWidget.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import { ChartError, LiveRatesProvider, 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';
 import { Division } from './types';
@@ -26,32 +25,31 @@ const LiveRatesTableWidget = _ref => {
   });
   const divisionCode = division === Division.Opt ? Division.Ogm : division;
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
-  return React.createElement(ThemeProvider, {
-    removePadding: removePadding,
+  return React.createElement(WidgetProvider, {
+    locale: locale,
+    translations: translations,
+    client: client,
     theme: theme,
-    size: view && sizeConfig[view]
-  }, React.createElement(LocaleProvider, {
-    locale: getLocale(locale),
-    translations: translations
-  }, React.createElement(LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
+    styling: {
+      removePadding,
+      size: view && sizeConfig[view]
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
     }
-  }, 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, {
-      instruments: instruments,
-      division: division,
-      columns: columns
-    }),
-    logoLink,
-    linkArea: 'logo'
-  })))));
+  }, React.createElement(WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo",
+    isParamError: isParamError
+  }, React.createElement(Main, {
+    instruments: instruments,
+    division: division,
+    columns: columns
+  })));
 };
 export { LiveRatesTableWidget };
 //# sourceMappingURL=LiveRatesTableWidget.js.map

package/dist/module/LiveRatesTableWidget/LiveRatesTableWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveRatesTableWidget.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","LocaleProvider","ChartError","LiveRatesProvider","ThemeProvider","getLocale","renderComponent","translations","Main","Division","sizeConfig","LiveRatesTableWidget","_ref","graphqlUrl","liveRatesUrl","instruments","division","columns","locale","theme","isParamError","removePadding","view","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","size","url","options","className","Component","linkArea"],"sources":["../../../src/LiveRatesTableWidget/LiveRatesTableWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport {\n  ChartError, LiveRatesProvider, ThemeProvider, getLocale,\n  renderComponent,\n} from '@oanda/labs-widget-common';\nimport { translations } from '../translations';\nimport { Main } from './Main';\nimport { Division, LiveRatesTableConfig } from './types';\nimport { sizeConfig } from './config';\n\nconst LiveRatesTableWidget = ({\n  graphqlUrl,\n  liveRatesUrl,\n  instruments,\n  division,\n  columns,\n  locale,\n  theme,\n  isParamError,\n  removePadding,\n  view,\n  logoLink,\n}: LiveRatesTableConfig) => {\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    <ThemeProvider removePadding={removePadding} theme={theme} size={view && sizeConfig[view]}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <LiveRatesProvider\n          url={liveRatesUrl}\n          options={{ divisionCode, dataSource }}\n        >\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            )\n              : (\n                renderComponent({\n                  Component: <Main\n                    instruments={instruments}\n                    division={division}\n                    columns={columns}\n                  />,\n                  logoLink,\n                  linkArea: 'logo',\n                })\n              )}\n          </ApolloProvider>\n        </LiveRatesProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { LiveRatesTableWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SACEC,UAAU,EAAEC,iBAAiB,EAAEC,aAAa,EAAEC,SAAS,EACvDC,eAAe,QACV,2BAA2B;AAClC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,QAAQ,QAA8B,SAAS;AACxD,SAASC,UAAU,QAAQ,UAAU;AAErC,MAAMC,oBAAoB,GAAGC,IAAA,IAYD;EAAA,IAZE;IAC5BC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,IAAI;IACJC;EACoB,CAAC,GAAAX,IAAA;EACrB,MAAMY,MAAM,GAAG,IAAI1B,YAAY,CAAC;IAC9B2B,GAAG,EAAEZ,UAAU;IACfa,KAAK,EAAE,IAAI3B,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAM4B,YAAY,GAAGX,QAAQ,KAAKP,QAAQ,CAACmB,GAAG,GAAGnB,QAAQ,CAACoB,GAAG,GAAGb,QAAQ;EACxE,MAAMc,UAAU,GAAGH,YAAY,KAAKlB,QAAQ,CAACoB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACEhC,KAAA,CAAAkC,aAAA,CAAC3B,aAAa;IAACiB,aAAa,EAAEA,aAAc;IAACF,KAAK,EAAEA,KAAM;IAACa,IAAI,EAAEV,IAAI,IAAIZ,UAAU,CAACY,IAAI;EAAE,GACxFzB,KAAA,CAAAkC,aAAA,CAAC9B,cAAc;IAACiB,MAAM,EAAEb,SAAS,CAACa,MAAM,CAAE;IAACX,YAAY,EAAEA;EAAa,GACpEV,KAAA,CAAAkC,aAAA,CAAC5B,iBAAiB;IAChB8B,GAAG,EAAEnB,YAAa;IAClBoB,OAAO,EAAE;MAAEP,YAAY;MAAEG;IAAW;EAAE,GAEtCjC,KAAA,CAAAkC,aAAA,CAAC/B,cAAc;IAACwB,MAAM,EAAEA;EAAO,GAC5BJ,YAAY,GACXvB,KAAA,CAAAkC,aAAA;IAAKI,SAAS,EAAC;EAAmG,GAChHtC,KAAA,CAAAkC,aAAA,CAAC7B,UAAU,MAAE,CACV,CAAC,GAGJI,eAAe,CAAC;IACd8B,SAAS,EAAEvC,KAAA,CAAAkC,aAAA,CAACvB,IAAI;MACdO,WAAW,EAAEA,WAAY;MACzBC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB,CAAC;IACFM,QAAQ;IACRc,QAAQ,EAAE;EACZ,CAAC,CAES,CACC,CACL,CACH,CAAC;AAEpB,CAAC;AAED,SAAS1B,oBAAoB","ignoreList":[]}
+{"version":3,"file":"LiveRatesTableWidget.js","names":["React","ApolloClient","InMemoryCache","WidgetProvider","WidgetWrapper","translations","Main","Division","sizeConfig","LiveRatesTableWidget","_ref","graphqlUrl","liveRatesUrl","instruments","division","columns","locale","theme","isParamError","removePadding","view","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","styling","size","liveRates","url","options","linkArea"],"sources":["../../../src/LiveRatesTableWidget/LiveRatesTableWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\n\nimport { translations } from '../translations';\nimport { Main } from './Main';\nimport { Division, LiveRatesTableConfig } from './types';\nimport { sizeConfig } from './config';\n\nconst LiveRatesTableWidget = ({\n  graphqlUrl,\n  liveRatesUrl,\n  instruments,\n  division,\n  columns,\n  locale,\n  theme,\n  isParamError,\n  removePadding,\n  view,\n  logoLink,\n}: LiveRatesTableConfig) => {\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      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n      styling={{\n        removePadding,\n        size: view && sizeConfig[view],\n      }}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n        isParamError={isParamError}\n      >\n        <Main\n          instruments={instruments}\n          division={division}\n          columns={columns}\n        />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { LiveRatesTableWidget };\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;AAC7B,SAASC,QAAQ,QAA8B,SAAS;AACxD,SAASC,UAAU,QAAQ,UAAU;AAErC,MAAMC,oBAAoB,GAAGC,IAAA,IAYD;EAAA,IAZE;IAC5BC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC,YAAY;IACZC,aAAa;IACbC,IAAI;IACJC;EACoB,CAAC,GAAAX,IAAA;EACrB,MAAMY,MAAM,GAAG,IAAIrB,YAAY,CAAC;IAC9BsB,GAAG,EAAEZ,UAAU;IACfa,KAAK,EAAE,IAAItB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMuB,YAAY,GAAGX,QAAQ,KAAKP,QAAQ,CAACmB,GAAG,GAAGnB,QAAQ,CAACoB,GAAG,GAAGb,QAAQ;EACxE,MAAMc,UAAU,GAAGH,YAAY,KAAKlB,QAAQ,CAACoB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACE3B,KAAA,CAAA6B,aAAA,CAAC1B,cAAc;IACba,MAAM,EAAEA,MAAO;IACfX,YAAY,EAAEA,YAAa;IAC3BiB,MAAM,EAAEA,MAAO;IACfL,KAAK,EAAEA,KAAM;IACba,OAAO,EAAE;MACPX,aAAa;MACbY,IAAI,EAAEX,IAAI,IAAIZ,UAAU,CAACY,IAAI;IAC/B,CAAE;IACFY,SAAS,EAAE;MACTC,GAAG,EAAErB,YAAY;MACjBsB,OAAO,EAAE;QAAET,YAAY;QAAEG;MAAW;IACtC;EAAE,GAEF5B,KAAA,CAAA6B,aAAA,CAACzB,aAAa;IACZiB,QAAQ,EAAEA,QAAS;IACnBc,QAAQ,EAAC,MAAM;IACfjB,YAAY,EAAEA;EAAa,GAE3BlB,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IACHO,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA;EAAQ,CAClB,CACY,CACD,CAAC;AAErB,CAAC;AAED,SAASN,oBAAoB","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/Main.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { Size, Table, ThemeContext, Tooltip, useLiveRatesQuery } from '@oanda/labs-widget-common';
+import { Size, Table, useLayoutProvider, Tooltip, useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { getHeaderConfig, getRecords } from './utils';
 import { RowWithData, Cards } from './components';
 import { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';
@@ -13,7 +13,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const {
     target,

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","useEffect","useState","useContext","useQuery","Size","Table","ThemeContext","Tooltip","useLiveRatesQuery","getHeaderConfig","getRecords","RowWithData","Cards","DEFAULT_COLUMNS","INSTRUMENT_TOOLTIP_ID","validateInstruments","Main","_ref","instruments","division","columns","size","isDesktop","DESKTOP","target","setQuery","records","setRecords","Array","length","fill","loading","data","error","variables","fetchPolicy","instrumentsNames","map","_ref2","instrument","showError","createElement","Fragment","className","isError","headerConfig","renderRow","record","index","isScrolled","key","hasBackgroundColor","activeColumns","isLoading","id"],"sources":["../../../src/LiveRatesTableWidget/Main.tsx"],"sourcesContent":["import React, { useEffect, useState, useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Size,\n  Table,\n  ThemeContext,\n  Tooltip,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { getHeaderConfig, getRecords } from './utils';\nimport { DataRecord, MainProps } from './types';\nimport { RowWithData, Cards } from './components';\nimport {\n  DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\n\nconst Main = ({\n  instruments,\n  division,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { target, setQuery } = useLiveRatesQuery();\n  const [records, setRecords] = useState<DataRecord[]>(new Array(instruments.length).fill({}));\n\n  const { loading, data, error } = useQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!loading && data) {\n      setRecords(getRecords(data)!);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  const instrumentsNames = records.map(({ instrument }) => instrument);\n\n  useEffect(() => {\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records, isDesktop]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"live-rates-table-wrapper\" className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {isDesktop ? (\n          <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n            <Table<DataRecord>\n              isError={showError}\n              records={records}\n              headerConfig={getHeaderConfig(columns)}\n              renderRow={(record, index, isScrolled) => (\n                <RowWithData\n                  isScrolled={isScrolled}\n                  loading={loading}\n                  key={`row_${index}`}\n                  record={record}\n                  target={target}\n                  hasBackgroundColor={index % 2 === 0}\n                  activeColumns={columns}\n                  division={division}\n                />\n              )}\n            />\n          </div>\n        ) : (\n          <Cards\n            records={records}\n            division={division}\n            target={target}\n            columns={columns}\n            isError={showError}\n            isLoading={loading}\n          />\n        )}\n        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["React","useEffect","useState","useQuery","Size","Table","useLayoutProvider","Tooltip","useLiveRatesQuery","getHeaderConfig","getRecords","RowWithData","Cards","DEFAULT_COLUMNS","INSTRUMENT_TOOLTIP_ID","validateInstruments","Main","_ref","instruments","division","columns","size","isDesktop","DESKTOP","target","setQuery","records","setRecords","Array","length","fill","loading","data","error","variables","fetchPolicy","instrumentsNames","map","_ref2","instrument","showError","createElement","Fragment","className","isError","headerConfig","renderRow","record","index","isScrolled","key","hasBackgroundColor","activeColumns","isLoading","id"],"sources":["../../../src/LiveRatesTableWidget/Main.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Size,\n  Table,\n  useLayoutProvider,\n  Tooltip,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { getHeaderConfig, getRecords } from './utils';\nimport { DataRecord, MainProps } from './types';\nimport { RowWithData, Cards } from './components';\nimport {\n  DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\n\nconst Main = ({\n  instruments,\n  division,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n  const { target, setQuery } = useLiveRatesQuery();\n  const [records, setRecords] = useState<DataRecord[]>(new Array(instruments.length).fill({}));\n\n  const { loading, data, error } = useQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!loading && data) {\n      setRecords(getRecords(data)!);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  const instrumentsNames = records.map(({ instrument }) => instrument);\n\n  useEffect(() => {\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records, isDesktop]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"live-rates-table-wrapper\" className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {isDesktop ? (\n          <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n            <Table<DataRecord>\n              isError={showError}\n              records={records}\n              headerConfig={getHeaderConfig(columns)}\n              renderRow={(record, index, isScrolled) => (\n                <RowWithData\n                  isScrolled={isScrolled}\n                  loading={loading}\n                  key={`row_${index}`}\n                  record={record}\n                  target={target}\n                  hasBackgroundColor={index % 2 === 0}\n                  activeColumns={columns}\n                  division={division}\n                />\n              )}\n            />\n          </div>\n        ) : (\n          <Cards\n            records={records}\n            division={division}\n            target={target}\n            columns={columns}\n            isError={showError}\n            isLoading={loading}\n          />\n        )}\n        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/RowWithData/RowWithData.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { TableCell, TableRow, Price, LoaderSize, Truncate, ThemeContext } from '@oanda/labs-widget-common';
+import { TableCell, TableRow, Price, LoaderSize, Truncate, useLayoutProvider } from '@oanda/labs-widget-common';
 import { ColumnsNames } from '../../types';
 import { LineChartWithData } from '../LineChartWithData';
 import { useRecords } from '../../utils';
@@ -17,7 +17,7 @@ const RowWithData = _ref => {
   } = _ref;
   const {
     isDark
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const {
     updatedRecord,
     error,

package/dist/module/LiveRatesTableWidget/components/RowWithData/RowWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowWithData.js","names":["React","useContext","classnames","TableCell","TableRow","Price","LoaderSize","Truncate","ThemeContext","ColumnsNames","LineChartWithData","useRecords","INSTRUMENT_TOOLTIP_ID","RowWithData","_ref","loading","record","hasBackgroundColor","target","activeColumns","division","isScrolled","isDark","updatedRecord","error","ref","instrument","checkLoading","id","undefined","createElement","Fragment","type","classNames","key","INSTRUMENT","isLoading","maxWidth","text","displayName","tooltipId","map","item","SELL","isError","additionalPaddingRight","priceMovement","sellPriceMovement","movementIndicator","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","CHART","className","SPREAD","loaderSize","sm","spread"],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n  TableCell, TableRow, Price, LoaderSize, Truncate, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ColumnsNames, RowWithDataProps } from '../../types';\nimport { LineChartWithData } from '../LineChartWithData';\nimport { useRecords } from '../../utils';\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\n\nconst RowWithData = ({\n  loading,\n  record,\n  hasBackgroundColor,\n  target,\n  activeColumns,\n  division,\n  isScrolled,\n}: RowWithDataProps) => {\n  const { isDark } = useContext(ThemeContext);\n  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <TableRow ref={ref} isScrolled={isScrolled} hasBackgroundColor={hasBackgroundColor}>\n      <>\n        <TableCell\n          type=\"text\"\n          classNames={classnames(\n            'lw-font-bold',\n            {\n              '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled,\n            },\n          )}\n          key={ColumnsNames.INSTRUMENT}\n          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}\n        >\n          <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />\n        </TableCell>\n        {activeColumns.map((item) => {\n          if (item === ColumnsNames.SELL) {\n            return (\n              <TableCell\n                key={ColumnsNames.SELL}\n                isLoading={checkLoading(ColumnsNames.SELL)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.sellPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.BUY) {\n            return (\n              <TableCell\n                key={ColumnsNames.BUY}\n                isLoading={checkLoading(ColumnsNames.BUY)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.DAILY_CHANGE) {\n            return (\n              <TableCell\n                key={ColumnsNames.DAILY_CHANGE}\n                isLoading={checkLoading('dailyPercentChange')}\n                isError={!!error}\n              >\n                <span>{updatedRecord.dailyPercentChange}</span>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.CHART) {\n            return (\n              <td data-testid=\"chart-table-cell\" className=\"lw-relative lw-px-3 lw-py-0 lw-text-right\" key={ColumnsNames.CHART}>\n                <div className=\"lw-flex lw-justify-center\">\n                  <LineChartWithData\n                    record={updatedRecord}\n                    isLoading={checkLoading('instrument')}\n                    division={division}\n                  />\n                </div>\n              </td>\n            );\n          }\n\n          if (item === ColumnsNames.SPREAD) {\n            return (\n              <TableCell\n                key={ColumnsNames.SPREAD}\n                isLoading={checkLoading(ColumnsNames.SPREAD)}\n                isError={!!error}\n                loaderSize={LoaderSize.sm}\n              >\n                <span>{updatedRecord.spread}</span>\n              </TableCell>\n            );\n          }\n          return null;\n        })}\n      </>\n    </TableRow>\n  );\n};\n\nexport { RowWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RowWithData.js","names":["React","classnames","TableCell","TableRow","Price","LoaderSize","Truncate","useLayoutProvider","ColumnsNames","LineChartWithData","useRecords","INSTRUMENT_TOOLTIP_ID","RowWithData","_ref","loading","record","hasBackgroundColor","target","activeColumns","division","isScrolled","isDark","updatedRecord","error","ref","instrument","checkLoading","id","undefined","createElement","Fragment","type","classNames","key","INSTRUMENT","isLoading","maxWidth","text","displayName","tooltipId","map","item","SELL","isError","additionalPaddingRight","priceMovement","sellPriceMovement","movementIndicator","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","CHART","className","SPREAD","loaderSize","sm","spread"],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  TableCell, TableRow, Price, LoaderSize, Truncate, useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { ColumnsNames, RowWithDataProps } from '../../types';\nimport { LineChartWithData } from '../LineChartWithData';\nimport { useRecords } from '../../utils';\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\n\nconst RowWithData = ({\n  loading,\n  record,\n  hasBackgroundColor,\n  target,\n  activeColumns,\n  division,\n  isScrolled,\n}: RowWithDataProps) => {\n  const { isDark } = useLayoutProvider();\n  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);\n\n  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <TableRow ref={ref} isScrolled={isScrolled} hasBackgroundColor={hasBackgroundColor}>\n      <>\n        <TableCell\n          type=\"text\"\n          classNames={classnames(\n            'lw-font-bold',\n            {\n              '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled,\n            },\n          )}\n          key={ColumnsNames.INSTRUMENT}\n          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}\n        >\n          <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />\n        </TableCell>\n        {activeColumns.map((item) => {\n          if (item === ColumnsNames.SELL) {\n            return (\n              <TableCell\n                key={ColumnsNames.SELL}\n                isLoading={checkLoading(ColumnsNames.SELL)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.sellPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.BUY) {\n            return (\n              <TableCell\n                key={ColumnsNames.BUY}\n                isLoading={checkLoading(ColumnsNames.BUY)}\n                isError={!!error}\n                additionalPaddingRight\n              >\n                <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator=\"arrow\">\n                  <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.DAILY_CHANGE) {\n            return (\n              <TableCell\n                key={ColumnsNames.DAILY_CHANGE}\n                isLoading={checkLoading('dailyPercentChange')}\n                isError={!!error}\n              >\n                <span>{updatedRecord.dailyPercentChange}</span>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.CHART) {\n            return (\n              <td data-testid=\"chart-table-cell\" className=\"lw-relative lw-px-3 lw-py-0 lw-text-right\" key={ColumnsNames.CHART}>\n                <div className=\"lw-flex lw-justify-center\">\n                  <LineChartWithData\n                    record={updatedRecord}\n                    isLoading={checkLoading('instrument')}\n                    division={division}\n                  />\n                </div>\n              </td>\n            );\n          }\n\n          if (item === ColumnsNames.SPREAD) {\n            return (\n              <TableCell\n                key={ColumnsNames.SPREAD}\n                isLoading={checkLoading(ColumnsNames.SPREAD)}\n                isError={!!error}\n                loaderSize={LoaderSize.sm}\n              >\n                <span>{updatedRecord.spread}</span>\n              </TableCell>\n            );\n          }\n          return null;\n        })}\n      </>\n    </TableRow>\n  );\n};\n\nexport { RowWithData };\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-live-rates-table-widget",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "Labs Live Rates Table Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.172",
+    "@oanda/labs-widget-common": "^1.0.173",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
+  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
 }

package/src/LiveRatesTableWidget/LiveRatesTableWidget.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import {
-  ChartError, LiveRatesProvider, 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';
 import { Division, LiveRatesTableConfig } from './types';
@@ -32,33 +29,32 @@ const LiveRatesTableWidget = ({
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
   return (
-    <ThemeProvider removePadding={removePadding} theme={theme} size={view && sizeConfig[view]}>
-      <LocaleProvider locale={getLocale(locale)} translations={translations}>
-        <LiveRatesProvider
-          url={liveRatesUrl}
-          options={{ divisionCode, dataSource }}
-        >
-          <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
-                    instruments={instruments}
-                    division={division}
-                    columns={columns}
-                  />,
-                  logoLink,
-                  linkArea: 'logo',
-                })
-              )}
-          </ApolloProvider>
-        </LiveRatesProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <WidgetProvider
+      locale={locale}
+      translations={translations}
+      client={client}
+      theme={theme}
+      styling={{
+        removePadding,
+        size: view && sizeConfig[view],
+      }}
+      liveRates={{
+        url: liveRatesUrl,
+        options: { divisionCode, dataSource },
+      }}
+    >
+      <WidgetWrapper
+        logoLink={logoLink}
+        linkArea="logo"
+        isParamError={isParamError}
+      >
+        <Main
+          instruments={instruments}
+          division={division}
+          columns={columns}
+        />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/LiveRatesTableWidget/Main.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 import {
   Size,
   Table,
-  ThemeContext,
+  useLayoutProvider,
   Tooltip,
   useLiveRatesQuery,
 } from '@oanda/labs-widget-common';
@@ -21,7 +21,7 @@ const Main = ({
   division,
   columns = DEFAULT_COLUMNS,
 }: MainProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { target, setQuery } = useLiveRatesQuery();
   const [records, setRecords] = useState<DataRecord[]>(new Array(instruments.length).fill({}));

package/src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import {
-  TableCell, TableRow, Price, LoaderSize, Truncate, ThemeContext,
+  TableCell, TableRow, Price, LoaderSize, Truncate, useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { ColumnsNames, RowWithDataProps } from '../../types';
 import { LineChartWithData } from '../LineChartWithData';
@@ -17,7 +17,7 @@ const RowWithData = ({
   division,
   isScrolled,
 }: RowWithDataProps) => {
-  const { isDark } = useContext(ThemeContext);
+  const { isDark } = useLayoutProvider();
   const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);
 
   const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);

package/test/CardWithData.test.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { CardWithData } from '../src/LiveRatesTableWidget/components/CardWithData';
 import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
 import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
@@ -54,13 +55,15 @@ describe('CardWithData component', () => {
   it('should render card', () => {
     const { getByTestId, getAllByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <CardWithData
-          record={record}
-          index={0}
-          activeColumns={columns}
-          division={Division.Oc}
-          target={null}
-        />
+        <MockLayoutProvider>
+          <CardWithData
+            record={record}
+            index={0}
+            activeColumns={columns}
+            division={Division.Oc}
+            target={null}
+          />
+        </MockLayoutProvider>
       </MockedProvider>,
     );
     expect(getByTestId('card')).toBeInTheDocument();

package/test/Cards.test.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Cards } from '../src/LiveRatesTableWidget/components';
 import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
 import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
@@ -87,15 +88,17 @@ describe('Cards component', () => {
   it('should render card', () => {
     const { getAllByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <Cards
-          target={null}
-          records={records}
-          columns={columns}
-          emptyCardsCount={2}
-          isError={false}
-          isLoading={false}
-          division={Division.Oc}
-        />
+        <MockLayoutProvider>
+          <Cards
+            target={null}
+            records={records}
+            columns={columns}
+            emptyCardsCount={2}
+            isError={false}
+            isLoading={false}
+            division={Division.Oc}
+          />
+        </MockLayoutProvider>
       </MockedProvider>,
     );
     expect(getAllByTestId('card').length).toEqual(2);
@@ -105,15 +108,17 @@ describe('Cards component', () => {
   it('should render error', () => {
     const { getAllByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <Cards
-          target={null}
-          records={records}
-          columns={columns}
-          emptyCardsCount={2}
-          isError
-          isLoading={false}
-          division={Division.Oc}
-        />
+        <MockLayoutProvider>
+          <Cards
+            target={null}
+            records={records}
+            columns={columns}
+            emptyCardsCount={2}
+            isError
+            isLoading={false}
+            division={Division.Oc}
+          />
+        </MockLayoutProvider>
       </MockedProvider>,
     );
     expect(getAllByTestId('card').length).toEqual(1);

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 { LiveRatesProvider, MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from '../src/LiveRatesTableWidget/Main';
 import { Division } from '../src/gql/types/graphql';
 import { widgetMocks } from './mocks';
@@ -13,12 +13,14 @@ describe('Main component', () => {
   it('should render table component', async () => {
     const { findByTestId, findAllByTestId } = render(
       <MockedProvider mocks={widgetMocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main
-            division={Division.Oc}
-            instruments={['EUR_USD', 'GBP_USD']}
-          />
-        </ThemeContext.Provider>
+        <LiveRatesProvider url="oanda.com">
+          <MockLayoutProvider>
+            <Main
+              division={Division.Oc}
+              instruments={['EUR_USD', 'GBP_USD']}
+            />
+          </MockLayoutProvider>
+        </LiveRatesProvider>
       </MockedProvider>,
     );
 

package/test/RowWithData.test.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { RowWithData } from '../src/LiveRatesTableWidget/components/RowWithData';
 import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
 import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
@@ -55,18 +56,20 @@ describe('RowWithData component', () => {
   it('should render table row', async () => {
     const { getByTestId, getAllByTestId, findByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <table>
-          <tbody>
-            <RowWithData
-              loading={false}
-              division={Division.Oc}
-              record={record}
-              hasBackgroundColor
-              activeColumns={columns}
-              target={null}
-            />
-          </tbody>
-        </table>
+        <MockLayoutProvider>
+          <table>
+            <tbody>
+              <RowWithData
+                loading={false}
+                division={Division.Oc}
+                record={record}
+                hasBackgroundColor
+                activeColumns={columns}
+                target={null}
+              />
+            </tbody>
+          </table>
+        </MockLayoutProvider>
       </MockedProvider>,
     );