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