@oanda/labs-ticker-tape-widget 1.0.29 → 1.0.31

package/dist/module/gql/validateInstruments.js.map

@@ -1 +1 @@
-{"version":3,"file":"validateInstruments.js","names":["gql","validateInstruments"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"validateInstruments.js","names":["gql","validateInstruments","_templateObject","_taggedTemplateLiteral"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,sBAAA,4MAOrC","ignoreList":[]}

package/dist/module/translations/index.js

@@ -1,8 +1,8 @@
 import { Locale } from '@oanda/mono-i18n';
 import en from './sources/en.json';
-import zhTW from './sources/zh_TW.json';
 import es from './sources/es.json';
 import th from './sources/th.json';
+import zhTW from './sources/zh_TW.json';
 export const translations = {
   [Locale.en]: {
     translation: en

package/dist/module/translations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Locale","en","zhTW","es","th","translations","translation"],"sources":["../../../src/translations/index.ts"],"sourcesContent":["import { Locale, Translations } from '@oanda/mono-i18n';\n\nimport en from './sources/en.json';\nimport zhTW from './sources/zh_TW.json';\nimport es from './sources/es.json';\nimport th from './sources/th.json';\n\nimport { defaultTranslations } from './translations';\n\nexport type TranslationKey = keyof typeof defaultTranslations;\n\nexport const translations: Translations = {\n  [Locale.en]: { translation: en },\n  [Locale.zhTW]: { translation: zhTW },\n  [Locale.es]: { translation: es },\n  [Locale.th]: { translation: th },\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAsB,kBAAkB;AAEvD,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,IAAI,MAAM,sBAAsB;AACvC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAMlC,OAAO,MAAMC,YAA0B,GAAG;EACxC,CAACL,MAAM,CAACC,EAAE,GAAG;IAAEK,WAAW,EAAEL;EAAG,CAAC;EAChC,CAACD,MAAM,CAACE,IAAI,GAAG;IAAEI,WAAW,EAAEJ;EAAK,CAAC;EACpC,CAACF,MAAM,CAACG,EAAE,GAAG;IAAEG,WAAW,EAAEH;EAAG,CAAC;EAChC,CAACH,MAAM,CAACI,EAAE,GAAG;IAAEE,WAAW,EAAEF;EAAG;AACjC,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Locale","en","es","th","zhTW","translations","translation"],"sources":["../../../src/translations/index.ts"],"sourcesContent":["import type { Translations } from '@oanda/mono-i18n';\nimport { Locale } from '@oanda/mono-i18n';\n\nimport en from './sources/en.json';\nimport es from './sources/es.json';\nimport th from './sources/th.json';\nimport zhTW from './sources/zh_TW.json';\nimport type { defaultTranslations } from './translations';\n\nexport type TranslationKey = keyof typeof defaultTranslations;\n\nexport const translations: Translations = {\n  [Locale.en]: { translation: en },\n  [Locale.zhTW]: { translation: zhTW },\n  [Locale.es]: { translation: es },\n  [Locale.th]: { translation: th },\n};\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,kBAAkB;AAEzC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,IAAI,MAAM,sBAAsB;AAKvC,OAAO,MAAMC,YAA0B,GAAG;EACxC,CAACL,MAAM,CAACC,EAAE,GAAG;IAAEK,WAAW,EAAEL;EAAG,CAAC;EAChC,CAACD,MAAM,CAACI,IAAI,GAAG;IAAEE,WAAW,EAAEF;EAAK,CAAC;EACpC,CAACJ,MAAM,CAACE,EAAE,GAAG;IAAEI,WAAW,EAAEJ;EAAG,CAAC;EAChC,CAACF,MAAM,CAACG,EAAE,GAAG;IAAEG,WAAW,EAAEH;EAAG;AACjC,CAAC","ignoreList":[]}

package/dist/module/translations/translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"translations.js","names":["defaultTranslations","data_unavailable","pagination_entries_range"],"sources":["../../../src/translations/translations.ts"],"sourcesContent":["export const defaultTranslations = {\n  data_unavailable: 'Data unavailable',\n  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAG;EACjCC,gBAAgB,EAAE,kBAAkB;EACpCC,wBAAwB,EAAE;AAC5B,CAAC","ignoreList":[]}
+{"version":3,"file":"translations.js","names":["defaultTranslations","data_unavailable","pagination_entries_range"],"sources":["../../../src/translations/translations.ts"],"sourcesContent":["export const defaultTranslations = {\n  data_unavailable: 'Data unavailable',\n  pagination_entries_range:\n    '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAG;EACjCC,gBAAgB,EAAE,kBAAkB;EACpCC,wBAAwB,EACtB;AACJ,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { MainProps } from './types';
+import type { MainProps } from './types';
 declare const Main: ({ records, division, size: widgetSize, motion, }: MainProps) => React.JSX.Element;
 export { Main };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TickerTapeConfig } from './types';
+import type { TickerTapeConfig } from './types';
 declare const TickerTapeWidget: ({ graphqlUrl, liveRatesUrl, instruments, division, locale, theme, isParamError, removePadding, size, motion, logoLink, }: TickerTapeConfig) => React.JSX.Element;
 export { TickerTapeWidget };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ValidationWrapperProps } from './types';
+import type { ValidationWrapperProps } from './types';
 declare const ValidationWrapper: ({ instruments, division, size: widgetSize, motion, isParamError, }: ValidationWrapperProps) => React.JSX.Element;
 export { ValidationWrapper };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { InstrumentRateWithDataProps } from './types';
+import type { InstrumentRateWithDataProps } from './types';
 declare const InstrumentRateWithData: ({ record, division, target, size, }: InstrumentRateWithDataProps) => React.JSX.Element;
 export { InstrumentRateWithData };

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

@@ -1,5 +1,5 @@
-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;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { MarqueeWrapperProps } from './types';
+import type { MarqueeWrapperProps } from './types';
 declare const MarqueeWrapper: ({ children, shouldPlay, isStatic, }: MarqueeWrapperProps) => React.JSX.Element;
 export { MarqueeWrapper };

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

@@ -1,2 +1,2 @@
 declare const INSTRUMENT_TOOLTIP_ID = "instrument_tooltip_id";
-export { INSTRUMENT_TOOLTIP_ID, };
+export { INSTRUMENT_TOOLTIP_ID };

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.29",
+  "version": "1.0.31",
   "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.173",
+    "@oanda/labs-widget-common": "^1.0.175",
     "@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": "67a7801f99f0bab94dd6067a102761f51de786c1"
+  "gitHead": "ffe302e74b4bdf5fb28f1f7be09cfd2cb7672eb3"
 }

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,8 +1,10 @@
-import React from 'react';
 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 = ({
@@ -29,30 +31,30 @@ const TickerTapeWidget = ({
   return (
     <WidgetProvider
       withSuspense
-      locale={locale}
-      translations={translations}
       client={client}
-      theme={theme}
-      styling={{
-        removePadding,
-        fitContent: motion === 'none',
-      }}
       liveRates={{
         url: liveRatesUrl,
         options: { divisionCode, dataSource },
       }}
+      locale={locale}
+      styling={{
+        removePadding,
+        fitContent: motion === 'none',
+      }}
+      theme={theme}
+      translations={translations}
     >
       <WidgetWrapper
-        logoLink={logoLink}
-        linkArea="full"
         isParamError={isParamError}
+        linkArea="full"
+        logoLink={logoLink}
       >
         <ValidationWrapper
-          size={size}
-          motion={motion}
-          instruments={instruments}
           division={division}
+          instruments={instruments}
           isParamError={isParamError}
+          motion={motion}
+          size={size}
         />
       </WidgetWrapper>
     </WidgetProvider>

package/src/TickerTapeWidget/ValidationWrapper.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
-import classnames from 'classnames';
 import { Error, useLayoutProvider } from '@oanda/labs-widget-common';
+import classnames from 'classnames';
+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,
@@ -17,8 +21,8 @@ const ValidationWrapper = ({
 }: ValidationWrapperProps) => {
   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 };