@oanda/labs-currency-cross-table 1.0.6 → 1.0.8

package/src/CurrencyCrossTableWidget/components/CellWithData.tsx

@@ -1,35 +1,45 @@
 import React, { useState } from 'react';
-import { Price } from '@oanda/labs-widget-common';
-import { useRecords } from '../utils';
-import { CellWithDataProps } from './types';
+import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';
 import { Cell } from './Cell';
+import { CellWithDataProps } from './types';
+import { getBuyPrice, getPriceMovement } from '../utils';
 
 const CellWithData = ({
-  loading,
+  currency,
+  pair,
   record,
+  instrumentForCalculations,
   target,
-  additionalBorderBottom,
   setSelectedCurrency,
   setSelectedPair,
 }: CellWithDataProps) => {
   const [hovered, setHovered] = useState(false);
-  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);
 
-  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);
+  const instrumentForUpdates = instrumentForCalculations || record.instrument;
 
-  const handleMouseEnter = () => {
-    setHovered(true);
+  const { update, error: liveRatesError } = useLiveRatesMessage(
+    instrumentForUpdates,
+    target,
+  );
 
-    const currency = record.instrument.substring(0, 3);
-    const pair = record.instrument.substring(record.instrument.length - 3);
+  const updatedRecord: Record<string, any> = {
+    displayName: record.displayName,
+    instrument: record.instrument,
+    buy: update?.ask,
+    buyPriceMovement: update?.askPriceMovement,
+    displayPrecision: update?.displayPrecision,
+  };
+
+  const checkLoading = (id: string) => (!liveRatesError && updatedRecord?.[id] === undefined);
 
+  const handleMouseEnter = () => {
+    setHovered(true);
     setSelectedCurrency(currency);
     setSelectedPair(pair);
   };
 
   const handleMouseLeave = () => {
     setHovered(false);
-
     setSelectedCurrency('');
     setSelectedPair('');
   };
@@ -37,14 +47,18 @@ const CellWithData = ({
   return (
     <Cell
       isLoading={checkLoading('buy')}
-      isError={!!error}
-      additionalBorderBottom={additionalBorderBottom}
+      isError={!!liveRatesError}
       hovered={hovered}
       mouseEnterHandler={handleMouseEnter}
       mouseLeaveHandler={handleMouseLeave}
     >
-      <Price priceMovement={updatedRecord.buyPriceMovement} movementIndicator="background">
-        <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>
+      <Price priceMovement={getPriceMovement(updatedRecord.buyPriceMovement, !!instrumentForCalculations)} movementIndicator="background">
+        <span>
+          {getBuyPrice(
+            updatedRecord.buy,
+            !!instrumentForCalculations,
+          ).toFixed(updatedRecord.displayPrecision)}
+        </span>
       </Price>
     </Cell>
   );

package/src/CurrencyCrossTableWidget/components/TextCell.tsx

@@ -5,13 +5,15 @@ import { TextCellProps } from './types';
 const TextCell = ({
   label,
   emptyIndicator,
-  additionalBorderBottom,
   hovered,
+  sticky,
 }: TextCellProps) => (
-  <span className={classnames('lw-flex-1 lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center', {
-    'lw-border-b': additionalBorderBottom,
+  <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-font-semibold': hovered,
+    '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}

package/src/CurrencyCrossTableWidget/components/types.ts

@@ -1,10 +1,22 @@
 import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';
+import { Division } from '../../gql/types/graphql';
 
+export interface CellValidationWrapperProps {
+  currency: string;
+  pair: string;
+  instrument: string;
+  target: EventTarget | null;
+  division: Division;
+  setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
+}
 export interface CellWithDataProps {
-  loading: boolean;
+  currency: string;
+  pair: string;
+  instrumentForCalculations: string;
   record: DataRecord;
   target: EventTarget | null;
-  additionalBorderBottom? : boolean;
+  division: Division;
   setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
   setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
 }
@@ -14,7 +26,6 @@ export interface CellProps {
   isLoading?: boolean;
   isError?: boolean;
   loaderSize?: LoaderSize;
-  additionalBorderBottom? : boolean;
   hovered: boolean;
   mouseEnterHandler: () => void;
   mouseLeaveHandler: () => void;
@@ -23,6 +34,6 @@ export interface CellProps {
 export interface TextCellProps {
   label?: string;
   emptyIndicator?: boolean;
-  additionalBorderBottom? : boolean;
   hovered?: boolean;
+  sticky?: boolean;
 }

package/src/CurrencyCrossTableWidget/render.tsx

@@ -2,9 +2,10 @@ 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 './types';
+import { Division } from '../gql/types/graphql';
 
 const {
+  graphqlUrl,
   liveRatesUrl,
 } = window.widgetsConfig || {};
 
@@ -19,7 +20,7 @@ currencyCrossTableElements.forEach((element) => {
   } = JSON.parse(params as string);
 
   const isParamError = validateToolParams({
-    division, locale, currencies, liveRatesUrl,
+    division, locale, currencies, graphqlUrl, liveRatesUrl,
   }, [{
     name: 'locale',
     valueCheck: (value) => validateLocale(value),
@@ -29,12 +30,15 @@ currencyCrossTableElements.forEach((element) => {
   }, {
     name: 'currencies',
     valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 8,
+  }, {
+    name: 'graphqlUrl',
   }, {
     name: 'liveRatesUrl',
   }]);
 
   root.render(
     <CurrencyCrossTableWidget
+      graphqlUrl={graphqlUrl}
       liveRatesUrl={liveRatesUrl}
       division={division}
       currencies={currencies}

package/src/CurrencyCrossTableWidget/types.tsx

@@ -1,22 +1,12 @@
 import { Locale } from '@oanda/mono-i18n';
 import { Theme } from '@oanda/labs-widget-common';
+import { Division } from '../gql/types/graphql';
 
 export { Locale } from '@oanda/mono-i18n';
 
-export enum Division {
-  Oap = 'OAP',
-  Oau = 'OAU',
-  Oc = 'OC',
-  Ocan = 'OCAN',
-  Oel = 'OEL',
-  Ogm = 'OGM',
-  Oj = 'OJ',
-  Opt = 'OPT',
-  Otms = 'OTMS',
-}
-
 export interface CurrencyCrossTableConfig {
   division: Division;
+  graphqlUrl: string;
   liveRatesUrl: string;
   currencies: string[];
   locale: Locale;
@@ -33,4 +23,5 @@ export interface ValidationWrapperProps {
 export interface MainProps {
   currencies: string[];
   instruments: string[];
+  division: Division;
 }

package/src/CurrencyCrossTableWidget/utils.ts

@@ -1,60 +1,40 @@
-import { useEffect, useState } from 'react';
-import { DataRecord, LiveRatesErrorMessage, useLiveRatesMessage } from '@oanda/labs-widget-common';
 import { MAJOR_CURRENCIES } from './constant';
+import { Division } from '../gql/types/graphql';
 
 const validCurrencies = (currencies: string[]) => currencies
   .every((currency) => MAJOR_CURRENCIES.includes(currency));
 
-const currenciesToInstruments = (currencies: string[], division: any) => {
-  const divisionMapper = division === 'OGM' ? '' : '_';
+const divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');
 
+const currenciesToInstruments = (currencies: string[], division: any) => {
   const pairs = currencies.reduce((acc, cV, index, array) => {
     const unique = array.filter((_item, idx) => index !== idx);
 
     return [
       ...acc,
-      ...unique.map((el) => `${cV}${divisionMapper}${el}`),
+      ...unique.map((el) => `${cV}${divisionMapper(division)}${el}`),
     ];
   }, [] as string[]);
 
   return pairs;
 };
 
-const useRecords = (
-  record: DataRecord,
-  target: EventTarget | null,
-) => {
-  const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({
-    displayName: record.displayName,
-    instrument: record.instrument,
-  });
-
-  const [error, setError] = useState<LiveRatesErrorMessage | null>(null);
-
-  const { update, error: liveRatesError } = useLiveRatesMessage(
-    record.instrument,
-    target,
-  );
-
-  useEffect(() => {
-    setUpdatedRecord({
-      displayName: record.displayName,
-      instrument: record.instrument,
-      buy: update?.ask,
-      buyPriceMovement: update?.askPriceMovement,
-      displayPrecision: update?.displayPrecision,
-    });
-    setError(liveRatesError);
-  }, [update, record, liveRatesError]);
-
-  return {
-    updatedRecord,
-    error,
-  };
+const getPriceMovement = (priceMovement: number | undefined, isReversed: boolean) => {
+  if (priceMovement === undefined) return 0;
+
+  return isReversed ? priceMovement * -1 : priceMovement;
+};
+
+const getBuyPrice = (price: number | undefined, isReversed: boolean) => {
+  if (price === undefined) return 0;
+
+  return isReversed ? 1 / price : price;
 };
 
 export {
   validCurrencies,
   currenciesToInstruments,
-  useRecords,
+  divisionMapper,
+  getPriceMovement,
+  getBuyPrice,
 };

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

@@ -0,0 +1,66 @@
+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 } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  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>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<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
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  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>
+>(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 is FragmentType<typeof fragmentNode> {
+  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 fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

package/src/gql/types/gql.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+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    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;