Ethereum Programming 17 tip image owner

owner is tipped 8 eth

tipper pays gas fee

//src/components/app.js

tipImageOwner = (id, tipAmount) => {

    this.setState({ loading: true })

    console.log(id)

    this.state.decentragram.methods.tipImageOwner(id).send({ from: this.state.account, value: tipAmount }).on('transactionHash', (hash) => {

      this.setState({ loading: false })

    })

  }

---------------------

//src/contracts/decentragram.sol

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);

  }

------------------------

//test/test.js

it('allows users to tip images', async () => {

      // Track the author balance before purchase

      let oldAuthorBalance

      oldAuthorBalance = await web3.eth.getBalance(author)

      oldAuthorBalance = new web3.utils.BN(oldAuthorBalance)

      console.log(imageCount.toNumber(), author, tipper)

      result = await decentragram.tipImageOwner(2, { from: tipper, value: web3.utils.toWei('1', 'Ether') })

      // SUCCESS

      const event = result.logs[0].args

      assert.equal(event.id.toNumber(), imageCount.toNumber(), 'id is correct')

      assert.equal(event.hash, hash, 'Hash is correct')

      assert.equal(event.description, 'Image description', 'description is correct')

      assert.equal(event.tipAmount, '1000000000000000000', 'tip amount is correct')

      assert.equal(event.author, author, 'author is correct')

      // Check that author received funds

      let newAuthorBalance

      newAuthorBalance = await web3.eth.getBalance(author)

      newAuthorBalance = new web3.utils.BN(newAuthorBalance)

      let tipImageOwner

      tipImageOwner = web3.utils.toWei('1', 'Ether')

      tipImageOwner = new web3.utils.BN(tipImageOwner)

      const expectedBalance = oldAuthorBalance.add(tipImageOwner)

      assert.equal(newAuthorBalance.toString(), expectedBalance.toString())

      // FAILURE: Tries to tip a image that does not exist

      await decentragram.tipImageOwner(99, { from: tipper, value: web3.utils.toWei('1', 'Ether') }).should.be.rejected;

})

  })

---------------------------

//src/components/main.js

import 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>&nbsp;</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>&nbsp;</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('1', 'Ether')

                            console.log(event.target.name, tipAmount)

                            this.props.tipImageOwner(event.target.name, tipAmount)

                          }}

                        >

                          TIP 1 ETH

                        </button>

                      </li>

                    </ul>

                  </div>

                )

              })}

            </div>

          </main>

        </div>

      </div>

    );

  }

}

export default Main;

-----------------------

//logs

4 1000000000000000000

reference:

https://www.youtube.com/watch?v=XLahq4qyors