@oanda/labs-spread-cost-calculator-widget 1.0.1

package/src/SpreadCostCalculatorWidget/Main.tsx

@@ -0,0 +1,138 @@
+import React, {
+  FC, useContext, useEffect,
+} from 'react';
+import { useLocale } from '@oanda/mono-i18n';
+import {
+  ChartError,
+  cn,
+  Label,
+  NumberInput,
+  Select,
+  Size,
+  ThemeContext,
+  useNumberFormat,
+} from '@oanda/labs-widget-common';
+import { useCalculateSpread } from './useCalculateSpread';
+import { getInstrumentCurrency } from './utils';
+import { useInstrumentChange } from './useInstrumentChange';
+import { MainProps } from './types';
+import { CELL_EMPTY_VALUE } from './constant';
+
+const Main: FC<MainProps> = ({
+  instruments,
+}) => {
+  const { size } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
+
+  const selectOptions = instruments.map((instrument) => ({
+    id: instrument.name,
+    label: instrument.displayName,
+  }));
+
+  const {
+    value: unitsTraded,
+    handleValueChange: onUnitChange,
+    increment: incrementTradedUnits,
+    decrement: decrementTradedUnits,
+  } = useNumberFormat({});
+
+  const {
+    value: spread,
+    handleValueChange: onSpreadChange,
+    increment: incrementSpread,
+    decrement: decrementSpread,
+  } = useNumberFormat({
+    step: 0.1,
+  });
+
+  const {
+    selectedInstrument,
+    setSelectedInstrument,
+    pipLocation,
+    initialSpread,
+    loading,
+    error,
+  } = useInstrumentChange({
+    initialInstrument: {
+      id: instruments[0].name,
+      label: instruments[0].displayName,
+    },
+  });
+
+  useEffect(() => {
+    onSpreadChange({
+      floatValue: initialSpread,
+      formattedValue: initialSpread?.toString() || '',
+      value: initialSpread?.toString() || '',
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialSpread]);
+
+  const { lang } = useLocale();
+
+  const spreadCost = useCalculateSpread({
+    spread,
+    unitsTraded,
+    pipLocation,
+  });
+
+  return (
+    <>
+      {error ? (
+        <div className="lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <ChartError />
+        </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"
+        >
+          <div className="lw-flex lw-flex-col lw-gap-2">
+            <Label htmlFor={lang('instrument')} className="lw-text-text-primary">
+              {lang('instrument')}
+            </Label>
+            <Select
+              searchPlaceholder={lang('search')}
+              options={selectOptions}
+              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')}>
+              <NumberInput
+                onValueChange={onUnitChange}
+                value={unitsTraded}
+                label={lang('units_traded')}
+                onIncrement={incrementTradedUnits}
+                onDecrement={decrementTradedUnits}
+                placeholder={lang('volume')}
+                disabled={loading}
+                withoutArrows
+              />
+              <NumberInput
+                onValueChange={onSpreadChange}
+                value={spread}
+                label={lang('spread')}
+                onIncrement={incrementSpread}
+                onDecrement={decrementSpread}
+                placeholder={lang('pips')}
+                disabled={loading}
+              />
+            </div>
+            <div className="lw-pt-4 lw-text-text-primary">
+              <div>{lang('absolute_spread_cost')}</div>
+              <div className="lw-pt-2 lw-text-3xl lw-font-bold">
+                {spreadCost ? `${spreadCost} ${getInstrumentCurrency(selectedInstrument.id)}` : CELL_EMPTY_VALUE }
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export { Main };

package/src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx

@@ -0,0 +1,52 @@
+import React, { FC, Suspense } from 'react';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import {
+  getLocale, LiveRatesProvider, ThemeProvider,
+} from '@oanda/labs-widget-common';
+import { Division } from '@oanda/labs-live-rates-table-widget';
+import { LocaleProvider } from '@oanda/mono-i18n';
+import { SpreadCostCalculatorWidgetConfig } from './types';
+import { translations } from '../translations';
+import { ValidationWrapper } from './ValidationWrapper';
+
+const SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({
+  graphqlUrl,
+  liveRatesUrl,
+  theme,
+  locale,
+  isParamError,
+  removePadding,
+  division,
+  instruments,
+}) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
+  const divisionCode = division === Division.Opt ? Division.Ogm : division;
+  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
+
+  return (
+    <LocaleProvider locale={getLocale(locale)} translations={translations}>
+      <LiveRatesProvider
+        url={liveRatesUrl}
+        options={{ divisionCode, dataSource }}
+      >
+        <ApolloProvider client={client}>
+          <Suspense>
+            <ThemeProvider theme={theme} removePadding={removePadding}>
+              <ValidationWrapper
+                instruments={instruments}
+                division={division}
+                isParamError={isParamError}
+              />
+            </ThemeProvider>
+          </Suspense>
+        </ApolloProvider>
+      </LiveRatesProvider>
+    </LocaleProvider>
+  );
+};
+
+export { SpreadCostCalculatorWidget };

package/src/SpreadCostCalculatorWidget/ValidationWrapper.tsx

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react';
+import { useSuspenseQuery } from '@apollo/client';
+import { ChartError, ThemeContext } from '@oanda/labs-widget-common';
+import { Main } from './Main';
+import { validateInstruments } from '../gql/validateInstruments';
+import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
+import { ValidationWrapperProps } from './types';
+
+const ValidationWrapper = ({
+  division,
+  instruments,
+  isParamError,
+}: ValidationWrapperProps) => {
+  const { size } = useContext(ThemeContext);
+  const { data, error } = useSuspenseQuery<
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables
+  >(validateInstruments, {
+    variables: {
+      instruments,
+      division,
+    },
+    fetchPolicy: 'network-only',
+    errorPolicy: 'all',
+  });
+
+  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} />
+        )}
+      </>
+      )}
+    </>
+  );
+};
+
+export { ValidationWrapper };

