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

package/dist/main/translations/translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"translations.js","names":["defaultTranslations","exports","bearish","bullish","buy","buy_orders","buy_price","daily_change","data_unavailable","hot","instrument","pagination_entries_range","popular","sell","sell_price","sentiment","spread","volatile"],"sources":["../../../src/translations/translations.ts"],"sourcesContent":["export const defaultTranslations = {\n  '24h_chart': '24h Chart',\n  bearish: 'Bearish',\n  bullish: 'Bullish',\n  buy: 'Buy',\n  buy_orders: 'Buy Orders',\n  buy_price: 'Buy Price',\n  daily_change: 'Daily Change (%)',\n  data_unavailable: 'Data unavailable',\n  hot: 'Hot',\n  instrument: 'Instrument',\n  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',\n  popular: 'Popular',\n  sell: 'Sell',\n  sell_price: 'Sell Price',\n  sentiment: 'Sentiment',\n  spread: 'Spread',\n  volatile: 'Volatile',\n};\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EACjC,WAAW,EAAE,WAAW;EACxBE,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,GAAG,EAAE,KAAK;EACVC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,YAAY,EAAE,kBAAkB;EAChCC,gBAAgB,EAAE,kBAAkB;EACpCC,GAAG,EAAE,KAAK;EACVC,UAAU,EAAE,YAAY;EACxBC,wBAAwB,EAAE,iEAAiE;EAC3FC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE;AACZ,CAAC","ignoreList":[]}
+{"version":3,"file":"translations.js","names":["defaultTranslations","exports","bearish","bullish","buy","buy_orders","buy_price","daily_change","data_unavailable","hot","instrument","pagination_entries_range","popular","sell","sell_price","sentiment","spread","volatile"],"sources":["../../../src/translations/translations.ts"],"sourcesContent":["export const defaultTranslations = {\n  '24h_chart': '24h Chart',\n  bearish: 'Bearish',\n  bullish: 'Bullish',\n  buy: 'Buy',\n  buy_orders: 'Buy Orders',\n  buy_price: 'Buy Price',\n  daily_change: 'Daily Change (%)',\n  data_unavailable: 'Data unavailable',\n  hot: 'Hot',\n  instrument: 'Instrument',\n  pagination_entries_range:\n    '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',\n  popular: 'Popular',\n  sell: 'Sell',\n  sell_price: 'Sell Price',\n  sentiment: 'Sentiment',\n  spread: 'Spread',\n  volatile: 'Volatile',\n};\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EACjC,WAAW,EAAE,WAAW;EACxBE,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,GAAG,EAAE,KAAK;EACVC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,YAAY,EAAE,kBAAkB;EAChCC,gBAAgB,EAAE,kBAAkB;EACpCC,GAAG,EAAE,KAAK;EACVC,UAAU,EAAE,YAAY;EACxBC,wBAAwB,EACtB,iEAAiE;EACnEC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE;AACZ,CAAC","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/LiveRatesTableWidget.js

@@ -1,11 +1,10 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 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 { translations } from '../translations';
+import { sizeConfig } from './config';
 import { Main } from './Main';
 import { Division } from './types';
-import { sizeConfig } from './config';
 const LiveRatesTableWidget = _ref => {
   let {
     graphqlUrl,
@@ -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, {
+    client: client,
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
+    },
+    locale: locale,
+    styling: {
+      removePadding,
+      size: view && sizeConfig[view]
+    },
     theme: theme,
-    size: view && sizeConfig[view]
-  }, React.createElement(LocaleProvider, {
-    locale: getLocale(locale),
     translations: translations
-  }, React.createElement(LiveRatesProvider, {
-    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, {
+    isParamError: isParamError,
+    linkArea: "logo",
+    logoLink: logoLink
+  }, React.createElement(Main, {
+    columns: columns,
+    division: division,
+    instruments: instruments
+  })));
 };
 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":["ApolloClient","InMemoryCache","WidgetProvider","WidgetWrapper","React","translations","sizeConfig","Main","Division","LiveRatesTableWidget","_ref","graphqlUrl","liveRatesUrl","instruments","division","columns","locale","theme","isParamError","removePadding","view","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","liveRates","url","options","styling","size","linkArea"],"sources":["../../../src/LiveRatesTableWidget/LiveRatesTableWidget.tsx"],"sourcesContent":["import { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { translations } from '../translations';\nimport { sizeConfig } from './config';\nimport { Main } from './Main';\nimport type { LiveRatesTableConfig } from './types';\nimport { Division } from './types';\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      client={client}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n      locale={locale}\n      styling={{\n        removePadding,\n        size: view && sizeConfig[view],\n      }}\n      theme={theme}\n      translations={translations}\n    >\n      <WidgetWrapper\n        isParamError={isParamError}\n        linkArea=\"logo\"\n        logoLink={logoLink}\n      >\n        <Main columns={columns} division={division} instruments={instruments} />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { LiveRatesTableWidget };\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,aAAa,QAAQ,gBAAgB;AAC5D,SAASC,cAAc,EAAEC,aAAa,QAAQ,2BAA2B;AACzE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,QAAQ,QAAQ,SAAS;AAElC,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,IAAItB,YAAY,CAAC;IAC9BuB,GAAG,EAAEZ,UAAU;IACfa,KAAK,EAAE,IAAIvB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMwB,YAAY,GAAGX,QAAQ,KAAKN,QAAQ,CAACkB,GAAG,GAAGlB,QAAQ,CAACmB,GAAG,GAAGb,QAAQ;EACxE,MAAMc,UAAU,GAAGH,YAAY,KAAKjB,QAAQ,CAACmB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACEvB,KAAA,CAAAyB,aAAA,CAAC3B,cAAc;IACboB,MAAM,EAAEA,MAAO;IACfQ,SAAS,EAAE;MACTC,GAAG,EAAEnB,YAAY;MACjBoB,OAAO,EAAE;QAAEP,YAAY;QAAEG;MAAW;IACtC,CAAE;IACFZ,MAAM,EAAEA,MAAO;IACfiB,OAAO,EAAE;MACPd,aAAa;MACbe,IAAI,EAAEd,IAAI,IAAId,UAAU,CAACc,IAAI;IAC/B,CAAE;IACFH,KAAK,EAAEA,KAAM;IACbZ,YAAY,EAAEA;EAAa,GAE3BD,KAAA,CAAAyB,aAAA,CAAC1B,aAAa;IACZe,YAAY,EAAEA,YAAa;IAC3BiB,QAAQ,EAAC,MAAM;IACfd,QAAQ,EAAEA;EAAS,GAEnBjB,KAAA,CAAAyB,aAAA,CAACtB,IAAI;IAACQ,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA,QAAS;IAACD,WAAW,EAAEA;EAAY,CAAE,CAC1D,CACD,CAAC;AAErB,CAAC;AAED,SAASJ,oBAAoB","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/Main.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useContext } from 'react';
 import { useQuery } from '@apollo/client';
-import { Size, Table, ThemeContext, 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';
+import { Size, Table, Tooltip, useLayoutProvider, useLiveRatesQuery } from '@oanda/labs-widget-common';
+import React, { useEffect, useState } from 'react';
 import { validateInstruments } from '../gql/validateInstruments';
+import { Cards, RowWithData } from './components';
+import { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';
+import { getHeaderConfig, getRecords } from './utils';
 const Main = _ref => {
   let {
     instruments,
@@ -13,7 +13,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const {
     target,
@@ -51,31 +51,31 @@ const Main = _ref => {
   }, [records, isDesktop]);
   const showError = !loading && !!error || !loading && !data;
   return React.createElement(React.Fragment, null, size && React.createElement("div", {
-    "data-testid": "live-rates-table-wrapper",
-    className: "lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary"
+    className: "lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary",
+    "data-testid": "live-rates-table-wrapper"
   }, isDesktop ? React.createElement("div", {
     className: "lw-border lw-border-solid lw-border-border-primary"
   }, React.createElement(Table, {
+    headerConfig: getHeaderConfig(columns),
     isError: showError,
     records: records,
-    headerConfig: getHeaderConfig(columns),
     renderRow: (record, index, isScrolled) => React.createElement(RowWithData, {
+      key: `row_${index}`,
+      activeColumns: columns,
+      division: division,
+      hasBackgroundColor: index % 2 === 0,
       isScrolled: isScrolled,
       loading: loading,
-      key: `row_${index}`,
       record: record,
-      target: target,
-      hasBackgroundColor: index % 2 === 0,
-      activeColumns: columns,
-      division: division
+      target: target
     })
   })) : React.createElement(Cards, {
-    records: records,
-    division: division,
-    target: target,
     columns: columns,
+    division: division,
     isError: showError,
-    isLoading: loading
+    isLoading: loading,
+    records: records,
+    target: target
   }), React.createElement(Tooltip, {
     id: INSTRUMENT_TOOLTIP_ID
   })));

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":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,OAAO;AAC9D,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,OAAO,EACPC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,eAAe,EAAEC,UAAU,QAAQ,SAAS;AAErD,SAASC,WAAW,EAAEC,KAAK,QAAQ,cAAc;AACjD,SACEC,eAAe,EAAEC,qBAAqB,QACjC,YAAY;AACnB,SAASC,mBAAmB,QAAQ,4BAA4B;AAGhE,MAAMC,IAAI,GAAGC,IAAA,IAII;EAAA,IAJH;IACZC,WAAW;IACXC,QAAQ;IACRC,OAAO,GAAGP;EACD,CAAC,GAAAI,IAAA;EACV,MAAM;IAAEI;EAAK,CAAC,GAAGnB,UAAU,CAACI,YAAY,CAAC;EACzC,MAAMgB,SAAS,GAAGD,IAAI,KAAKjB,IAAI,CAACmB,OAAO;EACvC,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGjB,iBAAiB,CAAC,CAAC;EAChD,MAAM,CAACkB,OAAO,EAAEC,UAAU,CAAC,GAAG1B,QAAQ,CAAe,IAAI2B,KAAK,CAACV,WAAW,CAACW,MAAM,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;EAE5F,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG9B,QAAQ,CAGvCY,mBAAmB,EAAE;IACrBmB,SAAS,EAAE;MACThB,WAAW;MACXC;IACF,CAAC;IACDgB,WAAW,EAAE;EACf,CAAC,CAAC;EAEFnC,SAAS,CAAC,MAAM;IACd,IAAI,CAAC+B,OAAO,IAAIC,IAAI,EAAE;MACpBL,UAAU,CAACjB,UAAU,CAACsB,IAAI,CAAE,CAAC;IAC/B;EAEF,CAAC,EAAE,CAACD,OAAO,EAAEC,IAAI,CAAC,CAAC;EAEnB,MAAMI,gBAAgB,GAAGV,OAAO,CAACW,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC;IAAW,CAAC,GAAAD,KAAA;IAAA,OAAKC,UAAU;EAAA,EAAC;EAEpEvC,SAAS,CAAC,MAAM;IACd,IAAIoC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MACvBX,QAAQ,CAAC;QAAEP,WAAW,EAAEkB;MAAiB,CAAC,CAAC;IAC7C;EAEF,CAAC,EAAE,CAACV,OAAO,EAAEJ,SAAS,CAAC,CAAC;EAExB,MAAMkB,SAAS,GAAI,CAACT,OAAO,IAAI,CAAC,CAACE,KAAK,IAAM,CAACF,OAAO,IAAI,CAACC,IAAK;EAE9D,OACEjC,KAAA,CAAA0C,aAAA,CAAA1C,KAAA,CAAA2C,QAAA,QACGrB,IAAI,IACLtB,KAAA,CAAA0C,aAAA;IAAK,eAAY,0BAA0B;IAACE,SAAS,EAAC;EAAgE,GACnHrB,SAAS,GACRvB,KAAA,CAAA0C,aAAA;IAAKE,SAAS,EAAC;EAAoD,GACjE5C,KAAA,CAAA0C,aAAA,CAACpC,KAAK;IACJuC,OAAO,EAAEJ,SAAU;IACnBd,OAAO,EAAEA,OAAQ;IACjBmB,YAAY,EAAEpC,eAAe,CAACW,OAAO,CAAE;IACvC0B,SAAS,EAAEA,CAACC,MAAM,EAAEC,KAAK,EAAEC,UAAU,KACnClD,KAAA,CAAA0C,aAAA,CAAC9B,WAAW;MACVsC,UAAU,EAAEA,UAAW;MACvBlB,OAAO,EAAEA,OAAQ;MACjBmB,GAAG,EAAE,OAAOF,KAAK,EAAG;MACpBD,MAAM,EAAEA,MAAO;MACfvB,MAAM,EAAEA,MAAO;MACf2B,kBAAkB,EAAEH,KAAK,GAAG,CAAC,KAAK,CAAE;MACpCI,aAAa,EAAEhC,OAAQ;MACvBD,QAAQ,EAAEA;IAAS,CACpB;EACD,CACH,CACE,CAAC,GAENpB,KAAA,CAAA0C,aAAA,CAAC7B,KAAK;IACJc,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBK,MAAM,EAAEA,MAAO;IACfJ,OAAO,EAAEA,OAAQ;IACjBwB,OAAO,EAAEJ,SAAU;IACnBa,SAAS,EAAEtB;EAAQ,CACpB,CACF,EACDhC,KAAA,CAAA0C,aAAA,CAAClC,OAAO;IAAC+C,EAAE,EAAExC;EAAsB,CAAE,CAClC,CAEL,CAAC;AAEP,CAAC;AAED,SAASE,IAAI","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["useQuery","Size","Table","Tooltip","useLayoutProvider","useLiveRatesQuery","React","useEffect","useState","validateInstruments","Cards","RowWithData","DEFAULT_COLUMNS","INSTRUMENT_TOOLTIP_ID","getHeaderConfig","getRecords","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","headerConfig","isError","renderRow","record","index","isScrolled","key","activeColumns","hasBackgroundColor","isLoading","id"],"sources":["../../../src/LiveRatesTableWidget/Main.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport {\n  Size,\n  Table,\n  Tooltip,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport React, { useEffect, useState } from 'react';\n\nimport type {\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables,\n} from '../gql/types/graphql';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { Cards, RowWithData } from './components';\nimport { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';\nimport type { DataRecord, MainProps } from './types';\nimport { getHeaderConfig, getRecords } from './utils';\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[]>(\n    new Array(instruments.length).fill({})\n  );\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  }, [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\n          className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\"\n          data-testid=\"live-rates-table-wrapper\"\n        >\n          {isDesktop ? (\n            <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n              <Table<DataRecord>\n                headerConfig={getHeaderConfig(columns)}\n                isError={showError}\n                records={records}\n                renderRow={(record, index, isScrolled) => (\n                  <RowWithData\n                    key={`row_${index}`}\n                    activeColumns={columns}\n                    division={division}\n                    hasBackgroundColor={index % 2 === 0}\n                    isScrolled={isScrolled}\n                    loading={loading}\n                    record={record}\n                    target={target}\n                  />\n                )}\n              />\n            </div>\n          ) : (\n            <Cards\n              columns={columns}\n              division={division}\n              isError={showError}\n              isLoading={loading}\n              records={records}\n              target={target}\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/CardWithData/CardWithData.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Card, CardHeader, CardRow, Price, ArrowPosition, LineChartSize, Truncate } from '@oanda/labs-widget-common';
+import { ArrowPosition, Card, CardHeader, CardRow, LineChartSize, Price, Truncate } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
 import { ColumnsNames } from '../../types';
-import { LineChartWithData } from '../LineChartWithData';
 import { useRecords } from '../../utils';
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import { LineChartWithData } from '../LineChartWithData';
 const CardWithData = _ref => {
   let {
     isLoading,
@@ -38,48 +38,48 @@ const CardWithData = _ref => {
   }, activeColumns.includes(ColumnsNames.CHART) && React.createElement(LineChartWithData, {
     division: division,
     isLoading: checkLoading('instrument'),
-    size: LineChartSize.xs,
     padding: 4,
-    record: updatedRecord
+    record: updatedRecord,
+    size: LineChartSize.xs
   })), activeColumns.map(item => {
     if (item === ColumnsNames.SELL) {
       return React.createElement(CardRow, {
         key: ColumnsNames.SELL,
-        label: lang('sell_price'),
+        isError: !!error,
         isLoading: checkLoading(ColumnsNames.SELL),
-        isError: !!error
+        label: lang('sell_price')
       }, React.createElement(Price, {
         arrowPosition: ArrowPosition.left,
-        priceMovement: updatedRecord.sellPriceMovement,
-        movementIndicator: "arrow"
+        movementIndicator: "arrow",
+        priceMovement: updatedRecord.sellPriceMovement
       }, React.createElement("span", null, updatedRecord.sell?.toFixed(updatedRecord.displayPrecision))));
     }
     if (item === ColumnsNames.BUY) {
       return React.createElement(CardRow, {
         key: ColumnsNames.BUY,
-        label: lang('buy_price'),
+        isError: !!error,
         isLoading: checkLoading(ColumnsNames.BUY),
-        isError: !!error
+        label: lang('buy_price')
       }, React.createElement(Price, {
         arrowPosition: ArrowPosition.left,
-        priceMovement: updatedRecord.buyPriceMovement,
-        movementIndicator: "arrow"
+        movementIndicator: "arrow",
+        priceMovement: updatedRecord.buyPriceMovement
       }, React.createElement("span", null, updatedRecord.buy?.toFixed(updatedRecord.displayPrecision))));
     }
     if (item === ColumnsNames.DAILY_CHANGE) {
       return React.createElement(CardRow, {
         key: ColumnsNames.DAILY_CHANGE,
-        label: lang('daily_percent_change'),
+        isError: !!error,
         isLoading: checkLoading('dailyPercentChange'),
-        isError: !!error
+        label: lang('daily_percent_change')
       }, React.createElement("span", null, updatedRecord.dailyPercentChange));
     }
     if (item === ColumnsNames.SPREAD) {
       return React.createElement(CardRow, {
         key: ColumnsNames.SPREAD,
-        label: lang('spread'),
+        isError: !!error,
         isLoading: checkLoading(ColumnsNames.SPREAD),
-        isError: !!error
+        label: lang('spread')
       }, React.createElement("span", null, updatedRecord.spread));
     }
     return null;

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

@@ -1 +1 @@
-{"version":3,"file":"CardWithData.js","names":["React","Card","CardHeader","CardRow","Price","ArrowPosition","LineChartSize","Truncate","useLocale","ColumnsNames","LineChartWithData","useRecords","INSTRUMENT_TOOLTIP_ID","CardWithData","_ref","isLoading","record","target","activeColumns","index","division","isLast","updatedRecord","error","ref","instrument","lang","checkLoading","id","undefined","createElement","withoutBottomBorder","number","title","text","displayName","tooltipId","includes","CHART","size","xs","padding","map","item","SELL","key","label","isError","arrowPosition","left","priceMovement","sellPriceMovement","movementIndicator","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","SPREAD","spread"],"sources":["../../../../../src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardRow,\n  Price,\n  ArrowPosition,\n  LineChartSize,\n  Truncate,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { ColumnsNames, CardWithDataProps } from '../../types';\nimport { LineChartWithData } from '../LineChartWithData';\nimport { useRecords } from '../../utils';\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\n\nconst CardWithData = ({\n  isLoading,\n  record,\n  target,\n  activeColumns,\n  index,\n  division,\n  isLast,\n}: CardWithDataProps) => {\n  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);\n  const { lang } = useLocale();\n\n  const checkLoading = (id: string) => isLoading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <Card ref={ref} data-testid=\"card\" withoutBottomBorder={!isLast}>\n      <CardHeader\n        isLoading={isLoading}\n        number={index}\n        title={<Truncate text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />}\n      >\n        {activeColumns.includes(ColumnsNames.CHART) && (\n        <LineChartWithData\n          division={division}\n          isLoading={checkLoading('instrument')}\n          size={LineChartSize.xs}\n          padding={4}\n          record={updatedRecord}\n        />\n        )}\n      </CardHeader>\n      {activeColumns.map((item) => {\n        if (item === ColumnsNames.SELL) {\n          return (\n            <CardRow\n              key={ColumnsNames.SELL}\n              label={lang('sell_price')}\n              isLoading={checkLoading(ColumnsNames.SELL)}\n              isError={!!error}\n            >\n              <Price\n                arrowPosition={ArrowPosition.left}\n                priceMovement={updatedRecord.sellPriceMovement}\n                movementIndicator=\"arrow\"\n              >\n                <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>\n              </Price>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.BUY) {\n          return (\n            <CardRow\n              key={ColumnsNames.BUY}\n              label={lang('buy_price')}\n              isLoading={checkLoading(ColumnsNames.BUY)}\n              isError={!!error}\n            >\n              <Price\n                arrowPosition={ArrowPosition.left}\n                priceMovement={updatedRecord.buyPriceMovement}\n                movementIndicator=\"arrow\"\n              >\n                <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>\n              </Price>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.DAILY_CHANGE) {\n          return (\n            <CardRow\n              key={ColumnsNames.DAILY_CHANGE}\n              label={lang('daily_percent_change')}\n              isLoading={checkLoading('dailyPercentChange')}\n              isError={!!error}\n            >\n              <span>{updatedRecord.dailyPercentChange}</span>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.SPREAD) {\n          return (\n            <CardRow\n              key={ColumnsNames.SPREAD}\n              label={lang('spread')}\n              isLoading={checkLoading(ColumnsNames.SPREAD)}\n              isError={!!error}\n            >\n              <span>{updatedRecord.spread}</span>\n            </CardRow>\n          );\n        }\n        return null;\n      })}\n    </Card>\n  );\n};\n\nexport { CardWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardWithData.js","names":["ArrowPosition","Card","CardHeader","CardRow","LineChartSize","Price","Truncate","useLocale","React","INSTRUMENT_TOOLTIP_ID","ColumnsNames","useRecords","LineChartWithData","CardWithData","_ref","isLoading","record","target","activeColumns","index","division","isLast","updatedRecord","error","ref","instrument","lang","checkLoading","id","undefined","createElement","withoutBottomBorder","number","title","text","displayName","tooltipId","includes","CHART","padding","size","xs","map","item","SELL","key","isError","label","arrowPosition","left","movementIndicator","priceMovement","sellPriceMovement","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","SPREAD","spread"],"sources":["../../../../../src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx"],"sourcesContent":["import {\n  ArrowPosition,\n  Card,\n  CardHeader,\n  CardRow,\n  LineChartSize,\n  Price,\n  Truncate,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\nimport type { CardWithDataProps } from '../../types';\nimport { ColumnsNames } from '../../types';\nimport { useRecords } from '../../utils';\nimport { LineChartWithData } from '../LineChartWithData';\n\nconst CardWithData = ({\n  isLoading,\n  record,\n  target,\n  activeColumns,\n  index,\n  division,\n  isLast,\n}: CardWithDataProps) => {\n  const { updatedRecord, error, ref } = useRecords(\n    record,\n    record.instrument ? target : null\n  );\n  const { lang } = useLocale();\n\n  const checkLoading = (id: string) =>\n    isLoading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <Card ref={ref} data-testid=\"card\" withoutBottomBorder={!isLast}>\n      <CardHeader\n        isLoading={isLoading}\n        number={index}\n        title={\n          <Truncate\n            text={record.displayName}\n            tooltipId={INSTRUMENT_TOOLTIP_ID}\n          />\n        }\n      >\n        {activeColumns.includes(ColumnsNames.CHART) && (\n          <LineChartWithData\n            division={division}\n            isLoading={checkLoading('instrument')}\n            padding={4}\n            record={updatedRecord}\n            size={LineChartSize.xs}\n          />\n        )}\n      </CardHeader>\n      {activeColumns.map((item) => {\n        if (item === ColumnsNames.SELL) {\n          return (\n            <CardRow\n              key={ColumnsNames.SELL}\n              isError={!!error}\n              isLoading={checkLoading(ColumnsNames.SELL)}\n              label={lang('sell_price')}\n            >\n              <Price\n                arrowPosition={ArrowPosition.left}\n                movementIndicator=\"arrow\"\n                priceMovement={updatedRecord.sellPriceMovement}\n              >\n                <span>\n                  {updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}\n                </span>\n              </Price>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.BUY) {\n          return (\n            <CardRow\n              key={ColumnsNames.BUY}\n              isError={!!error}\n              isLoading={checkLoading(ColumnsNames.BUY)}\n              label={lang('buy_price')}\n            >\n              <Price\n                arrowPosition={ArrowPosition.left}\n                movementIndicator=\"arrow\"\n                priceMovement={updatedRecord.buyPriceMovement}\n              >\n                <span>\n                  {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}\n                </span>\n              </Price>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.DAILY_CHANGE) {\n          return (\n            <CardRow\n              key={ColumnsNames.DAILY_CHANGE}\n              isError={!!error}\n              isLoading={checkLoading('dailyPercentChange')}\n              label={lang('daily_percent_change')}\n            >\n              <span>{updatedRecord.dailyPercentChange}</span>\n            </CardRow>\n          );\n        }\n\n        if (item === ColumnsNames.SPREAD) {\n          return (\n            <CardRow\n              key={ColumnsNames.SPREAD}\n              isError={!!error}\n              isLoading={checkLoading(ColumnsNames.SPREAD)}\n              label={lang('spread')}\n            >\n              <span>{updatedRecord.spread}</span>\n            </CardRow>\n          );\n        }\n        return null;\n      })}\n    </Card>\n  );\n};\n\nexport { CardWithData };\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card, ChartError } from '@oanda/labs-widget-common';
+import React from 'react';
 import { CardWithData } from '../CardWithData/CardWithData';
 const Cards = _ref => {
   let {
@@ -16,14 +16,14 @@ const Cards = _ref => {
   }, React.createElement(ChartError, null))) : React.createElement(React.Fragment, null, records.map((record, index) => React.createElement("div", {
     key: `card_${startIndex + index}`
   }, React.createElement(CardWithData, {
-    index: startIndex + index + 1,
-    division: division,
-    record: record,
-    target: target,
     activeColumns: columns,
+    division: division,
+    index: startIndex + index + 1,
     isError: isError,
+    isLast: index + 1 === records.length,
     isLoading: isLoading,
-    isLast: index + 1 === records.length
+    record: record,
+    target: target
   })))));
 };
 export { Cards };

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

@@ -1 +1 @@
-{"version":3,"file":"Cards.js","names":["React","Card","ChartError","CardWithData","Cards","_ref","records","target","columns","isError","isLoading","division","startIndex","createElement","Fragment","className","map","record","index","key","activeColumns","isLast","length"],"sources":["../../../../../src/LiveRatesTableWidget/components/Cards/Cards.tsx"],"sourcesContent":["import React from 'react';\nimport { Card, ChartError } from '@oanda/labs-widget-common';\nimport { CardWithData } from '../CardWithData/CardWithData';\nimport { CardsProps } from './types';\n\nconst Cards = ({\n  records, target, columns, isError, isLoading, division, startIndex = 0,\n}: CardsProps) => (\n  <>\n    {isError ? (\n      <Card>\n        <div className=\"lw-flex lw-h-[150px] lw-w-full lw-items-center lw-justify-center\">\n          <ChartError />\n        </div>\n      </Card>\n    ) : (\n      <>\n        {records.map((record, index) => (\n          <div key={`card_${startIndex + index}`}>\n            <CardWithData\n              index={startIndex + index + 1}\n              division={division}\n              record={record}\n              target={target}\n              activeColumns={columns}\n              isError={isError}\n              isLoading={isLoading}\n              isLast={index + 1 === records.length}\n            />\n          </div>\n        ))}\n      </>\n    )}\n  </>\n);\n\nexport { Cards };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AAC5D,SAASC,YAAY,QAAQ,8BAA8B;AAG3D,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IACbC,OAAO;IAAEC,MAAM;IAAEC,OAAO;IAAEC,OAAO;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU,GAAG;EAC3D,CAAC,GAAAP,IAAA;EAAA,OACXL,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACGL,OAAO,GACNT,KAAA,CAAAa,aAAA,CAACZ,IAAI,QACHD,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAkE,GAC/Ef,KAAA,CAAAa,aAAA,CAACX,UAAU,MAAE,CACV,CACD,CAAC,GAEPF,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACGR,OAAO,CAACU,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBlB,KAAA,CAAAa,aAAA;IAAKM,GAAG,EAAE,QAAQP,UAAU,GAAGM,KAAK;EAAG,GACrClB,KAAA,CAAAa,aAAA,CAACV,YAAY;IACXe,KAAK,EAAEN,UAAU,GAAGM,KAAK,GAAG,CAAE;IAC9BP,QAAQ,EAAEA,QAAS;IACnBM,MAAM,EAAEA,MAAO;IACfV,MAAM,EAAEA,MAAO;IACfa,aAAa,EAAEZ,OAAQ;IACvBC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBW,MAAM,EAAEH,KAAK,GAAG,CAAC,KAAKZ,OAAO,CAACgB;EAAO,CACtC,CACE,CACN,CACD,CAEJ,CAAC;AAAA,CACJ;AAED,SAASlB,KAAK","ignoreList":[]}
+{"version":3,"file":"Cards.js","names":["Card","ChartError","React","CardWithData","Cards","_ref","records","target","columns","isError","isLoading","division","startIndex","createElement","Fragment","className","map","record","index","key","activeColumns","isLast","length"],"sources":["../../../../../src/LiveRatesTableWidget/components/Cards/Cards.tsx"],"sourcesContent":["import { Card, ChartError } from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { CardWithData } from '../CardWithData/CardWithData';\nimport type { CardsProps } from './types';\n\nconst Cards = ({\n  records,\n  target,\n  columns,\n  isError,\n  isLoading,\n  division,\n  startIndex = 0,\n}: CardsProps) => (\n  <>\n    {isError ? (\n      <Card>\n        <div className=\"lw-flex lw-h-[150px] lw-w-full lw-items-center lw-justify-center\">\n          <ChartError />\n        </div>\n      </Card>\n    ) : (\n      <>\n        {records.map((record, index) => (\n          <div key={`card_${startIndex + index}`}>\n            <CardWithData\n              activeColumns={columns}\n              division={division}\n              index={startIndex + index + 1}\n              isError={isError}\n              isLast={index + 1 === records.length}\n              isLoading={isLoading}\n              record={record}\n              target={target}\n            />\n          </div>\n        ))}\n      </>\n    )}\n  </>\n);\n\nexport { Cards };\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AAC5D,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,8BAA8B;AAG3D,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IACbC,OAAO;IACPC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,UAAU,GAAG;EACH,CAAC,GAAAP,IAAA;EAAA,OACXH,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,QACGL,OAAO,GACNP,KAAA,CAAAW,aAAA,CAACb,IAAI,QACHE,KAAA,CAAAW,aAAA;IAAKE,SAAS,EAAC;EAAkE,GAC/Eb,KAAA,CAAAW,aAAA,CAACZ,UAAU,MAAE,CACV,CACD,CAAC,GAEPC,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,QACGR,OAAO,CAACU,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBhB,KAAA,CAAAW,aAAA;IAAKM,GAAG,EAAE,QAAQP,UAAU,GAAGM,KAAK;EAAG,GACrChB,KAAA,CAAAW,aAAA,CAACV,YAAY;IACXiB,aAAa,EAAEZ,OAAQ;IACvBG,QAAQ,EAAEA,QAAS;IACnBO,KAAK,EAAEN,UAAU,GAAGM,KAAK,GAAG,CAAE;IAC9BT,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAEH,KAAK,GAAG,CAAC,KAAKZ,OAAO,CAACgB,MAAO;IACrCZ,SAAS,EAAEA,SAAU;IACrBO,MAAM,EAAEA,MAAO;IACfV,MAAM,EAAEA;EAAO,CAChB,CACE,CACN,CACD,CAEJ,CAAC;AAAA,CACJ;AAED,SAASH,KAAK","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/Cards/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/LiveRatesTableWidget/components/Cards/types.tsx"],"sourcesContent":["import { Division } from '../../../gql/types/graphql';\nimport { ColumnsNames, DataRecord } from '../../types';\n\nexport interface CardsProps {\n  startIndex?: number;\n  emptyCardsCount?: number;\n  isLoading?: boolean;\n  isError?: boolean;\n  records: DataRecord[];\n  target: EventTarget | null;\n  columns: ColumnsNames[];\n  division: Division;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/LiveRatesTableWidget/components/Cards/types.tsx"],"sourcesContent":["import type { Division } from '../../../gql/types/graphql';\nimport type { ColumnsNames, DataRecord } from '../../types';\n\nexport interface CardsProps {\n  startIndex?: number;\n  emptyCardsCount?: number;\n  isLoading?: boolean;\n  isError?: boolean;\n  records: DataRecord[];\n  target: EventTarget | null;\n  columns: ColumnsNames[];\n  division: Division;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
 import { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';
+import React from 'react';
 import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
 import { getChartColor } from './utils';
 const LineChartWithData = _ref => {
@@ -29,10 +29,10 @@ const LineChartWithData = _ref => {
   return React.createElement(React.Fragment, null, showLoader && React.createElement(Loader, {
     size: LoaderSize.md
   }), !showLoader && React.createElement(LineChart, {
-    padding: padding,
-    size: size,
     color: chartColor,
-    data: chart
+    data: chart,
+    padding: padding,
+    size: size
   }));
 };
 export { LineChartWithData };

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

@@ -1 +1 @@
-{"version":3,"file":"LineChartWithData.js","names":["React","useQuery","LineChart","Loader","LoaderSize","getInstrumentsChart","getChartColor","LineChartWithData","_ref","padding","record","size","isLoading","division","isDarkMode","loading","data","variables","instruments","instrument","fetchPolicy","skip","showLoader","chart","topicalInstrumentsCharts","chartColor","dailyPercentChange","createElement","Fragment","md","color"],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx"],"sourcesContent":["import React from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  LineChart, Loader, LoaderSize,\n} from '@oanda/labs-widget-common';\nimport { LineChartWithDataProps } from './types';\nimport { getInstrumentsChart } from '../../../gql/getInstrumentsChart';\nimport { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../../../gql/types/graphql';\nimport { getChartColor } from './utils';\n\nconst LineChartWithData = ({\n  padding,\n  record,\n  size,\n  isLoading,\n  division,\n  isDarkMode = false,\n}: LineChartWithDataProps) => {\n  const { loading, data } = useQuery<\n  GetInstrumentsChartQuery,\n  GetInstrumentsChartQueryVariables\n  >(getInstrumentsChart, {\n    variables: {\n      instruments: [record.instrument],\n      division,\n    },\n    fetchPolicy: 'network-only',\n    skip: !record.instrument,\n  });\n\n  const showLoader = isLoading || loading;\n  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];\n\n  const chartColor = getChartColor(record.dailyPercentChange, isDarkMode);\n\n  return (\n    <>\n      {showLoader && <Loader size={LoaderSize.md} />}\n      {!showLoader && (\n        <LineChart\n          padding={padding}\n          size={size}\n          color={chartColor}\n          data={chart}\n        />\n      )}\n    </>\n  );\n};\n\nexport { LineChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,SAAS,EAAEC,MAAM,EAAEC,UAAU,QACxB,2BAA2B;AAElC,SAASC,mBAAmB,QAAQ,kCAAkC;AAEtE,SAASC,aAAa,QAAQ,SAAS;AAEvC,MAAMC,iBAAiB,GAAGC,IAAA,IAOI;EAAA,IAPH;IACzBC,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU,GAAG;EACS,CAAC,GAAAN,IAAA;EACvB,MAAM;IAAEO,OAAO;IAAEC;EAAK,CAAC,GAAGf,QAAQ,CAGhCI,mBAAmB,EAAE;IACrBY,SAAS,EAAE;MACTC,WAAW,EAAE,CAACR,MAAM,CAACS,UAAU,CAAC;MAChCN;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,IAAI,EAAE,CAACX,MAAM,CAACS;EAChB,CAAC,CAAC;EAEF,MAAMG,UAAU,GAAGV,SAAS,IAAIG,OAAO;EACvC,MAAMQ,KAAK,GAAGP,IAAI,EAAEQ,wBAAwB,GAAG,CAAC,CAAC,CAACD,KAAK,IAAI,EAAE;EAE7D,MAAME,UAAU,GAAGnB,aAAa,CAACI,MAAM,CAACgB,kBAAkB,EAAEZ,UAAU,CAAC;EAEvE,OACEd,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGN,UAAU,IAAItB,KAAA,CAAA2B,aAAA,CAACxB,MAAM;IAACQ,IAAI,EAAEP,UAAU,CAACyB;EAAG,CAAE,CAAC,EAC7C,CAACP,UAAU,IACVtB,KAAA,CAAA2B,aAAA,CAACzB,SAAS;IACRO,OAAO,EAAEA,OAAQ;IACjBE,IAAI,EAAEA,IAAK;IACXmB,KAAK,EAAEL,UAAW;IAClBT,IAAI,EAAEO;EAAM,CACb,CAEH,CAAC;AAEP,CAAC;AAED,SAAShB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"LineChartWithData.js","names":["useQuery","LineChart","Loader","LoaderSize","React","getInstrumentsChart","getChartColor","LineChartWithData","_ref","padding","record","size","isLoading","division","isDarkMode","loading","data","variables","instruments","instrument","fetchPolicy","skip","showLoader","chart","topicalInstrumentsCharts","chartColor","dailyPercentChange","createElement","Fragment","md","color"],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { getInstrumentsChart } from '../../../gql/getInstrumentsChart';\nimport type {\n  GetInstrumentsChartQuery,\n  GetInstrumentsChartQueryVariables,\n} from '../../../gql/types/graphql';\nimport type { LineChartWithDataProps } from './types';\nimport { getChartColor } from './utils';\n\nconst LineChartWithData = ({\n  padding,\n  record,\n  size,\n  isLoading,\n  division,\n  isDarkMode = false,\n}: LineChartWithDataProps) => {\n  const { loading, data } = useQuery<\n    GetInstrumentsChartQuery,\n    GetInstrumentsChartQueryVariables\n  >(getInstrumentsChart, {\n    variables: {\n      instruments: [record.instrument],\n      division,\n    },\n    fetchPolicy: 'network-only',\n    skip: !record.instrument,\n  });\n\n  const showLoader = isLoading || loading;\n  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];\n\n  const chartColor = getChartColor(record.dailyPercentChange, isDarkMode);\n\n  return (\n    <>\n      {showLoader && <Loader size={LoaderSize.md} />}\n      {!showLoader && (\n        <LineChart\n          color={chartColor}\n          data={chart}\n          padding={padding}\n          size={size}\n        />\n      )}\n    </>\n  );\n};\n\nexport { LineChartWithData };\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,SAAS,EAAEC,MAAM,EAAEC,UAAU,QAAQ,2BAA2B;AACzE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,mBAAmB,QAAQ,kCAAkC;AAMtE,SAASC,aAAa,QAAQ,SAAS;AAEvC,MAAMC,iBAAiB,GAAGC,IAAA,IAOI;EAAA,IAPH;IACzBC,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU,GAAG;EACS,CAAC,GAAAN,IAAA;EACvB,MAAM;IAAEO,OAAO;IAAEC;EAAK,CAAC,GAAGhB,QAAQ,CAGhCK,mBAAmB,EAAE;IACrBY,SAAS,EAAE;MACTC,WAAW,EAAE,CAACR,MAAM,CAACS,UAAU,CAAC;MAChCN;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,IAAI,EAAE,CAACX,MAAM,CAACS;EAChB,CAAC,CAAC;EAEF,MAAMG,UAAU,GAAGV,SAAS,IAAIG,OAAO;EACvC,MAAMQ,KAAK,GAAGP,IAAI,EAAEQ,wBAAwB,GAAG,CAAC,CAAC,CAACD,KAAK,IAAI,EAAE;EAE7D,MAAME,UAAU,GAAGnB,aAAa,CAACI,MAAM,CAACgB,kBAAkB,EAAEZ,UAAU,CAAC;EAEvE,OACEV,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,UAAU,IAAIlB,KAAA,CAAAuB,aAAA,CAACzB,MAAM;IAACS,IAAI,EAAER,UAAU,CAAC0B;EAAG,CAAE,CAAC,EAC7C,CAACP,UAAU,IACVlB,KAAA,CAAAuB,aAAA,CAAC1B,SAAS;IACR6B,KAAK,EAAEL,UAAW;IAClBT,IAAI,EAAEO,KAAM;IACZd,OAAO,EAAEA,OAAQ;IACjBE,IAAI,EAAEA;EAAK,CACZ,CAEH,CAAC;AAEP,CAAC;AAED,SAASJ,iBAAiB","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/LineChartWithData/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/types.tsx"],"sourcesContent":["import { LineChartSize } from '@oanda/labs-widget-common';\nimport { DataRecord } from '../../types';\nimport { Division } from '../../../gql/types/graphql';\n\nexport interface LineChartWithDataProps {\n  padding?: number;\n  record: DataRecord;\n  size?: LineChartSize;\n  isLoading: boolean;\n  division: Division;\n  isDarkMode?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/types.tsx"],"sourcesContent":["import type { LineChartSize } from '@oanda/labs-widget-common';\n\nimport type { Division } from '../../../gql/types/graphql';\nimport type { DataRecord } from '../../types';\n\nexport interface LineChartWithDataProps {\n  padding?: number;\n  record: DataRecord;\n  size?: LineChartSize;\n  isLoading: boolean;\n  division: Division;\n  isDarkMode?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/LineChartWithData/utils.js

@@ -1,4 +1,4 @@
-import { lightTheme, darkTheme } from '@oanda/labs-widget-common';
+import { darkTheme, lightTheme } from '@oanda/labs-widget-common';
 export const getChartColor = (dailyChange, isDarkMode) => {
   const theme = isDarkMode ? darkTheme : lightTheme;
   switch (dailyChange?.charAt(0)) {

package/dist/module/LiveRatesTableWidget/components/LineChartWithData/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["lightTheme","darkTheme","getChartColor","dailyChange","isDarkMode","theme","charAt","ok","danger","borderDisabled"],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/utils.ts"],"sourcesContent":["import { lightTheme, darkTheme } from '@oanda/labs-widget-common';\n\nexport const getChartColor = (dailyChange?: string, isDarkMode?: boolean) => {\n  const theme = isDarkMode ? darkTheme : lightTheme;\n\n  switch (dailyChange?.charAt(0)) {\n    case '+':\n      return theme.ok;\n    case '-':\n      return theme.danger;\n    default:\n      return theme.borderDisabled;\n  }\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,SAAS,QAAQ,2BAA2B;AAEjE,OAAO,MAAMC,aAAa,GAAGA,CAACC,WAAoB,EAAEC,UAAoB,KAAK;EAC3E,MAAMC,KAAK,GAAGD,UAAU,GAAGH,SAAS,GAAGD,UAAU;EAEjD,QAAQG,WAAW,EAAEG,MAAM,CAAC,CAAC,CAAC;IAC5B,KAAK,GAAG;MACN,OAAOD,KAAK,CAACE,EAAE;IACjB,KAAK,GAAG;MACN,OAAOF,KAAK,CAACG,MAAM;IACrB;MACE,OAAOH,KAAK,CAACI,cAAc;EAC/B;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["darkTheme","lightTheme","getChartColor","dailyChange","isDarkMode","theme","charAt","ok","danger","borderDisabled"],"sources":["../../../../../src/LiveRatesTableWidget/components/LineChartWithData/utils.ts"],"sourcesContent":["import { darkTheme, lightTheme } from '@oanda/labs-widget-common';\n\nexport const getChartColor = (dailyChange?: string, isDarkMode?: boolean) => {\n  const theme = isDarkMode ? darkTheme : lightTheme;\n\n  switch (dailyChange?.charAt(0)) {\n    case '+':\n      return theme.ok;\n    case '-':\n      return theme.danger;\n    default:\n      return theme.borderDisabled;\n  }\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,QAAQ,2BAA2B;AAEjE,OAAO,MAAMC,aAAa,GAAGA,CAACC,WAAoB,EAAEC,UAAoB,KAAK;EAC3E,MAAMC,KAAK,GAAGD,UAAU,GAAGJ,SAAS,GAAGC,UAAU;EAEjD,QAAQE,WAAW,EAAEG,MAAM,CAAC,CAAC,CAAC;IAC5B,KAAK,GAAG;MACN,OAAOD,KAAK,CAACE,EAAE;IACjB,KAAK,GAAG;MACN,OAAOF,KAAK,CAACG,MAAM;IACrB;MACE,OAAOH,KAAK,CAACI,cAAc;EAC/B;AACF,CAAC","ignoreList":[]}

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

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react';
+import { LoaderSize, Price, TableCell, TableRow, Truncate, useLayoutProvider } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
-import { TableCell, TableRow, Price, LoaderSize, Truncate, ThemeContext } from '@oanda/labs-widget-common';
+import React from 'react';
+import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
 import { ColumnsNames } from '../../types';
-import { LineChartWithData } from '../LineChartWithData';
 import { useRecords } from '../../utils';
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import { LineChartWithData } from '../LineChartWithData';
 const RowWithData = _ref => {
   let {
     loading,
@@ -17,7 +17,7 @@ const RowWithData = _ref => {
   } = _ref;
   const {
     isDark
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const {
     updatedRecord,
     error,
@@ -26,15 +26,15 @@ const RowWithData = _ref => {
   const checkLoading = id => loading || !error && updatedRecord?.[id] === undefined;
   return React.createElement(TableRow, {
     ref: ref,
-    isScrolled: isScrolled,
-    hasBackgroundColor: hasBackgroundColor
+    hasBackgroundColor: hasBackgroundColor,
+    isScrolled: isScrolled
   }, React.createElement(React.Fragment, null, React.createElement(TableCell, {
-    type: "text",
+    key: ColumnsNames.INSTRUMENT,
     classNames: classnames('lw-font-bold', {
       '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled
     }),
-    key: ColumnsNames.INSTRUMENT,
-    isLoading: checkLoading(ColumnsNames.INSTRUMENT)
+    isLoading: checkLoading(ColumnsNames.INSTRUMENT),
+    type: "text"
   }, React.createElement(Truncate, {
     maxWidth: 130,
     text: record.displayName,
@@ -43,50 +43,50 @@ const RowWithData = _ref => {
     if (item === ColumnsNames.SELL) {
       return React.createElement(TableCell, {
         key: ColumnsNames.SELL,
-        isLoading: checkLoading(ColumnsNames.SELL),
+        additionalPaddingRight: true,
         isError: !!error,
-        additionalPaddingRight: true
+        isLoading: checkLoading(ColumnsNames.SELL)
       }, React.createElement(Price, {
-        priceMovement: updatedRecord.sellPriceMovement,
-        movementIndicator: "arrow"
+        movementIndicator: "arrow",
+        priceMovement: updatedRecord.sellPriceMovement
       }, React.createElement("span", null, updatedRecord.sell?.toFixed(updatedRecord.displayPrecision))));
     }
     if (item === ColumnsNames.BUY) {
       return React.createElement(TableCell, {
         key: ColumnsNames.BUY,
-        isLoading: checkLoading(ColumnsNames.BUY),
+        additionalPaddingRight: true,
         isError: !!error,
-        additionalPaddingRight: true
+        isLoading: checkLoading(ColumnsNames.BUY)
       }, React.createElement(Price, {
-        priceMovement: updatedRecord.buyPriceMovement,
-        movementIndicator: "arrow"
+        movementIndicator: "arrow",
+        priceMovement: updatedRecord.buyPriceMovement
       }, React.createElement("span", null, updatedRecord.buy?.toFixed(updatedRecord.displayPrecision))));
     }
     if (item === ColumnsNames.DAILY_CHANGE) {
       return React.createElement(TableCell, {
         key: ColumnsNames.DAILY_CHANGE,
-        isLoading: checkLoading('dailyPercentChange'),
-        isError: !!error
+        isError: !!error,
+        isLoading: checkLoading('dailyPercentChange')
       }, React.createElement("span", null, updatedRecord.dailyPercentChange));
     }
     if (item === ColumnsNames.CHART) {
       return React.createElement("td", {
-        "data-testid": "chart-table-cell",
+        key: ColumnsNames.CHART,
         className: "lw-relative lw-px-3 lw-py-0 lw-text-right",
-        key: ColumnsNames.CHART
+        "data-testid": "chart-table-cell"
       }, React.createElement("div", {
         className: "lw-flex lw-justify-center"
       }, React.createElement(LineChartWithData, {
-        record: updatedRecord,
+        division: division,
         isLoading: checkLoading('instrument'),
-        division: division
+        record: updatedRecord
       })));
     }
     if (item === ColumnsNames.SPREAD) {
       return React.createElement(TableCell, {
         key: ColumnsNames.SPREAD,
-        isLoading: checkLoading(ColumnsNames.SPREAD),
         isError: !!error,
+        isLoading: checkLoading(ColumnsNames.SPREAD),
         loaderSize: LoaderSize.sm
       }, React.createElement("span", null, updatedRecord.spread));
     }