@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/BotsTable/stories/BotsTable/components/Actions/ActionsWrapper.tsx

@@ -0,0 +1,21 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+
+export const ActionsWrapper = ({
+  children,
+  ...rest
+}: Parameters<typeof Wrapper>[0]) => (
+  <Wrapper
+    direction="column"
+    alignItems="flex-start"
+    css={{
+      background: '#fff',
+      width: 140,
+      color: '#2b2d31',
+      fontWeight: 500,
+      borderRadius: 5,
+      boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.25)',
+    }}
+    {...rest}>
+    {children}
+  </Wrapper>
+);

package/src/components/BotsTable/stories/BotsTable/components/Actions/consts.tsx

@@ -0,0 +1,118 @@
+export const actionsIcons = {
+  trade: () => (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <rect
+        width="21"
+        height="21"
+        rx="6"
+        fill="url(#paint0_linear_1141_8268)"
+      />
+      <rect x="5.84009" y="5.5" width="10" height="10" rx="3" fill="white" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1141_8268"
+          x1="2.03505e-07"
+          y1="10.5"
+          x2="20.4562"
+          y2="13.8352"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#F0816B" />
+          <stop offset="0.998643" stopColor="#F99990" />
+        </linearGradient>
+      </defs>
+    </svg>
+  ),
+  liquidation: () => (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.3401 9.63397C15.0068 10.0189 15.0068 10.9811 14.3401 11.366L9.84009 13.9641C9.17342 14.349 8.34009 13.8679 8.34009 13.0981L8.34009 7.90192C8.34009 7.13212 9.17342 6.651 9.84009 7.0359L14.3401 9.63397Z"
+        fill="url(#paint0_linear_1141_8272)"
+      />
+      <rect
+        x="1"
+        y="1"
+        width="19"
+        height="19"
+        rx="5"
+        stroke="url(#paint1_linear_1141_8272)"
+        strokeWidth="2"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1141_8272"
+          x1="10.8401"
+          y1="15.5"
+          x2="14.7783"
+          y2="7.41936"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#89D996" />
+          <stop offset="1" stopColor="#52C587" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1141_8272"
+          x1="21"
+          y1="10.5"
+          x2="4.03066"
+          y2="2.22971"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#89D996" />
+          <stop offset="1" stopColor="#52C587" />
+        </linearGradient>
+      </defs>
+    </svg>
+  ),
+  pending: () => (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.3401 9.63397C15.0068 10.0189 15.0068 10.9811 14.3401 11.366L9.84009 13.9641C9.17342 14.349 8.34009 13.8679 8.34009 13.0981L8.34009 7.90192C8.34009 7.13212 9.17342 6.651 9.84009 7.0359L14.3401 9.63397Z"
+        fill="url(#paint0_linear_1141_8272)"
+      />
+      <rect
+        x="1"
+        y="1"
+        width="19"
+        height="19"
+        rx="5"
+        stroke="url(#paint1_linear_1141_8272)"
+        strokeWidth="2"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1141_8272"
+          x1="10.8401"
+          y1="15.5"
+          x2="14.7783"
+          y2="7.41936"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#89D996" />
+          <stop offset="1" stopColor="#52C587" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1141_8272"
+          x1="21"
+          y1="10.5"
+          x2="4.03066"
+          y2="2.22971"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#89D996" />
+          <stop offset="1" stopColor="#52C587" />
+        </linearGradient>
+      </defs>
+    </svg>
+  ),
+};

package/src/components/BotsTable/stories/BotsTable/components/Actions/index.ts

@@ -0,0 +1,6 @@
+export * from './ActionIcon';
+export * from './ActionItem';
+export * from './ActionMore';
+export * from './ActionRun';
+export * from './Actions';
+export * from './ActionsWrapper';

package/src/components/BotsTable/stories/BotsTable/components/Exchange/Exchange.tsx

