102 |
166 | );
167 | }
168 | )}
169 |
103 | {value.avatar ? (
104 |
112 | 
117 |
118 | ) : (
119 |
127 | 
134 |
135 | )}
136 |
137 |
138 | {value.ens ? (
139 |
148 | {value.ens}
149 |
150 | ) : (
151 |
152 | )}
153 |
162 | {value?.address}
163 |
164 |
165 |
46 |
268 | );
269 | };
270 |
271 | NavBar.displayName = "NavBar";
272 |
--------------------------------------------------------------------------------
/src/components/NftListItem/index.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | margin-right: 12px;
3 | margin-bottom: 8px;
4 | border-radius: 50%;
5 | }
6 |
7 | .button:hover {
8 | outline: solid;
9 | outline-offset: 2px;
10 | }
11 |
12 | .image {
13 | width: 64px;
14 | height: 64px;
15 | border-radius: 50%;
16 | }
17 |
18 | .tooltipTitle {
19 | font-family: "Outfit";
20 | text-align: center;
21 | font-weight: 600;
22 | font-size: x-large;
23 | }
24 |
25 | .tooltipSubtitle {
26 | font-family: "Outfit";
27 | text-align: center;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/NftListItem/index.tsx:
--------------------------------------------------------------------------------
1 | import ImageNotSupportedIcon from "@mui/icons-material/ImageNotSupported";
2 | import { ButtonBase, Tooltip, Typography } from "@mui/material";
3 | import styles from "./index.module.css";
4 |
5 | type Props = {
6 | name: string;
7 | imageUrl: string | null;
8 | onClick: () => void;
9 | };
10 |
11 | export const NftListItem = ({ name, imageUrl, onClick }: Props) => {
12 | return (
13 |
47 | {
55 | router.push("/");
56 | }}
57 | />
58 |
59 |
61 |
75 |
89 |
90 |
116 |
117 |
136 | {" "}
137 |
148 | Help
149 |
150 |
160 | About
161 |
162 |
171 | CyberGraph is a 3D-graph based, user based social
172 | connection explorer powered by{" "}
173 |
178 | CyberConnect
179 |
180 | .{" "}
181 |
182 |
191 | It has some cool features like 3d node graph,
192 | dynamic loading bar, immersive user experience,
193 | cyber mode(10-hops friendship network display) and
194 | focus mode(aggregated connection display)
195 |
196 |
205 | This is an open-sourced project. Please feel free to
206 | check and contribute on the{" "}
207 |
214 | GitHub
215 | {" "}
216 | page.
217 |
218 |
228 | Controls
229 |
230 |
239 | Left-click: rotate
240 |
241 |
250 | Right-click: pan
251 |
252 |
261 | Mouse-wheel: zoom
262 |
263 |
264 |
265 |
267 |
28 | {imageUrl ? (
29 | 
30 | ) : (
31 |
40 | {name}
41 |
42 | {description && (
43 |
44 | {description}
45 |
46 | )}
47 |
53 | View on OpenSea
54 |
55 |
56 |
21 | {imageUrl ? (
22 |
23 | ) : (
24 |
33 | {name}
34 |
35 | {description && (
36 |
37 | {description}
38 |
39 | )}
40 |
41 |
95 |
96 | POAPs
97 |
98 |
117 |
99 | {isLoading ? (
100 | handleClickPoap(poap)}
108 | />
109 | ))
110 | ) : (
111 |
112 | No POAPS :(
113 |
114 | )}
115 |
116 |
118 |
119 | NFTs Gallery
120 |
121 |
140 | {nftModalInfo && (
141 |
122 | {isLoading ? (
123 | handleClickNft(nft)}
131 | />
132 | ))
133 | ) : (
134 |
135 | No NFTs :(
136 |
137 | )}
138 |
139 |
41 | {/* userInfoSection */}
42 | setGraphAddress(selectAddress)}
260 | sx={{
261 | ":hover": {
262 | bgcolor: "#555",
263 | },
264 | fontFamily: "Outfit",
265 | }}
266 | >
267 | EXPLORE THIS ADDRESS!
268 |
269 |
270 |
271 | );
272 | };
273 |
274 | UserPanel.displayName = "UserPanel";
275 |
--------------------------------------------------------------------------------
/src/components/WalletConnectButton/index.module.css:
--------------------------------------------------------------------------------
1 | /* src\components\WalletConnectButton\index.module.css */
2 | .walletInfo {
3 | font-weight: bold;
4 | padding: 1rem;
5 | color: white;
6 | text-align: center;
7 | display: flex;
8 | align-items: center;
9 | }
10 |
11 | .connectWalletButton {
12 | background-color: #fff;
13 | border-radius: 20px;
14 | box-sizing: border-box;
15 | color: #000;
16 | font-size: 16px;
17 | font-weight: 600;
18 | padding: 16px 36px;
19 | text-align: center;
20 | transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
21 | width: 250px;
22 | box-sizing: border-box;
23 | border: 2px solid white;
24 | font-family: "Outfit";
25 | }
26 |
27 | .connectWalletButton:hover {
28 | transform: translateY(-2px);
29 | color: #ffffff;
30 | background-color: rgb(0, 0, 0);
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/WalletConnectButton/index.tsx:
--------------------------------------------------------------------------------
1 | //src\components\WalletConnectButton\index.tsx
2 |
3 | import { useWeb3 } from "@/context/web3Context";
4 | import { formatAddress } from "@/utils/helper";
5 | import LoadingButton from "@mui/lab/LoadingButton";
6 | import { useCallback, useState } from "react";
7 | import styles from "./index.module.css";
8 |
9 | export const WalletConnectButton: React.FC = () => {
10 | //get user logged in wallet address/ens, get connect wallet function
11 | const { connectWallet, address, ens } = useWeb3();
12 |
13 | const [loading, setLoading] = useState
43 | {/* User Avatar from ENS */}
44 |
115 | {/* Following & Followers Section */}
116 |
45 | {identity.avatar ? (
46 |
54 | 
61 |
62 | ) : (
63 |
71 | ![{""}]({"/Sample_User_Icon.png"})
78 |
79 | )}
80 | {address && address !== selectAddress && (
81 |
91 | {/* User Name from ENS or therir address*/}
92 |
78 |
79 | )}
80 | {address && address !== selectAddress && (
81 |
93 | {identity.ens ? (
94 |
101 | {identity.ens}
102 |
103 | ) : (
104 |
111 | {identity?.address}
112 |
113 |
114 |
117 |
154 |
155 | {/* POAPs and NFTs */}
156 |
118 | [
127 | setListType(false), //sets list modal to show followers
128 | setShowList(true),
129 | ]}
130 | >
131 | {identity.followerCount}
132 |
133 | Followers
134 |
135 |
136 | [
145 | setListType(true), //sets list modal to show following
146 | setShowList(true),
147 | ]}
148 | >
149 | {identity.followingCount}
150 |
151 | Following
152 |
153 |
168 |
169 | External Links
170 |
171 |
254 | {/* Explore me button */}
255 |
256 |
172 | {identity.social.twitter && (
173 | ![{""}]({"/icons/opensea.png"})
201 |
202 |
203 |
210 | ![{""}]({"/icons/rarible.png"})
215 |
216 |
221 | ![{""}]({"/icons/foundation.png"})
226 |
227 |
232 | ![{""}]({"/icons/context.png"})
237 |
238 |
246 | ![{""}]({"/icons/etherscan.ico"})
251 |
252 |
253 |
174 | ![{""}]({"/icons/twitter.png"})
175 |
183 |
187 |
188 |
189 | )}
190 |
191 |
196 |
175 |
183 |
187 |
188 |
201 |
202 |
203 |
210 |
215 |
216 |
221 |
226 |
227 |
232 |
237 |
238 |
246 |
40 | {formatAddress(address)}
41 |
42 | {ens || null} 43 |
44 | )}
45 |
46 | );
47 | };
48 |
49 | WalletConnectButton.displayName = "WalletConnectButton";
50 |
--------------------------------------------------------------------------------
/src/config/config.ts:
--------------------------------------------------------------------------------
1 | // src\config\config.ts
2 |
3 | //where we fetch the cyberconnect connections data
4 | export const CYBERCONNECT_ENDPOINT: string =
5 | "https://api.cybertino.io/connect/";
6 |
7 | //which we used for our default graph address
8 | export const DEFAULT_ADDRESS: string =
9 | "0x148d59faf10b52063071eddf4aaf63a395f2d41c";
10 |
--------------------------------------------------------------------------------
/src/context/GraphContext.tsx:
--------------------------------------------------------------------------------
1 | // src\context\GraphContext.tsx
2 |
3 | import { GET_ADDR_CONNECTION_QUERY } from "@/graphql/queries/get_connections";
4 | import { GET_IDENTITY } from "@/graphql/queries/get_identity";
5 | import { GET_RECOMMENDATION } from "@/graphql/queries/get_recommendation";
6 | import {
7 | AllRecommendations,
8 | AllSocialConnections,
9 | SocialConnection,
10 | } from "@/types/AllSocialConnections";
11 | import { useQuery } from "@apollo/client";
12 | import {
13 | createContext,
14 | useCallback,
15 | useContext,
16 | useEffect,
17 | useState,
18 | } from "react";
19 | import { Identity } from "../types/identity";
20 | import { useWeb3 } from "./web3Context";
21 |
22 | export type GraphNode = {
23 | id: string;
24 | img: string;
25 | group: number;
26 | neighbors: string[];
27 | links: GraphLink[];
28 | };
29 |
30 | export type GraphLink = {
31 | source: string;
32 | target: string;
33 | value: number;
34 | };
35 |
36 | export type GraphData = {
37 | nodes: GraphNode[];
38 | links: GraphLink[];
39 | };
40 |
41 | export enum AppMode {
42 | CyberMode = 1,
43 | FocusMode,
44 | }
45 |
46 | export const DEFAULT_QUOTA = 10;
47 |
48 | interface GraphContextInterface {
49 | graphAddress: string; //the address which generate the 3d graph based on it
50 | selectAddress: string; //the address which to be shown in the User Panel
51 | graphData: GraphData | undefined; //the data which to create the graph based on graphAddress
52 | graphLoading: boolean; //graph loading status
53 | identity: Identity | null; //user indentity info including the ens, avatar, twitter etc.
54 | appMode: AppMode; //for changing the app mode between cyber mode or focus mode
55 | count: number; //
56 |
57 | setGraphAddress: (address: string) => void;
58 | setSelectAddress: (address: string) => void;
59 | setGraphData: (data: GraphData | undefined) => void;
60 | setGraphLoading: (loading: boolean) => void;
61 | setAppMode: (mode: AppMode) => void;
62 | }
63 |
64 | export const GraphContext = createContext42 | {ens || null} 43 |
16 |
20 |
31 |
32 |
33 |
34 |
35 |
36 |
42 |
44 |
45 |
46 |
47 |
48 |
49 | );
50 | }
51 |
52 | export default MyApp;
53 |
--------------------------------------------------------------------------------
/src/pages/api/get_balance_api.ts:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | import type { NextApiRequest, NextApiResponse } from "next";
3 |
4 | type Data = {
5 | name: string;
6 | };
7 |
8 | export default function handler(
9 | req: NextApiRequest,
10 | res: NextApiResponse
11 | ) {
12 | res.status(200).json({ name: "John Doe" });
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | // import { useRouter } from "next/router";
2 | import FocusGraph from "@/components/Graph/FocusGraphWrapper";
3 | import { NavBar } from "@/components/NavBar";
4 | import { UserPanel } from "@/components/UserPanel";
5 | import { DEFAULT_QUOTA, useGraph } from "@/context/GraphContext";
6 | import { useWeb3 } from "@/context/web3Context";
7 | import { LoadingButton } from "@mui/lab";
8 | import type { NextPage } from "next";
9 | import Head from "next/head";
10 | import { useEffect, useState } from "react";
11 | import ReactLoading from "react-loading";
12 | import styles from "../../styles/Home.module.css";
13 | import client from "../graphql/client";
14 |
15 | const Home: NextPage = () => {
16 | const [exploreMode, setExploreMode] = useState(false);
17 | const { address } = useWeb3();
18 | const { graphLoading, count } = useGraph();
19 |
20 | useEffect(() => {
21 | if (address) {
22 | setExploreMode(true);
23 | }
24 | }, [address]);
25 |
26 | useEffect(() => {
27 | client;
28 | }, []);
29 |
30 | // const router = useRouter();
31 | return (
32 |
33 |
34 | CyberGraph
35 |
39 |
40 |
41 |
63 | setExploreMode(true)}
70 | >
71 | Let's jump in!
72 |
73 |
74 | ) : (
75 |
83 | );
84 | };
85 |
86 | export default Home;
87 |
--------------------------------------------------------------------------------
/src/types/AllSocialConnections.ts:
--------------------------------------------------------------------------------
1 | // src\types\AllSocialConnections.ts
2 |
3 | export type SocialConnection = {
4 | address: string;
5 | alias: string;
6 | avatar: string;
7 | domain: string;
8 | ens: string;
9 | };
10 |
11 | export type SocialConnectionsPaginated = {
12 | pageInfo: {
13 | hasNextPage: boolean;
14 | hasPreviousPage: boolean;
15 | startCursor: string;
16 | endCursor: string;
17 | };
18 | list: SocialConnection[];
19 | };
20 |
21 | export type AllSocialConnections = {
22 | identity: {
23 | avatar: string;
24 | followers: SocialConnectionsPaginated;
25 | followings: SocialConnectionsPaginated;
26 | friends: SocialConnectionsPaginated;
27 | };
28 | };
29 |
30 | // Recommendation Data
31 |
32 | export type RecommendationData = {
33 | pageInfo: {
34 | hasNextPage: boolean;
35 | hasPreviousPage: boolean;
36 | startCursor: string;
37 | endCursor: string;
38 | };
39 | list: SocialConnection[];
40 | };
41 |
42 | export type AllRecommendations = {
43 | recommendations: {
44 | data: RecommendationData;
45 | };
46 | };
47 |
--------------------------------------------------------------------------------
/src/types/identity.ts:
--------------------------------------------------------------------------------
1 | export type Identity = {
2 | address: string;
3 | domain: string;
4 | ens: string;
5 | social: {
6 | twitter: string;
7 | };
8 | avatar: string;
9 | joinTime: number;
10 | followerCount: number;
11 | followingCount: number;
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/helper.ts:
--------------------------------------------------------------------------------
1 | //src\utils\helper.ts
2 |
3 | //format the address display
4 | export const formatAddress = (address: string) => {
5 | const len = address.length;
6 | return address.substr(0, 5) + "..." + address.substring(len - 4, len);
7 | };
8 | //check if the address is valid
9 | export const isValidAddr = (address: string) => {
10 | const re = /^0x[a-fA-F0-9]{40}$/;
11 | return address.match(re);
12 | };
13 |
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | /* styles\Home.module.css */
2 |
3 | .container {
4 | height: 100vh;
5 | display: flex;
6 | position: relative;
7 | }
8 |
9 | .main {
10 | min-height: 20rem;
11 | margin-top: 30rem;
12 | padding: 4rem 4rem;
13 | position: fixed;
14 | z-index: 2;
15 | display: flex;
16 | flex-direction: column;
17 | justify-content: center;
18 | }
19 |
20 | .title {
21 | margin: 0;
22 | line-height: 1.15;
23 | font-size: 4rem;
24 | color: white;
25 | }
26 |
27 | .jumpButton {
28 | color: rgb(0, 0, 0);
29 | background: white;
30 | width: 270px;
31 | height: 70px;
32 | font-size: x-large;
33 | border-radius: 20px;
34 | margin: 20px 5px;
35 | font-family: "Outfit";
36 | }
37 |
38 | .jumpButton:hover {
39 | color: white;
40 | background-color: rgb(0, 0, 0);
41 | border: solid white 2px;
42 | }
43 |
44 | .loadingSection {
45 | position: fixed;
46 | display: flex;
47 | padding: 80px 50px;
48 | }
49 |
50 | .loadingIcon {
51 | margin-right: 10px;
52 | }
53 |
54 | .loadingText {
55 | margin-top: 10px;
56 | color: "white";
57 | font-size: 20px;
58 | }
59 |
60 | .footer {
61 | color: white;
62 | font-weight: 300;
63 | margin-left: 6px;
64 | margin-top: 30rem;
65 | }
66 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | /* styles\globals.css */
2 |
3 | @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@300&display=swap");
4 |
5 | html,
6 | body {
7 | padding: 0;
8 | margin: 0;
9 | font-family: "Outfit", sans-serif;
10 | max-height: 100vh;
11 | background-color: black;
12 | }
13 |
14 | a {
15 | color: inherit;
16 | text-decoration: none;
17 | }
18 |
19 | * {
20 | box-sizing: border-box;
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": ".",
18 | "paths": {
19 | "@/*": ["src/*"],
20 | "@/components/*": ["src/components/*"]
21 | }
22 | },
23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
24 | "exclude": ["node_modules"]
25 | }
26 |
--------------------------------------------------------------------------------
43 | {count != 10 && (
44 |
61 | {!exploreMode ? (
62 |
57 | {" "}
58 | Loading {(100 * count) / DEFAULT_QUOTA} %
59 |
60 |