+
() => toggleMenu(!openMenu), [openMenu]),
@@ -60,38 +88,41 @@ function MainLayout({ children }: { children: JSX.Element }) {
}}
/>
- {
- if (pathname.includes('/cyberver')) {
- return;
- }
-
- closeMenu();
- }}
- >
- {
- // temp until refactoring will be merged
- // prevent menu close on cybernet navigation
- if (pathname.includes('/cyberver')) {
- return;
- }
-
- closeMenu();
- }}
- />
-
-
{CHAIN_ID === Networks.BOSTROM && (
)}
+
{children}
-
);
diff --git a/src/layouts/ui/ActionBar.module.scss b/src/layouts/ui/ActionBar.module.scss
new file mode 100644
index 000000000..a299f968c
--- /dev/null
+++ b/src/layouts/ui/ActionBar.module.scss
@@ -0,0 +1,33 @@
+.ActionBarContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ // position: fixed;
+ bottom: 20px;
+ left: 0;
+ padding: 10px 0;
+ background: linear-gradient(0deg,
+ rgba(0, 0, 0, 0.93) 76%,
+ rgba(0, 0, 0, 0) 100%);
+ z-index: 2;
+
+ &Content {
+ max-width: 1000px;
+ flex-grow: 1;
+ display: flex;
+ align-items: flex-end;
+ gap: 25px;
+ justify-content: center;
+ position: relative;
+ padding: 0 70px;
+ padding-bottom: 10px;
+ }
+
+ @media (max-width: 540px) {
+ &Content {
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/layouts/ui/ActionBar.tsx b/src/layouts/ui/ActionBar.tsx
new file mode 100644
index 000000000..5be769f9a
--- /dev/null
+++ b/src/layouts/ui/ActionBar.tsx
@@ -0,0 +1,21 @@
+import Commander from 'src/containers/application/Header/Commander/Commander';
+import styles from './ActionBar.module.scss';
+
+function ActionBarContainer({ children }) {
+ return (
+
+ );
+}
+
+function ActionBar() {
+ return (
+
+
+
+
+ );
+}
+
+export default ActionBar;
diff --git a/src/pages/oracle/landing/OracleLanding.module.scss b/src/pages/oracle/landing/OracleLanding.module.scss
index 8b8e8c1fb..7ffa0ef6e 100644
--- a/src/pages/oracle/landing/OracleLanding.module.scss
+++ b/src/pages/oracle/landing/OracleLanding.module.scss
@@ -138,7 +138,7 @@ $mobile-breakpoint: 480px;
.graphWrapper {
position: fixed;
- left: 10px;
+ left: 0px;
bottom: 10px;
z-index: 3;
@@ -148,7 +148,7 @@ $mobile-breakpoint: 480px;
overflow: hidden;
- border-radius: 10px;
+ border-radius: 50% 50% 50% 0;
border: 1px solid rgba(118, 255, 3, 0.1);
.enlargeBtn {
diff --git a/src/pages/oracle/landing/OracleLanding.tsx b/src/pages/oracle/landing/OracleLanding.tsx
index 01c29dfcb..adda0b9b3 100644
--- a/src/pages/oracle/landing/OracleLanding.tsx
+++ b/src/pages/oracle/landing/OracleLanding.tsx
@@ -1,7 +1,7 @@
import { ActionBar, Button, Tabs } from 'src/components';
import { routes } from 'src/routes';
import { useEffect, useRef, useState } from 'react';
-import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
+// import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
import { Stars } from 'src/containers/portal/components';
import { useDevice } from 'src/contexts/device';
@@ -13,7 +13,7 @@ import styles from './OracleLanding.module.scss';
import KeywordButton from './components/KeywordButton/KeywordButton';
import Stats from './Stats/Stats';
-import graphDataPrepared from './graphDataPrepared.json';
+// import graphDataPrepared from './graphDataPrepared.json';
import { TitleType } from './type';
const mapTitleTypeToTitle = {
@@ -88,25 +88,25 @@ function OracleLanding() {
const isMobile =
viewportWidth <= Number(styles.mobileBreakpoint.replace('px', ''));
- useEffect(() => {
- dispatch(setFocus(true));
+ // useEffect(() => {
+ // dispatch(setFocus(true));
- const timeout = setTimeout(() => {
- setIsRenderGraph(true);
- }, 1000 * 1.5);
+ // const timeout = setTimeout(() => {
+ // setIsRenderGraph(true);
+ // }, 1000 * 1.5);
- return () => {
- clearTimeout(timeout);
- };
- }, [dispatch]);
+ // return () => {
+ // clearTimeout(timeout);
+ // };
+ // }, [dispatch]);
- useEffect(() => {
- if (!ref.current) {
- return;
- }
+ // useEffect(() => {
+ // if (!ref.current) {
+ // return;
+ // }
- ref.current.style.setProperty('--graph-size', `${graphSize}px`);
- }, [ref, graphSize]);
+ // ref.current.style.setProperty('--graph-size', `${graphSize}px`);
+ // }, [ref, graphSize]);
const { title, description, text } = listConfig[titleType];
@@ -144,7 +144,7 @@ function OracleLanding() {
{[
diff --git a/src/pages/robot/Brain/Brain.module.scss b/src/pages/robot/Brain/Brain.module.scss
new file mode 100644
index 000000000..3a81a2e97
--- /dev/null
+++ b/src/pages/robot/Brain/Brain.module.scss
@@ -0,0 +1,10 @@
+.wrapper {
+ display: grid;
+}
+
+
+.tabs {
+ padding: 10px 0px;
+ width: clamp(300px, 100%, 380px);
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index 33b4289cc..67ee819b9 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -1,24 +1,56 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useAdviser } from 'src/features/adviser/context';
-import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
+import { Tabs } from 'src/components';
import { useRobotContext } from '../robot.context';
+import TreedView from './ui/TreedView';
+import styles from './Brain.module.scss';
+import { LIMIT_GRAPH } from './utils';
+import GraphView from './ui/GraphView';
-const limit = 1000;
+enum TabsKey {
+ list = 'list',
+ graph = 'graph',
+}
function Brain() {
const { address } = useRobotContext();
+ const [selected, setSelected] = useState(TabsKey.list);
const { setAdviser } = useAdviser();
useEffect(() => {
setAdviser(
<>
neurons public knowledge cybergraph
- that is how last {limit} cyberlinks looks like
+ {selected === TabsKey.graph && (
+ <> that is how last {LIMIT_GRAPH} cyberlinks looks like
+ )}
);
- }, [setAdviser]);
+ }, [setAdviser, selected]);
+
+ let content;
+
+ if (selected === TabsKey.list) {
+ content =
;
+ }
+
+ if (selected === TabsKey.graph) {
+ content =
;
+ }
- return
;
+ return (
+
+
+ {
+ return { key: item, onClick: () => setSelected(item) };
+ })}
+ selected={selected}
+ />
+
+ {content}
+
+ );
}
export default Brain;
diff --git a/src/pages/robot/Brain/ui/FetchContent/FetchContent.tsx b/src/pages/robot/Brain/ui/FetchContent/FetchContent.tsx
new file mode 100644
index 000000000..0cf9042fa
--- /dev/null
+++ b/src/pages/robot/Brain/ui/FetchContent/FetchContent.tsx
@@ -0,0 +1,31 @@
+import { Cid, Dots } from 'src/components';
+import ContentIpfs from 'src/components/contentIpfs/contentIpfs';
+import useParticleDetails from 'src/features/particle/useParticleDetails';
+
+function FetchContent({ cid, parentId }: { cid: string; parentId: string }) {
+ const { data, loading } = useParticleDetails(
+ cid!,
+ {
+ skip: Boolean(!cid),
+ },
+ parentId
+ );
+
+ let content;
+
+ if (loading) {
+ content = (
+
+ resolving particle
+
+ );
+ } else {
+ content = (
+
+ );
+ }
+
+ return
{content};
+}
+
+export default FetchContent;
diff --git a/src/pages/robot/Brain/ui/FetchContentFrom/FetchContentFrom.tsx b/src/pages/robot/Brain/ui/FetchContentFrom/FetchContentFrom.tsx
new file mode 100644
index 000000000..5baf716c7
--- /dev/null
+++ b/src/pages/robot/Brain/ui/FetchContentFrom/FetchContentFrom.tsx
@@ -0,0 +1,34 @@
+import { Cid } from 'src/components';
+import useParticleDetails from 'src/features/particle/useParticleDetails';
+import { trimString } from 'src/utils/utils';
+
+function FetchContentFrom({
+ cid,
+ parentId,
+}: {
+ cid: string;
+ parentId: string;
+}) {
+ const { data, loading } = useParticleDetails(
+ cid!,
+ {
+ skip: Boolean(!cid),
+ },
+ parentId
+ );
+
+ let content = trimString(cid);
+
+ if (
+ !loading &&
+ data?.type === 'text' &&
+ data.content &&
+ data.content?.length <= 100
+ ) {
+ content = data.content;
+ }
+
+ return
{content};
+}
+
+export default FetchContentFrom;
diff --git a/src/pages/robot/Brain/ui/GraphView.tsx b/src/pages/robot/Brain/ui/GraphView.tsx
new file mode 100644
index 000000000..202356780
--- /dev/null
+++ b/src/pages/robot/Brain/ui/GraphView.tsx
@@ -0,0 +1,16 @@
+import useCyberlinks from 'src/features/cyberlinks/CyberlinksGraph/useCyberlinks';
+import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
+import { LIMIT_GRAPH } from '../utils';
+
+function GraphView({ address }: { address?: string }) {
+ const { data: fetchData, loading } = useCyberlinks(
+ { address },
+ {
+ limit: LIMIT_GRAPH,
+ }
+ );
+
+ return
;
+}
+
+export default GraphView;
diff --git a/src/pages/robot/Brain/ui/TreedItem/TreedItem.module.scss b/src/pages/robot/Brain/ui/TreedItem/TreedItem.module.scss
new file mode 100644
index 000000000..6a5195166
--- /dev/null
+++ b/src/pages/robot/Brain/ui/TreedItem/TreedItem.module.scss
@@ -0,0 +1,37 @@
+.wrapper {
+ display: grid;
+ grid-template-columns: 150px 1fr;
+ gap: 20px;
+ align-items: center;
+ justify-items: flex-end;
+ max-height: 200px;
+
+ &>div>a {
+ color: #fff;
+
+ &:hover {
+ color: var(--primary-color);
+ }
+ }
+}
+
+.cidFrom {
+ width: 100%;
+}
+
+
+.content {
+ word-break: break-word;
+ padding: 13px 10px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+
+ font-size: 14px;
+ min-height: 50px;
+ min-width: 100px;
+ max-width: 62%;
+
+ align-self: flex-end;
+}
\ No newline at end of file
diff --git a/src/pages/robot/Brain/ui/TreedItem/TreedItem.tsx b/src/pages/robot/Brain/ui/TreedItem/TreedItem.tsx
new file mode 100644
index 000000000..734a7d47d
--- /dev/null
+++ b/src/pages/robot/Brain/ui/TreedItem/TreedItem.tsx
@@ -0,0 +1,27 @@
+import { Display } from 'src/components';
+import styles from './TreedItem.module.scss';
+import FetchContent from '../FetchContent/FetchContent';
+import FetchContentFrom from '../FetchContentFrom/FetchContentFrom';
+
+function TreedItem({
+ link,
+ address,
+}: {
+ link: { from: string; to: string };
+ address: string;
+}) {
+ return (
+
+
+
+ );
+}
+
+export default TreedItem;
diff --git a/src/pages/robot/Brain/ui/TreedView.modile.scss b/src/pages/robot/Brain/ui/TreedView.modile.scss
new file mode 100644
index 000000000..8b1e1b445
--- /dev/null
+++ b/src/pages/robot/Brain/ui/TreedView.modile.scss
@@ -0,0 +1,4 @@
+.wrapper {
+ display: grid;
+ gap: 20px;
+}
\ No newline at end of file
diff --git a/src/pages/robot/Brain/ui/TreedView.tsx b/src/pages/robot/Brain/ui/TreedView.tsx
new file mode 100644
index 000000000..bdb73bfd0
--- /dev/null
+++ b/src/pages/robot/Brain/ui/TreedView.tsx
@@ -0,0 +1,76 @@
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { v4 as uuidv4 } from 'uuid';
+import { useState } from 'react';
+import {
+ Order_By as OrderBy,
+ useCyberlinksByParticleQuery,
+} from 'src/generated/graphql';
+import { LIMIT_TREED } from '../utils';
+import TreedItem from './TreedItem/TreedItem';
+import styles from './TreedView.modile.scss';
+
+function TreedView({ address }: { address?: string }) {
+ const [hasMore, setHasMore] = useState(true);
+
+ let where;
+ if (address) {
+ where = { neuron: { _eq: address } };
+ } else {
+ where = {};
+ }
+
+ const { loading, error, data, fetchMore } = useCyberlinksByParticleQuery({
+ variables: {
+ where,
+ orderBy: { height: OrderBy.Desc },
+ limit: LIMIT_TREED,
+ },
+ });
+
+ const fetchMoreData = async () => {
+ setTimeout(() => {
+ fetchMore({
+ variables: {
+ limit: LIMIT_TREED,
+ offset: data?.cyberlinks.length,
+ },
+ updateQuery: (prev, { fetchMoreResult }) => {
+ if (!fetchMoreResult) {
+ return prev;
+ }
+
+ setHasMore(fetchMoreResult.cyberlinks.length > 0);
+
+ return {
+ ...prev,
+ cyberlinks: [...prev.cyberlinks, ...fetchMoreResult.cyberlinks],
+ };
+ },
+ });
+ }, 2000);
+ };
+
+ return (
+
Loading}
+ className={styles.wrapper}
+ >
+ {data?.cyberlinks.map((item) => {
+ const key = uuidv4();
+
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default TreedView;
diff --git a/src/pages/robot/Brain/utils.ts b/src/pages/robot/Brain/utils.ts
new file mode 100644
index 000000000..8307b9fd7
--- /dev/null
+++ b/src/pages/robot/Brain/utils.ts
@@ -0,0 +1,3 @@
+export const LIMIT_GRAPH = 1000;
+
+export const LIMIT_TREED = 30;
diff --git a/src/pages/robot/Layout/Layout.module.scss b/src/pages/robot/Layout/Layout.module.scss
index 799dc7707..f59674cc3 100644
--- a/src/pages/robot/Layout/Layout.module.scss
+++ b/src/pages/robot/Layout/Layout.module.scss
@@ -1,10 +1,10 @@
@import '../../../layouts//variables.module.scss';
.wrapper {
+ width: 60%;
+ margin: 0 auto;
display: grid;
- justify-content: center;
align-items: flex-start;
- grid-template-columns: 1fr minmax(200px, 62%) 1fr;
// padding for action bar, if scroll bottom
padding-bottom: $actionBarHeight;
diff --git a/src/pages/robot/Layout/Layout.tsx b/src/pages/robot/Layout/Layout.tsx
index d0e5891a5..806fe194c 100644
--- a/src/pages/robot/Layout/Layout.tsx
+++ b/src/pages/robot/Layout/Layout.tsx
@@ -1,17 +1,15 @@
import { Outlet } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import Loader2 from 'src/components/ui/Loader2';
-import useMenuCounts from './useMenuCounts';
-import RobotHeader from './RobotHeader/RobotHeader';
import { useRobotContext } from '../robot.context';
import WrappedActionBar from './WrappedActionBar';
import styles from './Layout.module.scss';
-import RobotMenu from './RobotMenu/RobotMenu';
+import useMenuCounts from './useMenuCounts';
+import RobotHeader from './RobotHeader/RobotHeader';
function Layout() {
- const { address, isOwner, isLoading, nickname } = useRobotContext();
-
+ const { address, isLoading, nickname } = useRobotContext();
const counts = useMenuCounts(address);
return (
@@ -19,22 +17,18 @@ function Layout() {
robot {nickname || address || ''}
-
-
{isLoading ? (
) : (
<>
- {!isOwner && }
-
+
)}
-
- )}
-