@@ -0,0 +1,26 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+import { exchangeIcons } from './consts';
+import { ExchangeProps } from './types';
+
+export const Exchange = ({ exchangeType, showTitle = true }: ExchangeProps) => {
+  const { icon: ExchangeIcon, title } = exchangeIcons[exchangeType];
+  if (!showTitle) {
+    return <ExchangeIcon />;
+  }
+  return (
+    <Wrapper>
+      <div
+        css={{
+          display: 'flex',
+          width: 25,
+          height: 25,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginRight: 12,
+        }}>
+        <ExchangeIcon />
+      </div>
+      {title}
+    </Wrapper>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/Exchange/consts.tsx

@@ -0,0 +1,157 @@
+export const exchangeIcons = {
+  binance: {
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none">
+        <path
+          d="M13.2202 25.5C20.1238 25.5 25.7202 19.9036 25.7202 13C25.7202 6.09644 20.1238 0.5 13.2202 0.5C6.31666 0.5 0.720215 6.09644 0.720215 13C0.720215 19.9036 6.31666 25.5 13.2202 25.5Z"
+          fill="#F1D33D"
+        />
+        <path
+          d="M12.873 24.8056C16.0961 24.8056 19.1872 23.5252 21.4663 21.2461C23.7454 18.9671 25.0258 15.8759 25.0258 12.6528H0.720215C0.720215 15.8759 2.00059 18.9671 4.27968 21.2461C5.40817 22.3746 6.74788 23.2698 8.22233 23.8805C9.69677 24.4913 11.2771 24.8056 12.873 24.8056Z"
+          fill="#E7A324"
+        />
+        <path
+          d="M12.8728 24.0123C19.0598 24.0123 24.0753 18.9968 24.0753 12.8099C24.0753 6.62292 19.0598 1.60742 12.8728 1.60742C6.68591 1.60742 1.67041 6.62292 1.67041 12.8099C1.67041 18.9968 6.68591 24.0123 12.8728 24.0123Z"
+          fill="url(#paint0_linear_910_8268)"
+        />
+        <path
+          d="M12.8727 24.0085C9.91779 24.0079 7.08283 22.8397 4.98545 20.7582C2.88806 18.6768 1.69821 15.8508 1.67513 12.896V12.9896C1.65246 15.9838 2.81889 18.8646 4.91831 20.9995C7.01773 23.1345 9.87856 24.3491 12.8727 24.3767C15.8675 24.3504 18.7294 23.1365 20.8298 21.0017C22.9302 18.8668 24.0975 15.9856 24.0751 12.9908C24.0751 12.9592 24.0751 12.9288 24.0751 12.8972C24.0517 15.8527 22.8611 18.679 20.7627 20.7604C18.6643 22.8417 15.8282 24.0092 12.8727 24.0085Z"
+          fill="#D38E26"
+        />
+        <path
+          d="M12.8728 21.8887C17.9738 21.8887 22.1089 17.7536 22.1089 12.6526C22.1089 7.55165 17.9738 3.4165 12.8728 3.4165C7.77187 3.4165 3.63672 7.55165 3.63672 12.6526C3.63672 17.7536 7.77187 21.8887 12.8728 21.8887Z"
+          fill="#F9EE60"
+        />
+        <path
+          d="M12.8728 3.4165C10.4233 3.4165 8.07402 4.38959 6.34191 6.1217C4.60981 7.85381 3.63672 10.203 3.63672 12.6526H22.1089C22.1089 10.203 21.1359 7.85381 19.4037 6.1217C17.6716 4.38959 15.3224 3.4165 12.8728 3.4165Z"
+          fill="#E3A22C"
+        />
+        <path
+          d="M12.8732 21.1599C17.5714 21.1599 21.3801 17.3512 21.3801 12.6529C21.3801 7.95468 17.5714 4.146 12.8732 4.146C8.1749 4.146 4.36621 7.95468 4.36621 12.6529C4.36621 17.3512 8.1749 21.1599 12.8732 21.1599Z"
+          fill="url(#paint1_linear_910_8268)"
+        />
+        <path
+          d="M8.19153 11.3343L6.79639 12.6662L8.19153 14.003L9.59153 12.6674L8.19153 11.3343ZM12.8594 15.7919L10.5334 13.5704L9.11635 14.8744L12.8594 18.4473L16.6025 14.8744L15.1818 13.5704L12.8594 15.7919ZM12.8594 9.51378L15.1818 11.7353L16.5976 10.4313L12.8545 6.8584L9.11149 10.4313L10.5285 11.7353L12.8594 9.51378ZM17.554 11.3464L16.154 12.6771L17.5492 14.014L18.9492 12.6784L17.554 11.3464ZM12.8922 13.9896L14.2874 12.6528L12.8922 11.316L11.4971 12.6528L12.8922 13.9896Z"
+          fill="#EEF1F7"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_910_8268"
+            x1="12.8728"
+            y1="1.51263"
+            x2="12.8728"
+            y2="24.0451"
+            gradientUnits="userSpaceOnUse">
+            <stop stopColor="#FAEE5E" />
+            <stop offset="1" stopColor="#EDC12D" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_910_8268"
+            x1="12.8732"
+            y1="4.05607"
+            x2="12.8732"
+            y2="21.1016"
+            gradientUnits="userSpaceOnUse">
+            <stop stopColor="#EFC938" />
+            <stop offset="1" stopColor="#F1B62E" />
+          </linearGradient>
+        </defs>
+      </svg>
+    ),
+    title: 'Binance',
+  },
+  kraken: {
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.15699 7.72909C6.26079 7.90375 6.31578 8.10118 6.31578 8.29992L6.31579 8.87744C6.31579 8.96563 6.24858 9.03943 6.16086 9.04794C6.09814 9.05401 4.61188 9.18268 3.99841 7.93707C3.78228 7.49761 3.75725 7.02809 3.76231 6.5861L3.76233 6.57135C3.76233 6.21246 3.60976 5.86312 3.3436 5.61283C3.06054 5.34674 2.63736 5.2865 2.29034 5.46293L2.20654 5.50578L2.6674 5.93868C3.04924 6.29716 3.26451 6.79923 3.25887 7.31608C3.25325 7.8276 3.3347 8.30521 3.49468 8.6972C3.87208 9.6244 5.1965 10.0949 5.20958 10.0995C5.27773 10.1231 5.32377 10.1867 5.32466 10.2586C5.3259 10.3305 5.28184 10.3955 5.21465 10.4213C5.21022 10.423 4.72845 10.6111 4.25594 11.0082C3.63863 11.5272 3.32548 12.1428 3.32548 12.8376C3.3255 13.5679 3.67547 14.3805 4.36685 15.2553C4.54321 14.9798 4.55865 14.6234 4.39302 14.3333C4.1385 13.8882 4.08198 13.405 4.22947 12.936C4.50548 12.0594 5.4787 11.221 7.12283 10.444C7.18981 10.4124 7.26885 10.4272 7.31999 10.4804C7.37085 10.5337 7.38215 10.6136 7.34765 10.6788C7.34262 10.6884 6.83261 11.675 6.83261 12.9974C6.83265 13.9504 7.09191 14.8392 7.60368 15.6425C7.76461 15.3948 7.81511 15.0843 7.73423 14.7907C7.58529 14.25 7.57989 13.6443 7.71817 12.9905C7.90792 12.0948 8.36613 11.1365 9.081 10.1426C9.11312 10.0978 9.16485 10.0713 9.22018 10.0713C9.27518 10.0713 9.32692 10.0978 9.35903 10.1426C10.0739 11.1365 10.5324 12.0947 10.7219 12.9906C10.8601 13.6441 10.8548 14.2499 10.7058 14.7908C10.6806 14.8829 10.6677 14.9778 10.6677 15.0723C10.6678 15.2786 10.7266 15.4754 10.8363 15.643C11.4751 14.642 11.7192 13.5205 11.5625 12.3061C11.4379 11.3419 11.096 10.6853 11.0924 10.6788C11.0582 10.6136 11.0692 10.5337 11.1203 10.4804C11.1712 10.4272 11.2506 10.4125 11.3172 10.444C12.9614 11.221 13.9352 12.0596 14.2108 12.9363C14.3587 13.4052 14.3021 13.8883 14.0476 14.3334C13.9715 14.4666 13.931 14.6179 13.931 14.7708C13.931 14.945 13.9807 15.112 14.0732 15.2556C14.9442 14.1538 15.2716 13.1581 15.0462 12.2933C14.7111 11.0072 13.24 10.4273 13.2251 10.4216C13.1582 10.3957 13.1142 10.3307 13.1154 10.2588C13.1166 10.1868 13.1626 10.1234 13.2304 10.0998C13.2438 10.0952 14.5683 9.62447 14.9457 8.69766C15.1053 8.30574 15.1871 7.82817 15.1815 7.31637C15.1755 6.79959 15.3911 6.29753 15.7729 5.93903L16.2339 5.5058L16.1494 5.46285C16.0206 5.39702 15.8758 5.36223 15.7304 5.36223C15.4937 5.36222 15.2689 5.45127 15.0967 5.61291C14.8267 5.86671 14.6741 6.2214 14.6783 6.5861C14.6834 7.02808 14.6581 7.49773 14.4422 7.93701C13.8291 9.18236 12.3431 9.05405 12.2801 9.04796C12.1921 9.03944 12.1251 8.96568 12.1251 8.87745L12.1252 8.29925C12.1252 8.09933 12.1793 7.90302 12.2818 7.73131C12.6149 7.17154 12.7871 6.52844 12.779 5.87149C12.7553 3.92639 11.1617 2.35645 9.21987 2.35645C9.20862 2.35642 9.19758 2.35652 9.18628 2.35661C7.2424 2.37468 5.66101 3.97134 5.66101 5.91572C5.66106 6.55546 5.83255 7.18254 6.15699 7.72909ZM10.5262 7.11076C10.4816 7.11076 10.4373 7.09366 10.4037 7.05943C10.3377 6.99187 10.3386 6.88342 10.4061 6.81722C11.1462 6.09209 11.1545 4.83239 11.1545 4.81976C11.1545 4.72511 11.2312 4.64847 11.3258 4.64847C11.4204 4.64843 11.4971 4.72516 11.4971 4.81976C11.4971 4.87719 11.4876 6.23712 10.646 7.06186C10.6128 7.0945 10.5693 7.11081 10.5262 7.11076ZM7.91415 7.11076C7.87071 7.11082 7.8276 7.09454 7.7943 7.06186C6.95248 6.23708 6.94293 4.87723 6.94293 4.81975C6.94299 4.72511 7.01966 4.64847 7.11421 4.64847C7.20881 4.64843 7.28549 4.72514 7.28549 4.8197C7.28555 4.83792 7.29829 6.0961 8.03397 6.81722C8.10148 6.88341 8.10266 6.99187 8.03635 7.05943C8.0028 7.09363 7.95844 7.11081 7.91415 7.11076ZM9.22018 6.15083C9.12536 6.15083 9.04888 6.0742 9.04888 5.9796L9.04889 3.65988C9.04889 3.56528 9.12531 3.48864 9.22017 3.48864C9.31478 3.48859 9.39145 3.56532 9.39145 3.65991L9.39146 5.97955C9.39146 6.07416 9.31473 6.15085 9.22018 6.15083Z"
+          fill="#7049B9"
+        />
+      </svg>
+    ),
+    title: 'Kraken',
+  },
+  bittrex: {
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="42"
+        height="39"
+        viewBox="0 0 42 39"
+        fill="none">
+        <g filter="url(#filter0_d_910_8539)">
+          <circle cx="21.2202" cy="17" r="12.5" fill="white" />
+        </g>
+        <rect
+          x="18.8457"
+          y="10.25"
+          width="9.125"
+          height="9.46774"
+          rx="1.25"
+          stroke="#1B7BD5"
+          strokeWidth="1.5"
+        />
+        <rect
+          x="15.3037"
+          y="13.4492"
+          width="9.125"
+          height="9.46774"
+          rx="1.25"
+          stroke="#1B7BD5"
+          strokeWidth="1.5"
+        />
+        <defs>
+          <filter
+            id="filter0_d_910_8539"
+            x="0.720215"
+            y="0.5"
+            width="41"
+            height="41"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB">
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="4" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_910_8539"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_910_8539"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    ),
+    title: 'Bittrex',
+  },
+};
+
+export type ExchangeIconsType = typeof exchangeIcons;

