feat(mobile): improvements (#1334)

src/components/ContentItem/contentItem.tsx

@@ -6,6 +6,7 @@ import useParticle from 'src/hooks/useParticle';
 import type { IpfsContentType } from 'src/services/ipfs/types';
 import { $TsFixMe } from 'src/types/tsfix';
 
+import { routes } from 'src/routes';
 import SearchItem from '../SearchItem/searchItem';
 
 import { getRankGrade } from '../../utils/search/utils';
@@ -41,7 +42,11 @@ function ContentItem({
   }
 
   return (
-    <Link className={className} style={{ color: '#fff' }} to={`/ipfs/${cid}`}>
+    <Link
+      className={className}
+      style={{ color: '#fff' }}
+      to={routes.oracle.ask.getLink(cid)}
+    >
       <SearchItem
         key={cid}
         linkType={linkType}

src/components/actionBar/index.tsx

@@ -10,6 +10,7 @@ import { useAppSelector } from 'src/redux/hooks';
 import { useSigningClient } from 'src/contexts/signerClient';
 import { trimString } from 'src/utils/utils';
 import { CHAIN_ID } from 'src/constants/config';
+import { useDevice } from 'src/contexts/device';
 import ButtonIcon from '../buttons/ButtonIcon';
 import styles from './styles.module.scss';
 import Button from '../btnGrd';
@@ -58,6 +59,7 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
 
   const address = useAppSelector(selectCurrentAddress);
   const { passport } = usePassportByAddress(address);
+  const { isMobile } = useDevice();
 
   const noAccount = !defaultAccount.account;
   const noPassport = CHAIN_ID === Networks.BOSTROM && !passport;
@@ -89,7 +91,8 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
     // maybe change to props
     exception &&
     !location.pathname.includes(routes.gift.path) &&
-    !location.pathname.includes('/brain') // both full and robot
+    !location.pathname.includes('/brain') && // both full and robot
+    !isMobile
   ) {
     return (
       <ActionBarContainer>

src/components/appMenu/MobileMenu/MobileMenu.tsx

@@ -1,12 +1,12 @@
 import { useState, useRef } from 'react';
 import { NavLink } from 'react-router-dom';
 import getMenuItems from 'src/utils/appsMenu/appsMenu';
-import styles from './MobileMenu.module.scss';
 import cx from 'classnames';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';
 import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
+import styles from './MobileMenu.module.scss';
 
-const MobileMenu = () => {
+function MobileMenu() {
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -23,6 +23,7 @@ const MobileMenu = () => {
     >
       <div className={cx(styles.menuContent, { [styles.visible]: isOpen })}>
         <button
+          type="button"
           className={cx(styles.menuButton, { [styles.active]: isOpen })}
           onClick={toggleMenu}
         >
@@ -51,14 +52,14 @@ const MobileMenu = () => {
                   className={styles.icon}
                   alt={`${item.name} menu icon`}
                 />
-                {isExternal && <span className={styles.external}></span>}
+                {isExternal && <span className={styles.external} />}
               </NavLink>
             )
           );
         })}
       </div>
     </div>
   );
-};
+}
 
 export default MobileMenu;

src/components/contentIpfs/contentIpfs.tsx

@@ -50,15 +50,7 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) {
   const contentType = details?.type;
 
   return (
-    <div>
-      {/* <DebugContentInfo
-        cid={cid}
-        source={content?.source}
-        content={content}
-        status={status}
-      /> */}
-      {/* Default */}
-
+    <>
       {!details?.type && <TextMarkdown preview>{cid.toString()}</TextMarkdown>}
 
       {content?.availableDownload && (
@@ -73,7 +65,9 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) {
             <VideoPlayerGatewayOnly content={content} details={details} />
           )}
           {contentType === 'text' && (
-            <TextMarkdown preview={search}>{details.content}</TextMarkdown>
+            <TextMarkdown preview={search}>
+              {details.content || cid}
+            </TextMarkdown>
           )}
           {contentType === 'image' && <Img content={details.content} />}
           {contentType === 'pdf' && details.content && (
@@ -94,7 +88,7 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) {
           )}
         </>
       )}
-    </div>
+    </>
   );
 }
 

src/containers/application/App.tsx

@@ -21,9 +21,13 @@ import { cybernetRoutes } from 'src/features/cybernet/ui/routes';
 import useCurrentAddress from 'src/hooks/useCurrentAddress';
 import NewVersionChecker from 'src/components/NewVersionChecker/NewVersionChecker';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+import { MainContainer } from 'src/components';
