Fix Truffle REACT Project for Smart Contracts with MetaMask and Solidity

If you’re like me, you’ve been diving into Smart Contracts and getting heavy into REACT, Javascript, MetaMask, and so forth. So, likely you download sample projects or open-source contracts to learn more, and as I have done so, running the latest version of node and using Solidity latest release, which can ruin your ability as a newcomer to actually run the sample projects that don’t seem to get updated enough nor documented clearly.

Now, grabbing the react sample from truffle (yes, you need GIT installed), trying to run the normal truffle develop, compile, migrate, you’ll run into a bit of an issue… You’re likely running a too new version of Solidity (as you should, security is vital) than what your Smart contract is set up to handle and if you’re not using and defining the same version of Solidity, you won’t be doing much of anything.

Installation (Taken & Modified from Github Repo)

1. Install Truffle globally.
   npm install -g truffle
2. Download the box. This also takes care of installing the necessary dependencies.
   truffle unbox react-auth
3. Run the development console.
   truffle develop
4. Compile and migrate the smart contracts.
   compile migrate
5. Run the webpack server for front-end hot reloading (outside the development console). Smart contract changes must be manually recompiled and migrated.
   npm run start
6. Once this is running, let’s go forth and run the truffle test.
   test
   or
   truffle test (if outside of truffle)

Now, this will NOT work if you run the latest and greatest of NPM, Node, Truffle, as it’s irrelevant in a way as the issue here is, your Smart Contract is requiring a specific version of Solidity. Depending on your version (as of writing likely to be 0.5.16).

Test File

What do we need to modify first? Let us go for the Truffle Test file, TestSimpleStorage.sol (/project-folder/test/TestSimpleStorage.sol) and using nano (or vi), open it like so:
nano test/TestSimpleStorage.sol

At the top of the file, look for the pragma solidity definition and modify it so it shows as follows:
pragma solidity ^0.5.16

Smart Contract Files

Now that we modified the Test file, we need to modify the most important files, the smart contract files themselves that define the version of solidity required to even run.

Migrations.sol
Make sure you modify the contract Migrations file by doing the following:
nano contracts/Migrations.sol

Now, modify the pragma again, so it reflects as follows:
pragma solidity ^0.5.16;

After saving it, we’ll need to open the SimpleStorage.sol file.

SimpleStorage.sol
After you’ve opened this file, look again at the top and change the pragma again to be:
pragma solidity ^0.5.16;

Completed!
So you’ve done it, you modified all the needed files to get your smart contract working, well the react GitHub project. To some, this may have been a no-brainer but to several folks I have spoken with, it wasn’t an obvious thing for them, being new to Truffle and Smart Contracts in general. Happy contracting!