The Complete Developers Guide to Building on Snowflake: Part 2 — React

This is part 2 of a guide to building a dApp on Snowflake. If you missed part one check it out HERE.

Whitelisting Your Resolver

The first thing you will need to do is head over to the Snowflake dashboard and whitelist your resolver that you created. Chances are you have not been to this page before. First, make sure you are on a supported network (currently Rinkeby). You are going to need to setup a Snowflake in order to whitelist your resolver. You will see a screen like this:

From here, you can claim a Hydro ID that you will use with your Snowflake. Here I will choose “MediumArticleID”. Afterwards, you will be prompted to mint a Snowflake:

At this point your Snowflake is ready to go and you will be on the dashboard! From here, you are going to need to click the + sign in the bottom left of your screen to manage your resolvers.

Finally, you will need to paste the contract address of your dApp where it says “Whitelist Resolver”. Once you submit that message you will be good to go!

Forking The Github Repo

The Snowflake dashboard is all housed in an open source Github repo. In order to add your dApp interface to the dashboard you are going to need to add and change a few files. To get started, head to the repo page and click the “fork” button.

Adding Your Contract

Now, clone your forked repo and we can start changing some files. First, we need to navigate to ./src/common/contracts/js. This file is a large JSON file which houses the constants for the contracts that the dashboard interacts with. You will need your contract address and the ABI. Add this to Rinkeby/Resolvers along with the others in the list. You can also optionally add the requiredAllowance field. This will default to 0 if you do not set it. Since apps are allowed to utilize allowances for users, this will autofill that field when they select your dApp.

Next, if you want your resolver to have a custom logo in the dApp store, you need to add a .png file to ./src/components/resolvers/logos. The file should be named {contract-address}.png. If you do not add a custom logo, your dApp will use the default logo.

Lastly, and most importantly, you now need to create your React modal. First you will need to create a new Javascript file in ./src/components/resolvers/components. This file should be named {contract-address}.js and is what will house all of your custom dApp logic. There are currently two examples of these files on Github. You really have free reign to make these files as complex or basic as you want your resolver to be, but I will walk you through a few of the cool things that you are able to do through our library.

Styling

We have used the Material-ui Framework for the dashboard. You are welcome to use whatever you want, but we have found this framework to be very powerful and helpful.

Web3

Noah created an awesome web3 library that we have implemented on the dashboard. Since you need to interact with a smart contract this is extremely important! You are going to want to make sure that you include import { withWeb3 } from ‘web3-webpacked-react’; in your file imports. This will allow you to have web3 automatically in your Modal. There will be a variable in your props called w3w which will allow for you to interact with your contract.

Above is an example of how easy it is to call your smart contract with w3w. If you have correctly set up the first two steps above your contract will be automatically loaded into the resolverContract props variable.

The last important thing is to make sure you export your file like this export default withWeb3({your-class});.

Final Steps

Once you have completed all of the above, now we just need to test everything and create a pull request! To test your code, navigate to the root directory of the project in terminal and then run npm start. This will launch a node server and pop up a window with the dashboard. From here, click on the + button again, but this time you will need to use the second input. Your dApp should show up in the list of dApps on the screen. Click on it and the address should automatically fill itself in alongside your allowance (if you set that in the contracts.js file! It should look something like this:

Click “set resolver” and once the transaction is finished you will be redirected to the home screen where you will now see your resolver listed! Lastly you will need to view your modal that you created. To do this, click the button on the far right of your resolver row on the home screen.

Assuming everything works as intended, you are all done ready for a pull request.

There you have it! You should now be able to deploy your own Snowflake dApps and take advantage of all the benefits that Snowflake has to offer. Happy coding!