feat(robot): navigation

src/components/actionBar/index.tsx

@@ -91,7 +91,9 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   ) {
     return (
       <ActionBarContainer>
-        {noAccount && <Button link={routes.keys.path}>Connect</Button>}
+        {noAccount && (
+          <Button link={routes.robot.routes.keys.path}>Connect</Button>
+        )}
 
         {noPassport && location.pathname !== routes.citizenship.path && (
           <Button link={routes.portal.path}>Get citizenship</Button>

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

@@ -9,7 +9,10 @@ import styles from './AppName.module.scss';
 
 function AppName() {
   let { pathname } = useLocation();
-  const isRobot = pathname.includes('@') || pathname.includes('neuron/');
+  const isRobot =
+    pathname.includes('@') ||
+    pathname.includes('neuron/') ||
+    pathname.includes('robot');
   const isOracle = pathname.includes('oracle');
 
   if (isRobot) {

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

@@ -10,7 +10,8 @@ const findSelectAppByUrl = (
   address: Option<string>
 ) => {
   let pathname = url;
-  const isRobot = url.includes('@') || url.includes('neuron/');
+  const isRobot =
+    url.includes('@') || url.includes('neuron/') || url.includes('robot');
   const isOracle = url.includes('oracle');
   const isCyberver = url.includes('cyberver');
 

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -240,12 +240,12 @@ function SwitchAccount() {
                   setControlledVisible={setControlledVisible}
                   image={require('../../../../image/sigma.png')}
                 />
-                <AccountItem
+                {/* <AccountItem
                   name="settings"
                   setControlledVisible={setControlledVisible}
                   link={routes.settings.path}
                   image={require('./keys.png')}
-                />
+                /> */}
               </div>
             </div>
           );

src/pages/Hub/components/DisplayHub/DisplayHub.tsx

@@ -18,6 +18,7 @@ function DisplayHub({
 }) {
   return (
     <Display
+      noPadding
       title={
         <DisplayTitle
           title={

src/pages/robot/Layout/LayoutRoot/RootMenu/RootMenu.tsx

@@ -2,6 +2,7 @@ import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
 import Display from 'src/components/containerGradient/Display/Display';
 import IconsNumber from 'src/components/IconsNumber/IconsNumber';
+import { useRobotContext } from 'src/pages/robot/robot.context';
 import styles from './RootMenu.module.scss';
 
 type MenuItem = {
@@ -11,6 +12,7 @@ type MenuItem = {
   name?: string;
   icon: string;
   isDisabled?: boolean;
+  onlyOwner?: boolean;
 };
 
 const links: MenuItem[] = [
@@ -64,19 +66,54 @@ const links: MenuItem[] = [
     // description: 'bytes',
     icon: '👻',
   },
+  {
+    text: 'Drive',
+    link: '/robot/drive',
+    icon: '🟥',
+    onlyOwner: true,
+  },
+  {
+    text: 'Keys',
+    link: '/robot/keys',
+    icon: '🗝',
+    onlyOwner: true,
+  },
+  {
+    text: 'Tokens',
+    link: './tokens',
+    icon: '🟢',
+    onlyOwner: true,
+  },
+  {
+    text: 'Networks',
+    link: './networks',
+    icon: '🌐',
+    onlyOwner: true,
+  },
+  {
+    text: 'Channels',
+    link: './channels',
+    icon: '📡',
+    onlyOwner: true,
+  },
 ];
 
 type Props = {
   counts: any;
 };
 
 function RootMenu({ counts }: Props) {
+  const { isOwner } = useRobotContext();
   const renderLinks = (links: Array<MenuItem>) => {
     return (
       <ul className={styles.links}>
         {links.map((link, index) => {
           const count = counts[link.name] || 0;
 
+          if (link.onlyOwner && !isOwner) {
+            return null;
+          }
+
           return (
             <li key={index}>
               <NavLink

src/pages/robot/Robot.tsx

@@ -1,9 +1,12 @@
-import { Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import TxsTable from 'src/pages/robot/_refactor/account/component/txsTable';
 import Sigma from 'src/containers/sigma';
 import RoutedEnergy from 'src/containers/energy';
 import TableDiscipline from 'src/containers/gol/table';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+import { routes } from 'src/routes';
+import IpfsSettings from 'src/features/ipfs/ipfsSettings';
+import Audio from 'src/pages/Settings/Audio/Audio';
 import Layout from './Layout/Layout';
 import RobotContextProvider, { useRobotContext } from './robot.context';
 import Brain from './Brain/Brain';
@@ -16,25 +19,38 @@ import Heroes from './_refactor/account/tabs/heroes';
 import Karma from './Karma/Karma';
 import Follows from './_refactor/account/tabs/Follows/Follows';
 import Soul from './Soul/Soul';
+import Keys from '../Keys/Keys';
+import Tokens from '../Hub/containers/Tokens/Tokens';
+import Networks from '../Hub/containers/Networks/Networks';
+import Channels from '../Hub/containers/Channels/Channels';
 
 function RobotRoutes() {
   const { isLoading, address } = useRobotContext();
 
   const newUser = !isLoading && !address;
 
   useAdviserTexts({
-    defaultText: 'my robot',
+    defaultText: `${!newUser ? 'my' : 'welcome to'} robot`,
   });
 
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         {newUser ? (
-          <Route index element={<ZeroUser />} />
+          <>
+            <Route index element={<ZeroUser />} />
+            <Route path="*" element={<Navigate to="/robot" />} />
+          </>
         ) : (
           <Route element={<LayoutRoot />}>
-            <Route index element={newUser ? <ZeroUser /> : <FeedsTab />} />
+            <Route index element={<FeedsTab />} />
             <Route path="soul" element={<Soul />} />
+
+            {/* energy */}
+            <Route
+              path="/grid"
+              element={<Navigate to={routes.robot.routes.energy.path} />}
+            />
             {['energy', 'energy/:pageId'].map((path) => (
               <Route key={path} path={path} element={<RoutedEnergy />} />
             ))}
@@ -54,6 +70,18 @@ function RobotRoutes() {
           <Route key={path} path={path} element={<SensePage />} />
         ))}
 
+        <Route path="audio" element={<Audio />} />
+        <Route path="drive" element={<IpfsSettings />} />
+
+        <Route path="keys" element={<Keys />} />
+        {/* 
+        {['tokens', 'networks', 'channels'].map((path) => (
+          <Route key={path} path={`/${path}`} element={<Hub />} />
+        ))} */}
+        <Route path="tokens" element={<Tokens />} />
+        <Route path="networks" element={<Networks />} />
+        <Route path="channels" element={<Channels />} />
+
         <Route path="brain/*" element={<Brain />} />
 
         <Route path="*" element={<p>Page should not exist</p>} />

src/pages/robot/robot.context.tsx

@@ -1,13 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
-import { CHAIN_ID } from 'src/constants/config';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import usePassportContract from 'src/features/passport/usePassportContract';
 import { selectCurrentAddress } from 'src/redux/features/pocket';
 import { useAppSelector } from 'src/redux/hooks';
 import { routes } from 'src/routes';
 import { Citizenship } from 'src/types/citizenship';
-import { Networks } from 'src/types/networks';
+import { isPussyChain } from 'src/utils/chains/pussy';
 import { fromBech32 } from 'src/utils/utils';
 
 const RobotContext = React.createContext<{
@@ -113,7 +112,7 @@ function RobotContextProvider({ children }: { children: React.ReactNode }) {
   }
   isOwner = isOwner as boolean;
 
-  let query = {};
+  let query;
   if (address) {
     query = {
       active_passport: {
@@ -130,64 +129,33 @@ function RobotContextProvider({ children }: { children: React.ReactNode }) {
 
   const passportContract = usePassportContract<Citizenship>({
     query,
-    skip: isOwner,
+    skip: isOwner || !query,
   });
 
   const currentPassport = isOwner ? currentUserPassport : passportContract;
   let currentRobotAddress = address || currentPassport.data?.owner || null;
 
-  if (CHAIN_ID === Networks.SPACE_PUSSY && currentRobotAddress) {
+  if (isPussyChain && currentRobotAddress) {
     currentRobotAddress = fromBech32(currentRobotAddress, 'pussy');
   }
 
-  const isLoading = currentPassport.loading;
-
-  // redirect from /robot to /@nickname
-  const newUser =
-    !passportContract.loading &&
-    !currentUserPassport.loading &&
-    !currentRobotAddress;
-
-  // redirects
-  useEffect(() => {
-    if (
-      newUser &&
-      location.pathname.includes(routes.robot.path) &&
-      // allowed routes
-      ![
+  if (
+    robotUrl &&
+    currentUserPassport.data &&
+    currentAddress === currentUserPassport.data.owner
+  ) {
+    navigate(
+      location.pathname.replace(
         routes.robot.path,
-        routes.robot.routes.drive.path,
-        routes.robot.routes.sense.path,
-      ].includes(location.pathname)
-    ) {
-      navigate(routes.robot.path);
-    }
-
-    if (
-      robotUrl &&
-      currentUserPassport.data &&
-      currentAddress === currentUserPassport.data.owner
-    ) {
-      navigate(
-        location.pathname.replace(
-          routes.robot.path,
-          routes.robotPassport.getLink(
-            currentUserPassport.data.extension.nickname
-          )
-        ),
-        {
-          replace: true,
-        }
-      );
-    }
-  }, [
-    location.pathname,
-    robotUrl,
-    currentUserPassport.data,
-    newUser,
-    currentAddress,
-    navigate,
-  ]);
+        routes.robotPassport.getLink(
+          currentUserPassport.data.extension.nickname
+        )
+      ),
+      {
+        replace: true,
+      }
+    );
+  }
 
   const addRefetch = useCallback(
     (func: () => void) => {
@@ -200,6 +168,8 @@ function RobotContextProvider({ children }: { children: React.ReactNode }) {
     refetchFuncs.forEach((func) => func());
   }, [refetchFuncs]);
 
+  const isLoading = currentPassport.loading;
+
   const contextValue = useMemo(
     () => ({
       address: currentRobotAddress,

src/router.tsx

@@ -120,7 +120,10 @@ function AppRouter() {
           <Route path="/ide" element={<FreestyleIde />} />
 
           <Route path="/robot/*" element={<Robot />} />
-          <Route path="/ipfs" element={<Navigate to="/robot/drive" />} />
+          <Route
+            path="/ipfs"
+            element={<Navigate to={routes.settings.path} />}
+          />
 
           <Route path={routes.temple.path} element={<Temple />} />
           <Route path={routes.neuron.path} element={<Robot />} />

src/routes.ts

@@ -51,6 +51,15 @@ export const routes = {
       soul: {
         path: '/robot/soul',
       },
+      keys: {
+        path: '/robot/keys',
+      },
+      audio: {
+        path: '/robot/audio',
+      },
+      hub: {
+        path: '/robot/hub',
+      },
     },
   },
   robotPassport: {