TipButton/index.html at master · MetaMask/TipButton · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
  <head>
    <title>MetaMask Tip Button Example</title>

<style>

.tip-button {
  width: 304px;
  height: 89px;
  background-size: 100%;
  background-image: url('images/1_pay_mm_off.png');
  cursor: pointer;
}

.tip-button:hover {
  background-image: url('images/1_pay_mm_over.png');
}

.tip-button:active {
  background-image: url('images/1_pay_mm_off.png');
}

</style>


  </head>

  <body>
    <h1>MetaMask Tip Button Example</h1>
    <a href="https://github.com/MetaMask/TipButton">View on Github</a>
    <div class="tip-button"></div>
    <div class="message"></div>
  </body>

<script>

var MY_ADDRESS = '0x55e2780588aa5000F464f700D2676fD0a22Ee160'

var tipButton = document.querySelector('.tip-button')

tipButton.addEventListener('click', function() {

  if (typeof web3 === 'undefined') {
    return renderMessage('<div>You need to install <a href=“https://metmask.io“>MetaMask </a> to use this feature.  <a href=“https://metmask.io“>https://metamask.io</a></div>')
  }

  var user_address = web3.eth.accounts[0]

  web3.eth.sendTransaction({
    to: MY_ADDRESS,
    from: user_address,
    value: web3.toWei('1', 'ether'),
  }, function (err, transactionHash) {
    if (err) return renderMessage('There was a problem!: ' + err.message)

    // If you get a transactionHash, you can assume it was sent,
    // or if you want to guarantee it was received, you can poll
    // for that transaction to be mined first.
    renderMessage('Thanks for the generosity!!')
  })
})

function renderMessage (message) {
  var messageEl = document.querySelector('.message')
  messageEl.innerHTML = message
}

</script>

</html>