Update react-redux example
This commit is contained in:
parent
4976ccf5f5
commit
0106e406b3
|
@ -0,0 +1 @@
|
||||||
|
SKIP_PREFLIGHT_CHECK=true
|
|
@ -0,0 +1,12 @@
|
||||||
|
const {
|
||||||
|
override,
|
||||||
|
addWebpackAlias,
|
||||||
|
} = require("customize-cra");
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = override(
|
||||||
|
addWebpackAlias({
|
||||||
|
react: path.resolve('./node_modules/react')
|
||||||
|
})
|
||||||
|
)
|
|
@ -10,10 +10,14 @@
|
||||||
"redux": "^4.0.4",
|
"redux": "^4.0.4",
|
||||||
"web3": "^1.2.1"
|
"web3": "^1.2.1"
|
||||||
},
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"customize-cra": "^0.9.1",
|
||||||
|
"react-app-rewired": "^2.1.5"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-app-rewired start",
|
||||||
"build": "react-scripts build",
|
"build": "react-app-rewired build",
|
||||||
"test": "react-scripts test",
|
"test": "react-app-rewired test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
|
|
|
@ -1,55 +1,61 @@
|
||||||
import React from "react";
|
import React, {useState, useEffect} from "react";
|
||||||
import Subspace from "@embarklabs/subspace";
|
import {SubspaceProvider, useSubspace} from "@embarklabs/subspace-react";
|
||||||
import web3 from './web3';
|
import Web3 from "web3";
|
||||||
import MyContract from './MyContract';
|
import {connect} from "react-redux";
|
||||||
import { connect } from "react-redux";
|
import {myAction} from "./actions";
|
||||||
import { myAction } from './actions';
|
import getInstance from "./ContractDeployer";
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
let MyContractInstance;
|
const FormComponent = ({data, myAction}) => {
|
||||||
let eventSubscription;
|
const subspace = useSubspace();
|
||||||
|
const [MyContractInstance, setContractInstance] = useState();
|
||||||
|
|
||||||
class App extends React.Component {
|
useEffect(() => {
|
||||||
async componentDidMount() {
|
getInstance(subspace.web3).then(instance => {
|
||||||
MyContractInstance = await MyContract.getInstance();
|
setContractInstance(subspace.contract(instance));
|
||||||
|
});
|
||||||
|
}, [subspace]);
|
||||||
|
|
||||||
const subspace = new Subspace(web3.currentProvider);
|
useEffect(() => {
|
||||||
await subspace.init();
|
if (!MyContractInstance) return;
|
||||||
eventSubscription = subspace.trackEvent(MyContractInstance, "MyEvent", { filter: {}, fromBlock: 1 })
|
const subscription = MyContractInstance.events.MyEvent.track({filter: {}, fromBlock: 1}).subscribe(myAction);
|
||||||
.subscribe(this.props.myAction);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount(){
|
return () => {
|
||||||
eventSubscription.unsubscribe();
|
// Clean up the subscription
|
||||||
}
|
subscription.unsubscribe();
|
||||||
|
};
|
||||||
|
}, [subspace, MyContractInstance, myAction]);
|
||||||
|
|
||||||
createTrx = () => {
|
const createTrx = () => {
|
||||||
MyContractInstance.methods
|
if (!MyContractInstance) return;
|
||||||
.myFunction()
|
MyContractInstance.methods.myFunction().send({from: subspace.web3.eth.defaultAccount});
|
||||||
.send({ from: web3.eth.defaultAccount });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
return (
|
||||||
const { data } = this.props;
|
<div>
|
||||||
|
<button onClick={createTrx} disabled={!MyContractInstance}>
|
||||||
return (
|
Create a Transaction
|
||||||
<div>
|
</button>
|
||||||
<button onClick={this.createTrx}>Create a Transaction</button>
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li><b>someValue: </b> {data.someValue}</li>
|
<b>someValue: </b> {data.someValue}
|
||||||
<li><b>anotherValue: </b> {data.anotherValue}</li>
|
</li>
|
||||||
</ul>
|
<li>
|
||||||
</div>
|
<b>anotherValue: </b> {data.anotherValue}
|
||||||
);
|
</li>
|
||||||
}
|
</ul>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
App.propTypes = {
|
|
||||||
data: PropTypes.object,
|
|
||||||
myAction: PropTypes.func
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default connect(
|
const Form = connect(({data}) => ({data}), {myAction})(FormComponent);
|
||||||
({ data }) => ({ data }),
|
|
||||||
{ myAction }
|
const App = () => {
|
||||||
)(App);
|
const web3 = new Web3("ws://localhost:8545");
|
||||||
|
return (
|
||||||
|
<SubspaceProvider web3={web3}>
|
||||||
|
<Form />
|
||||||
|
</SubspaceProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import web3 from './web3';
|
|
||||||
|
|
||||||
const abi = [
|
const abi = [
|
||||||
{
|
{
|
||||||
"constant": false,
|
"constant": false,
|
||||||
|
@ -31,14 +29,15 @@ const abi = [
|
||||||
|
|
||||||
const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
|
const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
|
||||||
|
|
||||||
const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
|
const getInstance = async web3 => {
|
||||||
|
|
||||||
MyContract.getInstance = async() => {
|
|
||||||
if(!web3.eth.defaultAccount){
|
if(!web3.eth.defaultAccount){
|
||||||
const accounts = await web3.eth.getAccounts();
|
const accounts = await web3.eth.getAccounts();
|
||||||
web3.eth.defaultAccount = accounts[0];
|
web3.eth.defaultAccount = accounts[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
|
||||||
return MyContract.deploy().send({from: web3.eth.defaultAccount});
|
return MyContract.deploy().send({from: web3.eth.defaultAccount});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyContract;
|
|
||||||
|
export default getInstance;
|
|
@ -1,5 +0,0 @@
|
||||||
import Web3 from 'web3';
|
|
||||||
|
|
||||||
const web3 = new Web3("ws://localhost:8545");
|
|
||||||
|
|
||||||
export default web3;
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,5 +0,0 @@
|
||||||
import Web3 from 'web3';
|
|
||||||
|
|
||||||
const web3 = new Web3("ws://localhost:8545");
|
|
||||||
|
|
||||||
export default web3;
|
|
Loading…
Reference in New Issue