@oanda/labs-currency-cross-table 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/CHANGELOG.md +204 -0
  2. package/dist/main/CurrencyCrossTableWidget/CurrencyCrossTableWidget.js +26 -27
  3. package/dist/main/CurrencyCrossTableWidget/CurrencyCrossTableWidget.js.map +1 -1
  4. package/dist/main/CurrencyCrossTableWidget/Main.js +10 -10
  5. package/dist/main/CurrencyCrossTableWidget/Main.js.map +1 -1
  6. package/dist/main/CurrencyCrossTableWidget/ValidationWrapper.js +6 -6
  7. package/dist/main/CurrencyCrossTableWidget/ValidationWrapper.js.map +1 -1
  8. package/dist/main/CurrencyCrossTableWidget/components/Cell.js +1 -1
  9. package/dist/main/CurrencyCrossTableWidget/components/Cell.js.map +1 -1
  10. package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js +7 -7
  11. package/dist/main/CurrencyCrossTableWidget/components/CellWithData.js.map +1 -1
  12. package/dist/main/CurrencyCrossTableWidget/components/TextCell.js +1 -1
  13. package/dist/main/CurrencyCrossTableWidget/components/TextCell.js.map +1 -1
  14. package/dist/main/CurrencyCrossTableWidget/components/types.js.map +1 -1
  15. package/dist/main/CurrencyCrossTableWidget/constant.js.map +1 -1
  16. package/dist/main/CurrencyCrossTableWidget/index.js +8 -8
  17. package/dist/main/CurrencyCrossTableWidget/index.js.map +1 -1
  18. package/dist/main/CurrencyCrossTableWidget/render.js +6 -6
  19. package/dist/main/CurrencyCrossTableWidget/render.js.map +1 -1
  20. package/dist/main/CurrencyCrossTableWidget/types.js.map +1 -1
  21. package/dist/main/CurrencyCrossTableWidget/utils.js.map +1 -1
  22. package/dist/main/gql/types/fragment-masking.js.map +1 -1
  23. package/dist/main/gql/types/gql.js +1 -1
  24. package/dist/main/gql/types/gql.js.map +1 -1
  25. package/dist/main/gql/types/graphql.js +73 -73
  26. package/dist/main/gql/types/graphql.js.map +1 -1
  27. package/dist/main/gql/types/index.js.map +1 -1
  28. package/dist/main/gql/validateInstruments.js +4 -1
  29. package/dist/main/gql/validateInstruments.js.map +1 -1
  30. package/dist/main/translations/index.js +1 -1
  31. package/dist/main/translations/index.js.map +1 -1
  32. package/dist/main/translations/translations.js.map +1 -1
  33. package/dist/module/CurrencyCrossTableWidget/CurrencyCrossTableWidget.js +27 -27
  34. package/dist/module/CurrencyCrossTableWidget/CurrencyCrossTableWidget.js.map +1 -1
  35. package/dist/module/CurrencyCrossTableWidget/Main.js +10 -10
  36. package/dist/module/CurrencyCrossTableWidget/Main.js.map +1 -1
  37. package/dist/module/CurrencyCrossTableWidget/ValidationWrapper.js +6 -6
  38. package/dist/module/CurrencyCrossTableWidget/ValidationWrapper.js.map +1 -1
  39. package/dist/module/CurrencyCrossTableWidget/components/Cell.js +1 -1
  40. package/dist/module/CurrencyCrossTableWidget/components/Cell.js.map +1 -1
  41. package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js +7 -7
  42. package/dist/module/CurrencyCrossTableWidget/components/CellWithData.js.map +1 -1
  43. package/dist/module/CurrencyCrossTableWidget/components/TextCell.js +1 -1
  44. package/dist/module/CurrencyCrossTableWidget/components/TextCell.js.map +1 -1
  45. package/dist/module/CurrencyCrossTableWidget/components/types.js.map +1 -1
  46. package/dist/module/CurrencyCrossTableWidget/constant.js +1 -1
  47. package/dist/module/CurrencyCrossTableWidget/constant.js.map +1 -1
  48. package/dist/module/CurrencyCrossTableWidget/index.js +1 -1
  49. package/dist/module/CurrencyCrossTableWidget/index.js.map +1 -1
  50. package/dist/module/CurrencyCrossTableWidget/render.js +6 -6
  51. package/dist/module/CurrencyCrossTableWidget/render.js.map +1 -1
  52. package/dist/module/CurrencyCrossTableWidget/types.js.map +1 -1
  53. package/dist/module/CurrencyCrossTableWidget/utils.js +1 -1
  54. package/dist/module/CurrencyCrossTableWidget/utils.js.map +1 -1
  55. package/dist/module/gql/types/fragment-masking.js.map +1 -1
  56. package/dist/module/gql/types/gql.js +1 -1
  57. package/dist/module/gql/types/gql.js.map +1 -1
  58. package/dist/module/gql/types/graphql.js +73 -73
  59. package/dist/module/gql/types/graphql.js.map +1 -1
  60. package/dist/module/gql/types/index.js +2 -2
  61. package/dist/module/gql/types/index.js.map +1 -1
  62. package/dist/module/gql/validateInstruments.js +4 -1
  63. package/dist/module/gql/validateInstruments.js.map +1 -1
  64. package/dist/module/translations/index.js +1 -1
  65. package/dist/module/translations/index.js.map +1 -1
  66. package/dist/module/translations/translations.js.map +1 -1
  67. package/dist/types/CurrencyCrossTableWidget/CurrencyCrossTableWidget.d.ts +1 -1
  68. package/dist/types/CurrencyCrossTableWidget/Main.d.ts +2 -2
  69. package/dist/types/CurrencyCrossTableWidget/ValidationWrapper.d.ts +1 -1
  70. package/dist/types/CurrencyCrossTableWidget/components/Cell.d.ts +1 -1
  71. package/dist/types/CurrencyCrossTableWidget/components/CellWithData.d.ts +1 -1
  72. package/dist/types/CurrencyCrossTableWidget/components/TextCell.d.ts +1 -1
  73. package/dist/types/CurrencyCrossTableWidget/components/types.d.ts +2 -2
  74. package/dist/types/CurrencyCrossTableWidget/constant.d.ts +1 -1
  75. package/dist/types/CurrencyCrossTableWidget/index.d.ts +1 -1
  76. package/dist/types/CurrencyCrossTableWidget/types.d.ts +2 -2
  77. package/dist/types/CurrencyCrossTableWidget/utils.d.ts +3 -3
  78. package/dist/types/gql/types/gql.d.ts +2 -2
  79. package/dist/types/gql/types/index.d.ts +2 -2
  80. package/dist/types/translations/index.d.ts +2 -2
  81. package/package.json +3 -3
  82. package/src/CurrencyCrossTableWidget/CurrencyCrossTableWidget.tsx +28 -31
  83. package/src/CurrencyCrossTableWidget/Main.tsx +21 -28
  84. package/src/CurrencyCrossTableWidget/ValidationWrapper.tsx +28 -21
  85. package/src/CurrencyCrossTableWidget/components/Cell.tsx +11 -8
  86. package/src/CurrencyCrossTableWidget/components/CellWithData.tsx +24 -15
  87. package/src/CurrencyCrossTableWidget/components/TextCell.tsx +14 -9
  88. package/src/CurrencyCrossTableWidget/components/types.ts +3 -2
  89. package/src/CurrencyCrossTableWidget/constant.ts +13 -4
  90. package/src/CurrencyCrossTableWidget/index.ts +1 -1
  91. package/src/CurrencyCrossTableWidget/render.tsx +44 -30
  92. package/src/CurrencyCrossTableWidget/types.tsx +3 -2
  93. package/src/CurrencyCrossTableWidget/utils.ts +10 -7
  94. package/src/gql/types/fragment-masking.ts +41 -21
  95. package/src/gql/types/gql.ts +7 -3
  96. package/src/gql/types/graphql.ts +129 -47
  97. package/src/gql/types/index.ts +2 -2
  98. package/src/gql/validateInstruments.ts +4 -1
  99. package/src/translations/index.ts +4 -4
  100. package/src/translations/translations.ts +2 -1
  101. package/test/Main.test.tsx +25 -11
  102. package/test/mocks.ts +23 -14
  103. package/test/utils.test.ts +119 -19
