@oanda/labs-currency-cross-table 1.0.26 → 1.0.27

package/CHANGELOG.md

@@ -3,6 +3,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.27 (2025-01-10)
+
+
+
+## 1.0.175 (2025-01-08)
+
+
+
+## 1.0.174 (2024-12-16)
+
+
+
+## 1.0.173 (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)
+
+
+
+## 1.0.167 (2024-10-14)
+
+
+
+## 1.0.166 (2024-10-07)
+
+
+
+## 1.0.165 (2024-10-03)
+
+
+
+## 1.0.164 (2024-09-26)
+
+
+
+## 1.0.163 (2024-09-18)
+
+
+
+## 1.0.162 (2024-09-12)
+
+
+
+## 1.0.161 (2024-09-11)
+
+
+
+## 1.0.160 (2024-09-10)
+
+
+
+## 1.0.159 (2024-09-09)
+
+
+
+## 1.0.158 (2024-09-04)
+
+
+
+## 1.0.157 (2024-09-04)
+
+
+
+## 1.0.156 (2024-09-02)
+
+
+
+## 1.0.155 (2024-08-29)
+
+
+
+## 1.0.154 (2024-08-29)
+
+
+
+## 1.0.153 (2024-08-23)
+
+
+
+## 1.0.152 (2024-08-23)
+
+
+
+## 1.0.151 (2024-08-20)
+
+
+
+## 1.0.150 (2024-08-19)
+
+**Note:** Version bump only for package @oanda/labs-currency-cross-table
+
+
+
+
+
 ## 1.0.26 (2025-01-08)
 
 

package/dist/main/CurrencyCrossTableWidget/Main.js

