paperchain / nuxt-box Goto Github PK

Truffle, Nuxt and Vue boilerplate

Home Page: https://paperchain.github.io/nuxt-box/

JavaScript 75.25% Vue 24.75%

ethereum truffle vuejs nuxtjs vue nuxt truffle-framework solidity nuxt-box metamask boilerplate

nuxt-box's Introduction

Nuxt-box

Nuxt-box is a truffle box using the Nuxt.js framework to create a Vue.js application that can interact with the smart contracts on Ethereum.

Setup & Installation

Install truffle: npm i -g truffle
Download the box. This also takes care of installing the necessary dependencies: truffle unbox Paperchain/nuxt-box
Install Metamask browser extension

Running the Application

If you have MetaMask set for your browser, configure a 
Custom RPC with address: http://localhost:9545 from Metamask Networks tab.

Open terminal and run the development server: truffle develop
Connect local-rpc account with MetaMask. Follow this answer on Ethereum StackExchange. This account will have tokens and ether for transactions.
Deploy the contracts to the local-rpc: migrate --reset
Copy the token address from the terminal:

EIP20: 0x345ca3e014aaf5dca488057592ee47305d9b3e10

Paste the token address to src/store/eip20.js where it says:

const tokenAddress = '0x345ca3e014aaf5dca488057592ee47305d9b3e10'
// insert deployed EIP20 token address here

Open a new terminal tab and run the webapp: npm run dev

Web App Commands

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project using
$ npm run generate

# lint or lintfix
$ npm run lint
$ npm run lintfix

Truffle Commands

# run contract tests
$ truffle test

# run truffle development mode (run local blockchain)
$ truffle develop

# deploy contracts to local blockchain
$ truffle migrate --reset
$ migrate --reset (when in development mode)

Credits

For example purposes this boilerplate uses EIP20 token contracts made by ConsenSys.

nuxt-box's People

Contributors

Stargazers

Watchers

Forkers

hemulin jasp83 kjaylee tawazlwb vaibhavchellani thomascarvalho timelf123 s0hno christonomous 0xcryptohorse slesolliec amine-fethallah lukeajtodd baringji 0xuhe bachtonthat wdcodecn emilyjlin95

nuxt-box's Issues

Demo page for transaction lifecycle

Create a new page in the site template that demonstrates the process of sending a transaction and asynchronously waiting for the transaction receipt to happen and then to notify the user upon confirmation.

[ ] Create a new page called 'transactions' (or reuse the index page for this)
[ ] Create a neat UI aesthetic for the demo ( nothing too crazy )
[ ] Use EIP20.js store to send tokens as the 'transaction' to demo
[ ] Capture the events transactionHash, receipt, confirmation and error to display the responses on the page
[ ] Be creative on what a developer using nuxt-box could find most useful in regards to understanding the transaction lifecycle

unbox failed

Describe the bug
A clear and concise description of what the bug is.

❯ truffle unbox Paperchain/nuxt-box
Starting unbox...
=================
✔ Preparing to download box
✔ Downloading
npm ERR! code 128
npm ERR! git dep preparation failed
npm ERR! command /Users/samueljoseph/.nvm/versions/node/v16.3.0/bin/node /Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users/samueljoseph/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm ERR! code 128
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command git --no-replace-objects clone --mirror -q ssh://[email protected]/gulpjs/gulp.git /Users/samueljoseph/.npm/_cacache/tmp/git-clone-c684df77/.git
npm ERR! npm ERR! fatal: destination path '/Users/samueljoseph/.npm/_cacache/tmp/git-clone-c684df77/.git' already exists and is not an empty directory.
npm ERR! 
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     /Users/samueljoseph/.npm/_logs/2021-07-06T09_59_42_190Z-debug.log
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/samueljoseph/.npm/_logs/2021-07-06T09_59_44_684Z-debug.log
✔ Cleaning up temporary files
✖ Setting up box
Unbox failed!
✖ Setting up box
Unbox failed!
Error: Command failed: npm install
npm ERR! code 128
npm ERR! git dep preparation failed
npm ERR! command /Users/samueljoseph/.nvm/versions/node/v16.3.0/bin/node /Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users/samueljoseph/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm ERR! code 128
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command git --no-replace-objects clone --mirror -q ssh://[email protected]/gulpjs/gulp.git /Users/samueljoseph/.npm/_cacache/tmp/git-clone-c684df77/.git
npm ERR! npm ERR! fatal: destination path '/Users/samueljoseph/.npm/_cacache/tmp/git-clone-c684df77/.git' already exists and is not an empty directory.
npm ERR! 
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     /Users/samueljoseph/.npm/_logs/2021-07-06T09_59_42_190Z-debug.log
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/samueljoseph/.npm/_logs/2021-07-06T09_59_44_684Z-debug.log
    at checkExecSyncError (node:child_process:707:11)
    at Object.execSync (node:child_process:744:15)
    at Object.installBoxDependencies (/Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/truffle/build/webpack:/packages/box/dist/lib/utils/unbox.js:136:1)
    at Object.setUpBox (/Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/truffle/build/webpack:/packages/box/dist/lib/utils/index.js:66:1)
    at /Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/truffle/build/webpack:/packages/box/dist/box.js:116:1
    at Generator.next (<anonymous>)
    at fulfilled (/Users/samueljoseph/.nvm/versions/node/v16.3.0/lib/node_modules/truffle/build/webpack:/packages/box/dist/box.js:5:42)

