@oanda/labs-currency-cross-table 1.0.6 → 1.0.7

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

@@ -1,9 +1,23 @@
 import { DataRecord, LoaderSize } from '@oanda/labs-widget-common';
+import { Division } from '../../gql/types/graphql';
+export interface CellValidationWrapperProps {
+    currency: string;
+    pair: string;
+    instrument: string;
+    target: EventTarget | null;
+    additionalBorderBottom?: boolean;
+    division: Division;
+    setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
+}
 export interface CellWithDataProps {
-    loading: boolean;
+    currency: string;
+    pair: string;
+    instrumentForCalculations: string;
     record: DataRecord;
     target: EventTarget | null;
     additionalBorderBottom?: boolean;
+    division: Division;
     setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
     setSelectedPair: React.Dispatch<React.SetStateAction<string>>;
 }

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

@@ -1,19 +1,10 @@
 import { Locale } from '@oanda/mono-i18n';
 import { Theme } from '@oanda/labs-widget-common';
+import { Division } from '../gql/types/graphql';
 export { Locale } from '@oanda/mono-i18n';
-export declare enum Division {
-    Oap = "OAP",
-    Oau = "OAU",
-    Oc = "OC",
-    Ocan = "OCAN",
-    Oel = "OEL",
-    Ogm = "OGM",
-    Oj = "OJ",
-    Opt = "OPT",
-    Otms = "OTMS"
-}
 export interface CurrencyCrossTableConfig {
     division: Division;
+    graphqlUrl: string;
     liveRatesUrl: string;
     currencies: string[];
     locale: Locale;
@@ -29,4 +20,5 @@ export interface ValidationWrapperProps {
 export interface MainProps {
     currencies: string[];
     instruments: string[];
+    division: Division;
 }

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

@@ -1,8 +1,7 @@
-import { DataRecord, LiveRatesErrorMessage } from '@oanda/labs-widget-common';
+import { Division } from '../gql/types/graphql';
 declare const validCurrencies: (currencies: string[]) => boolean;
+declare const divisionMapper: (division: Division) => "" | "_";
 declare const currenciesToInstruments: (currencies: string[], division: any) => string[];
-declare const useRecords: (record: DataRecord, target: EventTarget | null) => {
-    updatedRecord: DataRecord;
-    error: LiveRatesErrorMessage | null;
-};
-export { validCurrencies, currenciesToInstruments, useRecords, };
+declare const getPriceMovement: (priceMovement: number | undefined, isReversed: boolean) => number;
+declare const getBuyPrice: (price: number | undefined, isReversed: boolean) => number;
+export { validCurrencies, currenciesToInstruments, divisionMapper, getPriceMovement, getBuyPrice, };

package/dist/types/gql/types/fragment-masking.d.ts

@@ -0,0 +1,15 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Incremental } from './graphql';
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<infer TType, any> ? [TType] extends [{
+    ' $fragmentName'?: infer TKey;
+}] ? TKey extends string ? {
+    ' $fragmentRefs'?: {
+        [key in TKey]: TType;
+    };
+} : never : never : never;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>): TType;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined): TType | null | undefined;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>): ReadonlyArray<TType>;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): ReadonlyArray<TType> | null | undefined;
+export declare function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(data: FT, _fragment: F): FragmentType<F>;
+export declare function isFragmentReady<TQuery, TFrag>(queryNode: DocumentTypeDecoration<TQuery, any>, fragmentNode: TypedDocumentNode<TFrag>, data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined): data is FragmentType<typeof fragmentNode>;

package/dist/types/gql/types/gql.d.ts

@@ -0,0 +1,37 @@
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+declare const documents: {
+    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": DocumentNode<types.ValidateInstrumentsQuery, types.Exact<{
+        instruments: Array<types.InputMaybe<types.Scalars["String"]["input"]>> | types.InputMaybe<types.Scalars["String"]["input"]>;
+        division?: types.InputMaybe<types.Division>;
+    }>>;
+};
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export declare function graphql(source: string): unknown;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export {};

package/dist/types/gql/types/graphql.d.ts

