Fix/fixes dev redisign (#1189)

src/components/IconsNumber/IconsNumber.module.scss

@@ -0,0 +1,12 @@
+.icon {
+  display: flex;
+  flex-direction: row;
+
+  .vertical {
+    flex-direction: column;
+  }
+}
+
+.tooltipWrapper {
+  white-space: nowrap;
+}

src/components/IconsNumber/IconsNumber.tsx

@@ -1,7 +1,11 @@
 import BigNumber from 'bignumber.js';
 import React from 'react';
+import { formatNumber } from 'src/utils/utils';
+import getPrefixNumber from 'src/utils/getPrefixNumber';
+import cx from 'classnames';
 import hydrogen from '../../image/hydrogen.svg';
 import Tooltip from '../tooltip/tooltip';
+import styles from './IconsNumber.module.scss';
 
 enum TypesEnum {
   'karma' = 'karma',
@@ -30,44 +34,22 @@ const icons = {
   [TypesEnum.pussy]: '🟣',
 };
 
-// TODO: refactor
-const PREFIXES = [
-  {
-    prefix: 7,
-    power: 10 ** 21,
-  },
-  {
-    prefix: 6,
-    power: 10 ** 18,
-  },
-  {
-    prefix: 5,
-    power: 10 ** 15,
-  },
-  {
-    prefix: 4,
-    power: 10 ** 12,
-  },
-  {
-    prefix: 3,
-    power: 10 ** 9,
-  },
-  {
-    prefix: 2,
-    power: 10 ** 6,
-  },
-  {
-    prefix: 1,
-    power: 10 ** 3,
-  },
-];
+const POWER = new BigNumber(1000);
 
-export default function IconsNumber({ value, type, isVertical }) {
-  const { prefix = 1, power = 1 } =
-    PREFIXES.find((powerItem) => value >= powerItem.power) || {};
+type Props = {
+  type: keyof typeof TypesEnum;
+  value: string | number;
+  isVertical?: boolean;
+};
+
+export default function IconsNumber({ value, type, isVertical }: Props) {
+  const prefix = getPrefixNumber(
+    POWER.toNumber(),
+    new BigNumber(value || 0).toNumber()
+  );
 
   const number = new BigNumber(value)
-    .dividedBy(power)
+    .dividedBy(POWER.pow(prefix))
     .dp(0, BigNumber.ROUND_FLOOR)
     .toNumber();
 
@@ -84,18 +66,16 @@ export default function IconsNumber({ value, type, isVertical }) {
     <>
       {number}{' '}
       <Tooltip
-        contentStyle={{
-          display: 'flex',
-          flexDirection: isVertical ? 'column' : 'row',
-        }}
         tooltip={
-          <span style={{ whiteSpace: 'nowrap' }}>
-            {value?.toLocaleString()?.replaceAll(',', ' ')}
+          <span className={styles.tooltipWrapper}>
+            {formatNumber(value?.toLocaleString()?.replaceAll(',', ' ')) || 0}
             {icons[type]}
           </span>
         }
       >
-        {i}
+        <div className={cx(styles.icon, { [styles.vertical]: isVertical })}>
+          {i}
+        </div>
       </Tooltip>
     </>
   );

src/components/appMenu/CircularMenu.module.scss

@@ -1,5 +1,3 @@
-@import '../../style/mixins.scss';
-
 .circle {
   position: fixed;
   bottom: 0px;
@@ -51,43 +49,4 @@
 
 .menu li:nth-child(7) {
   --r: calc(1 * var(--i));
-}
-
-.menu_item {
-  box-shadow: 0px 0px 13px #ffffff54;
-  opacity: 1;
-  background-color: #101010;
-  border-radius: 50%;
-  width: 38px;
-  height: 38px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.menu_item.active {
-  border: 1px solid #ffffff6b;
-  box-shadow: 0px 0px 8px #ffffff4d inset, 0px 0px 13px #ffffff4d;
-  width: 100%;
-  height: 100%;
-}
-
-
-.icon {
-  width: 30px;
-  height: 30px;
-  object-fit: fill;
-  border-radius: 50%;
-}
-
-.external {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  transform: translate(50%, 50%);
-  width: 20px;
-  height: 20px;
-
-  @include withShareIcon;
 }

src/components/appMenu/CircularMenuItem.module.scss

@@ -0,0 +1,45 @@
+@import '../../style/mixins.scss';
+
+.menu_item {
+  box-shadow: 0px 0px 13px #ffffff54;
+  opacity: 1;
+  background-color: #101010;
+  border-radius: 50%;
+  width: 38px;
+  height: 38px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.menu_item.active {
+  border: 1px solid #ffffff6b;
+  box-shadow: 0px 0px 8px #ffffff4d inset, 0px 0px 13px #ffffff4d;
+  width: 100%;
+  height: 100%;
+}
+
+.itemContainer {
+  position: inherit;
+  display: flex;
+}
+
+
+.icon {
+  width: 30px;
+  height: 30px;
+  object-fit: fill;
+  border-radius: 50%;
+}
+
+.external {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+  width: 20px;
+  height: 20px;
+
+  @include withShareIcon;
+}

src/components/appMenu/CircularMenuItem.tsx

@@ -1,30 +1,30 @@
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
-import styles from './CircularMenu.module.scss';
 import { MenuItem } from 'src/types/menu';
+import styles from './CircularMenuItem.module.scss';
 
 interface Props {
   item: MenuItem;
   onClick: () => void;
   selected: boolean;
 }
 
-const CircularMenuItem = ({ item, onClick, selected }: Props) => {
+function CircularMenuItem({ item, onClick, selected }: Props) {
   const isExternal = item.to.startsWith('http');
 
   return (
     <div className={cx(styles.menu_item, { [styles.active]: selected })}>
       <NavLink
         to={item.to}
         onClick={onClick}
-        style={{ position: 'inherit' }}
+        className={styles.itemContainer}
         {...(isExternal && { target: '_blank', rel: 'noreferrer noopener' })}
       >
         <img src={item.icon} className={styles.icon} alt="img" />
-        {isExternal && <span className={styles.external}></span>}
+        {isExternal && <span className={styles.external} />}
       </NavLink>
     </div>
   );
-};
+}
 
 export default CircularMenuItem;

src/components/appMenu/SubMenu.module.scss

@@ -1,7 +1,7 @@
 $icon-size: 30px;
 
 .subMenu {
-  position: absolute;
+  // position: absolute;
   display: flex;
   flex-direction: column;
   gap: 5px;

src/containers/application/Header/CurrentApp/CurrentApp.module.scss

@@ -203,6 +203,6 @@
   display: flex;
   flex-direction: column;
   background: #0000008c;
-  width: 250px;
+  width: 170px;
   backdrop-filter: blur(7px);
 }

src/containers/energy/component/actionBar.tsx

@@ -236,7 +236,7 @@ function ActionBar({ selected, updateFnc, addressActive, selectedRoute }) {
     );
   }
 
-  if (stage === STAGE_INIT && selected === 'myEnegy') {
+  if (stage === STAGE_INIT && !selected) {
     return (
       <ActionBarCenter
         button={{

src/containers/energy/component/statistics.jsx → src/containers/energy/component/statistics.tsx

@@ -3,10 +3,25 @@ import { useNavigate } from 'react-router-dom';
 import Card from '../ui/card';
 import { formatNumber } from '../../../utils/utils';
 
-function Statistics({ myEnegy = 0, income = 0, outcome = 0, active }) {
+type Props = {
+  myEnergy: number;
+  income: number;
+  outcome: number;
+  active?: string;
+};
+
+function Statistics({ myEnergy = 0, income = 0, outcome = 0, active }: Props) {
   const navigate = useNavigate();
 
-  const freeEnergy = myEnegy + income - outcome;
+  const freeEnergy = myEnergy + income - outcome;
+
+  const onClickNavigate = (to?: string) => {
+    if (!active) {
+      navigate(`./${to || ''}`);
+    } else {
+      navigate(`../${to || ''}`, { relative: 'path' });
+    }
+  };
 
   return (
     <Pane
@@ -18,10 +33,10 @@ function Statistics({ myEnegy = 0, income = 0, outcome = 0, active }) {
       flex-irection="row"
     >
       <Card
-        active={active === 'myEnegy'}
+        active={!active}
         title="Enegy"
-        value={`${formatNumber(myEnegy)} W`}
-        onClick={() => navigate('./')}
+        value={`${formatNumber(myEnergy)} W`}
+        onClick={() => onClickNavigate()}
       />
       <Pane marginX={5} fontSize="20px">
         +
@@ -30,7 +45,7 @@ function Statistics({ myEnegy = 0, income = 0, outcome = 0, active }) {
         active={active === 'income'}
         title="Income"
         value={`${formatNumber(income)} W`}
-        onClick={() => navigate('./income')}
+        onClick={() => onClickNavigate('income')}
       />
       <Pane marginX={5} fontSize="20px">
         -
@@ -39,7 +54,7 @@ function Statistics({ myEnegy = 0, income = 0, outcome = 0, active }) {
         active={active === 'outcome'}
         title="Outcome"
         value={`${formatNumber(outcome)} W`}
-        onClick={() => navigate('./outcome')}
+        onClick={() => onClickNavigate('outcome')}
       />
       <Pane marginX={5} fontSize="20px">
         =