@oanda/labs-order-book-widget 1.0.171 → 1.0.173

package/src/OrderBookWidget/components/Chart/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useContext } from 'react';
+import React, { useRef, useEffect } from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { CustomChart } from 'echarts/charts';
@@ -14,7 +14,7 @@ import {
   DatasetComponent,
 } from 'echarts/components';
 import {
-  Theme, ThemeContext, colorPalette, getChartTheme, Size,
+  Theme, useLayoutProvider, colorPalette, getChartTheme, Size,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { getResponsiveOption, getOption } from './getOption';
@@ -38,7 +38,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, size } = useContext(ThemeContext);
+  const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const echartRef = useRef(null);

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 { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from '../src/OrderBookWidget/Main';
 import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
 import { BookType, Division } from '../src/gql/types/graphql';
@@ -67,9 +67,9 @@ describe('Main component', () => {
   it('should render tool component', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main division={Division.Oc} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -81,9 +81,9 @@ describe('Main component', () => {
   it('should render widget component', async () => {
     const { findByTestId, queryAllByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main division={Division.Oc} instrument={InstrumentId.EUR_AUD} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );