Etherplate

What is this?

This is an example project showing how you can hook up your Ethereum Non-Fungible Tokens (NFTs, ERC721, similar to CryptoKitties) contract in a DApp. It demos web3 events, and is highly opinionated in that it uses Redux, React, React Router, and Bulma. You can rip out of any these or replace them with your favourites (ie. Skeleton.css instead of Bulma, etc.).

Etherplate uses OpenZeppelin's fantastic community-audited contracts as a base to implement the ERC721 standard.

View Demo

View Demo on Netlify

Setup

Requires NPM & Direnv

Homebrew on Mac OSX:

brew install node npm direnv

Apt on Linux:

apt-get install node npm direnv

Install truffle globally:

npm install truffle -g

Install the local NPM packages:

npm install

Environment Variables

1. cp .envrc.example .envrc

2. Enter your own twelve random words in the .envrc.

3. Also, we'll leverage Infura's Ethereum Ropsten testnet node, so make sure to set up an account and paste your private key in your .envrc.

4. Use direnv allow to export the env vars into your current terminal shell.

Ganache (CLI)

Create a directory for ganache-cli to store it's database in:

mkdir .ganache

Compile the Solidity code

truffle compile

Migrate the Contracts

This will deploy the contract to the network (tip: use --network=ropsten to deploy to Ethereum's Ropsten Testnet)

truffle migrate

Run the Project

Make sure the truffle contracts are compiled and migrated.

In one terminal window, run the ganache-cli (local Ethereum RPC test node) with:

./ganache.sh

Once Ganache is running, in another terminal start the Webpack dev server.

npm run dev

Your server should now be running at http://127.0.0.1:8080

truffle.js & truffle-config.js

Why is there both a truffle and truffle-config file?

• On Windows, truffle-config.js is required. You can safely delete the one you don't need (ie on Mac/Linux you can delete truffle-config.js)

TODO:

• Numbers (eg. 'NewSword222') in token name causes Ethereum transaction to fail (could be byte counting validation in smart contract)
• Store transactionHash in localStorage and call info on it after page refreshes if it isn't in store.getState().tokens pool
• Race condition: sometimes we do not have the list of accounts from MetaMask on time when page loads (google for onPageLoad code)
• Finish upgrade path by removing old-nftoken-factory and in turn get .events.BoughtToken() working again: (Error: The current provider doesn't support subscriptions: MetamaskInpageProvider)
• Add more DApp tests and refactor React components to have both presentation and container components

Nice-to-haves:

• Mock out a web3 object in the integration spec and test the happy path of filling out the form and purchasing a token via enzyme
• Get circleci branch up and running, put a badge on the README for test runs
• Switch all .jsx to simply .js
• If the user switches their MetaMask account, need to refresh the page or stop/restart event listeners with new wallet address
• Demo how ERC721 expects you to store data (such as the JSON response when the tokenURI is requested) as per https://eips.ethereum.org/EIPS/eip-721 (For instance, OpenSea has a server which takes a contract address and tokenID, which then does a GET request to the tokenURI to pull more info (as JSON) about the token (images, name, etc), for example: https://opensea-api.herokuapp.com/events/?asset_contract_address=0x06012c8cf97bead5deae237070f9587f8e7a266d&token_id=389343)

Done:

• Make into a truffle box and submit to trufflesuite
• BUG: Purchase History only showing some purchases while My Tokens shows more ... ?
• Show token ID / transaction ID on purchase history and Tokens#show page
• Make sure 'Purchase History' page works
• Implement Redux for web3 events
• Make all React prop types required (isRequired) and provide defaultProps for those that are not
• Convert all css to scss
• Improve mobile styling / media query support
• Deploy to Netlify & Ropsten, use Infura
• Use a local web3 (1.0.0.beta?) instead of the current MetaMask/browser's web3 instance (which is deprecated)
• Fix getting duplicate entries when Ropsten returns the BoughtToken event (active subscriber listening for events in browser)
• New token updated from transaction receipt event is not being added to state properly in realtime
• Get DApp tests working again
• On successful purchase, show a message about the new purchase and how it needs to be confirmed by the network, and redirect to show the now confirming token on Purchase History or My Tokens page

Gratitude

Big thanks to all of the fantastic open source developers who have made this technology actual, and to Brendan Asselstine for helping kickstart my development with blockchain technologies.

Etherplate Wordmark

The Etherplate Wordmark is set in Sign Painter: https://typekit.com/fonts/signpainter