@oanda/labs-spread-cost-calculator-widget 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/dist/main/SpreadCostCalculatorWidget/Main.js +5 -5
- package/dist/main/SpreadCostCalculatorWidget/Main.js.map +1 -1
- package/dist/main/SpreadCostCalculatorWidget/constant.js +2 -1
- package/dist/main/SpreadCostCalculatorWidget/constant.js.map +1 -1
- package/dist/main/SpreadCostCalculatorWidget/useCalculateSpread.js +9 -3
- package/dist/main/SpreadCostCalculatorWidget/useCalculateSpread.js.map +1 -1
- package/dist/main/SpreadCostCalculatorWidget/useInstrumentChange.js +5 -1
- package/dist/main/SpreadCostCalculatorWidget/useInstrumentChange.js.map +1 -1
- package/dist/main/SpreadCostCalculatorWidget/utils.js +2 -9
- package/dist/main/SpreadCostCalculatorWidget/utils.js.map +1 -1
- package/dist/module/SpreadCostCalculatorWidget/Main.js +5 -5
- package/dist/module/SpreadCostCalculatorWidget/Main.js.map +1 -1
- package/dist/module/SpreadCostCalculatorWidget/constant.js +1 -0
- package/dist/module/SpreadCostCalculatorWidget/constant.js.map +1 -1
- package/dist/module/SpreadCostCalculatorWidget/useCalculateSpread.js +9 -3
- package/dist/module/SpreadCostCalculatorWidget/useCalculateSpread.js.map +1 -1
- package/dist/module/SpreadCostCalculatorWidget/useInstrumentChange.js +5 -1
- package/dist/module/SpreadCostCalculatorWidget/useInstrumentChange.js.map +1 -1
- package/dist/module/SpreadCostCalculatorWidget/utils.js +2 -9
- package/dist/module/SpreadCostCalculatorWidget/utils.js.map +1 -1
- package/dist/types/SpreadCostCalculatorWidget/constant.d.ts +1 -0
- package/dist/types/SpreadCostCalculatorWidget/useCalculateSpread.d.ts +2 -1
- package/dist/types/SpreadCostCalculatorWidget/useInstrumentChange.d.ts +1 -0
- package/dist/types/SpreadCostCalculatorWidget/utils.d.ts +1 -2
- package/package.json +3 -3
- package/src/SpreadCostCalculatorWidget/Main.tsx +3 -3
- package/src/SpreadCostCalculatorWidget/constant.ts +1 -0
- package/src/SpreadCostCalculatorWidget/useCalculateSpread.ts +14 -2
- package/src/SpreadCostCalculatorWidget/useInstrumentChange.ts +4 -0
- package/src/SpreadCostCalculatorWidget/utils.ts +2 -11
- package/test/useCalculateSpread.test.tsx +15 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,50 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.0.5 (2024-11-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## 1.0.171 (2024-11-28)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## 1.0.170 (2024-11-28)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## 1.0.169 (2024-11-20)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## 1.0.168 (2024-11-19)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @oanda/labs-spread-cost-calculator-widget
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## 1.0.4 (2024-11-28)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 1.0.170 (2024-11-28)
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## 1.0.169 (2024-11-20)
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## 1.0.168 (2024-11-19)
|
|
43
|
+
|
|
44
|
+
**Note:** Version bump only for package @oanda/labs-spread-cost-calculator-widget
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
6
50
|
## 1.0.3 (2024-11-28)
|
|
7
51
|
|
|
8
52
|
|
|
@@ -8,9 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _monoI18n = require("@oanda/mono-i18n");
|
|
9
9
|
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
10
10
|
var _useCalculateSpread = require("./useCalculateSpread");
|
|
11
|
-
var _utils = require("./utils");
|
|
12
11
|
var _useInstrumentChange = require("./useInstrumentChange");
|
|
13
|
-
var _constant = require("./constant");
|
|
14
12
|
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); }
|
|
15
13
|
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; }
|
|
16
14
|
const Main = _ref => {
|
|
@@ -45,7 +43,8 @@ const Main = _ref => {
|
|
|
45
43
|
pipLocation,
|
|
46
44
|
initialSpread,
|
|
47
45
|
loading,
|
|
48
|
-
error
|
|
46
|
+
error,
|
|
47
|
+
currency
|
|
49
48
|
} = (0, _useInstrumentChange.useInstrumentChange)({
|
|
50
49
|
initialInstrument: {
|
|
51
50
|
id: instruments[0].name,
|
|
@@ -65,7 +64,8 @@ const Main = _ref => {
|
|
|
65
64
|
const spreadCost = (0, _useCalculateSpread.useCalculateSpread)({
|
|
66
65
|
spread,
|
|
67
66
|
unitsTraded,
|
|
68
|
-
pipLocation
|
|
67
|
+
pipLocation,
|
|
68
|
+
currency
|
|
69
69
|
});
|
|
70
70
|
return _react.default.createElement(_react.default.Fragment, null, error ? _react.default.createElement("div", {
|
|
71
71
|
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 => {
|
|
|
109
109
|
className: "lw-pt-4 lw-text-text-primary"
|
|
110
110
|
}, _react.default.createElement("div", null, lang('absolute_spread_cost')), _react.default.createElement("div", {
|
|
111
111
|
className: "lw-pt-2 lw-text-3xl lw-font-bold"
|
|
112
|
-
}, spreadCost
|
|
112
|
+
}, spreadCost)))));
|
|
113
113
|
};
|
|
114
114
|
exports.Main = Main;
|
|
115
115
|
//# sourceMappingURL=Main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_monoI18n","_labsWidgetCommon","_useCalculateSpread","
|
|
1
|
+
{"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","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","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, 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 { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\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 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":[]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.CELL_EMPTY_VALUE = void 0;
|
|
6
|
+
exports.DEFAULT_CURRENCY = exports.CELL_EMPTY_VALUE = void 0;
|
|
7
7
|
const CELL_EMPTY_VALUE = exports.CELL_EMPTY_VALUE = '\u2014';
|
|
8
|
+
const DEFAULT_CURRENCY = exports.DEFAULT_CURRENCY = 'USD';
|
|
8
9
|
//# sourceMappingURL=constant.js.map
|
|
@@ -1 +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":[]}
|
|
1
|
+
{"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":[]}
|
|
@@ -6,17 +6,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useCalculateSpread = void 0;
|
|
7
7
|
var _usehooksTs = require("usehooks-ts");
|
|
8
8
|
var _react = require("react");
|
|
9
|
+
var _reactNumberFormat = require("react-number-format");
|
|
10
|
+
var _constant = require("./constant");
|
|
9
11
|
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;
|
|
10
12
|
const useCalculateSpread = _ref => {
|
|
11
13
|
let {
|
|
12
14
|
spread,
|
|
13
15
|
unitsTraded,
|
|
14
16
|
pipLocation,
|
|
15
|
-
delay = 350
|
|
17
|
+
delay = 350,
|
|
18
|
+
currency
|
|
16
19
|
} = _ref;
|
|
17
|
-
const [debouncedValue, setValue] = (0, _usehooksTs.useDebounceValue)(
|
|
20
|
+
const [debouncedValue, setValue] = (0, _usehooksTs.useDebounceValue)(_constant.CELL_EMPTY_VALUE, delay);
|
|
18
21
|
(0, _react.useEffect)(() => {
|
|
19
|
-
|
|
22
|
+
const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
|
|
23
|
+
setValue(calculatedSpread ? `${(0, _reactNumberFormat.numericFormatter)(calculatedSpread.toString(), {
|
|
24
|
+
thousandSeparator: ','
|
|
25
|
+
})} ${currency}` : _constant.CELL_EMPTY_VALUE);
|
|
20
26
|
}, [spread, unitsTraded, pipLocation, setValue]);
|
|
21
27
|
return debouncedValue;
|
|
22
28
|
};
|
|
@@ -1 +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
|
|
1
|
+
{"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":[]}
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useInstrumentChange = void 0;
|
|
7
7
|
var _labsWidgetCommon = require("@oanda/labs-widget-common");
|
|
8
8
|
var _react = require("react");
|
|
9
|
+
var _utils = require("./utils");
|
|
9
10
|
const useInstrumentChange = _ref => {
|
|
10
11
|
let {
|
|
11
12
|
initialInstrument
|
|
@@ -19,6 +20,7 @@ const useInstrumentChange = _ref => {
|
|
|
19
20
|
const [selectedInstrument, setSelectedInstrument] = (0, _react.useState)(initialInstrument);
|
|
20
21
|
const [pipLocation, setPipLocation] = (0, _react.useState)(undefined);
|
|
21
22
|
const [initialSpread, setSpread] = (0, _react.useState)(undefined);
|
|
23
|
+
const [currency, setCurrency] = (0, _react.useState)('');
|
|
22
24
|
const {
|
|
23
25
|
update,
|
|
24
26
|
error,
|
|
@@ -37,6 +39,7 @@ const useInstrumentChange = _ref => {
|
|
|
37
39
|
setQuery({
|
|
38
40
|
instruments: [selectedInstrument.id]
|
|
39
41
|
});
|
|
42
|
+
setCurrency((0, _utils.getInstrumentCurrency)(selectedInstrument.label));
|
|
40
43
|
}, [selectedInstrument.id]);
|
|
41
44
|
return {
|
|
42
45
|
selectedInstrument,
|
|
@@ -44,7 +47,8 @@ const useInstrumentChange = _ref => {
|
|
|
44
47
|
pipLocation,
|
|
45
48
|
initialSpread,
|
|
46
49
|
loading,
|
|
47
|
-
error: !!error || !!connectionError
|
|
50
|
+
error: !!error || !!connectionError,
|
|
51
|
+
currency
|
|
48
52
|
};
|
|
49
53
|
};
|
|
50
54
|
exports.useInstrumentChange = useInstrumentChange;
|
|
@@ -1 +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,
|
|
1
|
+
{"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":[]}
|
|
@@ -4,14 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getInstrumentCurrency = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return instrument.split('_')[1] || ' ';
|
|
10
|
-
}
|
|
11
|
-
if (instrument?.name) {
|
|
12
|
-
return instrument.name.split('_')[1] || ' ';
|
|
13
|
-
}
|
|
14
|
-
return ' ';
|
|
15
|
-
};
|
|
7
|
+
var _constant = require("./constant");
|
|
8
|
+
const getInstrumentCurrency = instrument => instrument.split('/')[1] || _constant.DEFAULT_CURRENCY;
|
|
16
9
|
exports.getInstrumentCurrency = getInstrumentCurrency;
|
|
17
10
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["getInstrumentCurrency","instrument","split","
|
|
1
|
+
{"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":[]}
|
|
@@ -2,9 +2,7 @@ import React, { useContext, useEffect } from 'react';
|
|
|
2
2
|
import { useLocale } from '@oanda/mono-i18n';
|
|
3
3
|
import { ChartError, cn, Label, NumberInput, Select, Size, ThemeContext, useNumberFormat } from '@oanda/labs-widget-common';
|
|
4
4
|
import { useCalculateSpread } from './useCalculateSpread';
|
|
5
|
-
import { getInstrumentCurrency } from './utils';
|
|
6
5
|
import { useInstrumentChange } from './useInstrumentChange';
|
|
7
|
-
import { CELL_EMPTY_VALUE } from './constant';
|
|
8
6
|
const Main = _ref => {
|
|
9
7
|
let {
|
|
10
8
|
instruments
|
|
@@ -37,7 +35,8 @@ const Main = _ref => {
|
|
|
37
35
|
pipLocation,
|
|
38
36
|
initialSpread,
|
|
39
37
|
loading,
|
|
40
|
-
error
|
|
38
|
+
error,
|
|
39
|
+
currency
|
|
41
40
|
} = useInstrumentChange({
|
|
42
41
|
initialInstrument: {
|
|
43
42
|
id: instruments[0].name,
|
|
@@ -57,7 +56,8 @@ const Main = _ref => {
|
|
|
57
56
|
const spreadCost = useCalculateSpread({
|
|
58
57
|
spread,
|
|
59
58
|
unitsTraded,
|
|
60
|
-
pipLocation
|
|
59
|
+
pipLocation,
|
|
60
|
+
currency
|
|
61
61
|
});
|
|
62
62
|
return React.createElement(React.Fragment, null, error ? React.createElement("div", {
|
|
63
63
|
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 => {
|
|
|
101
101
|
className: "lw-pt-4 lw-text-text-primary"
|
|
102
102
|
}, React.createElement("div", null, lang('absolute_spread_cost')), React.createElement("div", {
|
|
103
103
|
className: "lw-pt-2 lw-text-3xl lw-font-bold"
|
|
104
|
-
}, spreadCost
|
|
104
|
+
}, spreadCost)))));
|
|
105
105
|
};
|
|
106
106
|
export { Main };
|
|
107
107
|
//# sourceMappingURL=Main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.js","names":["React","useContext","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","ThemeContext","useNumberFormat","useCalculateSpread","
|
|
1
|
+
{"version":3,"file":"Main.js","names":["React","useContext","useEffect","useLocale","ChartError","cn","Label","NumberInput","Select","Size","ThemeContext","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, 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 { useInstrumentChange } from './useInstrumentChange';\nimport { MainProps } from './types';\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 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":[]}
|
|
@@ -1 +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":[]}
|
|
1
|
+
{"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":[]}
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import { useDebounceValue } from 'usehooks-ts';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
|
+
import { numericFormatter } from 'react-number-format';
|
|
4
|
+
import { CELL_EMPTY_VALUE } from './constant';
|
|
3
5
|
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;
|
|
4
6
|
export const useCalculateSpread = _ref => {
|
|
5
7
|
let {
|
|
6
8
|
spread,
|
|
7
9
|
unitsTraded,
|
|
8
10
|
pipLocation,
|
|
9
|
-
delay = 350
|
|
11
|
+
delay = 350,
|
|
12
|
+
currency
|
|
10
13
|
} = _ref;
|
|
11
|
-
const [debouncedValue, setValue] = useDebounceValue(
|
|
14
|
+
const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);
|
|
12
15
|
useEffect(() => {
|
|
13
|
-
|
|
16
|
+
const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
|
|
17
|
+
setValue(calculatedSpread ? `${numericFormatter(calculatedSpread.toString(), {
|
|
18
|
+
thousandSeparator: ','
|
|
19
|
+
})} ${currency}` : CELL_EMPTY_VALUE);
|
|
14
20
|
}, [spread, unitsTraded, pipLocation, setValue]);
|
|
15
21
|
return debouncedValue;
|
|
16
22
|
};
|
|
@@ -1 +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
|
|
1
|
+
{"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":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
+
import { getInstrumentCurrency } from './utils';
|
|
3
4
|
export const useInstrumentChange = _ref => {
|
|
4
5
|
let {
|
|
5
6
|
initialInstrument
|
|
@@ -13,6 +14,7 @@ export const useInstrumentChange = _ref => {
|
|
|
13
14
|
const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);
|
|
14
15
|
const [pipLocation, setPipLocation] = useState(undefined);
|
|
15
16
|
const [initialSpread, setSpread] = useState(undefined);
|
|
17
|
+
const [currency, setCurrency] = useState('');
|
|
16
18
|
const {
|
|
17
19
|
update,
|
|
18
20
|
error,
|
|
@@ -31,6 +33,7 @@ export const useInstrumentChange = _ref => {
|
|
|
31
33
|
setQuery({
|
|
32
34
|
instruments: [selectedInstrument.id]
|
|
33
35
|
});
|
|
36
|
+
setCurrency(getInstrumentCurrency(selectedInstrument.label));
|
|
34
37
|
}, [selectedInstrument.id]);
|
|
35
38
|
return {
|
|
36
39
|
selectedInstrument,
|
|
@@ -38,7 +41,8 @@ export const useInstrumentChange = _ref => {
|
|
|
38
41
|
pipLocation,
|
|
39
42
|
initialSpread,
|
|
40
43
|
loading,
|
|
41
|
-
error: !!error || !!connectionError
|
|
44
|
+
error: !!error || !!connectionError,
|
|
45
|
+
currency
|
|
42
46
|
};
|
|
43
47
|
};
|
|
44
48
|
//# sourceMappingURL=useInstrumentChange.js.map
|
|
@@ -1 +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;
|
|
1
|
+
{"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":[]}
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return instrument.split('_')[1] || ' ';
|
|
4
|
-
}
|
|
5
|
-
if (instrument?.name) {
|
|
6
|
-
return instrument.name.split('_')[1] || ' ';
|
|
7
|
-
}
|
|
8
|
-
return ' ';
|
|
9
|
-
};
|
|
1
|
+
import { DEFAULT_CURRENCY } from './constant';
|
|
2
|
+
export const getInstrumentCurrency = instrument => instrument.split('/')[1] || DEFAULT_CURRENCY;
|
|
10
3
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["getInstrumentCurrency","instrument","split"
|
|
1
|
+
{"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":[]}
|
|
@@ -4,5 +4,6 @@ export type UseCalculateSpreadInput = {
|
|
|
4
4
|
unitsTraded: Voidable<number>;
|
|
5
5
|
pipLocation: Voidable<number>;
|
|
6
6
|
delay?: number;
|
|
7
|
+
currency: string;
|
|
7
8
|
};
|
|
8
|
-
export declare const useCalculateSpread: ({ spread, unitsTraded, pipLocation, delay, }: UseCalculateSpreadInput) =>
|
|
9
|
+
export declare const useCalculateSpread: ({ spread, unitsTraded, pipLocation, delay, currency, }: UseCalculateSpreadInput) => string;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const getInstrumentCurrency: (instrument: string | InstrumentResponse | null) => string;
|
|
1
|
+
export declare const getInstrumentCurrency: (instrument: string) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-spread-cost-calculator-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Labs Spread Cost Calculator Widget",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"author": "OANDA",
|
|
13
13
|
"license": "UNLICENSED",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@oanda/labs-widget-common": "^1.0.
|
|
15
|
+
"@oanda/labs-widget-common": "^1.0.172",
|
|
16
16
|
"@oanda/mono-i18n": "10.0.1",
|
|
17
17
|
"echarts": "5.5.0",
|
|
18
18
|
"echarts-for-react": "3.0.2",
|
|
@@ -22,5 +22,5 @@
|
|
|
22
22
|
"@graphql-codegen/cli": "5.0.0",
|
|
23
23
|
"@graphql-codegen/client-preset": "4.1.0"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
|
|
26
26
|
}
|
|
@@ -13,10 +13,8 @@ import {
|
|
|
13
13
|
useNumberFormat,
|
|
14
14
|
} from '@oanda/labs-widget-common';
|
|
15
15
|
import { useCalculateSpread } from './useCalculateSpread';
|
|
16
|
-
import { getInstrumentCurrency } from './utils';
|
|
17
16
|
import { useInstrumentChange } from './useInstrumentChange';
|
|
18
17
|
import { MainProps } from './types';
|
|
19
|
-
import { CELL_EMPTY_VALUE } from './constant';
|
|
20
18
|
|
|
21
19
|
const Main: FC<MainProps> = ({
|
|
22
20
|
instruments,
|
|
@@ -52,6 +50,7 @@ const Main: FC<MainProps> = ({
|
|
|
52
50
|
initialSpread,
|
|
53
51
|
loading,
|
|
54
52
|
error,
|
|
53
|
+
currency,
|
|
55
54
|
} = useInstrumentChange({
|
|
56
55
|
initialInstrument: {
|
|
57
56
|
id: instruments[0].name,
|
|
@@ -74,6 +73,7 @@ const Main: FC<MainProps> = ({
|
|
|
74
73
|
spread,
|
|
75
74
|
unitsTraded,
|
|
76
75
|
pipLocation,
|
|
76
|
+
currency,
|
|
77
77
|
});
|
|
78
78
|
|
|
79
79
|
return (
|
|
@@ -125,7 +125,7 @@ const Main: FC<MainProps> = ({
|
|
|
125
125
|
<div className="lw-pt-4 lw-text-text-primary">
|
|
126
126
|
<div>{lang('absolute_spread_cost')}</div>
|
|
127
127
|
<div className="lw-pt-2 lw-text-3xl lw-font-bold">
|
|
128
|
-
{spreadCost
|
|
128
|
+
{spreadCost}
|
|
129
129
|
</div>
|
|
130
130
|
</div>
|
|
131
131
|
</div>
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { useDebounceValue } from 'usehooks-ts';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
import { Voidable } from '@oanda/labs-widget-common';
|
|
4
|
+
import { numericFormatter } from 'react-number-format';
|
|
5
|
+
import { CELL_EMPTY_VALUE } from './constant';
|
|
4
6
|
|
|
5
7
|
export type UseCalculateSpreadInput = {
|
|
6
8
|
spread: Voidable<number>;
|
|
7
9
|
unitsTraded: Voidable<number>;
|
|
8
10
|
pipLocation: Voidable<number>;
|
|
9
11
|
delay?: number;
|
|
12
|
+
currency: string;
|
|
10
13
|
};
|
|
11
14
|
|
|
12
15
|
const calculateAbsoluteSpreadCost = (
|
|
@@ -27,11 +30,20 @@ export const useCalculateSpread = ({
|
|
|
27
30
|
unitsTraded,
|
|
28
31
|
pipLocation,
|
|
29
32
|
delay = 350,
|
|
33
|
+
currency,
|
|
30
34
|
}: UseCalculateSpreadInput) => {
|
|
31
|
-
const [debouncedValue, setValue] = useDebounceValue
|
|
35
|
+
const [debouncedValue, setValue] = useDebounceValue(CELL_EMPTY_VALUE, delay);
|
|
32
36
|
|
|
33
37
|
useEffect(() => {
|
|
34
|
-
|
|
38
|
+
const calculatedSpread = calculateAbsoluteSpreadCost(unitsTraded, spread, pipLocation);
|
|
39
|
+
setValue(
|
|
40
|
+
calculatedSpread
|
|
41
|
+
? `${numericFormatter(calculatedSpread.toString(), {
|
|
42
|
+
thousandSeparator: ',',
|
|
43
|
+
})} ${currency}`
|
|
44
|
+
: CELL_EMPTY_VALUE,
|
|
45
|
+
);
|
|
46
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35
47
|
}, [spread, unitsTraded, pipLocation, setValue]);
|
|
36
48
|
|
|
37
49
|
return debouncedValue;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { SelectOption, useLiveRatesMessage, useLiveRatesQuery } from '@oanda/labs-widget-common';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
+
import { getInstrumentCurrency } from './utils';
|
|
3
4
|
|
|
4
5
|
export type UseInstrumentChangeInput = {
|
|
5
6
|
initialInstrument: SelectOption;
|
|
@@ -13,6 +14,7 @@ export const useInstrumentChange = ({
|
|
|
13
14
|
const [selectedInstrument, setSelectedInstrument] = useState(initialInstrument);
|
|
14
15
|
const [pipLocation, setPipLocation] = useState<undefined | number>(undefined);
|
|
15
16
|
const [initialSpread, setSpread] = useState<undefined | number>(undefined);
|
|
17
|
+
const [currency, setCurrency] = useState('');
|
|
16
18
|
|
|
17
19
|
const { update, error, connectionError } = useLiveRatesMessage(
|
|
18
20
|
selectedInstrument.id,
|
|
@@ -33,6 +35,7 @@ export const useInstrumentChange = ({
|
|
|
33
35
|
useEffect(() => {
|
|
34
36
|
setLoading(true);
|
|
35
37
|
setQuery({ instruments: [selectedInstrument.id] });
|
|
38
|
+
setCurrency(getInstrumentCurrency(selectedInstrument.label));
|
|
36
39
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
37
40
|
}, [selectedInstrument.id]);
|
|
38
41
|
|
|
@@ -43,5 +46,6 @@ export const useInstrumentChange = ({
|
|
|
43
46
|
initialSpread,
|
|
44
47
|
loading,
|
|
45
48
|
error: !!error || !!connectionError,
|
|
49
|
+
currency,
|
|
46
50
|
};
|
|
47
51
|
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DEFAULT_CURRENCY } from './constant';
|
|
2
2
|
|
|
3
|
-
export const getInstrumentCurrency = (instrument: string
|
|
4
|
-
if (typeof instrument === 'string') {
|
|
5
|
-
return instrument.split('_')[1] || ' ';
|
|
6
|
-
}
|
|
7
|
-
if (instrument?.name) {
|
|
8
|
-
return instrument.name.split('_')[1] || ' ';
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
return ' ';
|
|
12
|
-
};
|
|
3
|
+
export const getInstrumentCurrency = (instrument: string): string => instrument.split('/')[1] || DEFAULT_CURRENCY;
|
|
@@ -24,6 +24,7 @@ describe('spread cost calculator', () => {
|
|
|
24
24
|
unitsTraded: 10000,
|
|
25
25
|
spread: 1.4,
|
|
26
26
|
pipLocation: -4,
|
|
27
|
+
currency: 'USD',
|
|
27
28
|
};
|
|
28
29
|
|
|
29
30
|
it.each([
|
|
@@ -32,23 +33,26 @@ describe('spread cost calculator', () => {
|
|
|
32
33
|
{ ...input, pipLocation: undefined },
|
|
33
34
|
])(
|
|
34
35
|
'should return undefined, when one of params is undefined (%s)',
|
|
35
|
-
({
|
|
36
|
+
({
|
|
37
|
+
unitsTraded, spread, pipLocation, currency,
|
|
38
|
+
}) => {
|
|
36
39
|
// Given
|
|
37
40
|
// When
|
|
38
41
|
const { result } = renderHook(() => useCalculateSpread({
|
|
39
42
|
spread,
|
|
40
43
|
unitsTraded,
|
|
41
44
|
pipLocation,
|
|
45
|
+
currency,
|
|
42
46
|
}));
|
|
43
47
|
|
|
44
|
-
expect(result.current).
|
|
48
|
+
expect(result.current).toBe('\u2014');
|
|
45
49
|
|
|
46
50
|
act(() => {
|
|
47
51
|
jest.advanceTimersByTime(defaultDelay);
|
|
48
52
|
});
|
|
49
53
|
|
|
50
54
|
// Then
|
|
51
|
-
expect(result.current).
|
|
55
|
+
expect(result.current).toBe('\u2014');
|
|
52
56
|
},
|
|
53
57
|
);
|
|
54
58
|
|
|
@@ -61,14 +65,14 @@ describe('spread cost calculator', () => {
|
|
|
61
65
|
pipLocation: -4,
|
|
62
66
|
}));
|
|
63
67
|
|
|
64
|
-
expect(result.current).
|
|
68
|
+
expect(result.current).toBe('\u2014');
|
|
65
69
|
|
|
66
70
|
act(() => {
|
|
67
71
|
jest.advanceTimersByTime(defaultDelay);
|
|
68
72
|
});
|
|
69
73
|
|
|
70
74
|
// Then
|
|
71
|
-
expect(result.current).toEqual(1);
|
|
75
|
+
expect(result.current).toEqual('1 USD');
|
|
72
76
|
});
|
|
73
77
|
|
|
74
78
|
it('should return correct calculated values with 0 as pipLocation', () => {
|
|
@@ -80,14 +84,14 @@ describe('spread cost calculator', () => {
|
|
|
80
84
|
pipLocation: 0,
|
|
81
85
|
}));
|
|
82
86
|
|
|
83
|
-
expect(result.current).
|
|
87
|
+
expect(result.current).toBe('\u2014');
|
|
84
88
|
|
|
85
89
|
act(() => {
|
|
86
90
|
jest.advanceTimersByTime(defaultDelay);
|
|
87
91
|
});
|
|
88
92
|
|
|
89
93
|
// Then
|
|
90
|
-
expect(result.current).toEqual(
|
|
94
|
+
expect(result.current).toEqual('10,000 USD');
|
|
91
95
|
});
|
|
92
96
|
|
|
93
97
|
it('should round up result to 4 decimal places', () => {
|
|
@@ -99,14 +103,14 @@ describe('spread cost calculator', () => {
|
|
|
99
103
|
spread: 1.1,
|
|
100
104
|
}));
|
|
101
105
|
|
|
102
|
-
expect(result.current).
|
|
106
|
+
expect(result.current).toBe('\u2014');
|
|
103
107
|
|
|
104
108
|
act(() => {
|
|
105
109
|
jest.advanceTimersByTime(defaultDelay);
|
|
106
110
|
});
|
|
107
111
|
|
|
108
112
|
// Then
|
|
109
|
-
expect(result.current).toEqual(0.0003);
|
|
113
|
+
expect(result.current).toEqual('0.0003 USD');
|
|
110
114
|
});
|
|
111
115
|
|
|
112
116
|
it('should calculate big numbers', () => {
|
|
@@ -118,14 +122,14 @@ describe('spread cost calculator', () => {
|
|
|
118
122
|
spread: 123331,
|
|
119
123
|
}));
|
|
120
124
|
|
|
121
|
-
expect(result.current).
|
|
125
|
+
expect(result.current).toBe('\u2014');
|
|
122
126
|
|
|
123
127
|
act(() => {
|
|
124
128
|
jest.advanceTimersByTime(defaultDelay);
|
|
125
129
|
});
|
|
126
130
|
|
|
127
131
|
// Then
|
|
128
|
-
expect(result.current).toEqual(
|
|
132
|
+
expect(result.current).toEqual('6,920,978.0601 USD');
|
|
129
133
|
});
|
|
130
134
|
});
|
|
131
135
|
});
|