redacademy/vue-ethereum-ipfs

Web three.zero Utility Starter: Vue front-end, Ethereum / IPFS Backend

Examined with:

"engines": {
    "node": ">= 9.zero.zero",
    "npm": ">= 5.5.1"
}

• walk version go1.9.Four darwin/amd64
• ipfs version zero.Four.eleven
• Ganache CLI v6.zero.three (ganache-core: 2.zero.2)
• Google Chrome Sixty Four.zero.3282.167 (Official Salvage) (Sixty Four-bit)

Salvage and deploy commands

 "scripts": {
    "dev":
      "webpack-dev-server --inline --progress --config create/webpack.dev.conf.js",
    "originate": "npm sail dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm sail unit && npm sail e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "create": "export IPFS_PUBKEY= && node create/create.js",
    "publish:ipfs": "npm sail test && node create/create.js && node create/ipfs-publish.js"
  },

🙌 How enact I use this to compose indestructable Vue apps that talk Ethereum? 🙌

Before you originate

Install IPFS: https://ipfs.io/doctors/set up/
Install the MetaMask Ethereum wallet (and register an yarn): https://metamask.io/
Install: npm i -g ganache-cli (native Ethereum test community)
Install: npm i -g truffle (Solidity toolkit!)

Manufacture your IPFS repo key and accept as true with an environment variable

To create your key: ipfs key list -l
Residing: export IPFS_PUBKEY=QmQozMTQHW9g6fKmHerVHoKQNQo4zhfXQMsWMTuJ6D1sJd (Example key)

Originate the native Ethereum test safe

Hobble: ganache-cli --accounts=Four

Join Metamask to the test safe

Defend shut Localhost 8545 as your RPC create the MetaMask UI

Use the generated passphrase to log into MetaMask eg:

HD Pockets
==================
Mnemonic:      shoe scare prolonged movie sponsor account for casino valid quiet scene put in pressure federal

Import different accounts in to MetaMask for testing the usage of the generated personal key eg:

Deepest Keys
==================
(zero) 2f3a3521d79a5e5c58972224d80a678c993a1a50b7cf8a2ee51e255e55fb041d <- the passphrase unlocks this yarn
(1) 557d2bd6ab422edda5d57a0c20e0908c31c94a3c7c8af40c923925a3403bd214
(2) 76e98c90b7168242fd523b718a76b95966ab09904129c011582369e7339327a8
(three) 683746dee343d96dd792130b01febc0d75dd5a540fae79350db6ed9f597d

Invent Elegant Contracts

The perfect methodology to originate developing Elegant Contracts:

https://remix.ethereum.org/

Add contracts to the App

• Add all of your contracts (.sol recordsdata) to the /contracts itemizing
• Hobble: truffle assemble && truffle migrate --community pattern

Use your Contracts within the App!

Importing contracts is performed in src/web3Service.js

Example web3Service.js

// Replace this with your major contract!
import contractJSON from '../create/contracts/Contract.json'

import contract from 'truffle-contract'
import Web3 from 'web3'

if (typeof web3 !== 'undefined') {
  web3 = contemporary Web3(web3.currentProvider)
} else {
  web3 = contemporary Web3(contemporary Web3.suppliers.HttpProvider('http://localhost:8545'))
}

web3.eth.getAccounts((err, res) => {
  web3.eth.defaultAccount = res[0]
})

const Contract = contract({
  abi: contractJSON.abi,
  binary: contractJSON.bytecode
})

Contract.setProvider(web3.currentProvider)

const saveContract = async c => {
  // https://github.com/trufflesuite/truffle-contract/disorders/70
  const newContract = contemporary web3.eth.Contract(contractJSON.abi)

  const createdContract = await newContract
    .deploy({
      knowledge: contractJSON.bytecode,
      arguments: [c.name, c.terms]
    })
    .send({
      from: web3.eth.defaultAccount,
      // Somebody aid me perceive this.
      fuel: 5000000,
      gasPrice: '20000000000000'
    })

  createdContract
    .on('error', () => {})
    .on('receipt', () => {})
    .on('confirmation', () => {})

  await getContract(createdContract.choices.tackle)
}

const getContract = async tackle => {
  const contract = await Contract.at(tackle)
  
  // Here is your contract instance!
  console.log(contract)
}

export { saveContract }

Links

TODO