feat(oracle): landing redesign (cybercongress#1034)

Author: dasein108

src/components/Carousel/Carousel.tsx

@@ -25,6 +25,7 @@ type CarouselProps = {
   displaySlide?: number;
   color?: Color;
   noAnimation?: boolean;
+  onChange: (index: number) => void;
 };
 
 function Carousel({

src/components/actionBar/Discord/Discord.tsx

@@ -12,7 +12,7 @@
 .displayTitle {
   min-height: 70px;
   padding: 10px 0;
-  font-size: 18px;
+  font-size: 20px;
   display: flex;
   align-items: center;
 

src/components/actionBar/Telegram.tsx

@@ -13,6 +13,8 @@ import portal from '../../image/space-pussy.svg';
 import oracle from '../../image/temple/oracle.png';
 import warp from '../../image/temple/warp.png';
 import hub from '../../image/temple/hub.png';
+import congress from './images/congress.png';
+
 import { routes } from '../../routes';
 
 const itemsMenu = () => {
@@ -78,6 +80,7 @@ const itemsMenu = () => {
       ],
     },
     { name: 'Senate', icon: senate, to: '/senate', subItems: [] },
+    { name: 'About', icon: congress, to: routes.social.path, subItems: [] },
     // {
     //   name: 'Help',
     //   icon: zhdun,

src/components/actionBar/Twitter/Twitter.module.scss

@@ -58,7 +58,10 @@ function Commander() {
         e.relatedTarget.click();
       }
 
-      dispatch(setFocus(false));
+      // timeout for mobile focus, working different
+      setTimeout(() => {
+        dispatch(setFocus(false));
+      }, 1);
     }
 
     commanderRef.current.addEventListener('focus', onFocus);

src/components/containerGradient/DisplayTitle/DisplayTitle.module.scss

@@ -6,7 +6,7 @@
   background: #000000;
   color: #fff;
   transition: 0.3s;
-  z-index: 3;
+  z-index: 4;
   opacity: 0.9;
   box-shadow: 1px 0 20px 2px #000;
 }

src/containers/application/AppMenu.tsx

@@ -4,7 +4,8 @@ import BigNumber from 'bignumber.js';
 import { useQueryClient } from 'src/contexts/queryClient';
 
 const keyQuery = 'graphStats';
-function useGetGraphStats() {
+
+function useGetGraphStats(refetchInterval: number | undefined = 1000 * 60 * 3) {
   const queryClient = useQueryClient();
   const [changeTimeAmount, setChangeTimeAmount] = useState({
     particles: 0,
@@ -54,7 +55,7 @@ function useGetGraphStats() {
       return response;
     },
     enabled: Boolean(queryClient),
-    refetchInterval: 1000 * 60 * 3,
+    refetchInterval,
   });
 
   useEffect(() => {

src/containers/application/Header/Commander/Commander.tsx

@@ -19,7 +19,7 @@ const getNegentropy = async () => {
 
 const keyQuery = 'negentropy';
 
-function useGetNegentropy() {
+function useGetNegentropy(refetchInterval: number | undefined = 1000 * 60 * 3) {
   const [changeTimeAmount, setChangeTimeAmount] = useState({
     amount: 0,
     time: 0,
@@ -43,7 +43,7 @@ function useGetNegentropy() {
 
       return response;
     },
-    refetchInterval: 1000 * 60 * 3,
+    refetchInterval,
   });
 
   useEffect(() => {

src/containers/application/images/congress.png

@@ -129,7 +129,7 @@ root.render(
         <title>cyb: your immortal robot for the great web</title>
       </Helmet>
       <AppRouter />
-      <ReactQueryDevtools />
+      <ReactQueryDevtools position="bottom-right" />
     </>
   </Providers>
 );

src/containers/application/styles.scss

@@ -1,7 +1,12 @@
 .wrapper {
-  @media (max-width: 480px) {
-    footer {
-      display: none;
+  footer {
+    a {
+      position: fixed;
+      z-index: 2;
+      right: 5vw;
+      bottom: 35px;
+      display: flex;
+      align-items: center;
     }
   }
 }

src/containers/temple/hooks/useGetGraphStats.js src/containers/temple/hooks/useGetGraphStats.ts

@@ -1,15 +1,14 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Telegram } from 'src/components/actionBar/Telegram';
-import { GitHub } from 'src/components/actionBar/GitHub';
+
 import { localStorageKeys } from 'src/constants/localStorageKeys';
 import AppMenu from 'src/containers/application/AppMenu';
 import AppSideBar from 'src/containers/application/AppSideBar';
 import Header from 'src/containers/application/Header/Header';
 import useSetActiveAddress from 'src/hooks/useSetActiveAddress';
-import Discord from 'src/components/actionBar/Discord/Discord';
-import Twitter from 'src/components/actionBar/Twitter/Twitter';
 import { useAppSelector } from 'src/redux/hooks';
 import styles from './Main.module.scss';
+import { routes } from 'src/routes';
+import { Link } from 'react-router-dom';
 
 function MainLayout({ children }: { children: JSX.Element }) {
   const pocket = useAppSelector(({ pocket }) => pocket);
@@ -64,10 +63,7 @@ function MainLayout({ children }: { children: JSX.Element }) {
       {children}
 
       <footer>
-        <Telegram />
-        <Discord />
-        <Twitter />
-        <GitHub />
+        <Link to={routes.social.path}>contacts</Link>
       </footer>
     </div>
   );

src/containers/temple/hooks/useGetNegentropy.ts

@@ -0,0 +1,11 @@
+.wrapper {
+  padding: 0 50px;
+  display: flex;
+  justify-content: center;
+}
+
+.link {
+  z-index: 1;
+  font-size: 30px;
+  position: relative;
+}

src/image/enlarge.svg

@@ -0,0 +1,19 @@
+import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
+import { LinkWindow } from 'src/components/link/link';
+import styles from './Brain.module.scss';
+
+function Brain() {
+  return (
+    <div className={styles.wrapper}>
+      <LinkWindow
+        className={styles.link}
+        to="https://cosmograph.app/run/?data=https://gateway.ipfs.cybernode.ai/ipfs/QmQ3snofqRrDhpANRCwZrCPG7rAvABrkL9KHreMtmYDiCL"
+      >
+        Full Graph 🔗
+      </LinkWindow>
+      <CyberlinksGraphContainer toPortal />
+    </div>
+  );
+}
+
+export default Brain;