embarklabs
/
subspace
mirror of https://github.com/embarklabs/subspace.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: redux-observable example

This commit is contained in:
Richard Ramos 2019-09-05 20:12:03 -04:00
parent cc5c7841f9
commit 09be9396ba
22 changed files with 2724 additions and 11616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
test/redux-observable/.gitignore → examples/redux-observable/.gitignore vendored
View File

35
examples/redux-observable/README.md Normal file
View File

@ -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.

11
examples/redux-observable/package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "redux-observable",
"version": "0.1.0",
"private": true,
"dependencies": {
"esm": "^3.2.25",
"redux": "^4.0.4",
"web3": "^1.2.1",
"redux-observable": "^1.1.0"
}
}

45
examples/redux-observable/src/MyContract.js Normal file
View File

@ -0,0 +1,45 @@
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;

7
examples/redux-observable/src/actions.js Normal file
View File

@ -0,0 +1,7 @@
import { DEPLOY_CONTRACT, INIT_PHOENIX, PHOENIX_READY, MY_ACTION, DUMMY_TRANSACTION } from "./constants";
export const deployContract = () => ({type: DEPLOY_CONTRACT});
export const initPhoenix = () =>({type: INIT_PHOENIX});
export const phoenixReady = () => ({type: PHOENIX_READY});
export const myAction = (eventData) => ({ type: MY_ACTION, eventData });
export const createDummyTransaction = () => ({ type: DUMMY_TRANSACTION });

6
examples/redux-observable/src/constants.js Normal file
View File

@ -0,0 +1,6 @@
export const INIT_PHOENIX = "INIT_PHOENIX";
export const DEPLOY_CONTRACT = "DEPLOY_CONTRACT";
export const PHOENIX_READY = "PHOENIX_READY";
export const MY_ACTION = "MY_ACTION";
export const DUMMY_TRANSACTION = "DUMMY_TRANSACTION";

20
examples/redux-observable/src/index.js Normal file
View File

@ -0,0 +1,20 @@
import store from './store';
import web3 from './web3';
import { deployContract } from './actions';
web3.eth.net.isListening().then(result => {
if(!result){
console.error("Error connecting to provider");
return;
}
// Deploy contract as soon as web3 is available
store.dispatch(deployContract());
});
// Log the initial state
console.log(store.getState())
// Every time the state changes, log it
store.subscribe(() => console.log("=====\n", store.getState()))

14
examples/redux-observable/src/reducer.js Normal file
View File

@ -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;
}
};

92
examples/redux-observable/src/store.js Normal file
View File

