forked from toncenter/dapp-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dapp-ton.html
118 lines (96 loc) · 3.37 KB
/
dapp-ton.html
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TON dApp Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="h">TON dApp Example</div>
<div class="grey">
<span>My address is</span>
<span id="address"></span>
</div>
<div>
<button id="button" class="button">Send Toncoins via TON Wallet Plugin</button>
</div>
<div>
<button id="signButton" class="button">Sign custom data</button>
</div>
<div class="grey" style="margin-top: 50px">
Code on <a href="https://github.com/toncenter/dapp-example" target="_blank">GitHub</a>
</div>
<script type="text/javascript" src="libs/tonweb-0.0.25.js"></script>
<script>
// Use tonweb
const tonweb = new TonWeb();
// Use extension
const onTonReady = () => {
console.log('tonready');
if (!window.tonProtocolVersion || window.tonProtocolVersion < 1) {
alert('Please update your TON Wallet Extension');
return;
}
const provider = window.ton;
console.log('isTonWallet=', provider.isTonWallet);
const connect = async () => {
// Request account access if needed
const accounts = await provider.send('ton_requestAccounts');
// Accounts now exposed, use them
const account = accounts[0] // We currently only ever provide a single account,
// but the array gives us some room to grow.
showAccountAddress(account);
console.log(await provider.send('ton_requestWallets'));
}
document.getElementById('button').addEventListener('click', async () => {
try {
await connect();
// Send TONs
provider.send(
'ton_sendTransaction',
[{
to: 'EQCD39VS5jcptHL8vMjEXrzGaRcCVYto7HUn4bpAOg8xqB2N', // TON Foundation
value: '10000', // 10000 nanotons = 0.00001 TONs
data: 'dapp test',
dataType: 'text'
}]
);
} catch (error) {
// User denied or Error
console.log(error);
}
});
document.getElementById('signButton').addEventListener('click', async () => {
try {
await connect();
// Sign custom hex
const signature = await provider.send(
'ton_rawSign',
[{
data: 'ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789'
}]
);
console.log('signature is ' + signature);
} catch (error) {
// User denied or Error
console.log(error);
}
});
provider.on('accountsChanged', function (accounts) {
console.log('accountsChanged', accounts);
const account = accounts[0];
showAccountAddress(account);
});
function showAccountAddress(address) {
document.getElementById('address').innerText = address;
}
}
// Initialize TON
if (window.ton) {
onTonReady();
} else {
window.addEventListener('tonready', () => onTonReady(), false);
}
</script>
</body>
</html>