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

1. Go to the erc20.snakecharmers.eth registry, browse to the dai-dai package and grab the Manifest URI for the dai-dai@1.0.0 package.

2. Go to remix.ethereum.org , and click on the Plugins tab on the left-hand bar.

Plugins icon

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.

Deploy & Run Transactions icon

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