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) => {
+
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,