@@ -46,11 +46,11 @@ const Main = _ref => {
     hovered: currency === selectedCurrency,
     label: currency
   }), arr.map(pair => _react.default.createElement(_react.Fragment, {
-    key: "".concat(currency, "_").concat(pair)
+    key: `${currency}_${pair}`
   }, currency !== pair ? _react.default.createElement(_components.CellWithData, {
     currency: currency,
     division: division,
-    isValid: validInstruments.includes("".concat(currency).concat((0, _utils.divisionMapper)(division)).concat(pair)),
+    isValid: validInstruments.includes(`${currency}${(0, _utils.divisionMapper)(division)}${pair}`),
     pair: pair,
     setSelectedCurrency: setSelectedCurrency,
     setSelectedPair: setSelectedPair,

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_react","_interopRequireWildcard","_components","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","currencies","validInstruments","division","selectedCurrency","setSelectedCurrency","useState","selectedPair","setSelectedPair","target","setQuery","useLiveRatesQuery","useEffect","instruments","createElement","className","TextCell","sticky","map","pair","key","hovered","label","currency","index","arr","Fragment","concat","CellWithData","isValid","includes","divisionMapper","emptyIndicator","exports"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport React, { Fragment, useEffect, useState } from 'react';\n\nimport { CellWithData, TextCell } from './components';\nimport type { MainProps } from './types';\nimport { divisionMapper } from './utils';\n\nconst Main = ({ currencies, validInstruments, division }: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    setQuery({ instruments: validInstruments });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, validInstruments);\n\n  return (\n    <div\n      className=\"lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary\"\n      data-testid=\"currency-cross-table-wrapper\"\n    >\n      <div className=\"lw-flex lw-w-max lw-min-w-full\">\n        <TextCell sticky />\n        {currencies.map((pair) => (\n          <TextCell key={pair} hovered={pair === selectedPair} label={pair} />\n        ))}\n      </div>\n      {currencies.map((currency, index, arr) => (\n        <div key={currency} className=\"lw-flex lw-w-max lw-min-w-full\">\n          <TextCell\n            sticky\n            hovered={currency === selectedCurrency}\n            label={currency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  currency={currency}\n                  division={division}\n                  isValid={validInstruments.includes(\n                    `${currency}${divisionMapper(division)}${pair}`\n                  )}\n                  pair={pair}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                  target={target}\n                />\n              ) : (\n                <TextCell emptyIndicator />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_react","_interopRequireWildcard","_components","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","currencies","validInstruments","division","selectedCurrency","setSelectedCurrency","useState","selectedPair","setSelectedPair","target","setQuery","useLiveRatesQuery","useEffect","instruments","createElement","className","TextCell","sticky","map","pair","key","hovered","label","currency","index","arr","Fragment","CellWithData","isValid","includes","divisionMapper","emptyIndicator","exports"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport React, { Fragment, useEffect, useState } from 'react';\n\nimport { CellWithData, TextCell } from './components';\nimport type { MainProps } from './types';\nimport { divisionMapper } from './utils';\n\nconst Main = ({ currencies, validInstruments, division }: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    setQuery({ instruments: validInstruments });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, validInstruments);\n\n  return (\n    <div\n      className=\"lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary\"\n      data-testid=\"currency-cross-table-wrapper\"\n    >\n      <div className=\"lw-flex lw-w-max lw-min-w-full\">\n        <TextCell sticky />\n        {currencies.map((pair) => (\n          <TextCell key={pair} hovered={pair === selectedPair} label={pair} />\n        ))}\n      </div>\n      {currencies.map((currency, index, arr) => (\n        <div key={currency} className=\"lw-flex lw-w-max lw-min-w-full\">\n          <TextCell\n            sticky\n            hovered={currency === selectedCurrency}\n            label={currency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  currency={currency}\n                  division={division}\n                  isValid={validInstruments.includes(\n                    `${currency}${divisionMapper(division)}${pair}`\n                  )}\n                  pair={pair}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                  target={target}\n                />\n              ) : (\n                <TextCell emptyIndicator />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/ValidationWrapper.js

@@ -13,7 +13,6 @@ var _Main = require("./Main");
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ValidationWrapper = _ref => {
-  var _data$resolveInstrume;
   let {
     currencies,
     division,
@@ -31,7 +30,7 @@ const ValidationWrapper = _ref => {
     fetchPolicy: 'network-only',
     errorPolicy: 'all'
   });
-  const validInstruments = data === null || data === void 0 || (_data$resolveInstrume = data.resolveInstrumentsByDivision) === null || _data$resolveInstrume === void 0 ? void 0 : _data$resolveInstrume.map(instrument => instrument.name);
+  const validInstruments = data?.resolveInstrumentsByDivision?.map(instrument => instrument.name);
   const showError = !(0, _utils.validCurrencies)(currencies) || isParamError || error || !validInstruments || validInstruments.length === 0;
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
     className: "lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary"

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["_client","require","_labsWidgetCommon","_classnames","_interopRequireDefault","_react","_validateInstruments","_Main","_utils","e","__esModule","default","ValidationWrapper","_ref","_data$resolveInstrume","currencies","division","isParamError","instruments","currenciesToInstruments","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","validInstruments","resolveInstrumentsByDivision","map","instrument","name","showError","validCurrencies","length","createElement","Fragment","className","Main","classnames","ChartError","exports"],"sources":["../../../src/CurrencyCrossTableWidget/ValidationWrapper.tsx"],"sourcesContent":["import { useSuspenseQuery } from '@apollo/client';\nimport { ChartError } from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport type {\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables,\n} from '../gql/types/graphql';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { Main } from './Main';\nimport type { ValidationWrapperProps } from './types';\nimport { currenciesToInstruments, validCurrencies } from './utils';\n\nconst ValidationWrapper = ({\n  currencies,\n  division,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const instruments = currenciesToInstruments(currencies, division);\n\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 validInstruments = data?.resolveInstrumentsByDivision?.map(\n    (instrument) => instrument.name\n  );\n  const showError =\n    !validCurrencies(currencies) ||\n    isParamError ||\n    error ||\n    !validInstruments ||\n    validInstruments.length === 0;\n\n  return (\n    <>\n      <div className=\"lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {!showError && (\n          <Main\n            currencies={currencies}\n            division={division}\n            validInstruments={validInstruments}\n          />\n        )}\n        {showError && (\n          <div\n            className={classnames(\n              'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAMA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAP,OAAA;AAAmE,SAAAG,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnE,MAAMG,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAAAC,qBAAA;EAAA,IAJH;IACzBC,UAAU;IACVC,QAAQ;IACRC;EACsB,CAAC,GAAAJ,IAAA;EACvB,MAAMK,WAAW,GAAG,IAAAC,8BAAuB,EAACJ,UAAU,EAAEC,QAAQ,CAAC;EAEjE,MAAM;IAAEI,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,wBAAgB,EAGtCC,wCAAmB,EAAE;IACrBC,SAAS,EAAE;MACTN,WAAW;MACXF;IACF,CAAC;IACDS,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGP,IAAI,aAAJA,IAAI,gBAAAN,qBAAA,GAAJM,IAAI,CAAEQ,4BAA4B,cAAAd,qBAAA,uBAAlCA,qBAAA,CAAoCe,GAAG,CAC7DC,UAAU,IAAKA,UAAU,CAACC,IAC7B,CAAC;EACD,MAAMC,SAAS,GACb,CAAC,IAAAC,sBAAe,EAAClB,UAAU,CAAC,IAC5BE,YAAY,IACZI,KAAK,IACL,CAACM,gBAAgB,IACjBA,gBAAgB,CAACO,MAAM,KAAK,CAAC;EAE/B,OACE7B,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAAA9B,MAAA,CAAAM,OAAA,CAAAyB,QAAA,QACE/B,MAAA,CAAAM,OAAA,CAAAwB,aAAA;IAAKE,SAAS,EAAC;EAAsE,GAClF,CAACL,SAAS,IACT3B,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAAC5B,KAAA,CAAA+B,IAAI;IACHvB,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBW,gBAAgB,EAAEA;EAAiB,CACpC,CACF,EACAK,SAAS,IACR3B,MAAA,CAAAM,OAAA,CAAAwB,aAAA;IACEE,SAAS,EAAE,IAAAE,mBAAU,EACnB,mGACF;EAAE,GAEFlC,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAACjC,iBAAA,CAAAsC,UAAU,MAAE,CACV,CAEJ,CACL,CAAC;AAEP,CAAC;AAACC,OAAA,CAAA7B,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["_client","require","_labsWidgetCommon","_classnames","_interopRequireDefault","_react","_validateInstruments","_Main","_utils","e","__esModule","default","ValidationWrapper","_ref","currencies","division","isParamError","instruments","currenciesToInstruments","data","error","useSuspenseQuery","validateInstruments","variables","fetchPolicy","errorPolicy","validInstruments","resolveInstrumentsByDivision","map","instrument","name","showError","validCurrencies","length","createElement","Fragment","className","Main","classnames","ChartError","exports"],"sources":["../../../src/CurrencyCrossTableWidget/ValidationWrapper.tsx"],"sourcesContent":["import { useSuspenseQuery } from '@apollo/client';\nimport { ChartError } from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport type {\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables,\n} from '../gql/types/graphql';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { Main } from './Main';\nimport type { ValidationWrapperProps } from './types';\nimport { currenciesToInstruments, validCurrencies } from './utils';\n\nconst ValidationWrapper = ({\n  currencies,\n  division,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const instruments = currenciesToInstruments(currencies, division);\n\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 validInstruments = data?.resolveInstrumentsByDivision?.map(\n    (instrument) => instrument.name\n  );\n  const showError =\n    !validCurrencies(currencies) ||\n    isParamError ||\n    error ||\n    !validInstruments ||\n    validInstruments.length === 0;\n\n  return (\n    <>\n      <div className=\"lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {!showError && (\n          <Main\n            currencies={currencies}\n            division={division}\n            validInstruments={validInstruments}\n          />\n        )}\n        {showError && (\n          <div\n            className={classnames(\n              'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAMA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAP,OAAA;AAAmE,SAAAG,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnE,MAAMG,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,UAAU;IACVC,QAAQ;IACRC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAMI,WAAW,GAAG,IAAAC,8BAAuB,EAACJ,UAAU,EAAEC,QAAQ,CAAC;EAEjE,MAAM;IAAEI,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,wBAAgB,EAGtCC,wCAAmB,EAAE;IACrBC,SAAS,EAAE;MACTN,WAAW;MACXF;IACF,CAAC;IACDS,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGP,IAAI,EAAEQ,4BAA4B,EAAEC,GAAG,CAC7DC,UAAU,IAAKA,UAAU,CAACC,IAC7B,CAAC;EACD,MAAMC,SAAS,GACb,CAAC,IAAAC,sBAAe,EAAClB,UAAU,CAAC,IAC5BE,YAAY,IACZI,KAAK,IACL,CAACM,gBAAgB,IACjBA,gBAAgB,CAACO,MAAM,KAAK,CAAC;EAE/B,OACE5B,MAAA,CAAAM,OAAA,CAAAuB,aAAA,CAAA7B,MAAA,CAAAM,OAAA,CAAAwB,QAAA,QACE9B,MAAA,CAAAM,OAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAsE,GAClF,CAACL,SAAS,IACT1B,MAAA,CAAAM,OAAA,CAAAuB,aAAA,CAAC3B,KAAA,CAAA8B,IAAI;IACHvB,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBW,gBAAgB,EAAEA;EAAiB,CACpC,CACF,EACAK,SAAS,IACR1B,MAAA,CAAAM,OAAA,CAAAuB,aAAA;IACEE,SAAS,EAAE,IAAAE,mBAAU,EACnB,mGACF;EAAE,GAEFjC,MAAA,CAAAM,OAAA,CAAAuB,aAAA,CAAChC,iBAAA,CAAAqC,UAAU,MAAE,CACV,CAEJ,CACL,CAAC;AAEP,CAAC;AAACC,OAAA,CAAA5B,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js

@@ -20,21 +20,16 @@ const CellWithData = _ref => {
     setSelectedCurrency,
     setSelectedPair
   } = _ref;
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  const instrument = "".concat(currency).concat((0, _utils.divisionMapper)(division)).concat(pair);
-  const instrumentForUpdates = isValid ? instrument : "".concat(pair).concat((0, _utils.divisionMapper)(division)).concat(currency);
+  const instrument = `${currency}${(0, _utils.divisionMapper)(division)}${pair}`;
+  const instrumentForUpdates = isValid ? instrument : `${pair}${(0, _utils.divisionMapper)(division)}${currency}`;
   const {
     update,
     error: liveRatesError
   } = (0, _labsWidgetCommon.useLiveRatesMessage)(instrumentForUpdates, target);
-  const updatedRecord = {
-    displayName: "".concat(currency, "/").concat(pair),
-    instrument,
-    buy: update === null || update === void 0 ? void 0 : update.ask,
-    buyPriceMovement: update === null || update === void 0 ? void 0 : update.askPriceMovement,
-    displayPrecision: currency === 'JPY' && !isValid ? 6 : update === null || update === void 0 ? void 0 : update.displayPrecision
-  };
-  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const prevBuyPrice = (0, _react.useRef)();
+  const [priceMovement, setPriceMovement] = (0, _react.useState)();
+  const checkLoading = () => !liveRatesError && update?.ask === undefined;
   const handleMouseEnter = () => {
     setHovered(true);
     setSelectedCurrency(currency);
@@ -45,6 +40,21 @@ const CellWithData = _ref => {
     setSelectedCurrency('');
     setSelectedPair('');
   };
+  (0, _react.useEffect)(() => {
+    if (!update) return;
+    const {
+      ask,
+      displayPrecision
+    } = update;
+    const movement = (0, _utils.getPriceMovement)({
+      previous: prevBuyPrice.current,
+      update: ask,
+      displayPrecision: currency === 'JPY' && !isValid ? 6 : displayPrecision,
+      isReversed: !isValid
+    });
+    prevBuyPrice.current = ask;
+    setPriceMovement(movement);
+  }, [isValid, update, currency]);
   return _react.default.createElement(_Cell.Cell, {
     hovered: hovered,
     isError: !!liveRatesError,
@@ -53,8 +63,8 @@ const CellWithData = _ref => {
     mouseLeaveHandler: handleMouseLeave
   }, _react.default.createElement(_labsWidgetCommon.Price, {
     movementIndicator: "background",
-    priceMovement: (0, _utils.getPriceMovement)(updatedRecord.buyPriceMovement, !isValid)
-  }, _react.default.createElement("span", null, (0, _utils.getBuyPrice)(updatedRecord.buy, !isValid).toFixed(updatedRecord.displayPrecision))));
+    priceMovement: priceMovement
+  }, _react.default.createElement("span", null, (0, _utils.getBuyPrice)(update?.ask, !isValid).toFixed(currency === 'JPY' && !isValid ? 6 : update?.displayPrecision))));
 };
 exports.CellWithData = CellWithData;
 //# sourceMappingURL=CellWithData.js.map

package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWithData.js","names":["_labsWidgetCommon","require","_react","_interopRequireWildcard","_utils","_Cell","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CellWithData","_ref","currency","pair","isValid","target","division","setSelectedCurrency","setSelectedPair","hovered","setHovered","useState","instrument","concat","divisionMapper","instrumentForUpdates","update","error","liveRatesError","useLiveRatesMessage","updatedRecord","displayName","buy","ask","buyPriceMovement","askPriceMovement","displayPrecision","checkLoading","undefined","handleMouseEnter","handleMouseLeave","createElement","Cell","isError","isLoading","mouseEnterHandler","mouseLeaveHandler","Price","movementIndicator","priceMovement","getPriceMovement","getBuyPrice","toFixed","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';\nimport React, { useState } from 'react';\n\nimport { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';\nimport { Cell } from './Cell';\nimport type { CellWithDataProps } from './types';\n\nconst CellWithData = ({\n  currency,\n  pair,\n  isValid,\n  target,\n  division,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const [hovered, setHovered] = useState(false);\n\n  const instrument = `${currency}${divisionMapper(division)}${pair}`;\n  const instrumentForUpdates = isValid\n    ? instrument\n    : `${pair}${divisionMapper(division)}${currency}`;\n\n  const { update, error: liveRatesError } = useLiveRatesMessage(\n    instrumentForUpdates,\n    target\n  );\n\n  const updatedRecord = {\n    displayName: `${currency}/${pair}`,\n    instrument,\n    buy: update?.ask,\n    buyPriceMovement: update?.askPriceMovement,\n    displayPrecision:\n      currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,\n  };\n\n  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  return (\n    <Cell\n      hovered={hovered}\n      isError={!!liveRatesError}\n      isLoading={checkLoading()}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price\n        movementIndicator=\"background\"\n        priceMovement={getPriceMovement(\n          updatedRecord.buyPriceMovement,\n          !isValid\n        )}\n      >\n        <span>\n          {getBuyPrice(updatedRecord.buy, !isValid).toFixed(\n            updatedRecord.displayPrecision\n          )}\n        </span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CellWithData.js","names":["_labsWidgetCommon","require","_react","_interopRequireWildcard","_utils","_Cell","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CellWithData","_ref","currency","pair","isValid","target","division","setSelectedCurrency","setSelectedPair","instrument","divisionMapper","instrumentForUpdates","update","error","liveRatesError","useLiveRatesMessage","hovered","setHovered","useState","prevBuyPrice","useRef","priceMovement","setPriceMovement","checkLoading","ask","undefined","handleMouseEnter","handleMouseLeave","useEffect","displayPrecision","movement","getPriceMovement","previous","current","isReversed","createElement","Cell","isError","isLoading","mouseEnterHandler","mouseLeaveHandler","Price","movementIndicator","getBuyPrice","toFixed","exports"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';\nimport { Cell } from './Cell';\nimport type { CellWithDataProps } from './types';\n\nconst CellWithData = ({\n  currency,\n  pair,\n  isValid,\n  target,\n  division,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const instrument = `${currency}${divisionMapper(division)}${pair}`;\n  const instrumentForUpdates = isValid\n    ? instrument\n    : `${pair}${divisionMapper(division)}${currency}`;\n\n  const { update, error: liveRatesError } = useLiveRatesMessage(\n    instrumentForUpdates,\n    target\n  );\n\n  const [hovered, setHovered] = useState(false);\n  const prevBuyPrice = useRef<number>();\n  const [priceMovement, setPriceMovement] = useState<number | undefined>();\n\n  const checkLoading = () => !liveRatesError && update?.ask === undefined;\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  useEffect(() => {\n    if (!update) return;\n\n    const { ask, displayPrecision } = update;\n    const movement = getPriceMovement({\n      previous: prevBuyPrice.current,\n      update: ask,\n      displayPrecision: currency === 'JPY' && !isValid ? 6 : displayPrecision,\n      isReversed: !isValid,\n    });\n\n    prevBuyPrice.current = ask;\n    setPriceMovement(movement);\n  }, [isValid, update, currency]);\n\n  return (\n    <Cell\n      hovered={hovered}\n      isError={!!liveRatesError}\n      isLoading={checkLoading()}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price movementIndicator=\"background\" priceMovement={priceMovement}>\n        <span>\n          {getBuyPrice(update?.ask, !isValid).toFixed(\n            currency === 'JPY' && !isValid ? 6 : update?.displayPrecision\n          )}\n        </span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyCrossTableWidget/utils.js

@@ -12,14 +12,24 @@ exports.divisionMapper = divisionMapper;
 const currenciesToInstruments = (currencies, division) => {
   const pairs = currencies.reduce((acc, cV, index, array) => {
     const unique = array.filter((_item, idx) => index !== idx);
-    return [...acc, ...unique.map(el => "".concat(cV).concat(divisionMapper(division)).concat(el))];
+    return [...acc, ...unique.map(el => `${cV}${divisionMapper(division)}${el}`)];
   }, []);
   return pairs;
 };
 exports.currenciesToInstruments = currenciesToInstruments;
-const getPriceMovement = (priceMovement, isReversed) => {
-  if (priceMovement === undefined) return 0;
-  return isReversed ? priceMovement * -1 : priceMovement;
+const getPriceMovement = _ref => {
+  let {
+    previous,
+    update,
+    displayPrecision,
+    isReversed
+  } = _ref;
+  const roundedPrevious = getBuyPrice(previous, isReversed)?.toFixed(displayPrecision);
+  const roundedUpdate = getBuyPrice(update, isReversed)?.toFixed(displayPrecision);
+  if (roundedPrevious === roundedUpdate || update === undefined) {
+    return 0;
+  }
+  return roundedUpdate > roundedPrevious ? 1 : -1;
 };
 exports.getPriceMovement = getPriceMovement;
 const getBuyPrice = (price, isReversed) => {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["_constant","require","validCurrencies","currencies","every","currency","MAJOR_CURRENCIES","includes","exports","divisionMapper","division","currenciesToInstruments","pairs","reduce","acc","cV","index","array","unique","filter","_item","idx","map","el","concat","getPriceMovement","priceMovement","isReversed","undefined","getBuyPrice","price"],"sources":["../../../src/CurrencyCrossTableWidget/utils.ts"],"sourcesContent":["import type { Division } from '../gql/types/graphql';\nimport { MAJOR_CURRENCIES } from './constant';\n\nconst validCurrencies = (currencies: string[]) =>\n  currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));\n\nconst divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');\n\nconst currenciesToInstruments = (currencies: string[], division: Division) => {\n  const pairs = currencies.reduce((acc, cV, index, array) => {\n    const unique = array.filter((_item, idx) => index !== idx);\n\n    return [\n      ...acc,\n      ...unique.map((el) => `${cV}${divisionMapper(division)}${el}`),\n    ];\n  }, [] as string[]);\n\n  return pairs;\n};\n\nconst getPriceMovement = (\n  priceMovement: number | undefined,\n  isReversed: boolean\n) => {\n  if (priceMovement === undefined) return 0;\n\n  return isReversed ? priceMovement * -1 : priceMovement;\n};\n\nconst getBuyPrice = (price: number | undefined, isReversed: boolean) => {\n  if (price === undefined) return 0;\n\n  return isReversed ? 1 / price : price;\n};\n\nexport {\n  currenciesToInstruments,\n  divisionMapper,\n  getBuyPrice,\n  getPriceMovement,\n  validCurrencies,\n};\n"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AAEA,MAAMC,eAAe,GAAIC,UAAoB,IAC3CA,UAAU,CAACC,KAAK,CAAEC,QAAQ,IAAKC,0BAAgB,CAACC,QAAQ,CAACF,QAAQ,CAAC,CAAC;AAACG,OAAA,CAAAN,eAAA,GAAAA,eAAA;AAEtE,MAAMO,cAAc,GAAIC,QAAkB,IAAMA,QAAQ,KAAK,KAAK,GAAG,EAAE,GAAG,GAAI;AAACF,OAAA,CAAAC,cAAA,GAAAA,cAAA;AAE/E,MAAME,uBAAuB,GAAGA,CAACR,UAAoB,EAAEO,QAAkB,KAAK;EAC5E,MAAME,KAAK,GAAGT,UAAU,CAACU,MAAM,CAAC,CAACC,GAAG,EAAEC,EAAE,EAAEC,KAAK,EAAEC,KAAK,KAAK;IACzD,MAAMC,MAAM,GAAGD,KAAK,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAKL,KAAK,KAAKK,GAAG,CAAC;IAE1D,OAAO,CACL,GAAGP,GAAG,EACN,GAAGI,MAAM,CAACI,GAAG,CAAEC,EAAE,OAAAC,MAAA,CAAQT,EAAE,EAAAS,MAAA,CAAGf,cAAc,CAACC,QAAQ,CAAC,EAAAc,MAAA,CAAGD,EAAE,CAAE,CAAC,CAC/D;EACH,CAAC,EAAE,EAAc,CAAC;EAElB,OAAOX,KAAK;AACd,CAAC;AAACJ,OAAA,CAAAG,uBAAA,GAAAA,uBAAA;AAEF,MAAMc,gBAAgB,GAAGA,CACvBC,aAAiC,EACjCC,UAAmB,KAChB;EACH,IAAID,aAAa,KAAKE,SAAS,EAAE,OAAO,CAAC;EAEzC,OAAOD,UAAU,GAAGD,aAAa,GAAG,CAAC,CAAC,GAAGA,aAAa;AACxD,CAAC;AAAClB,OAAA,CAAAiB,gBAAA,GAAAA,gBAAA;AAEF,MAAMI,WAAW,GAAGA,CAACC,KAAyB,EAAEH,UAAmB,KAAK;EACtE,IAAIG,KAAK,KAAKF,SAAS,EAAE,OAAO,CAAC;EAEjC,OAAOD,UAAU,GAAG,CAAC,GAAGG,KAAK,GAAGA,KAAK;AACvC,CAAC;AAACtB,OAAA,CAAAqB,WAAA,GAAAA,WAAA","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["_constant","require","validCurrencies","currencies","every","currency","MAJOR_CURRENCIES","includes","exports","divisionMapper","division","currenciesToInstruments","pairs","reduce","acc","cV","index","array","unique","filter","_item","idx","map","el","getPriceMovement","_ref","previous","update","displayPrecision","isReversed","roundedPrevious","getBuyPrice","toFixed","roundedUpdate","undefined","price"],"sources":["../../../src/CurrencyCrossTableWidget/utils.ts"],"sourcesContent":["import type { Division } from '../gql/types/graphql';\nimport { MAJOR_CURRENCIES } from './constant';\n\nconst validCurrencies = (currencies: string[]) =>\n  currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));\n\nconst divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');\n\nconst currenciesToInstruments = (currencies: string[], division: Division) => {\n  const pairs = currencies.reduce((acc, cV, index, array) => {\n    const unique = array.filter((_item, idx) => index !== idx);\n\n    return [\n      ...acc,\n      ...unique.map((el) => `${cV}${divisionMapper(division)}${el}`),\n    ];\n  }, [] as string[]);\n\n  return pairs;\n};\n\nconst getPriceMovement = ({\n  previous,\n  update,\n  displayPrecision,\n  isReversed,\n}: {\n  previous?: number;\n  update?: number;\n  displayPrecision?: number;\n  isReversed: boolean;\n}) => {\n  const roundedPrevious = getBuyPrice(previous, isReversed)?.toFixed(\n    displayPrecision\n  );\n  const roundedUpdate = getBuyPrice(update, isReversed)?.toFixed(\n    displayPrecision\n  );\n\n  if (roundedPrevious === roundedUpdate || update === undefined) {\n    return 0;\n  }\n\n  return roundedUpdate > roundedPrevious ? 1 : -1;\n};\n\nconst getBuyPrice = (price: number | undefined, isReversed: boolean) => {\n  if (price === undefined) return 0;\n\n  return isReversed ? 1 / price : price;\n};\n\nexport {\n  currenciesToInstruments,\n  divisionMapper,\n  getBuyPrice,\n  getPriceMovement,\n  validCurrencies,\n};\n"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AAEA,MAAMC,eAAe,GAAIC,UAAoB,IAC3CA,UAAU,CAACC,KAAK,CAAEC,QAAQ,IAAKC,0BAAgB,CAACC,QAAQ,CAACF,QAAQ,CAAC,CAAC;AAACG,OAAA,CAAAN,eAAA,GAAAA,eAAA;AAEtE,MAAMO,cAAc,GAAIC,QAAkB,IAAMA,QAAQ,KAAK,KAAK,GAAG,EAAE,GAAG,GAAI;AAACF,OAAA,CAAAC,cAAA,GAAAA,cAAA;AAE/E,MAAME,uBAAuB,GAAGA,CAACR,UAAoB,EAAEO,QAAkB,KAAK;EAC5E,MAAME,KAAK,GAAGT,UAAU,CAACU,MAAM,CAAC,CAACC,GAAG,EAAEC,EAAE,EAAEC,KAAK,EAAEC,KAAK,KAAK;IACzD,MAAMC,MAAM,GAAGD,KAAK,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAKL,KAAK,KAAKK,GAAG,CAAC;IAE1D,OAAO,CACL,GAAGP,GAAG,EACN,GAAGI,MAAM,CAACI,GAAG,CAAEC,EAAE,IAAK,GAAGR,EAAE,GAAGN,cAAc,CAACC,QAAQ,CAAC,GAAGa,EAAE,EAAE,CAAC,CAC/D;EACH,CAAC,EAAE,EAAc,CAAC;EAElB,OAAOX,KAAK;AACd,CAAC;AAACJ,OAAA,CAAAG,uBAAA,GAAAA,uBAAA;AAEF,MAAMa,gBAAgB,GAAGC,IAAA,IAUnB;EAAA,IAVoB;IACxBC,QAAQ;IACRC,MAAM;IACNC,gBAAgB;IAChBC;EAMF,CAAC,GAAAJ,IAAA;EACC,MAAMK,eAAe,GAAGC,WAAW,CAACL,QAAQ,EAAEG,UAAU,CAAC,EAAEG,OAAO,CAChEJ,gBACF,CAAC;EACD,MAAMK,aAAa,GAAGF,WAAW,CAACJ,MAAM,EAAEE,UAAU,CAAC,EAAEG,OAAO,CAC5DJ,gBACF,CAAC;EAED,IAAIE,eAAe,KAAKG,aAAa,IAAIN,MAAM,KAAKO,SAAS,EAAE;IAC7D,OAAO,CAAC;EACV;EAEA,OAAOD,aAAa,GAAGH,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC;AACjD,CAAC;AAACtB,OAAA,CAAAgB,gBAAA,GAAAA,gBAAA;AAEF,MAAMO,WAAW,GAAGA,CAACI,KAAyB,EAAEN,UAAmB,KAAK;EACtE,IAAIM,KAAK,KAAKD,SAAS,EAAE,OAAO,CAAC;EAEjC,OAAOL,UAAU,GAAG,CAAC,GAAGM,KAAK,GAAGA,KAAK;AACvC,CAAC;AAAC3B,OAAA,CAAAuB,WAAA,GAAAA,WAAA","ignoreList":[]}

package/dist/main/gql/types/fragment-masking.js

@@ -13,11 +13,10 @@ function makeFragmentData(data, _fragment) {
   return data;
 }
 function isFragmentReady(queryNode, fragmentNode, data) {
-  var _meta__, _fragDef$name;
-  const deferredFields = (_meta__ = queryNode.__meta__) === null || _meta__ === void 0 ? void 0 : _meta__.deferredFields;
+  const deferredFields = queryNode.__meta__?.deferredFields;
   if (!deferredFields) return true;
   const fragDef = fragmentNode.definitions[0];
-  const fragName = fragDef === null || fragDef === void 0 || (_fragDef$name = fragDef.name) === null || _fragDef$name === void 0 ? void 0 : _fragDef$name.value;
+  const fragName = fragDef?.name?.value;
   const fields = fragName && deferredFields[fragName] || [];
   return fields.length > 0 && fields.every(field => data && field in data);
 }

package/dist/main/gql/types/fragment-masking.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","_meta__","_fragDef$name","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import {\n  ResultOf,\n  DocumentTypeDecoration,\n  TypedDocumentNode,\n} from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\nexport type FragmentType<\n  TDocumentType extends DocumentTypeDecoration<any, any>,\n> =\n  TDocumentType extends DocumentTypeDecoration<infer TType, any>\n    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n      ? TKey extends string\n        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n        : never\n      : never\n    : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | null\n    | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>,\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data:\n    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>\n    | null\n    | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (\n    queryNode as {\n      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };\n    }\n  ).__meta__?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as\n    | FragmentDefinitionNode\n    | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every((field) => data && field in data);\n}\n"],"mappings":";;;;;;;;AA6CO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAIa,EACoC;EACjD,OAAOA,YAAY;AACrB;AAEO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAGa,EAC8B;EAAA,IAAAK,OAAA,EAAAC,aAAA;EAC3C,MAAMC,cAAc,IAAAF,OAAA,GAClBF,SAAS,CAGTK,QAAQ,cAAAH,OAAA,uBAJaA,OAAA,CAIXE,cAAc;EAE1B,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAE7B;EACb,MAAMC,QAAQ,GAAGF,OAAO,aAAPA,OAAO,gBAAAH,aAAA,GAAPG,OAAO,CAAEG,IAAI,cAAAN,aAAA,uBAAbA,aAAA,CAAeO,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAAEC,KAAK,IAAKjB,IAAI,IAAIiB,KAAK,IAAIjB,IAAI,CAAC;AAC5E","ignoreList":[]}
+{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import {\n  ResultOf,\n  DocumentTypeDecoration,\n  TypedDocumentNode,\n} from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\nexport type FragmentType<\n  TDocumentType extends DocumentTypeDecoration<any, any>,\n> =\n  TDocumentType extends DocumentTypeDecoration<infer TType, any>\n    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n      ? TKey extends string\n        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n        : never\n      : never\n    : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | null\n    | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>,\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data:\n    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>\n    | null\n    | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (\n    queryNode as {\n      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };\n    }\n  ).__meta__?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as\n    | FragmentDefinitionNode\n    | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every((field) => data && field in data);\n}\n"],"mappings":";;;;;;;;AA6CO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAIa,EACoC;EACjD,OAAOA,YAAY;AACrB;AAEO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAGa,EAC8B;EAC3C,MAAMK,cAAc,GAClBF,SAAS,CAGTG,QAAQ,EAAED,cAAc;EAE1B,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGH,YAAY,CAACI,WAAW,CAAC,CAAC,CAE7B;EACb,MAAMC,QAAQ,GAAGF,OAAO,EAAEG,IAAI,EAAEC,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAAEC,KAAK,IAAKf,IAAI,IAAIe,KAAK,IAAIf,IAAI,CAAC;AAC5E","ignoreList":[]}

package/dist/main/gql/types/gql.js

@@ -11,7 +11,6 @@ const documents = {
   '\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n': types.ValidateInstrumentsDocument
 };
 function graphql(source) {
-  var _source;
-  return (_source = documents[source]) !== null && _source !== void 0 ? _source : {};
+  return documents[source] ?? {};
 }
 //# sourceMappingURL=gql.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gql.js","names":["types","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","documents","ValidateInstrumentsDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n  '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n':\n    types.ValidateInstrumentsDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(\n  source: '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'\n): (typeof documents)['\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> =\n  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmC,SAAAC,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,SAAAH,wBAAAG,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;AAanC,MAAMW,SAAS,GAAG;EAChB,iNAAiN,EAC/MvB,KAAK,CAACwB;AACV,CAAC;AAuBM,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQJ,SAAS,CAASG,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC","ignoreList":[]}
+{"version":3,"file":"gql.js","names":["types","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","documents","ValidateInstrumentsDocument","graphql","source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n  '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n':\n    types.ValidateInstrumentsDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(\n  source: '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'\n): (typeof documents)['\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> =\n  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmC,SAAAC,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,SAAAH,wBAAAG,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;AAanC,MAAMW,SAAS,GAAG;EAChB,iNAAiN,EAC/MvB,KAAK,CAACwB;AACV,CAAC;AAuBM,SAASC,OAAOA,CAACC,MAAc,EAAE;EACtC,OAAQH,SAAS,CAASG,MAAM,CAAC,IAAI,CAAC,CAAC;AACzC","ignoreList":[]}

package/dist/main/gql/validateInstruments.js

@@ -5,7 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validateInstruments = void 0;
 var _client = require("@apollo/client");
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const validateInstruments = exports.validateInstruments = (0, _client.gql)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n"])));
+const validateInstruments = exports.validateInstruments = (0, _client.gql)`
+  query validateInstruments($instruments: [String]!, $division: Division!) {
+    resolveInstrumentsByDivision(
+      instruments: $instruments
+      division: $division
+    ) {
+      name
+      displayName
+    }
+  }
+`;
 //# sourceMappingURL=validateInstruments.js.map

package/dist/main/gql/validateInstruments.js.map

@@ -1 +1 @@
-{"version":3,"file":"validateInstruments.js","names":["_client","require","_templateObject","_taggedTemplateLiteral","e","t","slice","Object","freeze","defineProperties","raw","value","validateInstruments","exports","gql"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,CAAA,EAAAC,CAAA,WAAAA,CAAA,KAAAA,CAAA,GAAAD,CAAA,CAAAE,KAAA,MAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,CAAA,IAAAM,GAAA,IAAAC,KAAA,EAAAJ,MAAA,CAAAC,MAAA,CAAAH,CAAA;AAE9B,MAAMO,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,OAAGE,WAAG,EAAAZ,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2OAUrC","ignoreList":[]}
+{"version":3,"file":"validateInstruments.js","names":["_client","require","validateInstruments","exports","gql"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAEO,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,WAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/Main.js

@@ -38,11 +38,11 @@ const Main = _ref => {
     hovered: currency === selectedCurrency,
     label: currency
   }), arr.map(pair => React.createElement(Fragment, {
-    key: "".concat(currency, "_").concat(pair)
+    key: `${currency}_${pair}`
   }, currency !== pair ? React.createElement(CellWithData, {
     currency: currency,
     division: division,
-    isValid: validInstruments.includes("".concat(currency).concat(divisionMapper(division)).concat(pair)),
+    isValid: validInstruments.includes(`${currency}${divisionMapper(division)}${pair}`),
     pair: pair,
     setSelectedCurrency: setSelectedCurrency,
     setSelectedPair: setSelectedPair,

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["useLiveRatesQuery","React","Fragment","useEffect","useState","CellWithData","TextCell","divisionMapper","Main","_ref","currencies","validInstruments","division","selectedCurrency","setSelectedCurrency","selectedPair","setSelectedPair","target","setQuery","instruments","createElement","className","sticky","map","pair","key","hovered","label","currency","index","arr","concat","isValid","includes","emptyIndicator"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport React, { Fragment, useEffect, useState } from 'react';\n\nimport { CellWithData, TextCell } from './components';\nimport type { MainProps } from './types';\nimport { divisionMapper } from './utils';\n\nconst Main = ({ currencies, validInstruments, division }: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    setQuery({ instruments: validInstruments });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, validInstruments);\n\n  return (\n    <div\n      className=\"lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary\"\n      data-testid=\"currency-cross-table-wrapper\"\n    >\n      <div className=\"lw-flex lw-w-max lw-min-w-full\">\n        <TextCell sticky />\n        {currencies.map((pair) => (\n          <TextCell key={pair} hovered={pair === selectedPair} label={pair} />\n        ))}\n      </div>\n      {currencies.map((currency, index, arr) => (\n        <div key={currency} className=\"lw-flex lw-w-max lw-min-w-full\">\n          <TextCell\n            sticky\n            hovered={currency === selectedCurrency}\n            label={currency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  currency={currency}\n                  division={division}\n                  isValid={validInstruments.includes(\n                    `${currency}${divisionMapper(division)}${pair}`\n                  )}\n                  pair={pair}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                  target={target}\n                />\n              ) : (\n                <TextCell emptyIndicator />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,2BAA2B;AAC7D,OAAOC,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,SAASC,YAAY,EAAEC,QAAQ,QAAQ,cAAc;AAErD,SAASC,cAAc,QAAQ,SAAS;AAExC,MAAMC,IAAI,GAAGC,IAAA,IAA2D;EAAA,IAA1D;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAoB,CAAC,GAAAH,IAAA;EACjE,MAAM,CAACI,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGV,QAAQ,CAAC,EAAE,CAAC;EAC5D,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGZ,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM;IAAEa,MAAM;IAAEC;EAAS,CAAC,GAAGlB,iBAAiB,CAAC,CAAC;EAEhDG,SAAS,CAAC,MAAM;IACde,QAAQ,CAAC;MAAEC,WAAW,EAAER;IAAiB,CAAC,CAAC;EAE7C,CAAC,EAAEA,gBAAgB,CAAC;EAEpB,OACEV,KAAA,CAAAmB,aAAA;IACEC,SAAS,EAAC,oHAAoH;IAC9H,eAAY;EAA8B,GAE1CpB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC7CpB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAACgB,MAAM;EAAA,CAAE,CAAC,EAClBZ,UAAU,CAACa,GAAG,CAAEC,IAAI,IACnBvB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAACmB,GAAG,EAAED,IAAK;IAACE,OAAO,EAAEF,IAAI,KAAKT,YAAa;IAACY,KAAK,EAAEH;EAAK,CAAE,CACpE,CACE,CAAC,EACLd,UAAU,CAACa,GAAG,CAAC,CAACK,QAAQ,EAAEC,KAAK,EAAEC,GAAG,KACnC7B,KAAA,CAAAmB,aAAA;IAAKK,GAAG,EAAEG,QAAS;IAACP,SAAS,EAAC;EAAgC,GAC5DpB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IACPgB,MAAM;IACNI,OAAO,EAAEE,QAAQ,KAAKf,gBAAiB;IACvCc,KAAK,EAAEC;EAAS,CACjB,CAAC,EACDE,GAAG,CAACP,GAAG,CAAEC,IAAI,IACZvB,KAAA,CAAAmB,aAAA,CAAClB,QAAQ;IAACuB,GAAG,KAAAM,MAAA,CAAKH,QAAQ,OAAAG,MAAA,CAAIP,IAAI;EAAG,GAClCI,QAAQ,KAAKJ,IAAI,GAChBvB,KAAA,CAAAmB,aAAA,CAACf,YAAY;IACXuB,QAAQ,EAAEA,QAAS;IACnBhB,QAAQ,EAAEA,QAAS;IACnBoB,OAAO,EAAErB,gBAAgB,CAACsB,QAAQ,IAAAF,MAAA,CAC7BH,QAAQ,EAAAG,MAAA,CAAGxB,cAAc,CAACK,QAAQ,CAAC,EAAAmB,MAAA,CAAGP,IAAI,CAC/C,CAAE;IACFA,IAAI,EAAEA,IAAK;IACXV,mBAAmB,EAAEA,mBAAoB;IACzCE,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA;EAAO,CAChB,CAAC,GAEFhB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAAC4B,cAAc;EAAA,CAAE,CAEpB,CACX,CACE,CACN,CACE,CAAC;AAEV,CAAC;AAED,SAAS1B,IAAI","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["useLiveRatesQuery","React","Fragment","useEffect","useState","CellWithData","TextCell","divisionMapper","Main","_ref","currencies","validInstruments","division","selectedCurrency","setSelectedCurrency","selectedPair","setSelectedPair","target","setQuery","instruments","createElement","className","sticky","map","pair","key","hovered","label","currency","index","arr","isValid","includes","emptyIndicator"],"sources":["../../../src/CurrencyCrossTableWidget/Main.tsx"],"sourcesContent":["import { useLiveRatesQuery } from '@oanda/labs-widget-common';\nimport React, { Fragment, useEffect, useState } from 'react';\n\nimport { CellWithData, TextCell } from './components';\nimport type { MainProps } from './types';\nimport { divisionMapper } from './utils';\n\nconst Main = ({ currencies, validInstruments, division }: MainProps) => {\n  const [selectedCurrency, setSelectedCurrency] = useState('');\n  const [selectedPair, setSelectedPair] = useState('');\n  const { target, setQuery } = useLiveRatesQuery();\n\n  useEffect(() => {\n    setQuery({ instruments: validInstruments });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, validInstruments);\n\n  return (\n    <div\n      className=\"lw-w-full lw-overflow-x-auto lw-overflow-y-hidden lw-border lw-border-b-0 lw-border-solid lw-border-border-primary\"\n      data-testid=\"currency-cross-table-wrapper\"\n    >\n      <div className=\"lw-flex lw-w-max lw-min-w-full\">\n        <TextCell sticky />\n        {currencies.map((pair) => (\n          <TextCell key={pair} hovered={pair === selectedPair} label={pair} />\n        ))}\n      </div>\n      {currencies.map((currency, index, arr) => (\n        <div key={currency} className=\"lw-flex lw-w-max lw-min-w-full\">\n          <TextCell\n            sticky\n            hovered={currency === selectedCurrency}\n            label={currency}\n          />\n          {arr.map((pair) => (\n            <Fragment key={`${currency}_${pair}`}>\n              {currency !== pair ? (\n                <CellWithData\n                  currency={currency}\n                  division={division}\n                  isValid={validInstruments.includes(\n                    `${currency}${divisionMapper(division)}${pair}`\n                  )}\n                  pair={pair}\n                  setSelectedCurrency={setSelectedCurrency}\n                  setSelectedPair={setSelectedPair}\n                  target={target}\n                />\n              ) : (\n                <TextCell emptyIndicator />\n              )}\n            </Fragment>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,2BAA2B;AAC7D,OAAOC,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,SAASC,YAAY,EAAEC,QAAQ,QAAQ,cAAc;AAErD,SAASC,cAAc,QAAQ,SAAS;AAExC,MAAMC,IAAI,GAAGC,IAAA,IAA2D;EAAA,IAA1D;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAoB,CAAC,GAAAH,IAAA;EACjE,MAAM,CAACI,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGV,QAAQ,CAAC,EAAE,CAAC;EAC5D,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGZ,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM;IAAEa,MAAM;IAAEC;EAAS,CAAC,GAAGlB,iBAAiB,CAAC,CAAC;EAEhDG,SAAS,CAAC,MAAM;IACde,QAAQ,CAAC;MAAEC,WAAW,EAAER;IAAiB,CAAC,CAAC;EAE7C,CAAC,EAAEA,gBAAgB,CAAC;EAEpB,OACEV,KAAA,CAAAmB,aAAA;IACEC,SAAS,EAAC,oHAAoH;IAC9H,eAAY;EAA8B,GAE1CpB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC7CpB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAACgB,MAAM;EAAA,CAAE,CAAC,EAClBZ,UAAU,CAACa,GAAG,CAAEC,IAAI,IACnBvB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAACmB,GAAG,EAAED,IAAK;IAACE,OAAO,EAAEF,IAAI,KAAKT,YAAa;IAACY,KAAK,EAAEH;EAAK,CAAE,CACpE,CACE,CAAC,EACLd,UAAU,CAACa,GAAG,CAAC,CAACK,QAAQ,EAAEC,KAAK,EAAEC,GAAG,KACnC7B,KAAA,CAAAmB,aAAA;IAAKK,GAAG,EAAEG,QAAS;IAACP,SAAS,EAAC;EAAgC,GAC5DpB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IACPgB,MAAM;IACNI,OAAO,EAAEE,QAAQ,KAAKf,gBAAiB;IACvCc,KAAK,EAAEC;EAAS,CACjB,CAAC,EACDE,GAAG,CAACP,GAAG,CAAEC,IAAI,IACZvB,KAAA,CAAAmB,aAAA,CAAClB,QAAQ;IAACuB,GAAG,EAAE,GAAGG,QAAQ,IAAIJ,IAAI;EAAG,GAClCI,QAAQ,KAAKJ,IAAI,GAChBvB,KAAA,CAAAmB,aAAA,CAACf,YAAY;IACXuB,QAAQ,EAAEA,QAAS;IACnBhB,QAAQ,EAAEA,QAAS;IACnBmB,OAAO,EAAEpB,gBAAgB,CAACqB,QAAQ,CAChC,GAAGJ,QAAQ,GAAGrB,cAAc,CAACK,QAAQ,CAAC,GAAGY,IAAI,EAC/C,CAAE;IACFA,IAAI,EAAEA,IAAK;IACXV,mBAAmB,EAAEA,mBAAoB;IACzCE,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA;EAAO,CAChB,CAAC,GAEFhB,KAAA,CAAAmB,aAAA,CAACd,QAAQ;IAAC2B,cAAc;EAAA,CAAE,CAEpB,CACX,CACE,CACN,CACE,CAAC;AAEV,CAAC;AAED,SAASzB,IAAI","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/ValidationWrapper.js

@@ -6,7 +6,6 @@ import { validateInstruments } from '../gql/validateInstruments';
 import { Main } from './Main';
 import { currenciesToInstruments, validCurrencies } from './utils';
 const ValidationWrapper = _ref => {
-  var _data$resolveInstrume;
   let {
     currencies,
     division,
@@ -24,7 +23,7 @@ const ValidationWrapper = _ref => {
     fetchPolicy: 'network-only',
     errorPolicy: 'all'
   });
-  const validInstruments = data === null || data === void 0 || (_data$resolveInstrume = data.resolveInstrumentsByDivision) === null || _data$resolveInstrume === void 0 ? void 0 : _data$resolveInstrume.map(instrument => instrument.name);
+  const validInstruments = data?.resolveInstrumentsByDivision?.map(instrument => instrument.name);
   const showError = !validCurrencies(currencies) || isParamError || error || !validInstruments || validInstruments.length === 0;
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: "lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary"

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationWrapper.js","names":["useSuspenseQuery","ChartError","classnames","React","validateInstruments","Main","currenciesToInstruments","validCurrencies","ValidationWrapper","_ref","_data$resolveInstrume","currencies","division","isParamError","instruments","data","error","variables","fetchPolicy","errorPolicy","validInstruments","resolveInstrumentsByDivision","map","instrument","name","showError","length","createElement","Fragment","className"],"sources":["../../../src/CurrencyCrossTableWidget/ValidationWrapper.tsx"],"sourcesContent":["import { useSuspenseQuery } from '@apollo/client';\nimport { ChartError } from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport type {\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables,\n} from '../gql/types/graphql';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { Main } from './Main';\nimport type { ValidationWrapperProps } from './types';\nimport { currenciesToInstruments, validCurrencies } from './utils';\n\nconst ValidationWrapper = ({\n  currencies,\n  division,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const instruments = currenciesToInstruments(currencies, division);\n\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 validInstruments = data?.resolveInstrumentsByDivision?.map(\n    (instrument) => instrument.name\n  );\n  const showError =\n    !validCurrencies(currencies) ||\n    isParamError ||\n    error ||\n    !validInstruments ||\n    validInstruments.length === 0;\n\n  return (\n    <>\n      <div className=\"lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {!showError && (\n          <Main\n            currencies={currencies}\n            division={division}\n            validInstruments={validInstruments}\n          />\n        )}\n        {showError && (\n          <div\n            className={classnames(\n              'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AAMzB,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,SAAS;AAElE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAAAC,qBAAA;EAAA,IAJH;IACzBC,UAAU;IACVC,QAAQ;IACRC;EACsB,CAAC,GAAAJ,IAAA;EACvB,MAAMK,WAAW,GAAGR,uBAAuB,CAACK,UAAU,EAAEC,QAAQ,CAAC;EAEjE,MAAM;IAAEG,IAAI;IAAEC;EAAM,CAAC,GAAGhB,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBa,SAAS,EAAE;MACTH,WAAW;MACXF;IACF,CAAC;IACDM,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGL,IAAI,aAAJA,IAAI,gBAAAL,qBAAA,GAAJK,IAAI,CAAEM,4BAA4B,cAAAX,qBAAA,uBAAlCA,qBAAA,CAAoCY,GAAG,CAC7DC,UAAU,IAAKA,UAAU,CAACC,IAC7B,CAAC;EACD,MAAMC,SAAS,GACb,CAAClB,eAAe,CAACI,UAAU,CAAC,IAC5BE,YAAY,IACZG,KAAK,IACL,CAACI,gBAAgB,IACjBA,gBAAgB,CAACM,MAAM,KAAK,CAAC;EAE/B,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA;IAAKE,SAAS,EAAC;EAAsE,GAClF,CAACJ,SAAS,IACTtB,KAAA,CAAAwB,aAAA,CAACtB,IAAI;IACHM,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBQ,gBAAgB,EAAEA;EAAiB,CACpC,CACF,EACAK,SAAS,IACRtB,KAAA,CAAAwB,aAAA;IACEE,SAAS,EAAE3B,UAAU,CACnB,mGACF;EAAE,GAEFC,KAAA,CAAAwB,aAAA,CAAC1B,UAAU,MAAE,CACV,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASO,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ValidationWrapper.js","names":["useSuspenseQuery","ChartError","classnames","React","validateInstruments","Main","currenciesToInstruments","validCurrencies","ValidationWrapper","_ref","currencies","division","isParamError","instruments","data","error","variables","fetchPolicy","errorPolicy","validInstruments","resolveInstrumentsByDivision","map","instrument","name","showError","length","createElement","Fragment","className"],"sources":["../../../src/CurrencyCrossTableWidget/ValidationWrapper.tsx"],"sourcesContent":["import { useSuspenseQuery } from '@apollo/client';\nimport { ChartError } from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport type {\n  ValidateInstrumentsQuery,\n  ValidateInstrumentsQueryVariables,\n} from '../gql/types/graphql';\nimport { validateInstruments } from '../gql/validateInstruments';\nimport { Main } from './Main';\nimport type { ValidationWrapperProps } from './types';\nimport { currenciesToInstruments, validCurrencies } from './utils';\n\nconst ValidationWrapper = ({\n  currencies,\n  division,\n  isParamError,\n}: ValidationWrapperProps) => {\n  const instruments = currenciesToInstruments(currencies, division);\n\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 validInstruments = data?.resolveInstrumentsByDivision?.map(\n    (instrument) => instrument.name\n  );\n  const showError =\n    !validCurrencies(currencies) ||\n    isParamError ||\n    error ||\n    !validInstruments ||\n    validInstruments.length === 0;\n\n  return (\n    <>\n      <div className=\"lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {!showError && (\n          <Main\n            currencies={currencies}\n            division={division}\n            validInstruments={validInstruments}\n          />\n        )}\n        {showError && (\n          <div\n            className={classnames(\n              'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'\n            )}\n          >\n            <ChartError />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { ValidationWrapper };\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AAMzB,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,SAAS;AAElE,MAAMC,iBAAiB,GAAGC,IAAA,IAII;EAAA,IAJH;IACzBC,UAAU;IACVC,QAAQ;IACRC;EACsB,CAAC,GAAAH,IAAA;EACvB,MAAMI,WAAW,GAAGP,uBAAuB,CAACI,UAAU,EAAEC,QAAQ,CAAC;EAEjE,MAAM;IAAEG,IAAI;IAAEC;EAAM,CAAC,GAAGf,gBAAgB,CAGtCI,mBAAmB,EAAE;IACrBY,SAAS,EAAE;MACTH,WAAW;MACXF;IACF,CAAC;IACDM,WAAW,EAAE,cAAc;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGL,IAAI,EAAEM,4BAA4B,EAAEC,GAAG,CAC7DC,UAAU,IAAKA,UAAU,CAACC,IAC7B,CAAC;EACD,MAAMC,SAAS,GACb,CAACjB,eAAe,CAACG,UAAU,CAAC,IAC5BE,YAAY,IACZG,KAAK,IACL,CAACI,gBAAgB,IACjBA,gBAAgB,CAACM,MAAM,KAAK,CAAC;EAE/B,OACEtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACExB,KAAA,CAAAuB,aAAA;IAAKE,SAAS,EAAC;EAAsE,GAClF,CAACJ,SAAS,IACTrB,KAAA,CAAAuB,aAAA,CAACrB,IAAI;IACHK,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBQ,gBAAgB,EAAEA;EAAiB,CACpC,CACF,EACAK,SAAS,IACRrB,KAAA,CAAAuB,aAAA;IACEE,SAAS,EAAE1B,UAAU,CACnB,mGACF;EAAE,GAEFC,KAAA,CAAAuB,aAAA,CAACzB,UAAU,MAAE,CACV,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASO,iBAAiB","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js

@@ -1,5 +1,5 @@
 import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';
 import { Cell } from './Cell';
 const CellWithData = _ref => {
@@ -12,21 +12,16 @@ const CellWithData = _ref => {
     setSelectedCurrency,
     setSelectedPair
   } = _ref;
-  const [hovered, setHovered] = useState(false);
-  const instrument = "".concat(currency).concat(divisionMapper(division)).concat(pair);
-  const instrumentForUpdates = isValid ? instrument : "".concat(pair).concat(divisionMapper(division)).concat(currency);
+  const instrument = `${currency}${divisionMapper(division)}${pair}`;
+  const instrumentForUpdates = isValid ? instrument : `${pair}${divisionMapper(division)}${currency}`;
   const {
     update,
     error: liveRatesError
   } = useLiveRatesMessage(instrumentForUpdates, target);
-  const updatedRecord = {
-    displayName: "".concat(currency, "/").concat(pair),
-    instrument,
-    buy: update === null || update === void 0 ? void 0 : update.ask,
-    buyPriceMovement: update === null || update === void 0 ? void 0 : update.askPriceMovement,
-    displayPrecision: currency === 'JPY' && !isValid ? 6 : update === null || update === void 0 ? void 0 : update.displayPrecision
-  };
-  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;
+  const [hovered, setHovered] = useState(false);
+  const prevBuyPrice = useRef();
+  const [priceMovement, setPriceMovement] = useState();
+  const checkLoading = () => !liveRatesError && update?.ask === undefined;
   const handleMouseEnter = () => {
     setHovered(true);
     setSelectedCurrency(currency);
@@ -37,6 +32,21 @@ const CellWithData = _ref => {
     setSelectedCurrency('');
     setSelectedPair('');
   };
+  useEffect(() => {
+    if (!update) return;
+    const {
+      ask,
+      displayPrecision
+    } = update;
+    const movement = getPriceMovement({
+      previous: prevBuyPrice.current,
+      update: ask,
+      displayPrecision: currency === 'JPY' && !isValid ? 6 : displayPrecision,
+      isReversed: !isValid
+    });
+    prevBuyPrice.current = ask;
+    setPriceMovement(movement);
+  }, [isValid, update, currency]);
   return React.createElement(Cell, {
     hovered: hovered,
     isError: !!liveRatesError,
@@ -45,8 +55,8 @@ const CellWithData = _ref => {
     mouseLeaveHandler: handleMouseLeave
   }, React.createElement(Price, {
     movementIndicator: "background",
-    priceMovement: getPriceMovement(updatedRecord.buyPriceMovement, !isValid)
-  }, React.createElement("span", null, getBuyPrice(updatedRecord.buy, !isValid).toFixed(updatedRecord.displayPrecision))));
+    priceMovement: priceMovement
+  }, React.createElement("span", null, getBuyPrice(update?.ask, !isValid).toFixed(currency === 'JPY' && !isValid ? 6 : update?.displayPrecision))));
 };
 export { CellWithData };
 //# sourceMappingURL=CellWithData.js.map

package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWithData.js","names":["Price","useLiveRatesMessage","React","useState","divisionMapper","getBuyPrice","getPriceMovement","Cell","CellWithData","_ref","currency","pair","isValid","target","division","setSelectedCurrency","setSelectedPair","hovered","setHovered","instrument","concat","instrumentForUpdates","update","error","liveRatesError","updatedRecord","displayName","buy","ask","buyPriceMovement","askPriceMovement","displayPrecision","checkLoading","undefined","handleMouseEnter","handleMouseLeave","createElement","isError","isLoading","mouseEnterHandler","mouseLeaveHandler","movementIndicator","priceMovement","toFixed"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';\nimport React, { useState } from 'react';\n\nimport { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';\nimport { Cell } from './Cell';\nimport type { CellWithDataProps } from './types';\n\nconst CellWithData = ({\n  currency,\n  pair,\n  isValid,\n  target,\n  division,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const [hovered, setHovered] = useState(false);\n\n  const instrument = `${currency}${divisionMapper(division)}${pair}`;\n  const instrumentForUpdates = isValid\n    ? instrument\n    : `${pair}${divisionMapper(division)}${currency}`;\n\n  const { update, error: liveRatesError } = useLiveRatesMessage(\n    instrumentForUpdates,\n    target\n  );\n\n  const updatedRecord = {\n    displayName: `${currency}/${pair}`,\n    instrument,\n    buy: update?.ask,\n    buyPriceMovement: update?.askPriceMovement,\n    displayPrecision:\n      currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,\n  };\n\n  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  return (\n    <Cell\n      hovered={hovered}\n      isError={!!liveRatesError}\n      isLoading={checkLoading()}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price\n        movementIndicator=\"background\"\n        priceMovement={getPriceMovement(\n          updatedRecord.buyPriceMovement,\n          !isValid\n        )}\n      >\n        <span>\n          {getBuyPrice(updatedRecord.buy, !isValid).toFixed(\n            updatedRecord.displayPrecision\n          )}\n        </span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,mBAAmB,QAAQ,2BAA2B;AACtE,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,cAAc,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,UAAU;AACxE,SAASC,IAAI,QAAQ,QAAQ;AAG7B,MAAMC,YAAY,GAAGC,IAAA,IAQI;EAAA,IARH;IACpBC,QAAQ;IACRC,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,QAAQ;IACRC,mBAAmB;IACnBC;EACiB,CAAC,GAAAP,IAAA;EAClB,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMgB,UAAU,MAAAC,MAAA,CAAMV,QAAQ,EAAAU,MAAA,CAAGhB,cAAc,CAACU,QAAQ,CAAC,EAAAM,MAAA,CAAGT,IAAI,CAAE;EAClE,MAAMU,oBAAoB,GAAGT,OAAO,GAChCO,UAAU,MAAAC,MAAA,CACPT,IAAI,EAAAS,MAAA,CAAGhB,cAAc,CAACU,QAAQ,CAAC,EAAAM,MAAA,CAAGV,QAAQ,CAAE;EAEnD,MAAM;IAAEY,MAAM;IAAEC,KAAK,EAAEC;EAAe,CAAC,GAAGvB,mBAAmB,CAC3DoB,oBAAoB,EACpBR,MACF,CAAC;EAED,MAAMY,aAAa,GAAG;IACpBC,WAAW,KAAAN,MAAA,CAAKV,QAAQ,OAAAU,MAAA,CAAIT,IAAI,CAAE;IAClCQ,UAAU;IACVQ,GAAG,EAAEL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEM,GAAG;IAChBC,gBAAgB,EAAEP,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEQ,gBAAgB;IAC1CC,gBAAgB,EACdrB,QAAQ,KAAK,KAAK,IAAI,CAACE,OAAO,GAAG,CAAC,GAAGU,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAES;EACjD,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM,CAACR,cAAc,IAAIC,aAAa,CAACE,GAAG,KAAKM,SAAS;EAE7E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC7BhB,UAAU,CAAC,IAAI,CAAC;IAChBH,mBAAmB,CAACL,QAAQ,CAAC;IAC7BM,eAAe,CAACL,IAAI,CAAC;EACvB,CAAC;EAED,MAAMwB,gBAAgB,GAAGA,CAAA,KAAM;IAC7BjB,UAAU,CAAC,KAAK,CAAC;IACjBH,mBAAmB,CAAC,EAAE,CAAC;IACvBC,eAAe,CAAC,EAAE,CAAC;EACrB,CAAC;EAED,OACEd,KAAA,CAAAkC,aAAA,CAAC7B,IAAI;IACHU,OAAO,EAAEA,OAAQ;IACjBoB,OAAO,EAAE,CAAC,CAACb,cAAe;IAC1Bc,SAAS,EAAEN,YAAY,CAAC,CAAE;IAC1BO,iBAAiB,EAAEL,gBAAiB;IACpCM,iBAAiB,EAAEL;EAAiB,GAEpCjC,KAAA,CAAAkC,aAAA,CAACpC,KAAK;IACJyC,iBAAiB,EAAC,YAAY;IAC9BC,aAAa,EAAEpC,gBAAgB,CAC7BmB,aAAa,CAACI,gBAAgB,EAC9B,CAACjB,OACH;EAAE,GAEFV,KAAA,CAAAkC,aAAA,eACG/B,WAAW,CAACoB,aAAa,CAACE,GAAG,EAAE,CAACf,OAAO,CAAC,CAAC+B,OAAO,CAC/ClB,aAAa,CAACM,gBAChB,CACI,CACD,CACH,CAAC;AAEX,CAAC;AAED,SAASvB,YAAY","ignoreList":[]}
+{"version":3,"file":"CellWithData.js","names":["Price","useLiveRatesMessage","React","useEffect","useRef","useState","divisionMapper","getBuyPrice","getPriceMovement","Cell","CellWithData","_ref","currency","pair","isValid","target","division","setSelectedCurrency","setSelectedPair","instrument","instrumentForUpdates","update","error","liveRatesError","hovered","setHovered","prevBuyPrice","priceMovement","setPriceMovement","checkLoading","ask","undefined","handleMouseEnter","handleMouseLeave","displayPrecision","movement","previous","current","isReversed","createElement","isError","isLoading","mouseEnterHandler","mouseLeaveHandler","movementIndicator","toFixed"],"sources":["../../../../src/CurrencyCrossTableWidget/components/CellWithData.tsx"],"sourcesContent":["import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';\nimport { Cell } from './Cell';\nimport type { CellWithDataProps } from './types';\n\nconst CellWithData = ({\n  currency,\n  pair,\n  isValid,\n  target,\n  division,\n  setSelectedCurrency,\n  setSelectedPair,\n}: CellWithDataProps) => {\n  const instrument = `${currency}${divisionMapper(division)}${pair}`;\n  const instrumentForUpdates = isValid\n    ? instrument\n    : `${pair}${divisionMapper(division)}${currency}`;\n\n  const { update, error: liveRatesError } = useLiveRatesMessage(\n    instrumentForUpdates,\n    target\n  );\n\n  const [hovered, setHovered] = useState(false);\n  const prevBuyPrice = useRef<number>();\n  const [priceMovement, setPriceMovement] = useState<number | undefined>();\n\n  const checkLoading = () => !liveRatesError && update?.ask === undefined;\n\n  const handleMouseEnter = () => {\n    setHovered(true);\n    setSelectedCurrency(currency);\n    setSelectedPair(pair);\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(false);\n    setSelectedCurrency('');\n    setSelectedPair('');\n  };\n\n  useEffect(() => {\n    if (!update) return;\n\n    const { ask, displayPrecision } = update;\n    const movement = getPriceMovement({\n      previous: prevBuyPrice.current,\n      update: ask,\n      displayPrecision: currency === 'JPY' && !isValid ? 6 : displayPrecision,\n      isReversed: !isValid,\n    });\n\n    prevBuyPrice.current = ask;\n    setPriceMovement(movement);\n  }, [isValid, update, currency]);\n\n  return (\n    <Cell\n      hovered={hovered}\n      isError={!!liveRatesError}\n      isLoading={checkLoading()}\n      mouseEnterHandler={handleMouseEnter}\n      mouseLeaveHandler={handleMouseLeave}\n    >\n      <Price movementIndicator=\"background\" priceMovement={priceMovement}>\n        <span>\n          {getBuyPrice(update?.ask, !isValid).toFixed(\n            currency === 'JPY' && !isValid ? 6 : update?.displayPrecision\n          )}\n        </span>\n      </Price>\n    </Cell>\n  );\n};\n\nexport { CellWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CurrencyCrossTableWidget/utils.js

@@ -4,13 +4,23 @@ const divisionMapper = division => division === 'OGM' ? '' : '_';
 const currenciesToInstruments = (currencies, division) => {
   const pairs = currencies.reduce((acc, cV, index, array) => {
     const unique = array.filter((_item, idx) => index !== idx);
-    return [...acc, ...unique.map(el => "".concat(cV).concat(divisionMapper(division)).concat(el))];
+    return [...acc, ...unique.map(el => `${cV}${divisionMapper(division)}${el}`)];
   }, []);
   return pairs;
 };
-const getPriceMovement = (priceMovement, isReversed) => {
-  if (priceMovement === undefined) return 0;
-  return isReversed ? priceMovement * -1 : priceMovement;
+const getPriceMovement = _ref => {
+  let {
+    previous,
+    update,
+    displayPrecision,
+    isReversed
+  } = _ref;
+  const roundedPrevious = getBuyPrice(previous, isReversed)?.toFixed(displayPrecision);
+  const roundedUpdate = getBuyPrice(update, isReversed)?.toFixed(displayPrecision);
+  if (roundedPrevious === roundedUpdate || update === undefined) {
+    return 0;
+  }
+  return roundedUpdate > roundedPrevious ? 1 : -1;
 };
 const getBuyPrice = (price, isReversed) => {
   if (price === undefined) return 0;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["MAJOR_CURRENCIES","validCurrencies","currencies","every","currency","includes","divisionMapper","division","currenciesToInstruments","pairs","reduce","acc","cV","index","array","unique","filter","_item","idx","map","el","concat","getPriceMovement","priceMovement","isReversed","undefined","getBuyPrice","price"],"sources":["../../../src/CurrencyCrossTableWidget/utils.ts"],"sourcesContent":["import type { Division } from '../gql/types/graphql';\nimport { MAJOR_CURRENCIES } from './constant';\n\nconst validCurrencies = (currencies: string[]) =>\n  currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));\n\nconst divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');\n\nconst currenciesToInstruments = (currencies: string[], division: Division) => {\n  const pairs = currencies.reduce((acc, cV, index, array) => {\n    const unique = array.filter((_item, idx) => index !== idx);\n\n    return [\n      ...acc,\n      ...unique.map((el) => `${cV}${divisionMapper(division)}${el}`),\n    ];\n  }, [] as string[]);\n\n  return pairs;\n};\n\nconst getPriceMovement = (\n  priceMovement: number | undefined,\n  isReversed: boolean\n) => {\n  if (priceMovement === undefined) return 0;\n\n  return isReversed ? priceMovement * -1 : priceMovement;\n};\n\nconst getBuyPrice = (price: number | undefined, isReversed: boolean) => {\n  if (price === undefined) return 0;\n\n  return isReversed ? 1 / price : price;\n};\n\nexport {\n  currenciesToInstruments,\n  divisionMapper,\n  getBuyPrice,\n  getPriceMovement,\n  validCurrencies,\n};\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,YAAY;AAE7C,MAAMC,eAAe,GAAIC,UAAoB,IAC3CA,UAAU,CAACC,KAAK,CAAEC,QAAQ,IAAKJ,gBAAgB,CAACK,QAAQ,CAACD,QAAQ,CAAC,CAAC;AAErE,MAAME,cAAc,GAAIC,QAAkB,IAAMA,QAAQ,KAAK,KAAK,GAAG,EAAE,GAAG,GAAI;AAE9E,MAAMC,uBAAuB,GAAGA,CAACN,UAAoB,EAAEK,QAAkB,KAAK;EAC5E,MAAME,KAAK,GAAGP,UAAU,CAACQ,MAAM,CAAC,CAACC,GAAG,EAAEC,EAAE,EAAEC,KAAK,EAAEC,KAAK,KAAK;IACzD,MAAMC,MAAM,GAAGD,KAAK,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAKL,KAAK,KAAKK,GAAG,CAAC;IAE1D,OAAO,CACL,GAAGP,GAAG,EACN,GAAGI,MAAM,CAACI,GAAG,CAAEC,EAAE,OAAAC,MAAA,CAAQT,EAAE,EAAAS,MAAA,CAAGf,cAAc,CAACC,QAAQ,CAAC,EAAAc,MAAA,CAAGD,EAAE,CAAE,CAAC,CAC/D;EACH,CAAC,EAAE,EAAc,CAAC;EAElB,OAAOX,KAAK;AACd,CAAC;AAED,MAAMa,gBAAgB,GAAGA,CACvBC,aAAiC,EACjCC,UAAmB,KAChB;EACH,IAAID,aAAa,KAAKE,SAAS,EAAE,OAAO,CAAC;EAEzC,OAAOD,UAAU,GAAGD,aAAa,GAAG,CAAC,CAAC,GAAGA,aAAa;AACxD,CAAC;AAED,MAAMG,WAAW,GAAGA,CAACC,KAAyB,EAAEH,UAAmB,KAAK;EACtE,IAAIG,KAAK,KAAKF,SAAS,EAAE,OAAO,CAAC;EAEjC,OAAOD,UAAU,GAAG,CAAC,GAAGG,KAAK,GAAGA,KAAK;AACvC,CAAC;AAED,SACEnB,uBAAuB,EACvBF,cAAc,EACdoB,WAAW,EACXJ,gBAAgB,EAChBrB,eAAe","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["MAJOR_CURRENCIES","validCurrencies","currencies","every","currency","includes","divisionMapper","division","currenciesToInstruments","pairs","reduce","acc","cV","index","array","unique","filter","_item","idx","map","el","getPriceMovement","_ref","previous","update","displayPrecision","isReversed","roundedPrevious","getBuyPrice","toFixed","roundedUpdate","undefined","price"],"sources":["../../../src/CurrencyCrossTableWidget/utils.ts"],"sourcesContent":["import type { Division } from '../gql/types/graphql';\nimport { MAJOR_CURRENCIES } from './constant';\n\nconst validCurrencies = (currencies: string[]) =>\n  currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));\n\nconst divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');\n\nconst currenciesToInstruments = (currencies: string[], division: Division) => {\n  const pairs = currencies.reduce((acc, cV, index, array) => {\n    const unique = array.filter((_item, idx) => index !== idx);\n\n    return [\n      ...acc,\n      ...unique.map((el) => `${cV}${divisionMapper(division)}${el}`),\n    ];\n  }, [] as string[]);\n\n  return pairs;\n};\n\nconst getPriceMovement = ({\n  previous,\n  update,\n  displayPrecision,\n  isReversed,\n}: {\n  previous?: number;\n  update?: number;\n  displayPrecision?: number;\n  isReversed: boolean;\n}) => {\n  const roundedPrevious = getBuyPrice(previous, isReversed)?.toFixed(\n    displayPrecision\n  );\n  const roundedUpdate = getBuyPrice(update, isReversed)?.toFixed(\n    displayPrecision\n  );\n\n  if (roundedPrevious === roundedUpdate || update === undefined) {\n    return 0;\n  }\n\n  return roundedUpdate > roundedPrevious ? 1 : -1;\n};\n\nconst getBuyPrice = (price: number | undefined, isReversed: boolean) => {\n  if (price === undefined) return 0;\n\n  return isReversed ? 1 / price : price;\n};\n\nexport {\n  currenciesToInstruments,\n  divisionMapper,\n  getBuyPrice,\n  getPriceMovement,\n  validCurrencies,\n};\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,YAAY;AAE7C,MAAMC,eAAe,GAAIC,UAAoB,IAC3CA,UAAU,CAACC,KAAK,CAAEC,QAAQ,IAAKJ,gBAAgB,CAACK,QAAQ,CAACD,QAAQ,CAAC,CAAC;AAErE,MAAME,cAAc,GAAIC,QAAkB,IAAMA,QAAQ,KAAK,KAAK,GAAG,EAAE,GAAG,GAAI;AAE9E,MAAMC,uBAAuB,GAAGA,CAACN,UAAoB,EAAEK,QAAkB,KAAK;EAC5E,MAAME,KAAK,GAAGP,UAAU,CAACQ,MAAM,CAAC,CAACC,GAAG,EAAEC,EAAE,EAAEC,KAAK,EAAEC,KAAK,KAAK;IACzD,MAAMC,MAAM,GAAGD,KAAK,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAKL,KAAK,KAAKK,GAAG,CAAC;IAE1D,OAAO,CACL,GAAGP,GAAG,EACN,GAAGI,MAAM,CAACI,GAAG,CAAEC,EAAE,IAAK,GAAGR,EAAE,GAAGN,cAAc,CAACC,QAAQ,CAAC,GAAGa,EAAE,EAAE,CAAC,CAC/D;EACH,CAAC,EAAE,EAAc,CAAC;EAElB,OAAOX,KAAK;AACd,CAAC;AAED,MAAMY,gBAAgB,GAAGC,IAAA,IAUnB;EAAA,IAVoB;IACxBC,QAAQ;IACRC,MAAM;IACNC,gBAAgB;IAChBC;EAMF,CAAC,GAAAJ,IAAA;EACC,MAAMK,eAAe,GAAGC,WAAW,CAACL,QAAQ,EAAEG,UAAU,CAAC,EAAEG,OAAO,CAChEJ,gBACF,CAAC;EACD,MAAMK,aAAa,GAAGF,WAAW,CAACJ,MAAM,EAAEE,UAAU,CAAC,EAAEG,OAAO,CAC5DJ,gBACF,CAAC;EAED,IAAIE,eAAe,KAAKG,aAAa,IAAIN,MAAM,KAAKO,SAAS,EAAE;IAC7D,OAAO,CAAC;EACV;EAEA,OAAOD,aAAa,GAAGH,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,MAAMC,WAAW,GAAGA,CAACI,KAAyB,EAAEN,UAAmB,KAAK;EACtE,IAAIM,KAAK,KAAKD,SAAS,EAAE,OAAO,CAAC;EAEjC,OAAOL,UAAU,GAAG,CAAC,GAAGM,KAAK,GAAGA,KAAK;AACvC,CAAC;AAED,SACExB,uBAAuB,EACvBF,cAAc,EACdsB,WAAW,EACXP,gBAAgB,EAChBpB,eAAe","ignoreList":[]}

package/dist/module/gql/types/fragment-masking.js

@@ -5,11 +5,10 @@ export function makeFragmentData(data, _fragment) {
   return data;
 }
 export function isFragmentReady(queryNode, fragmentNode, data) {
-  var _meta__, _fragDef$name;
-  const deferredFields = (_meta__ = queryNode.__meta__) === null || _meta__ === void 0 ? void 0 : _meta__.deferredFields;
+  const deferredFields = queryNode.__meta__?.deferredFields;
   if (!deferredFields) return true;
   const fragDef = fragmentNode.definitions[0];
-  const fragName = fragDef === null || fragDef === void 0 || (_fragDef$name = fragDef.name) === null || _fragDef$name === void 0 ? void 0 : _fragDef$name.value;
+  const fragName = fragDef?.name?.value;
   const fields = fragName && deferredFields[fragName] || [];
   return fields.length > 0 && fields.every(field => data && field in data);
 }

package/dist/module/gql/types/fragment-masking.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","_meta__","_fragDef$name","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import {\n  ResultOf,\n  DocumentTypeDecoration,\n  TypedDocumentNode,\n} from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\nexport type FragmentType<\n  TDocumentType extends DocumentTypeDecoration<any, any>,\n> =\n  TDocumentType extends DocumentTypeDecoration<infer TType, any>\n    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n      ? TKey extends string\n        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n        : never\n      : never\n    : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | null\n    | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>,\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data:\n    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>\n    | null\n    | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (\n    queryNode as {\n      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };\n    }\n  ).__meta__?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as\n    | FragmentDefinitionNode\n    | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every((field) => data && field in data);\n}\n"],"mappings":"AA6CA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAIa,EACoC;EACjD,OAAOA,YAAY;AACrB;AAEA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAGa,EAC8B;EAAA,IAAAK,OAAA,EAAAC,aAAA;EAC3C,MAAMC,cAAc,IAAAF,OAAA,GAClBF,SAAS,CAGTK,QAAQ,cAAAH,OAAA,uBAJaA,OAAA,CAIXE,cAAc;EAE1B,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAE7B;EACb,MAAMC,QAAQ,GAAGF,OAAO,aAAPA,OAAO,gBAAAH,aAAA,GAAPG,OAAO,CAAEG,IAAI,cAAAN,aAAA,uBAAbA,aAAA,CAAeO,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAAEC,KAAK,IAAKjB,IAAI,IAAIiB,KAAK,IAAIjB,IAAI,CAAC;AAC5E","ignoreList":[]}
+{"version":3,"file":"fragment-masking.js","names":["useFragment","_documentNode","fragmentType","makeFragmentData","data","_fragment","isFragmentReady","queryNode","fragmentNode","deferredFields","__meta__","fragDef","definitions","fragName","name","value","fields","length","every","field"],"sources":["../../../../src/gql/types/fragment-masking.ts"],"sourcesContent":["import {\n  ResultOf,\n  DocumentTypeDecoration,\n  TypedDocumentNode,\n} from '@graphql-typed-document-node/core';\nimport { FragmentDefinitionNode } from 'graphql';\nimport { Incremental } from './graphql';\n\nexport type FragmentType<\n  TDocumentType extends DocumentTypeDecoration<any, any>,\n> =\n  TDocumentType extends DocumentTypeDecoration<infer TType, any>\n    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]\n      ? TKey extends string\n        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }\n        : never\n      : never\n    : never;\n\n// return non-nullable if `fragmentType` is non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>\n): TType;\n// return nullable if `fragmentType` is nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | null\n    | undefined\n): TType | null | undefined;\n// return array of non-nullable if `fragmentType` is array of non-nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n): ReadonlyArray<TType>;\n// return array of nullable if `fragmentType` is array of nullable\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): ReadonlyArray<TType> | null | undefined;\nexport function useFragment<TType>(\n  _documentNode: DocumentTypeDecoration<TType, any>,\n  fragmentType:\n    | FragmentType<DocumentTypeDecoration<TType, any>>\n    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>\n    | null\n    | undefined\n): TType | ReadonlyArray<TType> | null | undefined {\n  return fragmentType as any;\n}\n\nexport function makeFragmentData<\n  F extends DocumentTypeDecoration<any, any>,\n  FT extends ResultOf<F>,\n>(data: FT, _fragment: F): FragmentType<F> {\n  return data as FragmentType<F>;\n}\nexport function isFragmentReady<TQuery, TFrag>(\n  queryNode: DocumentTypeDecoration<TQuery, any>,\n  fragmentNode: TypedDocumentNode<TFrag>,\n  data:\n    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>\n    | null\n    | undefined\n): data is FragmentType<typeof fragmentNode> {\n  const deferredFields = (\n    queryNode as {\n      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };\n    }\n  ).__meta__?.deferredFields;\n\n  if (!deferredFields) return true;\n\n  const fragDef = fragmentNode.definitions[0] as\n    | FragmentDefinitionNode\n    | undefined;\n  const fragName = fragDef?.name?.value;\n\n  const fields = (fragName && deferredFields[fragName]) || [];\n  return fields.length > 0 && fields.every((field) => data && field in data);\n}\n"],"mappings":"AA6CA,OAAO,SAASA,WAAWA,CACzBC,aAAiD,EACjDC,YAIa,EACoC;EACjD,OAAOA,YAAY;AACrB;AAEA,OAAO,SAASC,gBAAgBA,CAG9BC,IAAQ,EAAEC,SAAY,EAAmB;EACzC,OAAOD,IAAI;AACb;AACA,OAAO,SAASE,eAAeA,CAC7BC,SAA8C,EAC9CC,YAAsC,EACtCJ,IAGa,EAC8B;EAC3C,MAAMK,cAAc,GAClBF,SAAS,CAGTG,QAAQ,EAAED,cAAc;EAE1B,IAAI,CAACA,cAAc,EAAE,OAAO,IAAI;EAEhC,MAAME,OAAO,GAAGH,YAAY,CAACI,WAAW,CAAC,CAAC,CAE7B;EACb,MAAMC,QAAQ,GAAGF,OAAO,EAAEG,IAAI,EAAEC,KAAK;EAErC,MAAMC,MAAM,GAAIH,QAAQ,IAAIJ,cAAc,CAACI,QAAQ,CAAC,IAAK,EAAE;EAC3D,OAAOG,MAAM,CAACC,MAAM,GAAG,CAAC,IAAID,MAAM,CAACE,KAAK,CAAEC,KAAK,IAAKf,IAAI,IAAIe,KAAK,IAAIf,IAAI,CAAC;AAC5E","ignoreList":[]}

package/dist/module/gql/types/gql.js

@@ -3,7 +3,6 @@ const documents = {
   '\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n': types.ValidateInstrumentsDocument
 };
 export function graphql(source) {
-  var _source;
-  return (_source = documents[source]) !== null && _source !== void 0 ? _source : {};
+  return documents[source] ?? {};
 }
 //# sourceMappingURL=gql.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gql.js","names":["types","documents","ValidateInstrumentsDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n  '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n':\n    types.ValidateInstrumentsDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(\n  source: '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'\n): (typeof documents)['\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> =\n  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EAChB,iNAAiN,EAC/MD,KAAK,CAACE;AACV,CAAC;AAuBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQJ,SAAS,CAASG,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC","ignoreList":[]}
+{"version":3,"file":"gql.js","names":["types","documents","ValidateInstrumentsDocument","graphql","source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n  '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n':\n    types.ValidateInstrumentsDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(\n  source: '\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'\n): (typeof documents)['\\n  query validateInstruments($instruments: [String]!, $division: Division!) {\\n    resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\\n      name\\n      displayName\\n    }\\n  }\\n'];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> =\n  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,WAAW;AAalC,MAAMC,SAAS,GAAG;EAChB,iNAAiN,EAC/MD,KAAK,CAACE;AACV,CAAC;AAuBD,OAAO,SAASC,OAAOA,CAACC,MAAc,EAAE;EACtC,OAAQH,SAAS,CAASG,MAAM,CAAC,IAAI,CAAC,CAAC;AACzC","ignoreList":[]}

package/dist/module/gql/validateInstruments.js

@@ -1,5 +1,13 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 import { gql } from '@apollo/client';
-export const validateInstruments = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n"])));
+export const validateInstruments = gql`
+  query validateInstruments($instruments: [String]!, $division: Division!) {
+    resolveInstrumentsByDivision(
+      instruments: $instruments
+      division: $division
+    ) {
+      name
+      displayName
+    }
+  }
+`;
 //# sourceMappingURL=validateInstruments.js.map

package/dist/module/gql/validateInstruments.js.map

@@ -1 +1 @@
-{"version":3,"file":"validateInstruments.js","names":["gql","validateInstruments","_templateObject","_taggedTemplateLiteral"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2OAUrC","ignoreList":[]}
+{"version":3,"file":"validateInstruments.js","names":["gql","validateInstruments"],"sources":["../../../src/gql/validateInstruments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\n\nexport const validateInstruments = gql`\n  query validateInstruments($instruments: [String]!, $division: Division!) {\n    resolveInstrumentsByDivision(\n      instruments: $instruments\n      division: $division\n    ) {\n      name\n      displayName\n    }\n  }\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,mBAAmB,GAAGD,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -2,6 +2,11 @@ import type { Division } from '../gql/types/graphql';
 declare const validCurrencies: (currencies: string[]) => boolean;
 declare const divisionMapper: (division: Division) => "" | "_";
 declare const currenciesToInstruments: (currencies: string[], division: Division) => string[];
-declare const getPriceMovement: (priceMovement: number | undefined, isReversed: boolean) => number;
+declare const getPriceMovement: ({ previous, update, displayPrecision, isReversed, }: {
+    previous?: number;
+    update?: number;
+    displayPrecision?: number;
+    isReversed: boolean;
+}) => 0 | 1 | -1;
 declare const getBuyPrice: (price: number | undefined, isReversed: boolean) => number;
 export { currenciesToInstruments, divisionMapper, getBuyPrice, getPriceMovement, validCurrencies, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-cross-table",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Labs Currency Cross Table",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.175",
+    "@oanda/labs-widget-common": "^1.0.176",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "ffe302e74b4bdf5fb28f1f7be09cfd2cb7672eb3"
+  "gitHead": "1f4de950884abacb03c4a930e3d2984f433ff6ec"
 }

package/src/CurrencyCrossTableWidget/components/CellWithData.tsx

@@ -1,5 +1,5 @@
 import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';
 import { Cell } from './Cell';
@@ -14,8 +14,6 @@ const CellWithData = ({
   setSelectedCurrency,
   setSelectedPair,
 }: CellWithDataProps) => {
-  const [hovered, setHovered] = useState(false);
-
   const instrument = `${currency}${divisionMapper(division)}${pair}`;
   const instrumentForUpdates = isValid
     ? instrument
@@ -26,16 +24,11 @@ const CellWithData = ({
     target
   );
 
-  const updatedRecord = {
-    displayName: `${currency}/${pair}`,
-    instrument,
-    buy: update?.ask,
-    buyPriceMovement: update?.askPriceMovement,
-    displayPrecision:
-      currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,
-  };
+  const [hovered, setHovered] = useState(false);
+  const prevBuyPrice = useRef<number>();
+  const [priceMovement, setPriceMovement] = useState<number | undefined>();
 
-  const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;
+  const checkLoading = () => !liveRatesError && update?.ask === undefined;
 
   const handleMouseEnter = () => {
     setHovered(true);
@@ -49,6 +42,21 @@ const CellWithData = ({
     setSelectedPair('');
   };
 
+  useEffect(() => {
+    if (!update) return;
+
+    const { ask, displayPrecision } = update;
+    const movement = getPriceMovement({
+      previous: prevBuyPrice.current,
+      update: ask,
+      displayPrecision: currency === 'JPY' && !isValid ? 6 : displayPrecision,
+      isReversed: !isValid,
+    });
+
+    prevBuyPrice.current = ask;
+    setPriceMovement(movement);
+  }, [isValid, update, currency]);
+
   return (
     <Cell
       hovered={hovered}
@@ -57,16 +65,10 @@ const CellWithData = ({
       mouseEnterHandler={handleMouseEnter}
       mouseLeaveHandler={handleMouseLeave}
     >
-      <Price
-        movementIndicator="background"
-        priceMovement={getPriceMovement(
-          updatedRecord.buyPriceMovement,
-          !isValid
-        )}
-      >
+      <Price movementIndicator="background" priceMovement={priceMovement}>
         <span>
-          {getBuyPrice(updatedRecord.buy, !isValid).toFixed(
-            updatedRecord.displayPrecision
+          {getBuyPrice(update?.ask, !isValid).toFixed(
+            currency === 'JPY' && !isValid ? 6 : update?.displayPrecision
           )}
         </span>
       </Price>

package/src/CurrencyCrossTableWidget/utils.ts

@@ -19,13 +19,29 @@ const currenciesToInstruments = (currencies: string[], division: Division) => {
   return pairs;
 };
 
-const getPriceMovement = (
-  priceMovement: number | undefined,
-  isReversed: boolean
-) => {
-  if (priceMovement === undefined) return 0;
-
-  return isReversed ? priceMovement * -1 : priceMovement;
+const getPriceMovement = ({
+  previous,
+  update,
+  displayPrecision,
+  isReversed,
+}: {
+  previous?: number;
+  update?: number;
+  displayPrecision?: number;
+  isReversed: boolean;
+}) => {
+  const roundedPrevious = getBuyPrice(previous, isReversed)?.toFixed(
+    displayPrecision
+  );
+  const roundedUpdate = getBuyPrice(update, isReversed)?.toFixed(
+    displayPrecision
+  );
+
+  if (roundedPrevious === roundedUpdate || update === undefined) {
+    return 0;
+  }
+
+  return roundedUpdate > roundedPrevious ? 1 : -1;
 };
 
 const getBuyPrice = (price: number | undefined, isReversed: boolean) => {

package/test/utils.test.ts

@@ -1,5 +1,6 @@
 import {
   currenciesToInstruments,
+  getPriceMovement,
   validCurrencies,
 } from '../src/CurrencyCrossTableWidget/utils';
 import { Division } from '../src/gql/types/graphql';
@@ -145,3 +146,24 @@ describe('currenciesToInstruments', () => {
     ]);
   });
 });
+
+describe('getPriceMovement()', () => {
+  it.each([
+    [-1, 0.63386, 0.63385, 5, false],
+    [1, 163.219, 163.22, 3, false],
+    [1, 163.204, 163.173, 6, true],
+    [0, 163.219, 163.219, 3, false],
+    [0, 163.219, 163.22, 6, true],
+  ])(
+    'should return %s when previous = %s, update = %s, displayPrecision = %s, isReversed = %s',
+    (expected, previous, update, displayPrecision, isReversed) => {
+      const result = getPriceMovement({
+        previous,
+        update,
+        displayPrecision,
+        isReversed,
+      });
+      expect(result).toBe(expected);
+    }
+  );
+});