package/src/SpreadCostCalculatorWidget/constant.ts

@@ -0,0 +1 @@
+export const CELL_EMPTY_VALUE = '\u2014';

package/src/SpreadCostCalculatorWidget/index.ts

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

package/src/SpreadCostCalculatorWidget/render.tsx

@@ -0,0 +1,60 @@
+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 spreadCostCalculatorParamsElements = document.querySelectorAll(
+  'div[data-spread-cost-calculator-params]',
+);
+
+spreadCostCalculatorParamsElements.forEach((element) => {
+  const root = createRoot(element);
+  const params = element.getAttribute('data-spread-cost-calculator-params');
+  const mode = element.getAttribute('data-mode');
+  const { locale, instruments, division } = JSON.parse(params as string);
+
+  const isParamError = validateToolParams(
+    {
+      locale,
+      graphqlUrl,
+      instruments,
+      division,
+      liveRatesUrl,
+    },
+    [
+      {
+        name: 'locale',
+        valueCheck: (value) => validateLocale(value),
+      },
+      {
+        name: 'graphqlUrl',
+      },
+      {
+        name: 'liveRatesUrl',
+      },
+      {
+        name: 'division',
+      },
+      {
+        name: 'instruments',
+        valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 10,
+      },
+    ],
+  );
+
+  root.render(
+    <SpreadCostCalculatorWidget
+      division={division}
+      instruments={instruments}
+      liveRatesUrl={liveRatesUrl}
+      graphqlUrl={graphqlUrl}
+      locale={locale}
+      theme={mode as Theme}
+      isParamError={isParamError}
+    />,
+  );
+});

package/src/SpreadCostCalculatorWidget/types.ts

@@ -0,0 +1,27 @@
+import { WidgetWrapperProps } from '@oanda/labs-widget-common';
+import { Division } from '../gql/types/graphql';
+
+export type SpreadCostCalculatorWidgetConfig = Pick<
+WidgetWrapperProps,
+'locale' | 'theme' | 'isParamError' | 'removePadding'
+> & {
+  graphqlUrl: string;
+  liveRatesUrl: string;
+  division: Division;
+  instruments: string[];
+};
+
+export type InstrumentResponse = {
+  name: string;
+  displayName: string;
+};
+
+export type MainProps = {
+  instruments: InstrumentResponse[];
+};
+
+export interface ValidationWrapperProps {
+  division: Division;
+  instruments: string[];
+  isParamError?: boolean;
+}

package/src/SpreadCostCalculatorWidget/useCalculateSpread.ts

@@ -0,0 +1,38 @@
+import { useDebounceValue } from 'usehooks-ts';
+import { useEffect } from 'react';
+import { Voidable } from '@oanda/labs-widget-common';
+
+export type UseCalculateSpreadInput = {
+  spread: Voidable<number>;
+  unitsTraded: Voidable<number>;
+  pipLocation: Voidable<number>;
+  delay?: number;
+};
+
+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);
+
+export const useCalculateSpread = ({
+  spread,
+  unitsTraded,
+  pipLocation,
+  delay = 350,
+}: UseCalculateSpreadInput) => {
+  const [debouncedValue, setValue] = useDebounceValue<undefined | number>(undefined, delay);
+
+  useEffect(() => {
+    setValue(calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation));
+  }, [spread, unitsTraded, pipLocation, setValue]);
+
+  return debouncedValue;
+};

package/src/SpreadCostCalculatorWidget/useInstrumentChange.ts

@@ -0,0 +1,47 @@
+import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
+import { useEffect, useState } from 'react';
+
+export type UseInstrumentChangeInput = {
+  initialInstrument: SelectOption;
+};
+
+export const useInstrumentChange = ({
+  initialInstrument,
+}: UseInstrumentChangeInput) => {
+  const { target, setQuery, closeQuery } = useLiveRatesQuery();
+  const [loading, setLoading] = useState(true);
+  const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);
+  const [pipLocation, setPipLocation] = useState<undefined | number>(undefined);
+  const [initialSpread, setSpread] = useState<undefined | number>(undefined);
+
+  const { update, error, connectionError } = useLiveRatesMessage(
+    selectedInstrument.id,
+    target,
+  );
+
+  useEffect(() => {
+    if (selectedInstrument.id === update?.symbol) {
+      setPipLocation(update.pipLocation);
+      setSpread(update.spread);
+      setLoading(false);
+      closeQuery();
+    }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [update]);
+
+  useEffect(() => {
+    setLoading(true);
+    setQuery({ instruments: [selectedInstrument.id] });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedInstrument.id]);
+
+  return {
+    selectedInstrument,
+    setSelectedInstrument,
+    pipLocation,
+    initialSpread,
+    loading,
+    error: !!error || !!connectionError,
+  };
+};

package/src/SpreadCostCalculatorWidget/utils.ts

@@ -0,0 +1,12 @@
+import { InstrumentResponse } from './types';
+
+export const getInstrumentCurrency = (instrument: string | InstrumentResponse | null): string => {
+  if (typeof instrument === 'string') {
+    return instrument.split('_')[1] || ' ';
+  }
+  if (instrument?.name) {
+    return instrument.name.split('_')[1] || ' ';
+  }
+
+  return ' ';
+};

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;