@oanda/labs-live-rates-table-widget 1.0.49 → 1.0.51

package/dist/module/LiveRatesTableWidget/components/RowWithData/RowWithData.js

@@ -1,97 +0,0 @@
-import { LoaderSize, Price, TableCell, TableRow, Truncate, useLayoutProvider } from '@oanda/labs-widget-common';
-import classnames from 'classnames';
-import React from 'react';
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
-import { ColumnsNames } from '../../types';
-import { useRecords } from '../../utils';
-import { LineChartWithData } from '../LineChartWithData';
-const RowWithData = _ref => {
-  let {
-    loading,
-    record,
-    hasBackgroundColor,
-    target,
-    activeColumns,
-    division,
-    isScrolled
-  } = _ref;
-  const {
-    isDark
-  } = useLayoutProvider();
-  const {
-    updatedRecord,
-    error,
-    ref
-  } = useRecords(record, record.instrument ? target : null);
-  const checkLoading = id => loading || !error && updatedRecord?.[id] === undefined;
-  return React.createElement(TableRow, {
-    ref: ref,
-    hasBackgroundColor: hasBackgroundColor,
-    isScrolled: isScrolled
-  }, React.createElement(React.Fragment, null, React.createElement(TableCell, {
-    key: ColumnsNames.INSTRUMENT,
-    classNames: classnames('lw-font-bold', {
-      '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled
-    }),
-    isLoading: checkLoading(ColumnsNames.INSTRUMENT),
-    type: "text"
-  }, React.createElement(Truncate, {
-    maxWidth: 130,
-    text: record.displayName,
-    tooltipId: INSTRUMENT_TOOLTIP_ID
-  })), activeColumns.map(item => {
-    if (item === ColumnsNames.SELL) {
-      return React.createElement(TableCell, {
-        key: ColumnsNames.SELL,
-        additionalPaddingRight: true,
-        isError: !!error,
-        isLoading: checkLoading(ColumnsNames.SELL)
-      }, React.createElement(Price, {
-        movementIndicator: "arrow",
-        priceMovement: updatedRecord.sellPriceMovement
-      }, React.createElement("span", null, updatedRecord.sell?.toFixed(updatedRecord.displayPrecision))));
-    }
-    if (item === ColumnsNames.BUY) {
-      return React.createElement(TableCell, {
-        key: ColumnsNames.BUY,
-        additionalPaddingRight: true,
-        isError: !!error,
-        isLoading: checkLoading(ColumnsNames.BUY)
-      }, React.createElement(Price, {
-        movementIndicator: "arrow",
-        priceMovement: updatedRecord.buyPriceMovement
-      }, React.createElement("span", null, updatedRecord.buy?.toFixed(updatedRecord.displayPrecision))));
-    }
-    if (item === ColumnsNames.DAILY_CHANGE) {
-      return React.createElement(TableCell, {
-        key: ColumnsNames.DAILY_CHANGE,
-        isError: !!error,
-        isLoading: checkLoading('dailyPercentChange')
-      }, React.createElement("span", null, updatedRecord.dailyPercentChange));
-    }
-    if (item === ColumnsNames.CHART) {
-      return React.createElement("td", {
-        key: ColumnsNames.CHART,
-        className: "lw-relative lw-px-3 lw-py-0 lw-text-right",
-        "data-testid": "chart-table-cell"
-      }, React.createElement("div", {
-        className: "lw-flex lw-justify-center"
-      }, React.createElement(LineChartWithData, {
-        division: division,
-        isLoading: checkLoading('instrument'),
-        record: updatedRecord
-      })));
-    }
-    if (item === ColumnsNames.SPREAD) {
-      return React.createElement(TableCell, {
-        key: ColumnsNames.SPREAD,
-        isError: !!error,
-        isLoading: checkLoading(ColumnsNames.SPREAD),
-        loaderSize: LoaderSize.sm
-      }, React.createElement("span", null, updatedRecord.spread));
-    }
-    return null;
-  })));
-};
-export { RowWithData };
-//# sourceMappingURL=RowWithData.js.map