@@ -1,16 +1,11 @@
1
- import React, {
2
- Fragment, useEffect, useState,
3
- } from 'react';
4
1
  import { useLiveRatesQuery } from '@oanda/labs-widget-common';
5
- import { MainProps } from './types';
2
+ import React, { Fragment, useEffect, useState } from 'react';
3
+
6
4
  import { CellWithData, TextCell } from './components';
5
+ import type { MainProps } from './types';
7
6
  import { divisionMapper } from './utils';
8
7
 
9
- const Main = ({
10
- currencies,
11
- validInstruments,
12
- division,
13
- }: MainProps) => {
8
+ const Main = ({ currencies, validInstruments, division }: MainProps) => {
14
9
  const [selectedCurrency, setSelectedCurrency] = useState('');
15
10
  const [selectedPair, setSelectedPair] = useState('');
16
11
  const { target, setQuery } = useLiveRatesQuery();
@@ -21,38 +16,36 @@ const Main = ({
21
16
  }, validInstruments);
22
17
 
23
18
  return (
24
- <div data-testid="currency-cross-table-wrapper" 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">
19
+ <div
20
+ 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"
21
+ data-testid="currency-cross-table-wrapper"
22
+ >
25
23
  <div className="lw-flex lw-w-max lw-min-w-full">
26
24
  <TextCell sticky />
27
- {currencies.map(((pair) => (
28
- <TextCell
29
- key={pair}
30
- label={pair}
31
- hovered={pair === selectedPair}
32
- />
33
- )))}
25
+ {currencies.map((pair) => (
26
+ <TextCell key={pair} hovered={pair === selectedPair} label={pair} />
27
+ ))}
34
28
  </div>
35
- {currencies.map(((currency, index, arr) => (
36
- <div
37
- key={currency}
38
- className="lw-flex lw-w-max lw-min-w-full"
39
- >
29
+ {currencies.map((currency, index, arr) => (
30
+ <div key={currency} className="lw-flex lw-w-max lw-min-w-full">
40
31
  <TextCell
41
- label={currency}
42
- hovered={currency === selectedCurrency}
43
32
  sticky
33
+ hovered={currency === selectedCurrency}
34
+ label={currency}
44
35
  />
45
36
  {arr.map((pair) => (
46
37
  <Fragment key={`${currency}_${pair}`}>
47
38
  {currency !== pair ? (
48
39
  <CellWithData
49
40
  currency={currency}
41
+ division={division}
42
+ isValid={validInstruments.includes(
43
+ `${currency}${divisionMapper(division)}${pair}`
44
+ )}
50
45
  pair={pair}
51
- isValid={validInstruments.includes(`${currency}${divisionMapper(division)}${pair}`)}
52
- target={target}
53
46
  setSelectedCurrency={setSelectedCurrency}
54
47
  setSelectedPair={setSelectedPair}
55
- division={division}
48
+ target={target}
56
49
  />
57
50
  ) : (
58
51
  <TextCell emptyIndicator />
@@ -60,7 +53,7 @@ const Main = ({
60
53
  </Fragment>
61
54
  ))}
62
55
  </div>
63
- )))}
56
+ ))}
64
57
  </div>
65
58
  );
66
59
  };
@@ -1,12 +1,16 @@
1
- import React from 'react';
2
- import classnames from 'classnames';
3
- import { ChartError } from '@oanda/labs-widget-common';
4
1
  import { useSuspenseQuery } from '@apollo/client';
5
- import { ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables } from '../gql/types/graphql';
2
+ import { ChartError } from '@oanda/labs-widget-common';
3
+ import classnames from 'classnames';
4
+ import React from 'react';
5
+
6
+ import type {
7
+ ValidateInstrumentsQuery,
8
+ ValidateInstrumentsQueryVariables,
9
+ } from '../gql/types/graphql';
6
10
  import { validateInstruments } from '../gql/validateInstruments';
7
- import { currenciesToInstruments, validCurrencies } from './utils';
8
- import { ValidationWrapperProps } from './types';
9
11
  import { Main } from './Main';
12
+ import type { ValidationWrapperProps } from './types';
13
+ import { currenciesToInstruments, validCurrencies } from './utils';
10
14
 
11
15
  const ValidationWrapper = ({
12
16
  currencies,
@@ -16,8 +20,8 @@ const ValidationWrapper = ({
16
20
  const instruments = currenciesToInstruments(currencies, division);
17
21
 
18
22
  const { data, error } = useSuspenseQuery<
19
- ValidateInstrumentsQuery,
20
- ValidateInstrumentsQueryVariables
23
+ ValidateInstrumentsQuery,
24
+ ValidateInstrumentsQueryVariables
21
25
  >(validateInstruments, {
22
26
  variables: {
23
27
  instruments,
@@ -27,29 +31,32 @@ const ValidationWrapper = ({
27
31
  errorPolicy: 'all',
28
32
  });
29
33
 
30
- const validInstruments = data
31
- ?.resolveInstrumentsByDivision
32
- ?.map((instrument) => instrument.name);
33
- const showError = !validCurrencies(currencies)
34
- || isParamError
35
- || error
36
- || !validInstruments
37
- || validInstruments.length === 0;
34
+ const validInstruments = data?.resolveInstrumentsByDivision?.map(
35
+ (instrument) => instrument.name
36
+ );
37
+ const showError =
38
+ !validCurrencies(currencies) ||
39
+ isParamError ||
40
+ error ||
41
+ !validInstruments ||
42
+ validInstruments.length === 0;
38
43
 
39
44
  return (
40
45
  <>
41
- <div
42
- className="lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary"
43
- >
46
+ <div className="lw-flex lw-w-full lw-text-sm lw-tracking-normal lw-text-text-primary">
44
47
  {!showError && (
45
48
  <Main
46
- validInstruments={validInstruments}
47
49
  currencies={currencies}
48
50
  division={division}
51
+ validInstruments={validInstruments}
49
52
  />
50
53
  )}
51
54
  {showError && (
52
- <div className={classnames('lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary')}>
55
+ <div
56
+ className={classnames(
57
+ 'lw-flex lw-h-[250px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary'
58
+ )}
59
+ >
53
60
  <ChartError />
54
61
  </div>
55
62
  )}
@@ -1,7 +1,8 @@
1
- import React from 'react';
2
1
  import classnames from 'classnames';
3
- import { CellProps } from './types';
2
+ import React from 'react';
3
+
4
4
  import { CELL_EMPTY_VALUE, CELL_LOADING_VALUE } from '../constant';
5
+ import type { CellProps } from './types';
5
6
 
6
7
  const Cell = ({
7
8
  children,
@@ -12,17 +13,19 @@ const Cell = ({
12
13
  mouseLeaveHandler,
13
14
  }: CellProps) => (
14
15
  <div
15
- className={classnames('lw-flex lw-h-11 lw-min-w-[70px] lw-flex-1 lw-items-center lw-justify-center lw-border-b lw-border-r lw-border-solid lw-border-border-primary last:lw-border-r-[0px]', {
16
- 'lw-bg-border-primary lw-font-semibold lw-shadow-innerBorderBgColor': hovered,
17
- })}
16
+ className={classnames(
17
+ 'lw-flex lw-h-11 lw-min-w-[70px] lw-flex-1 lw-items-center lw-justify-center lw-border-b lw-border-r lw-border-solid lw-border-border-primary last:lw-border-r-[0px]',
18
+ {
19
+ 'lw-bg-border-primary lw-font-semibold lw-shadow-innerBorderBgColor':
20
+ hovered,
21
+ }
22
+ )}
18
23
  onMouseEnter={mouseEnterHandler}
19
24
  onMouseLeave={mouseLeaveHandler}
20
25
  >
21
26
  {isLoading && <div className="lw-px-3 lw-py-3.5">{CELL_LOADING_VALUE}</div>}
22
27
  {!isLoading && !isError && children}
23
- {!isLoading && isError && (
24
- <span>{CELL_EMPTY_VALUE}</span>
25
- )}
28
+ {!isLoading && isError && <span>{CELL_EMPTY_VALUE}</span>}
26
29
  </div>
27
30
  );
28
31
 
@@ -1,8 +1,9 @@
1
- import React, { useState } from 'react';
2
1
  import { Price, useLiveRatesMessage } from '@oanda/labs-widget-common';
3
- import { Cell } from './Cell';
4
- import { CellWithDataProps } from './types';
2
+ import React, { useState } from 'react';
3
+
5
4
  import { divisionMapper, getBuyPrice, getPriceMovement } from '../utils';
5
+ import { Cell } from './Cell';
6
+ import type { CellWithDataProps } from './types';
6
7
 
7
8
  const CellWithData = ({
8
9
  currency,
@@ -16,22 +17,25 @@ const CellWithData = ({
16
17
  const [hovered, setHovered] = useState(false);
17
18
 
18
19
  const instrument = `${currency}${divisionMapper(division)}${pair}`;
19
- const instrumentForUpdates = isValid ? instrument : `${pair}${divisionMapper(division)}${currency}`;
20
+ const instrumentForUpdates = isValid
21
+ ? instrument
22
+ : `${pair}${divisionMapper(division)}${currency}`;
20
23
 
21
24
  const { update, error: liveRatesError } = useLiveRatesMessage(
22
25
  instrumentForUpdates,
23
- target,
26
+ target
24
27
  );
25
28
 
26
- const updatedRecord: Record<string, any> = {
29
+ const updatedRecord = {
27
30
  displayName: `${currency}/${pair}`,
28
31
  instrument,
29
32
  buy: update?.ask,
30
33
  buyPriceMovement: update?.askPriceMovement,
31
- displayPrecision: currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,
34
+ displayPrecision:
35
+ currency === 'JPY' && !isValid ? 6 : update?.displayPrecision,
32
36
  };
33
37
 
34
- const checkLoading = (id: string) => (!liveRatesError && updatedRecord?.[id] === undefined);
38
+ const checkLoading = () => !liveRatesError && updatedRecord.buy === undefined;
35
39
 
36
40
  const handleMouseEnter = () => {
37
41
  setHovered(true);
@@ -47,18 +51,23 @@ const CellWithData = ({
47
51
 
48
52
  return (
49
53
  <Cell
50
- isLoading={checkLoading('buy')}
51
- isError={!!liveRatesError}
52
54
  hovered={hovered}
55
+ isError={!!liveRatesError}
56
+ isLoading={checkLoading()}
53
57
  mouseEnterHandler={handleMouseEnter}
54
58
  mouseLeaveHandler={handleMouseLeave}
55
59
  >
56
- <Price priceMovement={getPriceMovement(updatedRecord.buyPriceMovement, !isValid)} movementIndicator="background">
60
+ <Price
61
+ movementIndicator="background"
62
+ priceMovement={getPriceMovement(
63
+ updatedRecord.buyPriceMovement,
64
+ !isValid
65
+ )}
66
+ >
57
67
  <span>
58
- {getBuyPrice(
59
- updatedRecord.buy,
60
- !isValid,
61
- ).toFixed(updatedRecord.displayPrecision)}
68
+ {getBuyPrice(updatedRecord.buy, !isValid).toFixed(
69
+ updatedRecord.displayPrecision
70
+ )}
62
71
  </span>
63
72
  </Price>
64
73
  </Cell>
@@ -1,6 +1,7 @@
1
- import React from 'react';
2
1
  import classnames from 'classnames';
3
- import { TextCellProps } from './types';
2
+ import React from 'react';
3
+
4
+ import type { TextCellProps } from './types';
4
5
 
5
6
  const TextCell = ({
6
7
  label,
@@ -8,13 +9,17 @@ const TextCell = ({
8
9
  hovered,
9
10
  sticky,
10
11
  }: TextCellProps) => (
11
- <span className={classnames('lw-h-11 lw-min-w-[70px] lw-flex-1 lw-border-b lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center last:lw-border-r-[0px]', {
12
- 'lw-bg-border-primary': emptyIndicator,
13
- 'lw-shadow-innerBorderBgColor': emptyIndicator && hovered,
14
- 'lw-bg-border-primary lw-font-semibold': hovered,
15
- 'lw-sticky lw-left-0 lw-z-10': sticky,
16
- 'lw-bg-bg-primary': sticky && !hovered,
17
- })}
12
+ <span
13
+ className={classnames(
14
+ 'lw-h-11 lw-min-w-[70px] lw-flex-1 lw-border-b lw-border-r lw-border-solid lw-border-border-primary lw-py-3.5 lw-text-center last:lw-border-r-[0px]',
15
+ {
16
+ 'lw-bg-border-primary': emptyIndicator,
17
+ 'lw-shadow-innerBorderBgColor': emptyIndicator && hovered,
18
+ 'lw-bg-border-primary lw-font-semibold': hovered,
19
+ 'lw-sticky lw-left-0 lw-z-10': sticky,
20
+ 'lw-bg-bg-primary': sticky && !hovered,
21
+ }
22
+ )}
18
23
  >
19
24
  {label}
20
25
  </span>
@@ -1,5 +1,6 @@
1
- import { LoaderSize } from '@oanda/labs-widget-common';
2
- import { Division } from '../../gql/types/graphql';
1
+ import type { LoaderSize } from '@oanda/labs-widget-common';
2
+
3
+ import type { Division } from '../../gql/types/graphql';
3
4
 
4
5
  export interface CellWithDataProps {
5
6
  currency: string;
@@ -1,4 +1,13 @@
1
- const MAJOR_CURRENCIES = ['EUR', 'USD', 'JPY', 'GBP', 'CHF', 'AUD', 'CAD', 'NZD'];
1
+ const MAJOR_CURRENCIES = [
2
+ 'EUR',
3
+ 'USD',
4
+ 'JPY',
5
+ 'GBP',
6
+ 'CHF',
7
+ 'AUD',
8
+ 'CAD',
9
+ 'NZD',
10
+ ];
2
11
 
3
12
  const INSTRUMENT_TOOLTIP_ID = 'instrument_tooltip_id';
4
13
 
@@ -7,8 +16,8 @@ const CELL_LOADING_VALUE = '...';
7
16
  const CELL_EMPTY_VALUE = '\u2014';
8
17
 
9
18
  export {
10
- MAJOR_CURRENCIES,
11
- INSTRUMENT_TOOLTIP_ID,
12
- CELL_LOADING_VALUE,
13
19
  CELL_EMPTY_VALUE,
20
+ CELL_LOADING_VALUE,
21
+ INSTRUMENT_TOOLTIP_ID,
22
+ MAJOR_CURRENCIES,
14
23
  };
@@ -1,2 +1,2 @@
1
- export * from './types';
2
1
  export * from './CurrencyCrossTableWidget';
2
+ export * from './types';
@@ -1,50 +1,64 @@
1
+ import type { Theme } from '@oanda/labs-widget-common';
2
+ import { validateLocale, validateToolParams } from '@oanda/labs-widget-common';
1
3
  import React from 'react';
2
4
  import { createRoot } from 'react-dom/client';
3
- import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
4
- import { CurrencyCrossTableWidget } from './CurrencyCrossTableWidget';
5
+
5
6
  import { Division } from '../gql/types/graphql';
7
+ import { CurrencyCrossTableWidget } from './CurrencyCrossTableWidget';
6
8
 
7
- const {
8
- graphqlUrl,
9
- liveRatesUrl,
10
- } = window.widgetsConfig || {};
9
+ const { graphqlUrl, liveRatesUrl } = window.widgetsConfig || {};
11
10
 
12
- const currencyCrossTableElements = document.querySelectorAll('div[data-currency-cross-table-params]');
11
+ const currencyCrossTableElements = document.querySelectorAll(
12
+ 'div[data-currency-cross-table-params]'
13
+ );
13
14
 
14
15
  currencyCrossTableElements.forEach((element) => {
15
16
  const root = createRoot(element);
16
17
  const params = element.getAttribute('data-currency-cross-table-params');
17
18
  const mode = element.getAttribute('data-mode');
18
- const {
19
- currencies, division, locale,
20
- } = JSON.parse(params as string);
19
+ const { currencies, division, locale } = JSON.parse(params as string);
21
20
 
22
- const isParamError = validateToolParams({
23
- division, locale, currencies, graphqlUrl, liveRatesUrl,
24
- }, [{
25
- name: 'locale',
26
- valueCheck: (value) => validateLocale(value),
27
- }, {
28
- name: 'division',
29
- valueCheck: (value) => Object.values(Division).includes(value),
30
- }, {
31
- name: 'currencies',
32
- valueCheck: (value) => (value as string[]).length > 0 && (value as string[]).length <= 8,
33
- }, {
34
- name: 'graphqlUrl',
35
- }, {
36
- name: 'liveRatesUrl',
37
- }]);
21
+ const isParamError = validateToolParams(
22
+ {
23
+ division,
24
+ locale,
25
+ currencies,
26
+ graphqlUrl,
27
+ liveRatesUrl,
28
+ },
29
+ [
30
+ {
31
+ name: 'locale',
32
+ valueCheck: (value: string | undefined) => validateLocale(value),
33
+ },
34
+ {
35
+ name: 'division',
36
+ valueCheck: (value: Division) =>
37
+ Object.values(Division).includes(value),
38
+ },
39
+ {
40
+ name: 'currencies',
41
+ valueCheck: (value) =>
42
+ (value as string[]).length > 0 && (value as string[]).length <= 8,
43
+ },
44
+ {
45
+ name: 'graphqlUrl',
46
+ },
47
+ {
48
+ name: 'liveRatesUrl',
49
+ },
50
+ ]
51
+ );
38
52
 
39
53
  root.render(
40
54
  <CurrencyCrossTableWidget
55
+ currencies={currencies}
56
+ division={division}
41
57
  graphqlUrl={graphqlUrl}
58
+ isParamError={isParamError}
42
59
  liveRatesUrl={liveRatesUrl}
43
- division={division}
44
- currencies={currencies}
45
60
  locale={locale}
46
61
  theme={mode as Theme}
47
- isParamError={isParamError}
48
- />,
62
+ />
49
63
  );
50
64
  });
@@ -1,5 +1,6 @@
1
- import { WidgetConfig } from '@oanda/labs-widget-common';
2
- import { Division } from '../gql/types/graphql';
1
+ import type { WidgetConfig } from '@oanda/labs-widget-common';
2
+
3
+ import type { Division } from '../gql/types/graphql';
3
4
 
4
5
  export { Locale } from '@oanda/mono-i18n';
5
6
 
@@ -1,12 +1,12 @@
1
+ import type { Division } from '../gql/types/graphql';
1
2
  import { MAJOR_CURRENCIES } from './constant';
2
- import { Division } from '../gql/types/graphql';
3
3
 
4
- const validCurrencies = (currencies: string[]) => currencies
5
- .every((currency) => MAJOR_CURRENCIES.includes(currency));
4
+ const validCurrencies = (currencies: string[]) =>
5
+ currencies.every((currency) => MAJOR_CURRENCIES.includes(currency));
6
6
 
7
7
  const divisionMapper = (division: Division) => (division === 'OGM' ? '' : '_');
8
8
 
9
- const currenciesToInstruments = (currencies: string[], division: any) => {
9
+ const currenciesToInstruments = (currencies: string[], division: Division) => {
10
10
  const pairs = currencies.reduce((acc, cV, index, array) => {
11
11
  const unique = array.filter((_item, idx) => index !== idx);
12
12
 
@@ -19,7 +19,10 @@ const currenciesToInstruments = (currencies: string[], division: any) => {
19
19
  return pairs;
20
20
  };
21
21
 
22
- const getPriceMovement = (priceMovement: number | undefined, isReversed: boolean) => {
22
+ const getPriceMovement = (
23
+ priceMovement: number | undefined,
24
+ isReversed: boolean
25
+ ) => {
23
26
  if (priceMovement === undefined) return 0;
24
27
 
25
28
  return isReversed ? priceMovement * -1 : priceMovement;
@@ -32,9 +35,9 @@ const getBuyPrice = (price: number | undefined, isReversed: boolean) => {
32
35
  };
33
36
 
34
37
  export {
35
- validCurrencies,
36
38
  currenciesToInstruments,
37
39
  divisionMapper,
38
- getPriceMovement,
39
40
  getBuyPrice,
41
+ getPriceMovement,
42
+ validCurrencies,
40
43
  };
@@ -1,18 +1,21 @@
1
- import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
1
+ import {
2
+ ResultOf,
3
+ DocumentTypeDecoration,
4
+ TypedDocumentNode,
5
+ } from '@graphql-typed-document-node/core';
2
6
  import { FragmentDefinitionNode } from 'graphql';
3
7
  import { Incremental } from './graphql';
4
8
 
5
-
6
- export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
7
- infer TType,
8
- any
9
- >
10
- ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
11
- ? TKey extends string
12
- ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
9
+ export type FragmentType<
10
+ TDocumentType extends DocumentTypeDecoration<any, any>,
11
+ > =
12
+ TDocumentType extends DocumentTypeDecoration<infer TType, any>
13
+ ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
14
+ ? TKey extends string
15
+ ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
16
+ : never
13
17
  : never
14
- : never
15
- : never;
18
+ : never;
16
19
 
17
20
  // return non-nullable if `fragmentType` is non-nullable
18
21
  export function useFragment<TType>(
@@ -22,7 +25,10 @@ export function useFragment<TType>(
22
25
  // return nullable if `fragmentType` is nullable
23
26
  export function useFragment<TType>(
24
27
  _documentNode: DocumentTypeDecoration<TType, any>,
25
- fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
28
+ fragmentType:
29
+ | FragmentType<DocumentTypeDecoration<TType, any>>
30
+ | null
31
+ | undefined
26
32
  ): TType | null | undefined;
27
33
  // return array of non-nullable if `fragmentType` is array of non-nullable
28
34
  export function useFragment<TType>(
@@ -32,35 +38,49 @@ export function useFragment<TType>(
32
38
  // return array of nullable if `fragmentType` is array of nullable
33
39
  export function useFragment<TType>(
34
40
  _documentNode: DocumentTypeDecoration<TType, any>,
35
- fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
41
+ fragmentType:
42
+ | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
43
+ | null
44
+ | undefined
36
45
  ): ReadonlyArray<TType> | null | undefined;
37
46
  export function useFragment<TType>(
38
47
  _documentNode: DocumentTypeDecoration<TType, any>,
39
- fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
48
+ fragmentType:
49
+ | FragmentType<DocumentTypeDecoration<TType, any>>
50
+ | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
51
+ | null
52
+ | undefined
40
53
  ): TType | ReadonlyArray<TType> | null | undefined {
41
54
  return fragmentType as any;
42
55
  }
43
56
 
44
-
45
57
  export function makeFragmentData<
46
58
  F extends DocumentTypeDecoration<any, any>,
47
- FT extends ResultOf<F>
59
+ FT extends ResultOf<F>,
48
60
  >(data: FT, _fragment: F): FragmentType<F> {
49
61
  return data as FragmentType<F>;
50
62
  }
51
63
  export function isFragmentReady<TQuery, TFrag>(
52
64
  queryNode: DocumentTypeDecoration<TQuery, any>,
53
65
  fragmentNode: TypedDocumentNode<TFrag>,
54
- data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
66
+ data:
67
+ | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
68
+ | null
69
+ | undefined
55
70
  ): data is FragmentType<typeof fragmentNode> {
56
- const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
57
- ?.deferredFields;
71
+ const deferredFields = (
72
+ queryNode as {
73
+ __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
74
+ }
75
+ ).__meta__?.deferredFields;
58
76
 
59
77
  if (!deferredFields) return true;
60
78
 
61
- const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
79
+ const fragDef = fragmentNode.definitions[0] as
80
+ | FragmentDefinitionNode
81
+ | undefined;
62
82
  const fragName = fragDef?.name?.value;
63
83
 
64
84
  const fields = (fragName && deferredFields[fragName]) || [];
65
- return fields.length > 0 && fields.every(field => data && field in data);
85
+ return fields.length > 0 && fields.every((field) => data && field in data);
66
86
  }
@@ -13,7 +13,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
13
13
  * Therefore it is highly recommended to use the babel or swc plugin for production.
14
14
  */
15
15
  const documents = {
16
- "\n query validateInstruments($instruments: [String]!, $division: Division!) {\n resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n name\n displayName\n }\n }\n": types.ValidateInstrumentsDocument,
16
+ '\n query validateInstruments($instruments: [String]!, $division: Division!) {\n resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n name\n displayName\n }\n }\n':
17
+ types.ValidateInstrumentsDocument,
17
18
  };
18
19
 
19
20
  /**
@@ -33,10 +34,13 @@ export function graphql(source: string): unknown;
33
34
  /**
34
35
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
35
36
  */
36
- export function graphql(source: "\n query validateInstruments($instruments: [String]!, $division: Division!) {\n resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n name\n displayName\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"];
37
+ export function graphql(
38
+ source: '\n query validateInstruments($instruments: [String]!, $division: Division!) {\n resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n name\n displayName\n }\n }\n'
39
+ ): (typeof documents)['\n query validateInstruments($instruments: [String]!, $division: Division!) {\n resolveInstrumentsByDivision(instruments: $instruments, division: $division) {\n name\n displayName\n }\n }\n'];
37
40
 
38
41
  export function graphql(source: string) {
39
42
  return (documents as any)[source] ?? {};
40
43
  }
41
44
 
42
- export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never;
45
+ export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
46
+ TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;