ethPM x Remix: Your Universal Dapp Frontend
Who here likes building frontends? Many of you, probably. And I’d venture to bet that some of you are even extremely talented at coding frontends. However, it should be no surprise that there exist some of us who either don’t have the time, desire, talent, nor incentive to clone into create-react-app
and recall the difference between a component and a container. Unfortunately for us, software requires frontends. Users require frontends. Dapps require frontends.
tl:dr;
The ethPM plugin for the Remix IDE automagically generates a convenient, minimalist GUI for any ethPM package, which can be useful for
- quick prototyping
- testing
- simple functions / calls
- admin tasks
- securely interacting with verified, on-chain contracts
Remix
Remix is the in-browser IDE that everyone knows and loves. Personally, it is my go to whenever I need to check a quick compiler error, generate the ABI for a contract, or pretty much whenever I’m too lazy to jump into my text editor (which is more often than I’d care to admit). Remix exposes a simple yet sufficient GUI for interacting with contracts. Simply feed Remix the ABI
and address
for any on-chain contract, and you instantly have a frontend for your dapp. Blue fields are for your contract calls, and yellow fields are to create transactions.
ethPM
So, how should we securely fetch our abi
and address
? One way would be to copy / pasta the source code from Github , and then go to Etherscan to grab the address. Well, this isn’t ideal or safe. Why not?
- no version control: Are you sure those contracts currently in the github repo match what’s deployed on-chain?
- copy/paste mistakes: Been there, done that.
- malicious actors: Injected addresses, compromised repositories, etc…
An ethPM package is a structured JSON object that represents your smart contract idea. Whether this idea is a single contract, or a complex on-chain protocol, these and anything in-between can be packaged up as an ethPM package, published to an on-chain ethPM registry, and made available to the world. Every package is content-addressed, so you have 100% certainty that the smart-contract assets published to a registry are the assets the package author wanted to share.
The biggest benefit of packaging up your dapp as an ethPM package lies in the simplicity of the specification. The same package can be used across any framework that supports ethPM: Remix, Truffle, Brownie, web3.py, and counting. (ps. If you’re curious about integrating ethPM into your framework, we have multiple core libraries to get you started — or shoot me an email, and I’m happy to help: nickg@ethereum.org
).
A word on trust
Package managers are obvious targets for malicious actors. There have been multiple attacks here, there, everywhere. So why should you trust your hard-earned ETH to any ol’ ethPM package. Well …. you shouldn’t. You should never trust ANY ethPM package. Just because a package is available on some random registry — this does NOT guarantee that it is safe to use.
The rule is — you should only consume packages from registries whose owner
you trust. Ok now, three more times…
ONLY USE ethPM PACKAGES FROM TRUSTED REGISTRIES.
ONLY USE ethPM PACKAGES FROM TRUSTED REGISTRIES.
ONLY USE ethPM PACKAGES FROM TRUSTED REGISTRIES.
Every ethPM registry has an owner
address who is allowed to release packages on that registry. This owner can be a single address, or a multisig. But, it is crucial that before you consume a package, you verify that the controlling address of the registry is that of a trusted party. If you trust that the controlling address of a registry belongs to a trusted developer/organization, then you can assume that only safe packages have been published to that registry.
- The registries we’ll be using in this tutorial are controlled by
snakecharmers.eth
— maintained by ethPM.
Tutorial: Make $$$ with Compound x ethPM x Remix
In this tutorial, we’ll be using the Compound protocol to earn interest on our DAI. All you need to start is a Metamask-enabled account that owns some DAI (to loan) and ETH (for tx fees). By the end of this tutorial, you’ll be safely earning interest on your DAI on the Compound protocol.
Steps:
- Use the DAI package from
erc20.snakecharmers.eth
to approve the Compound protocol to transfer our DAI - Use the Compound package from
defi.snakecharmers.eth
to supply our DAI to the Compound protocol
Generate our frontend for the DAI token contract
- Go to the
erc20.snakecharmers.eth
registry, browse to thedai-dai
package and grab theManifest URI
for thedai-dai@1.0.0
package.
2. Go to remix.ethereum.org
, and click on the Plugins
tab on the left-hand bar.
3. Activate
the EthPM
plugin.
6. Click Import a Package
inside the ethPM plugin.
7. Paste the Manifest URI
into the given field and click Import Manifest
. (& accept any permission requests that Remix asks for)
9. Click Import ABI
next to the DSToken
deployment on mainnet. (& accept permission requests for Remix to generate the file)
10. Open the Deploy & Run Transactions
plugin and make sure you’re connected to the Injected Web3
environment.
12. Copy the address from the DSToken
deployment in the ethPM plugin, and paste it in the box next to At Address
, and click At Address
. (In future versions of the Remix IDE, this step will be automatic)
Voilà! Now, we have a minimalistic frontend GUI for the DAI token.
Generate our frontend for the Compound protocol
Follow the same steps as above for the compound@1.0.0
package found on defi.snakecharmers.eth
. Generate an interface for the cDAI
deployment located on mainnet.
Approve the Compound protocol to transfer our DAI
- Grab the cDAI contract address from the Compound package in the ethPM Plugin.
- Enter the address into the
approve(address guy)
function in our DAI frontend, and submit/approve that transaction.
Supply our DAI (aka. mint cDAI) to the Compound Protocol
- In your Compound frontend, under the
mint(uint256 mintAmount)
function, enter the value for DAI that you want to supply to the protocol. (Remember to enter the value in wei: 1000000000000000000 == 1 DAI)
Voilà! Now you are earning interest on your DAI! You can verify this in the Compound Dapp.
Wait, there’s more!?!?
To check your balance, withdraw your cDAI, borrow DAI, or use any other feature of the Compound protocol, you have everything at your fingertips inside your Compound frontend. Read the Compound developer docs to learn more about what you can do with their protocol.
The Compound package used here is not limited to DAI, it contains the deployments for many of the other cTokens supported by the Compound protocol. Meaning, from the same ethPM package, you can replicate the above steps to supply / borrow any of the cTokens!
Creating your own ethPM package
Want to create your own ethPM package for your dapp? You can use the ethPM x Remix plugin to generate ethPM packages from your smart contracts. A walkthrough on how to do so can be found here.
Open call for ethpm.eth subdomains
If you have a dapp, a protocol, audited contracts, or any other smart contracts that you’d like to make available for the developer ecosystem to build from — you can currently reserve an ENS subdomain under ethpm.eth
which will make your registry easy to find for smart contract developers. If you’d like to reserve your subdomain, or need help getting your registry setup, shoot me an email at nickg@ethereum.org
.
More good links
- ethPM Documentation
- ethPM Explorer
- Questions? Ask in the ethPM gitter channel