MatthewStanciu/index.html

## 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>

## 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
    }
  }
});

## instructions.md

      
    Raw
  

              instructions.md
            
          
    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
	<!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
	}
	}
	});