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

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';

package/src/CurrencyCrossTableWidget/render.tsx

@@ -1,50 +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 { CurrencyCrossTableWidget } from './CurrencyCrossTableWidget';
+
 import { Division } from '../gql/types/graphql';
+import { CurrencyCrossTableWidget } from './CurrencyCrossTableWidget';
 
-const {
-  graphqlUrl,
-  liveRatesUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
 
-const currencyCrossTableElements = document.querySelectorAll('div[data-currency-cross-table-params]');
+const currencyCrossTableElements = document.querySelectorAll(
+  'div[data-currency-cross-table-params]'
+);
 
 currencyCrossTableElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-currency-cross-table-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    currencies, division, locale,
-  } = JSON.parse(params as string);
+  const { currencies, division, locale } = JSON.parse(params as string);
 
-  const isParamError = validateToolParams({
-    division, locale, currencies, graphqlUrl, liveRatesUrl,
-  }, [{
-    name: 'locale',
-    valueCheck: (value) => validateLocale(value),
-  }, {
-    name: 'division',
-    valueCheck: (value) => Object.values(Division).includes(value),
-  }, {
-    name: 'currencies',
-    valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 8,
-  }, {
-    name: 'graphqlUrl',
-  }, {
-    name: 'liveRatesUrl',
-  }]);
+  const isParamError = validateToolParams(
+    {
+      division,
+      locale,
+      currencies,
+      graphqlUrl,
+      liveRatesUrl,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value: string | undefined) => validateLocale(value),
+      },
+      {
+        name: 'division',
+        valueCheck: (value: Division) =>
+          Object.values(Division).includes(value),
+      },
+      {
+        name: 'currencies',
+        valueCheck: (value) =>
+          (value as string[]).length > 0 && (value as string[]).length <= 8,
+      },
+      {
+        name: 'graphqlUrl',
+      },
+      {
+        name: 'liveRatesUrl',
+      },
+    ]
+  );
 
   root.render(
     <CurrencyCrossTableWidget
+      currencies={currencies}
+      division={division}
       graphqlUrl={graphqlUrl}
+      isParamError={isParamError}
       liveRatesUrl={liveRatesUrl}
-      division={division}
-      currencies={currencies}
       locale={locale}
       theme={mode as Theme}
-      isParamError={isParamError}
-    />,
+    />
   );
 });

package/src/CurrencyCrossTableWidget/types.tsx

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

package/src/CurrencyCrossTableWidget/utils.ts

@@ -1,12 +1,12 @@
+import type { Division } from '../gql/types/graphql';
 import { MAJOR_CURRENCIES } from './constant';
-import { Division } from '../gql/types/graphql';
 
-const validCurrencies = (currencies: string[]) => currencies
-  .every((currency) => MAJOR_CURRENCIES.includes(currency));
+const validCurrencies = (currencies: string[]) =>
+  currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));
 
 const divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');
 
-const currenciesToInstruments = (currencies: string[], division: any) => {
+const currenciesToInstruments = (currencies: string[], division: Division) => {
   const pairs = currencies.reduce((acc, cV, index, array) => {
     const unique = array.filter((_item, idx) => index !== idx);
 
@@ -19,7 +19,10 @@ const currenciesToInstruments = (currencies: string[], division: any) => {
   return pairs;
 };
 
-const getPriceMovement = (priceMovement: number | undefined, isReversed: boolean) => {
+const getPriceMovement = (
+  priceMovement: number | undefined,
+  isReversed: boolean
+) => {
   if (priceMovement === undefined) return 0;
 
   return isReversed ? priceMovement * -1 : priceMovement;
@@ -32,9 +35,9 @@ const getBuyPrice = (price: number | undefined, isReversed: boolean) => {
 };
 
 export {
-  validCurrencies,
   currenciesToInstruments,
   divisionMapper,
-  getPriceMovement,
   getBuyPrice,
+  getPriceMovement,
+  validCurrencies,
 };

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,7 +13,8 @@ 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 validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+  '\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
+    types.ValidateInstrumentsDocument,
 };
 
 /**
@@ -33,10 +34,13 @@ 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 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 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 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;