Skip to content

Instantly share code, notes, and snippets.

@ac12644
Last active Jan 30, 2022
Embed
What would you like to do?
import React, { useState, useEffect } from "react";
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import detectEthereumProvider from '@metamask/detect-provider';
import getWeb3 from './utils/getWeb3';
import FactoryContract from './contracts/Factory.json';
import Web3 from 'web3'
const useStyles = makeStyles (theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
button: {
margin: theme.spacing(1),
},
}));
const NewFundraiser = () => {
const [labelWidth, setLabelWidth] = React.useState(0);
const labelRef = React.useRef(null);
const [ web3, setWeb3 ] = useState(null);
const classes = useStyles();
const [ name, setFundraiserName ] = useState(null);
const [ url, setFundraiserWebsite ] = useState(null);
const [ description, setFundraiserDescription ] = useState(null);
const [ imageURL, setImage ] = useState(null);
const [ beneficiary, setAddress ] = useState(null);
const [ custodian, setCustodian ] = useState(null);
const [ contract, setContract] = useState(null);
const [ accounts, setAccounts ] = useState(null);
useEffect (() => {
init();
}, []);
const init = async() => {
try {
const provider = await detectEthereumProvider();
const web3 = new Web3(provider);
const networkId = await web3.eth.net.getId();
const deployedNetwork = FactoryContract.networks[networkId];
const accounts = await web3.eth.getAccounts();
const instance = new web3.eth.Contract(
FactoryContract.abi, deployedNetwork && deployedNetwork.address,
);
setWeb3(web3);
setContract(instance);
setAccounts(accounts);
} catch (error) {
alert(`Failed to load web3, accounts, or contract. Check console for details.`,);
console.error(error);
}
}
const handleSubmit = async () => {
const provider = await detectEthereumProvider();
const web3 = new Web3(provider);
const networkId = await web3.eth.net.getId();
const deployedNetwork = FactoryContract.networks[networkId];
const accounts = await web3.eth.getAccounts();
const instance = new web3.eth.Contract(
FactoryContract.abi,
deployedNetwork && deployedNetwork.address,
);
await contract.methods.createFundraiser(name, url, imageURL, description, beneficiary).send({ from: accounts[0] });
alert('Successfully created fundraiser')
};
return (
<div className="main-container">
<h2>
Create a New Fundraiser
</h2>
<label>Name</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Name" margin="normal" onChange={ (e) => setFundraiserName(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<label>Website</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Website" margin="normal" onChange={ (e) => setFundraiserWebsite(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<label>Description</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Description" margin="normal" onChange={ (e) => setFundraiserDescription(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<label>Image</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Image" margin="normal" onChange={ (e) => setImage(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<label>Address</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Address" margin="normal" onChange={ (e) => setAddress(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<label>Custodian</label>
<TextField id="outlined-bare" className={classes.textField} placeholder="Fundraiser Custodian" margin="normal" onChange={ (e) => setCustodian(e.target.value) } variant="outlined" inputProps={{ 'aria-label': 'bare' }} />
<Button onClick={handleSubmit} variant="contained" className={classes.button}>
Submit
</Button>
</div>
);
}
export default NewFundraiser;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment