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

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.6 (2024-12-11)
+
+
+
+## 1.0.172 (2024-11-29)
+
+
+
+## 1.0.171 (2024-11-28)
+
+
+
+## 1.0.170 (2024-11-28)
+
+
+
+## 1.0.169 (2024-11-20)
+
+
+
+## 1.0.168 (2024-11-19)
+
+**Note:** Version bump only for package @oanda/labs-spread-cost-calculator-widget
+
+
+
+
+
+## 1.0.5 (2024-11-29)
+
+
+
+## 1.0.171 (2024-11-28)
+
+
+
+## 1.0.170 (2024-11-28)
+
+
+
+## 1.0.169 (2024-11-20)
+
+
+
+## 1.0.168 (2024-11-19)
+
+**Note:** Version bump only for package @oanda/labs-spread-cost-calculator-widget
+
+
+
+
+
 ## 1.0.4 (2024-11-28)
 
 

package/dist/main/SpreadCostCalculatorWidget/Main.js

@@ -8,9 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _monoI18n = require("@oanda/mono-i18n");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _useCalculateSpread = require("./useCalculateSpread");
-var _utils = require("./utils");
 var _useInstrumentChange = require("./useInstrumentChange");
-var _constant = require("./constant");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Main = _ref => {
@@ -19,7 +17,7 @@ const Main = _ref => {
   } = _ref;
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const selectOptions = instruments.map(instrument => ({
     id: instrument.name,
@@ -45,7 +43,8 @@ const Main = _ref => {
     pipLocation,
     initialSpread,
     loading,
-    error
+    error,
+    currency
   } = (0, _useInstrumentChange.useInstrumentChange)({
     initialInstrument: {
       id: instruments[0].name,
@@ -65,7 +64,8 @@ const Main = _ref => {
   const spreadCost = (0, _useCalculateSpread.useCalculateSpread)({
     spread,
     unitsTraded,
-    pipLocation
+    pipLocation,
+    currency
   });
   return _react.default.createElement(_react.default.Fragment, null, error ? _react.default.createElement("div", {
     className: "lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
@@ -109,7 +109,7 @@ const Main = _ref => {
     className: "lw-pt-4 lw-text-text-primary"
   }, _react.default.createElement("div", null, lang('absolute_spread_cost')), _react.default.createElement("div", {
     className: "lw-pt-2 lw-text-3xl lw-font-bold"
-  }, spreadCost ? `${spreadCost} ${(0, _utils.getInstrumentCurrency)(selectedInstrument.id)}` : _constant.CELL_EMPTY_VALUE)))));
+  }, spreadCost)))));
 };
 exports.Main = Main;
 //# sourceMappingURL=Main.js.map

package/dist/main/SpreadCostCalculatorWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_useCalculateSpread","_utils","_useInstrumentChange","_constant","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","useNumberFormat","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","useInstrumentChange","initialInstrument","useEffect","floatValue","formattedValue","toString","lang","useLocale","spreadCost","useCalculateSpread","createElement","Fragment","className","ChartError","Label","htmlFor","Select","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","cn","NumberInput","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows","getInstrumentCurrency","CELL_EMPTY_VALUE","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useContext, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  ThemeContext,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { getInstrumentCurrency } from './utils';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\nimport { CELL_EMPTY_VALUE } from './constant';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n  });\n\n  return (\n    <>\n      {error ? (\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        <div\n          data-testid=\"spread-cost-calculator\"\n          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\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost ? `${spreadCost} ${getInstrumentCurrency(selectedInstrument.id)}` : CELL_EMPTY_VALUE }\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAUA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AAEA,IAAAM,SAAA,GAAAN,OAAA;AAA8C,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE9C,MAAMW,IAAmB,GAAGC,IAAA,IAEtB;EAAA,IAFuB;IAC3BC;EACF,CAAC,GAAAD,IAAA;EACC,MAAM;IAAEE;EAAK,CAAC,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EACzC,MAAMC,SAAS,GAAGH,IAAI,KAAKI,sBAAI,CAACC,OAAO;EAEvC,MAAMC,aAAa,GAAGP,WAAW,CAACQ,GAAG,CAAEC,UAAU,KAAM;IACrDC,EAAE,EAAED,UAAU,CAACE,IAAI;IACnBC,KAAK,EAAEH,UAAU,CAACI;EACpB,CAAC,CAAC,CAAC;EAEH,MAAM;IACJC,KAAK,EAAEC,WAAW;IAClBC,iBAAiB,EAAEC,YAAY;IAC/BC,SAAS,EAAEC,oBAAoB;IAC/BC,SAAS,EAAEC;EACb,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC,CAAC,CAAC;EAEvB,MAAM;IACJR,KAAK,EAAES,MAAM;IACbP,iBAAiB,EAAEQ,cAAc;IACjCN,SAAS,EAAEO,eAAe;IAC1BL,SAAS,EAAEM;EACb,CAAC,GAAG,IAAAJ,iCAAe,EAAC;IAClBK,IAAI,EAAE;EACR,CAAC,CAAC;EAEF,MAAM;IACJC,kBAAkB;IAClBC,qBAAqB;IACrBC,WAAW;IACXC,aAAa;IACbC,OAAO;IACPC;EACF,CAAC,GAAG,IAAAC,wCAAmB,EAAC;IACtBC,iBAAiB,EAAE;MACjBzB,EAAE,EAAEV,WAAW,CAAC,CAAC,CAAC,CAACW,IAAI;MACvBC,KAAK,EAAEZ,WAAW,CAAC,CAAC,CAAC,CAACa;IACxB;EACF,CAAC,CAAC;EAEF,IAAAuB,gBAAS,EAAC,MAAM;IACdZ,cAAc,CAAC;MACba,UAAU,EAAEN,aAAa;MACzBO,cAAc,EAAEP,aAAa,EAAEQ,QAAQ,CAAC,CAAC,IAAI,EAAE;MAC/CzB,KAAK,EAAEiB,aAAa,EAAEQ,QAAQ,CAAC,CAAC,IAAI;IACtC,CAAC,CAAC;EAEJ,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;EAEnB,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,MAAMC,UAAU,GAAG,IAAAC,sCAAkB,EAAC;IACpCpB,MAAM;IACNR,WAAW;IACXe;EACF,CAAC,CAAC;EAEF,OACE7D,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAAA3E,MAAA,CAAAe,OAAA,CAAA6D,QAAA,QACGZ,KAAK,GACJhE,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH7E,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACvE,iBAAA,CAAA0E,UAAU,MAAE,CACV,CAAC,GAEN9E,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IACE,eAAY,wBAAwB;IACpCE,SAAS,EAAC;EAA4G,GAEtH7E,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC3C7E,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACvE,iBAAA,CAAA2E,KAAK;IAACC,OAAO,EAAET,IAAI,CAAC,YAAY,CAAE;IAACM,SAAS,EAAC;EAAsB,GACjEN,IAAI,CAAC,YAAY,CACb,CAAC,EACRvE,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACvE,iBAAA,CAAA6E,MAAM;IACLC,iBAAiB,EAAEX,IAAI,CAAC,QAAQ,CAAE;IAClCY,OAAO,EAAE7C,aAAc;IACvB8C,cAAc,EAAEzB,kBAAmB;IACnCkB,SAAS,EAAC,WAAW;IACrBQ,iBAAiB,EAAEzB,qBAAsB;IACzC0B,SAAS,EAAEnD,SAAS,GAAG,GAAG,GAAG;EAAI,CAClC,CACE,CAAC,EACNnC,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAAgF,GAC7F7E,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAE,IAAAU,oBAAE,EAAC,4CAA4C,EAAE,CAACpD,SAAS,IAAI,sBAAsB;EAAE,GACrGnC,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACvE,iBAAA,CAAAoF,WAAW;IACVC,aAAa,EAAEzC,YAAa;IAC5BH,KAAK,EAAEC,WAAY;IACnBH,KAAK,EAAE4B,IAAI,CAAC,cAAc,CAAE;IAC5BmB,WAAW,EAAExC,oBAAqB;IAClCyC,WAAW,EAAEvC,oBAAqB;IAClCwC,WAAW,EAAErB,IAAI,CAAC,QAAQ,CAAE;IAC5BsB,QAAQ,EAAE9B,OAAQ;IAClB+B,aAAa;EAAA,CACd,CAAC,EACF9F,MAAA,CAAAe,OAAA,CAAA4D,aAAA,CAACvE,iBAAA,CAAAoF,WAAW;IACVC,aAAa,EAAElC,cAAe;IAC9BV,KAAK,EAAES,MAAO;IACdX,KAAK,EAAE4B,IAAI,CAAC,QAAQ,CAAE;IACtBmB,WAAW,EAAElC,eAAgB;IAC7BmC,WAAW,EAAElC,eAAgB;IAC7BmC,WAAW,EAAErB,IAAI,CAAC,MAAM,CAAE;IAC1BsB,QAAQ,EAAE9B;EAAQ,CACnB,CACE,CAAC,EACN/D,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC3C7E,MAAA,CAAAe,OAAA,CAAA4D,aAAA,cAAMJ,IAAI,CAAC,sBAAsB,CAAO,CAAC,EACzCvE,MAAA,CAAAe,OAAA,CAAA4D,aAAA;IAAKE,SAAS,EAAC;EAAkC,GAC9CJ,UAAU,GAAG,GAAGA,UAAU,IAAI,IAAAsB,4BAAqB,EAACpC,kBAAkB,CAAClB,EAAE,CAAC,EAAE,GAAGuD,0BAC7E,CACF,CACF,CACF,CAEP,CAAC;AAEP,CAAC;AAACC,OAAA,CAAApE,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_useCalculateSpread","_useInstrumentChange","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","instruments","size","useLayoutProvider","isDesktop","Size","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","useNumberFormat","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","useInstrumentChange","initialInstrument","useEffect","floatValue","formattedValue","toString","lang","useLocale","spreadCost","useCalculateSpread","createElement","Fragment","className","ChartError","Label","htmlFor","Select","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","cn","NumberInput","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  useLayoutProvider,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\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        <div\n          data-testid=\"spread-cost-calculator\"\n          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\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpreadCostCalculatorWidget = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _labsLiveRatesTableWidget = require("@oanda/labs-live-rates-table-widget");
-var _monoI18n = require("@oanda/mono-i18n");
 var _translations = require("../translations");
 var _ValidationWrapper = require("./ValidationWrapper");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SpreadCostCalculatorWidget = _ref => {
   let {
     graphqlUrl,
@@ -31,29 +29,30 @@ const SpreadCostCalculatorWidget = _ref => {
   });
   const divisionCode = division === _labsLiveRatesTableWidget.Division.Opt ? _labsLiveRatesTableWidget.Division.Ogm : division;
   const dataSource = divisionCode === _labsLiveRatesTableWidget.Division.Ogm ? 'MT5' : 'V20';
-  return _react.default.createElement(_monoI18n.LocaleProvider, {
-    locale: (0, _labsWidgetCommon.getLocale)(locale),
-    translations: _translations.translations
-  }, _react.default.createElement(_labsWidgetCommon.LiveRatesProvider, {
-    url: liveRatesUrl,
-    options: {
-      divisionCode,
-      dataSource
-    }
-  }, _react.default.createElement(_client.ApolloProvider, {
-    client: client
-  }, _react.default.createElement(_react.Suspense, null, _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
+  return _react.default.createElement(_labsWidgetCommon.WidgetProvider, {
+    withSuspense: true,
+    locale: locale,
+    translations: _translations.translations,
+    client: client,
     theme: theme,
-    removePadding: removePadding
-  }, (0, _labsWidgetCommon.renderComponent)({
-    Component: _react.default.createElement(_ValidationWrapper.ValidationWrapper, {
-      instruments: instruments,
-      division: division,
-      isParamError: isParamError
-    }),
-    logoLink,
-    linkArea: 'logo'
-  }))))));
+    styling: {
+      removePadding
+    },
+    liveRates: {
+      url: liveRatesUrl,
+      options: {
+        divisionCode,
+        dataSource
+      }
+    }
+  }, _react.default.createElement(_labsWidgetCommon.WidgetWrapper, {
+    logoLink: logoLink,
+    linkArea: "logo"
+  }, _react.default.createElement(_ValidationWrapper.ValidationWrapper, {
+    instruments: instruments,
+    division: division,
+    isParamError: isParamError
+  })));
 };
 exports.SpreadCostCalculatorWidget = SpreadCostCalculatorWidget;
 //# sourceMappingURL=SpreadCostCalculatorWidget.js.map

package/dist/main/SpreadCostCalculatorWidget/SpreadCostCalculatorWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_labsLiveRatesTableWidget","_monoI18n","_translations","_ValidationWrapper","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","LocaleProvider","getLocale","translations","LiveRatesProvider","url","options","ApolloProvider","Suspense","ThemeProvider","renderComponent","Component","ValidationWrapper","linkArea","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"SpreadCostCalculatorWidget.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_labsLiveRatesTableWidget","_translations","_ValidationWrapper","e","__esModule","default","SpreadCostCalculatorWidget","_ref","graphqlUrl","liveRatesUrl","theme","locale","isParamError","removePadding","division","instruments","logoLink","client","ApolloClient","uri","cache","InMemoryCache","divisionCode","Division","Opt","Ogm","dataSource","createElement","WidgetProvider","withSuspense","translations","styling","liveRates","url","options","WidgetWrapper","linkArea","ValidationWrapper","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,yBAAA,GAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AAAwD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAExD,MAAMG,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,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEX,UAAU;IACfY,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,MAAMC,YAAY,GAAGR,QAAQ,KAAKS,kCAAQ,CAACC,GAAG,GAAGD,kCAAQ,CAACE,GAAG,GAAGX,QAAQ;EACxE,MAAMY,UAAU,GAAGJ,YAAY,KAAKC,kCAAQ,CAACE,GAAG,GAAG,KAAK,GAAG,KAAK;EAEhE,OACE9B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC5B,iBAAA,CAAA6B,cAAc;IACbC,YAAY;IACZlB,MAAM,EAAEA,MAAO;IACfmB,YAAY,EAAEA,0BAAa;IAC3Bb,MAAM,EAAEA,MAAO;IACfP,KAAK,EAAEA,KAAM;IACbqB,OAAO,EAAE;MACPlB;IACF,CAAE;IACFmB,SAAS,EAAE;MACTC,GAAG,EAAExB,YAAY;MACjByB,OAAO,EAAE;QAAEZ,YAAY;QAAEI;MAAW;IACtC;EAAE,GAEF/B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC5B,iBAAA,CAAAoC,aAAa;IACZnB,QAAQ,EAAEA,QAAS;IACnBoB,QAAQ,EAAC;EAAM,GAEfzC,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAACzB,kBAAA,CAAAmC,iBAAiB;IAChBtB,WAAW,EAAEA,WAAY;IACzBD,QAAQ,EAAEA,QAAS;IACnBF,YAAY,EAAEA;EAAa,CAC5B,CACY,CACD,CAAC;AAErB,CAAC;AAAC0B,OAAA,CAAAhC,0BAAA,GAAAA,0BAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/ValidationWrapper.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValidationWrapper = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _client = require("@apollo/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _Main = require("./Main");
 var _validateInstruments = require("../gql/validateInstruments");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ValidationWrapper = _ref => {
   let {
     division,
@@ -19,7 +18,7 @@ const ValidationWrapper = _ref => {
   } = _ref;
   const {
     size
-  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  } = (0, _labsWidgetCommon.useLayoutProvider)();
   const {
     data,
     error

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_Main","_validateInstruments","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ValidationWrapper","_ref","division","instruments","isParamError","size","useContext","ThemeContext","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className","ChartError","Main","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_Main","_validateInstruments","e","__esModule","default","ValidationWrapper","_ref","division","instruments","isParamError","size","useLayoutProvider","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","instrumentsData","mapInstrumentNames","map","instrument","name","displayName","showError","createElement","Fragment","className","ChartError","Main","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAAiE,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIjE,MAAMG,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,QAAQ;IACRC,WAAW;IACXC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EACpC,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,wBAAgB,EAGtCC,wCAAmB,EAAE;IACrBC,SAAS,EAAE;MACTR,WAAW;MACXD;IACF,CAAC;IACDU,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGP,IAAI,EAAEQ,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,CAACZ,KAAK,IAAIJ,YAAY;EAEzC,OACEd,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAA/B,MAAA,CAAAS,OAAA,CAAAuB,QAAA,QACGjB,IAAI,IACLf,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAA/B,MAAA,CAAAS,OAAA,CAAAuB,QAAA,QACGF,SAAS,GACR9B,MAAA,CAAAS,OAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChHjC,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC3B,iBAAA,CAAA8B,UAAU,MAAE,CACV,CAAC,GAENlC,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC1B,KAAA,CAAA8B,IAAI;IAACtB,WAAW,EAAEW;EAAgB,CAAE,CAEvC,CAEF,CAAC;AAEP,CAAC;AAACY,OAAA,CAAA1B,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/constant.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CELL_EMPTY_VALUE = void 0;
+exports.DEFAULT_CURRENCY = exports.CELL_EMPTY_VALUE = void 0;
 const CELL_EMPTY_VALUE = exports.CELL_EMPTY_VALUE = '\u2014';
+const DEFAULT_CURRENCY = exports.DEFAULT_CURRENCY = 'USD';
 //# sourceMappingURL=constant.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constant.js","names":["CELL_EMPTY_VALUE","exports"],"sources":["../../../src/SpreadCostCalculatorWidget/constant.ts"],"sourcesContent":["export const CELL_EMPTY_VALUE = '\\u2014';\n"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"file":"constant.js","names":["CELL_EMPTY_VALUE","exports","DEFAULT_CURRENCY"],"sources":["../../../src/SpreadCostCalculatorWidget/constant.ts"],"sourcesContent":["export const CELL_EMPTY_VALUE = '\\u2014';\nexport const DEFAULT_CURRENCY = 'USD';\n"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,QAAQ;AACjC,MAAME,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,KAAK","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["_monoI18n","require"],"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,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["_monoI18n","require"],"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,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/useCalculateSpread.js

@@ -6,17 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCalculateSpread = void 0;
 var _usehooksTs = require("usehooks-ts");
 var _react = require("react");
+var _reactNumberFormat = require("react-number-format");
+var _constant = require("./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;
 const useCalculateSpread = _ref => {
   let {
     spread,
     unitsTraded,
     pipLocation,
-    delay = 350
+    delay = 350,
+    currency
   } = _ref;
-  const [debouncedValue, setValue] = (0, _usehooksTs.useDebounceValue)(undefined, delay);
+  const [debouncedValue, setValue] = (0, _usehooksTs.useDebounceValue)(_constant.CELL_EMPTY_VALUE, delay);
   (0, _react.useEffect)(() => {
-    setValue(calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation));
+    const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
+    setValue(calculatedSpread ? `${(0, _reactNumberFormat.numericFormatter)(calculatedSpread.toString(), {
+      thousandSeparator: ','
+    })} ${currency}` : _constant.CELL_EMPTY_VALUE);
   }, [spread, unitsTraded, pipLocation, setValue]);
   return debouncedValue;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useCalculateSpread.js","names":["_usehooksTs","require","_react","calculateAbsoluteSpreadCost","unitsTraded","spread","pipLocation","undefined","Math","ceil","Number","toFixed","abs","useCalculateSpread","_ref","delay","debouncedValue","setValue","useDebounceValue","useEffect","exports"],"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,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAUA,MAAME,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;AAEP,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,GAAG,IAAAC,4BAAgB,EAAqBX,SAAS,EAAEQ,KAAK,CAAC;EAEzF,IAAAI,gBAAS,EAAC,MAAM;IACdF,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;AAACI,OAAA,CAAAP,kBAAA,GAAAA,kBAAA","ignoreList":[]}
+{"version":3,"file":"useCalculateSpread.js","names":["_usehooksTs","require","_react","_reactNumberFormat","_constant","calculateAbsoluteSpreadCost","unitsTraded","spread","pipLocation","undefined","Math","ceil","Number","toFixed","abs","useCalculateSpread","_ref","delay","currency","debouncedValue","setValue","useDebounceValue","CELL_EMPTY_VALUE","useEffect","calculatedSpread","numericFormatter","toString","thousandSeparator","exports"],"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,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAUA,MAAMI,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;AAEP,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,GAAG,IAAAC,4BAAgB,EAACC,0BAAgB,EAAEL,KAAK,CAAC;EAE5E,IAAAM,gBAAS,EAAC,MAAM;IACd,MAAMC,gBAAgB,GAAGnB,2BAA2B,CAACC,WAAW,EAAEC,MAAM,EAAEC,WAAW,CAAC;IACtFY,QAAQ,CACNI,gBAAgB,GACZ,GAAG,IAAAC,mCAAgB,EAACD,gBAAgB,CAACE,QAAQ,CAAC,CAAC,EAAE;MACjDC,iBAAiB,EAAE;IACrB,CAAC,CAAC,IAAIT,QAAQ,EAAE,GACdI,0BACN,CAAC;EAEH,CAAC,EAAE,CAACf,MAAM,EAAED,WAAW,EAAEE,WAAW,EAAEY,QAAQ,CAAC,CAAC;EAEhD,OAAOD,cAAc;AACvB,CAAC;AAACS,OAAA,CAAAb,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/useInstrumentChange.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useInstrumentChange = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _react = require("react");
+var _utils = require("./utils");
 const useInstrumentChange = _ref => {
   let {
     initialInstrument
@@ -19,6 +20,7 @@ const useInstrumentChange = _ref => {
   const [selectedInstrument, setSelectedInstrument] = (0, _react.useState)(initialInstrument);
   const [pipLocation, setPipLocation] = (0, _react.useState)(undefined);
   const [initialSpread, setSpread] = (0, _react.useState)(undefined);
+  const [currency, setCurrency] = (0, _react.useState)('');
   const {
     update,
     error,
@@ -37,6 +39,7 @@ const useInstrumentChange = _ref => {
     setQuery({
       instruments: [selectedInstrument.id]
     });
+    setCurrency((0, _utils.getInstrumentCurrency)(selectedInstrument.label));
   }, [selectedInstrument.id]);
   return {
     selectedInstrument,
@@ -44,7 +47,8 @@ const useInstrumentChange = _ref => {
     pipLocation,
     initialSpread,
     loading,
-    error: !!error || !!connectionError
+    error: !!error || !!connectionError,
+    currency
   };
 };
 exports.useInstrumentChange = useInstrumentChange;

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

@@ -1 +1 @@
-{"version":3,"file":"useInstrumentChange.js","names":["_labsWidgetCommon","require","_react","useInstrumentChange","_ref","initialInstrument","target","setQuery","closeQuery","useLiveRatesQuery","loading","setLoading","useState","selectedInstrument","setSelectedInstrument","pipLocation","setPipLocation","undefined","initialSpread","setSpread","update","error","connectionError","useLiveRatesMessage","id","useEffect","symbol","spread","instruments","exports"],"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,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMO,MAAME,mBAAmB,GAAGC,IAAA,IAEH;EAAA,IAFI;IAClCC;EACwB,CAAC,GAAAD,IAAA;EACzB,MAAM;IAAEE,MAAM;IAAEC,QAAQ;IAAEC;EAAW,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EAC5D,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAI,CAAC;EAC5C,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAF,eAAQ,EAACP,iBAAiB,CAAC;EAC/E,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAJ,eAAQ,EAAqBK,SAAS,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,SAAS,CAAC,GAAG,IAAAP,eAAQ,EAAqBK,SAAS,CAAC;EAE1E,MAAM;IAAEG,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAG,IAAAC,qCAAmB,EAC5DV,kBAAkB,CAACW,EAAE,EACrBlB,MACF,CAAC;EAED,IAAAmB,gBAAS,EAAC,MAAM;IACd,IAAIZ,kBAAkB,CAACW,EAAE,KAAKJ,MAAM,EAAEM,MAAM,EAAE;MAC5CV,cAAc,CAACI,MAAM,CAACL,WAAW,CAAC;MAClCI,SAAS,CAACC,MAAM,CAACO,MAAM,CAAC;MACxBhB,UAAU,CAAC,KAAK,CAAC;MACjBH,UAAU,CAAC,CAAC;IACd;EAGF,CAAC,EAAE,CAACY,MAAM,CAAC,CAAC;EAEZ,IAAAK,gBAAS,EAAC,MAAM;IACdd,UAAU,CAAC,IAAI,CAAC;IAChBJ,QAAQ,CAAC;MAAEqB,WAAW,EAAE,CAACf,kBAAkB,CAACW,EAAE;IAAE,CAAC,CAAC;EAEpD,CAAC,EAAE,CAACX,kBAAkB,CAACW,EAAE,CAAC,CAAC;EAE3B,OAAO;IACLX,kBAAkB;IAClBC,qBAAqB;IACrBC,WAAW;IACXG,aAAa;IACbR,OAAO;IACPW,KAAK,EAAE,CAAC,CAACA,KAAK,IAAI,CAAC,CAACC;EACtB,CAAC;AACH,CAAC;AAACO,OAAA,CAAA1B,mBAAA,GAAAA,mBAAA","ignoreList":[]}
+{"version":3,"file":"useInstrumentChange.js","names":["_labsWidgetCommon","require","_react","_utils","useInstrumentChange","_ref","initialInstrument","target","setQuery","closeQuery","useLiveRatesQuery","loading","setLoading","useState","selectedInstrument","setSelectedInstrument","pipLocation","setPipLocation","undefined","initialSpread","setSpread","currency","setCurrency","update","error","connectionError","useLiveRatesMessage","id","useEffect","symbol","spread","instruments","getInstrumentCurrency","label","exports"],"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,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAMO,MAAMG,mBAAmB,GAAGC,IAAA,IAEH;EAAA,IAFI;IAClCC;EACwB,CAAC,GAAAD,IAAA;EACzB,MAAM;IAAEE,MAAM;IAAEC,QAAQ;IAAEC;EAAW,CAAC,GAAG,IAAAC,mCAAiB,EAAC,CAAC;EAC5D,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAI,CAAC;EAC5C,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAF,eAAQ,EAACP,iBAAiB,CAAC;EAC/E,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAJ,eAAQ,EAAqBK,SAAS,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,SAAS,CAAC,GAAG,IAAAP,eAAQ,EAAqBK,SAAS,CAAC;EAC1E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAT,eAAQ,EAAC,EAAE,CAAC;EAE5C,MAAM;IAAEU,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAG,IAAAC,qCAAmB,EAC5DZ,kBAAkB,CAACa,EAAE,EACrBpB,MACF,CAAC;EAED,IAAAqB,gBAAS,EAAC,MAAM;IACd,IAAId,kBAAkB,CAACa,EAAE,KAAKJ,MAAM,EAAEM,MAAM,EAAE;MAC5CZ,cAAc,CAACM,MAAM,CAACP,WAAW,CAAC;MAClCI,SAAS,CAACG,MAAM,CAACO,MAAM,CAAC;MACxBlB,UAAU,CAAC,KAAK,CAAC;MACjBH,UAAU,CAAC,CAAC;IACd;EAGF,CAAC,EAAE,CAACc,MAAM,CAAC,CAAC;EAEZ,IAAAK,gBAAS,EAAC,MAAM;IACdhB,UAAU,CAAC,IAAI,CAAC;IAChBJ,QAAQ,CAAC;MAAEuB,WAAW,EAAE,CAACjB,kBAAkB,CAACa,EAAE;IAAE,CAAC,CAAC;IAClDL,WAAW,CAAC,IAAAU,4BAAqB,EAAClB,kBAAkB,CAACmB,KAAK,CAAC,CAAC;EAE9D,CAAC,EAAE,CAACnB,kBAAkB,CAACa,EAAE,CAAC,CAAC;EAE3B,OAAO;IACLb,kBAAkB;IAClBC,qBAAqB;IACrBC,WAAW;IACXG,aAAa;IACbR,OAAO;IACPa,KAAK,EAAE,CAAC,CAACA,KAAK,IAAI,CAAC,CAACC,eAAe;IACnCJ;EACF,CAAC;AACH,CAAC;AAACa,OAAA,CAAA9B,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/dist/main/SpreadCostCalculatorWidget/utils.js

@@ -4,14 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getInstrumentCurrency = void 0;
-const getInstrumentCurrency = instrument => {
-  if (typeof instrument === 'string') {
-    return instrument.split('_')[1] || ' ';
-  }
-  if (instrument?.name) {
-    return instrument.name.split('_')[1] || ' ';
-  }
-  return ' ';
-};
+var _constant = require("./constant");
+const getInstrumentCurrency = instrument => instrument.split('/')[1] || _constant.DEFAULT_CURRENCY;
 exports.getInstrumentCurrency = getInstrumentCurrency;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getInstrumentCurrency","instrument","split","name","exports"],"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":";;;;;;AAEO,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;AAACE,OAAA,CAAAJ,qBAAA,GAAAA,qBAAA","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["_constant","require","getInstrumentCurrency","instrument","split","DEFAULT_CURRENCY","exports"],"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,IAAAA,SAAA,GAAAC,OAAA;AAEO,MAAMC,qBAAqB,GAAIC,UAAkB,IAAaA,UAAU,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAIC,0BAAgB;AAACC,OAAA,CAAAJ,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/module/SpreadCostCalculatorWidget/Main.js

@@ -1,17 +1,15 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useLocale } from '@oanda/mono-i18n';
-import { ChartError, cn, Label, NumberInput, Select, Size, ThemeContext, useNumberFormat } from '@oanda/labs-widget-common';
+import { ChartError, cn, Label, NumberInput, Select, Size, useLayoutProvider, useNumberFormat } from '@oanda/labs-widget-common';
 import { useCalculateSpread } from './useCalculateSpread';
-import { getInstrumentCurrency } from './utils';
 import { useInstrumentChange } from './useInstrumentChange';
-import { CELL_EMPTY_VALUE } from './constant';
 const Main = _ref => {
   let {
     instruments
   } = _ref;
   const {
     size
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const selectOptions = instruments.map(instrument => ({
     id: instrument.name,
@@ -37,7 +35,8 @@ const Main = _ref => {
     pipLocation,
     initialSpread,
     loading,
-    error
+    error,
+    currency
   } = useInstrumentChange({
     initialInstrument: {
       id: instruments[0].name,
@@ -57,7 +56,8 @@ const Main = _ref => {
   const spreadCost = useCalculateSpread({
     spread,
     unitsTraded,
-    pipLocation
+    pipLocation,
+    currency
   });
   return React.createElement(React.Fragment, null, error ? React.createElement("div", {
     className: "lw-flex lw-h-[300px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary"
@@ -101,7 +101,7 @@ const Main = _ref => {
     className: "lw-pt-4 lw-text-text-primary"
   }, React.createElement("div", null, lang('absolute_spread_cost')), React.createElement("div", {
     className: "lw-pt-2 lw-text-3xl lw-font-bold"
-  }, spreadCost ? `${spreadCost} ${getInstrumentCurrency(selectedInstrument.id)}` : CELL_EMPTY_VALUE)))));
+  }, spreadCost)))));
 };
 export { Main };
 //# sourceMappingURL=Main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","useContext","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","ThemeContext","useNumberFormat","useCalculateSpread","getInstrumentCurrency","useInstrumentChange","CELL_EMPTY_VALUE","Main","_ref","instruments","size","isDesktop","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","initialInstrument","floatValue","formattedValue","toString","lang","spreadCost","createElement","Fragment","className","htmlFor","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useContext, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  ThemeContext,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { getInstrumentCurrency } from './utils';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\nimport { CELL_EMPTY_VALUE } from './constant';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n  });\n\n  return (\n    <>\n      {error ? (\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        <div\n          data-testid=\"spread-cost-calculator\"\n          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\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost ? `${spreadCost} ${getInstrumentCurrency(selectedInstrument.id)}` : CELL_EMPTY_VALUE }\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["React","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","useLayoutProvider","useNumberFormat","useCalculateSpread","useInstrumentChange","Main","_ref","instruments","size","isDesktop","DESKTOP","selectOptions","map","instrument","id","name","label","displayName","value","unitsTraded","handleValueChange","onUnitChange","increment","incrementTradedUnits","decrement","decrementTradedUnits","spread","onSpreadChange","incrementSpread","decrementSpread","step","selectedInstrument","setSelectedInstrument","pipLocation","initialSpread","loading","error","currency","initialInstrument","floatValue","formattedValue","toString","lang","spreadCost","createElement","Fragment","className","htmlFor","searchPlaceholder","options","selectedOption","setSelectedOption","maxHeight","onValueChange","onIncrement","onDecrement","placeholder","disabled","withoutArrows"],"sources":["../../../src/SpreadCostCalculatorWidget/Main.tsx"],"sourcesContent":["import React, {\n  FC, useEffect,\n} from 'react';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  ChartError,\n  cn,\n  Label,\n  NumberInput,\n  Select,\n  Size,\n  useLayoutProvider,\n  useNumberFormat,\n} from '@oanda/labs-widget-common';\nimport { useCalculateSpread } from './useCalculateSpread';\nimport { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\n\nconst Main: FC<MainProps> = ({\n  instruments,\n}) => {\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const selectOptions = instruments.map((instrument) => ({\n    id: instrument.name,\n    label: instrument.displayName,\n  }));\n\n  const {\n    value: unitsTraded,\n    handleValueChange: onUnitChange,\n    increment: incrementTradedUnits,\n    decrement: decrementTradedUnits,\n  } = useNumberFormat({});\n\n  const {\n    value: spread,\n    handleValueChange: onSpreadChange,\n    increment: incrementSpread,\n    decrement: decrementSpread,\n  } = useNumberFormat({\n    step: 0.1,\n  });\n\n  const {\n    selectedInstrument,\n    setSelectedInstrument,\n    pipLocation,\n    initialSpread,\n    loading,\n    error,\n    currency,\n  } = useInstrumentChange({\n    initialInstrument: {\n      id: instruments[0].name,\n      label: instruments[0].displayName,\n    },\n  });\n\n  useEffect(() => {\n    onSpreadChange({\n      floatValue: initialSpread,\n      formattedValue: initialSpread?.toString() || '',\n      value: initialSpread?.toString() || '',\n    });\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpread]);\n\n  const { lang } = useLocale();\n\n  const spreadCost = useCalculateSpread({\n    spread,\n    unitsTraded,\n    pipLocation,\n    currency,\n  });\n\n  return (\n    <>\n      {error ? (\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        <div\n          data-testid=\"spread-cost-calculator\"\n          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\"\n        >\n          <div className=\"lw-flex lw-flex-col lw-gap-2\">\n            <Label htmlFor={lang('instrument')} className=\"lw-text-text-primary\">\n              {lang('instrument')}\n            </Label>\n            <Select\n              searchPlaceholder={lang('search')}\n              options={selectOptions}\n              selectedOption={selectedInstrument}\n              className=\"lw-grow-0\"\n              setSelectedOption={setSelectedInstrument}\n              maxHeight={isDesktop ? 190 : 220}\n            />\n          </div>\n          <div className=\"lw-flex lw-max-w-full lw-flex-col lw-content-center lw-justify-center lw-gap-3\">\n            <div className={cn('lw-flex lw-max-w-full lw-flex-row lw-gap-3', !isDesktop && 'lw-flex-col lw-gap-8')}>\n              <NumberInput\n                onValueChange={onUnitChange}\n                value={unitsTraded}\n                label={lang('units_traded')}\n                onIncrement={incrementTradedUnits}\n                onDecrement={decrementTradedUnits}\n                placeholder={lang('volume')}\n                disabled={loading}\n                withoutArrows\n              />\n              <NumberInput\n                onValueChange={onSpreadChange}\n                value={spread}\n                label={lang('spread')}\n                onIncrement={incrementSpread}\n                onDecrement={decrementSpread}\n                placeholder={lang('pips')}\n                disabled={loading}\n              />\n            </div>\n            <div className=\"lw-pt-4 lw-text-text-primary\">\n              <div>{lang('absolute_spread_cost')}</div>\n              <div className=\"lw-pt-2 lw-text-3xl lw-font-bold\">\n                {spreadCost}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}