maybe I need to be on an earlier version of node? I'm on OSX 11.4, node 16.3.0 ...

Listen to events

Hey there,
Im using the nuxt-box and Im very satisfied with it.
Now I want to listen to events my contract emits but I cant find any solution how to do this.

That's wat I tried without success:

this.$store.state.myContract.events.MyEvent({fromBlock: 0, toBlock: 'latest'}, (err, event) => {
                if (err) console.log(err);
                console.log(event);
            }).on('data', function(event){
                console.log(event);
            }).on('changed', function(event){
                console.log('on changed');
            }).on('error', console.error);

Anyone here could give me a small example?
Thanks a lot :)

Demo page for signing transactions

Create a dedicated page in the site template that demonstrates the process of performing a transaction signing (personal sign or eth sign) using metamask. The idea is to give a user an out of the box example of this standard and to promote the usage of signing while using nuxt-box.

[ ] Create a new page called 'signing'
[ ] Create a neat UI aesthetic for the demo ( nothing too crazy )
[ ] Create a new store called 'utils' for all the function handling
[ ] Create a button that invokes metamask to sign a simple message with a couple of data fields (maybe time?)
[ ] Display the signed hash
[ ] Recover the public key from the hash and display the address
[ ] Be creative on what a developer could find most useful on learning this concept on this page.

Useful Resources

Tutorial / Readme Lacks Clarity

The part of the Readme which states:

Copy the token address from the terminal:

EIP20: 0x345ca3e014aaf5dca488057592ee47305d9b3e10

is very unclear, as there are 3 contracts which are migrated. Here is a sample output:

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.


Starting migrations...
======================
> Network name:    'ganache'
> Network id:      5777
> Block gas limit: 6721975


1_initial_migration.js
======================

   Replacing 'Migrations'
   ----------------------
   > transaction hash:    0x646cb93304149c128b46bc175f5d1eaa1ab5810078d7ee8eed5a006ebfa41998
   > Blocks: 0            Seconds: 0
   > contract address:    0xF79f8789d57a2334D202CE2C893A3F653F9fa28D
   > account:             0xC7d24bA673E914FE0c6bEbEB1A55cDB223fe1E67
   > balance:             99.99430184
   > gas used:            284908
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00569816 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00569816 ETH


2_deploy_tokens.js
==================

   Replacing 'EIP20'
   -----------------
   > transaction hash:    0x6304cc3c1e70d161e57c34d0ea538e1532acd1b0dcf3d08c23747d638fca8b14
   > Blocks: 0            Seconds: 0
   > contract address:    0x7cceB3cdB405b9ae0D0c6fB298A77D442eD80d4D
   > account:             0xC7d24bA673E914FE0c6bEbEB1A55cDB223fe1E67
   > balance:             99.97198206
   > gas used:            1073955
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.0214791 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:           0.0214791 ETH


3_deploy_factory.js
===================

   Replacing 'EIP20Factory'
   ------------------------
   > transaction hash:    0x90167656e01213e7f1f5f51ca9182603360d77d18cb47d7d154246c9a9f4a602
   > Blocks: 0            Seconds: 0
   > contract address:    0x7eBa7F7C13F3E0a508C7137304CeCc60CC1FB149
   > account:             0xC7d24bA673E914FE0c6bEbEB1A55cDB223fe1E67
   > balance:             99.86992594
   > gas used:            5075772
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.10151544 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.10151544 ETH


Summary
=======
> Total deployments:   3
> Final cost:          0.1286927 ETH

It is the contract address from 2_deploy_tokens.js, which in my example would be 0x7cceB3cdB405b9ae0D0c6fB298A77D442eD80d4D which needs to be put in to the eip20.js file, const tokenAddress = '0x7cceB3cdB405b9ae0D0c6fB298A77D442eD80d4D'