@ssa-ui-kit/widgets 1.0.11 → 1.0.13

package/jest-setup.ts

@@ -15,3 +15,6 @@ global.render = customRender;
 
 expect.addSnapshotSerializer(createSerializer());
 expect.extend(matchers);
+
+window.URL.createObjectURL = jest.fn();
+window.HTMLCanvasElement.prototype.getContext = jest.fn();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^1.1.7",
-    "@ssa-ui-kit/hooks": "^1.0.0",
+    "@ssa-ui-kit/core": "^1.1.49",
+    "@ssa-ui-kit/hooks": "^1.0.2",
     "@ssa-ui-kit/utils": "^1.0.0"
   },
   "browserslist": [

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -5,6 +5,7 @@ import {
   PieChartFeatures,
   PieChartLegend,
   pieChartPalettes,
+  mainTheme,
 } from '@ssa-ui-kit/core';
 import { BalancePieChartTitle } from './BalancePieChartTitle';
 
@@ -29,6 +30,23 @@ export const BalancePieChart = withTheme(
       pieChartPalettes.getBalancePalette(theme);
     const featuresList = new Set<PieChartFeatures>();
 
+    const filteredIndexes: number[] = [];
+    const chartData = data?.filter((item, index) => {
+      const isSaved = item.value !== 0;
+      if (!isSaved) {
+        filteredIndexes.push(index);
+      }
+      return isSaved;
+    });
+    const chartColors = (chartColorPalette || pieChartColors).filter(
+      (item, index) => !filteredIndexes.includes(index),
+    );
+    if (chartColors.length < chartData.length) {
+      for (let i = 0; i < chartData.length - chartColors.length; i++) {
+        chartColors.push(mainTheme.colors.purpleLighter as string);
+      }
+    }
+
     if (Object.keys(pieChartProps.cardProps || {}).length) {
       featuresList.add('header');
     }
@@ -43,9 +61,9 @@ export const BalancePieChart = withTheme(
     };
     return (
       <PieChart
-        data={data}
+        data={chartData}
         features={Array.from(featuresList)}
-        colors={chartColorPalette || pieChartColors}
+        colors={chartColors}
         onFullscreenModeChange={handleFullscreenModeChange}
         animate={false}
         title={

package/src/components/{ExchangeAccountKeys/ExchangeAccountKeys.specBackup.tsx → AccountKeys/AccountKeys.specBackup.tsx}

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { StoryComponent } from './stories/StoryComponent';
 
-describe('ExchangeAccountKeys', () => {
+describe('AccountKeys', () => {
   it('Renders with title', () => {
     const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
 

package/src/components/AccountKeys/AccountKeys.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccountKeys } from './AccountKeys';
+import { StoryComponent } from './stories/StoryComponent';
+
+export default {
+  title: 'Trading/AccountKeys',
+  component: AccountKeys,
+} as Meta<typeof AccountKeys>;
+
+export const Default: StoryObj<typeof AccountKeys> = () => (
+  <StoryComponent onDelete={() => alert('Account Deleted!')} />
+);
+
+Default.args = {};

package/src/components/{ExchangeAccountKeys/ExchangeAccountKeys.tsx → AccountKeys/AccountKeys.tsx}

@@ -8,17 +8,17 @@ import {
   Icon,
   Typography,
 } from '@ssa-ui-kit/core';
-import { ExchangeAccountKeysProps } from './types';
+import { AccountKeysProps } from './types';
 import * as S from './styles';
 
-export const ExchangeAccountKeys = ({
+export const AccountKeys = ({
   title,
   apiKey,
   secretKey,
   onDelete,
   onVisibilityChange,
   isDisabled,
-}: ExchangeAccountKeysProps) => {
+}: AccountKeysProps) => {
   const [isVisible, setIsVisible] = useState(false);
   const theme = useTheme();
   const placeholder = <span>******</span>;

package/src/components/AccountKeys/index.ts

@@ -0,0 +1,2 @@
+export { AccountKeys } from './AccountKeys';
+export * from './types';

package/src/components/{ExchangeAccountKeys → AccountKeys}/stories/StoryComponent.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ExchangeAccountKeys } from '../ExchangeAccountKeys';
+import { AccountKeys } from '../AccountKeys';
 import { getMockData } from '../helpers';
 
 interface onDelete {
@@ -21,7 +21,7 @@ export const StoryComponent = ({ onDelete }: onDelete) => {
   };
 
   return (
-    <ExchangeAccountKeys
+    <AccountKeys
       title="Account Name"
       apiKey="123456789012345678901234567890"
       secretKey={secretKey}

package/src/components/{ExchangeAccountKeys → AccountKeys}/types.ts

@@ -1,4 +1,4 @@
-export interface ExchangeAccountKeysProps {
+export interface AccountKeysProps {
   title: string | JSX.Element;
   apiKey: string;
   secretKey: string;

package/src/components/TradingInfoCard/TradingInfoCardTooltip.tsx

@@ -15,7 +15,7 @@ const TradingInfoCardTooltip = ({
   const theme = useTheme();
   return (
     <Tooltip
-      offsetPx={0}
+      offsetOptions={0}
       enableHover={true}
       enableClick={false}
       arrowProps={{

package/src/index.ts

@@ -33,4 +33,4 @@ export * from './components/TradingScoreboard';
 export * from './components/BotsTable';
 export * from './components/AccountBalance';
 export * from './components/ExchangeAccount';
-export * from './components/ExchangeAccountKeys';
+export * from './components/AccountKeys';