@@ -0,0 +1,384 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<T extends {
+    [key: string]: unknown;
+}, K extends keyof T> = {
+    [_ in K]?: never;
+};
+export type Incremental<T> = T | {
+    [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+};
+export type AssetClass = {
+    __typename?: 'AssetClass';
+    instruments: Array<Instrument>;
+    name: Scalars['String']['output'];
+};
+export declare enum AssetClassName {
+    Commodities = "COMMODITIES",
+    Cryptocurrency = "CRYPTOCURRENCY",
+    Currency = "CURRENCY",
+    EquityShares = "EQUITY_SHARES",
+    Indices = "INDICES",
+    Rates = "RATES"
+}
+export declare enum BookType {
+    Order = "ORDER",
+    Position = "POSITION"
+}
+export type CorrelationHeatmap = {
+    __typename?: 'CorrelationHeatmap';
+    baseInstrument: Instrument;
+    heatmap: Array<Heatmap>;
+};
+export type CorrelationMatrix = {
+    __typename?: 'CorrelationMatrix';
+    baseTimeUnit: CorrelationTimeUnit;
+    matrix: Array<Matrix>;
+};
+export declare enum CorrelationTimeUnit {
+    H1 = "H1",
+    H4 = "H4",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    M6 = "M6",
+    W1 = "W1",
+    Y1 = "Y1"
+}
+export declare enum CurrencyName {
+    Aud = "AUD",
+    Cad = "CAD",
+    Chf = "CHF",
+    Eur = "EUR",
+    Gbp = "GBP",
+    Jpy = "JPY",
+    Nzd = "NZD",
+    Usd = "USD"
+}
+export type CurrencyPower = {
+    __typename?: 'CurrencyPower';
+    /** UTC Timestamp */
+    point: Scalars['String']['output'];
+    price: Scalars['Float']['output'];
+};
+export type CurrencyPowerBalance = {
+    __typename?: 'CurrencyPowerBalance';
+    currency: CurrencyName;
+    power: Array<CurrencyPower>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum CurrencyPowerBalanceTimeUnit {
+    CurrentDay = "CURRENT_DAY",
+    H4 = "H4",
+    H8 = "H8",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    PreviousDay = "PREVIOUS_DAY",
+    W1 = "W1"
+}
+export type CurrencyStrength = {
+    __typename?: 'CurrencyStrength';
+    currency: CurrencyName;
+    strengthRelation?: Maybe<Array<StrengthRelation>>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum DataSource {
+    Ny4 = "NY4",
+    Ty3 = "TY3"
+}
+export declare enum Division {
+    Oap = "OAP",
+    Oau = "OAU",
+    Oc = "OC",
+    Ocan = "OCAN",
+    Oel = "OEL",
+    Ogm = "OGM",
+    Oj = "OJ",
+    Opt = "OPT",
+    Otms = "OTMS"
+}
+export type Heatmap = {
+    __typename?: 'Heatmap';
+    instrument: Instrument;
+    timeCorrelation: Array<TimeCorrelation>;
+};
+export type Instrument = {
+    __typename?: 'Instrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+};
+export type InstrumentCorrelation = {
+    __typename?: 'InstrumentCorrelation';
+    instrument: Instrument;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type Matrix = {
+    __typename?: 'Matrix';
+    instrument: Instrument;
+    instrumentCorrelation: Array<InstrumentCorrelation>;
+};
+export type OrderPositionBucket = {
+    __typename?: 'OrderPositionBucket';
+    longCountPercent: Scalars['Float']['output'];
+    price: Scalars['Float']['output'];
+    shortCountPercent: Scalars['Float']['output'];
+};
+export type OrderPositionData = {
+    __typename?: 'OrderPositionData';
+    bucketWidth: Scalars['Float']['output'];
+    buckets: Array<Maybe<OrderPositionBucket>>;
+    dataSource?: Maybe<Scalars['String']['output']>;
+    instrument: Scalars['String']['output'];
+    price?: Maybe<Scalars['Float']['output']>;
+    region?: Maybe<Scalars['String']['output']>;
+    time: Scalars['String']['output'];
+    unixTime: Scalars['Int']['output'];
+};
+export type Query = {
+    __typename?: 'Query';
+    assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+    correlationHeatmap: CorrelationHeatmap;
+    correlationMatrix: CorrelationMatrix;
+    currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+    currencyStrength?: Maybe<Array<CurrencyStrength>>;
+    isAllowedPartner?: Maybe<Scalars['Boolean']['output']>;
+    mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
+    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    sentiment?: Maybe<Array<SentimentInstrument>>;
+    sentimentList?: Maybe<Array<SentimentInstrument>>;
+    topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+    topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+    topicalInstrumentsTotalCount: Scalars['Int']['output'];
+    valueAtRiskAssetClasses?: Maybe<Array<AssetClass>>;
+    valueAtRiskChart?: Maybe<ValueAtRiskChart>;
+    volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+    volatilityChartAssetClasses?: Maybe<Array<AssetClass>>;
+};
+export type QueryAssetClassesArgs = {
+    division: Division;
+};
+export type QueryCorrelationHeatmapArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+    timeSpans?: InputMaybe<Array<InputMaybe<CorrelationTimeUnit>>>;
+};
+export type QueryCorrelationMatrixArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+export type QueryIsAllowedPartnerArgs = {
+    url: Scalars['String']['input'];
+};
+export type QueryMapInstrumentNamesArgs = {
+    division?: InputMaybe<Division>;
+    instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+export type QueryOrderPositionBooksArgs = {
+    bookType: BookType;
+    dataSource?: InputMaybe<DataSource>;
+    instrument: Scalars['String']['input'];
+    recentHours?: InputMaybe<Scalars['Int']['input']>;
+    region?: InputMaybe<Region>;
+};
+export type QuerySentimentArgs = {
+    division?: InputMaybe<Division>;
+    name: Scalars['String']['input'];
+};
+export type QuerySentimentListArgs = {
+    division?: InputMaybe<Division>;
+    sort?: InputMaybe<Sort>;
+};
+export type QueryTopicalInstrumentsArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    count?: InputMaybe<Scalars['Int']['input']>;
+    division?: InputMaybe<Division>;
+    offset?: InputMaybe<Scalars['Int']['input']>;
+    sort: TopicalSort;
+};
+export type QueryTopicalInstrumentsChartsArgs = {
+    division?: InputMaybe<Division>;
+    instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+};
+export type QueryTopicalInstrumentsTotalCountArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    division?: InputMaybe<Division>;
+    sort: TopicalSort;
+};
+export type QueryValueAtRiskAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export type QueryValueAtRiskChartArgs = {
+    bars: ValueAtRiskBars;
+    division?: InputMaybe<Division>;
+    duration: ValueAtRiskDuration;
+    instrument: Scalars['String']['input'];
+};
+export type QueryVolatilityChartArgs = {
+    division?: InputMaybe<Division>;
+    instrument: Scalars['String']['input'];
+    timeSpan: VolatilityChartTimeSpan;
+    timeUnit: VolatilityChartTimeUnit;
+};
+export type QueryVolatilityChartAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export declare enum Region {
+    Amer = "AMER",
+    Apac = "APAC",
+    Emea = "EMEA"
+}
+export type Sentiment = {
+    __typename?: 'Sentiment';
+    longPercent: Scalars['Float']['output'];
+    shortPercent: Scalars['Float']['output'];
+};
+export type SentimentInstrument = {
+    __typename?: 'SentimentInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum Sort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH"
+}
+export type StrengthRelation = {
+    __typename?: 'StrengthRelation';
+    currency: CurrencyName;
+    percentage: Scalars['Float']['output'];
+};
+export type TimeCorrelation = {
+    __typename?: 'TimeCorrelation';
+    timeUnit: CorrelationTimeUnit;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type TopicalInstrument = {
+    __typename?: 'TopicalInstrument';
+    assetClass?: Maybe<AssetClassName>;
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export type TopicalInstrumentChart = {
+    __typename?: 'TopicalInstrumentChart';
+    chart?: Maybe<Array<Scalars['Float']['output']>>;
+    name: Scalars['String']['output'];
+};
+export declare enum TopicalSort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH",
+    Hot = "HOT",
+    Popular = "POPULAR",
+    Volatile = "VOLATILE"
+}
+export declare enum ValueAtRiskBars {
+    C100 = "C100",
+    C200 = "C200",
+    C300 = "C300"
+}
+export type ValueAtRiskChart = {
+    __typename?: 'ValueAtRiskChart';
+    down: ValueAtRiskChartData;
+    up: ValueAtRiskChartData;
+};
+export type ValueAtRiskChartData = {
+    __typename?: 'ValueAtRiskChartData';
+    average: Scalars['Float']['output'];
+    max: Scalars['Float']['output'];
+    median: Scalars['Float']['output'];
+    points?: Maybe<Array<ValueAtRiskChartPoint>>;
+    threshold: Scalars['Float']['output'];
+};
+export type ValueAtRiskChartPoint = {
+    __typename?: 'ValueAtRiskChartPoint';
+    percent: Scalars['Float']['output'];
+    pips: Scalars['Float']['output'];
+};
+export declare enum ValueAtRiskDuration {
+    C1 = "C1",
+    C2 = "C2",
+    C3 = "C3",
+    C4 = "C4",
+    C5 = "C5",
+    C10 = "C10"
+}
+export type VolatilityChart = {
+    __typename?: 'VolatilityChart';
+    pips: Scalars['Float']['output'];
+    /** Time point - hour in format hh:mm, Date in UTC, Week in format 'Mo' */
+    point: Scalars['String']['output'];
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum VolatilityChartTimeSpan {
+    /**  Valid for: H */
+    D5 = "D5",
+    /**  Valid for: H */
+    D10 = "D10",
+    /**  Valid for: D */
+    M1 = "M1",
+    /**  Valid for: D */
+    M3 = "M3",
+    /**  Valid for: W */
+    W5 = "W5",
+    /**  Valid for: W */
+    W10 = "W10"
+}
+export declare enum VolatilityChartTimeUnit {
+    D = "D",
+    H = "H",
+    W = "W"
+}
+export type ValidateInstrumentsQueryVariables = Exact<{
+    instruments: Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>;
+    division?: InputMaybe<Division>;
+}>;
+export type ValidateInstrumentsQuery = {
+    __typename?: 'Query';
+    mapInstrumentNames?: Array<{
+        __typename?: 'Instrument';
+        name: string;
+        displayName: string;
+    } | null> | null;
+};
+export declare const ValidateInstrumentsDocument: DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/dist/types/gql/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/dist/types/gql/validateInstruments.d.ts

@@ -0,0 +1 @@
+export declare const validateInstruments: import("@apollo/client").DocumentNode;

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@oanda/labs-currency-cross-table",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Labs Currency Cross Table",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
   "types": "dist/types/index.d.ts",
+  "scripts": {
+    "codegen": "graphql-codegen --config codegen.ts"
+  },
   "keywords": [],
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.155",
-    "@oanda/mono-i18n": "10.0.1"
+    "@oanda/labs-widget-common": "^1.0.156",
+    "@oanda/mono-i18n": "10.0.1",
+    "graphql": "16.8.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "eecb0d8d995023c4374b106577b8be81b27604d4"
+  "gitHead": "0805ed728b9b0cf74d1cf0ef6db7beab69943000"
 }

package/src/CurrencyCrossTableWidget/CurrencyCrossTableWidget.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
 import {
   LiveRatesProvider, ThemeProvider, getLocale,
 } from '@oanda/labs-widget-common';
 import { translations } from '../translations';
-import { Division, CurrencyCrossTableConfig } from './types';
+import { CurrencyCrossTableConfig } from './types';
 import { ValidationWrapper } from './ValidationWrapper';
+import { Division } from '../gql/types/graphql';
 
 const CurrencyCrossTableWidget = ({
+  graphqlUrl,
   liveRatesUrl,
   currencies,
   division,
@@ -16,6 +19,11 @@ const CurrencyCrossTableWidget = ({
   isParamError,
   removePadding,
 }: CurrencyCrossTableConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
   const divisionCode = division === Division.Opt ? Division.Ogm : division;
   const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
 
@@ -26,11 +34,13 @@ const CurrencyCrossTableWidget = ({
           url={liveRatesUrl}
           options={{ divisionCode, dataSource }}
         >
-          <ValidationWrapper
-            currencies={currencies}
-            division={division}
-            isParamError={isParamError}
-          />
+          <ApolloProvider client={client}>
+            <ValidationWrapper
+              currencies={currencies}
+              division={division}
+              isParamError={isParamError}
+            />
+          </ApolloProvider>
         </LiveRatesProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/CurrencyCrossTableWidget/Main.tsx

@@ -1,11 +1,16 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, {
+  Fragment, Suspense, useEffect, useState,
+} from 'react';
 import { useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { MainProps } from './types';
-import { CellWithData, TextCell } from './components';
+import { TextCell } from './components';
+import { CellValidationWrapper } from './components/CellValidationWrapper';
+import { divisionMapper } from './utils';
 
 const Main = ({
   instruments,
   currencies,
+  division,
 }: MainProps) => {
   const [selectedCurrency, setSelectedCurrency] = useState('');
   const [selectedPair, setSelectedPair] = useState('');
@@ -46,17 +51,18 @@ const Main = ({
           {arr.map((pair) => (
             <Fragment key={`${currency}_${pair}`}>
               {currency !== pair ? (
-                <CellWithData
-                  loading={false}
-                  record={{
-                    instrument: `${currency}_${pair}`,
-                    displayName: `${currency}/${pair}`,
-                  }}
-                  target={target}
-                  additionalBorderBottom={index === arr.length - 1}
-                  setSelectedCurrency={setSelectedCurrency}
-                  setSelectedPair={setSelectedPair}
-                />
+                <Suspense>
+                  <CellValidationWrapper
+                    currency={currency}
+                    pair={pair}
+                    instrument={`${currency}${divisionMapper(division)}${pair}`}
+                    target={target}
+                    additionalBorderBottom={index === arr.length - 1}
+                    setSelectedCurrency={setSelectedCurrency}
+                    setSelectedPair={setSelectedPair}
+                    division={division}
+                  />
+                </Suspense>
               ) : (
                 <TextCell
                   additionalBorderBottom={index === arr.length - 1}

package/src/CurrencyCrossTableWidget/ValidationWrapper.tsx

@@ -21,6 +21,7 @@ const ValidationWrapper = ({
           <Main
             instruments={currenciesToInstruments(currencies, division)}
             currencies={currencies}
+            division={division}
           />
         )}
         {showError && (