@ssa-ui-kit/widgets 1.0.10 → 1.0.12

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.10",
+  "version": "1.0.12",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "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/utils": "^1.0.0"
+    "@ssa-ui-kit/core": "^1.1.8",
+    "@ssa-ui-kit/utils": "^1.0.0",
+    "@ssa-ui-kit/hooks": "^1.0.0"
   },
   "browserslist": [
     ">0.1%",

package/src/components/AccountBalance/AccountBalance.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { css } from '@emotion/react';
+import { css as cssReact } from '@emotion/react';
+import { css } from '@emotion/css';
 import { mainTheme } from '@ssa-ui-kit/core';
 
 import { data } from './stories/fixtures';
@@ -14,9 +15,15 @@ export default {
 
 export const Default: StoryObj<typeof AccountBalance> = {};
 Default.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   onClick: () => alert('Clicked!'),
+  widgetMaxWidth: '290px',
+  className: css`
+    & .pie-chart-wrapper p {
+      font-size: 12px;
+    }
+  `,
   data,
 };
 
@@ -48,17 +55,20 @@ export const Custom: StoryObj<typeof AccountBalance> = (
   return (
     <AccountBalance
       {...args}
-      css={css`
+      css={cssReact`
         ul li {
           height: auto;
         }
+        & .pie-chart-wrapper p {
+          font-size: 12px;
+        }
       `}
     />
   );
 };
 
 Custom.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   variant: 'withoutValueList',
   chartColorPalette: [
@@ -66,7 +76,7 @@ Custom.args = {
     mainTheme.colors.green as string,
   ],
   legendColorPalette: ['blue', 'green'],
-  widgetMaxWidth: '230px',
+  widgetMaxWidth: '240px',
   data: [
     {
       id: 'BTC',
@@ -89,17 +99,20 @@ export const WithoutPaletteColors: StoryObj<typeof AccountBalance> = (
   return (
     <AccountBalance
       {...args}
-      css={css`
+      css={cssReact`
         ul li {
           height: auto;
         }
+        & .pie-chart-wrapper p {
+          font-size: 12px;
+        }
       `}
     />
   );
 };
 
 WithoutPaletteColors.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   variant: 'withoutValueList',
   chartColorPalette: ['#F7931A', '#50AF95'],
@@ -107,7 +120,7 @@ WithoutPaletteColors.args = {
     'linear-gradient(243.84deg, rgb(235, 117, 86), rgb(242, 136, 142))',
     '#50AF95',
   ],
-  widgetMaxWidth: '230px',
+  widgetMaxWidth: '240px',
   data: [
     {
       id: 'BTC',

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -17,7 +17,7 @@ export const BalancePieChartTitle = withTheme(
                 font-weight: 500;
               `
             : css`
-                font-size: 10px;
+                font-size: 12px;
                 padding: 0 14px;
                 line-height: 1;
               `

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/ExchangeAccount/helpers.tsx

@@ -15,7 +15,7 @@ export const dataValues: Array<
     title: 'Account Name',
     status: 'Active',
     data: {
-      total: 48000.53032,
+      total: 48000.53,
       currency: 'USDT',
       data: [
         {
@@ -120,7 +120,7 @@ export const dataValues: Array<
     title: 'Name#4',
     status: 'Active',
     data: {
-      total: 9000.53032,
+      total: 9000.53,
       currency: 'USDT',
       data: [
         {

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';