package/dist/module/LiveRatesTableWidget/components/RowWithData/RowWithData.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RowWithData.js","names":["LoaderSize","Price","TableCell","TableRow","Truncate","useLayoutProvider","classnames","React","INSTRUMENT_TOOLTIP_ID","ColumnsNames","useRecords","LineChartWithData","RowWithData","_ref","loading","record","hasBackgroundColor","target","activeColumns","division","isScrolled","isDark","updatedRecord","error","ref","instrument","checkLoading","id","undefined","createElement","Fragment","key","INSTRUMENT","classNames","isLoading","type","maxWidth","text","displayName","tooltipId","map","item","SELL","additionalPaddingRight","isError","movementIndicator","priceMovement","sellPriceMovement","sell","toFixed","displayPrecision","BUY","buyPriceMovement","buy","DAILY_CHANGE","dailyPercentChange","CHART","className","SPREAD","loaderSize","sm","spread"],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx"],"sourcesContent":["import {\n  LoaderSize,\n  Price,\n  TableCell,\n  TableRow,\n  Truncate,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport { INSTRUMENT_TOOLTIP_ID } from '../../constant';\nimport type { RowWithDataProps } from '../../types';\nimport { ColumnsNames } from '../../types';\nimport { useRecords } from '../../utils';\nimport { LineChartWithData } from '../LineChartWithData';\n\nconst RowWithData = ({\n  loading,\n  record,\n  hasBackgroundColor,\n  target,\n  activeColumns,\n  division,\n  isScrolled,\n}: RowWithDataProps) => {\n  const { isDark } = useLayoutProvider();\n  const { updatedRecord, error, ref } = useRecords(\n    record,\n    record.instrument ? target : null\n  );\n\n  const checkLoading = (id: string) =>\n    loading || (!error && updatedRecord?.[id] === undefined);\n\n  return (\n    <TableRow\n      ref={ref}\n      hasBackgroundColor={hasBackgroundColor}\n      isScrolled={isScrolled}\n    >\n      <>\n        <TableCell\n          key={ColumnsNames.INSTRUMENT}\n          classNames={classnames('lw-font-bold', {\n            '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary':\n              isDark && isScrolled,\n          })}\n          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}\n          type=\"text\"\n        >\n          <Truncate\n            maxWidth={130}\n            text={record.displayName}\n            tooltipId={INSTRUMENT_TOOLTIP_ID}\n          />\n        </TableCell>\n        {activeColumns.map((item) => {\n          if (item === ColumnsNames.SELL) {\n            return (\n              <TableCell\n                key={ColumnsNames.SELL}\n                additionalPaddingRight\n                isError={!!error}\n                isLoading={checkLoading(ColumnsNames.SELL)}\n              >\n                <Price\n                  movementIndicator=\"arrow\"\n                  priceMovement={updatedRecord.sellPriceMovement}\n                >\n                  <span>\n                    {updatedRecord.sell?.toFixed(\n                      updatedRecord.displayPrecision\n                    )}\n                  </span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.BUY) {\n            return (\n              <TableCell\n                key={ColumnsNames.BUY}\n                additionalPaddingRight\n                isError={!!error}\n                isLoading={checkLoading(ColumnsNames.BUY)}\n              >\n                <Price\n                  movementIndicator=\"arrow\"\n                  priceMovement={updatedRecord.buyPriceMovement}\n                >\n                  <span>\n                    {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}\n                  </span>\n                </Price>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.DAILY_CHANGE) {\n            return (\n              <TableCell\n                key={ColumnsNames.DAILY_CHANGE}\n                isError={!!error}\n                isLoading={checkLoading('dailyPercentChange')}\n              >\n                <span>{updatedRecord.dailyPercentChange}</span>\n              </TableCell>\n            );\n          }\n\n          if (item === ColumnsNames.CHART) {\n            return (\n              <td\n                key={ColumnsNames.CHART}\n                className=\"lw-relative lw-px-3 lw-py-0 lw-text-right\"\n                data-testid=\"chart-table-cell\"\n              >\n                <div className=\"lw-flex lw-justify-center\">\n                  <LineChartWithData\n                    division={division}\n                    isLoading={checkLoading('instrument')}\n                    record={updatedRecord}\n                  />\n                </div>\n              </td>\n            );\n          }\n\n          if (item === ColumnsNames.SPREAD) {\n            return (\n              <TableCell\n                key={ColumnsNames.SPREAD}\n                isError={!!error}\n                isLoading={checkLoading(ColumnsNames.SPREAD)}\n                loaderSize={LoaderSize.sm}\n              >\n                <span>{updatedRecord.spread}</span>\n              </TableCell>\n            );\n          }\n          return null;\n        })}\n      </>\n    </TableRow>\n  );\n};\n\nexport { RowWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/RowWithData/index.js

@@ -1,2 +0,0 @@
-export * from './RowWithData';
-//# sourceMappingURL=index.js.map

package/dist/module/LiveRatesTableWidget/components/RowWithData/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/LiveRatesTableWidget/components/RowWithData/index.ts"],"sourcesContent":["export * from './RowWithData';\n"],"mappings":"AAAA,cAAc,eAAe","ignoreList":[]}

package/dist/module/LiveRatesTableWidget/components/index.js

@@ -1,5 +0,0 @@
-export * from './Cards';
-export * from './CardWithData';
-export * from './LineChartWithData';
-export * from './RowWithData';
-//# sourceMappingURL=index.js.map

package/dist/module/LiveRatesTableWidget/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LiveRatesTableWidget/components/index.ts"],"sourcesContent":["export * from './Cards';\nexport * from './CardWithData';\nexport * from './LineChartWithData';\nexport * from './RowWithData';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,qBAAqB;AACnC,cAAc,eAAe","ignoreList":[]}

package/dist/types/LiveRatesTableWidget/components/CardWithData/CardWithData.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { CardWithDataProps } from '../../types';
-declare const CardWithData: ({ isLoading, record, target, activeColumns, index, division, isLast, }: CardWithDataProps) => React.JSX.Element;
-export { CardWithData };

package/dist/types/LiveRatesTableWidget/components/CardWithData/index.d.ts

@@ -1 +0,0 @@
-export * from './CardWithData';

package/dist/types/LiveRatesTableWidget/components/Cards/Cards.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { CardsProps } from './types';
-declare const Cards: ({ records, target, columns, isError, isLoading, division, startIndex, }: CardsProps) => React.JSX.Element;
-export { Cards };

package/dist/types/LiveRatesTableWidget/components/Cards/index.d.ts

@@ -1 +0,0 @@
-export * from './Cards';

package/dist/types/LiveRatesTableWidget/components/Cards/types.d.ts

@@ -1,12 +0,0 @@
-import type { Division } from '../../../gql/types/graphql';
-import type { ColumnsNames, DataRecord } from '../../types';
-export interface CardsProps {
-    startIndex?: number;
-    emptyCardsCount?: number;
-    isLoading?: boolean;
-    isError?: boolean;
-    records: DataRecord[];
-    target: EventTarget | null;
-    columns: ColumnsNames[];
-    division: Division;
-}

package/dist/types/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { LineChartWithDataProps } from './types';
-declare const LineChartWithData: ({ padding, record, size, isLoading, division, isDarkMode, }: LineChartWithDataProps) => React.JSX.Element;
-export { LineChartWithData };

package/dist/types/LiveRatesTableWidget/components/LineChartWithData/index.d.ts

@@ -1 +0,0 @@
-export * from './LineChartWithData';

package/dist/types/LiveRatesTableWidget/components/LineChartWithData/types.d.ts

@@ -1,11 +0,0 @@
-import type { LineChartSize } from '@oanda/labs-widget-common';
-import type { Division } from '../../../gql/types/graphql';
-import type { DataRecord } from '../../types';
-export interface LineChartWithDataProps {
-    padding?: number;
-    record: DataRecord;
-    size?: LineChartSize;
-    isLoading: boolean;
-    division: Division;
-    isDarkMode?: boolean;
-}

package/dist/types/LiveRatesTableWidget/components/LineChartWithData/utils.d.ts

@@ -1 +0,0 @@
-export declare const getChartColor: (dailyChange?: string, isDarkMode?: boolean) => string;

package/dist/types/LiveRatesTableWidget/components/RowWithData/RowWithData.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { RowWithDataProps } from '../../types';
-declare const RowWithData: ({ loading, record, hasBackgroundColor, target, activeColumns, division, isScrolled, }: RowWithDataProps) => React.JSX.Element;
-export { RowWithData };

package/dist/types/LiveRatesTableWidget/components/RowWithData/index.d.ts

@@ -1 +0,0 @@
-export * from './RowWithData';

package/dist/types/LiveRatesTableWidget/components/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Cards';
-export * from './CardWithData';
-export * from './LineChartWithData';
-export * from './RowWithData';

package/src/LiveRatesTableWidget/components/CardWithData/CardWithData.tsx

@@ -1,133 +0,0 @@
-import {
-  ArrowPosition,
-  Card,
-  CardHeader,
-  CardRow,
-  LineChartSize,
-  Price,
-  Truncate,
-} from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
-import React from 'react';
-
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
-import type { CardWithDataProps } from '../../types';
-import { ColumnsNames } from '../../types';
-import { useRecords } from '../../utils';
-import { LineChartWithData } from '../LineChartWithData';
-
-const CardWithData = ({
-  isLoading,
-  record,
-  target,
-  activeColumns,
-  index,
-  division,
-  isLast,
-}: CardWithDataProps) => {
-  const { updatedRecord, error, ref } = useRecords(
-    record,
-    record.instrument ? target : null
-  );
-  const { lang } = useLocale();
-
-  const checkLoading = (id: string) =>
-    isLoading || (!error && updatedRecord?.[id] === undefined);
-
-  return (
-    <Card ref={ref} data-testid="card" withoutBottomBorder={!isLast}>
-      <CardHeader
-        isLoading={isLoading}
-        number={index}
-        title={
-          <Truncate
-            text={record.displayName}
-            tooltipId={INSTRUMENT_TOOLTIP_ID}
-          />
-        }
-      >
-        {activeColumns.includes(ColumnsNames.CHART) && (
-          <LineChartWithData
-            division={division}
-            isLoading={checkLoading('instrument')}
-            padding={4}
-            record={updatedRecord}
-            size={LineChartSize.xs}
-          />
-        )}
-      </CardHeader>
-      {activeColumns.map((item) => {
-        if (item === ColumnsNames.SELL) {
-          return (
-            <CardRow
-              key={ColumnsNames.SELL}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.SELL)}
-              label={lang('sell_price')}
-            >
-              <Price
-                arrowPosition={ArrowPosition.left}
-                movementIndicator="arrow"
-                priceMovement={updatedRecord.sellPriceMovement}
-              >
-                <span>
-                  {updatedRecord.sell?.toFixed(updatedRecord.displayPrecision)}
-                </span>
-              </Price>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.BUY) {
-          return (
-            <CardRow
-              key={ColumnsNames.BUY}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.BUY)}
-              label={lang('buy_price')}
-            >
-              <Price
-                arrowPosition={ArrowPosition.left}
-                movementIndicator="arrow"
-                priceMovement={updatedRecord.buyPriceMovement}
-              >
-                <span>
-                  {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
-                </span>
-              </Price>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.DAILY_CHANGE) {
-          return (
-            <CardRow
-              key={ColumnsNames.DAILY_CHANGE}
-              isError={!!error}
-              isLoading={checkLoading('dailyPercentChange')}
-              label={lang('daily_percent_change')}
-            >
-              <span>{updatedRecord.dailyPercentChange}</span>
-            </CardRow>
-          );
-        }
-
-        if (item === ColumnsNames.SPREAD) {
-          return (
-            <CardRow
-              key={ColumnsNames.SPREAD}
-              isError={!!error}
-              isLoading={checkLoading(ColumnsNames.SPREAD)}
-              label={lang('spread')}
-            >
-              <span>{updatedRecord.spread}</span>
-            </CardRow>
-          );
-        }
-        return null;
-      })}
-    </Card>
-  );
-};
-
-export { CardWithData };

