pay gas fee
//src/components/main.jsimport React, { Component } from 'react';
import Identicon from 'identicon.js';
class Main extends Component {
render() {
return (
<div className="container-fluid mt-5">
<div className="row">
<main role="main" className="col-lg-12 ml-auto mr-auto" style={{ maxWidth: '500px' }}>
<div className="content mr-auto ml-auto">
<p> </p>
<h2>Share Image</h2>
<form onSubmit={(event) => {
event.preventDefault()
const description = this.imageDescription.value
this.props.uploadImage(description)
}} >
<input type='file' accept=".jpg, .jpeg, .png, .bmp, .gif" onChange={this.props.captureFile} />
<div className="form-group mr-sm-2">
<br></br>
<input
id="imageDescription"
type="text"
ref={(input) => { this.imageDescription = input }}
className="form-control"
placeholder="Image description..."
required />
</div>
<button type="submit" className="btn btn-primary btn-block btn-lg">Upload!</button>
</form>
<p> </p>
{this.props.images.map((image, key) => {
return (
<div className="card mb-4" key={key} >
<div className="card-header">
<img
className='mr-2'
width='30'
height='30'
src={`data:image/png;base64,${new Identicon(image.author, 30).toString()}`}
/>
<small className="text-muted">{image.author}</small>
</div>
<ul id="imageList" className="list-group list-group-flush">
<li className="list-group-item">
<p className="text-center"><img src={`https://ipfs.infura.io/ipfs/${image.hash}`} style={{ maxWidth: '420px' }} /></p>
<p>{image.description}</p>
</li>
<li key={key} className="list-group-item py-2">
<small className="float-left mt-1 text-muted">
TIPS: {window.web3.utils.fromWei(image.tipAmount.toString(), 'Ether')} ETH
</small>
<button
className="btn btn-link btn-sm float-right pt-0"
name={image.id}
onClick={(event) => {
let tipAmount = window.web3.utils.toWei('0.1', 'Ether')
console.log(event.target.name, tipAmount)
this.props.tipImageOwner(event.target.name, tipAmount)
}}
>
TIP 0.1 ETH
</button>
</li>
</ul>
</div>
)
})}
</div>
</main>
</div>
</div>
);
}
}
export default Main;
------------------------
//src/components/app.js
uploadImage = description => {
console.log("Submitting file to ipfs...")
//adding file to the IPFS
ipfs.add(this.state.buffer, (error, result) => {
console.log('Ipfs result', result)
if (error) {
console.error(error)
return
}
this.setState({ loading: true })
this.state.decentragram.methods.uploadImage(result[0].hash, description).send({ from: this.state.account }).on('transactionHash', (hash) => {
this.setState({ loading: false })
})
})
}
--------------------------------
//src/contracts/decentragram.sol
pragma solidity ^0.5.0;
contract Decentragram {
// Code goes here...
string public name = "Decentragram";
uint public imageCount = 0;
mapping(uint => Image) public images;
struct Image{
uint id;
string hash;
string description;
uint tipAmount;
address payable author;
}
event ImageCreated(
uint id,
string hash,
string description,
uint tipAmount,
address payable author
);
event ImageTipped(
uint id,
string hash,
string description,
uint tipAmount,
address payable author
);
function uploadImage(string memory _imgHash, string memory _description) public {
require(bytes(_imgHash).length > 0);
require(bytes(_description).length > 0);
require(msg.sender != address(0x0));
imageCount++;
images[imageCount] = Image(imageCount, _imgHash, _description, 0, msg.sender);
emit ImageCreated(imageCount, _imgHash, _description, 0, msg.sender);
}
function tipImageOwner(uint _id) public payable{
require(_id > 0 && _id <= imageCount);
Image memory _image = images[_id];
address payable _author = _image.author;
address(_author).transfer(msg.value);
_image.tipAmount = _image.tipAmount + msg.value;
images[_id] = _image;
emit ImageTipped(_id, _image.hash, _image.description, _image.tipAmount, _author);
}
}
reference:
No comments:
Post a Comment