+import { useDevice } from 'src/contexts/device';
 import AdviserContainer from '../../features/adviser/AdviserContainer';
 import styles from './styles.scss';
 import { setFocus } from './Header/Commander/commander.redux';
+import { mobileAllowedRoutes } from './mobileAllowedRoutes';
+import UseDesktopVersionBlock from './UseDesktopVersionBlock/UseDesktopVersionBlock';
 
 export const PORTAL_ID = 'portal';
 
@@ -133,6 +137,14 @@ function App() {
     }
   }, [dispatch]);
 
+  const { isMobile } = useDevice();
+
+  const mobileAllowed =
+    location.pathname.includes('@') ||
+    mobileAllowedRoutes.some((path) => {
+      return matchPath(path, location.pathname);
+    });
+
   return (
     <PreviousPageProvider>
       <NewVersionChecker />
@@ -147,7 +159,13 @@ function App() {
 
           <AdviserContainer />
 
-          <Outlet />
+          {isMobile && !mobileAllowed ? (
+            <MainContainer>
+              <UseDesktopVersionBlock />
+            </MainContainer>
+          ) : (
+            <Outlet />
+          )}
         </>
       </MainLayout>
     </PreviousPageProvider>

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

@@ -2,6 +2,7 @@ import cx from 'classnames';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';
 import { useRef } from 'react';
 import useMediaQuery from 'src/hooks/useMediaQuery';
+import { useAdviser } from 'src/features/adviser/context';
 import styles from './AppSideBar.module.scss';
 import { menuButtonId } from '../../utils/const';
 import BurgerIcon from '../BurgerIcon/BurgerIcon';
@@ -32,6 +33,8 @@ function AppSideBar({ children, menuProps }: Props) {
   const { isOpen, closeMenu, toggleMenu } = menuProps;
   const ref = useRef<HTMLElement>(null);
 
+  const { setIsOpen } = useAdviser();
+
   useOnClickOutside(ref, (e) => {
     if (mediaQuery) {
       return;
@@ -54,7 +57,14 @@ function AppSideBar({ children, menuProps }: Props) {
       })}
     >
       {!mediaQuery && (
-        <button className={styles.toggleBtn} onClick={toggleMenu} type="button">
+        <button
+          className={styles.toggleBtn}
+          onClick={() => {
+            toggleMenu();
+            setIsOpen(false);
+          }}
+          type="button"
+        >
           <BurgerIcon openMenu={isOpen} />
         </button>
       )}

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

@@ -9,24 +9,23 @@
 
   &::before {
     content: '';
-    height: 87%;
-    width: 100%;
+    height: 100%;
+    width: 110%;
     position: absolute;
     top: -5px;
     z-index: -1;
-    left: 0;
+    left: -5%;
     filter: blur(5px);
-
     background: linear-gradient(
       180deg,
-      rgba(0, 0, 0, 0.92) 82.81%,
-      rgba(0, 0, 0, 0) 100%
+      rgb(0 0 0 / 92%) 82.81%,
+      rgb(0 0 0 / 0%) 100%
     );
   }
 
   &.scroll {
     &::before {
-      background-color: #000000;
+      background-color: #000;
     }
   }
 }

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

@@ -14,6 +14,7 @@ import useIsOnline from 'src/hooks/useIsOnline';
 import { useAppSelector } from 'src/redux/hooks';
 import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
 import { useBackend } from 'src/contexts/backend/backend';
+import { useDevice } from 'src/contexts/device';
 import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
 import styles from './SwitchAccount.module.scss';
 import networkStyles from '../CurrentApp/CurrentApp.module.scss';
@@ -94,6 +95,7 @@ function SwitchAccount() {
   const { isIpfsInitialized } = useBackend();
   const isOnline = useIsOnline();
   const mediaQuery = useMediaQuery('(min-width: 768px)');
+  const { isMobile } = useDevice();
 
   const [controlledVisible, setControlledVisible] = React.useState(false);
 
@@ -155,12 +157,20 @@ function SwitchAccount() {
     <div style={{ position: 'relative', fontSize: '20px' }} ref={containerRef}>
       <div className={styles.containerSwichAccount}>
         {(!useGetAddress || !mediaQuery) && (
-          <Link
-            className={networkStyles.btnContainerText}
-            to={routes.settings.path}
-          >
-            {mediaQuery ? 'Settings' : '⚙️'}
-          </Link>
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          <>
+            {/* FIXME: because of styles */}
+            {isMobile ? (
+              <div />
+            ) : (
+              <Link
+                className={networkStyles.btnContainerText}
+                to={routes.settings.path}
+              >
+                {mediaQuery ? 'Settings' : '⚙️'}
+              </Link>
+            )}
+          </>
         )}
         {mediaQuery && useGetAddress && (
           <div

src/containers/application/UseDesktopVersionBlock/UseDesktopVersionBlock.module.scss

@@ -0,0 +1,9 @@
+// fix
+.wrapper {
+  min-height: 200px;
+  padding: 0 10px;
+
+  > div {
+    height: 100%;
+  }
+}

src/containers/application/UseDesktopVersionBlock/UseDesktopVersionBlock.tsx

@@ -0,0 +1,15 @@
+import { Display, DisplayTitle } from 'src/components';
+import styles from './UseDesktopVersionBlock.module.scss';
+
+function UseDesktopVersionBlock() {
+  return (
+    <div className={styles.wrapper}>
+      <Display title={<DisplayTitle title="page not available" />} color="red">
+        this page not available on mobile <br /> use desktop version for better
+        experience
+      </Display>
+    </div>
+  );
+}
+
+export default UseDesktopVersionBlock;

src/containers/application/mobileAllowedRoutes.ts

@@ -0,0 +1,23 @@
+import { routes } from 'src/routes';
+
+// eslint-disable-next-line import/prefer-default-export
+export const mobileAllowedRoutes = [
+  // `/`
+  routes.home.path,
+
+  // oracle
+  routes.oracle,
+  routes.oracle.ask,
+  routes.oracle.learn,
+  routes.oracle.routes.blocks.path,
+  routes.oracle.routes.txs.path,
+  routes.oracle.routes.stats.path,
+  routes.oracle.routes.particles.path,
+
+  routes.robot.path,
+
+  routes.warp.path,
+  routes.social.path,
+
+  // routes.settings.path,
+];

src/containers/ipfs/IPFS.module.scss

@@ -1,3 +1,4 @@
 .particle {
   min-height: 200px;
+  padding: 0 10px;
 }

src/containers/ipfs/ipfs.tsx

@@ -40,7 +40,7 @@ function Ipfs() {
       })();
     }
   }, [isText, isReady, query, ipfsApi, isIpfsInitialized]);
-  useEffect(() => {}, [details]);
+
   useEffect(() => {
     if (!status) {
       return;

src/features/adviser/AdviserContainer.module.scss

@@ -1,10 +1,10 @@
 .wrapper {
   position: sticky;
-  top: 80px;
+  top: 70px;
   width: 60%;
   z-index: 4;
   min-height: 60px; // 2 lines of text
-  margin: -45px auto 25px;
+  margin: -40px auto 25px;
   display: flex;
   justify-content: center;
 

src/hooks/useActiveMenuItem.ts

@@ -1,6 +1,7 @@
 import { MenuItem } from 'src/types/menu';
 import { useLocation } from 'react-router-dom';
 
+// eslint-disable-next-line import/prefer-default-export
 export const useActiveMenuItem = (menuItems: MenuItem[]) => {
   const location = useLocation();
   const isActiveItem = (item: MenuItem) => {
@@ -16,9 +17,11 @@ export const useActiveMenuItem = (menuItems: MenuItem[]) => {
     if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
       return true;
     }
+
     return item.subItems?.some((subItem) => location.pathname === subItem.to);
   };
 
   const activeItem = menuItems.find((item) => isActiveItem(item)) || null;
+
   return { isActiveItem, activeItem };
 };

src/pages/oracle/Learn/Learn.tsx

@@ -72,18 +72,18 @@ function Learn() {
 
     if (noPassport) {
       content = (
-        <>
+        <div>
           moon <Link to={routes.portal.path}>citizenship</Link> unlocks all
           features and takes 3 minutes
-        </>
+        </div>
       );
     } else if (noEnergy) {
       content = (
-        <>
+        <div>
           to cyberlink and learn you need energy <br />
           amperes, 💡 and volts, ⚡️ can be produced by freezing hydrogen H in{' '}
           <Link to={routes.hfr.path}>HFR</Link>
-        </>
+        </div>
       );
       adviserColor = 'red';
     } else {