package/src/LiveRatesTableWidget/components/CardWithData/index.ts

@@ -1 +0,0 @@
-export * from './CardWithData';

package/src/LiveRatesTableWidget/components/Cards/Cards.tsx

@@ -1,44 +0,0 @@
-import { Card, ChartError } from '@oanda/labs-widget-common';
-import React from 'react';
-
-import { CardWithData } from '../CardWithData/CardWithData';
-import type { CardsProps } from './types';
-
-const Cards = ({
-  records,
-  target,
-  columns,
-  isError,
-  isLoading,
-  division,
-  startIndex = 0,
-}: CardsProps) => (
-  <>
-    {isError ? (
-      <Card>
-        <div className="lw-flex lw-h-[150px] lw-w-full lw-items-center lw-justify-center">
-          <ChartError />
-        </div>
-      </Card>
-    ) : (
-      <>
-        {records.map((record, index) => (
-          <div key={`card_${startIndex + index}`}>
-            <CardWithData
-              activeColumns={columns}
-              division={division}
-              index={startIndex + index + 1}
-              isError={isError}
-              isLast={index + 1 === records.length}
-              isLoading={isLoading}
-              record={record}
-              target={target}
-            />
-          </div>
-        ))}
-      </>
-    )}
-  </>
-);
-
-export { Cards };

