fix: redux example
This commit is contained in:
Richard Ramos
parent
43ae51bb8c
commit
ac0c466f9e
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
phoenix - redux example
|
||||
===
|
||||
Simple application that shows how to dispatch a redux action from an observable. This app will deploy a test contract to **Ganache**.
|
||||
For using Phoenix with `react` and `redux`, please check `examples/react-redux` to see a practical example
|
||||
|
||||
## Requirements
|
||||
- `ganache-cli`
|
||||
- `yarn` or `npm` installed.
|
||||
|
||||
## Install
|
||||
In the parent folder, link the package with `yarn` or `npm`
|
||||
```
|
||||
yarn link
|
||||
```
|
||||
Then in the current folder link `phoenix`, and install the packages
|
||||
```
|
||||
yarn link phoenix
|
||||
yarn
|
||||
```
|
||||
|
||||
## Usage
|
||||
In a terminal execute
|
||||
```
|
||||
ganache-cli
|
||||
```
|
||||
|
||||
In a different session, execute
|
||||
```
|
||||
node -r esm src/index.js
|
||||
```
|
||||
|
||||
You'll see in the console how the state changes everytime phoenix receives an event.
|
||||
|
||||
|
||||
*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.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"name": "redux",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"esm": "^3.2.25",
|
||||
"redux": "^4.0.4",
|
||||
"web3": "^1.2.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { MY_ACTION } from "./constants";
|
||||
|
||||
export const myAction = (eventData) => ({ type: MY_ACTION, eventData });
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const MY_ACTION = "MY_ACTION";
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import store from './store';
|
||||
import web3 from './web3';
|
||||
import Phoenix from 'phoenix';
|
||||
import { myAction } from './actions';
|
||||
import MyContract from './MyContract';
|
||||
|
||||
// Log the initial state
|
||||
console.log(store.getState())
|
||||
|
||||
// Every time the state changes, log it
|
||||
store.subscribe(() => console.log("=====\n", store.getState()))
|
||||
|
||||
const run = async () => {
|
||||
const MyContractInstance = await MyContract.getInstance(); //
|
||||
|
||||
const eventSyncer = new Phoenix(web3.currentProvider);
|
||||
await eventSyncer.init();
|
||||
|
||||
eventSyncer.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 })
|
||||
.subscribe(eventData => {
|
||||
store.dispatch(myAction(eventData));
|
||||
});
|
||||
|
||||
// Dispatch some actions
|
||||
MyContractInstance.methods.myFunction().send({from: web3.eth.defaultAccount});
|
||||
MyContractInstance.methods.myFunction().send({from: web3.eth.defaultAccount});
|
||||
MyContractInstance.methods.myFunction().send({from: web3.eth.defaultAccount});
|
||||
}
|
||||
|
||||
run();
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { MY_ACTION } from "./constants";
|
||||
|
||||
const initialState = {
|
||||
data: {}
|
||||
};
|
||||
|
||||
export const myReducer = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case MY_ACTION:
|
||||
return { data: action.eventData };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStore } from "redux";
|
||||
import { myReducer } from "./reducer";
|
||||
|
||||
const store = createStore(myReducer);
|
||||
|
||||
export default store;
|
||||
|
|
@ -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