fix/navigation (#1211)

src/components/appMenu/CircularMenu/CircularMenu.tsx

@@ -1,4 +1,4 @@
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 import styles from './CircularMenu.module.scss';
 import _ from 'lodash';
 import CircularMenuItem from './CircularMenuItem';

src/components/appMenu/MobileMenu/MobileMenu.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 import { NavLink } from 'react-router-dom';
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 import styles from './MobileMenu.module.scss';
 import cx from 'classnames';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';

src/components/appMenu/SubMenu/SubMenu.module.scss

@@ -1,4 +1,4 @@
-$icon-size: 30px;
+$icon-size: 25px;
 
 .subMenu {
   // position: absolute;
@@ -20,8 +20,8 @@ $icon-size: 30px;
 
 .navLinkItem {
   display: grid;
-  grid-template-columns: 30px 1fr;
-  gap: 10px;
+  grid-template-columns: 25px 1fr;
+  gap: 7px;
   align-items: center;
   padding-left: 20px;
   font-size: 18px;

src/components/appMenu/SubMenu/SubMenu.tsx

@@ -1,4 +1,4 @@
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { MenuItem } from 'src/types/menu';
 import cx from 'classnames';
 import { useMemo } from 'react';
@@ -17,6 +17,7 @@ function SubMenu({ selectedApp, closeMenu }: Props) {
             {
               name: 'main',
               to: selectedApp.to,
+              icon: selectedApp.icon,
             },
             ...selectedApp.subItems,
           ]

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

@@ -59,6 +59,7 @@
   width: 60px;
   height: 60px;
   position: relative;
+  object-fit: contain;
 }
 
 .btnContainerText {

src/containers/application/Header/CurrentApp/ui/AppName/AppName.tsx

@@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom';
 import { CHAIN_ID } from 'src/constants/config';
 import { PATTERN_CYBER } from 'src/constants/patterns';
 import { routes } from 'src/routes';
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 import findApp from 'src/utils/findApp';
 import { Helmet } from 'react-helmet';
 import styles from './AppName.module.scss';

src/containers/application/Header/CurrentApp/utils/findSelectAppByUrl.ts

@@ -11,14 +11,19 @@ const findSelectAppByUrl = (
 ) => {
   let pathname = url;
   const isRobot = url.includes('@') || url.includes('neuron/');
+  const isOracle = url.includes('oracle');
 
-  const getMenuItemsObj = reduceRobotSubItems(passport, address);
+  const itemsMenuObj = reduceRobotSubItems(passport, address);
 
   if (isRobot) {
     pathname = routes.robot.path;
   }
 
-  const value = findApp(getMenuItemsObj, pathname);
+  if (isOracle) {
+    pathname = routes.oracle.path;
+  }
+
+  const value = findApp(itemsMenuObj, pathname);
 
   return value;
 };

src/containers/application/Header/CurrentApp/utils/reduceRobotSubItems.ts

@@ -4,7 +4,7 @@ import { Nullable, Option } from 'src/types';
 import { Citizenship } from 'src/types/citizenship';
 import { MenuItem, MenuItems } from 'src/types/menu';
 import { Networks } from 'src/types/networks';
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 
 const reduceRobotSubItems = (
   passport: Nullable<Citizenship>,

src/containers/mint/Mint.module.scss

@@ -19,6 +19,5 @@
   align-items: center;
   margin: 64px 8px 0 8px;
   grid-gap: 16px;
-  padding-bottom: 150px;
   position: relative;
 }

src/features/TimeHistory/ui/RouteItem/RouteItem.tsx

@@ -1,4 +1,4 @@
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 import DEFAULT_IMG from 'images/large-orange-circle.png';
 import { Link } from 'react-router-dom';
 import findApp from 'src/utils/findApp';

src/pages/Keys/Keys.tsx

@@ -1,11 +1,11 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'src/redux/store';
-import KeyItem from './KeyItem/KeyItem';
-import { Display, DisplayTitle, MainContainer } from 'src/components';
+import { Display, DisplayTitle } from 'src/components';
 import ActionBar from 'src/pages/Keys/ActionBar/actionBar';
 import { initPocket } from 'src/redux/features/pocket';
-import styles from './Keys.module.scss';
 import { useState } from 'react';
+import styles from './Keys.module.scss';
+import KeyItem from './KeyItem/KeyItem';
 import KeyItemSecrets from './KeyItem/KeyItemSecrets';
 import { KEY_LIST_TYPE } from './types';
 
@@ -30,7 +30,7 @@ function Keys() {
 
   return (
     <>
-      <Display title={<DisplayTitle title="Keys" />}>
+      <Display noPadding title={<DisplayTitle title="Keys" />}>
         <div className={styles.wrapper}>
           {bostromAccounts && bostromAccounts.length > 0 ? (
             bostromAccounts.map(({ cyber: account }) => {

src/pages/Settings/Layout/Layout.module.scss

@@ -1,8 +1,10 @@
 @import '../../../layouts/variables.module.scss';
 
+$size-columns: 200px;
+
 .wrapper {
   display: grid;
-  grid-template-columns: 200px minmax(200px, 62%);
+  grid-template-columns: $size-columns minmax($size-columns, calc(62% - $size-columns));
   grid-template-rows: 1fr;
   justify-content: center;
 

src/pages/robot/SensePage.tsx

@@ -1,5 +1,4 @@
 import SenseRoutingWrapper from 'src/features/sense/ui/SenseRoutingWrapper';
-import { useRobotContext } from './robot.context';
 import Taverna from 'src/containers/taverna';
 import { useAppSelector } from 'src/redux/hooks';
 

src/pages/teleport/bridge/actionBar.bridge.tsx

@@ -1,9 +1,4 @@
 import { useState, useCallback } from 'react';
-import {
-  ActionBar as ActionBarContainer,
-  Pane,
-  Button,
-} from '@cybercongress/gravity';
 import { MsgTransfer } from 'cosmjs-types/ibc/applications/transfer/v1/tx';
 import Long from 'long';
 import BigNumber from 'bignumber.js';
@@ -15,11 +10,8 @@ import {
   SigningStargateClient,
 } from '@cosmjs/stargate';
 import { DEFAULT_GAS_LIMITS } from 'src/constants/config';
-import {
-  ActionBarContentText,
-  LinkWindow,
-  ActionBar as ActionBarCenter,
-} from '../../../components';
+import { getNowUtcNumber } from 'src/utils/date';
+import { LinkWindow, ActionBar as ActionBarCenter } from '../../../components';
 import { LEDGER } from '../../../utils/config';
 import {
   fromBech32,
@@ -31,7 +23,6 @@ import networks from '../../../utils/networkListIbc';
 import { TxsType, TypeTxsT } from '../type';
 import ActionBarPingTxs from '../components/actionBarPingTxs';
 import { useIbcHistory } from '../../../features/ibc-history/historyContext';
-import { getNowUtcNumber } from 'src/utils/date';
 
 const { STAGE_INIT, STAGE_ERROR, STAGE_SUBMITTED } = LEDGER;
 
@@ -259,15 +250,12 @@ function ActionBar({ stateActionBar }: { stateActionBar: Props }) {
 
   if (stage === STAGE_CONFIRMED_IBC) {
     return (
-      <ActionBarContainer>
-        <ActionBarContentText display="inline">
-          <Pane display="inline">Transaction Successful: </Pane>{' '}
+      <ActionBarCenter button={{ text: 'Fuck Google', onClick: clearState }}>
+        <span>
+          Transaction Successful:{' '}
           <LinkWindow to={linkIbcTxs}>{trimString(txHashIbc, 6, 6)}</LinkWindow>
-        </ActionBarContentText>
-        <Button marginX={10} onClick={clearState}>
-          Fuck Google
-        </Button>
-      </ActionBarContainer>
+        </span>
+      </ActionBarCenter>
     );
   }
 

src/types/menu.ts

@@ -1,4 +1,4 @@
-import getMenuItems from 'src/utils/appsMenu';
+import getMenuItems from 'src/utils/appsMenu/appsMenu';
 
 export type MenuItems = ReturnType<typeof getMenuItems>;
 export type MenuItem = MenuItems[0];

src/utils/appsMenu.ts → src/utils/appsMenu/appsMenu.ts

@@ -1,7 +1,6 @@
 import nebulaIcon from 'images/temple/nebula.png';
 import teleport from 'images/temple/teleport.png';
 import hfr from 'images/temple/hfr.png';
-import temple from 'images/temple/temple.png';
 import robot from 'images/temple/robot.png';
 import shpere from 'images/temple/shpere.png';
 import senate from 'images/temple/senate.png';
@@ -21,10 +20,14 @@ const getMenuItems = () => {
       icon: robot,
       to: '/robot',
       subItems: [
-        { name: 'sense', to: 'sense' },
-        { name: 'brain', to: 'brain' },
-        { name: 'time', to: 'time' },
-        { name: 'sigma', to: 'sigma' },
+        { name: 'sense', to: 'sense', icon: require('./images/dna.png') },
+        { name: 'brain', to: 'brain', icon: require('./images/brain.png') },
+        {
+          name: 'time',
+          to: 'time',
+          icon: require('./images/horizontal-traffic-light.png'),
+        },
+        { name: 'sigma', to: 'sigma', icon: require('./images/[email protected]') },
       ],
       // subItems: myRobotLinks,
     },
@@ -33,42 +36,97 @@ const getMenuItems = () => {
       to: '/',
       icon: oracle,
       subItems: [
-        { name: 'Particles', to: '/particles' },
-        { name: 'Stats', to: '/oracle/stats' },
-        { name: 'Blocks', to: '/network/bostrom/blocks' },
-        { name: 'Txs', to: '/network/bostrom/tx' },
-        { name: 'Contracts', to: '/contracts' },
-        { name: 'Libs', to: '/libs' },
+        {
+          name: 'Particles',
+          to: '/particles',
+          icon: require('./images/horizontal-traffic-light.png'),
+        },
+        {
+          name: 'Stats',
+          to: '/oracle/stats',
+          icon: require('./images/[email protected]'),
+        },
+        {
+          name: 'Blocks',
+          to: '/network/bostrom/blocks',
+          icon: require('./images/gold-blocks.png'),
+        },
+        {
+          name: 'Txs',
+          to: '/network/bostrom/tx',
+          icon: require('./images/horizontal-traffic-light.png'),
+        },
+        {
+          name: 'Contracts',
+          to: '/contracts',
+          icon: require('./images/[email protected]'),
+        },
+        { name: 'Libs', to: '/libs', icon: require('./images/database.png') },
       ],
     },
-    { name: 'Temple', to: routes.temple.path, subItems: [], icon: temple },
+    {
+      name: 'Docs',
+      to: 'https://docs.cyb.ai',
+      subItems: [],
+      icon: require('images/temple/autonomous-semantic-programs.png'),
+    },
     { name: 'Nebula', to: '/nebula', subItems: [], icon: nebulaIcon },
     {
       name: 'Teleport',
       to: '/teleport',
       icon: teleport,
       active: false,
       subItems: [
-        { name: 'Send', to: routes.teleport.send.path },
-        { name: 'Bridge', to: routes.teleport.bridge.path },
-        { name: 'Swap', to: routes.teleport.swap.path },
+        {
+          name: 'Send',
+          to: routes.teleport.send.path,
+          icon: require('./images/[email protected]'),
+        },
+        {
+          name: 'Bridge',
+          to: routes.teleport.bridge.path,
+          icon: require('./images/[email protected]'),
+        },
+        {
+          name: 'Swap',
+          to: routes.teleport.swap.path,
+          icon: require('./images/swap.png'),
+        },
       ],
     },
     {
       name: 'Warp',
       icon: warp,
       to: '/warp',
       subItems: [
-        { name: 'Add liquidity', to: '/warp/add-liquidity' },
-        { name: 'Create pool', to: '/warp/create-pool' },
-        { name: 'Sub liquidity', to: '/warp/sub-liquidity' },
+        {
+          name: 'Add liquidity',
+          to: '/warp/add-liquidity',
+          icon: require('images/msgs_ic_pooladd.svg'),
+        },
+        {
+          name: 'Create pool',
+          to: '/warp/create-pool',
+          icon: require('images/flask-outline.svg'),
+        },
+        {
+          name: 'Sub liquidity',
+          to: '/warp/sub-liquidity',
+          icon: require('images/msgs_ic_poolremove.svg'),
+        },
       ],
     },
     {
       name: 'Sphere',
       icon: shpere,
       to: routes.sphere.path,
-      subItems: [{ name: 'Heroes at rest', to: routes.sphereJailed.path }],
+      subItems: [
+        {
+          name: 'Heroes at rest',
+          to: routes.sphereJailed.path,
+          icon: require('./images/astronaut.png'),
+        },
+      ],
     },
     { name: 'HFR', icon: hfr, to: '/hfr', subItems: [] },
     // { name: 'Lifeforms', to: '/contracts', subItems: [] },
@@ -86,13 +144,13 @@ const getMenuItems = () => {
     CHAIN_ID === Networks.BOSTROM
       ? {
           name: 'Cyberver 🟣',
-          icon: require('../containers/application/images/cyberver.png'),
+          icon: require('./images/cyberver.png'),
           to: 'https://spacepussy.ai/cyberver',
           subItems: [],
         }
       : {
           name: 'cyberver',
-          icon: require('../containers/application/images/cyberver.png'),
+          icon: require('./images/cyberver.png'),
           to: '/cyberver',
           subItems: [
             {
@@ -184,9 +242,21 @@ const getMenuItems = () => {
       icon: portal,
       to: '/portal',
       subItems: [
-        { name: 'Citizenship', to: '/citizenship' },
-        { name: 'Gift', to: '/gift' },
-        { name: 'Map', to: routes.portal.routes.map.path },
+        {
+          name: 'Citizenship',
+          to: '/citizenship',
+          icon: require('./images/identification-card.png'),
+        },
+        {
+          name: 'Gift',
+          to: '/gift',
+          icon: require('./images/wrapped-gift.png'),
+        },
+        {
+          name: 'Map',
+          to: routes.portal.routes.map.path,
+          icon: require('./images/world-map.png'),
+        },
         // { name: 'Release', to: '/release' },
       ],
     });