package/src/LiveRatesTableWidget/components/Cards/index.ts

@@ -1 +0,0 @@
-export * from './Cards';

package/src/LiveRatesTableWidget/components/Cards/types.tsx

@@ -1,13 +0,0 @@
-import type { Division } from '../../../gql/types/graphql';
-import type { ColumnsNames, DataRecord } from '../../types';
-
-export interface CardsProps {
-  startIndex?: number;
-  emptyCardsCount?: number;
-  isLoading?: boolean;
-  isError?: boolean;
-  records: DataRecord[];
-  target: EventTarget | null;
-  columns: ColumnsNames[];
-  division: Division;
-}

package/src/LiveRatesTableWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -1,53 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { LineChart, Loader, LoaderSize } from '@oanda/labs-widget-common';
-import React from 'react';
-
-import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
-import type {
-  GetInstrumentsChartQuery,
-  GetInstrumentsChartQueryVariables,
-} from '../../../gql/types/graphql';
-import type { LineChartWithDataProps } from './types';
-import { getChartColor } from './utils';
-
-const LineChartWithData = ({
-  padding,
-  record,
-  size,
-  isLoading,
-  division,
-  isDarkMode = false,
-}: LineChartWithDataProps) => {
-  const { loading, data } = useQuery<
-    GetInstrumentsChartQuery,
-    GetInstrumentsChartQueryVariables
-  >(getInstrumentsChart, {
-    variables: {
-      instruments: [record.instrument],
-      division,
-    },
-    fetchPolicy: 'network-only',
-    skip: !record.instrument,
-  });
-
-  const showLoader = isLoading || loading;
-  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];
-
-  const chartColor = getChartColor(record.dailyPercentChange, isDarkMode);
-
-  return (
-    <>
-      {showLoader && <Loader size={LoaderSize.md} />}
-      {!showLoader && (
-        <LineChart
-          color={chartColor}
-          data={chart}
-          padding={padding}
-          size={size}
-        />
-      )}
-    </>
-  );
-};
-
-export { LineChartWithData };

package/src/LiveRatesTableWidget/components/LineChartWithData/index.ts

@@ -1 +0,0 @@
-export * from './LineChartWithData';

package/src/LiveRatesTableWidget/components/LineChartWithData/types.tsx

@@ -1,13 +0,0 @@
-import type { LineChartSize } from '@oanda/labs-widget-common';
-
-import type { Division } from '../../../gql/types/graphql';
-import type { DataRecord } from '../../types';
-
-export interface LineChartWithDataProps {
-  padding?: number;
-  record: DataRecord;
-  size?: LineChartSize;
-  isLoading: boolean;
-  division: Division;
-  isDarkMode?: boolean;
-}

package/src/LiveRatesTableWidget/components/LineChartWithData/utils.ts

@@ -1,14 +0,0 @@
-import { Theme, themeColors } from '@oanda/labs-widget-common';
-
-export const getChartColor = (dailyChange?: string, isDarkMode?: boolean) => {
-  const theme = isDarkMode ? Theme.Dark : Theme.Light;
-
-  switch (dailyChange?.charAt(0)) {
-    case '+':
-      return themeColors.ok[theme];
-    case '-':
-      return themeColors.danger[theme];
-    default:
-      return themeColors.borderDisabled[theme];
-  }
-};

package/src/LiveRatesTableWidget/components/RowWithData/RowWithData.tsx

@@ -1,150 +0,0 @@
-import {
-  LoaderSize,
-  Price,
-  TableCell,
-  TableRow,
-  Truncate,
-  useLayoutProvider,
-} from '@oanda/labs-widget-common';
-import classnames from 'classnames';
-import React from 'react';
-
-import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
-import type { RowWithDataProps } from '../../types';
-import { ColumnsNames } from '../../types';
-import { useRecords } from '../../utils';
-import { LineChartWithData } from '../LineChartWithData';
-
-const RowWithData = ({
-  loading,
-  record,
-  hasBackgroundColor,
-  target,
-  activeColumns,
-  division,
-  isScrolled,
-}: RowWithDataProps) => {
-  const { isDark } = useLayoutProvider();
-  const { updatedRecord, error, ref } = useRecords(
-    record,
-    record.instrument ? target : null
-  );
-
-  const checkLoading = (id: string) =>
-    loading || (!error && updatedRecord?.[id] === undefined);
-
-  return (
-    <TableRow
-      ref={ref}
-      hasBackgroundColor={hasBackgroundColor}
-      isScrolled={isScrolled}
-    >
-      <>
-        <TableCell
-          key={ColumnsNames.INSTRUMENT}
-          classNames={classnames('lw-font-bold', {
-            '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary':
-              isDark && isScrolled,
-          })}
-          isLoading={checkLoading(ColumnsNames.INSTRUMENT)}
-          type="text"
-        >
-          <Truncate
-            maxWidth={130}
-            text={record.displayName}
-            tooltipId={INSTRUMENT_TOOLTIP_ID}
-          />
-        </TableCell>
-        {activeColumns.map((item) => {
-          if (item === ColumnsNames.SELL) {
-            return (
-              <TableCell
-                key={ColumnsNames.SELL}
-                additionalPaddingRight
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.SELL)}
-              >
-                <Price
-                  movementIndicator="arrow"
-                  priceMovement={updatedRecord.sellPriceMovement}
-                >
-                  <span>
-                    {updatedRecord.sell?.toFixed(
-                      updatedRecord.displayPrecision
-                    )}
-                  </span>
-                </Price>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.BUY) {
-            return (
-              <TableCell
-                key={ColumnsNames.BUY}
-                additionalPaddingRight
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.BUY)}
-              >
-                <Price
-                  movementIndicator="arrow"
-                  priceMovement={updatedRecord.buyPriceMovement}
-                >
-                  <span>
-                    {updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}
-                  </span>
-                </Price>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.DAILY_CHANGE) {
-            return (
-              <TableCell
-                key={ColumnsNames.DAILY_CHANGE}
-                isError={!!error}
-                isLoading={checkLoading('dailyPercentChange')}
-              >
-                <span>{updatedRecord.dailyPercentChange}</span>
-              </TableCell>
-            );
-          }
-
-          if (item === ColumnsNames.CHART) {
-            return (
-              <td
-                key={ColumnsNames.CHART}
-                className="lw-relative lw-px-3 lw-py-0 lw-text-right"
-                data-testid="chart-table-cell"
-              >
-                <div className="lw-flex lw-justify-center">
-                  <LineChartWithData
-                    division={division}
-                    isLoading={checkLoading('instrument')}
-                    record={updatedRecord}
-                  />
-                </div>
-              </td>
-            );
-          }
-
-          if (item === ColumnsNames.SPREAD) {
-            return (
-              <TableCell
-                key={ColumnsNames.SPREAD}
-                isError={!!error}
-                isLoading={checkLoading(ColumnsNames.SPREAD)}
-                loaderSize={LoaderSize.sm}
-              >
-                <span>{updatedRecord.spread}</span>
-              </TableCell>
-            );
-          }
-          return null;
-        })}
-      </>
-    </TableRow>
-  );
-};
-
-export { RowWithData };

package/src/LiveRatesTableWidget/components/RowWithData/index.ts

@@ -1 +0,0 @@
-export * from './RowWithData';

package/src/LiveRatesTableWidget/components/index.ts

@@ -1,4 +0,0 @@
-export * from './Cards';
-export * from './CardWithData';
-export * from './LineChartWithData';
-export * from './RowWithData';