@oanda/labs-currency-power-balance-widget 1.0.110 → 1.0.112

package/src/CurrencyPowerBalanceWidget/CurrencyPowerBalance.tsx

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

package/src/CurrencyPowerBalanceWidget/Main.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useState } from 'react';
-import { ThemeContext } from '@oanda/labs-widget-common';
+import React, { useState } from 'react';
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
 import { TimeUnitSwitch } from './components/TimeUnitSwitch';
@@ -8,7 +8,7 @@ import { ChartWithData } from './ChartWithData';
 import { MainProps } from './types';
 
 const Main = ({ timeUnit, currencies }: MainProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const { lang } = useLocale();
   const [selectedTimeUnit, setSelectedTimeUnit] = useState(
     timeUnit || CurrencyPowerBalanceTimeUnit.CurrentDay,

package/src/CurrencyPowerBalanceWidget/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 { LineChart } from 'echarts/charts';
@@ -7,7 +7,7 @@ import {
   GridSimpleComponent, GraphicComponent, TooltipComponent, LegendPlainComponent, MarkLineComponent,
 } from 'echarts/components';
 import {
-  Theme, ThemeContext, getChartTheme, Size,
+  Theme, useLayoutProvider, getChartTheme, Size,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -31,7 +31,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values, timeUnit, currencies }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, size } = useContext(ThemeContext);
+  const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const isMobile = size === Size.MOBILE;
 

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSwitch.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
-  Button, ButtonSize, ButtonVariant, ThemeContext, Size,
+  Button, ButtonSize, ButtonVariant, useLayoutProvider, Size,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { TimeUnitSwitchProps } from './types';
@@ -12,7 +12,7 @@ const TimeUnitSwitch = ({
   selected, options, callback,
 }: TimeUnitSwitchProps) => {
   const { lang } = useLocale();
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const handleButtonClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {

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, Size } from '@oanda/labs-widget-common';
 import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
 import { mockResponse } from './responsesMocks';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
@@ -13,9 +13,9 @@ describe('Main component', () => {
   it('should render tool desktop view', async () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -26,9 +26,9 @@ describe('Main component', () => {
   it('should render widget desktop view', async () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} currencies={['USD', 'EUR']} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -39,9 +39,9 @@ describe('Main component', () => {
   it('should render tool desktop view when timeUnit missing for widget', async () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main currencies={['USD', 'EUR']} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -52,9 +52,9 @@ describe('Main component', () => {
   it('should render tool desktop view when currencies missing for widget', async () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -65,9 +65,9 @@ describe('Main component', () => {
   it('should render tool mobile view', async () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
-        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: true }}>
+        <MockLayoutProvider size={Size.MOBILE}>
           <Main />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );