@oanda/labs-currency-cross-table 1.0.24 → 1.0.25

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    resolveInstrumentsByDivision(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"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\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;AACA;AACA;AACA,CAAC","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/CurrencyCrossTableWidget/CurrencyCrossTableWidget.d.ts

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

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

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

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

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

package/dist/types/CurrencyCrossTableWidget/components/Cell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CellProps } from './types';
+import type { CellProps } from './types';
 declare const Cell: ({ children, isError, isLoading, hovered, mouseEnterHandler, mouseLeaveHandler, }: CellProps) => React.JSX.Element;
 export { Cell };

package/dist/types/CurrencyCrossTableWidget/components/CellWithData.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CellWithDataProps } from './types';
+import type { CellWithDataProps } from './types';
 declare const CellWithData: ({ currency, pair, isValid, target, division, setSelectedCurrency, setSelectedPair, }: CellWithDataProps) => React.JSX.Element;
 export { CellWithData };

package/dist/types/CurrencyCrossTableWidget/components/TextCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TextCellProps } from './types';
+import type { TextCellProps } from './types';
 declare const TextCell: ({ label, emptyIndicator, hovered, sticky, }: TextCellProps) => React.JSX.Element;
 export { TextCell };

package/dist/types/CurrencyCrossTableWidget/components/types.d.ts

@@ -1,5 +1,5 @@
-import { LoaderSize } from '@oanda/labs-widget-common';
-import { Division } from '../../gql/types/graphql';
+import type { LoaderSize } from '@oanda/labs-widget-common';
+import type { Division } from '../../gql/types/graphql';
 export interface CellWithDataProps {
     currency: string;
     pair: string;

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

@@ -2,4 +2,4 @@ declare const MAJOR_CURRENCIES: string[];
 declare const INSTRUMENT_TOOLTIP_ID = "instrument_tooltip_id";
 declare const CELL_LOADING_VALUE = "...";
 declare const CELL_EMPTY_VALUE = "\u2014";
-export { MAJOR_CURRENCIES, INSTRUMENT_TOOLTIP_ID, CELL_LOADING_VALUE, CELL_EMPTY_VALUE, };
+export { CELL_EMPTY_VALUE, CELL_LOADING_VALUE, INSTRUMENT_TOOLTIP_ID, MAJOR_CURRENCIES, };

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

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

package/dist/types/CurrencyCrossTableWidget/types.d.ts

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

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

@@ -1,7 +1,7 @@
-import { Division } from '../gql/types/graphql';
+import type { Division } from '../gql/types/graphql';
 declare const validCurrencies: (currencies: string[]) => boolean;
 declare const divisionMapper: (division: Division) => "" | "_";
-declare const currenciesToInstruments: (currencies: string[], division: any) => string[];
+declare const currenciesToInstruments: (currencies: string[], division: Division) => string[];
 declare const getPriceMovement: (priceMovement: number | undefined, isReversed: boolean) => number;
 declare const getBuyPrice: (price: number | undefined, isReversed: boolean) => number;
-export { validCurrencies, currenciesToInstruments, divisionMapper, getPriceMovement, getBuyPrice, };
+export { currenciesToInstruments, divisionMapper, getBuyPrice, getPriceMovement, validCurrencies, };

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

@@ -11,7 +11,7 @@ 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 validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": DocumentNode<types.ValidateInstrumentsQuery, types.Exact<{
+    '\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(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.Division;
     }>>;
