From e48cd57a91809c0294175702972f0962170cc446 Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Thu, 17 Nov 2022 10:09:00 +0800 Subject: [PATCH 1/8] refactor: Home --> HomePage --- pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index e2a5c5c..6f4a891 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -150,8 +150,8 @@ export function CitizenList() { ) } -const Home: NextPage = () => { - console.info('NextPage') +const HomePage: NextPage = () => { + console.info('HomePage') return ( <> From 296b20f7990b10ddb4984a0522c763fb851fcf8b Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Thu, 17 Nov 2022 10:48:47 +0800 Subject: [PATCH 2/8] refactor: Home --> HomePage --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 6f4a891..d99ddd6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -173,4 +173,4 @@ const HomePage: NextPage = () => { ) } -export default Home +export default HomePage From 597e1b26a967c2f2856c9b24df20af8bcdc42e9a Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Thu, 17 Nov 2022 15:44:55 +0800 Subject: [PATCH 3/8] feat: add citizen profile page --- components/CitizenCard.tsx | 9 +- pages/profile/[ethAddress].tsx | 199 +++++++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+), 5 deletions(-) create mode 100644 pages/profile/[ethAddress].tsx diff --git a/components/CitizenCard.tsx b/components/CitizenCard.tsx index 5726a37..e4f17d9 100644 --- a/components/CitizenCard.tsx +++ b/components/CitizenCard.tsx @@ -3,6 +3,7 @@ import GradientLink from './GradientLink' // @ts-expect-error import Blockies from 'react-blockies' + import { IdentificationIcon } from '@heroicons/react/24/outline' export default function CitizenCard({ @@ -12,7 +13,7 @@ export default function CitizenCard({ votingPower }: any) { return ( - +
@@ -22,9 +23,7 @@ export default function CitizenCard({
{ensName ? ( - <> - - + ) : ( )} @@ -37,7 +36,7 @@ export default function CitizenCard({ 🎗️ NationCred: ?/???
🗳️ Voting power: {votingPower.toFixed(2)} - link + link
diff --git a/pages/profile/[ethAddress].tsx b/pages/profile/[ethAddress].tsx new file mode 100644 index 0000000..053665f --- /dev/null +++ b/pages/profile/[ethAddress].tsx @@ -0,0 +1,199 @@ +import { NextPage } from "next" +import { useEffect, useRef, useState } from "react" + +// @ts-expect-error +import Blockies from 'react-blockies' + +import Papa from 'papaparse' + +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineController, + LineElement, + Title, + Tooltip, + Legend, + Filler, + ChartData +} from 'chart.js' +import { Chart } from 'react-chartjs-2' +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineController, + LineElement, + Filler, + Title, + Tooltip, + Legend +) + +export function NationCredChart({ profile }: any) { + console.info('NationCredChart') + + const chartRef = useRef(null) + const [chartData, setChartData] = useState>({ + datasets: [], + }) + + useEffect(() => { + console.info('useEffect') + const chart = chartRef.current + + if (!chart) { + return + } + + let colorGradient = chart.ctx.createLinearGradient(0, 0, 0, 400) + colorGradient.addColorStop(0, 'rgba(213, 163, 152, 0.2)') + colorGradient.addColorStop(1, 'rgba(213, 163, 152, 0.8)') + + // Fetch data from datasets repo + const citizenCountFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/f9e5b8d30b969815a918de619fa4e89a1c800ce3/data-sources/sourcecred/output/sourcecred-${profile.ethAddress}.csv` + console.info('Fetching SourceCred data:', citizenCountFileUrl) + Papa.parse(citizenCountFileUrl, { + download: true, + header: true, + skipEmptyLines: true, + dynamicTyping: true, + complete: (result: any) => { + console.info('result:', result) + + const week_ends: string[] = [] + const sourcecred_scores: number[] = [] + const discord_scores: number[] = [] + const discourse_scores: number[] = [] + const github_scores: number[] = [] + result.data.forEach((row: any, i: number) => { + console.info(`row ${i}`, row) + week_ends[i] = String(row.week_end) + sourcecred_scores[i] = Number(row.sourcecred_score) + discord_scores[i] = Number(row.discord_score) + discourse_scores[i] = Number(row.discourse_score) + github_scores[i] = Number(row.github_score) + }) + console.info('week_ends:', week_ends) + console.info('sourcecred_scores:', sourcecred_scores) + console.info('discord_scores:', discord_scores) + console.info('discourse_scores:', discourse_scores) + console.info('github_scores:', github_scores) + + const data = { + labels: week_ends, + datasets: [ + { + label: 'SourceCred score', + data: sourcecred_scores, + borderColor: 'rgba(213, 163, 152, 0.4)', + backgroundColor: colorGradient, + fill: true + }, + { + label: 'Discord score', + data: discord_scores, + borderColor: 'rgba(132, 116, 138, 0.2)' + }, + { + label: 'Discourse score', + data: discourse_scores, + borderColor: 'rgba(132, 116, 138, 0.4)' + }, + { + label: 'GitHub score', + data: github_scores, + borderColor: 'rgba(132, 116, 138, 0.8)' + } + ] + } + + setChartData(data) + } + }) + }, []) + + return +} + +const ProfilePage: NextPage = ({ profile }: any) => { + console.info('ProfilePage') + + console.info('profile:', profile) + + return ( + <> +
+ {profile.ensName ? ( + + ) : ( + + )} + +
+

+ {profile.ethAddress.substring(0, 6)}...{profile.ethAddress.slice(-4)} +

+

+ Citizen #??? +

+
+
+ +
+
+ +
+
+ +

🎗️ NationCred

+ +
+
+ +
+
+ +

🗳️ Voting Power

+ +
+
+ +
+
+ + ) +} + +export async function getStaticPaths() { + console.info('getStaticPaths') + + // TODO + + return { + paths: [ + { params: { ethAddress: '0x123abc' } }, + { params: { ethAddress: '0x456def' } } + ], + fallback: 'blocking' + } +} + +export async function getStaticProps(context: any) { + console.info('getStaticProps') + + console.info('context:', context) + + const ethAddress: string = context.params.ethAddress + console.info('ethAddress:', ethAddress) + + return { + props: { + profile: { ethAddress: ethAddress } + } + } +} + +export default ProfilePage From 31549daaa28329719601347d79d892dcb7f4279e Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Thu, 17 Nov 2022 16:39:05 +0800 Subject: [PATCH 4/8] refactor --- pages/profile/[ethAddress].tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/profile/[ethAddress].tsx b/pages/profile/[ethAddress].tsx index 053665f..614567f 100644 --- a/pages/profile/[ethAddress].tsx +++ b/pages/profile/[ethAddress].tsx @@ -53,9 +53,9 @@ export function NationCredChart({ profile }: any) { colorGradient.addColorStop(1, 'rgba(213, 163, 152, 0.8)') // Fetch data from datasets repo - const citizenCountFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/f9e5b8d30b969815a918de619fa4e89a1c800ce3/data-sources/sourcecred/output/sourcecred-${profile.ethAddress}.csv` - console.info('Fetching SourceCred data:', citizenCountFileUrl) - Papa.parse(citizenCountFileUrl, { + const sourceCredFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/f9e5b8d30b969815a918de619fa4e89a1c800ce3/data-sources/sourcecred/output/sourcecred-${profile.ethAddress}.csv` + console.info('Fetching SourceCred data:', sourceCredFileUrl) + Papa.parse(sourceCredFileUrl, { download: true, header: true, skipEmptyLines: true, From 3f245683286e162e734ea754b9355d3d5df5bfda Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:21:07 +0800 Subject: [PATCH 5/8] Update index.tsx --- pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index d99ddd6..48472d0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -56,7 +56,7 @@ export function CitizenChart() { gradientGreen.addColorStop(1, 'rgba(136, 241, 187, 0.3)') // Fetch data from datasets repo - const citizenCountFileUrl: string = 'https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/citizens/citizen-count-per-week.csv' + const citizenCountFileUrl: string = 'https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/citizens/output/citizen-count-per-week.csv' console.info('Fetching citizenCount data:', citizenCountFileUrl) Papa.parse(citizenCountFileUrl, { download: true, @@ -117,7 +117,7 @@ export function CitizenList() { console.info('CitizenList useEffect') // Fetch data from datasets repo - const citizenDataFileUrl: string = 'https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/citizens/citizens.csv' + const citizenDataFileUrl: string = 'https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/citizens/output/citizens.csv' console.info('Fetching citizen data:', citizenDataFileUrl) Papa.parse(citizenDataFileUrl, { download: true, From 486c03cb5505d93fc855f47123f744ecce0b0e11 Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Fri, 18 Nov 2022 10:02:11 +0800 Subject: [PATCH 6/8] feat: add dework to profile page --- pages/profile/[ethAddress].tsx | 80 ++++++++++++++++++++++++++++++++++ public/dework.svg | 21 +++++++++ 2 files changed, 101 insertions(+) create mode 100644 public/dework.svg diff --git a/pages/profile/[ethAddress].tsx b/pages/profile/[ethAddress].tsx index 614567f..46aea19 100644 --- a/pages/profile/[ethAddress].tsx +++ b/pages/profile/[ethAddress].tsx @@ -1,5 +1,6 @@ import { NextPage } from "next" import { useEffect, useRef, useState } from "react" +import dework from '../../public/dework.svg' // @ts-expect-error import Blockies from 'react-blockies' @@ -20,6 +21,7 @@ import { ChartData } from 'chart.js' import { Chart } from 'react-chartjs-2' +import Image from "next/image" ChartJS.register( CategoryScale, LinearScale, @@ -118,6 +120,76 @@ export function NationCredChart({ profile }: any) { return } +export function DeworkChart({ profile }: any) { + console.info('DeworkChart') + + const chartRef = useRef(null) + const [chartData, setChartData] = useState>({ + datasets: [], + }) + + useEffect(() => { + console.info('useEffect') + const chart = chartRef.current + + if (!chart) { + return + } + + let colorGradient = chart.ctx.createLinearGradient(0, 0, 0, 400) + colorGradient.addColorStop(0, 'rgba(231, 88, 143, 0.4)') + colorGradient.addColorStop(1, 'rgba(231, 88, 143, 0.2)') + + // Fetch data from datasets repo + const deworkFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/dework/output/dework-${profile.ethAddress}.csv` + console.info('Fetching Dework data:', deworkFileUrl) + Papa.parse(deworkFileUrl, { + download: true, + header: true, + skipEmptyLines: true, + dynamicTyping: true, + complete: (result: any) => { + console.info('result:', result) + + const week_ends: string[] = [] + const tasks_completed: number[] = [] + const task_points: number[] = [] + result.data.forEach((row: any, i: number) => { + console.info(`row ${i}`, row) + week_ends[i] = String(row.week_end) + tasks_completed[i] = Number(row.tasks_completed) + task_points[i] = Number(row.task_points) + }) + console.info('week_ends:', week_ends) + console.info('tasks_completed:', tasks_completed) + console.info('task_points:', task_points) + + const data = { + labels: week_ends, + datasets: [ + { + label: 'Tasks completed', + data: tasks_completed, + borderColor: 'rgba(231, 88, 143, 0.4)', + backgroundColor: colorGradient, + fill: true + }, + { + label: 'Task points ', + data: task_points, + borderColor: 'rgba(133, 114, 217, 0.4)' + } + ] + } + + setChartData(data) + } + }) + }, []) + + return +} + const ProfilePage: NextPage = ({ profile }: any) => { console.info('ProfilePage') @@ -156,6 +228,14 @@ const ProfilePage: NextPage = ({ profile }: any) => {
+

Dework

+ +
+
+ +
+
+

🗳️ Voting Power

diff --git a/public/dework.svg b/public/dework.svg new file mode 100644 index 0000000..bac5521 --- /dev/null +++ b/public/dework.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + From 275cbf053a6f0d31ad4a880b63c46f5a75535ef2 Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Fri, 18 Nov 2022 17:38:47 +0800 Subject: [PATCH 7/8] feat: add ens name and avatar to profile page (#17) closes #17 --- components/CitizenCard.tsx | 4 +-- .../{[ethAddress].tsx => [passportId].tsx} | 30 ++++++++++++------- 2 files changed, 22 insertions(+), 12 deletions(-) rename pages/profile/{[ethAddress].tsx => [passportId].tsx} (89%) diff --git a/components/CitizenCard.tsx b/components/CitizenCard.tsx index e4f17d9..63a33ab 100644 --- a/components/CitizenCard.tsx +++ b/components/CitizenCard.tsx @@ -13,7 +13,7 @@ export default function CitizenCard({ votingPower }: any) { return ( - +
@@ -36,7 +36,7 @@ export default function CitizenCard({ 🎗️ NationCred: ?/???
🗳️ Voting power: {votingPower.toFixed(2)} - link + link
diff --git a/pages/profile/[ethAddress].tsx b/pages/profile/[passportId].tsx similarity index 89% rename from pages/profile/[ethAddress].tsx rename to pages/profile/[passportId].tsx index 46aea19..6c1a3b4 100644 --- a/pages/profile/[ethAddress].tsx +++ b/pages/profile/[passportId].tsx @@ -1,5 +1,6 @@ -import { NextPage } from "next" import { useEffect, useRef, useState } from "react" +import { NextPage } from "next" +import Image from "next/image" import dework from '../../public/dework.svg' // @ts-expect-error @@ -21,7 +22,6 @@ import { ChartData } from 'chart.js' import { Chart } from 'react-chartjs-2' -import Image from "next/image" ChartJS.register( CategoryScale, LinearScale, @@ -199,17 +199,17 @@ const ProfilePage: NextPage = ({ profile }: any) => { <>
{profile.ensName ? ( - + ) : ( )}

- {profile.ethAddress.substring(0, 6)}...{profile.ethAddress.slice(-4)} + {profile.ensName ? profile.ensName : `${profile.ethAddress.substring(0, 6)}...${profile.ethAddress.slice(-4)}`}

- Citizen #??? + Citizen #{profile.passportId}

@@ -237,6 +237,8 @@ const ProfilePage: NextPage = ({ profile }: any) => {

🗳️ Voting Power

+ +

Voting power: {profile.votingPower.toFixed(2)}

@@ -254,8 +256,8 @@ export async function getStaticPaths() { return { paths: [ - { params: { ethAddress: '0x123abc' } }, - { params: { ethAddress: '0x456def' } } + // { params: { passportId: '0' } }, + // { params: { passportId: '1' } } ], fallback: 'blocking' } @@ -266,12 +268,20 @@ export async function getStaticProps(context: any) { console.info('context:', context) - const ethAddress: string = context.params.ethAddress - console.info('ethAddress:', ethAddress) + const passportId: string = context.params.passportId + console.info('passportId:', passportId) + + const citizensJsonUrl: string = 'https://raw.githubusercontent.com/nation3/nationcred-datasets/a04c42fb5f78f1c57304c31ecccc3032c98b9a8a/data-sources/citizens/output/citizens.json' + console.info('Fetching Citizen data:', citizensJsonUrl) + const response = await fetch(citizensJsonUrl) + const citizens = await response.json() + + const citizen = citizens[passportId] + console.info('citizen:', citizen) return { props: { - profile: { ethAddress: ethAddress } + profile: citizen } } } From c913b39a8d0c8bb62378ffd4ce6b43d1469ce6ec Mon Sep 17 00:00:00 2001 From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com> Date: Sun, 20 Nov 2022 12:40:49 +0800 Subject: [PATCH 8/8] refactor: update url of sourcecred datasource --- pages/profile/[passportId].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/profile/[passportId].tsx b/pages/profile/[passportId].tsx index 6c1a3b4..3ce361a 100644 --- a/pages/profile/[passportId].tsx +++ b/pages/profile/[passportId].tsx @@ -55,7 +55,7 @@ export function NationCredChart({ profile }: any) { colorGradient.addColorStop(1, 'rgba(213, 163, 152, 0.8)') // Fetch data from datasets repo - const sourceCredFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/f9e5b8d30b969815a918de619fa4e89a1c800ce3/data-sources/sourcecred/output/sourcecred-${profile.ethAddress}.csv` + const sourceCredFileUrl: string = `https://raw.githubusercontent.com/nation3/nationcred-datasets/main/data-sources/sourcecred/output/sourcecred-${profile.ethAddress}.csv` console.info('Fetching SourceCred data:', sourceCredFileUrl) Papa.parse(sourceCredFileUrl, { download: true,