@oanda/labs-instrument-live-rate-widget 1.0.33 → 1.0.35

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-instrument-live-rate-widget",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Labs Instrument Live Rate 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/InstrumentLiveRateWidget/InstrumentLiveRateWidget.tsx

@@ -1,12 +1,10 @@
-import React, { Suspense } from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import {
-  LiveRatesProvider, ThemeProvider, getLocale,
-  renderComponent,
-} from '@oanda/labs-widget-common';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import React from 'react';
+
 import { translations } from '../translations';
-import { Division, InstrumentLiveRateConfig } from './types';
+import type { InstrumentLiveRateConfig } from './types';
+import { Division } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
 
 const InstrumentLiveRateWidget = ({
@@ -30,29 +28,33 @@ const InstrumentLiveRateWidget = ({
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
   return (
-    <LocaleProvider locale={getLocale(locale)} translations={translations}>
-      <LiveRatesProvider
-        url={liveRatesUrl}
-        options={{ divisionCode, dataSource }}
+    <WidgetProvider
+      withSuspense
+      client={client}
+      liveRates={{
+        url: liveRatesUrl,
+        options: { divisionCode, dataSource },
+      }}
+      locale={locale}
+      styling={{
+        removePadding,
+      }}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="full"
+        logoLink={logoLink}
       >
-        <ApolloProvider client={client}>
-          <Suspense>
-            <ThemeProvider removePadding={removePadding} theme={theme}>
-              {renderComponent({
-                Component: <ValidationWrapper
-                  size={size}
-                  instrument={instrument}
-                  division={division}
-                  isParamError={isParamError}
-                />,
-                logoLink,
-                linkArea: 'full',
-              })}
-            </ThemeProvider>
-          </Suspense>
-        </ApolloProvider>
-      </LiveRatesProvider>
-    </LocaleProvider>
+        <ValidationWrapper
+          division={division}
+          instrument={instrument}
+          isParamError={isParamError}
+          size={size}
+        />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/InstrumentLiveRateWidget/Main.tsx

@@ -1,14 +1,18 @@
-import React, { useEffect } from 'react';
 import { useBackgroundQuery } from '@apollo/client';
 import {
   InstrumentRateWithChart,
   Tooltip,
   useLiveRatesQuery,
 } from '@oanda/labs-widget-common';
-import { MainProps } from './types';
-import { INSTRUMENT_TOOLTIP_ID } from './constant';
+import React, { useEffect } from 'react';
+
 import { getInstrumentsChart } from '../gql/getInstrumentsChart';
-import { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../gql/types/graphql';
+import type {
+  GetInstrumentsChartQuery,
+  GetInstrumentsChartQueryVariables,
+} from '../gql/types/graphql';
+import { INSTRUMENT_TOOLTIP_ID } from './constant';
+import type { MainProps } from './types';
 
 const Main = ({
   division,
@@ -18,8 +22,8 @@ const Main = ({
   const hasInstrument = !!record.instrument;
 
   const [queryRef] = useBackgroundQuery<
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables
+    GetInstrumentsChartQuery,
+    GetInstrumentsChartQueryVariables
   >(getInstrumentsChart, {
     variables: {
       instruments: [record.instrument],
@@ -41,11 +45,11 @@ const Main = ({
   return (
     <div>
       <InstrumentRateWithChart<GetInstrumentsChartQuery>
+        queryRef={queryRef}
         record={record}
-        target={target}
         size={widgetSize}
+        target={target}
         tooltipId={INSTRUMENT_TOOLTIP_ID}
-        queryRef={queryRef}
       />
       <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
     </div>

package/src/InstrumentLiveRateWidget/ValidationWrapper.tsx

@@ -1,12 +1,16 @@
-import React, { useContext } from 'react';
 import { useSuspenseQuery } from '@apollo/client';
+import { Error, useLayoutProvider } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
-import { Error, ThemeContext } from '@oanda/labs-widget-common';
-import { getRecords } from './utils';
-import { ValidationWrapperProps } from './types';
+import React from 'react';
+
+import type {
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables,
+} from '../gql/types/graphql';
 import { validateInstruments } from '../gql/validateInstruments';
-import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
 import { Main } from './Main';
+import type { ValidationWrapperProps } from './types';
+import { getRecords } from './utils';
 
 const ValidationWrapper = ({
   instrument,
@@ -14,10 +18,10 @@ const ValidationWrapper = ({
   size: widgetSize,
   isParamError,
 }: ValidationWrapperProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const { data, error } = useSuspenseQuery<
-  ValidateInstrumentsQuery,
-  ValidateInstrumentsQueryVariables
+    ValidateInstrumentsQuery,
+    ValidateInstrumentsQueryVariables
   >(validateInstruments, {
     variables: {
       instruments: [instrument],
@@ -32,30 +36,30 @@ const ValidationWrapper = ({
   return (
     <>
       {size && (
-        <div
-          className="lw-flex lw-border lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
-        >
+        <div className="lw-flex lw-border lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary">
           {!showError && (
-          <div className={classnames({
-            'lw-h-[82px]': widgetSize !== 'compact',
-            'lw-h-[54px]': widgetSize === 'compact',
-          })}
-          >
-            <Main
-              size={widgetSize}
-              division={division}
-              record={getRecords(data!)?.[0]!}
-            />
-          </div>
+            <div
+              className={classnames({
+                'lw-h-[82px]': widgetSize !== 'compact',
+                'lw-h-[54px]': widgetSize === 'compact',
+              })}
+            >
+              <Main
+                division={division}
+                record={getRecords(data!)?.[0]!}
+                size={widgetSize}
+              />
+            </div>
           )}
           {showError && (
-          <div className={classnames('lw-flex lw-w-full lw-items-center', {
-            'lw-h-[82px]': widgetSize !== 'compact',
-            'lw-h-[54px]': widgetSize === 'compact',
-          })}
-          >
-            <Error />
-          </div>
+            <div
+              className={classnames('lw-flex lw-w-full lw-items-center', {
+                'lw-h-[82px]': widgetSize !== 'compact',
+                'lw-h-[54px]': widgetSize === 'compact',
+              })}
+            >
+              <Error />
+            </div>
           )}
         </div>
       )}

package/src/InstrumentLiveRateWidget/constant.ts

@@ -1,5 +1,3 @@
 const INSTRUMENT_TOOLTIP_ID = 'instrument_tooltip_id';
 
-export {
-  INSTRUMENT_TOOLTIP_ID,
-};
+export { INSTRUMENT_TOOLTIP_ID };

package/src/InstrumentLiveRateWidget/render.tsx

@@ -1,51 +1,64 @@
+import type { Theme } from '@oanda/labs-widget-common';
+import { validateLocale, validateToolParams } from '@oanda/labs-widget-common';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
-import { InstrumentLiveRateWidget } from './InstrumentLiveRateWidget';
+
 import { Division } from '../gql/types/graphql';
+import { InstrumentLiveRateWidget } from './InstrumentLiveRateWidget';
 
-const {
-  graphqlUrl,
-  liveRatesUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
 
-const instrumentLiveRateElements = document.querySelectorAll('div[data-instrument-live-rate-params]');
+const instrumentLiveRateElements = document.querySelectorAll(
+  'div[data-instrument-live-rate-params]'
+);
 
 instrumentLiveRateElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-instrument-live-rate-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    instrument, division, locale, size,
-  } = JSON.parse(params as string);
+  const { instrument, division, locale, size } = JSON.parse(params as string);
 
-  const isParamError = validateToolParams({
-    division, locale, instrument, graphqlUrl, liveRatesUrl,
-  }, [{
-    name: 'locale',
-    valueCheck: (value) => validateLocale(value),
-  }, {
-    name: 'division',
-    valueCheck: (value) => Object.values(Division).includes(value),
-  }, {
-    name: 'instrument',
-    valueCheck: (value) => (value as string).length > 0,
-  }, {
-    name: 'graphqlUrl',
-  }, {
-    name: 'liveRatesUrl',
-  }]);
+  const isParamError = validateToolParams(
+    {
+      division,
+      locale,
+      instrument,
+      graphqlUrl,
+      liveRatesUrl,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value: string | undefined) => validateLocale(value),
+      },
+      {
+        name: 'division',
+        valueCheck: (value: Division) =>
+          Object.values(Division).includes(value),
+      },
+      {
+        name: 'instrument',
+        valueCheck: (value) => (value as string).length > 0,
+      },
+      {
+        name: 'graphqlUrl',
+      },
+      {
+        name: 'liveRatesUrl',
+      },
+    ]
+  );
 
   root.render(
     <InstrumentLiveRateWidget
-      graphqlUrl={graphqlUrl}
-      liveRatesUrl={liveRatesUrl}
       division={division}
+      graphqlUrl={graphqlUrl}
       instrument={instrument}
-      locale={locale}
-      theme={mode as Theme}
       isParamError={isParamError}
+      liveRatesUrl={liveRatesUrl}
+      locale={locale}
       size={size}
-    />,
+      theme={mode as Theme}
+    />
   );
 });

package/src/InstrumentLiveRateWidget/types.tsx

@@ -1,8 +1,13 @@
-import { DataRecord, WidgetConfig, WidgetSize } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
+import type {
+  DataRecord,
+  WidgetConfig,
+  WidgetSize,
+} from '@oanda/labs-widget-common';
+
+import type { Division } from '../gql/types/graphql';
 
-export { Locale } from '@oanda/mono-i18n';
 export { Division } from '../gql/types/graphql';
+export { Locale } from '@oanda/mono-i18n';
 
 export interface InstrumentLiveRateConfig extends WidgetConfig {
   division: Division;

package/src/InstrumentLiveRateWidget/utils.ts

@@ -1,16 +1,19 @@
-import { useState, useEffect } from 'react';
-import { DataRecord, LiveRatesErrorMessage, useLiveRatesMessage } from '@oanda/labs-widget-common';
-import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+import type {
+  DataRecord,
+  LiveRatesErrorMessage,
+} from '@oanda/labs-widget-common';
+import { useLiveRatesMessage } from '@oanda/labs-widget-common';
+import { useEffect, useState } from 'react';
 
-const getRecords = (data: ValidateInstrumentsQuery) => data?.mapInstrumentNames?.map((item) => ({
-  instrument: item?.name || '',
-  displayName: item?.displayName || '',
-}));
+import type { ValidateInstrumentsQuery } from '../gql/types/graphql';
 
-const useRecords = (
-  record: DataRecord,
-  target: EventTarget | null,
-) => {
+const getRecords = (data: ValidateInstrumentsQuery) =>
+  data?.mapInstrumentNames?.map((item) => ({
+    instrument: item?.name || '',
+    displayName: item?.displayName || '',
+  }));
+
+const useRecords = (record: DataRecord, target: EventTarget | null) => {
   const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({
     displayName: record.displayName,
     instrument: record.instrument,
@@ -20,7 +23,7 @@ const useRecords = (
 
   const { update, error: liveRatesError } = useLiveRatesMessage(
     record.instrument,
-    target,
+    target
   );
 
   useEffect(() => {
@@ -42,7 +45,4 @@ const useRecords = (
   };
 };
 
-export {
-  getRecords,
-  useRecords,
-};
+export { getRecords, useRecords };

package/src/gql/types/fragment-masking.ts

@@ -1,18 +1,21 @@
-import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+  ResultOf,
+  DocumentTypeDecoration,
+  TypedDocumentNode,
+} from '@graphql-typed-document-node/core';
 import { FragmentDefinitionNode } from 'graphql';
 import { Incremental } from './graphql';
 
-
-export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
-  infer TType,
-  any
->
-  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
-    ? TKey extends string
-      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+export type FragmentType<
+  TDocumentType extends DocumentTypeDecoration<any, any>,
+> =
+  TDocumentType extends DocumentTypeDecoration<infer TType, any>
+    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+      ? TKey extends string
+        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        : never
       : never
-    : never
-  : never;
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
@@ -22,7 +25,10 @@ export function useFragment<TType>(
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | null
+    | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
@@ -32,35 +38,49 @@ export function useFragment<TType>(
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 
-
 export function makeFragmentData<
   F extends DocumentTypeDecoration<any, any>,
-  FT extends ResultOf<F>
+  FT extends ResultOf<F>,
 >(data: FT, _fragment: F): FragmentType<F> {
   return data as FragmentType<F>;
 }
 export function isFragmentReady<TQuery, TFrag>(
   queryNode: DocumentTypeDecoration<TQuery, any>,
   fragmentNode: TypedDocumentNode<TFrag>,
-  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+  data:
+    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | null
+    | undefined
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
-    ?.deferredFields;
+  const deferredFields = (
+    queryNode as {
+      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
+    }
+  ).__meta__?.deferredFields;
 
   if (!deferredFields) return true;
 
-  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragDef = fragmentNode.definitions[0] as
+    | FragmentDefinitionNode
+    | undefined;
   const fragName = fragDef?.name?.value;
 
   const fields = (fragName && deferredFields[fragName]) || [];
-  return fields.length > 0 && fields.every(field => data && field in data);
+  return fields.length > 0 && fields.every((field) => data && field in data);
 }

package/src/gql/types/gql.ts

@@ -13,8 +13,10 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n": types.GetInstrumentsChartDocument,
-    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+  '\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n':
+    types.GetInstrumentsChartDocument,
+  '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
+    types.ValidateInstrumentsDocument,
 };
 
 /**
@@ -34,14 +36,19 @@ export 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 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 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 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 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 function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }
 
-export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;