@ -0,0 +1,92 @@
import { createStore, applyMiddleware } from "redux";
import { myReducer } from "./reducer";
import { createEpicMiddleware } from "redux-observable";
import {
DEPLOY_CONTRACT,
INIT_PHOENIX,
PHOENIX_READY,
DUMMY_TRANSACTION
} from "./constants";
import { mergeMap, map, mapTo, delay, filter } from "rxjs/operators";
import MyContract from "./MyContract";
import { combineEpics } from "redux-observable";
import { ofType } from "redux-observable";
import {
initPhoenix,
phoenixReady,
createDummyTransaction,
myAction
} from "./actions";
import web3 from "./web3";
import Phoenix from "phoenix";
let MyContractInstance;
let eventSyncer;
const deployContractEpic = action$ =>
action$.pipe(
ofType(DEPLOY_CONTRACT),
mergeMap(() => {
return MyContract.getInstance();
}),
map(instance => {
MyContractInstance = instance;
return initPhoenix();
})
);
const initPhoenixEpic = action$ =>
action$.pipe(
ofType(INIT_PHOENIX),
mergeMap(() => {
eventSyncer = new Phoenix(web3.currentProvider);
return eventSyncer.init();
}),
mapTo(phoenixReady())
);
const trackEventEpic = action$ =>
action$.pipe(
ofType(PHOENIX_READY),
mergeMap(() => {
createDummyTransaction();
return eventSyncer
.trackEvent(MyContractInstance, "MyEvent", { filter: {}, fromBlock: 1 })
.pipe(
map(eventData => {
return myAction(eventData);
})
);
})
);
const dummyTransactionEpic = action$ =>
action$.pipe(
filter(
action =>
action.type === PHOENIX_READY || action.type === DUMMY_TRANSACTION
),
map(() => {
MyContractInstance.methods
.myFunction()
.send({ from: web3.eth.defaultAccount });
}),
delay(2000),
mapTo(createDummyTransaction())
);
const rootEpic = combineEpics(
deployContractEpic,
initPhoenixEpic,
trackEventEpic,
dummyTransactionEpic
);
const epicMiddleware = createEpicMiddleware();
const store = createStore(myReducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(rootEpic);
export default store;

5
examples/redux-observable/src/web3.js Normal file
View File

@ -0,0 +1,5 @@
import Web3 from 'web3';
const web3 = new Web3("ws://localhost:8545");
export default web3;

2489
examples/redux-observable/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

11
examples/redux/public/index.html
View File

@ -1,11 +0,0 @@
<!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>

35
test/redux-observable/package.json
View File

@ -1,35 +0,0 @@
{
"name": "redux-observable",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-observable": "^1.1.0",
"web3": "^1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

11
test/redux-observable/public/index.html
View File

@ -1,11 +0,0 @@
<!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>

10
test/redux-observable/src/App.js
View File

@ -1,10 +0,0 @@
import React from "react";
import { connect } from "react-redux";
const App = ({ data }) => (
<div>
<h1>Event Data: {JSON.stringify(data)}</h1>
</div>
);
export default connect(({ data }) => ({ data }))(App);

4
test/redux-observable/src/actions.js
View File

@ -1,4 +0,0 @@
import { CREATED, INIT } from "./constants";
export const init = () => ({type: INIT});
export const created = (eventData) => ({ type: CREATED, eventData });

2
test/redux-observable/src/constants.js
View File

@ -1,2 +0,0 @@
export const INIT = "INIT";
export const CREATED = "CREATED";

19
test/redux-observable/src/index.js
View File

@ -1,19 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

12
test/redux-observable/src/reducer.js
View File

@ -1,12 +0,0 @@
import { CREATED } from "./constants";
const initialState = { data: {} };
export const reducer = (state = initialState, action) => {
switch (action.type) {
case CREATED:
return { data: action.eventData };
default:
return state;
}
};

135
test/redux-observable/src/serviceWorker.js
View File

@ -1,135 +0,0 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

128
test/redux-observable/src/store.js
View File

@ -1,128 +0,0 @@
import { createStore, applyMiddleware } from "redux";
import { reducer } from "./reducer";
import Web3 from "web3";
import Phoenix from "phoenix";
import { created, init } from "./actions";
import { ofType } from "redux-observable";
import { createEpicMiddleware } from "redux-observable";
import { mergeMap, map } from "rxjs/operators";
const web3 = new Web3("ws://localhost:8545");
let EscrowContract;
let eventSyncer;
web3.eth.getAccounts().then(async accounts => {
web3.eth.defaultAccount = accounts[0];
EscrowContract = await deployContract();
await EscrowContract.methods
.createEscrow(1, accounts[0], accounts[1])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(2, accounts[0], accounts[2])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(3, accounts[0], accounts[0])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(4, accounts[0], accounts[2])
.send({ from: accounts[0] });
eventSyncer = new Phoenix(web3.currentProvider);
await eventSyncer.init();
store.dispatch(init());
});
const rootEpic = action$ =>
action$.pipe(
ofType("INIT"),
mergeMap(action =>
eventSyncer
.trackEvent(EscrowContract, "Created", {
filter: { buyer: web3.eth.defaultAccount },
fromBlock: 1
})
.pipe(map(eventData => created(eventData)))
)
);
const epicMiddleware = createEpicMiddleware();
const store = createStore(reducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(rootEpic);
async function deployContract() {
// pragma solidity >=0.4.22 <0.6.0;
// contract Escrow {
// event Created(uint indexed escrowId, address buyer, address seller);
// function createEscrow(uint escrowId, address buyer, address seller) external {
// emit Created(escrowId, buyer, seller);
// }
// }
let abi = [
{
constant: false,
inputs: [
{
name: "escrowId",
type: "uint256"
},
{
name: "buyer",
type: "address"
},
{
name: "seller",
type: "address"
}
],
name: "createEscrow",
outputs: [],
payable: false,
stateMutability: "nonpayable",
type: "function"
},
{
anonymous: false,
inputs: [
{
indexed: true,
name: "escrowId",
type: "uint256"
},
{
indexed: false,
name: "buyer",
type: "address"
},
{
indexed: false,
name: "seller",
type: "address"
}
],
name: "Created",
type: "event"
}
];
var contract = new web3.eth.Contract(abi);
let instance = await contract
.deploy({
data:
"0x608060405234801561001057600080fd5b50610184806100206000396000f3fe60806040526004361061003b576000357c01000000000000000000000000000000000000000000000000000000009004806378015cf414610040575b600080fd5b34801561004c57600080fd5b506100b96004803603606081101561006357600080fd5b8101908080359060200190929190803573ffffffffffffffffffffffffffffffffffffffff169060200190929190803573ffffffffffffffffffffffffffffffffffffffff1690602001909291905050506100bb565b005b827fcbd6f84bfed2ee8cc01ea152b5d9f7126a72c410dbc5ab04c486a5800627b1908383604051808373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020018273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020019250505060405180910390a250505056fea165627a7a72305820cc868ec126578f5508ee248fb823cd9f1ac6deb0562091cdf31843840b2a56410029",
arguments: []
})
.send({
from: web3.eth.defaultAccount,
gas: "4700000"
});
return instance;
}
export default store;

11249
test/redux-observable/yarn.lock
View File

File diff suppressed because it is too large Load Diff