Feat/social connections

Twitter-Start/package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@cyberlab/cyberconnect": "^4.4.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.18.7",
     "assert": "^2.0.0",
     "crypto-browserify": "^3.12.0",
+    "graphql": "^16.4.0",
+    "graphql-request": "^4.2.0",
     "https-browserify": "^1.0.0",
     "moralis": "^1.3.2",
     "os-browserify": "^0.3.0",
@@ -42,9 +45,9 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ]
   }
 }

Twitter-Start/src/components/FollowBtn.css

@@ -0,0 +1,13 @@
+.followButton {
+    background-color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    min-width: 80px;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 10px;
+    outline: none;
+}
+

Twitter-Start/src/components/FollowBtn.js

@@ -0,0 +1,39 @@
+import React from "react";
+import "./FollowBtn.css";
+import CyberConnect, { Env, Blockchain } from "@cyberlab/cyberconnect";
+
+const cyberConnect = new CyberConnect({
+    namespace: "CyberConnect",
+    env: Env.PRODUCTION,
+    chain: Blockchain.ETH,
+    provider: window.ethereum
+});
+
+function FollowButton({ address, isFollowing }) {
+
+    const handleOnClick = async () => {
+        try {
+            if(isFollowing) {
+                await cyberConnect.disconnect(address);
+                alert(`Success: you've unfollowed ${address}!`);
+            } else {
+                await cyberConnect.connect(address);
+                alert(`Success: you're following ${address}!`);
+            }
+            window.location.reload();
+        } catch (error) {
+            console.error(error.message);
+        }
+    };
+
+  return (
+        <button
+            className="followButton"
+            onClick={handleOnClick}
+        >
+            {isFollowing ? "Unfollow" : "Follow"}
+        </button>
+    );
+}
+
+export default FollowButton;

Twitter-Start/src/components/Rightbar.css

@@ -3,10 +3,10 @@
   width: 80%;
 }
 
