@oanda/labs-spread-cost-calculator-widget 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-spread-cost-calculator-widget",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Labs Spread Cost Calculator 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.174",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -22,5 +22,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
+  "gitHead": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/SpreadCostCalculatorWidget/Main.tsx

@@ -1,7 +1,3 @@
-import React, {
-  FC, useEffect,
-} from 'react';
-import { useLocale } from '@oanda/mono-i18n';
 import {
   ChartError,
   cn,
@@ -12,13 +8,15 @@ import {
   useLayoutProvider,
   useNumberFormat,
 } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import type { FC } from 'react';
+import React, { useEffect } from 'react';
+
+import type { MainProps } from './types';
 import { useCalculateSpread } from './useCalculateSpread';
 import { useInstrumentChange } from './useInstrumentChange';
-import { MainProps } from './types';
 
-const Main: FC<MainProps> = ({
-  instruments,
-}) => {
+const Main: FC<MainProps> = ({ instruments }) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
@@ -64,7 +62,7 @@ const Main: FC<MainProps> = ({
       formattedValue: initialSpread?.toString() || '',
       value: initialSpread?.toString() || '',
     });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialSpread]);
 
   const { lang } = useLocale();
@@ -84,42 +82,50 @@ const Main: FC<MainProps> = ({
         </div>
       ) : (
         <div
-          data-testid="spread-cost-calculator"
           className="lw-mx-auto lw-flex lw-w-full lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-8 lw-p-4"
+          data-testid="spread-cost-calculator"
         >
           <div className="lw-flex lw-flex-col lw-gap-2">
-            <Label htmlFor={lang('instrument')} className="lw-text-text-primary">
+            <Label
+              className="lw-text-text-primary"
+              htmlFor={lang('instrument')}
+            >
               {lang('instrument')}
             </Label>
             <Select
-              searchPlaceholder={lang('search')}
+              className="lw-grow-0"
+              maxHeight={isDesktop ? 190 : 220}
               options={selectOptions}
+              searchPlaceholder={lang('search')}
               selectedOption={selectedInstrument}
-              className="lw-grow-0"
               setSelectedOption={setSelectedInstrument}
-              maxHeight={isDesktop ? 190 : 220}
             />
           </div>
           <div className="lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3">
-            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>
+            <div
+              className={cn(
+                'lw-flex lw-max-w-full lw-flex-row lw-gap-3',
+                !isDesktop && 'lw-flex-col lw-gap-8'
+              )}
+            >
               <NumberInput
-                onValueChange={onUnitChange}
-                value={unitsTraded}
+                withoutArrows
+                disabled={loading}
                 label={lang('units_traded')}
-                onIncrement={incrementTradedUnits}
-                onDecrement={decrementTradedUnits}
                 placeholder={lang('volume')}
-                disabled={loading}
-                withoutArrows
+                value={unitsTraded}
+                onDecrement={decrementTradedUnits}
+                onIncrement={incrementTradedUnits}
+                onValueChange={onUnitChange}
               />
               <NumberInput
-                onValueChange={onSpreadChange}
-                value={spread}
+                disabled={loading}
                 label={lang('spread')}
-                onIncrement={incrementSpread}
-                onDecrement={decrementSpread}
                 placeholder={lang('pips')}
-                disabled={loading}
+                value={spread}
+                onDecrement={decrementSpread}
+                onIncrement={incrementSpread}
+                onValueChange={onSpreadChange}
               />
             </div>
             <div className="lw-pt-4 lw-text-text-primary">

package/src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { Division } from '@oanda/labs-live-rates-table-widget';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import type { FC } from 'react';
+import React from 'react';
 
-import { Division } from '@oanda/labs-live-rates-table-widget';
-import { SpreadCostCalculatorWidgetConfig } from './types';
 import { translations } from '../translations';
+import type { SpreadCostCalculatorWidgetConfig } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
 
 const SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({
@@ -29,25 +30,22 @@ const SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({
   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="logo"
-      >
+      <WidgetWrapper linkArea="logo" logoLink={logoLink}>
         <ValidationWrapper
-          instruments={instruments}
           division={division}
+          instruments={instruments}
           isParamError={isParamError}
         />
       </WidgetWrapper>

package/src/SpreadCostCalculatorWidget/ValidationWrapper.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
 import { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';
-import { Main } from './Main';
+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 { ValidationWrapperProps } from './types';
+import { Main } from './Main';
+import type { ValidationWrapperProps } from './types';
 
 const ValidationWrapper = ({
   division,
@@ -13,8 +17,8 @@ const ValidationWrapper = ({
 }: ValidationWrapperProps) => {
   const { size } = useLayoutProvider();
   const { data, error } = useSuspenseQuery<
-  ValidateInstrumentsQuery,
-  ValidateInstrumentsQueryVariables
+    ValidateInstrumentsQuery,
+    ValidateInstrumentsQueryVariables
   >(validateInstruments, {
     variables: {
       instruments,
@@ -24,25 +28,26 @@ const ValidationWrapper = ({
     errorPolicy: 'all',
   });
 
-  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({
-    name: instrument!.name,
-    displayName: instrument!.displayName,
-  })) || [];
+  const instrumentsData =
+    data?.mapInstrumentNames?.map((instrument) => ({
+      name: instrument!.name,
+      displayName: instrument!.displayName,
+    })) || [];
 
   const showError = !!error || isParamError;
 
   return (
     <>
       {size && (
-      <>
-        {showError ? (
-          <div className="lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-            <ChartError />
-          </div>
-        ) : (
-          <Main instruments={instrumentsData} />
-        )}
-      </>
+        <>
+          {showError ? (
+            <div className="lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+              <ChartError />
+            </div>
+          ) : (
+            <Main instruments={instrumentsData} />
+          )}
+        </>
       )}
     </>
   );

package/src/SpreadCostCalculatorWidget/render.tsx

@@ -1,14 +1,13 @@
+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 { SpreadCostCalculatorWidget } from './SpreadCostCalculatorWidget';
 
-const {
-  graphqlUrl,
-  liveRatesUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
 const spreadCostCalculatorParamsElements = document.querySelectorAll(
-  'div[data-spread-cost-calculator-params]',
+  'div[data-spread-cost-calculator-params]'
 );
 
 spreadCostCalculatorParamsElements.forEach((element) => {
@@ -28,7 +27,7 @@ spreadCostCalculatorParamsElements.forEach((element) => {
     [
       {
         name: 'locale',
-        valueCheck: (value) => validateLocale(value),
+        valueCheck: (value: string | undefined) => validateLocale(value),
       },
       {
         name: 'graphqlUrl',
@@ -41,20 +40,21 @@ spreadCostCalculatorParamsElements.forEach((element) => {
       },
       {
         name: 'instruments',
-        valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 10,
+        valueCheck: (value) =>
+          (value as string[]).length > 0 && (value as string[]).length <= 10,
       },
-    ],
+    ]
   );
 
   root.render(
     <SpreadCostCalculatorWidget
       division={division}
+      graphqlUrl={graphqlUrl}
       instruments={instruments}
+      isParamError={isParamError}
       liveRatesUrl={liveRatesUrl}
-      graphqlUrl={graphqlUrl}
       locale={locale}
       theme={mode as Theme}
-      isParamError={isParamError}
-    />,
+    />
   );
 });

package/src/SpreadCostCalculatorWidget/types.ts

@@ -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';
 
@@ -9,14 +10,14 @@ export type SpreadCostCalculatorWidgetConfig = WidgetConfig & {
   instruments: string[];
 };
 
-export type InstrumentResponse = {
+export interface InstrumentResponse {
   name: string;
   displayName: string;
-};
+}
 
-export type MainProps = {
+export interface MainProps {
   instruments: InstrumentResponse[];
-};
+}
 
 export interface ValidationWrapperProps {
   division: Division;

package/src/SpreadCostCalculatorWidget/useCalculateSpread.ts

@@ -1,29 +1,32 @@
-import { useDebounceValue } from 'usehooks-ts';
+import type { Voidable } from '@oanda/labs-widget-common';
 import { useEffect } from 'react';
-import { Voidable } from '@oanda/labs-widget-common';
 import { numericFormatter } from 'react-number-format';
+import { useDebounceValue } from 'usehooks-ts';
+
 import { CELL_EMPTY_VALUE } from './constant';
 
-export type UseCalculateSpreadInput = {
+export interface UseCalculateSpreadInput {
   spread: Voidable<number>;
   unitsTraded: Voidable<number>;
   pipLocation: Voidable<number>;
   delay?: number;
   currency: string;
-};
+}
 
 const calculateAbsoluteSpreadCost = (
   unitsTraded?: number,
   spread?: number,
-  pipLocation?: number,
-): number | undefined => (unitsTraded !== undefined
-  && spread !== undefined
-  && pipLocation !== undefined
-  ? Math.ceil(
-    ((unitsTraded * spread * Number((10 ** pipLocation).toFixed(Math.abs(pipLocation)))) / 2)
-          * 10000,
-  ) / 10000
-  : undefined);
+  pipLocation?: number
+): number | undefined =>
+  unitsTraded !== undefined && spread !== undefined && pipLocation !== undefined
+    ? Math.ceil(
+        ((unitsTraded *
+          spread *
+          Number((10 ** pipLocation).toFixed(Math.abs(pipLocation)))) /
+          2) *
+          10000
+      ) / 10000
+    : undefined;
 
 export const useCalculateSpread = ({
   spread,
@@ -35,15 +38,19 @@ export const useCalculateSpread = ({
   const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);
 
   useEffect(() => {
-    const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
+    const calculatedSpread = calculateAbsoluteSpreadCost(
+      unitsTraded,
+      spread,
+      pipLocation
+    );
     setValue(
       calculatedSpread
         ? `${numericFormatter(calculatedSpread.toString(), {
-          thousandSeparator: ',',
-        })} ${currency}`
-        : CELL_EMPTY_VALUE,
+            thousandSeparator: ',',
+          })} ${currency}`
+        : CELL_EMPTY_VALUE
     );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [spread, unitsTraded, pipLocation, setValue]);
 
   return debouncedValue;

package/src/SpreadCostCalculatorWidget/useInstrumentChange.ts

@@ -1,24 +1,30 @@
-import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
+import type { SelectOption } from '@oanda/labs-widget-common';
+import {
+  useLiveRatesMessage,
+  useLiveRatesQuery,
+} from '@oanda/labs-widget-common';
 import { useEffect, useState } from 'react';
+
 import { getInstrumentCurrency } from './utils';
 
-export type UseInstrumentChangeInput = {
+export interface UseInstrumentChangeInput {
   initialInstrument: SelectOption;
-};
+}
 
 export const useInstrumentChange = ({
   initialInstrument,
 }: UseInstrumentChangeInput) => {
   const { target, setQuery, closeQuery } = useLiveRatesQuery();
   const [loading, setLoading] = useState(true);
-  const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);
+  const [selectedInstrument, setSelectedInstrument] =
+    useState(initialInstrument);
   const [pipLocation, setPipLocation] = useState<undefined | number>(undefined);
   const [initialSpread, setSpread] = useState<undefined | number>(undefined);
   const [currency, setCurrency] = useState('');
 
   const { update, error, connectionError } = useLiveRatesMessage(
     selectedInstrument.id,
-    target,
+    target
   );
 
   useEffect(() => {
@@ -29,14 +35,14 @@ export const useInstrumentChange = ({
       closeQuery();
     }
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [update]);
 
   useEffect(() => {
     setLoading(true);
     setQuery({ instruments: [selectedInstrument.id] });
     setCurrency(getInstrumentCurrency(selectedInstrument.label));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedInstrument.id]);
 
   return {

package/src/SpreadCostCalculatorWidget/utils.ts

@@ -1,3 +1,4 @@
 import { DEFAULT_CURRENCY } from './constant';
 
-export const getInstrumentCurrency = (instrument: string): string => instrument.split('/')[1] || DEFAULT_CURRENCY;
+export const getInstrumentCurrency = (instrument: string): string =>
+  instrument.split('/')[1] || DEFAULT_CURRENCY;

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    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+  '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(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    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: '\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;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;