Snippets

昭博高木 Ethereum (ERC-20) Based Token Transaction Demo App

Created by Mhamudul Hasan
app.html
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<title>Demo App</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<h1>Demo App</h1>
			<form>
				<div class="form-group">
					<label>Create payment of 1 Token to address 0x….</label>
				</div>
				<button type="button" class="btn btn-primary" onclick="createTokenTransaction()">Create transaction</button>
				<pre id="status"></pre>
			</form>
		</div>
		<scirpt type="text/javascript" src="main.js"></script>
	</body>
</html>
example-1.js
Raw 
1
web3.eth.getAccounts((error, account) => { });
example-2.js
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var http = new XMLHttpRequest(),
	url = "https://api.indiesquare.me/eth/v1/transactions/send", // api
	params = {
		"from": usersAddress,
		"to": receivingAddress,
		"token": tokenContractAddress,
		"amount": amount
	};
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json");
http.send(JSON.stringify(params));
example-3.js
Raw 
1
2
3
4
5
6
7
8
web3.eth.sendTransaction(unsignedTransaction,(err, result) => {
	if (err != undefined) {
		console.log("sign error:" + err);
	} else {
		console.log("broadcast transaction...");
		console.log("https://etherscan.io/tx/"+ result);
	}
});
example.html
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container">
	<h1>Demo App</h1>
	<form>
		<div class="form-group">
			<label>Create payment of 1 Token to address 0x….</label>
		</div>
		<button type="button" class="btn btn-primary" onclick="createTokenTransaction()">Create transaction</button>
		<pre id="status"></pre>
	</form>
</div>
main.js
Raw 
 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
var updateStatus =  status => { // Error handling
	document.getElementById("status").innerHTML = status;
}
function createTokenTransaction() {
	try {
		updateStatus("Getting user address...");
		web3.eth.getAccounts( (err, acc) => { //get users address
			if (err != null) {
				updateStatus("error:" + err );
			} else {
				updateStatus("creating transaction...");
				//create sendtransaction using indiesqaure REST api 
				var usersAddress = acc[0];
				var receivingAddress = "0xf...."; // Ethereum Wallet Address for receiving payment
				var tokenContractAddress = "0xe....."; // ERC20 Token Contact Address;
				var amount = 1; // Number of Token to for this payment
				var http = new XMLHttpRequest();
				var url = "https://api.indiesquare.me/eth/v1/transactions/send"; // api
				var params = {
					"from": usersAddress,
					"to": receivingAddress,
					"token": tokenContractAddress,
					"amount": amount
				}
				http.open("POST", url, true);
				http.setRequestHeader("Content-type", "application/json");
				http.onreadystatechange = function() {
					if (http.readyState == 4 && http.status == 200) {
						updateStatus("signing transaction...");
						var unsignedTransaction = JSON.parse(http.responseText);
						//sign and send the transaction
						web3.eth.sendTransaction(unsignedTransaction, (err, result) => {
							if (err != undefined) {
								updateStatus("sign error:" + err);
							} else {
								updateStatus("broadcast transaction...");
								console.log("https://etherscan.io/tx/"+ result);
							}
						});
					} else {
						updateStatus("error creating transaction:" + http.statusText+ " "+http.responseText);
					}
				}
				http.send(JSON.stringify(params));
			}
		});
	} catch (e) {
		// no web3 (no wallet in browser or not in dApp browser)
		alert(e); //web3 not found
	}
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.