cd
into the new directory:hdwallet-provider
hdwallet-provider
is a separate package that signs transactions for addresses derived from a 12 or 24-word mnemonic. hdwallet-provider
uses the first address generated from the mnemonic. However, this is configurable.hdwallet-provider
:.env
in your project directory to store the project and Ethereum account details..env
file includes the MetaMask secret recovery phrase. Refer to the MetaMask instructions on how to reveal a secret recovery phrase. If using a network other than Ropsten, ensure you update INFURA_API_URL
accordingly..env
file:<Your-Project-ID>
with the Project ID of the Ethereum project. <Your-MetaMask-Secret-Recovery-Phrase>
with the mnemonic of your MetaMask wallet. This phrase is used by the Truffle hdwallet-provider
to sign transactions.contracts/
directory. In this example, we'll create a basic contract called SimpleStorage.sol
.truffle-config.js
file to use the HDWalletProvider
and include the required configuration to deploy to the network (Ropsten in this example).
Find the truffle-config.js
file in your project's root directory. Delete the contents of the file, and replace it with the following:build/contracts/
directory, relative to your project root. Refer to the Truffle documentation for more information about the compilation process.migrations/
directory and are numbered. In the migrations/
directory, create a file called 2_deploy_contract.js
.Migration.sol
and associated deployment file (1_initial_migration.js
) are created automatically when creating your Truffle project.2_deploy_contract.js
file:transaction hash
or contract address
for example.npx
command to create a React project boilerplate and a directory named storage-lab
:cd
into the new directory:Web3.js
library interacts with the Ethereum network.ether.js
library to interact with the Ethereum network.simple-storage
) into the React project directory.
The project directory should now look as follows:SimpleStorage.json
inside of the Truffle project's build/contracts/
directory. Copy the abi
object from the JSON file and reformat it so that we can import it into our app./src
directory, create a folder named /abi
, which will contain our abi.js
file. The /src
directory should look as follows:abi.js
file and reformat it as follows:src/App.js
file is the highest level component in the React application structure. <CONTRACT-ADDRESS>
with your smart contract address. To locate the contract address, view the address
field in the SimpleStorage.json
file inside of the build/contracts/
directory. App.css
file, delete the boilerplate stylesheet and add the following custom stylesheet: