Add Ethereum.org Collectibles page

[damianmarti]

Description

Add a new Ethereum.org Collectibles page to display all the available badges for contributors.

If the user connects their wallet, they can see all the collected badges.

Texts in English and translated to Spanish.

Visual design based on Figma file at https://www.figma.com/design/oXnywUhaKiKU4AlndYx7y8/Web-3-on-ethereum.org?node-id=13117-3897

Implemented light and dark theme, and responsiveness layout.

This new page is not linked from any page yet. We should define from where to link this (it should be linked from https://ethereum.org/en/contributing/ at least).

The badges data is obtained from an API endpoint deployed to https://ethereum-org-collectibles.vercel.app/ (deployed to Vercel now, but can be deployed to Netlify if you want). Code available at https://github.com/damianmarti/ethereum-org-collectibles

Preview link

https://deploy-preview-15860--ethereumorg.netlify.app/en/collectibles

Related Issue

Issue shared by Jakub, Joshua and Corwin Smith (among others) with BuidlGuidl.

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	36939c6
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/689a69434bf5ea00084154f3
😎 Deploy Preview	https://deploy-preview-15860--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 48 (🔴 down 6 from production) Accessibility: 90 (🔴 down 5 from production) Best Practices: 89 (🔴 down 3 from production) SEO: 97 (🔴 down 2 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[damianmarti]

This can be moved to an environment variable or a better location.

[wackerow]

Awesome!! Thanks so much @damianmarti... I have this branch checked out locally and will be helping remold this using all of our code conventions, design system components and styling, etc. Stay tuned

[konopkja]

made few comments, biggest blocker is the popup that opens on page load

[damianmarti]

@damianmarti this is looking great! gj

Left one suggestion but is not blocking.

Other than that, I think we should start thinking about how to handle the external service/app moving forward. One option could be to move it under the ethereum gh org, or even better, convert this repo into a monorepo and include it as an internal package. I'm a bit concerned about having a hard dependency that's outside our control.

Thanks!!

I can move the repo to ethereum gh org and we can deploy it to an account owned by ethereum org team. It's now deployed to my personal Vercel account.

[damianmarti]

is this supposed to trigger when i load the page? can we remove it?

I don't remember seeing this modal before. Maybe @wackerow added it.

[damianmarti]

internal links on the page result in error, idk if thats a problem

internal links are working for me, locally and on the preview site. What links are not working for you?

[konopkja]

internal links on the page result in error, idk if thats a problem

internal links are working for me, locally and on the preview site. What links are not working for you?

works now too hmm

[pettinarip]

@damianmarti this is looking great! gj
Left one suggestion but is not blocking.
Other than that, I think we should start thinking about how to handle the external service/app moving forward. One option could be to move it under the ethereum gh org, or even better, convert this repo into a monorepo and include it as an internal package. I'm a bit concerned about having a hard dependency that's outside our control.

Thanks!!

I can move the repo to ethereum gh org and we can deploy it to an account owned by ethereum org team. It's now deployed to my personal Vercel account.

Cool, thanks! No immediate action needed for now. We'll discuss it further with the team and get back to you if we decide to move forward.

[pettinarip]

internal links on the page result in error, idk if thats a problem

do you have an example? the nav and footer links are navigating correctly in the preview deploy, not sure if you're referring to different links

maybe a temp error?

[corwintines]

LGTM, I just added this to the Nav bar so people can find it.

Thanks @damianmarti!

[wackerow]

@konopkja Patched link styling removing underline except on hover; added external link arrows back in

Added the external link icon in manually, right now simply exporting the same setup from the ui/link component but in a separate PR we could clean that up to perhaps update the ui/link components to have an Image + Text combination approach to have the arrow icon in a different location (or to just generally add some flexibility there)

Reused our existing WalletProvider as well, and moved the query client out of the component, the combination of which seems to have resolved the WalletConnect issues.

Building now but this should be good to go after that.

[konopkja]

when i open the preview this popup still automatically appears hmm

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2025 Ethereum.org Contributor:

Join the [ethereum.org Discord server](https://ethereum.org/discord) to explore more ways to contribute to the project. Depending on the tasks you complete, you may also unlock additional rewards. Visit [ethereum.org/contributing](https://ethereum.org/contributing) to learn more.

Head to gitpoap.io & connect your GitHub account to mint!Keep buidling, keep learning, and let's grow the Ethereum open-source community together 🌱

Learn more about GitPOAPs here.