package/src/components/BotsTable/stories/BotsTable/components/Exchange/index.ts

@@ -0,0 +1 @@
+export { Exchange } from './Exchange';

package/src/components/BotsTable/stories/BotsTable/components/Exchange/types.ts

@@ -0,0 +1,6 @@
+export type ExchangeType = 'binance' | 'kraken' | 'bittrex';
+
+export interface ExchangeProps {
+  exchangeType: ExchangeType;
+  showTitle?: boolean;
+}

package/src/components/BotsTable/stories/BotsTable/components/PNL.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from '@emotion/react';
+import { Icon, Wrapper } from '@ssa-ui-kit/core';
+import * as Types from '@components/BotsTable/types';
+
+export const PNL = ({ amount, currency, isIncreasing }: Types.PNL) => {
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <div
+        css={{
+          width: 75,
+          textAlign: 'right',
+          marginRight: 5,
+        }}>
+        {isIncreasing ? '+' : '-'}
+        {amount}
+        &nbsp;
+        {currency}
+      </div>
+      <Icon
+        name={`${isIncreasing ? 'arrow-up' : 'arrow-down'}`}
+        size={13}
+        color={isIncreasing ? theme.colors.green : theme.colors.pink}
+      />
+    </Wrapper>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/ROI.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '@emotion/react';
+import { Icon, Wrapper } from '@ssa-ui-kit/core';
+import * as Types from '@components/BotsTable/types';
+
+export const ROI = ({ amount, isIncreasing }: Types.ROI) => {
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <div
+        css={{
+          width: 35,
+          textAlign: 'right',
+          marginRight: 5,
+        }}>
+        {isIncreasing ? '+' : '-'}
+        {amount}%
+      </div>
+      <Icon
+        name={`${isIncreasing ? 'arrow-up' : 'arrow-down'}`}
+        size={13}
+        color={isIncreasing ? theme.colors.green : theme.colors.pink}
+      />
+    </Wrapper>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/TableTag.tsx

@@ -0,0 +1,22 @@
+import { Tag } from '@ssa-ui-kit/core';
+
+export const TableTag = ({
+  children,
+  color,
+}: {
+  children: string;
+  color: string;
+}) => (
+  <Tag
+    color={color}
+    css={{
+      borderRadius: 25,
+      border: 'none',
+      boxShadow: 'none',
+      height: 22,
+      padding: '1px 12px',
+      fontSize: 14,
+    }}>
+    {children}
+  </Tag>
+);

package/src/components/BotsTable/stories/BotsTable/components/Trade/Trade.tsx

@@ -0,0 +1,8 @@
+import { TradeProps } from './types';
+import { tradeStatuses } from './consts';
+import { TableTag } from '../TableTag';
+
+export const Trade = ({ tradeType }: TradeProps) => {
+  const { color, title } = tradeStatuses[tradeType];
+  return <TableTag color={color}>{title}</TableTag>;
+};

package/src/components/BotsTable/stories/BotsTable/components/Trade/consts.ts

@@ -0,0 +1,14 @@
+export const tradeStatuses = {
+  trade: {
+    title: 'Trade',
+    color: 'green',
+  },
+  liquidation: {
+    title: 'Liquidation',
+    color: 'pink',
+  },
+  pending: {
+    title: 'Pending',
+    color: 'yellowWarm',
+  },
+};

package/src/components/BotsTable/stories/BotsTable/components/Trade/index.ts

@@ -0,0 +1 @@
+export { Trade } from './Trade';

package/src/components/BotsTable/stories/BotsTable/components/Trade/types.ts

@@ -0,0 +1,5 @@
+export type TradeType = 'trade' | 'liquidation' | 'pending';
+
+export interface TradeProps {
+  tradeType: TradeType;
+}

package/src/components/BotsTable/stories/BotsTable/components/index.ts

@@ -0,0 +1,6 @@
+export * from './Exchange';
+export * from './Trade';
+export * from './PNL';
+export * from './ROI';
+export * from './TableTag';
+export * from './Actions';

package/src/components/BotsTable/stories/BotsTable/index.ts

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

package/src/components/BotsTable/stories/BotsTable/mockData.ts

@@ -0,0 +1,84 @@
+import { BotsTableItem } from '@components/BotsTable/types';
+
+const commonStructure: BotsTableItem = {
+  id: 1,
+  name: 'Bot name 1',
+  creationDate: '27.07.23',
+  exchange: 'binance',
+  status: 'trade',
+  pair: 'ETH/USD',
+  pnl: {
+    amount: 300,
+    currency: 'USD',
+    isIncreasing: true,
+  },
+  roi: {
+    amount: 25,
+    isIncreasing: true,
+  },
+  isDisabled: false,
+};
+
+const binanceData = new Array(5).fill(null).map((value, index) => ({
+  ...commonStructure,
+  id: index + 1,
+  name: `Bot name ${index + 1}`,
+}));
+
+export const botsTableData: BotsTableItem[] = [
+  ...binanceData,
+  {
+    ...commonStructure,
+    id: 6,
+    name: 'Bot name 6',
+    exchange: 'kraken',
+    status: 'pending',
+    pnl: {
+      amount: 100,
+      currency: 'USD',
+      isIncreasing: false,
+    },
+    roi: {
+      amount: 15,
+      isIncreasing: false,
+    },
+  },
+  {
+    ...commonStructure,
+    id: 7,
+    name: 'Bot name 7',
+    exchange: 'kraken',
+    status: 'liquidation',
+  },
+  {
+    ...commonStructure,
+    id: 8,
+    name: 'Bot name 8',
+    exchange: 'bittrex',
+    status: 'liquidation',
+    pnl: {
+      amount: 70,
+      currency: 'USD',
+      isIncreasing: false,
+    },
+    roi: {
+      amount: 10,
+      isIncreasing: false,
+    },
+  },
+  {
+    ...commonStructure,
+    id: 9,
+    name: 'Bot name 9',
+    exchange: 'kraken',
+    status: 'liquidation',
+  },
+  {
+    ...commonStructure,
+    id: 10,
+    name: 'Bot name 9',
+    exchange: 'kraken',
+    status: 'liquidation',
+    isDisabled: true,
+  },
+];

package/src/components/BotsTable/stories/BotsTable.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from '@ssa-ui-kit/core';
+import { BotsTableStory } from './BotsTable/StoryComponent';
+import { NoControlOrdersStory } from './NoControlOrders/StoryComponent';
+
+export default {
+  title: 'Widgets/BotsTable',
+  component: Table,
+} as Meta<typeof Table>;
+
+export const BotsTable: StoryObj<typeof Table> = () => <BotsTableStory />;
+
+BotsTable.parameters = {
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#D0D1D6',
+      },
+    ],
+  },
+};
+
+export const NoControlOrders: StoryObj<typeof Table> = () => (
+  <NoControlOrdersStory />
+);
+
+NoControlOrders.parameters = {
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#D0D1D6',
+      },
+    ],
+  },
+};

package/src/components/BotsTable/stories/NoControlOrders/StoryComponent.tsx

@@ -0,0 +1,35 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+import { noControlOrdersData } from './mockData';
+import { TableList, TableRow } from './components';
+
+export const NoControlOrdersStory = () => {
+  const columns = [
+    'Exchange',
+    'Account',
+    'Bot Name',
+    'Bot Run',
+    'Order Id',
+    'Status',
+    'Reason',
+    'Pair',
+    'Order Size',
+    'Order Type',
+    '',
+  ];
+
+  return (
+    <Wrapper
+      css={{
+        width: '100%',
+        height: '100%',
+        overflowX: 'auto',
+        whiteSpace: 'nowrap',
+      }}>
+      <TableList columns={columns}>
+        {noControlOrdersData.map((item) => (
+          <TableRow key={item.id} {...item} />
+        ))}
+      </TableList>
+    </Wrapper>
+  );
+};