pruss68 · July 31, 2022 14:09
diff --git a/index.html b/index.html
 <!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>
diff --git a/index.js b/index.js
 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
    }
  }
 });
diff --git a/instructions.md b/instructions.md
	<!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
	}
	}
	});