Smart Contract User Interface Project The goal of this project is to understand how to create a user interface for a smart contract application. Submission Instructions: The only files from the...

Cryptocurrency


Smart Contract User Interface Project The goal of this project is to understand how to create a user interface for a smart contract application. Submission Instructions: The only files from the truffle-react-box that need to be changed to complete is the App.js file and SimpleStorage.sol file. Only make changes to these two files. Reading: https://reactjs.org/tutorial/tutorial.html Web3 https://truffle-box.github.io/ https://reactjs.org/docs/forms.html Setup Note: If these steps don’t work on windows, you may need to disable your antivirus software. If you don’t have npm, truffle, and ganache-cli properly installed on your computer, try using a vagrant virtualbox: mkdir homework10 mkdir homework10/vagrant Then, create a new file called homework10/Vagrantfile with the following contents: Vagrant.configure(2) do |config| config.vm.box = "bento/ubuntu-18.04" config.vm.provision :shell, privileged: false, path: "vagrant/bootstrap.sh" config.vm.provider "virtualbox" do |v| v.memory = 4096 end config.vm.synced_folder ".", "/home/vagrant/host" config.vm.network "private_network", type: "dhcp" config.vm.network "forwarded_port", guest: 3000, host: 3000, auto_correct: true config.vm.network "forwarded_port", guest: 9545, host: 9545, auto_correct: true config.vm.usable_port_range = 8000..8999 config.ssh.insert_key = false end Then, create a new file called homework10/vagrant/bootstrap.sh with the following contents: sudo add-apt-repository -y ppa:ethereum/ethereum sudo apt-get update -y sudo apt-get install -y git python2.7 make g++ python-pip solc sudo pip install --upgrade pip curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" nvm install 8.15.0 nvm use 8.15.0 npm config set python python2.7 npm install -g truffle ganache-cli Then, in the homework10 directory, start the virtualbox, log into it, and initialize a truffle project with react by running: vagrant up vagrant ssh cd host truffle unbox react If you are experiencing difficulties with the “truffle unbox react” command, try the following: vagrant up vagrant ssh sudo npm install -g yarn cd host git clone https://github.com/truffle-box/react-box.git cd react-box cd client yarn install Part A Following the instructions at the https://github.com/truffle-box/react-box to launch the sample web3 dapp. You should be able to go to a web browser on your host computer to http://localhost:3000 and see the dapp’s web page working: Part B Update the dapp so that the user interface accepts a single integer value which is sent to and stored by the smart contract using the set function. The user interface should show the most recent value. Hint: the following link may help get through the ReactJS changes needed: https://www.moesif.com/blog/blockchain/ethereum/Tutorial-for-building-Ethereum-Dapp-with-Integrated-Error-Monitoring/# Part C Currently, the dapp only stores a single integer value in the smart contract regardless of who actually set the value. Extend the dapp so that whoever uses the dapp can store his own value independently of any other user. So, for example, one user can store the value 4 in the smart contract, while another user can simultaneously store the value 6 in the smart contract.