Skip to content

Instantly share code, notes, and snippets.

@pruss68
Forked from MatthewStanciu/index.html
Created July 31, 2022 14:09
Show Gist options
  • Save pruss68/4b174c687e0bb21cf42308b79f4efe6d to your computer and use it in GitHub Desktop.
Save pruss68/4b174c687e0bb21cf42308b79f4efe6d to your computer and use it in GitHub Desktop.
Simple Ethereum transaction with Web3.js
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div id="pay">
<form>
<input type="text" ref="ethamount" id="amt" class="amttext" placeholder="Type some amount of Ether">
<button type="button" class="ethb" id="eth" v-on:click="pay">Send Ether</button>
</form>
</div>
</body>
</html>
var web3 = window.web3; // Contrary to Web3 docs, you must define web3 like this for MetaMask to inject automatically
if (typeof web3 != 'undefined') {
console.log("Using web3 detected from external source like Metamask")
this.web3 = new Web3(web3.currentProvider)
} else {
console.log("No web3 detected. Falling back to http://localhost:8545.")
this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
}
function payAddress(addr, amt) {
web3.eth.sendTransaction({to: addr, from: web3.eth.accounts[0], value: web3.toWei(amt, "ether")}, (err, hash) => {
console.log(err, hash);
});
}
var vuePay = new Vue({
el: '#pay',
data: {
output: ''
},
methods: {
pay () {
payUser(urlp["author"], $('#amt').val()); // example from TheWritersBlock which gets the author of an article and pays that address
// OpportunityCard could have something similar where it gets a profile's Ethereum address from MetaMask
// and puts it at the top of the page. This makes it easier for both the developer and the client because the developer does not
// have to find a way to store the right address to pay and the client does not need to type the address in
}
}
});

Without knowing much about OpportunityCard's plans for Ethereum integration, this is what I have come up with.

What I imagine is that at the bottom of each opportunity card, if the card owner wants to receive Ether, they add "ETH: (eth address)". Either above or below the "Request Connection" part, a form asking for an amount of Ether to send appears (click an article on thewritersblock.tech to see what I'm talking about.)

If the person viewing the opportunity card is on desktop, all they have to do is have MetaMask installed and they can easily send any amount of Ether instantly.

However, since this is such a new space, mobile support is lacking. Mobile users will have to install a specialized browser that allows interaction with Dapps. Some examples are Toshi, Cipher Browser, and TrustWallet. Until MetaMask is released on mobile, mobile users will have to open the card in a dapp-compatible mobile browser and import their MetaMask wallet details. It's a one-time process, but intimidating for many users nevertheless. It's kind of impossible to make this easy and user-friendly unless the users already use these, which most people don't.

Many people have Coinbase, so one possible solution for mobile could be a button to copy the address to your clipboard and open it in the Coinbase app. I don't know if this is possible though -- I'd have to look into it.

^ EDIT: The Coinbase solution is possible with HTML copy to clipboard and Deeplinks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment