Webflow + ethers.js: Hackathon dApps just got a whole lot easier
TLDR; In the recent Hack Money hackathon, my teammate and I made our entire front-end using just Webflow, ethers.js and vue.js. This was a super quick and easy way to make a fully functional dApp that looks great - you can see ours here.
Our Uniswap track winning submission, Liquorice Gen is a liquidity solution for early-stage dApp’s that need to raise collateral to launch a token. For more information, we have an article explaining Liquorice Gen in more detail here.
What is Webflow?
Webflow is a Software as a Service company that offers both designers and developers a relatively new experience of “no-code” web design and hosting, and allows for rapid development of fully functional websites. We utilised their platform to design and double up on creating both a digital prototype and building out the front end elements we needed for our project. Webflow’s full philosophy of “no-code” development and design can be read more in detail here. We chose to incorporate it because we wanted to create the front end quickly and with a fully visual approach. This made our front end easier to develop, and so we were able to hack faster, create more iterations, and improve our UI/UX design solutions.
This post was not sponsored or incentivised by Webflow, we just really love their product.
How was our hack built?
Webflow allows for custom scripts to be added to the HTML of a page (as seen below). While we did not use this functionality directly (I ran out of time), I applied it in principal by manually adding the scripts to the index.html file from the Webflow project. If you would like to follow along you can find the repo here.
Adding the basics
Firstly we need to add the libraries and tools we will need to use to get this working. Before the end of the </body> tag, import theethers.js script and vue.js script:
I chose to use vue.js for this project as it is a very quick and intuitive framework, with simple state management. ethers.js was chosen because it is my preferred library for interacting with Ethereum, but you could easily substitute it for web3.js if you prefer.
Setting up the basic state
The next thing we need to do is set up all the state we will need in order to interact with the contracts:
Note: if this was a “proper” vue.js app you would want to use vuex , which is vue.js response to redux. I am not using that here as its a one-pager, and I don’t need the additional structure.
In terms of the state needed for ethers, there are a few important things that you will need to store:
- Ethers: an instance of ethers
- Signer: an instance of the signer (the account that is going to interact with the app).
I am not storing the provider as that is quick to get, more on this later. In terms of the needed state for contract interaction, you will need the following for each contract you want to interact with:
- The address
- The ABI
With the above information, you can make an instance of the contract and interact with it. There is also some mock data that can be seen (the long string of 0s). These were used as place holders on the front end for styling purposes.
I am also storing some booleans, mainly connected, txPending and txComplete. These allow the dApp to adaptively respond to the user (mostly the cute gif when the tx is mining).
Getting parameters out of the page
In order to get the various state data from the HTML page, you need to add vue.js to the fields. This can be done really easily as shown below. Notice in the <input tag there is a v-model="tokenSettings.tokenNameInput" this will allow vue.js to pull the value out and assign it to the state prop tokenSettings.tokenNameInput.
There is a crazy amount of inline CSS on this input generated by Webflow. This is not something you need to worry about.
Here is what that CSS looks like in action:
Setup and contract interaction
Below is all you need to know to get an instance of ethers.js setup, make a contract instance and interact with it (with examples of a view function and a write function).
Let's walk through the above method to understand how we are building up the needed state. In the connect() function, it first checks if there is an injected web3 instance, and if there isn’t, it lets you know that you are going to need one. The function then creates the ethers instance and saves it to state, gets the signer instance and saves it to state, and then calls init().
In the init() function, we save the user’s address in the state. Then an instance of a deployed smart contract is created. This instance will allow us to call functions on this contract.
Making a writing transaction against a contract
Now we get to what you are here for, a write function to the contract.
In the deployMarket() we simply call the desired function (createMarket()) on the instance of the contract, with all the variables from the page fed in. I would highly recommend doing some basic data check/sanitisation before giving the parameters to the contract (and I would have, but again, time).
Also notice that you do not need to feed in the signer instance. As you have already set up the user's signer instance, ethers will use that signer.
In this function, there is also an event filter to find the marketCreated event in order to get the address of the deployed token for the user.
Making a view only transaction against a contract
Below is a quick read-only function call (this function is pure but a view function will behave in the same way).
Conclusion
Using Webflow to create the front end allowed Linum Labs’ kick-ass designer to flex her design skills and create the entire front end quickly and with minimal friction. A quick insertion of vue.js and ethers.js allowed the front end to be easily wired up to the deployed smart contracts.
This is a very powerful stack combination for a hackathon, allowing non-technical teammates to contribute significantly towards the tech.
Additional resources:
Webflow has so much content on how to use all their features and tools that they have dedicated a whole online university covering their most popular FAQs and support topics. This free to access resource is full of articles, courses and video tutorials, making Webflow even easier to use.
