feat: vue example
This commit is contained in:
Richard Ramos
parent
e61b87c1b9
commit
cf241ed2de
|
|
@ -0,0 +1,21 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
subspace - vue example
|
||||||
|
===
|
||||||
|
Simple application using a vue to receive a stream of emitted events. This app will deploy a test contract to **Ganache**
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
- `ganache-cli`
|
||||||
|
- `yarn` or `npm` installed.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
In the parent folder, install, build and link the package with `yarn` or `npm`
|
||||||
|
```
|
||||||
|
yarn
|
||||||
|
yarn build:dev
|
||||||
|
yarn link
|
||||||
|
```
|
||||||
|
Then in the current folder link `@status-im/subspace`, and install the packages
|
||||||
|
```
|
||||||
|
yarn link "@status-im/subspace"
|
||||||
|
yarn
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
In a terminal execute
|
||||||
|
```
|
||||||
|
ganache-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
In a different session, execute
|
||||||
|
```
|
||||||
|
yarn serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Browse the DApp in [http://localhost:8080](http://localhost:8080)
|
||||||
|
|
||||||
|
|
||||||
|
*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.
|
||||||
|
|
||||||
|
### node-gyp problems
|
||||||
|
node-gyp can cause problems, because it requires a C++ compiler.
|
||||||
|
|
||||||
|
If you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).
|
||||||
|
|
||||||
|
If you still have problems and are on Windows, try the following:
|
||||||
|
- run `npm config set msvs_version 2015` before `npm install`
|
||||||
|
- 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.
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "vue",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.3.2",
|
||||||
|
"rxjs": "^6.5.3",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-rx": "^6.2.0",
|
||||||
|
"web3": "1.0.0-beta.37"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^4.0.0",
|
||||||
|
"@vue/cli-service": "^4.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<button v-on:click="createTrx">Create a Transaction</button>
|
||||||
|
<MyComponent v-bind:event-data="myEventObservable$" v-if="!!myEventObservable$" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MyComponent from './components/MyComponent.vue'
|
||||||
|
import Subspace from "@status-im/subspace";
|
||||||
|
import web3 from './web3';
|
||||||
|
import MyContract from './MyContract';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'app',
|
||||||
|
data: function(){
|
||||||
|
return {
|
||||||
|
myEventObservable$: null,
|
||||||
|
MyContractInstance: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created: async function(){
|
||||||
|
this.MyContractInstance = await MyContract.getInstance();
|
||||||
|
|
||||||
|
const subspace = new Subspace(web3.currentProvider);
|
||||||
|
await subspace.init();
|
||||||
|
|
||||||
|
this.myEventObservable$ = subspace.trackEvent(this.MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createTrx: function(){
|
||||||
|
this.MyContractInstance.methods
|
||||||
|
.myFunction()
|
||||||
|
.send({ from: web3.eth.defaultAccount });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
MyComponent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import web3 from './web3';
|
||||||
|
|
||||||
|
const abi = [
|
||||||
|
{
|
||||||
|
"constant": false,
|
||||||
|
"inputs": [],
|
||||||
|
"name": "myFunction",
|
||||||
|
"outputs": [],
|
||||||
|
"payable": false,
|
||||||
|
"stateMutability": "nonpayable",
|
||||||
|
"type": "function"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"anonymous": false,
|
||||||
|
"inputs": [
|
||||||
|
{
|
||||||
|
"indexed": false,
|
||||||
|
"name": "someValue",
|
||||||
|
"type": "uint256"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"indexed": false,
|
||||||
|
"name": "anotherValue",
|
||||||
|
"type": "bytes32"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "MyEvent",
|
||||||
|
"type": "event"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
|
||||||
|
|
||||||
|
const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
|
||||||
|
|
||||||
|
MyContract.getInstance = async() => {
|
||||||
|
if(!web3.eth.defaultAccount){
|
||||||
|
const accounts = await web3.eth.getAccounts();
|
||||||
|
web3.eth.defaultAccount = accounts[0];
|
||||||
|
}
|
||||||
|
return MyContract.deploy().send({from: web3.eth.defaultAccount});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyContract;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<ul v-if="!!eventData$">
|
||||||
|
<li><b>someValue: </b> {{eventData$.someValue}}</li>
|
||||||
|
<li><b>anotherValue: </b> {{eventData$.anotherValue}}</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MyComponent',
|
||||||
|
props: {
|
||||||
|
eventData: Object
|
||||||
|
},
|
||||||
|
subscriptions() {
|
||||||
|
return {
|
||||||
|
eventData$: this.eventData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRx from 'vue-rx'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRx)
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app')
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import Web3 from 'web3';
|
||||||
|
|
||||||
|
const web3 = new Web3("ws://localhost:8545");
|
||||||
|
|
||||||
|
export default web3;
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue