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

package/dist/module/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js

@@ -1,8 +1,7 @@
-import React, { Suspense } from 'react';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { getLocale, LiveRatesProvider, renderComponent, ThemeProvider } from '@oanda/labs-widget-common';
+import React from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import { Division } from '@oanda/labs-live-rates-table-widget';
-import { LocaleProvider } from '@oanda/mono-i18n';
 import { translations } from '../translations';
 import { ValidationWrapper } from './ValidationWrapper';
 const SpreadCostCalculatorWidget = _ref => {
@@ -23,29 +22,30 @@ const SpreadCostCalculatorWidget = _ref => {
   });
   const divisionCode = division === Division.Opt ? Division.Ogm : division;
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
-  return React.createElement(LocaleProvider, {
-    locale: getLocale(locale),
-    translations: translations
-  }, React.createElement(LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
-    }
-  }, React.createElement(ApolloProvider, {
-    client: client
-  }, React.createElement(Suspense, null, React.createElement(ThemeProvider, {
+  return React.createElement(WidgetProvider, {
+    withSuspense: true,
+    locale: locale,
+    translations: translations,
+    client: client,
     theme: theme,
-    removePadding: removePadding
-  }, renderComponent({
-    Component: React.createElement(ValidationWrapper, {
-      instruments: instruments,
-      division: division,
-      isParamError: isParamError
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))))));
+    styling: {
+      removePadding
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
+    }
+  }, React.createElement(WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo"
+  }, React.createElement(ValidationWrapper, {
+    instruments: instruments,
+    division: division,
+    isParamError: isParamError
+  })));
 };
 export { SpreadCostCalculatorWidget };
 //# sourceMappingURL=SpreadCostCalculatorWidget.js.map

package/dist/module/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["React","Suspense","ApolloClient","ApolloProvider","InMemoryCache","getLocale","LiveRatesProvider","renderComponent","ThemeProvider","Division","LocaleProvider","translations","ValidationWrapper","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","url","options","Component","linkArea"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC, Suspense } from 'react';\nimport { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';\nimport {\n  getLocale, LiveRatesProvider, renderComponent, ThemeProvider,\n} from '@oanda/labs-widget-common';\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <LocaleProvider locale={getLocale(locale)} translations={translations}>\n      <LiveRatesProvider\n        url={liveRatesUrl}\n        options={{ divisionCode, dataSource }}\n      >\n        <ApolloProvider client={client}>\n          <Suspense>\n            <ThemeProvider theme={theme} removePadding={removePadding}>\n              {renderComponent({\n                Component: <ValidationWrapper\n                  instruments={instruments}\n                  division={division}\n                  isParamError={isParamError}\n                />,\n                logoLink,\n                linkArea: 'logo',\n              })}\n            </ThemeProvider>\n          </Suspense>\n        </ApolloProvider>\n      </LiveRatesProvider>\n    </LocaleProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,YAAY,EAAEC,cAAc,EAAEC,aAAa,QAAQ,gBAAgB;AAC5E,SACEC,SAAS,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,QACvD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,MAAMC,0BAAgE,GAAGC,IAAA,IAUnE;EAAA,IAVoE;IACxEC,UAAU;IACVC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,MAAM,GAAG,IAAItB,YAAY,CAAC;IAC9BuB,GAAG,EAAEV,UAAU;IACfW,KAAK,EAAE,IAAItB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMuB,YAAY,GAAGN,QAAQ,KAAKZ,QAAQ,CAACmB,GAAG,GAAGnB,QAAQ,CAACoB,GAAG,GAAGR,QAAQ;EACxE,MAAMS,UAAU,GAAGH,YAAY,KAAKlB,QAAQ,CAACoB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACE7B,KAAA,CAAA+B,aAAA,CAACrB,cAAc;IAACQ,MAAM,EAAEb,SAAS,CAACa,MAAM,CAAE;IAACP,YAAY,EAAEA;EAAa,GACpEX,KAAA,CAAA+B,aAAA,CAACzB,iBAAiB;IAChB0B,GAAG,EAAEhB,YAAa;IAClBiB,OAAO,EAAE;MAAEN,YAAY;MAAEG;IAAW;EAAE,GAEtC9B,KAAA,CAAA+B,aAAA,CAAC5B,cAAc;IAACqB,MAAM,EAAEA;EAAO,GAC7BxB,KAAA,CAAA+B,aAAA,CAAC9B,QAAQ,QACPD,KAAA,CAAA+B,aAAA,CAACvB,aAAa;IAACS,KAAK,EAAEA,KAAM;IAACG,aAAa,EAAEA;EAAc,GACvDb,eAAe,CAAC;IACf2B,SAAS,EAAElC,KAAA,CAAA+B,aAAA,CAACnB,iBAAiB;MAC3BU,WAAW,EAAEA,WAAY;MACzBD,QAAQ,EAAEA,QAAS;MACnBF,YAAY,EAAEA;IAAa,CAC5B,CAAC;IACFI,QAAQ;IACRY,QAAQ,EAAE;EACZ,CAAC,CACY,CACP,CACI,CACC,CACL,CAAC;AAErB,CAAC;AAED,SAAStB,0BAA0B","ignoreList":[]}
+{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["React","ApolloClient","InMemoryCache","WidgetProvider","WidgetWrapper","Division","translations","ValidationWrapper","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","uri","cache","divisionCode","Opt","Ogm","dataSource","createElement","withSuspense","styling","liveRates","url","options","linkArea"],"sources":["../../../src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ApolloClient, InMemoryCache } from '@apollo/client';\nimport { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';\n\nimport { Division } from '@oanda/labs-live-rates-table-widget';\nimport { SpreadCostCalculatorWidgetConfig } from './types';\nimport { translations } from '../translations';\nimport { ValidationWrapper } from './ValidationWrapper';\n\nconst SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({\n  graphqlUrl,\n  liveRatesUrl,\n  theme,\n  locale,\n  isParamError,\n  removePadding,\n  division,\n  instruments,\n  logoLink,\n}) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  const divisionCode = division === Division.Opt ? Division.Ogm : division;\n  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';\n\n  return (\n    <WidgetProvider\n      withSuspense\n      locale={locale}\n      translations={translations}\n      client={client}\n      theme={theme}\n      styling={{\n        removePadding,\n      }}\n      liveRates={{\n        url: liveRatesUrl,\n        options: { divisionCode, dataSource },\n      }}\n    >\n      <WidgetWrapper\n        logoLink={logoLink}\n        linkArea=\"logo\"\n      >\n        <ValidationWrapper\n          instruments={instruments}\n          division={division}\n          isParamError={isParamError}\n        />\n      </WidgetWrapper>\n    </WidgetProvider>\n  );\n};\n\nexport { SpreadCostCalculatorWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SAASC,YAAY,EAAEC,aAAa,QAAQ,gBAAgB;AAC5D,SAASC,cAAc,EAAEC,aAAa,QAAQ,2BAA2B;AAEzE,SAASC,QAAQ,QAAQ,qCAAqC;AAE9D,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,MAAMC,0BAAgE,GAAGC,IAAA,IAUnE;EAAA,IAVoE;IACxEC,UAAU;IACVC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,MAAM,GAAG,IAAIlB,YAAY,CAAC;IAC9BmB,GAAG,EAAEV,UAAU;IACfW,KAAK,EAAE,IAAInB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMoB,YAAY,GAAGN,QAAQ,KAAKX,QAAQ,CAACkB,GAAG,GAAGlB,QAAQ,CAACmB,GAAG,GAAGR,QAAQ;EACxE,MAAMS,UAAU,GAAGH,YAAY,KAAKjB,QAAQ,CAACmB,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACExB,KAAA,CAAA0B,aAAA,CAACvB,cAAc;IACbwB,YAAY;IACZd,MAAM,EAAEA,MAAO;IACfP,YAAY,EAAEA,YAAa;IAC3Ba,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAM;IACbgB,OAAO,EAAE;MACPb;IACF,CAAE;IACFc,SAAS,EAAE;MACTC,GAAG,EAAEnB,YAAY;MACjBoB,OAAO,EAAE;QAAET,YAAY;QAAEG;MAAW;IACtC;EAAE,GAEFzB,KAAA,CAAA0B,aAAA,CAACtB,aAAa;IACZc,QAAQ,EAAEA,QAAS;IACnBc,QAAQ,EAAC;EAAM,GAEfhC,KAAA,CAAA0B,aAAA,CAACnB,iBAAiB;IAChBU,WAAW,EAAEA,WAAY;IACzBD,QAAQ,EAAEA,QAAS;IACnBF,YAAY,EAAEA;EAAa,CAC5B,CACY,CACD,CAAC;AAErB,CAAC;AAED,SAASN,0BAA0B","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/ValidationWrapper.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
-import { ChartError, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from './Main';
 import { validateInstruments } from '../gql/validateInstruments';
 const ValidationWrapper = _ref => {
@@ -11,7 +11,7 @@ const ValidationWrapper = _ref => {
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const {
     data,
     error

package/dist/module/SpreadCostCalculatorWidget/ValidationWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["React","useContext","useSuspenseQuery","ChartError","ThemeContext","Main","validateInstruments","ValidationWrapper","_ref","division","instruments","isParamError","size","data","error","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, ThemeContext } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useContext(ThemeContext);\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,2BAA2B;AACpE,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,mBAAmB,QAAQ,4BAA4B;AAIhE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAGX,UAAU,CAACG,YAAY,CAAC;EACzC,MAAM;IAAES,IAAI;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBS,SAAS,EAAE;MACTL,WAAW;MACXD;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGL,IAAI,EAAEM,kBAAkB,EAAEC,GAAG,CAAEC,UAAU,KAAM;IACrEC,IAAI,EAAED,UAAU,CAAEC,IAAI;IACtBC,WAAW,EAAEF,UAAU,CAAEE;EAC3B,CAAC,CAAC,CAAC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAG,CAAC,CAACV,KAAK,IAAIH,YAAY;EAEzC,OACEX,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACGd,IAAI,IACLZ,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACGF,SAAS,GACRxB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH3B,KAAA,CAAAyB,aAAA,CAACtB,UAAU,MAAE,CACV,CAAC,GAENH,KAAA,CAAAyB,aAAA,CAACpB,IAAI;IAACK,WAAW,EAAEQ;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAED,SAASX,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["React","useSuspenseQuery","ChartError","useLayoutProvider","Main","validateInstruments","ValidationWrapper","_ref","division","instruments","isParamError","size","data","error","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className"],"sources":["../../../src/SpreadCostCalculatorWidget/ValidationWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { useSuspenseQuery } from '@apollo/client';\nimport { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';\nimport { Main } from './Main';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';\nimport { ValidationWrapperProps } from './types';\n\nconst ValidationWrapper = ({\n  division,\n  instruments,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const { size } = useLayoutProvider();\n  const { data, error } = useSuspenseQuery<\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables\n  >(validateInstruments, {\n    variables: {\n      instruments,\n      division,\n    },\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  const instrumentsData = data?.mapInstrumentNames?.map((instrument) => ({\n    name: instrument!.name,\n    displayName: instrument!.displayName,\n  })) || [];\n\n  const showError = !!error || isParamError;\n\n  return (\n    <>\n      {size && (\n      <>\n        {showError ? (\n          <div className=\"lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n            <ChartError />\n          </div>\n        ) : (\n          <Main instruments={instrumentsData} />\n        )}\n      </>\n      )}\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,2BAA2B;AACzE,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,mBAAmB,QAAQ,4BAA4B;AAIhE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EACpC,MAAM;IAAES,IAAI;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBS,SAAS,EAAE;MACTL,WAAW;MACXD;IACF,CAAC;IACDO,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGL,IAAI,EAAEM,kBAAkB,EAAEC,GAAG,CAAEC,UAAU,KAAM;IACrEC,IAAI,EAAED,UAAU,CAAEC,IAAI;IACtBC,WAAW,EAAEF,UAAU,CAAEE;EAC3B,CAAC,CAAC,CAAC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAG,CAAC,CAACV,KAAK,IAAIH,YAAY;EAEzC,OACEV,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGd,IAAI,IACLX,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGF,SAAS,GACRvB,KAAA,CAAAwB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH1B,KAAA,CAAAwB,aAAA,CAACtB,UAAU,MAAE,CACV,CAAC,GAENF,KAAA,CAAAwB,aAAA,CAACpB,IAAI;IAACK,WAAW,EAAEQ;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAED,SAASX,iBAAiB","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/constant.js

@@ -1,2 +1,3 @@
 export const CELL_EMPTY_VALUE = '\u2014';
+export const DEFAULT_CURRENCY = 'USD';
 //# sourceMappingURL=constant.js.map

package/dist/module/SpreadCostCalculatorWidget/constant.js.map

@@ -1 +1 @@
-{"version":3,"file":"constant.js","names":["CELL_EMPTY_VALUE"],"sources":["../../../src/SpreadCostCalculatorWidget/constant.ts"],"sourcesContent":["export const CELL_EMPTY_VALUE = '\\u2014';\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"file":"constant.js","names":["CELL_EMPTY_VALUE","DEFAULT_CURRENCY"],"sources":["../../../src/SpreadCostCalculatorWidget/constant.ts"],"sourcesContent":["export const CELL_EMPTY_VALUE = '\\u2014';\nexport const DEFAULT_CURRENCY = 'USD';\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,GAAG,QAAQ;AACxC,OAAO,MAAMC,gBAAgB,GAAG,KAAK","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["Locale"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<\nWidgetWrapperProps,\n'removePadding'\n> & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":"AAGA,SAASA,MAAM,QAAQ,kBAAkB","ignoreList":[]}
+{"version":3,"file":"types.js","names":["Locale"],"sources":["../../../src/SpreadCostCalculatorWidget/types.ts"],"sourcesContent":["import { WidgetConfig } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport { Locale } from '@oanda/mono-i18n';\n\nexport type SpreadCostCalculatorWidgetConfig = WidgetConfig & {\n  liveRatesUrl: string;\n  division: Division;\n  instruments: string[];\n};\n\nexport type InstrumentResponse = {\n  name: string;\n  displayName: string;\n};\n\nexport type MainProps = {\n  instruments: InstrumentResponse[];\n};\n\nexport interface ValidationWrapperProps {\n  division: Division;\n  instruments: string[];\n  isParamError?: boolean;\n}\n"],"mappings":"AAGA,SAASA,MAAM,QAAQ,kBAAkB","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/useCalculateSpread.js

@@ -1,16 +1,22 @@
 import { useDebounceValue } from 'usehooks-ts';
 import { useEffect } from 'react';
+import { numericFormatter } from 'react-number-format';
+import { CELL_EMPTY_VALUE } from './constant';
 const calculateAbsoluteSpreadCost = (unitsTraded, spread, pipLocation) => unitsTraded !== undefined && spread !== undefined && pipLocation !== undefined ? Math.ceil(unitsTraded * spread * Number((10 ** pipLocation).toFixed(Math.abs(pipLocation))) / 2 * 10000) / 10000 : undefined;
 export const useCalculateSpread = _ref => {
   let {
     spread,
     unitsTraded,
     pipLocation,
-    delay = 350
+    delay = 350,
+    currency
   } = _ref;
-  const [debouncedValue, setValue] = useDebounceValue(undefined, delay);
+  const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);
   useEffect(() => {
-    setValue(calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation));
+    const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
+    setValue(calculatedSpread ? `${numericFormatter(calculatedSpread.toString(), {
+      thousandSeparator: ','
+    })} ${currency}` : CELL_EMPTY_VALUE);
   }, [spread, unitsTraded, pipLocation, setValue]);
   return debouncedValue;
 };

package/dist/module/SpreadCostCalculatorWidget/useCalculateSpread.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalculateSpread.js","names":["useDebounceValue","useEffect","calculateAbsoluteSpreadCost","unitsTraded","spread","pipLocation","undefined","Math","ceil","Number","toFixed","abs","useCalculateSpread","_ref","delay","debouncedValue","setValue"],"sources":["../../../src/SpreadCostCalculatorWidget/useCalculateSpread.ts"],"sourcesContent":["import { useDebounceValue } from 'usehooks-ts';\nimport { useEffect } from 'react';\nimport { Voidable } from '@oanda/labs-widget-common';\n\nexport type UseCalculateSpreadInput = {\n  spread: Voidable<number>;\n  unitsTraded: Voidable<number>;\n  pipLocation: Voidable<number>;\n  delay?: number;\n};\n\nconst calculateAbsoluteSpreadCost = (\n  unitsTraded?: number,\n  spread?: number,\n  pipLocation?: number,\n): number | undefined => (unitsTraded !== undefined\n  && spread !== undefined\n  && pipLocation !== undefined\n  ? Math.ceil(\n    ((unitsTraded * spread * Number((10 ** pipLocation).toFixed(Math.abs(pipLocation)))) / 2)\n          * 10000,\n  ) / 10000\n  : undefined);\n\nexport const useCalculateSpread = ({\n  spread,\n  unitsTraded,\n  pipLocation,\n  delay = 350,\n}: UseCalculateSpreadInput) => {\n  const [debouncedValue, setValue] = useDebounceValue<undefined | number>(undefined, delay);\n\n  useEffect(() => {\n    setValue(calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation));\n  }, [spread, unitsTraded, pipLocation, setValue]);\n\n  return debouncedValue;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,SAAS,QAAQ,OAAO;AAUjC,MAAMC,2BAA2B,GAAGA,CAClCC,WAAoB,EACpBC,MAAe,EACfC,WAAoB,KACIF,WAAW,KAAKG,SAAS,IAC9CF,MAAM,KAAKE,SAAS,IACpBD,WAAW,KAAKC,SAAS,GAC1BC,IAAI,CAACC,IAAI,CACPL,WAAW,GAAGC,MAAM,GAAGK,MAAM,CAAC,CAAC,EAAE,IAAIJ,WAAW,EAAEK,OAAO,CAACH,IAAI,CAACI,GAAG,CAACN,WAAW,CAAC,CAAC,CAAC,GAAI,CAAC,GAChF,KACV,CAAC,GAAG,KAAK,GACPC,SAAU;AAEd,OAAO,MAAMM,kBAAkB,GAAGC,IAAA,IAKH;EAAA,IALI;IACjCT,MAAM;IACND,WAAW;IACXE,WAAW;IACXS,KAAK,GAAG;EACe,CAAC,GAAAD,IAAA;EACxB,MAAM,CAACE,cAAc,EAAEC,QAAQ,CAAC,GAAGhB,gBAAgB,CAAqBM,SAAS,EAAEQ,KAAK,CAAC;EAEzFb,SAAS,CAAC,MAAM;IACde,QAAQ,CAACd,2BAA2B,CAACC,WAAW,EAAEC,MAAM,EAAEC,WAAW,CAAC,CAAC;EACzE,CAAC,EAAE,CAACD,MAAM,EAAED,WAAW,EAAEE,WAAW,EAAEW,QAAQ,CAAC,CAAC;EAEhD,OAAOD,cAAc;AACvB,CAAC","ignoreList":[]}
+{"version":3,"file":"useCalculateSpread.js","names":["useDebounceValue","useEffect","numericFormatter","CELL_EMPTY_VALUE","calculateAbsoluteSpreadCost","unitsTraded","spread","pipLocation","undefined","Math","ceil","Number","toFixed","abs","useCalculateSpread","_ref","delay","currency","debouncedValue","setValue","calculatedSpread","toString","thousandSeparator"],"sources":["../../../src/SpreadCostCalculatorWidget/useCalculateSpread.ts"],"sourcesContent":["import { useDebounceValue } from 'usehooks-ts';\nimport { useEffect } from 'react';\nimport { Voidable } from '@oanda/labs-widget-common';\nimport { numericFormatter } from 'react-number-format';\nimport { CELL_EMPTY_VALUE } from './constant';\n\nexport type UseCalculateSpreadInput = {\n  spread: Voidable<number>;\n  unitsTraded: Voidable<number>;\n  pipLocation: Voidable<number>;\n  delay?: number;\n  currency: string;\n};\n\nconst calculateAbsoluteSpreadCost = (\n  unitsTraded?: number,\n  spread?: number,\n  pipLocation?: number,\n): number | undefined => (unitsTraded !== undefined\n  && spread !== undefined\n  && pipLocation !== undefined\n  ? Math.ceil(\n    ((unitsTraded * spread * Number((10 ** pipLocation).toFixed(Math.abs(pipLocation)))) / 2)\n          * 10000,\n  ) / 10000\n  : undefined);\n\nexport const useCalculateSpread = ({\n  spread,\n  unitsTraded,\n  pipLocation,\n  delay = 350,\n  currency,\n}: UseCalculateSpreadInput) => {\n  const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);\n\n  useEffect(() => {\n    const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);\n    setValue(\n      calculatedSpread\n        ? `${numericFormatter(calculatedSpread.toString(), {\n          thousandSeparator: ',',\n        })} ${currency}`\n        : CELL_EMPTY_VALUE,\n    );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spread, unitsTraded, pipLocation, setValue]);\n\n  return debouncedValue;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,SAAS,QAAQ,OAAO;AAEjC,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,YAAY;AAU7C,MAAMC,2BAA2B,GAAGA,CAClCC,WAAoB,EACpBC,MAAe,EACfC,WAAoB,KACIF,WAAW,KAAKG,SAAS,IAC9CF,MAAM,KAAKE,SAAS,IACpBD,WAAW,KAAKC,SAAS,GAC1BC,IAAI,CAACC,IAAI,CACPL,WAAW,GAAGC,MAAM,GAAGK,MAAM,CAAC,CAAC,EAAE,IAAIJ,WAAW,EAAEK,OAAO,CAACH,IAAI,CAACI,GAAG,CAACN,WAAW,CAAC,CAAC,CAAC,GAAI,CAAC,GAChF,KACV,CAAC,GAAG,KAAK,GACPC,SAAU;AAEd,OAAO,MAAMM,kBAAkB,GAAGC,IAAA,IAMH;EAAA,IANI;IACjCT,MAAM;IACND,WAAW;IACXE,WAAW;IACXS,KAAK,GAAG,GAAG;IACXC;EACuB,CAAC,GAAAF,IAAA;EACxB,MAAM,CAACG,cAAc,EAAEC,QAAQ,CAAC,GAAGnB,gBAAgB,CAACG,gBAAgB,EAAEa,KAAK,CAAC;EAE5Ef,SAAS,CAAC,MAAM;IACd,MAAMmB,gBAAgB,GAAGhB,2BAA2B,CAACC,WAAW,EAAEC,MAAM,EAAEC,WAAW,CAAC;IACtFY,QAAQ,CACNC,gBAAgB,GACZ,GAAGlB,gBAAgB,CAACkB,gBAAgB,CAACC,QAAQ,CAAC,CAAC,EAAE;MACjDC,iBAAiB,EAAE;IACrB,CAAC,CAAC,IAAIL,QAAQ,EAAE,GACdd,gBACN,CAAC;EAEH,CAAC,EAAE,CAACG,MAAM,EAAED,WAAW,EAAEE,WAAW,EAAEY,QAAQ,CAAC,CAAC;EAEhD,OAAOD,cAAc;AACvB,CAAC","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/useInstrumentChange.js

@@ -1,5 +1,6 @@
 import { useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { useEffect, useState } from 'react';
+import { getInstrumentCurrency } from './utils';
 export const useInstrumentChange = _ref => {
   let {
     initialInstrument
@@ -13,6 +14,7 @@ export const useInstrumentChange = _ref => {
   const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);
   const [pipLocation, setPipLocation] = useState(undefined);
   const [initialSpread, setSpread] = useState(undefined);
+  const [currency, setCurrency] = useState('');
   const {
     update,
     error,
@@ -31,6 +33,7 @@ export const useInstrumentChange = _ref => {
     setQuery({
       instruments: [selectedInstrument.id]
     });
+    setCurrency(getInstrumentCurrency(selectedInstrument.label));
   }, [selectedInstrument.id]);
   return {
     selectedInstrument,
@@ -38,7 +41,8 @@ export const useInstrumentChange = _ref => {
     pipLocation,
     initialSpread,
     loading,
-    error: !!error || !!connectionError
+    error: !!error || !!connectionError,
+    currency
   };
 };
 //# sourceMappingURL=useInstrumentChange.js.map

package/dist/module/SpreadCostCalculatorWidget/useInstrumentChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInstrumentChange.js","names":["useLiveRatesMessage","useLiveRatesQuery","useEffect","useState","useInstrumentChange","_ref","initialInstrument","target","setQuery","closeQuery","loading","setLoading","selectedInstrument","setSelectedInstrument","pipLocation","setPipLocation","undefined","initialSpread","setSpread","update","error","connectionError","id","symbol","spread","instruments"],"sources":["../../../src/SpreadCostCalculatorWidget/useInstrumentChange.ts"],"sourcesContent":["import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { useEffect, useState } from 'react';\n\nexport type UseInstrumentChangeInput = {\n  initialInstrument: SelectOption;\n};\n\nexport const useInstrumentChange = ({\n  initialInstrument,\n}: UseInstrumentChangeInput) => {\n  const { target, setQuery, closeQuery } = useLiveRatesQuery();\n  const [loading, setLoading] = useState(true);\n  const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);\n  const [pipLocation, setPipLocation] = useState<undefined | number>(undefined);\n  const [initialSpread, setSpread] = useState<undefined | number>(undefined);\n\n  const { update, error, connectionError } = useLiveRatesMessage(\n    selectedInstrument.id,\n    target,\n  );\n\n  useEffect(() => {\n    if (selectedInstrument.id === update?.symbol) {\n      setPipLocation(update.pipLocation);\n      setSpread(update.spread);\n      setLoading(false);\n      closeQuery();\n    }\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [update]);\n\n  useEffect(() => {\n    setLoading(true);\n    setQuery({ instruments: [selectedInstrument.id] });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedInstrument.id]);\n\n  return {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error: !!error || !!connectionError,\n  };\n};\n"],"mappings":"AAAA,SAAuBA,mBAAmB,EAAEC,iBAAiB,QAAQ,2BAA2B;AAChG,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAM3C,OAAO,MAAMC,mBAAmB,GAAGC,IAAA,IAEH;EAAA,IAFI;IAClCC;EACwB,CAAC,GAAAD,IAAA;EACzB,MAAM;IAAEE,MAAM;IAAEC,QAAQ;IAAEC;EAAW,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EAC5D,MAAM,CAACS,OAAO,EAAEC,UAAU,CAAC,GAAGR,QAAQ,CAAC,IAAI,CAAC;EAC5C,MAAM,CAACS,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGV,QAAQ,CAACG,iBAAiB,CAAC;EAC/E,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGZ,QAAQ,CAAqBa,SAAS,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,SAAS,CAAC,GAAGf,QAAQ,CAAqBa,SAAS,CAAC;EAE1E,MAAM;IAAEG,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGrB,mBAAmB,CAC5DY,kBAAkB,CAACU,EAAE,EACrBf,MACF,CAAC;EAEDL,SAAS,CAAC,MAAM;IACd,IAAIU,kBAAkB,CAACU,EAAE,KAAKH,MAAM,EAAEI,MAAM,EAAE;MAC5CR,cAAc,CAACI,MAAM,CAACL,WAAW,CAAC;MAClCI,SAAS,CAACC,MAAM,CAACK,MAAM,CAAC;MACxBb,UAAU,CAAC,KAAK,CAAC;MACjBF,UAAU,CAAC,CAAC;IACd;EAGF,CAAC,EAAE,CAACU,MAAM,CAAC,CAAC;EAEZjB,SAAS,CAAC,MAAM;IACdS,UAAU,CAAC,IAAI,CAAC;IAChBH,QAAQ,CAAC;MAAEiB,WAAW,EAAE,CAACb,kBAAkB,CAACU,EAAE;IAAE,CAAC,CAAC;EAEpD,CAAC,EAAE,CAACV,kBAAkB,CAACU,EAAE,CAAC,CAAC;EAE3B,OAAO;IACLV,kBAAkB;IAClBC,qBAAqB;IACrBC,WAAW;IACXG,aAAa;IACbP,OAAO;IACPU,KAAK,EAAE,CAAC,CAACA,KAAK,IAAI,CAAC,CAACC;EACtB,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useInstrumentChange.js","names":["useLiveRatesMessage","useLiveRatesQuery","useEffect","useState","getInstrumentCurrency","useInstrumentChange","_ref","initialInstrument","target","setQuery","closeQuery","loading","setLoading","selectedInstrument","setSelectedInstrument","pipLocation","setPipLocation","undefined","initialSpread","setSpread","currency","setCurrency","update","error","connectionError","id","symbol","spread","instruments","label"],"sources":["../../../src/SpreadCostCalculatorWidget/useInstrumentChange.ts"],"sourcesContent":["import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport { useEffect, useState } from 'react';\nimport { getInstrumentCurrency } from './utils';\n\nexport type UseInstrumentChangeInput = {\n  initialInstrument: SelectOption;\n};\n\nexport const useInstrumentChange = ({\n  initialInstrument,\n}: UseInstrumentChangeInput) => {\n  const { target, setQuery, closeQuery } = useLiveRatesQuery();\n  const [loading, setLoading] = useState(true);\n  const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);\n  const [pipLocation, setPipLocation] = useState<undefined | number>(undefined);\n  const [initialSpread, setSpread] = useState<undefined | number>(undefined);\n  const [currency, setCurrency] = useState('');\n\n  const { update, error, connectionError } = useLiveRatesMessage(\n    selectedInstrument.id,\n    target,\n  );\n\n  useEffect(() => {\n    if (selectedInstrument.id === update?.symbol) {\n      setPipLocation(update.pipLocation);\n      setSpread(update.spread);\n      setLoading(false);\n      closeQuery();\n    }\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [update]);\n\n  useEffect(() => {\n    setLoading(true);\n    setQuery({ instruments: [selectedInstrument.id] });\n    setCurrency(getInstrumentCurrency(selectedInstrument.label));\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedInstrument.id]);\n\n  return {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error: !!error || !!connectionError,\n    currency,\n  };\n};\n"],"mappings":"AAAA,SAAuBA,mBAAmB,EAAEC,iBAAiB,QAAQ,2BAA2B;AAChG,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,qBAAqB,QAAQ,SAAS;AAM/C,OAAO,MAAMC,mBAAmB,GAAGC,IAAA,IAEH;EAAA,IAFI;IAClCC;EACwB,CAAC,GAAAD,IAAA;EACzB,MAAM;IAAEE,MAAM;IAAEC,QAAQ;IAAEC;EAAW,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EAC5D,MAAM,CAACU,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAAC,IAAI,CAAC;EAC5C,MAAM,CAACU,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGX,QAAQ,CAACI,iBAAiB,CAAC;EAC/E,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAAqBc,SAAS,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAqBc,SAAS,CAAC;EAC1E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAAC,EAAE,CAAC;EAE5C,MAAM;IAAEmB,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGxB,mBAAmB,CAC5Da,kBAAkB,CAACY,EAAE,EACrBjB,MACF,CAAC;EAEDN,SAAS,CAAC,MAAM;IACd,IAAIW,kBAAkB,CAACY,EAAE,KAAKH,MAAM,EAAEI,MAAM,EAAE;MAC5CV,cAAc,CAACM,MAAM,CAACP,WAAW,CAAC;MAClCI,SAAS,CAACG,MAAM,CAACK,MAAM,CAAC;MACxBf,UAAU,CAAC,KAAK,CAAC;MACjBF,UAAU,CAAC,CAAC;IACd;EAGF,CAAC,EAAE,CAACY,MAAM,CAAC,CAAC;EAEZpB,SAAS,CAAC,MAAM;IACdU,UAAU,CAAC,IAAI,CAAC;IAChBH,QAAQ,CAAC;MAAEmB,WAAW,EAAE,CAACf,kBAAkB,CAACY,EAAE;IAAE,CAAC,CAAC;IAClDJ,WAAW,CAACjB,qBAAqB,CAACS,kBAAkB,CAACgB,KAAK,CAAC,CAAC;EAE9D,CAAC,EAAE,CAAChB,kBAAkB,CAACY,EAAE,CAAC,CAAC;EAE3B,OAAO;IACLZ,kBAAkB;IAClBC,qBAAqB;IACrBC,WAAW;IACXG,aAAa;IACbP,OAAO;IACPY,KAAK,EAAE,CAAC,CAACA,KAAK,IAAI,CAAC,CAACC,eAAe;IACnCJ;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/utils.js

@@ -1,10 +1,3 @@
-export const getInstrumentCurrency = instrument => {
-  if (typeof instrument === 'string') {
-    return instrument.split('_')[1] || ' ';
-  }
-  if (instrument?.name) {
-    return instrument.name.split('_')[1] || ' ';
-  }
-  return ' ';
-};
+import { DEFAULT_CURRENCY } from './constant';
+export const getInstrumentCurrency = instrument => instrument.split('/')[1] || DEFAULT_CURRENCY;
 //# sourceMappingURL=utils.js.map

package/dist/module/SpreadCostCalculatorWidget/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getInstrumentCurrency","instrument","split","name"],"sources":["../../../src/SpreadCostCalculatorWidget/utils.ts"],"sourcesContent":["import { InstrumentResponse } from './types';\n\nexport const getInstrumentCurrency = (instrument: string | InstrumentResponse | null): string => {\n  if (typeof instrument === 'string') {\n    return instrument.split('_')[1] || ' ';\n  }\n  if (instrument?.name) {\n    return instrument.name.split('_')[1] || ' ';\n  }\n\n  return ' ';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,qBAAqB,GAAIC,UAA8C,IAAa;EAC/F,IAAI,OAAOA,UAAU,KAAK,QAAQ,EAAE;IAClC,OAAOA,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG;EACxC;EACA,IAAID,UAAU,EAAEE,IAAI,EAAE;IACpB,OAAOF,UAAU,CAACE,IAAI,CAACD,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG;EAC7C;EAEA,OAAO,GAAG;AACZ,CAAC","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["DEFAULT_CURRENCY","getInstrumentCurrency","instrument","split"],"sources":["../../../src/SpreadCostCalculatorWidget/utils.ts"],"sourcesContent":["import { DEFAULT_CURRENCY } from './constant';\n\nexport const getInstrumentCurrency = (instrument: string): string => instrument.split('/')[1] || DEFAULT_CURRENCY;\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,YAAY;AAE7C,OAAO,MAAMC,qBAAqB,GAAIC,UAAkB,IAAaA,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAIH,gBAAgB","ignoreList":[]}

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

@@ -1 +1,2 @@
 export declare const CELL_EMPTY_VALUE = "\u2014";
+export declare const DEFAULT_CURRENCY = "USD";

package/dist/types/SpreadCostCalculatorWidget/types.d.ts

@@ -1,7 +1,7 @@
-import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';
+import { WidgetConfig } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 export { Locale } from '@oanda/mono-i18n';
-export type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<WidgetWrapperProps, 'removePadding'> & {
+export type SpreadCostCalculatorWidgetConfig = WidgetConfig & {
     liveRatesUrl: string;
     division: Division;
     instruments: string[];

package/dist/types/SpreadCostCalculatorWidget/useCalculateSpread.d.ts

@@ -4,5 +4,6 @@ export type UseCalculateSpreadInput = {
     unitsTraded: Voidable<number>;
     pipLocation: Voidable<number>;
     delay?: number;
+    currency: string;
 };
-export declare const useCalculateSpread: ({ spread, unitsTraded, pipLocation, delay, }: UseCalculateSpreadInput) => number | undefined;
+export declare const useCalculateSpread: ({ spread, unitsTraded, pipLocation, delay, currency, }: UseCalculateSpreadInput) => string;

package/dist/types/SpreadCostCalculatorWidget/useInstrumentChange.d.ts

@@ -9,4 +9,5 @@ export declare const useInstrumentChange: ({ initialInstrument, }: UseInstrument
     initialSpread: number | undefined;
     loading: boolean;
     error: boolean;
+    currency: string;
 };

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

@@ -1,2 +1 @@
-import { InstrumentResponse } from './types';
-export declare const getInstrumentCurrency: (instrument: string | InstrumentResponse | null) => string;
+export declare const getInstrumentCurrency: (instrument: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-spread-cost-calculator-widget",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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.171",
+    "@oanda/labs-widget-common": "^1.0.173",
     "@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": "f978676624ce706f807cbecc432c67ed809dbf48"
+  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
 }

package/src/SpreadCostCalculatorWidget/Main.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useContext, useEffect,
+  FC, useEffect,
 } from 'react';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -9,19 +9,17 @@ import {
   NumberInput,
   Select,
   Size,
-  ThemeContext,
+  useLayoutProvider,
   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 { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const selectOptions = instruments.map((instrument) => ({
@@ -52,6 +50,7 @@ const Main: FC<MainProps> = ({
     initialSpread,
     loading,
     error,
+    currency,
   } = useInstrumentChange({
     initialInstrument: {
       id: instruments[0].name,
@@ -74,6 +73,7 @@ const Main: FC<MainProps> = ({
     spread,
     unitsTraded,
     pipLocation,
+    currency,
   });
 
   return (
@@ -125,7 +125,7 @@ const Main: FC<MainProps> = ({
             <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 }
+                {spreadCost}
               </div>
             </div>
           </div>

package/src/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.tsx

@@ -1,10 +1,8 @@
-import React, { FC, Suspense } from 'react';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import {
-  getLocale, LiveRatesProvider, renderComponent, ThemeProvider,
-} from '@oanda/labs-widget-common';
+import React, { FC } from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } 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';
@@ -29,28 +27,31 @@ const SpreadCostCalculatorWidget: FC<SpreadCostCalculatorWidgetConfig> = ({
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
   return (
-    <LocaleProvider locale={getLocale(locale)} translations={translations}>
-      <LiveRatesProvider
-        url={liveRatesUrl}
-        options={{ divisionCode, dataSource }}
+    <WidgetProvider
+      withSuspense
+      locale={locale}
+      translations={translations}
+      client={client}
+      theme={theme}
+      styling={{
+        removePadding,
+      }}
+      liveRates={{
+        url: liveRatesUrl,
+        options: { divisionCode, dataSource },
+      }}
+    >
+      <WidgetWrapper
+        logoLink={logoLink}
+        linkArea="logo"
       >
-        <ApolloProvider client={client}>
-          <Suspense>
-            <ThemeProvider theme={theme} removePadding={removePadding}>
-              {renderComponent({
-                Component: <ValidationWrapper
-                  instruments={instruments}
-                  division={division}
-                  isParamError={isParamError}
-                />,
-                logoLink,
-                linkArea: 'logo',
-              })}
-            </ThemeProvider>
-          </Suspense>
-        </ApolloProvider>
-      </LiveRatesProvider>
-    </LocaleProvider>
+        <ValidationWrapper
+          instruments={instruments}
+          division={division}
+          isParamError={isParamError}
+        />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/SpreadCostCalculatorWidget/ValidationWrapper.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useSuspenseQuery } from '@apollo/client';
-import { ChartError, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, useLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from './Main';
 import { validateInstruments } from '../gql/validateInstruments';
 import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
@@ -11,7 +11,7 @@ const ValidationWrapper = ({
   instruments,
   isParamError,
 }: ValidationWrapperProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const { data, error } = useSuspenseQuery<
   ValidateInstrumentsQuery,
   ValidateInstrumentsQueryVariables

package/src/SpreadCostCalculatorWidget/constant.ts

@@ -1 +1,2 @@
 export const CELL_EMPTY_VALUE = '\u2014';
+export const DEFAULT_CURRENCY = 'USD';

package/src/SpreadCostCalculatorWidget/types.ts

@@ -1,12 +1,9 @@
-import { WidgetConfig, WidgetWrapperProps } from '@oanda/labs-widget-common';
+import { WidgetConfig } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 
 export { Locale } from '@oanda/mono-i18n';
 
-export type SpreadCostCalculatorWidgetConfig = WidgetConfig & Pick<
-WidgetWrapperProps,
-'removePadding'
-> & {
+export type SpreadCostCalculatorWidgetConfig = WidgetConfig & {
   liveRatesUrl: string;
   division: Division;
   instruments: string[];

package/src/SpreadCostCalculatorWidget/useCalculateSpread.ts

@@ -1,12 +1,15 @@
 import { useDebounceValue } from 'usehooks-ts';
 import { useEffect } from 'react';
 import { Voidable } from '@oanda/labs-widget-common';
+import { numericFormatter } from 'react-number-format';
+import { CELL_EMPTY_VALUE } from './constant';
 
 export type UseCalculateSpreadInput = {
   spread: Voidable<number>;
   unitsTraded: Voidable<number>;
   pipLocation: Voidable<number>;
   delay?: number;
+  currency: string;
 };
 
 const calculateAbsoluteSpreadCost = (
@@ -27,11 +30,20 @@ export const useCalculateSpread = ({
   unitsTraded,
   pipLocation,
   delay = 350,
+  currency,
 }: UseCalculateSpreadInput) => {
-  const [debouncedValue, setValue] = useDebounceValue<undefined | number>(undefined, delay);
+  const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);
 
   useEffect(() => {
-    setValue(calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation));
+    const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
+    setValue(
+      calculatedSpread
+        ? `${numericFormatter(calculatedSpread.toString(), {
+          thousandSeparator: ',',
+        })} ${currency}`
+        : CELL_EMPTY_VALUE,
+    );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [spread, unitsTraded, pipLocation, setValue]);
 
   return debouncedValue;

package/src/SpreadCostCalculatorWidget/useInstrumentChange.ts

@@ -1,5 +1,6 @@
 import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { useEffect, useState } from 'react';
+import { getInstrumentCurrency } from './utils';
 
 export type UseInstrumentChangeInput = {
   initialInstrument: SelectOption;
@@ -13,6 +14,7 @@ export const useInstrumentChange = ({
   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,
@@ -33,6 +35,7 @@ export const useInstrumentChange = ({
   useEffect(() => {
     setLoading(true);
     setQuery({ instruments: [selectedInstrument.id] });
+    setCurrency(getInstrumentCurrency(selectedInstrument.label));
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedInstrument.id]);
 
@@ -43,5 +46,6 @@ export const useInstrumentChange = ({
     initialSpread,
     loading,
     error: !!error || !!connectionError,
+    currency,
   };
 };

package/src/SpreadCostCalculatorWidget/utils.ts

@@ -1,12 +1,3 @@
-import { InstrumentResponse } from './types';
+import { DEFAULT_CURRENCY } from './constant';
 
-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 ' ';
-};
+export const getInstrumentCurrency = (instrument: string): string => instrument.split('/')[1] || DEFAULT_CURRENCY;

package/test/SpreadCostCalculator.test.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { LiveRatesProvider, MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Main } from '../src/SpreadCostCalculatorWidget/Main';
 
 describe('Spread Cost Calculator', () => {
@@ -20,9 +21,13 @@ describe('Spread Cost Calculator', () => {
   it('should render spread cost calculator component', async () => {
     // When
     const { findByTestId } = render(
-      <Main
-        instruments={[{ name: 'EUR_USD', displayName: 'EUR/USD' }]}
-      />,
+      <LiveRatesProvider url="oanda.com">
+        <MockLayoutProvider>
+          <Main
+            instruments={[{ name: 'EUR_USD', displayName: 'EUR/USD' }]}
+          />
+        </MockLayoutProvider>
+      </LiveRatesProvider>,
     );
 
     // Then