🏗 Scaffold-eth + Unlock
What is Scaffold-eth?
Scaffold-eth is a prototyping and learning tool meant to give developers a complete environment to build on Ethereum, although you can use it with any EVM network.
Why it matters
We decided it would be useful to show people how Unlock Protocol could fit into that stack. So we put out a bounty and one of our community members Danni Thomx forked the scaffold-eth github repository and scaffold-eth-unlock was born.
Now you can use this repository to learn how Unlock can be used in a modern dApp or as a base to start prototyping your next killer dApp.
What you need to know
You can find out everything you need to know about Scaffold-eth by checking out their docs, so we won't go into detail here about things which are already well covered there, but the following assumes you've already gotten at least a little bit familiar.
It's not necessary to do any of the Speed Run Ethereum Challenges in order to simply get started with Unlock Protocol using this repository, but if you're new to blockchain development, it's a great way to get started!
What is different
A few things were added in order to make the base Scaffold-eth repository work with Unlock Protocol.
Unlock specific packages
- @unlock-protocol/contracts package which is used to pass the contract ABIs to Ethers.js
- @unlock-protocol/paywall package which is used for tracking the state of NFT ownership to lock and unlock content in GatedNav and GatedContent components.
Unlock State Hook
useUnlockState is a hook which can be used with your components to provide a state of
hasValidKey and render the page differently or trigger the checkout dependent on that state.
- LockedNav Component uses the
useUnlockStatehook to lock a navigation menu.
- LockedContent Component uses the
useUnlockStatehook to lock content, in this instance a display of the current network and another component that lets you deploy locks.
- CreateLock Component which can be used to deploy a basic lock contract.
Directions on running the repository are all in the README on the github repository, so we won't repeat those here. Here are some things you might want to do before you spin the project up.
Create a lock
The repo allows you to create locks, but you'll want to create one ahead of time to be able to configure it properly.
You can create one very easily straight from our dashboard app. Although we make it pretty simple, we created a "How to Create a Lock" guide, just in case you need it.
You can also create one programmatically and we have a few tutorials with different ways you can do that.
Grab your configuration JSON
The easiest way to create a configuration json object is to head to the Dashboard where you'll find the Checkout Builder tool. You can also get there by clicking the "Generate URL" button from lock details page. After you're finished choosing your options on this page, you can click the "Download JSON" button. This tool helps you visualize what your checkout page will look like.
Of course, you can just manually create one too. The complete reference for that can be found in our Checkout Configuration documentation.
Start the repo
With all the configuration you need in hand, you'll be able to use the step-by-step directions in the repository to get it running.
Things to try
While getting a fully functioning dApp that allows you to create NFT membership contracts ("Locks"), sell or mint NFTs ("Keys"), and token gate content based on ownership is pretty exciting on its own, here are some suggestions on other things you can try next.
- Create a component to lock video content based on our LockedContent Component
- Create a SAAS app where access to the controls menu is locked until your subscription is purchased using our LockedNav Component
- Create a blog where subscribers can pay for premium content. Show them a sneak peek and lock the rest using the LockedContent Component
- Create a dApp that allows credential issuers to create digital versions of their licenses, certifications or diplomas using the CreateLock Component. We have a specialized contract management system which can be used to make an NFT non-transferable by the owner but still revokable by the issuer.