openzeppelin/starter-kit-tutorial

An OpenZeppelin starter kit tutorial containing React, OpenZeppelin SDK & OpenZeppelin Contracts.

⚠️ This project is deprecated. We are no longer actively developing new features nor addressing issues. Read here for more info, and reach out if you are interested in taking over maintenance. We suggest looking into create-eth-app for a popular alternative to this project.

OpenZeppelin Starter Kit Tutorial

An OpenZeppelin Starter Kit Tutorial containing React, OpenZeppelin CLI, OpenZeppelin Contracts, and Infura.

This kit comes with everything you need to start using upgradeable Smart contracts inside your applications. It also includes all the configuration required to deploy to different networks.

In addition to the contents included in the vanilla Starter Kit, this kit contains a step-by-step tutorial on how to use the OpenZeppelin SDK to develop your decentralized application.

Requirements

Install Ganache.

npm install [email protected]

Installation

Ensure you are in a new and empty directory, and run the unpack command with tutorial to create a starter project:

npx @openzeppelin/cli unpack tutorial

Run

In a new terminal window, run your local blockchain:

ganache-cli --deterministic

In your original terminal window, at the top level of your folder, initialize the project and follow the prompts:

npx openzeppelin init

After that compile the contracts:

npx openzeppelin compile

In a new terminal window, in the client directory, run the React app:

cd client
npm run start

Interact

You can interact directly with your smart contracts from the openzeppelin cli.

npx openzeppelin transfer

send funds to a given address.

npx openzeppelin balance [address]

query the ETH balance of the specified account, also supports ERC20s.

npx openzeppelin send-tx

sends a transaction to your contract and returns the events.

npx openzeppelin call

execute a constant method and receive back the value.

Type npx openzeppelin to see a complete list of availible commands.

Test

This starter kit uses Test Environment for smart contracts tests. Tests are written with Mocha, OpenZeppelin TestHelpers and Web3.js. ./test/counter.js and ./test/wallet.js files are good starting point for writing your own tests.

npm run test

During development it is helpful to run nodemon -e sol,js -x 'oz compile && npm test -- --bail'. This will rerun tests on changes at .sol and .js files.

Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

// ensure you are inside the client directory when running this
npm run test

Build

To build the application for production, use the build script. A production build will be in the client/build folder.

// ensure you are inside the client directory when running this
npm run build

Hot Loader

Solidity Hot Loader allows seamless updates to frontend by just editing and saving Solidity code. To enable change disabled flag in client/config/webpack.js file to false.

FAQ

• Where is my production build?

  The production build will be in the client/build folder after running npm run build in the client folder.

• Where can I find more documentation?

  Check out the OpenZeppelin Starter Kits documentation.

starter-kit-tutorial's Issues

https://github.com/OpenZeppelin/starter-kit-tutorial

Contracts in my contracts folder have no problem finding things like

• import "@openzeppelin/upgrades/contracts/Initializable.sol";
  

or

• import "@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/IERC20.sol";
  

• import "@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/StandaloneERC20.sol";
  

• import "@openzeppelin/contracts-ethereum-package/contracts/ownership/Ownable.sol";
  

•  import "@openzeppelin/upgrades/contracts/Initializable.sol";
  

but it seems that the contracts in @openzeppelin/contracts-ethereum-package/contracts can't find each other. See first few error messages at bottom.

It must be something simple but I've followed the instructions at https://github.com/OpenZeppelin/starter-kit-tutorial exactly several times and can't change the result.

Thanks in advance!!!

=== Error Messages =====
C:\oz>npx openzeppelin compile
× Compiling contracts with solc 0.5.16 (commit.9c3226ce)
Compilation errors:
@openzeppelin/contracts-ethereum-package/contracts/ownership/Ownable.sol:5:1: ParserError: Source "@openzeppelin/contracts-ethereum-package/contracts/GSN/Context.sol" not found: File import callback not supported
import "../GSN/Context.sol";
^--------------------------^

@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/StandaloneERC20.sol:4:1: ParserError: Source "@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/ERC20Detailed.sol" not found: File import callback not supported
import "./ERC20Detailed.sol";
^---------------------------^

@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/StandaloneERC20.sol:5:1: ParserError: Source "@openzeppelin/contracts-ethereum-package/contracts/token/ERC20/ERC20Mintable.sol" not found: File import callback not supported
import "./ERC20Mintable.sol";
^---------------------------^

Add integration test for openzeppelin-loader

Cannot find module 'eslint'

When running the client npm start in the client directory the following warnings are shown:

Compiled with warnings.

./src/components/Footer/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/serviceWorker.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/utils/getWeb3.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Header/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/App.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Hero/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Web3Info/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Counter/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Wallet/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

