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

package/dist/types/LiveRatesTableWidget/types.d.ts

@@ -1,7 +1,7 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
-export { Locale } from '@oanda/mono-i18n';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+import type { Division } from '../gql/types/graphql';
 export { Division } from '../gql/types/graphql';
+export { Locale } from '@oanda/mono-i18n';
 export declare enum View {
     TABLE = "table",
     CARDS = "cards"
@@ -31,7 +31,7 @@ export interface Sentiment {
     shortPercent: number;
     longPercent: number;
 }
-export type EmptyRecord = Record<any, never>;
+export type EmptyRecord = Record<string, never>;
 export interface DataRecord {
     [key: string]: string | number | undefined;
     instrument: string;

package/dist/types/LiveRatesTableWidget/utils.d.ts

@@ -1,6 +1,7 @@
-import { HeaderColumns, LiveRatesErrorMessage } from '@oanda/labs-widget-common';
-import { ColumnsNames, DataRecord, EmptyRecord } from './types';
-import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+import type { HeaderColumns, LiveRatesErrorMessage } from '@oanda/labs-widget-common';
+import type { ValidateInstrumentsQuery } from '../gql/types/graphql';
+import type { DataRecord, EmptyRecord } from './types';
+import { ColumnsNames } from './types';
 declare const getRecords: (data: ValidateInstrumentsQuery) => {
     instrument: string;
     displayName: string;
@@ -11,4 +12,4 @@ declare const useRecords: (record: DataRecord | EmptyRecord, target: EventTarget
     error: LiveRatesErrorMessage | null;
     ref: (node?: Element | null) => void;
 };
-export { getRecords, getHeaderConfig, useRecords, };
+export { getHeaderConfig, getRecords, useRecords };

package/dist/types/gql/types/gql.d.ts

@@ -11,11 +11,11 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n": DocumentNode<types.GetInstrumentsChartQuery, types.Exact<{
+    '\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n': DocumentNode<types.GetInstrumentsChartQuery, types.Exact<{
         instruments?: types.InputMaybe<Array<types.Scalars["String"]["input"]> | types.Scalars["String"]["input"]>;
         division?: types.InputMaybe<types.Division>;
     }>>;
-    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": DocumentNode<types.ValidateInstrumentsQuery, types.Exact<{
+    '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n': DocumentNode<types.ValidateInstrumentsQuery, types.Exact<{
         instruments: Array<types.InputMaybe<types.Scalars["String"]["input"]>> | types.InputMaybe<types.Scalars["String"]["input"]>;
         division?: types.InputMaybe<types.Division>;
     }>>;
@@ -36,10 +36,10 @@ export declare function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"): (typeof documents)["\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"];
+export declare function graphql(source: '\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n'): (typeof documents)['\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+export declare function graphql(source: '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'): (typeof documents)['\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/types/gql/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./fragment-masking";
-export * from "./gql";
+export * from './fragment-masking';
+export * from './gql';

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './LiveRatesTableWidget/types';
 export * from './LiveRatesTableWidget/LiveRatesTableWidget';
+export * from './LiveRatesTableWidget/types';

package/dist/types/translations/index.d.ts

@@ -1,4 +1,4 @@
-import { Translations } from '@oanda/mono-i18n';
-import { defaultTranslations } from './translations';
+import type { Translations } from '@oanda/mono-i18n';
+import type { defaultTranslations } from './translations';
 export type TranslationKey = keyof typeof defaultTranslations;
 export declare const translations: Translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-live-rates-table-widget",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "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.174",
     "@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": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/LiveRatesTableWidget/LiveRatesTableWidget.tsx

@@ -1,14 +1,12 @@
+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 { Main } from './Main';
-import { Division, LiveRatesTableConfig } from './types';
 import { sizeConfig } from './config';
+import { Main } from './Main';
+import type { LiveRatesTableConfig } from './types';
+import { Division } from './types';
 
 const LiveRatesTableWidget = ({
   graphqlUrl,
@@ -32,33 +30,28 @@ 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
+      client={client}
+      liveRates={{
+        url: liveRatesUrl,
+        options: { divisionCode, dataSource },
+      }}
+      locale={locale}
+      styling={{
+        removePadding,
+        size: view && sizeConfig[view],
+      }}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
+      >
+        <Main columns={columns} division={division} instruments={instruments} />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/LiveRatesTableWidget/Main.tsx

@@ -1,34 +1,38 @@
-import React, { useEffect, useState, useContext } from 'react';
 import { useQuery } from '@apollo/client';
 import {
   Size,
   Table,
-  ThemeContext,
   Tooltip,
+  useLayoutProvider,
   useLiveRatesQuery,
 } from '@oanda/labs-widget-common';
-import { getHeaderConfig, getRecords } from './utils';
-import { DataRecord, MainProps } from './types';
-import { RowWithData, Cards } from './components';
-import {
-  DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID,
-} from './constant';
+import React, { useEffect, useState } from 'react';
+
+import type {
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables,
+} from '../gql/types/graphql';
 import { validateInstruments } from '../gql/validateInstruments';
-import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
+import { Cards, RowWithData } from './components';
+import { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';
+import type { DataRecord, MainProps } from './types';
+import { getHeaderConfig, getRecords } from './utils';
 
 const Main = ({
   instruments,
   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({}));
+  const [records, setRecords] = useState<DataRecord[]>(
+    new Array(instruments.length).fill({})
+  );
 
   const { loading, data, error } = useQuery<
-  ValidateInstrumentsQuery,
-  ValidateInstrumentsQueryVariables
+    ValidateInstrumentsQuery,
+    ValidateInstrumentsQueryVariables
   >(validateInstruments, {
     variables: {
       instruments,
@@ -41,7 +45,6 @@ const Main = ({
     if (!loading && data) {
       setRecords(getRecords(data)!);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loading, data]);
 
   const instrumentsNames = records.map(({ instrument }) => instrument);
@@ -58,39 +61,42 @@ const Main = ({
   return (
     <>
       {size && (
-      <div data-testid="live-rates-table-wrapper" className="lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary">
-        {isDesktop ? (
-          <div className="lw-border lw-border-solid lw-border-border-primary">
-            <Table<DataRecord>
+        <div
+          className="lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary"
+          data-testid="live-rates-table-wrapper"
+        >
+          {isDesktop ? (
+            <div className="lw-border lw-border-solid lw-border-border-primary">
+              <Table<DataRecord>
+                headerConfig={getHeaderConfig(columns)}
+                isError={showError}
+                records={records}
+                renderRow={(record, index, isScrolled) => (
+                  <RowWithData
+                    key={`row_${index}`}
+                    activeColumns={columns}
+                    division={division}
+                    hasBackgroundColor={index % 2 === 0}
+                    isScrolled={isScrolled}
+                    loading={loading}
+                    record={record}
+                    target={target}
+                  />
+                )}
+              />
+            </div>
+          ) : (
+            <Cards
+              columns={columns}
+              division={division}
               isError={showError}
+              isLoading={loading}
               records={records}
-              headerConfig={getHeaderConfig(columns)}
-              renderRow={(record, index, isScrolled) => (
-                <RowWithData
-                  isScrolled={isScrolled}
-                  loading={loading}
-                  key={`row_${index}`}
-                  record={record}
-                  target={target}
-                  hasBackgroundColor={index % 2 === 0}
-                  activeColumns={columns}
-                  division={division}
-                />
-              )}
+              target={target}
             />
-          </div>
-        ) : (
-          <Cards
-            records={records}
-            division={division}
-            target={target}
-            columns={columns}
-            isError={showError}
-            isLoading={loading}
-          />
-        )}
-        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
-      </div>
+          )}
+          <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
+        </div>
       )}
     </>
   );

package/src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
 import {
+  ArrowPosition,
   Card,
   CardHeader,
   CardRow,
-  Price,
-  ArrowPosition,
   LineChartSize,
+  Price,
   Truncate,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { ColumnsNames, CardWithDataProps } from '../../types';
-import { LineChartWithData } from '../LineChartWithData';
-import { useRecords } from '../../utils';
+import React from 'react';
+
 import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import type { CardWithDataProps } from '../../types';
+import { ColumnsNames } from '../../types';
+import { useRecords } from '../../utils';
+import { LineChartWithData } from '../LineChartWithData';
 
 const CardWithData = ({
   isLoading,
@@ -23,26 +25,35 @@ const CardWithData = ({
   division,
   isLast,
 }: CardWithDataProps) => {
-  const { updatedRecord, error, ref } = useRecords(record, record.instrument ? target : null);
+  const { updatedRecord, error, ref } = useRecords(
+    record,
+    record.instrument ? target : null
+  );
   const { lang } = useLocale();
 
-  const checkLoading = (id: string) => isLoading || (!error && updatedRecord?.[id] === undefined);
+  const checkLoading = (id: string) =>
+    isLoading || (!error && updatedRecord?.[id] === undefined);
 
   return (
     <Card ref={ref} data-testid="card" withoutBottomBorder={!isLast}>
       <CardHeader
         isLoading={isLoading}
         number={index}
-        title={<Truncate text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />}
+        title={
+          <Truncate
+            text={record.displayName}
+            tooltipId={INSTRUMENT_TOOLTIP_ID}
+          />
+        }
       >
         {activeColumns.includes(ColumnsNames.CHART) && (
-        <LineChartWithData
-          division={division}
-          isLoading={checkLoading('instrument')}
-          size={LineChartSize.xs}
-          padding={4}
-          record={updatedRecord}
-        />
+          <LineChartWithData
+            division={division}
+            isLoading={checkLoading('instrument')}
+            padding={4}
+            record={updatedRecord}
+            size={LineChartSize.xs}
+          />
         )}
       </CardHeader>
       {activeColumns.map((item) => {
@@ -50,16 +61,18 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.SELL}
-              label={lang('sell_price')}
-              isLoading={checkLoading(ColumnsNames.SELL)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.SELL)}
+              label={lang('sell_price')}
             >
               <Price
                 arrowPosition={ArrowPosition.left}
-                priceMovement={updatedRecord.sellPriceMovement}
                 movementIndicator="arrow"
+                priceMovement={updatedRecord.sellPriceMovement}
               >
-                <span>{updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}</span>
+                <span>
+                  {updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}
+                </span>
               </Price>
             </CardRow>
           );
@@ -69,16 +82,18 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.BUY}
-              label={lang('buy_price')}
-              isLoading={checkLoading(ColumnsNames.BUY)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.BUY)}
+              label={lang('buy_price')}
             >
               <Price
                 arrowPosition={ArrowPosition.left}
-                priceMovement={updatedRecord.buyPriceMovement}
                 movementIndicator="arrow"
+                priceMovement={updatedRecord.buyPriceMovement}
               >
-                <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>
+                <span>
+                  {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
+                </span>
               </Price>
             </CardRow>
           );
@@ -88,9 +103,9 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.DAILY_CHANGE}
-              label={lang('daily_percent_change')}
-              isLoading={checkLoading('dailyPercentChange')}
               isError={!!error}
+              isLoading={checkLoading('dailyPercentChange')}
+              label={lang('daily_percent_change')}
             >
               <span>{updatedRecord.dailyPercentChange}</span>
             </CardRow>
@@ -101,9 +116,9 @@ const CardWithData = ({
           return (
             <CardRow
               key={ColumnsNames.SPREAD}
-              label={lang('spread')}
-              isLoading={checkLoading(ColumnsNames.SPREAD)}
               isError={!!error}
+              isLoading={checkLoading(ColumnsNames.SPREAD)}
+              label={lang('spread')}
             >
               <span>{updatedRecord.spread}</span>
             </CardRow>

package/src/LiveRatesTableWidget/components/Cards/Cards.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
 import { Card, ChartError } from '@oanda/labs-widget-common';
+import React from 'react';
+
 import { CardWithData } from '../CardWithData/CardWithData';
-import { CardsProps } from './types';
+import type { CardsProps } from './types';
 
 const Cards = ({
-  records, target, columns, isError, isLoading, division, startIndex = 0,
+  records,
+  target,
+  columns,
+  isError,
+  isLoading,
+  division,
+  startIndex = 0,
 }: CardsProps) => (
   <>
     {isError ? (
@@ -18,14 +25,14 @@ const Cards = ({
         {records.map((record, index) => (
           <div key={`card_${startIndex + index}`}>
             <CardWithData
-              index={startIndex + index + 1}
-              division={division}
-              record={record}
-              target={target}
               activeColumns={columns}
+              division={division}
+              index={startIndex + index + 1}
               isError={isError}
-              isLoading={isLoading}
               isLast={index + 1 === records.length}
+              isLoading={isLoading}
+              record={record}
+              target={target}
             />
           </div>
         ))}

package/src/LiveRatesTableWidget/components/Cards/types.tsx

@@ -1,5 +1,5 @@
-import { Division } from '../../../gql/types/graphql';
-import { ColumnsNames, DataRecord } from '../../types';
+import type { Division } from '../../../gql/types/graphql';
+import type { ColumnsNames, DataRecord } from '../../types';
 
 export interface CardsProps {
   startIndex?: number;

package/src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
-import {
-  LineChart, Loader, LoaderSize,
-} from '@oanda/labs-widget-common';
-import { LineChartWithDataProps } from './types';
+import { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';
+import React from 'react';
+
 import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
-import { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../../../gql/types/graphql';
+import type {
+  GetInstrumentsChartQuery,
+  GetInstrumentsChartQueryVariables,
+} from '../../../gql/types/graphql';
+import type { LineChartWithDataProps } from './types';
 import { getChartColor } from './utils';
 
 const LineChartWithData = ({
@@ -17,8 +19,8 @@ const LineChartWithData = ({
   isDarkMode = false,
 }: LineChartWithDataProps) => {
   const { loading, data } = useQuery<
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables
+    GetInstrumentsChartQuery,
+    GetInstrumentsChartQueryVariables
   >(getInstrumentsChart, {
     variables: {
       instruments: [record.instrument],
@@ -38,10 +40,10 @@ const LineChartWithData = ({
       {showLoader && <Loader size={LoaderSize.md} />}
       {!showLoader && (
         <LineChart
-          padding={padding}
-          size={size}
           color={chartColor}
           data={chart}
+          padding={padding}
+          size={size}
         />
       )}
     </>

package/src/LiveRatesTableWidget/components/LineChartWithData/types.tsx

@@ -1,6 +1,7 @@
-import { LineChartSize } from '@oanda/labs-widget-common';
-import { DataRecord } from '../../types';
-import { Division } from '../../../gql/types/graphql';
+import type { LineChartSize } from '@oanda/labs-widget-common';
+
+import type { Division } from '../../../gql/types/graphql';
+import type { DataRecord } from '../../types';
 
 export interface LineChartWithDataProps {
   padding?: number;

package/src/LiveRatesTableWidget/components/LineChartWithData/utils.ts

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