diff --git a/src/components/ContentItem/contentItem.tsx b/src/components/ContentItem/contentItem.tsx index ac89e2974..1ab51174d 100644 --- a/src/components/ContentItem/contentItem.tsx +++ b/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 ( - + diff --git a/src/components/appMenu/MobileMenu/MobileMenu.tsx b/src/components/appMenu/MobileMenu/MobileMenu.tsx index 46803fbc6..63e8e13d6 100644 --- a/src/components/appMenu/MobileMenu/MobileMenu.tsx +++ b/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(null); @@ -23,6 +23,7 @@ const MobileMenu = () => { >
); -}; +} export default MobileMenu; diff --git a/src/components/contentIpfs/contentIpfs.tsx b/src/components/contentIpfs/contentIpfs.tsx index 147036a1c..4d89eacf2 100644 --- a/src/components/contentIpfs/contentIpfs.tsx +++ b/src/components/contentIpfs/contentIpfs.tsx @@ -50,15 +50,7 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) { const contentType = details?.type; return ( -
- {/* */} - {/* Default */} - + <> {!details?.type && {cid.toString()}} {content?.availableDownload && ( @@ -73,7 +65,9 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) { )} {contentType === 'text' && ( - {details.content} + + {details.content || cid} + )} {contentType === 'image' && } {contentType === 'pdf' && details.content && ( @@ -94,7 +88,7 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) { )} )} -
+ ); } diff --git a/src/containers/application/App.tsx b/src/containers/application/App.tsx index 0a081e0bb..829a6e015 100644 --- a/src/containers/application/App.tsx +++ b/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 ( @@ -147,7 +159,13 @@ function App() { - + {isMobile && !mobileAllowed ? ( + + + + ) : ( + + )} diff --git a/src/containers/application/Header/CurrentApp/ui/AppSideBar/AppSideBar.tsx b/src/containers/application/Header/CurrentApp/ui/AppSideBar/AppSideBar.tsx index 73f232f58..aa5eb4b18 100644 --- a/src/containers/application/Header/CurrentApp/ui/AppSideBar/AppSideBar.tsx +++ b/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(null); + const { setIsOpen } = useAdviser(); + useOnClickOutside(ref, (e) => { if (mediaQuery) { return; @@ -54,7 +57,14 @@ function AppSideBar({ children, menuProps }: Props) { })} > {!mediaQuery && ( - )} diff --git a/src/containers/application/Header/Header.module.scss b/src/containers/application/Header/Header.module.scss index 0f2a07033..81328cfa2 100644 --- a/src/containers/application/Header/Header.module.scss +++ b/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; } } } diff --git a/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx b/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx index 99fd955b6..a516a18c5 100644 --- a/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx +++ b/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() {
{(!useGetAddress || !mediaQuery) && ( - - {mediaQuery ? 'Settings' : '⚙️'} - + // eslint-disable-next-line react/jsx-no-useless-fragment + <> + {/* FIXME: because of styles */} + {isMobile ? ( +
+ ) : ( + + {mediaQuery ? 'Settings' : '⚙️'} + + )} + )} {mediaQuery && useGetAddress && (
div { + height: 100%; + } +} diff --git a/src/containers/application/UseDesktopVersionBlock/UseDesktopVersionBlock.tsx b/src/containers/application/UseDesktopVersionBlock/UseDesktopVersionBlock.tsx new file mode 100644 index 000000000..cb58783d4 --- /dev/null +++ b/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 ( +
+ } color="red"> + this page not available on mobile
use desktop version for better + experience + +
+ ); +} + +export default UseDesktopVersionBlock; diff --git a/src/containers/application/mobileAllowedRoutes.ts b/src/containers/application/mobileAllowedRoutes.ts new file mode 100644 index 000000000..662ae2fa0 --- /dev/null +++ b/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, +]; diff --git a/src/containers/ipfs/IPFS.module.scss b/src/containers/ipfs/IPFS.module.scss index e4b6d1253..347cef441 100644 --- a/src/containers/ipfs/IPFS.module.scss +++ b/src/containers/ipfs/IPFS.module.scss @@ -1,3 +1,4 @@ .particle { min-height: 200px; + padding: 0 10px; } diff --git a/src/containers/ipfs/ipfs.tsx b/src/containers/ipfs/ipfs.tsx index 148461af1..c306233bb 100644 --- a/src/containers/ipfs/ipfs.tsx +++ b/src/containers/ipfs/ipfs.tsx @@ -40,7 +40,7 @@ function Ipfs() { })(); } }, [isText, isReady, query, ipfsApi, isIpfsInitialized]); - useEffect(() => {}, [details]); + useEffect(() => { if (!status) { return; diff --git a/src/features/adviser/AdviserContainer.module.scss b/src/features/adviser/AdviserContainer.module.scss index 743842e33..c6e800c7a 100644 --- a/src/features/adviser/AdviserContainer.module.scss +++ b/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; diff --git a/src/hooks/useActiveMenuItem.ts b/src/hooks/useActiveMenuItem.ts index 38f3b2bf9..0c4a3c8a0 100644 --- a/src/hooks/useActiveMenuItem.ts +++ b/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 }; }; diff --git a/src/pages/oracle/Learn/Learn.tsx b/src/pages/oracle/Learn/Learn.tsx index 41ec79e55..65d045b4e 100644 --- a/src/pages/oracle/Learn/Learn.tsx +++ b/src/pages/oracle/Learn/Learn.tsx @@ -72,18 +72,18 @@ function Learn() { if (noPassport) { content = ( - <> +
moon citizenship unlocks all features and takes 3 minutes - +
); } else if (noEnergy) { content = ( - <> +
to cyberlink and learn you need energy
amperes, 💡 and volts, ⚡️ can be produced by freezing hydrogen H in{' '} HFR - +
); adviserColor = 'red'; } else { diff --git a/src/routes.ts b/src/routes.ts index e123755b9..7852d1b9d 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -111,6 +111,26 @@ export const routes = { path: '/oracle/ask/:query', getLink: (query: string) => `/oracle/ask/${query}`, }, + routes: { + stats: { + path: '/oracle/stats', + }, + blocks: { + path: '/oracle/blocks', + }, + txs: { + path: '/oracle/txs', + }, + particles: { + path: '/oracle/particles', + }, + }, + }, + nebula: { + path: '/nebula', + }, + warp: { + path: '/warp', }, social: { path: '/social',