diff --git a/Twitter-Start/package.json b/Twitter-Start/package.json index 87e1a720b..2f0b49692 100644 --- a/Twitter-Start/package.json +++ b/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" ] } } diff --git a/Twitter-Start/src/components/FollowBtn.css b/Twitter-Start/src/components/FollowBtn.css new file mode 100644 index 000000000..9e72e6509 --- /dev/null +++ b/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; +} + diff --git a/Twitter-Start/src/components/FollowBtn.js b/Twitter-Start/src/components/FollowBtn.js new file mode 100644 index 000000000..f9c9c9505 --- /dev/null +++ b/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 ( + + ); +} + +export default FollowButton; diff --git a/Twitter-Start/src/components/Rightbar.css b/Twitter-Start/src/components/Rightbar.css index 5c1ae5479..0a949941b 100644 --- a/Twitter-Start/src/components/Rightbar.css +++ b/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; +} diff --git a/Twitter-Start/src/components/Rightbar.js b/Twitter-Start/src/components/Rightbar.js index 2659592ab..6dce7453f 100644 --- a/Twitter-Start/src/components/Rightbar.js +++ b/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 ( <>