Member Wall
Showing a list of members has never been easier!
The Unlock team spent the week-end in Waterloo, Canada hacking on Ethereum.
I worked on building a "member wall", which is just a way to show the list of members for any given lock, as an image.
What does it really do?
It's a very simple application which generates a large SVG image which lists all members of a key. For example, here is the list of participants to the EthWaterloo hackathon, or the list of people who supported Evan Van Ness' Week In Ethereum anniversary edition!
The great thing about using images is that they can be embedded on almost any webpage. For example, below is the list of all members to our lock and that image is dynamically refreshed when new members are added!
Each of the members is clickable and will link to the corresponding page on Etherscan!
How does it work?
Member Wall is a serverless application running a NextJS application on Zeit's infrastructure.
For each query, the application gets the list of members for one or more locks, by using the Unlock Graph Protocol sub-graph.
From there, we use React to generate a SVG image. This image is made of individual SVG images for each icon which reproduce MetaMask's Jazzicons.
The wall's size is "fixed" but can be customized and the size of each member is based on the number of members. Here's the list of our blog's members on a 30px height!
Of couse, this is all completely open source, so you could easily run that on your own server, or maybe even host it on IPFS?
Embedding!
One of the benfits of decoupling the membership from the platform itself means that this can actually be embedded on any website. For example, we added this list of members to our Github page, so that everyone who makes a donation is instantly shown on the README, as soon as the transaction gets mined!
Where would you embed your members wall?