From bfccf95eb5a248affde757c55ddaa8703b23a449 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 19 Oct 2024 21:34:15 +0200 Subject: [PATCH 01/19] feat: members list --- packages/nextjs/app/builders/page.tsx | 65 +++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 packages/nextjs/app/builders/page.tsx diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx new file mode 100644 index 0000000..a0bd280 --- /dev/null +++ b/packages/nextjs/app/builders/page.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { useState } from "react"; +import type { NextPage } from "next"; +import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; + +type Builder = { + name: string; + profileHref: string; + addressOrEns: string; +}; + +const Home: NextPage = () => { + const [builders] = useState([] as Builder[]); + + const { data: checkedInCounter } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "checkedInCounter", + }); + console.log(checkedInCounter); + + return ( + <> +
+
+

+ Builders +

+

+ Checked in builders count: {Number(checkedInCounter)} +

+
+ +
+
+
+ + + + + + + + + + {builders.map((builder, id) => ( + + + + + + ))} + +
NameAddress
{id} + {builder.name} + {builder.addressOrEns}
+
+
+
+
+ + ); +}; + +export default Home; From dcf950cd14b7dbc7395bfe69a5468044841814aa Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 19 Oct 2024 21:38:35 +0200 Subject: [PATCH 02/19] chore: add link to builders page --- packages/nextjs/app/page.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 66b7e8b..e3276c1 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -15,8 +15,12 @@ const Home: NextPage = () => {

Get started by taking a look at your batch GitHub repository.

- Checked in builders count: - To Be Implemented + + Checked-in builders{" "} + + page + +

From 2381ee6b30053fcd430770666cf3a7ec19d48ade Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 23 Oct 2024 19:53:30 +0200 Subject: [PATCH 03/19] feat: add builders data --- packages/nextjs/app/builders/page.tsx | 46 ++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index a0bd280..a682afd 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -2,16 +2,37 @@ import { useState } from "react"; import type { NextPage } from "next"; +import { FaExternalLinkAlt } from "react-icons/fa"; import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; type Builder = { name: string; - profileHref: string; - addressOrEns: string; + address: `0x${string}`; }; const Home: NextPage = () => { - const [builders] = useState([] as Builder[]); + const [builders] = useState([ + { + name: "Abdulyekeen Lukman", + address: "0x186a761645f2A264ad0A655Fb632Ca99150803A9", + }, + { + name: "Favvie Kenpachi", + address: "0x21Be2291f91EA2A1d1EB65DbBea2dA8886Ad7a3E", + }, + { + name: "Bello Abraham", + address: "0x28482B1279E442f49eE76351801232D58f341CB9", + }, + { + name: "Samson Aderonmu", + address: "0x62CeF3Ca8b52a9C69a17236CA2c56Cdb7a383E8e", + }, + { + name: "Michael Ojekunle", + address: "0x7429CbD5eD20736645723E972bE60B7F6BF5959c", + }, + ] as Builder[]); const { data: checkedInCounter } = useScaffoldReadContract({ contractName: "BatchRegistry", @@ -44,12 +65,21 @@ const Home: NextPage = () => { {builders.map((builder, id) => ( - - {id} - - {builder.name} + + {id + 1} + + {builder.name} + + + + {builder.address} + + - {builder.addressOrEns} ))} From 44ec1f2b104b0f4b881a1d0c5a922b71279d72ab Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 25 Oct 2024 02:16:43 +0200 Subject: [PATCH 04/19] chore: page unique name --- packages/nextjs/app/builders/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index a682afd..74be381 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -10,7 +10,7 @@ type Builder = { address: `0x${string}`; }; -const Home: NextPage = () => { +const Builders: NextPage = () => { const [builders] = useState([ { name: "Abdulyekeen Lukman", @@ -92,4 +92,4 @@ const Home: NextPage = () => { ); }; -export default Home; +export default Builders; From 0eb8fd74ff55d0c154b40b9a93194417fcce1344 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 25 Oct 2024 03:09:31 +0200 Subject: [PATCH 05/19] feat: fetch builders from contract --- packages/nextjs/app/builders/page.tsx | 60 ++++++++++++++++----------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index 74be381..bced0dc 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -1,38 +1,48 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import type { NextPage } from "next"; import { FaExternalLinkAlt } from "react-icons/fa"; -import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; +import { useScaffoldEventHistory, useScaffoldReadContract } from "~~/hooks/scaffold-eth"; type Builder = { name: string; - address: `0x${string}`; + address: string; + hasPersonalPage: boolean; }; const Builders: NextPage = () => { - const [builders] = useState([ - { - name: "Abdulyekeen Lukman", - address: "0x186a761645f2A264ad0A655Fb632Ca99150803A9", - }, - { - name: "Favvie Kenpachi", - address: "0x21Be2291f91EA2A1d1EB65DbBea2dA8886Ad7a3E", - }, - { - name: "Bello Abraham", - address: "0x28482B1279E442f49eE76351801232D58f341CB9", - }, - { - name: "Samson Aderonmu", - address: "0x62CeF3Ca8b52a9C69a17236CA2c56Cdb7a383E8e", - }, - { - name: "Michael Ojekunle", - address: "0x7429CbD5eD20736645723E972bE60B7F6BF5959c", - }, - ] as Builder[]); + const [builders, setBuilders] = useState([] as Builder[]); + + const { data: events } = useScaffoldEventHistory({ + contractName: "BatchRegistry", + eventName: "CheckedIn", + fromBlock: 126461494n, + }); + + useEffect(() => { + const fetchBuilders = async () => { + if (!events) return; + const builders = await Promise.all( + events + .map(async event => { + const address = event.args.builder; + // Check if the builder has a personal page + const resp = await fetch(`builders/${address}`); + if (address) + return { + address, + name: "", + hasPersonalPage: resp.status === 200, + }; + }) + .filter(asd => !!asd), + ); + setBuilders(builders.filter(asd => !!asd)); + }; + + fetchBuilders().catch(console.error); + }, [events]); const { data: checkedInCounter } = useScaffoldReadContract({ contractName: "BatchRegistry", From c496c969b6be33f789f0ba97624bc960b895c0cb Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 25 Oct 2024 03:13:11 +0200 Subject: [PATCH 06/19] chore: check if user has personal page --- packages/nextjs/app/builders/page.tsx | 36 +++++++++++++++------------ 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index bced0dc..7b11a0e 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -24,21 +24,19 @@ const Builders: NextPage = () => { const fetchBuilders = async () => { if (!events) return; const builders = await Promise.all( - events - .map(async event => { - const address = event.args.builder; - // Check if the builder has a personal page - const resp = await fetch(`builders/${address}`); - if (address) - return { - address, - name: "", - hasPersonalPage: resp.status === 200, - }; - }) - .filter(asd => !!asd), + events.map(async event => { + const address = event.args.builder; + // Check if the builder has a personal page + const resp = await fetch(`builders/${address}`); + if (address) + return { + address, + name: "", + hasPersonalPage: resp.status === 200, + }; + }), ); - setBuilders(builders.filter(asd => !!asd)); + setBuilders(builders.filter(builder => !!builder)); }; fetchBuilders().catch(console.error); @@ -77,8 +75,14 @@ const Builders: NextPage = () => { {builders.map((builder, id) => ( {id + 1} - - {builder.name} + + {builder.hasPersonalPage ? ( + + {builder.name} + + ) : ( + <>{builder.name}(Coming soon) + )} Date: Fri, 25 Oct 2024 03:15:18 +0200 Subject: [PATCH 07/19] refactor: remove builder count --- packages/nextjs/app/builders/page.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index 7b11a0e..8927ede 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import type { NextPage } from "next"; import { FaExternalLinkAlt } from "react-icons/fa"; -import { useScaffoldEventHistory, useScaffoldReadContract } from "~~/hooks/scaffold-eth"; +import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; type Builder = { name: string; @@ -42,12 +42,6 @@ const Builders: NextPage = () => { fetchBuilders().catch(console.error); }, [events]); - const { data: checkedInCounter } = useScaffoldReadContract({ - contractName: "BatchRegistry", - functionName: "checkedInCounter", - }); - console.log(checkedInCounter); - return ( <>
@@ -55,9 +49,6 @@ const Builders: NextPage = () => {

Builders

-

- Checked in builders count: {Number(checkedInCounter)} -

From a66b6ecaf87351f3b7be41a0dc140a3cf64379da Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 25 Oct 2024 03:18:32 +0200 Subject: [PATCH 08/19] chore: use next/link --- packages/nextjs/app/builders/page.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index 8927ede..d241580 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useState } from "react"; +import Link from "next/link"; import type { NextPage } from "next"; import { FaExternalLinkAlt } from "react-icons/fa"; import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; @@ -68,21 +69,21 @@ const Builders: NextPage = () => { {id + 1} {builder.hasPersonalPage ? ( - + {builder.name} - + ) : ( <>{builder.name}(Coming soon) )} - {builder.address} - + From dec5928d6d0b803df24e005f912a5a51e7c2c8e7 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 25 Oct 2024 03:23:02 +0200 Subject: [PATCH 09/19] feat: add menu item --- packages/nextjs/components/Header.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index aead9dc..078b498 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -4,6 +4,7 @@ import React, { useCallback, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { FaUsers } from "react-icons/fa"; import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick } from "~~/hooks/scaffold-eth"; @@ -24,6 +25,11 @@ export const menuLinks: HeaderMenuLink[] = [ href: "/debug", icon: , }, + { + label: "Builders", + href: "/builders", + icon: , + }, ]; export const HeaderMenuLinks = () => { From 6a2adf16523eef2db63ee6c94dfa2c3ee9efb1af Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 20:28:08 +0200 Subject: [PATCH 10/19] chore: builder names --- packages/nextjs/app/builders/constants.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/nextjs/app/builders/constants.ts diff --git a/packages/nextjs/app/builders/constants.ts b/packages/nextjs/app/builders/constants.ts new file mode 100644 index 0000000..a27af40 --- /dev/null +++ b/packages/nextjs/app/builders/constants.ts @@ -0,0 +1,9 @@ +const BUILDERS = { + "0x186a761645f2a264ad0a655fb632ca99150803a9": "Abdulyekeen Lukman", + "0x21be2291f91ea2a1d1eb65dbbea2da8886ad7a3e": "Favvie Kenpachi", + "0x28482b1279e442f49ee76351801232d58f341cb9": "Bello Abraham", + "0x62cef3ca8b52a9c69a17236ca2c56cdb7a383e8e": "Samson Aderonmu", + "0x7429cbd5ed20736645723e972be60b7f6bf5959c": "Michael Ojekunle", +} as { [key: string]: string }; + +export { BUILDERS }; From 8cb548286941239c4ab2a0ba6de84aeb68ad2a58 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 20:34:10 +0200 Subject: [PATCH 11/19] feat: display names --- packages/nextjs/app/builders/page.tsx | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index d241580..4c04a0b 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -2,8 +2,9 @@ import { useEffect, useState } from "react"; import Link from "next/link"; +import { BUILDERS } from "./constants"; import type { NextPage } from "next"; -import { FaExternalLinkAlt } from "react-icons/fa"; +import { Address } from "~~/components/scaffold-eth"; import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; type Builder = { @@ -32,7 +33,7 @@ const Builders: NextPage = () => { if (address) return { address, - name: "", + name: BUILDERS[address.toLowerCase()], hasPersonalPage: resp.status === 200, }; }), @@ -59,14 +60,17 @@ const Builders: NextPage = () => { - Name - Address + ENS or Address + Builder Profile {builders.map((builder, id) => ( {id + 1} + +
+ {builder.hasPersonalPage ? ( @@ -76,16 +80,6 @@ const Builders: NextPage = () => { <>{builder.name}(Coming soon) )} - - - {builder.address} - - - ))} From eb21dbb98ded93d176b0d3108477868659e93d96 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 20:34:50 +0200 Subject: [PATCH 12/19] feat: sort by personal page availability --- packages/nextjs/app/builders/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index 4c04a0b..c9790b6 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -38,7 +38,11 @@ const Builders: NextPage = () => { }; }), ); - setBuilders(builders.filter(builder => !!builder)); + setBuilders( + builders + .filter(builder => !!builder) + .sort((a, b) => +(b.hasPersonalPage === true) - +(a.hasPersonalPage === true)), + ); }; fetchBuilders().catch(console.error); From 8557ec79f1e62b6dcd6a7ced4d404d9763f2fe73 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 20:54:28 +0200 Subject: [PATCH 13/19] chore: remove duplicate addresses --- packages/nextjs/app/builders/page.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index c9790b6..b687cd3 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -25,9 +25,17 @@ const Builders: NextPage = () => { useEffect(() => { const fetchBuilders = async () => { if (!events) return; + + // Filter out duplicate addresses + const filteredAddresses: string[] = []; + events + .map(event => event.args.builder as string) + .forEach(address => { + if (!filteredAddresses.find(addr => address === addr)) filteredAddresses.push(address); + }); + const builders = await Promise.all( - events.map(async event => { - const address = event.args.builder; + filteredAddresses.map(async address => { // Check if the builder has a personal page const resp = await fetch(`builders/${address}`); if (address) @@ -41,6 +49,7 @@ const Builders: NextPage = () => { setBuilders( builders .filter(builder => !!builder) + // Sort by personal apge availability .sort((a, b) => +(b.hasPersonalPage === true) - +(a.hasPersonalPage === true)), ); }; @@ -65,7 +74,7 @@ const Builders: NextPage = () => { ENS or Address - Builder Profile + Builder Page @@ -78,10 +87,10 @@ const Builders: NextPage = () => { {builder.hasPersonalPage ? ( - {builder.name} + {builder.name ? `${builder.name}'s Builder Page` : "Builder Page"} ) : ( - <>{builder.name}(Coming soon) + <>Not available )} From 3157f286bb908023274976fb452b1644bb16a73a Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 21:14:45 +0200 Subject: [PATCH 14/19] chore: add missing builder names --- packages/nextjs/app/builders/constants.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/nextjs/app/builders/constants.ts b/packages/nextjs/app/builders/constants.ts index a27af40..e29a9d5 100644 --- a/packages/nextjs/app/builders/constants.ts +++ b/packages/nextjs/app/builders/constants.ts @@ -1,9 +1,12 @@ const BUILDERS = { "0x186a761645f2a264ad0a655fb632ca99150803a9": "Abdulyekeen Lukman", "0x21be2291f91ea2a1d1eb65dbbea2da8886ad7a3e": "Favvie Kenpachi", + "0x26bfbd8ed2b302ec2c2b6f063c4caf7abcb062e0": "Peter Kompasz", "0x28482b1279e442f49ee76351801232d58f341cb9": "Bello Abraham", + "0x549dd44dea0127254da32b0c4e79ae3d2cb8b94d": "Samson Aderonmu", "0x62cef3ca8b52a9c69a17236ca2c56cdb7a383e8e": "Samson Aderonmu", "0x7429cbd5ed20736645723e972be60b7f6bf5959c": "Michael Ojekunle", + "0xe9ad7d1c2069e0fa9b5852adc77c9196651bb8b8": "0xe9Ad", } as { [key: string]: string }; export { BUILDERS }; From 8066671e5fa361c9e7cbca9dd30c2f8783c90d58 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 26 Oct 2024 21:26:20 +0200 Subject: [PATCH 15/19] refactor: duplicates --- packages/nextjs/app/builders/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index b687cd3..bc07a65 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -28,11 +28,11 @@ const Builders: NextPage = () => { // Filter out duplicate addresses const filteredAddresses: string[] = []; - events - .map(event => event.args.builder as string) - .forEach(address => { - if (!filteredAddresses.find(addr => address === addr)) filteredAddresses.push(address); - }); + events.forEach(event => { + const address = event.args.builder; + if (!address) return; + if (!filteredAddresses.find(addr => address === addr)) filteredAddresses.push(address); + }); const builders = await Promise.all( filteredAddresses.map(async address => { From b818e2feecbdc037fff70171702f99c7eac74996 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 2 Nov 2024 17:52:42 +0200 Subject: [PATCH 16/19] chore: remove name constants --- packages/nextjs/app/builders/constants.ts | 12 ------------ packages/nextjs/app/builders/page.tsx | 5 +---- 2 files changed, 1 insertion(+), 16 deletions(-) delete mode 100644 packages/nextjs/app/builders/constants.ts diff --git a/packages/nextjs/app/builders/constants.ts b/packages/nextjs/app/builders/constants.ts deleted file mode 100644 index e29a9d5..0000000 --- a/packages/nextjs/app/builders/constants.ts +++ /dev/null @@ -1,12 +0,0 @@ -const BUILDERS = { - "0x186a761645f2a264ad0a655fb632ca99150803a9": "Abdulyekeen Lukman", - "0x21be2291f91ea2a1d1eb65dbbea2da8886ad7a3e": "Favvie Kenpachi", - "0x26bfbd8ed2b302ec2c2b6f063c4caf7abcb062e0": "Peter Kompasz", - "0x28482b1279e442f49ee76351801232d58f341cb9": "Bello Abraham", - "0x549dd44dea0127254da32b0c4e79ae3d2cb8b94d": "Samson Aderonmu", - "0x62cef3ca8b52a9c69a17236ca2c56cdb7a383e8e": "Samson Aderonmu", - "0x7429cbd5ed20736645723e972be60b7f6bf5959c": "Michael Ojekunle", - "0xe9ad7d1c2069e0fa9b5852adc77c9196651bb8b8": "0xe9Ad", -} as { [key: string]: string }; - -export { BUILDERS }; diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index bc07a65..fe608a5 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -2,13 +2,11 @@ import { useEffect, useState } from "react"; import Link from "next/link"; -import { BUILDERS } from "./constants"; import type { NextPage } from "next"; import { Address } from "~~/components/scaffold-eth"; import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; type Builder = { - name: string; address: string; hasPersonalPage: boolean; }; @@ -41,7 +39,6 @@ const Builders: NextPage = () => { if (address) return { address, - name: BUILDERS[address.toLowerCase()], hasPersonalPage: resp.status === 200, }; }), @@ -87,7 +84,7 @@ const Builders: NextPage = () => { {builder.hasPersonalPage ? ( - {builder.name ? `${builder.name}'s Builder Page` : "Builder Page"} + Builder Page ) : ( <>Not available From cf3e8dfd9ea522d730841b5e491251e4751be2ce Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 2 Nov 2024 18:06:58 +0200 Subject: [PATCH 17/19] feat: isLoading state --- packages/nextjs/app/builders/page.tsx | 70 ++++++++++++++++----------- 1 file changed, 41 insertions(+), 29 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index fe608a5..f63dc0a 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Link from "next/link"; import type { NextPage } from "next"; import { Address } from "~~/components/scaffold-eth"; @@ -13,6 +13,8 @@ type Builder = { const Builders: NextPage = () => { const [builders, setBuilders] = useState([] as Builder[]); + const [isLoading, setIsLoading] = useState(true); + const elementRef = useRef(null); const { data: events } = useScaffoldEventHistory({ contractName: "BatchRegistry", @@ -20,6 +22,12 @@ const Builders: NextPage = () => { fromBlock: 126461494n, }); + useEffect(() => { + if (elementRef.current) { + setIsLoading(false); + } + }, []); + useEffect(() => { const fetchBuilders = async () => { if (!events) return; @@ -56,7 +64,7 @@ const Builders: NextPage = () => { return ( <> -
+

Builders @@ -66,34 +74,38 @@ const Builders: NextPage = () => {
- - - - - - - - - - {builders.map((builder, id) => ( - - - - + {isLoading ? ( + Loading builder pages + ) : ( +
ENS or AddressBuilder Page
{id + 1} -
-
- {builder.hasPersonalPage ? ( - - Builder Page - - ) : ( - <>Not available - )} -
+ + + + + - ))} - -
ENS or AddressBuilder Page
+ + + {builders.map((builder, id) => ( + + {id + 1} + +
+ + + {builder.hasPersonalPage ? ( + + Builder Page + + ) : ( + <>Not available + )} + + + ))} + + + )}
From c7701f8a7b312b6005748f78ef1704c5031c3a2d Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 4 Nov 2024 12:31:40 +0200 Subject: [PATCH 18/19] refactor: separate builders list --- packages/nextjs/components/BuildersList.tsx | 112 ++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 packages/nextjs/components/BuildersList.tsx diff --git a/packages/nextjs/components/BuildersList.tsx b/packages/nextjs/components/BuildersList.tsx new file mode 100644 index 0000000..324c6a3 --- /dev/null +++ b/packages/nextjs/components/BuildersList.tsx @@ -0,0 +1,112 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import Link from "next/link"; +import { Address } from "~~/components/scaffold-eth"; +import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; + +type Builder = { + address: string; + hasPersonalPage: boolean; +}; + +export default function Page({ builderProfiles }: { builderProfiles: string[] }) { + const [builders, setBuilders] = useState([] as Builder[]); + const [isLoading, setIsLoading] = useState(true); + const elementRef = useRef(null); + + const { data: events } = useScaffoldEventHistory({ + contractName: "BatchRegistry", + eventName: "CheckedIn", + fromBlock: 126461494n, + }); + + useEffect(() => { + if (elementRef.current) { + setIsLoading(false); + } + }, []); + + useEffect(() => { + const fetchBuilders = async () => { + if (!events) return; + + // Filter out duplicate addresses + const filteredAddresses: string[] = []; + events.forEach(event => { + const address = event.args.builder; + if (!address) return; + if (!filteredAddresses.find(addr => address === addr)) filteredAddresses.push(address); + }); + + const builders = await Promise.all( + filteredAddresses.map(async address => { + if (address) + return { + address, + // Check if the builder has a personal page + hasPersonalPage: !!builderProfiles.find(bp => bp === address), + }; + }), + ); + setBuilders( + builders + .filter(builder => !!builder) + // Sort by personal apge availability + .sort((a, b) => +(b.hasPersonalPage === true) - +(a.hasPersonalPage === true)), + ); + }; + + fetchBuilders().catch(console.error); + }, [events]); + + return ( +
+
+
+

+ Builders +

+
+
+
+
+ {isLoading ? ( + Loading builder pages + ) : ( + + + + + + + + + + {builders.map((builder, id) => ( + + + + + + ))} + +
ENS or AddressBuilder Page
{id + 1} +
+
+ {builder.hasPersonalPage ? ( + + Builder Page + + ) : ( + <>Not available + )} +
+ )} +
+
+
+
+
+ ); +} From d5ac1d506075a5ce99ddbbc00555f9c68bb0562d Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 4 Nov 2024 12:32:26 +0200 Subject: [PATCH 19/19] feat: check builder profiles on server --- packages/nextjs/app/builders/page.tsx | 113 ++------------------------ 1 file changed, 6 insertions(+), 107 deletions(-) diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx index f63dc0a..4275729 100644 --- a/packages/nextjs/app/builders/page.tsx +++ b/packages/nextjs/app/builders/page.tsx @@ -1,115 +1,14 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import Link from "next/link"; +import { promises as fs } from "fs"; import type { NextPage } from "next"; -import { Address } from "~~/components/scaffold-eth"; -import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth"; - -type Builder = { - address: string; - hasPersonalPage: boolean; -}; - -const Builders: NextPage = () => { - const [builders, setBuilders] = useState([] as Builder[]); - const [isLoading, setIsLoading] = useState(true); - const elementRef = useRef(null); - - const { data: events } = useScaffoldEventHistory({ - contractName: "BatchRegistry", - eventName: "CheckedIn", - fromBlock: 126461494n, - }); +import BuildersList from "~~/components/BuildersList"; - useEffect(() => { - if (elementRef.current) { - setIsLoading(false); - } - }, []); - - useEffect(() => { - const fetchBuilders = async () => { - if (!events) return; - - // Filter out duplicate addresses - const filteredAddresses: string[] = []; - events.forEach(event => { - const address = event.args.builder; - if (!address) return; - if (!filteredAddresses.find(addr => address === addr)) filteredAddresses.push(address); - }); - - const builders = await Promise.all( - filteredAddresses.map(async address => { - // Check if the builder has a personal page - const resp = await fetch(`builders/${address}`); - if (address) - return { - address, - hasPersonalPage: resp.status === 200, - }; - }), - ); - setBuilders( - builders - .filter(builder => !!builder) - // Sort by personal apge availability - .sort((a, b) => +(b.hasPersonalPage === true) - +(a.hasPersonalPage === true)), - ); - }; - - fetchBuilders().catch(console.error); - }, [events]); +const Builders: NextPage = async () => { + const file = await fs.readdir(process.cwd() + "/app/builders"); + const builderProfiles = file.filter((file: string) => file.startsWith("0x") && file.length == 42); return ( <> -
-
-

- Builders -

-
- -
-
-
- {isLoading ? ( - Loading builder pages - ) : ( - - - - - - - - - - {builders.map((builder, id) => ( - - - - - - ))} - -
ENS or AddressBuilder Page
{id + 1} -
-
- {builder.hasPersonalPage ? ( - - Builder Page - - ) : ( - <>Not available - )} -
- )} -
-
-
-
+ ); };