Merge branch 'dev' into feat/graph-cid-resolving

Author: happylolonly

public/images/cyb-map.png

@@ -1,22 +1,22 @@
 import { useGetBalanceBostrom } from 'src/containers/sigma/hooks';
-import SideButtonLink from '../sideButtonLink/SideButtonLink';
-import { routes } from 'src/routes';
 import IconsNumber from '../IconsNumber/IconsNumber';
 
-function HydrogenBalance({ address, isVertical }) {
+type Props = {
+  address?: string;
+  isVertical?: boolean;
+};
+
+function HydrogenBalance({ address, isVertical }: Props) {
   const { totalAmountInLiquid } = useGetBalanceBostrom(address);
 
   return (
-    <SideButtonLink
-      to={`${routes.neuron.getLink(address)}/sigma`}
-      buttonType="hydrogen"
-    >
+    <span>
       <IconsNumber
         value={totalAmountInLiquid.currentCap}
         type="hydrogen"
         isVertical={isVertical}
       />
-    </SideButtonLink>
+    </span>
   );
 }
 

src/components/HydrogenBalance/HydrogenBalance.tsx

@@ -4,7 +4,7 @@
   justify-content: center;
   width: 100%;
   position: fixed;
-  bottom: 20px;
+  bottom: 0px;
   left: 0;
   padding: 10px 0;
   background: linear-gradient(0deg,

src/components/actionBar/styles.module.scss

@@ -0,0 +1,55 @@
+.circle {
+  position: fixed;
+  bottom: 0px;
+  width: 220px;
+  height: 220px;
+  display: inline-flex;
+  border-radius: 50%;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.menu {
+  --diameter: 140px;
+  --i: 23deg; //elements angle
+  --delta: 0deg; //second menu layer angle
+  list-style-type: none;
+  padding: 0;
+  display: grid;
+  margin: auto;
+}
+
+.menu li {
+  grid-area: 1/1;
+  transform: rotate(calc(var(--rotation-angle) + var(--delta)))
+    translateX(var(--diameter))
+    rotate(calc(-1 * (var(--rotation-angle) + var(--delta))));
+}
+
+.menu li:nth-child(1) {
+  --rotation-angle: calc(-5 * var(--i));
+}
+
+.menu li:nth-child(2) {
+  --rotation-angle: calc(-4 * var(--i));
+}
+
+.menu li:nth-child(3) {
+  --rotation-angle: calc(-3 * var(--i));
+}
+
+.menu li:nth-child(4) {
+  --rotation-angle: calc(-2 * var(--i));
+}
+
+.menu li:nth-child(5) {
+  --rotation-angle: calc(-1 * var(--i));
+}
+
+.menu li:nth-child(6) {
+  --rotation-angle: calc(0 * var(--i));
+}
+
+.menu li:nth-child(7) {
+  --rotation-angle: calc(1 * var(--i));
+}

src/components/appMenu/CircularMenu.module.scss

@@ -0,0 +1,67 @@
+import getMenuItems from 'src/utils/appsMenu';
+import styles from './CircularMenu.module.scss';
+import _ from 'lodash';
+import CircularMenuItem from './CircularMenuItem';
+import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
+
+declare module 'react' {
+  interface CSSProperties {
+    '--diameter'?: string;
+    '--delta'?: string;
+    '--i'?: string;
+  }
+}
+
+function CircularMenu({ circleSize }) {
+  const chunkSize = 7;
+  const linkChunks = _.chunk(getMenuItems(), chunkSize);
+
+  const { isActiveItem, activeItem } = useActiveMenuItem(getMenuItems());
+
+  const calculateDiameter = (index, circleSize) => {
+    const menuCircleDiameter = circleSize / 2 + 45 * (index + 1) - 10;
+    const nextLevelMenuAngle = index === 1 ? -28 : 0; // decreases the angle of second menu layer
+    const menuItemsAngle = index === 1 ? 16 : 23; // angle in which menu items spread around the brain
+    return { menuCircleDiameter, nextLevelMenuAngle, menuItemsAngle };
+  };
+
+  return (
+    <div>
+      {linkChunks.map((chunk, index) => {
+        const { menuCircleDiameter, nextLevelMenuAngle, menuItemsAngle } =
+          calculateDiameter(index, circleSize);
+        return (
+          <div
+            key={index}
+            className={styles.circle}
+            style={{ width: circleSize, height: circleSize }}
+          >
+            <div
+              className={styles.menu}
+              style={{
+                '--diameter': `${menuCircleDiameter}px`,
+                '--delta': `${nextLevelMenuAngle}deg`,
+                '--i': `${menuItemsAngle}deg`,
+              }}
+            >
+              {chunk.map((item, index) => {
+                const isSelected = activeItem?.name === item.name;
+                return (
+                  <li key={index}>
+                    <CircularMenuItem
+                      item={item}
+                      onClick={() => isActiveItem(item)}
+                      selected={isSelected}
+                    />
+                  </li>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default CircularMenu;

src/components/appMenu/CircularMenu.tsx

@@ -1,25 +1,26 @@
-@import '../../style/mixins.scss';
+@import '../../../style/mixins.scss';
 
-.menu_item {
+.menuItem {
   box-shadow: 0px 0px 13px #ffffff54;
   opacity: 1;
   background-color: #101010;
   border-radius: 50%;
-  width: var(--button-size, 38px);
-  height: var(--button-size, 38px);
+  width: 38px;
+  height: 38px;
   justify-content: center;
   align-items: center;
   display: flex;
+  pointer-events: auto;
 }
 
-.menu_item.active {
+.menuItem.active {
   border: 1px solid #ffffff6b;
   box-shadow: 0px 0px 8px #ffffff98 inset, 0px 0px 13px #ffffff98;
   width: 100%;
   height: 100%;
 }
 
-.menu_item:hover {
+.menuItem:hover {
   border: 1px solid #4ed6ae;
   box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
 }
@@ -30,8 +31,8 @@
 }
 
 .icon {
-  width: var(--icon-size, 30px);
-  height: var(--icon-size, 30px);
+  width: 30px;
+  height: 30px;
   object-fit: fill;
   border-radius: 50%;
   justify-content: center;
@@ -42,8 +43,7 @@
 .external {
   display: block;
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: 5px;
   transform: translate(50%, 50%);
   width: 20px;
   height: 20px;

src/components/appMenu/CircularMenu/CircularMenu.module.scss

@@ -14,7 +14,7 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
   const isExternal = item.to.startsWith('http');
 
   return (
-    <div className={cx(styles.menu_item, { [styles.active]: selected })}>
+    <div className={cx(styles.menuItem, { [styles.active]: selected })}>
       <AdviserHoverWrapper adviserContent={item.name}>
         <NavLink
           to={item.to}
@@ -26,7 +26,6 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
           {isExternal && <span className={styles.external}></span>}
         </NavLink>
       </AdviserHoverWrapper>
-
     </div>
   );
 }