Enhancement: Removed codepen examples added components to documentati…

…on (MetaMask#93)

* Added Sending Eth Transaction Example

* removed codepen examples and added example components

* finished accessing accounts refactor

* finished codepend reactor in guide section

* cleaned package.json and packagelog.json

docs/.vuepress/components/ChangeAccount.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <button type="button" class="btn primaryBtn" @click="getAccount()">
+      Enable Ethereum
+    </button>
+    <h3>Current Account: {{ currentAccount }}</h3>
+    <h3> Account Changed to:{{checkAddress}}</h3>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    console.log('heyy')
+    const handler = (accounts) => {
+      this.checkAddress = accounts[0]
+    }
+    window.ethereum.on('accountsChanged', handler)
+    this.$on('hook:beforeDestroy', () => {
+      window.ethereum.off('accountsChanged', handler)
+    })
+  },
+  data() {
+    return {
+      currentAccount: '',
+      checkAddress: null
+    };
+  },
+  methods: {
+    async getAccount() {
+      const accounts = await window.ethereum.enable();
+      this.currentAccount = accounts[0];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

docs/.vuepress/components/EthAsyncConnectButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <button type="button" class="btn primaryBtn" @click="getAccount()">
+      Enable Ethereum
+    </button>
+    <p>Account: {{ethAccount}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ethereum: window.ethereum,
+      ethAccount: ''
+    };
+  },
+  methods: {
+    async getAccount() {
+      const accounts = await ethereum.enable() // We currently only ever provide a single account,
+      this.ethAccount = accounts[0] // but the array gives us some room to grow.
+    },
+  },
+};
+</script>

docs/.vuepress/components/EthConnectButton.vue

@@ -0,0 +1,21 @@
+<template>
+    <button class="btn primaryBtn" @click="connectToEthereumNetwork()">
+      Enable Ethereum
+    </button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ethereum: window.ethereum,
+    };
+  },
+  methods: {
+    connectToEthereumNetwork() {
+      this.ethereum.enable();
+    },
+  },
+};
+</script>
+

docs/.vuepress/components/SendTransaction.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <eth-connect-button></eth-connect-button>
+    <button class="btn greenBtn" @click="sendEthTransaction()">Send Eth</button>
+  </div>
+</template>
+
+<script>
+import EthConnectButton from "./EthConnectButton";
+export default {
+  components: {
+    EthConnectButton,
+  },
+  data() {
+    return {
+      accounts: [],
+    };
+  },
+  methods: {
+    sendEthTransaction() {
+      web3.eth.sendTransaction(
+        {
+          from: this.accounts[0],
+          to: "0x2f318C334780961FB129D2a6c30D0763d9a5C970",
+          value: "0x29a2241af62c0000",
+          gas: 21000,
+          gasPrice: 20000000000,
+        },
+        (result) => {
+          console.log(result);
+        }
+      );
+    },
+  },
+};
+</script>

docs/.vuepress/config.js

@@ -41,6 +41,7 @@ module.exports = ctx => ({
   },
   plugins: [
     ['@vuepress/back-to-top', true],
+    ['ethers', true],
     ['@vuepress/pwa', {
       serviceWorker: true,
       updatePopup: true

docs/.vuepress/enhanceApp.js

@@ -1,7 +1,19 @@
+
+
+import EthConnectButton from './components/EthConnectButton';
+import EthAsyncConnectButton from './components/EthAsyncConnectButton';
+import ChangeAccount from './components/ChangeAccount';
+import SendTransaction from './components/SendTransaction';
+
 export default ({ Vue, isServer }) => {
   if (!isServer) {
     import('vue-toasted' /* webpackChunkName: "notification" */).then((module) => {
       Vue.use(module.default)
     })
   }
+
+ Vue.component('EthConnectButton', EthConnectButton);
+ Vue.component('EthAsyncConnectButton', EthAsyncConnectButton);
+ Vue.component('ChangeAccount', ChangeAccount);
+ Vue.component('SendTransaction', SendTransaction);
 }

docs/.vuepress/styles/index.styl

@@ -22,3 +22,23 @@ pre.vue-container
       color #808080
       font-weight light
 
+
+.btn {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.primaryBtn {
+  background-color: #037dd6;
+}
+
+.greenBtn {
+  background-color: #4caf50;
+}

docs/guide/accessing-accounts.md

@@ -9,15 +9,14 @@ User accounts are used in a variety of contexts in Ethereum, including as identi
 
 Once you've [connected to a user](./getting-started.html), you can always re-check the current account by checking `ethereum.selectedAddress`.
 
-<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="BboyAkers" data-slug-hash="MWwQzeB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Selected Address Example">
-  <span>See the Pen <a href="https://codepen.io/BboyAkers/pen/MWwQzeB">
-  Selected Address Example</a> by Austin Akers (<a href="https://codepen.io/BboyAkers">@BboyAkers</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+**Example:**
+
+<ChangeAccount />
 
 If you'd like to be notified when the address changes, we have an event you can subscribe to:
 
+
+
 ```javascript
 ethereum.on('accountsChanged', function (accounts) {
   // Time to reload your interface with accounts[0]!

docs/guide/getting-started.md

@@ -57,12 +57,24 @@ Clicking this button should call the following method:
 ethereum.enable()
 ```
 
-<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="BboyAkers" data-slug-hash="PoqQNpw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Ethereum Enable Example">
-  <span>See the Pen <a href="https://codepen.io/BboyAkers/pen/PoqQNpw">
-  Ethereum Enable Example</a> by Austin Akers (<a href="https://codepen.io/BboyAkers">@BboyAkers</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+**Example:**
+
+<EthConnectButton />
+
+
+```html
+<button class="enableEthereumButton">Enable Ethereum</button>
+```
+
+
+```javascript
+const ethereumButton = document.querySelector(".enableEthereumButton");
+
+ethereumButton.addEventListener("click", () => {
+  //Will Start the metamask extension
+  ethereum.enable();
+});
+```
 
 This promise-returning function resolves with an array of hex-prefixed ethereum addresses, which can be used as general account references when sending transactions.
 
@@ -71,17 +83,33 @@ Over time, this method is intended to grow to include various additional paramet
 Since it returns a promise, if you're in an `async` function, you may log in like this:
 
 ```javascript
-const accounts = await ethereum.enable()
-const account = accounts[0] // We currently only ever provide a single account,
-                            // but the array gives us some room to grow.
+const accounts = await ethereum.enable() // We currently only ever provide a single account,
+const account = accounts[0] // but the array gives us some room to grow.
 ```
 
-<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="BboyAkers" data-slug-hash="gOpvrGb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Get Account By Async">
-  <span>See the Pen <a href="https://codepen.io/BboyAkers/pen/gOpvrGb">
-  Get Account By Async</a> by Austin Akers (<a href="https://codepen.io/BboyAkers">@BboyAkers</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+**Example:**
+
+<EthAsyncConnectButton />
+
+```html
+<button class="enableEthereumButton">Enable Ethereum</button>
+<h2>Account: <span class="showAccount"></span></h2>
+```
+
+```javascript
+const ethereumButton = document.querySelector(".enableEthereumButton");
+const showAccount = document.querySelector(".showAccount");
+
+ethereumButton.addEventListener("click", () => {
+  getAccount();
+});
+
+async function getAccount() {
+  const accounts = await ethereum.enable();
+  const account = accounts[0];
+  showAccount.innerHTML = account;
+}
+```
 
 
 ## Choosing a Convenience Library