diff --git a/package.json b/package.json
index be6f25b18..38f368a86 100644
--- a/package.json
+++ b/package.json
@@ -181,6 +181,7 @@
"@types/react-router-dom": "^5.3.3",
"@uniswap/sdk": "^3.0.3",
"@xenova/transformers": "^2.17.0",
+ "aframe": "^1.6.0",
"apollo-boost": "^0.4.7",
"bech32": "^1.1.3",
"big.js": "^5.2.2",
diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainerVR.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainerVR.tsx
new file mode 100644
index 000000000..eb4e7b83d
--- /dev/null
+++ b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainerVR.tsx
@@ -0,0 +1,68 @@
+import { createPortal } from 'react-dom';
+import { Loading } from 'src/components';
+import { useAppSelector } from 'src/redux/hooks';
+import { selectCurrentAddress } from 'src/redux/features/pocket';
+import useCyberlinks from './useCyberlinks';
+import { PORTAL_ID } from '../../../containers/application/App';
+import LinksGraphVR from './CyberlinksGraphVR';
+
+type Props = {
+ address?: string;
+ toPortal?: boolean;
+ size?: number;
+ limit?: number;
+ data?: any;
+};
+
+function CyberlinksGraphContainer({
+ address,
+ toPortal,
+ size,
+ limit,
+ data,
+}: Props) {
+ const { data: fetchData, loading } = useCyberlinks(
+ { address },
+ {
+ limit,
+ skip: !!data,
+ }
+ );
+
+ const currentAddress = useAppSelector(selectCurrentAddress);
+
+ const content = loading ? (
+
+ ) : (
+
+ );
+
+ const portalEl = document.getElementById(PORTAL_ID);
+
+ return toPortal ? portalEl && createPortal(content, portalEl) : content;
+}
+
+export default CyberlinksGraphContainer;
diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphVR.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphVR.tsx
new file mode 100644
index 000000000..0acb90a55
--- /dev/null
+++ b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphVR.tsx
@@ -0,0 +1,222 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { ForceGraphVR } from 'react-force-graph';
+import GraphHoverInfoVR from './GraphHoverInfo/GraphHoverInfoVR';
+
+import styles from './CyberlinksGraph.module.scss';
+
+type Props = {
+ data: any;
+ // currentAddress?: string;
+ size?: number;
+};
+
+// before zoom in
+const INITIAL_CAMERA_DISTANCE = 2500;
+const DEFAULT_CAMERA_DISTANCE = 1300;
+const CAMERA_ZOOM_IN_EFFECT_DURATION = 5000;
+const CAMERA_ZOOM_IN_EFFECT_DELAY = 500;
+
+function CyberlinksGraph({ data, size }: Props) {
+ const [isRendering, setRendering] = useState(true);
+ const [touched, setTouched] = useState(false);
+ const [hoverNode, setHoverNode] = useState(null);
+
+ const fgRef = useRef();
+
+ // debug, remove later
+ useEffect(() => {
+ if (isRendering) {
+ console.time('rendering');
+ } else {
+ console.timeEnd('rendering');
+ }
+ }, [isRendering]);
+
+ // initial camera position, didn't find via props
+ useEffect(() => {
+ if (!fgRef.current) {
+ return;
+ }
+ // fgRef.current.cameraPosition({ z: INITIAL_CAMERA_DISTANCE });
+ }, [fgRef]);
+
+ // initial loading camera zoom effect
+ useEffect(() => {
+ // if (!fgRef.current || isRendering) {
+ // return;
+ // }
+
+ // setTimeout(() => {
+ // if (!fgRef.current) {
+ // return;
+ // }
+
+ // fgRef.current.cameraPosition(
+ // { z: DEFAULT_CAMERA_DISTANCE },
+ // null,
+ // CAMERA_ZOOM_IN_EFFECT_DURATION
+ // );
+ // }, CAMERA_ZOOM_IN_EFFECT_DELAY);
+ }, [fgRef, isRendering]);
+
+ useEffect(() => {
+ if (!fgRef.current) {
+ return;
+ }
+
+ function onTouch() {
+ setTouched(true);
+ }
+
+ // fgRef.current.controls().addEventListener('start', onTouch);
+
+ // return () => {
+ // if (fgRef.current) {
+ // fgRef.current.controls().removeEventListener('start', onTouch);
+ // }
+ // };
+ }, [fgRef]);
+
+ // orbit camera
+ useEffect(() => {
+ // if (!fgRef.current || touched || isRendering) {
+ // return;
+ // }
+
+ // let angle = 0;
+
+ // let interval = null;
+
+ // const timeout = setTimeout(() => {
+ // interval = setInterval(() => {
+ // fgRef.current.cameraPosition({
+ // x: DEFAULT_CAMERA_DISTANCE * Math.sin(angle),
+ // z: DEFAULT_CAMERA_DISTANCE * Math.cos(angle),
+ // });
+ // angle += Math.PI / 3000;
+ // }, 10);
+ // }, CAMERA_ZOOM_IN_EFFECT_DURATION + CAMERA_ZOOM_IN_EFFECT_DELAY);
+
+ // return () => {
+ // clearTimeout(timeout);
+ // clearInterval(interval);
+ // };
+ }, [fgRef, touched, isRendering]);
+
+ const handleNodeClick = useCallback(
+ (node) => {
+ if (!fgRef.current) {
+ return;
+ }
+
+ const distance = 300;
+ const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+ // fgRef.current.cameraPosition(
+ // { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+ // node,
+ // 5000
+ // );
+ },
+ [fgRef]
+ );
+
+ const handleLinkClick = useCallback(
+ (link) => {
+ if (!fgRef.current) {
+ return;
+ }
+
+ const node = link.target;
+ const distance = 300;
+ const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+ // fgRef.current.cameraPosition(
+ // { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+ // node,
+ // 5000
+ // );
+ },
+ [fgRef]
+ );
+
+ const handleNodeRightClick = useCallback((node) => {
+ window.open(`${window.location.origin}/ipfs/${node.id}`, '_blank');
+ }, []);
+
+ const handleLinkRightClick = useCallback((link) => {
+ window.open(
+ `${window.location.origin}/network/bostrom/tx/${link.name}`,
+ '_blank'
+ );
+ }, []);
+
+ const handleEngineStop = useCallback(() => {
+ console.log('ForceGraph3D engine stopped!');
+ setRendering(false);
+ }, []);
+
+ return (
+
+ {isRendering && (
+
rendering data...
+ )}
+
+
'rgba(0,100,235,1)'}
+ nodeOpacity={1.0}
+ nodeRelSize={8}
+ onNodeHover={setHoverNode}
+ linkColor={
+ // not working
+ (link) =>
+ // link.subject && link.subject === currentAddress
+ // ? 'red'
+ 'rgba(9,255,13,1)'
+ }
+ linkLabel=""
+ linkWidth={4}
+ linkCurvature={0.2}
+ linkOpacity={0.7}
+ linkDirectionalParticles={1}
+ linkDirectionalParticleColor={() => 'rgba(9,255,13,1)'}
+ linkDirectionalParticleWidth={4}
+ linkDirectionalParticleSpeed={0.015}
+ // linkDirectionalArrowRelPos={1}
+ // linkDirectionalArrowLength={10}
+ // linkDirectionalArrowColor={() => 'rgba(9,255,13,1)'}
+
+ onNodeClick={handleNodeRightClick}
+ onNodeRightClick={handleNodeClick}
+ onLinkClick={handleLinkRightClick}
+ onLinkRightClick={handleLinkClick}
+ onEngineStop={handleEngineStop}
+ />
+
+ {/* */}
+