Basic Vue dApp examples with Ethereum, Tron and Qtum

So, What is a dApp?

Typically associated with the Ethereum project, a decentralized application, or dApp, is an application that runs on a peer-to-peer network of computers, as opposed to a single computer. The key benefit of this is, users of the network do not depend on a central computer in-order to send and receive information.

Examples

I didn’t find a lot of Vue dApp examples, so as a little side project I build some starter packages with the hope that they can serve as examples, starting points or inspiration for other developers!

All projects include:

• Vue-cli 3.2.1
• TypeScript (class style components)
• End-to-end testing
• Unit testing
• Smart contract examples writtin in Solidity

Ethereum

marlowl / vue-truffle-starter-dapp

Vue CLI Starter Dapp; Including TypeScript, Truffle 5 and Web3

Vue Truffle Starter dApp

This project was generated with vue-cli version 3.2.1

An Vue truffle starter dApp. Write, compile & deploy smart contracts for Ethereum.

Sample contract is deployed on the Ropsten testnetwork

Demo

Update a value of a smart contract with your Ethereum wallet address

Project setup

MetaMask and Infura account are both required for this project to work!

MetaMask

I would like to refer to this article for a simple tutorial on how to setup MetaMask and get some free test Ether on your Ropsten account! After that you have your ETH address you need for the .env file

Infura

Infura is a hosted Ethereum node cluster that lets you run your application without requiring them to set up their own Ethereum node or wallet. Register an account here and require your API key you need for the .env file!

Get ganache-cli and truffle running on your environment

…

View on GitHub

marlowl / vue-voting-dapp

Simple voting dApp, using Vue CLI, Truffle and Web3

Vue Voting dApp

This project was generated with vue-cli version 3.2.1

An Vue truffle voting mechanism dApp.

Sample contract is deployed on the Kovan testnetwork

Demo

Project setup

MetaMask and Infura account are both required for this project to work!

MetaMask

I would like to refer to this article for a simple tutorial on how to setup MetaMask and get some free test Ether on your Kovan account! After that you have your ETH address you need for the .env file

Infura

Infura is a hosted Ethereum node cluster that lets you run your application without requiring them to set up their own Ethereum node or wallet. Register an account here and require your API key you need for the .env file!

Get ganache-cli and truffle running on your environment

npm install -g truffle ganache-cli

Start ganache-cli

ganache-cli

After running this command you should be able to find your MNEMONIC…

View on GitHub

marlowl / vue-web3-wallet

An Vue ganache starter wallet. Send transactions between addresses on a local blockchain RPC server.

Vue web3 wallet

This project was generated with vue-cli version 3.2.1

An Vue ganache starter wallet. Send transactions between addresses on a local blockchain RPC server.

Demo

Send transactions between ganache-cli accounts

Project setup

Install ganache-cli

npm install -g  ganache-cli

Start ganache-cli

ganache-cli -p 7545

Install dependencies

npm install

Start dev server

npm run serve

View on GitHub

Tron

marlowl / tron-starter-dapp

A Vue based Tron example dApp with tronweb, tronlink, tronbox and vue-cli

Tron starter dApp

This project was generated with vue-cli version 3.2.1

A Vue based Tron example dApp with tronweb, tronlink, tronbox and vue-cli

Demo

Update a value of a smart contract with your Tronlink wallet address

Project setup

A TronLink account is required for this dApp to work!

Download Tronlink here

Get some free test TRX coins from here to get some balance on your account

Install dependencies

npm install

Update the .env file

VUE_APP_SHASTA_PRIVATE_KEY="Your key"

Run the development server

npm run serve

Compile your own smart contracts

Add your smart contract to the /contracts folder

Install tronbox

npm install -g tronbox

Compile the contract

tronbox compile

Migrate the contract

tronbox migrate --network shasta

Change the current address to your deployed contract address

  let contractInstance = await tronWeb
      .contract()
      .at("Your deployed contract address");

View on GitHub

Qtum

marlowl / qtum-starter-dapp

A Vue based Qtum example dApp with qtumjs, qtumportal, solar and vue-cli

QTUM starter dApp

This project was generated with vue-cli version 3.2.1

An Vue QTUM starter dApp.

Demo

Project setup

Most of this setup comes from the Developer's Guide to QTUM

Visit this repo for more and complete guides for developing QTUM dApps

Install Docker & Node

https://www.docker.com/get-started

https://nodejs.org/en/

Download the latest qtumportal image

docker pull hayeah/qtumportal:latest

Deploy a Smart Contract

Start qtumd in regtest mode:

docker run -it --rm \
  --name myapp \
  -v `pwd`:/dapp \
  -p 9899:9899 \
  -p 9888:9888 \
  hayeah/qtumportal

Open a new terminal and enter into the container:

docker exec -it myapp sh

Generate some initial balance:

qcli generate 600

Let's generate an address to act as the owner.

qcli getnewaddress

Let's fund the owner address with 10 QTUM, to pay for gas when we deploy our contract later:

qcli sendtoaddress address_from_previous_command 10

Finally, we'll need to configure the deployment tool solar to use this particular…

View on GitHub

Enjoy!

Comments

[comefrombeginning]

hello marlowl , we are looking for devs.