@oanda/labs-ticker-tape-widget 1.0.28 → 1.0.30

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

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

package/dist/types/TickerTapeWidget/types.d.ts

@@ -1,7 +1,7 @@
-import { DataRecord, WidgetConfig, WidgetSize } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
-export { Locale } from '@oanda/mono-i18n';
+import type { DataRecord, WidgetConfig, WidgetSize } 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 interface TickerTapeConfig extends WidgetConfig {
     division: Division;
     liveRatesUrl: string;

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

@@ -1,5 +1,5 @@
-import { DataRecord, LiveRatesErrorMessage } from '@oanda/labs-widget-common';
-import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+import type { DataRecord, LiveRatesErrorMessage } from '@oanda/labs-widget-common';
+import type { ValidateInstrumentsQuery } from '../gql/types/graphql';
 declare const getRecords: (data: ValidateInstrumentsQuery) => {
     instrument: string;
     displayName: string;
@@ -8,4 +8,4 @@ declare const useRecords: (record: DataRecord, target: EventTarget | null) => {
     updatedRecord: DataRecord;
     error: LiveRatesErrorMessage | null;
 };
-export { getRecords, useRecords, };
+export { 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/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-ticker-tape-widget",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Labs Ticker Tape 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",
     "react-fast-marquee": "1.6.5"
@@ -21,5 +21,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
+  "gitHead": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/TickerTapeWidget/Main.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect } from 'react';
-import classnames from 'classnames';
 import { Tooltip, useLiveRatesQuery } from '@oanda/labs-widget-common';
-import { MainProps } from './types';
-import { INSTRUMENT_TOOLTIP_ID } from './constant';
+import classnames from 'classnames';
+import React, { useEffect } from 'react';
+
 import { InstrumentRateWithData } from './components/InstrumentRateWithData';
 import { MarqueeWrapper } from './components/MarqueeWrapper';
+import { INSTRUMENT_TOOLTIP_ID } from './constant';
+import type { MainProps } from './types';
 
 const Main = ({
   records,
@@ -14,7 +15,9 @@ const Main = ({
 }: MainProps) => {
   const { target, setQuery } = useLiveRatesQuery();
 
-  const instrumentsNames = records.map(({ instrument: instrumentName }) => instrumentName);
+  const instrumentsNames = records.map(
+    ({ instrument: instrumentName }) => instrumentName
+  );
 
   useEffect(() => {
     if (instrumentsNames[0]) {
@@ -24,22 +27,28 @@ const Main = ({
   }, [records]);
 
   return (
-    <div data-testid="ticker-tape-wrapper" className="lw-flex">
-      <MarqueeWrapper shouldPlay={records.length > 0} isStatic={motion === 'none'}>
+    <div className="lw-flex" data-testid="ticker-tape-wrapper">
+      <MarqueeWrapper
+        isStatic={motion === 'none'}
+        shouldPlay={records.length > 0}
+      >
         {records.map((record) => (
           <div
             key={record.instrument}
-            className={classnames('lw-flex lw-border lw-border-r-0 lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary', {
-              'lw-h-[82px]': widgetSize !== 'compact',
-              'lw-h-[54px]': widgetSize === 'compact',
-              'lw-w-fit last:lw-border-r': motion === 'none',
-            })}
+            className={classnames(
+              'lw-flex lw-border lw-border-r-0 lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary',
+              {
+                'lw-h-[82px]': widgetSize !== 'compact',
+                'lw-h-[54px]': widgetSize === 'compact',
+                'lw-w-fit last:lw-border-r': motion === 'none',
+              }
+            )}
           >
             <InstrumentRateWithData
-              record={record}
-              target={target}
               division={division}
+              record={record}
               size={widgetSize}
+              target={target}
             />
           </div>
         ))}

package/src/TickerTapeWidget/TickerTapeWidget.tsx

@@ -1,11 +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, TickerTapeConfig } from './types';
+import type { TickerTapeConfig } from './types';
+import { Division } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
 
 const TickerTapeWidget = ({
@@ -30,30 +29,35 @@ const TickerTapeWidget = ({
   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,
+        fitContent: motion === 'none',
+      }}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="full"
+        logoLink={logoLink}
       >
-        <ApolloProvider client={client}>
-          <Suspense>
-            <ThemeProvider removePadding={removePadding} theme={theme} fitContent={motion === 'none'}>
-              {renderComponent({
-                Component: <ValidationWrapper
-                  size={size}
-                  motion={motion}
-                  instruments={instruments}
-                  division={division}
-                  isParamError={isParamError}
-                />,
-                logoLink,
-                linkArea: 'full',
-              })}
-            </ThemeProvider>
-          </Suspense>
-        </ApolloProvider>
-      </LiveRatesProvider>
-    </LocaleProvider>
+        <ValidationWrapper
+          division={division}
+          instruments={instruments}
+          isParamError={isParamError}
+          motion={motion}
+          size={size}
+        />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/TickerTapeWidget/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 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';
-import { ValidationWrapperProps } from './types';
 
 const ValidationWrapper = ({
   instruments,
@@ -15,10 +19,10 @@ const ValidationWrapper = ({
   motion,
   isParamError,
 }: ValidationWrapperProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const { data, error } = useSuspenseQuery<
-  ValidateInstrumentsQuery,
-  ValidateInstrumentsQueryVariables
+    ValidateInstrumentsQuery,
+    ValidateInstrumentsQueryVariables
   >(validateInstruments, {
     variables: {
       instruments,
@@ -34,20 +38,24 @@ const ValidationWrapper = ({
     <>
       {!showError && size && (
         <Main
-          size={widgetSize}
           division={division}
-          records={getRecords(data!)!}
           motion={motion}
+          records={getRecords(data!)!}
+          size={widgetSize}
         />
       )}
       {showError && (
-      <div className={classnames('lw-flex lw-border lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary', {
-        'lw-h-[82px]': widgetSize !== 'compact',
-        'lw-h-[54px]': widgetSize === 'compact',
-      })}
-      >
-        <Error />
-      </div>
+        <div
+          className={classnames(
+            'lw-flex lw-border lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary',
+            {
+              'lw-h-[82px]': widgetSize !== 'compact',
+              'lw-h-[54px]': widgetSize === 'compact',
+            }
+          )}
+        >
+          <Error />
+        </div>
       )}
     </>
   );

package/src/TickerTapeWidget/components/InstrumentRateWithData/InstrumentRateWithData.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
 import { useBackgroundQuery } from '@apollo/client';
 import { InstrumentRateWithChart } from '@oanda/labs-widget-common';
-import { InstrumentRateWithDataProps } from './types';
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+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 { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import type { InstrumentRateWithDataProps } from './types';
 
 const InstrumentRateWithData = ({
   record,
@@ -15,8 +19,8 @@ const InstrumentRateWithData = ({
   const hasInstrument = !!record.instrument;
 
   const [queryRef] = useBackgroundQuery<
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables
+    GetInstrumentsChartQuery,
+    GetInstrumentsChartQueryVariables
   >(getInstrumentsChart, {
     variables: {
       instruments: [record.instrument],
@@ -28,11 +32,11 @@ const InstrumentRateWithData = ({
 
   return (
     <InstrumentRateWithChart<GetInstrumentsChartQuery>
+      queryRef={queryRef}
       record={record}
-      target={target}
       size={size}
+      target={target}
       tooltipId={INSTRUMENT_TOOLTIP_ID}
-      queryRef={queryRef}
     />
   );
 };

package/src/TickerTapeWidget/components/InstrumentRateWithData/types.ts

@@ -1,9 +1,10 @@
-import { DataRecord, WidgetSize } from '@oanda/labs-widget-common';
-import { Division } from '../../types';
+import type { DataRecord, WidgetSize } from '@oanda/labs-widget-common';
+
+import type { Division } from '../../types';
 
 export interface InstrumentRateWithDataProps {
   record: DataRecord;
   target: EventTarget | null;
   division: Division;
-  size?: WidgetSize
+  size?: WidgetSize;
 }

package/src/TickerTapeWidget/components/MarqueeWrapper/MarqueeWrapper.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Marquee from 'react-fast-marquee';
-import { MarqueeWrapperProps } from './types';
+
+import type { MarqueeWrapperProps } from './types';
 
 const MarqueeWrapper = ({
   children,
@@ -9,15 +10,12 @@ const MarqueeWrapper = ({
 }: MarqueeWrapperProps) => (
   <>
     {!isStatic ? (
-      <Marquee
-        play={shouldPlay}
-        autoFill
-        pauseOnHover
-        speed={60}
-      >
+      <Marquee autoFill pauseOnHover play={shouldPlay} speed={60}>
         {children}
       </Marquee>
-    ) : children}
+    ) : (
+      children
+    )}
   </>
 );
 

package/src/TickerTapeWidget/constant.ts

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

package/src/TickerTapeWidget/index.ts

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

package/src/TickerTapeWidget/render.tsx

@@ -1,52 +1,67 @@
+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 { TickerTapeWidget } from './TickerTapeWidget';
+
 import { Division } from '../gql/types/graphql';
+import { TickerTapeWidget } from './TickerTapeWidget';
 
-const {
-  graphqlUrl,
-  liveRatesUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
 
-const dataTickerTapeParamsElements = document.querySelectorAll('div[data-ticker-tape-params]');
+const dataTickerTapeParamsElements = document.querySelectorAll(
+  'div[data-ticker-tape-params]'
+);
 
 dataTickerTapeParamsElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-ticker-tape-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    instruments, division, locale, size, motion,
-  } = JSON.parse(params as string);
+  const { instruments, division, locale, size, motion } = JSON.parse(
+    params as string
+  );
 
-  const isParamError = validateToolParams({
-    division, locale, graphqlUrl, liveRatesUrl, instruments,
-  }, [{
-    name: 'locale',
-    valueCheck: (value) => validateLocale(value),
-  }, {
-    name: 'division',
-    valueCheck: (value) => Object.values(Division).includes(value),
-  }, {
-    name: 'instruments',
-    valueCheck: (value) => value.length > 0 && value.length <= 10,
-  }, {
-    name: 'graphqlUrl',
-  }, {
-    name: 'liveRatesUrl',
-  }]);
+  const isParamError = validateToolParams(
+    {
+      division,
+      locale,
+      graphqlUrl,
+      liveRatesUrl,
+      instruments,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value: string | undefined) => validateLocale(value),
+      },
+      {
+        name: 'division',
+        valueCheck: (value: Division) =>
+          Object.values(Division).includes(value),
+      },
+      {
+        name: 'instruments',
+        valueCheck: (value) => value.length > 0 && value.length <= 10,
+      },
+      {
+        name: 'graphqlUrl',
+      },
+      {
+        name: 'liveRatesUrl',
+      },
+    ]
+  );
 
   root.render(
     <TickerTapeWidget
-      graphqlUrl={graphqlUrl}
-      liveRatesUrl={liveRatesUrl}
       division={division}
+      graphqlUrl={graphqlUrl}
       instruments={instruments}
-      locale={locale}
-      theme={mode as Theme}
       isParamError={isParamError}
-      size={size}
+      liveRatesUrl={liveRatesUrl}
+      locale={locale}
       motion={motion}
-    />,
+      size={size}
+      theme={mode as Theme}
+    />
   );
 });

package/src/TickerTapeWidget/types.ts

@@ -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 TickerTapeConfig extends WidgetConfig {
   division: Division;

package/src/TickerTapeWidget/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 };