Skip to content

Commit b7fc018

Browse files
iurimatiasiurimatias
authored
Merge pull request #52 from embark-framework/feat/vue-example
feat: vue example
2 parents e61b87c + cf241ed commit b7fc018

File tree

12 files changed

+9017
-0
lines changed

12 files changed

+9017
-0
lines changed

‎examples/vue/.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎examples/vue/README.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
subspace - vue example
2+
===
3+
Simple application using a vue to receive a stream of emitted events. This app will deploy a test contract to **Ganache**
4+
5+
## Requirements
6+
- `ganache-cli`
7+
- `yarn` or `npm` installed.
8+
9+
## Install
10+
In the parent folder, install, build and link the package with `yarn` or `npm`
11+
```
12+
yarn
13+
yarn build:dev
14+
yarn link
15+
```
16+
Then in the current folder link `@status-im/subspace`, and install the packages
17+
```
18+
yarn link "@status-im/subspace"
19+
yarn
20+
```
21+
22+
## Usage
23+
In a terminal execute
24+
```
25+
ganache-cli
26+
```
27+
28+
In a different session, execute
29+
```
30+
yarn serve
31+
```
32+
33+
Browse the DApp in [http://localhost:8080](http://localhost:8080)
34+
35+
36+
*Note*: this is a simple example application that does not include error handling for the web3 connection. Be sure `ganache-cli` is running in `localhost:8545` before browsing the dapp.
37+
38+
### node-gyp problems
39+
node-gyp can cause problems, because it requires a C++ compiler.
40+
41+
If you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).
42+
43+
If you still have problems and are on Windows, try the following:
44+
- run `npm config set msvs_version 2015` before `npm install`
45+
- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.

‎examples/vue/package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "vue",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.3.2",
12+
"rxjs": "^6.5.3",
13+
"vue": "^2.6.10",
14+
"vue-rx": "^6.2.0",
15+
"web3": "1.0.0-beta.37"
16+
},
17+
"devDependencies": {
18+
"@vue/cli-plugin-babel": "^4.0.0",
19+
"@vue/cli-service": "^4.0.0",
20+
"vue-template-compiler": "^2.6.10"
21+
},
22+
"postcss": {
23+
"plugins": {
24+
"autoprefixer": {}
25+
}
26+
},
27+
"browserslist": [
28+
"> 1%",
29+
"last 2 versions"
30+
]
31+
}

‎examples/vue/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/vue/public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>vue</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎examples/vue/src/App.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div id="app">
3+
<button v-on:click="createTrx">Create a Transaction</button>
4+
<MyComponent v-bind:event-data="myEventObservable$" v-if="!!myEventObservable$" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import MyComponent from './components/MyComponent.vue'
10+
import Subspace from "@status-im/subspace";
11+
import web3 from './web3';
12+
import MyContract from './MyContract';
13+
14+
export default {
15+
name: 'app',
16+
data: function(){
17+
return {
18+
myEventObservable$: null,
19+
MyContractInstance: null
20+
};
21+
},
22+
created: async function(){
23+
this.MyContractInstance = await MyContract.getInstance();
24+
25+
const subspace = new Subspace(web3.currentProvider);
26+
await subspace.init();
27+
28+
this.myEventObservable$ = subspace.trackEvent(this.MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });
29+
},
30+
methods: {
31+
createTrx: function(){
32+
this.MyContractInstance.methods
33+
.myFunction()
34+
.send({ from: web3.eth.defaultAccount });
35+
}
36+
},
37+
components: {
38+
MyComponent
39+
}
40+
}
41+
</script>

‎examples/vue/src/MyContract.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import web3 from './web3';
2+
3+
const abi = [
4+
{
5+
"constant": false,
6+
"inputs": [],
7+
"name": "myFunction",
8+
"outputs": [],
9+
"payable": false,
10+
"stateMutability": "nonpayable",
11+
"type": "function"
12+
},
13+
{
14+
"anonymous": false,
15+
"inputs": [
16+
{
17+
"indexed": false,
18+
"name": "someValue",
19+
"type": "uint256"
20+
},
21+
{
22+
"indexed": false,
23+
"name": "anotherValue",
24+
"type": "bytes32"
25+
}
26+
],
27+
"name": "MyEvent",
28+
"type": "event"
29+
}
30+
];
31+
32+
const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
33+
34+
const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
35+
36+
MyContract.getInstance = async() => {
37+
if(!web3.eth.defaultAccount){
38+
const accounts = await web3.eth.getAccounts();
39+
web3.eth.defaultAccount = accounts[0];
40+
}
41+
return MyContract.deploy().send({from: web3.eth.defaultAccount});
42+
}
43+
44+
export default MyContract;

‎examples/vue/src/assets/logo.png

6.69 KB
Loading

‎examples/vue/src/components/MyComponent.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<ul v-if="!!eventData$">
3+
<li><b>someValue: </b> {{eventData$.someValue}}</li>
4+
<li><b>anotherValue: </b> {{eventData$.anotherValue}}</li>
5+
</ul>
6+
</template>
7+
8+
<script>
9+
10+
export default {
11+
name: 'MyComponent',
12+
props: {
13+
eventData: Object
14+
},
15+
subscriptions() {
16+
return {
17+
eventData$: this.eventData
18+
}
19+
}
20+
}
21+
</script>

‎examples/vue/src/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
import VueRx from 'vue-rx'
3+
import App from './App.vue'
4+
5+
Vue.use(VueRx)
6+
7+
Vue.config.productionTip = false
8+
9+
new Vue({
10+
render: h => h(App),
11+
}).$mount('#app')

‎examples/vue/src/web3.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Web3 from 'web3';
2+
3+
const web3 = new Web3("ws://localhost:8545");
4+
5+
export default web3;

0 commit comments

Comments
 (0)