@@ -32,6 +32,6 @@ 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 validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+export declare function graphql(source: '\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n'): (typeof documents)['\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(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-currency-cross-table",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "Labs Currency Cross Table",
   "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.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": "67a7801f99f0bab94dd6067a102761f51de786c1"
+  "gitHead": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/CurrencyCrossTableWidget/CurrencyCrossTableWidget.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import React from 'react';
+
+import { Division } from '../gql/types/graphql';
 import { translations } from '../translations';
-import { CurrencyCrossTableConfig } from './types';
+import type { CurrencyCrossTableConfig } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
-import { Division } from '../gql/types/graphql';
 
 const CurrencyCrossTableWidget = ({
   graphqlUrl,
@@ -28,22 +29,19 @@ const CurrencyCrossTableWidget = ({
   return (
     <WidgetProvider
       withSuspense
-      locale={locale}
-      translations={translations}
       client={client}
-      theme={theme}
-      styling={{
-        removePadding,
-      }}
       liveRates={{
         url: liveRatesUrl,
         options: { divisionCode, dataSource },
       }}
+      locale={locale}
+      styling={{
+        removePadding,
+      }}
+      theme={theme}
+      translations={translations}
     >
-      <WidgetWrapper
-        logoLink={logoLink}
-        linkArea="full"
-      >
+      <WidgetWrapper linkArea="full" logoLink={logoLink}>
         <ValidationWrapper
           currencies={currencies}
           division={division}

package/src/CurrencyCrossTableWidget/Main.tsx

@@ -1,16 +1,11 @@
-import React, {
-  Fragment, useEffect, useState,
-} from 'react';
 import { useLiveRatesQuery } from '@oanda/labs-widget-common';
-import { MainProps } from './types';
+import React, { Fragment, useEffect, useState } from 'react';
+
 import { CellWithData, TextCell } from './components';
+import type { MainProps } from './types';
 import { divisionMapper } from './utils';
 
-const Main = ({
-  currencies,
-  validInstruments,
-  division,
-}: MainProps) => {
+const Main = ({ currencies, validInstruments, division }: MainProps) => {
   const [selectedCurrency, setSelectedCurrency] = useState('');
   const [selectedPair, setSelectedPair] = useState('');
   const { target, setQuery } = useLiveRatesQuery();
@@ -21,38 +16,36 @@ const Main = ({
   }, validInstruments);
 
   return (
-    <div data-testid="currency-cross-table-wrapper" className="lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary">
+    <div
+      className="lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary"
+      data-testid="currency-cross-table-wrapper"
+    >
       <div className="lw-flex lw-w-max lw-min-w-full">
         <TextCell sticky />
-        {currencies.map(((pair) => (
-          <TextCell
-            key={pair}
-            label={pair}
-            hovered={pair === selectedPair}
-          />
-        )))}
+        {currencies.map((pair) => (
+          <TextCell key={pair} hovered={pair === selectedPair} label={pair} />
+        ))}
       </div>
-      {currencies.map(((currency, index, arr) => (
-        <div
-          key={currency}
-          className="lw-flex lw-w-max lw-min-w-full"
-        >
+      {currencies.map((currency, index, arr) => (
+        <div key={currency} className="lw-flex lw-w-max lw-min-w-full">
           <TextCell
-            label={currency}
-            hovered={currency === selectedCurrency}
             sticky
+            hovered={currency === selectedCurrency}
+            label={currency}
           />
           {arr.map((pair) => (
             <Fragment key={`${currency}_${pair}`}>
               {currency !== pair ? (
                 <CellWithData
                   currency={currency}
+                  division={division}
+                  isValid={validInstruments.includes(
+                    `${currency}${divisionMapper(division)}${pair}`
+                  )}
                   pair={pair}
-                  isValid={validInstruments.includes(`${currency}${divisionMapper(division)}${pair}`)}
-                  target={target}
                   setSelectedCurrency={setSelectedCurrency}
                   setSelectedPair={setSelectedPair}
-                  division={division}
+                  target={target}
                 />
               ) : (
                 <TextCell emptyIndicator />
@@ -60,7 +53,7 @@ const Main = ({
             </Fragment>
           ))}
         </div>
-      )))}
+      ))}
     </div>
   );
 };

package/src/CurrencyCrossTableWidget/ValidationWrapper.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
-import classnames from 'classnames';
-import { ChartError } from '@oanda/labs-widget-common';
 import { useSuspenseQuery } from '@apollo/client';
-import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
+import { ChartError } 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 { currenciesToInstruments, validCurrencies } from './utils';
-import { ValidationWrapperProps } from './types';
 import { Main } from './Main';
+import type { ValidationWrapperProps } from './types';
+import { currenciesToInstruments, validCurrencies } from './utils';
 
 const ValidationWrapper = ({
   currencies,
@@ -16,8 +20,8 @@ const ValidationWrapper = ({
   const instruments = currenciesToInstruments(currencies, division);
 
   const { data, error } = useSuspenseQuery<
-  ValidateInstrumentsQuery,
-  ValidateInstrumentsQueryVariables
+    ValidateInstrumentsQuery,
+    ValidateInstrumentsQueryVariables
   >(validateInstruments, {
     variables: {
       instruments,
@@ -27,29 +31,32 @@ const ValidationWrapper = ({
     errorPolicy: 'all',
   });
 
-  const validInstruments = data
-    ?.resolveInstrumentsByDivision
-    ?.map((instrument) => instrument.name);
-  const showError = !validCurrencies(currencies)
-    || isParamError
-    || error
-    || !validInstruments
-    || validInstruments.length === 0;
+  const validInstruments = data?.resolveInstrumentsByDivision?.map(
+    (instrument) => instrument.name
+  );
+  const showError =
+    !validCurrencies(currencies) ||
+    isParamError ||
+    error ||
+    !validInstruments ||
+    validInstruments.length === 0;
 
   return (
     <>
-      <div
-        className="lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary"
-      >
+      <div className="lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary">
         {!showError && (
           <Main
-            validInstruments={validInstruments}
             currencies={currencies}
             division={division}
+            validInstruments={validInstruments}
           />
         )}
         {showError && (
-          <div className={classnames('lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary')}>
+          <div
+            className={classnames(
+              'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'
+            )}
+          >
             <ChartError />
           </div>
         )}

package/src/CurrencyCrossTableWidget/components/Cell.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import classnames from 'classnames';
-import { CellProps } from './types';
+import React from 'react';
+
 import { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';
+import type { CellProps } from './types';
 
 const Cell = ({
   children,
@@ -12,17 +13,19 @@ const Cell = ({
   mouseLeaveHandler,
 }: CellProps) => (
   <div
-    className={classnames('lw-flex lw-h-11 lw-min-w-[70px] lw-flex-1 lw-items-center lw-justify-center lw-border-b lw-border-r lw-border-solid lw-border-border-primary last:lw-border-r-[0px]', {
-      'lw-bg-border-primary lw-font-semibold lw-shadow-innerBorderBgColor': hovered,
-    })}
+    className={classnames(
+      'lw-flex lw-h-11 lw-min-w-[70px] lw-flex-1 lw-items-center lw-justify-center lw-border-b lw-border-r lw-border-solid lw-border-border-primary last:lw-border-r-[0px]',
+      {
+        'lw-bg-border-primary lw-font-semibold lw-shadow-innerBorderBgColor':
+          hovered,
+      }
+    )}
     onMouseEnter={mouseEnterHandler}
     onMouseLeave={mouseLeaveHandler}
   >
     {isLoading && <div className="lw-px-3 lw-py-3.5">{CELL_LOADING_VALUE}</div>}
     {!isLoading && !isError && children}
-    {!isLoading && isError && (
-      <span>{CELL_EMPTY_VALUE}</span>
-    )}
+    {!isLoading && isError && <span>{CELL_EMPTY_VALUE}</span>}
   </div>
 );
 

package/src/CurrencyCrossTableWidget/components/CellWithData.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
 import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';
-import { Cell } from './Cell';
-import { CellWithDataProps } from './types';
+import React, { useState } from 'react';
+
 import { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';
+import { Cell } from './Cell';
+import type { CellWithDataProps } from './types';
 
 const CellWithData = ({
   currency,
@@ -16,22 +17,25 @@ const CellWithData = ({
   const [hovered, setHovered] = useState(false);
 
   const instrument = `${currency}${divisionMapper(division)}${pair}`;
-  const instrumentForUpdates = isValid ? instrument : `${pair}${divisionMapper(division)}${currency}`;
+  const instrumentForUpdates = isValid
+    ? instrument
+    : `${pair}${divisionMapper(division)}${currency}`;
 
   const { update, error: liveRatesError } = useLiveRatesMessage(
     instrumentForUpdates,
-    target,
+    target
   );
 
-  const updatedRecord: Record<string, any> = {
+  const updatedRecord = {
     displayName: `${currency}/${pair}`,
     instrument,
     buy: update?.ask,
     buyPriceMovement: update?.askPriceMovement,
-    displayPrecision: currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,
+    displayPrecision:
+      currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,
   };
 
-  const checkLoading = (id: string) => (!liveRatesError && updatedRecord?.[id] === undefined);
+  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;
 
   const handleMouseEnter = () => {
     setHovered(true);
@@ -47,18 +51,23 @@ const CellWithData = ({
 
   return (
     <Cell
-      isLoading={checkLoading('buy')}
-      isError={!!liveRatesError}
       hovered={hovered}
+      isError={!!liveRatesError}
+      isLoading={checkLoading()}
       mouseEnterHandler={handleMouseEnter}
       mouseLeaveHandler={handleMouseLeave}
     >
-      <Price priceMovement={getPriceMovement(updatedRecord.buyPriceMovement, !isValid)} movementIndicator="background">
+      <Price
+        movementIndicator="background"
+        priceMovement={getPriceMovement(
+          updatedRecord.buyPriceMovement,
+          !isValid
+        )}
+      >
         <span>
-          {getBuyPrice(
-            updatedRecord.buy,
-            !isValid,
-          ).toFixed(updatedRecord.displayPrecision)}
+          {getBuyPrice(updatedRecord.buy, !isValid).toFixed(
+            updatedRecord.displayPrecision
+          )}
         </span>
       </Price>
     </Cell>

package/src/CurrencyCrossTableWidget/components/TextCell.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import classnames from 'classnames';
-import { TextCellProps } from './types';
+import React from 'react';
+
+import type { TextCellProps } from './types';
 
 const TextCell = ({
   label,
@@ -8,13 +9,17 @@ const TextCell = ({
   hovered,
   sticky,
 }: TextCellProps) => (
-  <span className={classnames('lw-h-11 lw-min-w-[70px] lw-flex-1 lw-border-b lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center last:lw-border-r-[0px]', {
-    'lw-bg-border-primary': emptyIndicator,
-    'lw-shadow-innerBorderBgColor': emptyIndicator && hovered,
-    'lw-bg-border-primary lw-font-semibold': hovered,
-    'lw-sticky lw-left-0 lw-z-10': sticky,
-    'lw-bg-bg-primary': sticky && !hovered,
-  })}
+  <span
+    className={classnames(
+      'lw-h-11 lw-min-w-[70px] lw-flex-1 lw-border-b lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center last:lw-border-r-[0px]',
+      {
+        'lw-bg-border-primary': emptyIndicator,
+        'lw-shadow-innerBorderBgColor': emptyIndicator && hovered,
+        'lw-bg-border-primary lw-font-semibold': hovered,
+        'lw-sticky lw-left-0 lw-z-10': sticky,
+        'lw-bg-bg-primary': sticky && !hovered,
+      }
+    )}
   >
     {label}
   </span>

package/src/CurrencyCrossTableWidget/components/types.ts

@@ -1,5 +1,6 @@
-import { LoaderSize } from '@oanda/labs-widget-common';
-import { Division } from '../../gql/types/graphql';
+import type { LoaderSize } from '@oanda/labs-widget-common';
+
+import type { Division } from '../../gql/types/graphql';
 
 export interface CellWithDataProps {
   currency: string;

package/src/CurrencyCrossTableWidget/constant.ts

@@ -1,4 +1,13 @@
-const MAJOR_CURRENCIES = ['EUR', 'USD', 'JPY', 'GBP', 'CHF', 'AUD', 'CAD', 'NZD'];
+const MAJOR_CURRENCIES = [
+  'EUR',
+  'USD',
+  'JPY',
+  'GBP',
+  'CHF',
+  'AUD',
+  'CAD',
+  'NZD',
+];
 
 const INSTRUMENT_TOOLTIP_ID = 'instrument_tooltip_id';
 
@@ -7,8 +16,8 @@ const CELL_LOADING_VALUE = '...';
 const CELL_EMPTY_VALUE = '\u2014';
 
 export {
-  MAJOR_CURRENCIES,
-  INSTRUMENT_TOOLTIP_ID,
-  CELL_LOADING_VALUE,
   CELL_EMPTY_VALUE,
+  CELL_LOADING_VALUE,
+  INSTRUMENT_TOOLTIP_ID,
+  MAJOR_CURRENCIES,
 };

package/src/CurrencyCrossTableWidget/index.ts

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