feat(oracle): cool fixes

some updates in root toggle off menu opening on mobile commander query to hash conversion 'ask' button on commander focus
cybercongress · Oct 4, 2023 · 265d1d9 · 265d1d9
2 parents 4a1240b + b5e179f
commit 265d1d9
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 43 deletions.
diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { $TsFixMeFunc } from 'src/types/tsfix';
 import { useSelector } from 'react-redux';
 import { RootState } from 'src/redux/store';
 import { routes } from 'src/routes';
 import { CYBER } from 'src/utils/config';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Networks } from 'src/types/networks';
 import ButtonIcon from '../buttons/ButtonIcon';
 import styles from './styles.scss';
 import Button from '../btnGrd';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
+import { id } from 'src/containers/application/Header/Commander/Commander';
 
 const back = require('../../image/arrow-left-img.svg');
 
@@ -43,6 +44,9 @@ type Props = {
 
 function ActionBar({ children, text, onClickBack, button }: Props) {
   const location = useLocation();
+  const navigate = useNavigate();
+
+  const [commanderFocused, setCommanderFocused] = useState(false);
 
   const { defaultAccount } = useSelector((store: RootState) => {
     return {
@@ -57,8 +61,55 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   const noAccount = !defaultAccount.account;
   const noPassport = CYBER.CHAIN_ID === Networks.BOSTROM && !passport;
 
+  useEffect(() => {
+    const commander = document.getElementById(id);
+
+    function onFocus() {
+      setCommanderFocused(true);
+    }
+
+    function onBlur(e) {
+      if (e.relatedTarget?.tagName.toLowerCase() === 'button') {
+        e.relatedTarget.click();
+      }
+      setCommanderFocused(false);
+    }
+
+    if (commander) {
+      commander.addEventListener('focus', onFocus);
+      commander.addEventListener('blur', onBlur);
+    }
+
+    return () => {
+      if (commander) {
+        commander.removeEventListener('focus', onFocus);
+        commander.removeEventListener('blur', onBlur);
+      }
+    };
+  }, [id]);
+
   // TODO: not show while loading passport
 
+  // refactor
+  if (commanderFocused) {
+    return (
+      <ActionBarContainer>
+        <Button
+          onClick={() => {
+            navigate(
+              routes.search.getLink(
+                document.getElementById(id)?.value?.replace('~', '')
+              )
+            );
+          }}
+          // link={routes.search.getLink(val)}
+        >
+          Ask
+        </Button>
+      </ActionBarContainer>
+    );
+  }
+
   if (
     (noAccount || noPassport) &&
     // maybe change to props

diff --git a/src/containers/application/Header/Commander/Commander.tsx b/src/containers/application/Header/Commander/Commander.tsx
@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { replaceSlash } from '../../../../utils/utils';
+import { encodeSlash, replaceSlash } from '../../../../utils/utils';
 import { Input } from '../../../../components';
 import styles from './Commander.module.scss';
 import { Color } from 'src/components/LinearGradientContainer/LinearGradientContainer';
 import { routes } from 'src/routes';
+import { getIpfsHash } from 'src/utils/search/utils';
+import { PATTERN_IPFS_HASH } from 'src/utils/config';
 
 const fixedValue = '~';
 
@@ -41,7 +43,15 @@ function Commander() {
   }, []);
 
   useEffect(() => {
-    setSearch(fixedValue + (query || ''));
+    (async () => {
+      let search = query || '';
+
+      if (!search.match(PATTERN_IPFS_HASH) && search) {
+        search = await getIpfsHash(encodeSlash(query));
+      }
+
+      setSearch(fixedValue + (search || ''));
+    })();
   }, [query]);
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {

diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
@@ -9,10 +9,12 @@ import Header from 'src/containers/application/Header/Header';
 import useSetActiveAddress from 'src/hooks/useSetActiveAddress';
 import { RootState } from 'src/redux/store';
 import styles from './Main.module.scss';
+import { useDevice } from 'src/contexts/device';
 
 function MainLayout({ children }: { children: JSX.Element }) {
   const { pocket } = useSelector((state: RootState) => state);
   const { defaultAccount } = pocket;
+  const { isMobile } = useDevice();
 
   const { addressActive } = useSetActiveAddress(defaultAccount);
   const [openMenu, setOpenMenu] = useState(false);
@@ -26,10 +28,13 @@ function MainLayout({ children }: { children: JSX.Element }) {
 
   useEffect(() => {
     // for animation
-    if (localStorage.getItem(localStorageKeys.MENU_SHOW) !== 'false') {
+    if (
+      localStorage.getItem(localStorageKeys.MENU_SHOW) !== 'false' &&
+      !isMobile
+    ) {
       toggleMenu(true);
     }
-  }, []);
+  }, [isMobile]);
 
   function closeMenu() {
     toggleMenu(false);

diff --git a/src/pages/Search/Search.module.scss b/src/pages/Search/Search.module.scss
@@ -17,6 +17,8 @@
 
     padding: 0 50px;
     gap: 15px;
+    // margin-top: -3px;
+    z-index: 1;
 
     grid-template-columns: repeat(2, 1fr);
 
@@ -93,20 +95,38 @@
 
     gap: 0 40px;
 
+    .imgWrapper {
+      position: relative;
+      border-radius: 50%;
+
+      &::after {
+        // content: '';
+        position: absolute;
+        border-radius: 50%;
+
+        left: 0;
+        right: 0;
+        height: 100%;
+      }
+    }
+
     img {
       max-width: 100%;
+      box-shadow: 0px 0px 15px -2px #76ff03;
+      border-radius: 50%;
+      border: 1px solid #fff;
 
-      @keyframes identifier2 {
-        from {
-          rotate: 0;
-        }
+      // @keyframes anim {
+      //   from {
+      //     box-shadow: 0px 0px 15px 2px #76ff03;
+      //   }
 
-        to {
-          rotate: 360deg;
-        }
-      }
+      //   to {
+      //     box-shadow: 0px 0px 0px 2px #76ff03;
+      //   }
+      // }
 
-      animation: identifier2 140s infinite;
+      // animation: anim 8s infinite alternate;
     }
 
     > * {
@@ -140,33 +160,48 @@
     }
   }
 
-  @media (max-width: 500px) {
+  @media (max-width: 580px) {
     .info {
       display: unset;
-
+      margin-top: -20px;
+      h2 {
+        position: relative;
+        text-shadow: 0px 0px 15px #ffd900;
+
+        // &::before {
+        //   content: '';
+        //   position: absolute;
+        //   left: -30%;
+        //   right: -30%;
+
+        //   margin-top: auto;
+        //   height: 100%;
+        //   z-index: -1;
+        //   filter: blur(20px);
+        //   background: linear-gradient(
+        //     90deg,
+        //     rgba(0, 0, 0, 0) 3.92%,
+        //     rgba(118, 255, 3, 0.2) 43.95%,
+        //     rgba(118, 255, 3, 0.2) 55.96%,
+        //     rgba(0, 0, 0, 0) 100%
+        //   );
+        // }
+        // left: -20px;
+      }
       &::before {
         content: unset;
       }
 
-      .image {
+      .imgWrapper {
         position: absolute;
-        right: -65%;
-        top: 85px;
+        right: -105%;
 
-        @keyframes anim {
-          from {
-            box-shadow: 0px 0px 25px 2px #76ff03;
-          }
+        img {
+          // box-shadow: 0px 0px 30px -1px #76ff03;
 
-          to {
-            box-shadow: 0px 0px 0px 2px #76ff03;
-          }
+          box-shadow: 0px 0px 25px -10px #76ff03, 0px 0px 200px -20px #76ff03;
         }
-
-        animation: anim 8s infinite alternate;
-
-        border: 1px solid #fff;
-        border-radius: 50%;
+        top: 45px;
       }
 
       .particles {
@@ -176,9 +211,9 @@
 
     .advantages {
       // text-align: left;
-      margin-top: 40px;
+      margin-top: 20px;
       position: relative;
-      left: -40px;
+      left: -25px;
       display: flex;
       flex-direction: column;
     }
@@ -247,8 +282,14 @@
   }
 
   p {
-    // margin-top: 15px;
-    line-height: 30px;
+    margin-top: 7px;
+    line-height: 23px;
     color: rgba(255, 255, 255, 0.5);
   }
+
+  a {
+    &:hover {
+      opacity: 0.7;
+    }
+  }
 }
diff --git a/src/pages/Search/Search.tsx b/src/pages/Search/Search.tsx
@@ -46,12 +46,13 @@ function Search() {
             decentralized <span>search</span> <br />
             is here
           </h2>
-
-          <img
-            className={styles.image}
-            src={require('./img.png')}
-            alt="cyber"
-          />
+          <div className={styles.imgWrapper}>
+            <img
+              className={styles.image}
+              src={require('./img.png')}
+              alt="cyber"
+            />
+          </div>
 
           <div className={styles.particles}>
             <h4>111 000 particles</h4>
@@ -88,7 +89,9 @@ function Search() {
           ].map(({ title, text }) => {
             return (
               <li key={title}>
-                <h6>{title}</h6>
+                <Link to={routes.search.getLink(title)}>
+                  <h6>{title}</h6>
+                </Link>
                 <p>{text}</p>
               </li>
             );