-.trends {
+.trends,
+.popular {
   background-color: #222b34;
   border-radius: 25px;
-  min-height: calc(100vh - 200px);
   max-width:290px;
   margin-top: 40px;
   padding: 20px;
@@ -45,3 +45,37 @@
     padding: 15px;
     color:#1DA1F2;
 }
+
+.popularProfile {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px 0px;
+}
+
+.popularDetails {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 38px auto;
+    grid-gap: 10px;
+}
+
+.popularImg,
+.popularDetails img {
+    background-color: white;
+    border-radius: 50%;
+    width: 38px;
+    height: 38px;
+}
+
+.popularDetails div:first-child {
+    color: white;
+    font-size: 16px;
+    font-weight: lighter;
+}
+
+.popularDetails div:last-child {
+    color: rgb(114, 114, 114);
+    font-size: 14px;
+    font-weight: lighter;
+}

Twitter-Start/src/components/Rightbar.js

@@ -6,7 +6,8 @@ import academy from "../images/academy.png";
 import youtube from "../images/youtube.png";
 import js from "../images/js.png";
 import { Input } from "web3uikit";
-
+import FollowButton from "./FollowBtn";
+import GetPopularProfiles from "../queries/GetPopularProfiles";
 
 const Rightbar = () => {
   const trends = [
@@ -37,6 +38,8 @@ const Rightbar = () => {
     },
   ];
 
+  const popularProfiles = GetPopularProfiles();
+
   return (
     <>
     <div className="rightbarContent">
@@ -48,6 +51,33 @@ const Rightbar = () => {
         >
       </Input>
 
+    <div className="popular">
+      You might like
+      {
+        popularProfiles.length > 0 &&
+        popularProfiles.map((elem, idx) => (
+          <div key={idx} className="popularProfile">
+            <div className="popularDetails">
+              <div className="popularImg">
+                {
+                  elem.avatar &&
+                  <img src={elem.avatar}></img>
+                }
+              </div>
+              <div>
+                <div>{elem.domain ? elem.domain : elem.address}</div>
+                <div>{elem.recommendationReason}</div>
+              </div>
+            </div>
+            <FollowButton
+              address={elem.address}
+              isFollowing={elem.isFollowing}
+            />
+          </div>
+        ))
+      }
+    </div>
+
     <div className="trends">
       News For You
       {trends.map((e) => {

Twitter-Start/src/index.css

@@ -12,3 +12,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+iframe {
+  display: none;
+}

Twitter-Start/src/pages/Profile.css

@@ -67,6 +67,20 @@
     cursor: pointer;
 }
 
+.profileFollowersAndFollowings {
+    color: rgb(114, 114, 114);
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 200px;
+    padding: 20px 40px;
+}
+
+.profileFollowersAndFollowings span:first-child {
+    color: white;
+    margin-right: 4px;
+}
+
 .profileTabs {
     display: flex;
     justify-content: center;

Twitter-Start/src/pages/Profile.js

@@ -4,19 +4,22 @@ import './Profile.css';
 import { defaultImgs } from "../defaultimgs";
 import TweetInFeed from "../components/TweetInFeed";
 import { useMoralis } from "react-moralis";
-
+import GetIdentity from "../queries/GetIdentity";
 
 const Profile = () => {
   const { Moralis} = useMoralis();
   const user = Moralis.User.current();
 
+  // Get the number of followers and followings using CyberConnect GraphQL endpoint
+  const { followingCount, followerCount } = GetIdentity();
+
   return (
     <>
     <div className="pageIdentify">Profile</div>
     <img className="profileBanner" src={user.attributes.banner ? user.attributes.banner : defaultImgs[1]}></img>
     <div className="pfpContainer">
       <img className="profilePFP" src={user.attributes.pfp ? user.attributes.pfp : defaultImgs[0]}></img>
-      <div className="profileName">{user.attributes.username.slice(0, 6)}</div>
+      <div className="profileName">{user.attributes.username.slice(0, 7)}</div>
       <div className="profileWallet">{`${user.attributes.ethAddress.slice(0, 4)}...
             ${user.attributes.ethAddress.slice(38)}`}</div>
       <Link to="/settings">
@@ -25,6 +28,16 @@ const Profile = () => {
       <div className="profileBio">
       {user.attributes.bio}
       </div>
+      <div className="profileFollowersAndFollowings">
+            <div>
+                <span><strong>{followingCount ? followingCount : 0}</strong></span>
+                <span>Following</span>
+            </div>
+            <div>
+                <span><strong>{followerCount ? followerCount: 0}</strong></span>
+                <span>Followers</span>
+            </div>
+      </div>
       <div className="profileTabs">
           <div className="profileTab">
           Your Tweets

Twitter-Start/src/queries/GetIdentity.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { GraphQLClient, gql } from "graphql-request";
+import { useMoralis } from "react-moralis";
+
+// CyberConnect Protocol endpoint
+const CYBERCONNECT_ENDPOINT = "https://api.cybertino.io/connect/";
+
+// Initialize the GraphQL Client
+const client = new GraphQLClient(CYBERCONNECT_ENDPOINT);
+
+// You can add/remove fields in query
+export const GET_IDENTITY = gql`
+    query($address: String!) {
+        identity(address: $address) {
+            domain
+            followerCount
+            followingCount
+        }
+    }
+`;
+
+export default function GetIdentity() {
+    // User account
+    const { Moralis} = useMoralis();
+    const user = Moralis.User.current();
+
+    const [identity, setIdentity] = useState({});
+
+    useEffect(() => {
+        if(!user?.attributes?.ethAddress) return;
+
+        client
+        .request(GET_IDENTITY, {
+            address: user.attributes.ethAddress
+        })
+        .then((res) => {
+            setIdentity(res?.identity);
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+    }, [user]);
+
+    return {
+        followingCount: identity.followingCount,
+        followerCount: identity.followerCount
+    }
+}

Twitter-Start/src/queries/GetPopularProfiles.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { GraphQLClient, gql } from "graphql-request";
+import { useMoralis } from "react-moralis";
+
+// CyberConnect Protocol endpoint
+const CYBERCONNECT_ENDPOINT = "https://api.cybertino.io/connect/";
+
+// Initialize the GraphQL Client
+const client = new GraphQLClient(CYBERCONNECT_ENDPOINT);
+
+// You can add/remove fields in query
+export const GET_POPULAR = gql`
+    query($fromAddr: String!, $first: Int, $tags: TagsInput!) {
+        popular(fromAddr: $fromAddr, first: $first, tags: $tags) {
+            list {
+                address
+                domain
+                avatar
+                recommendationReason
+                isFollowing
+            }
+        }
+    }
+`;
+
+export default function GetPopularProfiles() {
+    // User account
+    const { Moralis} = useMoralis();
+    const user = Moralis.User.current();
+
+    const [popularProfiles, setPopularProfiles] = useState([]);
+
+    useEffect(() => {
+        if(!user?.attributes?.ethAddress) return;
+
+        client
+        .request(GET_POPULAR, {
+            fromAddr: user.attributes.ethAddress,
+            first: 5,
+            tags: {
+                list: ["PLAZA"]
+            }
+        })
+        .then((res) => {
+            setPopularProfiles(res.popular.list);
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+    }, [user]);
+
+    return popularProfiles;
+}