이번 세미나는 11장. Finishing Our Fundraiser UI을 다룹니다.

10장과 마찬가지로 UI 부분은 본문 내용이 뭘 하려는 것인지 정도만 알고 넘어갑니다. UI 코드는 깃헙 코드를 복사해서 사용하거나 본문 내용을 참고해서 작성합니다.

컨트랙트 관련 코드에서 아래 정리한 내용에 주의를 기울입니다.

Accepting a Donation with React

해당 기금 모금 컨트랙트에 기부합니다. 기부는 상태를 변경하는 send 메소드입니다. 이더 전송은 wei를 단위로 합니다.
- JavaScript
  
  const donation = web3.utils.toWei(donationAmount) await contract.methods.donate().send({from: accounts[0], value: donation, gas: 650000 })
  
  1
  2
  
  const donation = web3.utils.toWei(donationAmount)
  await contract.methods.donate().send({from: accounts[0], value: donation, gas: 650000 })

Displaying the Current ETH Exchange Rate

CryptoCompare를 사용해서 이더 시세를 구합니다.

npm install –save cryptocompare

FundraiserCard.js

const cc = require('cryptocompare')
cc.setApiKey('<your-api-key>')
const exchangeRate = await cc.price('ETH', ['USD'])

const eth = web3.utils.fromWei(totalDonations, 'ether')
const dollarDonationAmount = exchangeRate.USD * eth

const cc = require('cryptocompare')

cc.setApiKey('<your-api-key>')

const exchangeRate = await cc.price('ETH', ['USD'])

const eth = web3.utils.fromWei(totalDonations, 'ether')

const dollarDonationAmount = exchangeRate.USD * eth

Generating a Donation Receipt for Our User

기부에 대한 영수증을 출력합니다.
- const userDonations = await instance.methods.myDonations().call({ from: accounts[0]})

Handling a Withdrawal from Our Contract, Adding Edit Beneficiary to the Contract

JavaScript

await contract.methods.withdraw().send({ from: accounts[0], })

1
2
3

await contract.methods.withdraw().send({
from: accounts[0],
})
JavaScript

await contract.methods.setBeneficiary(beneficiary).send({ from: accounts[0], })

1
2
3

await contract.methods.setBeneficiary(beneficiary).send({
from: accounts[0],
})