./src/components/Instructions/index.js
Failed to load plugin 'import' declared in 'BaseConfig » /c/Users/andre/Documents/projects/forum/myproject/client/node_modules/eslint-config-react-app/index.js': Cannot find module 'eslint'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

These warnings don't appear when eslint installed on the client.
npm i eslint --save-dev

Can't run ganache-cli --deterministic

I can't run ganache-cli --deterministic
bash: ganache-cli: command not found

npx @openzeppelin/cli unpack tutorial gave this:

../src/privatekey.cc: In function ‘Nan::NAN_METHOD_RETURN_TYPE privateKeyNegate(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/privatekey.cc:73:61: warning: ignoring return value of ‘int secp256k1_ec_privkey_negate(const secp256k1_context*, unsigned char*)’, declared with attribute warn_unused_result [-Wunused-result]
   secp256k1_ec_privkey_negate(secp256k1ctx, &private_key[0]);
                                                             ^
../src/addon.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE KeccakWrapper::Initialize(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/addon.cc:37:47: warning: ‘int64_t v8::Value::IntegerValue() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
     unsigned int rate = info[0]->IntegerValue();
                                               ^
In file included from /home/user/.node-gyp/10.16.0/include/node/v8.h:26:0,
                 from /home/user/.node-gyp/10.16.0/include/node/node.h:63,
                 from ../src/addon.cc:1:
/home/user/.node-gyp/10.16.0/include/node/v8.h:2476:46: note: declared here
   V8_DEPRECATED("Use maybe version", int64_t IntegerValue() const);
                                              ^
/home/user/.node-gyp/10.16.0/include/node/v8config.h:324:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
../src/addon.cc:38:51: warning: ‘int64_t v8::Value::IntegerValue() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
     unsigned int capacity = info[1]->IntegerValue();
                                                   ^
In file included from /home/user/.node-gyp/10.16.0/include/node/v8.h:26:0,
                 from /home/user/.node-gyp/10.16.0/include/node/node.h:63,
                 from ../src/addon.cc:1:
/home/user/.node-gyp/10.16.0/include/node/v8.h:2476:46: note: declared here
   V8_DEPRECATED("Use maybe version", int64_t IntegerValue() const);
                                              ^
/home/user/.node-gyp/10.16.0/include/node/v8config.h:324:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
../src/addon.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE KeccakWrapper::AbsorbLastFewBits(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/addon.cc:56:48: warning: ‘int64_t v8::Value::IntegerValue() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
     unsigned char bits = info[0]->IntegerValue();
                                                ^
In file included from /home/user/.node-gyp/10.16.0/include/node/v8.h:26:0,
                 from /home/user/.node-gyp/10.16.0/include/node/node.h:63,
                 from ../src/addon.cc:1:
/home/user/.node-gyp/10.16.0/include/node/v8.h:2476:46: note: declared here
   V8_DEPRECATED("Use maybe version", int64_t IntegerValue() const);
                                              ^
/home/user/.node-gyp/10.16.0/include/node/v8config.h:324:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
../src/addon.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE KeccakWrapper::Squeeze(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/addon.cc:64:43: warning: ‘int64_t v8::Value::IntegerValue() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
     size_t length = info[0]->IntegerValue();
                                           ^
In file included from /home/user/.node-gyp/10.16.0/include/node/v8.h:26:0,
                 from /home/user/.node-gyp/10.16.0/include/node/node.h:63,
                 from ../src/addon.cc:1:
/home/user/.node-gyp/10.16.0/include/node/v8.h:2476:46: note: declared here
   V8_DEPRECATED("Use maybe version", int64_t IntegerValue() const);
                                              ^
/home/user/.node-gyp/10.16.0/include/node/v8config.h:324:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
../src/addon.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE KeccakWrapper::Copy(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/addon.cc:75:82: warning: ‘v8::Local<v8::Object> v8::Value::ToObject() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
 eccakWrapper* to = Nan::ObjectWrap::Unwrap<KeccakWrapper>(info[0]->ToObject());
                                                                             ^
In file included from /home/user/.node-gyp/10.16.0/include/node/node.h:63:0,
                 from ../src/addon.cc:1:
/home/user/.node-gyp/10.16.0/include/node/v8.h:10046:15: note: declared here
 Local<Object> Value::ToObject() const {
               ^~~~~
✓ Kit downloaded and unpacked
The kit is ready to use. 

Quick Start
Run your local blockchain:
> ganache-cli --deterministic
Initialize the OpenZeppelin SDK project:
> openzeppelin init app
Go to the client directory:
> cd client
Run the React app:
> npm run start
Continue in your browser!
More at https://github.com/OpenZeppelin/starter-kit-tutorial

I already switched to node v10.16.0, before i had more errors, but it's still not working.

Can't unpack (Ubuntu)

I'm trying to unpack the start kit tutorial following the given instructions.

I am using fresh install of Truffle, Gnache, NodeJS, npm and OpenZepplinSDK.

It fails at "openzeppelin unpack tutorial" with the following error:

✖ Downloading kit from https://github.com/openzeppelin/tutorial-kit.git Failed to download and unpack kit from https://github.com/openzeppelin/tutorial-kit.git. Details: Command failed: npm install && cd client && npm install npm WARN deprecated [email protected]: This package has been renamed to @openzeppelin/test-helpers. Please update your dependency, or you will no longer receive updates. npm WARN deprecated [email protected]: WARNING: This package has been renamed to @truffle/hdwallet-provider. npm WARN deprecated [email protected]: WARNING: This package has been renamed to @truffle/config. npm WARN deprecated [email protected]: WARNING: This package has been renamed to @truffle/provider. npm WARN deprecated [email protected]: WARNING: This package has been renamed to @truffle/error. npm WARN deprecated @types/[email protected]: This is a stub types definition for bignumber.js (https://github.com/MikeMcl/bignumber.js/). bignumber.js provides its own type definitions, so you don't need @types/bignumber.js installed! npm WARN deprecated [email protected]: WARNING: This package has been renamed to @truffle/interface-adapter. npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. make: g++: Command not found make: *** [Release/obj.target/keccak/src/addon.o] Error 127 gyp ERR! build error gyp ERR! stack Error:makefailed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23) gyp ERR! stack at ChildProcess.emit (events.js:305:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! System Linux 4.15.0-72-generic gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" gyp ERR! cwd /home/ben/Documents/Development/Ethereum/OZtutorial/node_modules/ganache-core/node_modules/keccak gyp ERR! node -v v13.5.0 gyp ERR! node-gyp -v v5.0.5 gyp ERR! not ok npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] rebuild:node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] rebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ben/.npm/_logs/2020-01-02T18_19_20_724Z-debug.log
make: g++: Command not found
make: *** [Release/obj.target/copied_files.node] Error 127
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:305:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 4.15.0-72-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/ben/Documents/Development/Ethereum/OZtutorial/node_modules/ganache-core/node_modules/scrypt
gyp ERR! node -v v13.5.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
make: g++: Command not found
make: *** [Release/obj.target/secp256k1/src/addon.o] Error 127
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:305:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 4.15.0-72-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/ben/Documents/Development/Ethereum/OZtutorial/node_modules/ganache-core/node_modules/secp256k1
gyp ERR! node -v v13.5.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] rebuild: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] rebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ben/.npm/_logs/2020-01-02T18_19_23_453Z-debug.log
make: g++: Command not found
make: *** [Release/obj.target/sha3/src/addon.o] Error 127
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:305:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 4.15.0-72-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/ben/Documents/Development/Ethereum/OZtutorial/node_modules/ganache-core/node_modules/sha3
gyp ERR! node -v v13.5.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/ganache-core/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/ganache-core/node_modules/scrypt):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node-gyp rebuild
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ben/.npm/_logs/2020-01-02T18_19_29_124Z-debug.log

`

Can't install (Windows 10)

Following the install instructions I can't install on Windows 10. Looks like it can't find the WebSocket-Node.git

1225 verbose stack Error: spawn git ENOENT
1225 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
1225 verbose stack at onErrorNT (internal/child_process.js:456:16)
1225 verbose stack at processTicksAndRejections (internal/process/task_queues.js:80:21)
1226 verbose cwd D:\OpenZeppelin
1227 verbose Windows_NT 10.0.17763
1228 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "@openzeppelin/[email protected]"
1229 verbose node v12.13.1
1230 verbose npm v6.12.1
1231 error code ENOENT
1232 error syscall spawn git
1233 error path git
1234 error errno ENOENT
1235 error enoent Error while executing:
1235 error enoent undefined ls-remote -h -t ssh://[email protected]/web3-js/WebSocket-Node.git
1235 error enoent
1235 error enoent
1235 error enoent spawn git ENOENT
1236 error enoent This is related to npm not being able to find a file.
1237 verbose exit [ 1, true ]

oz compile error: The filename, directory name, or volume label syntax is incorrect.

I'm using Windows 10.

I get the following output with errors after npm run start:

Compiled with warnings.

./src/components/Header/index.js
Line 3: 'logo' is defined but never used no-unused-vars

./src/components/Footer/index.js
Line 5: 'pencil' is defined but never used no-unused-vars

../contracts/Counter.sol
Error: Command failed: 'C:\Users-\Documents\Projects\openzeppelin-starter-kit-tutorial\node_modules.bin\oz' compile
The filename, directory name, or volume label syntax is incorrect.

../contracts/Wallet.sol
Error: Command failed: 'C:\Users-\Documents\Projects\openzeppelin-starter-kit-tutorial\node_modules.bin\oz' compile
The filename, directory name, or volume label syntax is incorrect.

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.