diff --git a/docs/.vuepress/components/ChangeAccount.vue b/docs/.vuepress/components/ChangeAccount.vue new file mode 100644 index 00000000000..35da24dcb39 --- /dev/null +++ b/docs/.vuepress/components/ChangeAccount.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/docs/.vuepress/components/EthAsyncConnectButton.vue b/docs/.vuepress/components/EthAsyncConnectButton.vue new file mode 100644 index 00000000000..f3a5104d003 --- /dev/null +++ b/docs/.vuepress/components/EthAsyncConnectButton.vue @@ -0,0 +1,25 @@ + + + diff --git a/docs/.vuepress/components/EthConnectButton.vue b/docs/.vuepress/components/EthConnectButton.vue new file mode 100644 index 00000000000..19aea59a21a --- /dev/null +++ b/docs/.vuepress/components/EthConnectButton.vue @@ -0,0 +1,21 @@ + + + + diff --git a/docs/.vuepress/components/Foo/Bar.vue b/docs/.vuepress/components/Foo/Bar.vue deleted file mode 100644 index ab163511569..00000000000 --- a/docs/.vuepress/components/Foo/Bar.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/OtherComponent.vue b/docs/.vuepress/components/OtherComponent.vue deleted file mode 100644 index 1d97c7ca8e4..00000000000 --- a/docs/.vuepress/components/OtherComponent.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/docs/.vuepress/components/SendTransaction.vue b/docs/.vuepress/components/SendTransaction.vue new file mode 100644 index 00000000000..3bb8a44e037 --- /dev/null +++ b/docs/.vuepress/components/SendTransaction.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/.vuepress/components/diagram-markdown-slot-relationship.vue b/docs/.vuepress/components/diagram-markdown-slot-relationship.vue deleted file mode 100644 index f0ccc512b39..00000000000 --- a/docs/.vuepress/components/diagram-markdown-slot-relationship.vue +++ /dev/null @@ -1,49 +0,0 @@ - - - diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 42660025e09..5cc8a9dc6f9 100644 --- a/docs/.vuepress/config.js +++ b/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 diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 66849fe619b..fe64ed775eb 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/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); } diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl index 596a926f1d4..0e7c8ed6d96 100644 --- a/docs/.vuepress/styles/index.styl +++ b/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; +} diff --git a/docs/guide/accessing-accounts.md b/docs/guide/accessing-accounts.md index fdd85950d17..b73275f52c3 100644 --- a/docs/guide/accessing-accounts.md +++ b/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`. -

- See the Pen - Selected Address Example by Austin Akers (@BboyAkers) - on CodePen. -

- +**Example:** + + 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]! diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 17ae9cc93a1..59f32fa1773 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -57,12 +57,24 @@ Clicking this button should call the following method: ethereum.enable() ``` -

- See the Pen - Ethereum Enable Example by Austin Akers (@BboyAkers) - on CodePen. -

- +**Example:** + + + + +```html + +``` + + +```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. ``` -

- See the Pen - Get Account By Async by Austin Akers (@BboyAkers) - on CodePen. -

- +**Example:** + + + +```html + +

Account:

+``` + +```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 diff --git a/docs/guide/sending-transactions.md b/docs/guide/sending-transactions.md index 31fadd9285f..ce71078cd4f 100644 --- a/docs/guide/sending-transactions.md +++ b/docs/guide/sending-transactions.md @@ -22,13 +22,45 @@ ethereum.sendAsync({ from: ethereum.selectedAddress, }, callback) ``` +**Example** -

- See the Pen - Send Eth Example by Austin Akers (@BboyAkers) - on CodePen. -

- + + +```html + + +``` + +```javascript +const ethereumButton = document.querySelector(".enableEthereumButton"); +const sendEthButton = document.querySelector(".sendEthButton"); + +let accounts = []; + +//Sending Ethereum to an address +sendEthButton.addEventListener("click", () => { + web3.eth.sendTransaction( + { + from: accounts[0], + to: "0x2f318C334780961FB129D2a6c30D0763d9a5C970", + value: "0x29a2241af62c0000", + gas: 21000, + gasPrice: 20000000000 + }, + result => { + console.log(result); + } + ); +}); + +ethereumButton.addEventListener("click", () => { + getAccount(); +}); + +async function getAccount() { + accounts = await ethereum.enable(); +} +``` ## Transaction Parameters diff --git a/package-lock.json b/package-lock.json index 1f3680a4e1f..fe53c96a85a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1587,6 +1587,11 @@ "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", "dev": true }, + "aes-js": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.0.0.tgz", + "integrity": "sha1-4h3xCtbCBTKVvLuNq0Cwnb6ofk0=" + }, "agentkeepalive": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz", @@ -2099,8 +2104,7 @@ "bn.js": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", - "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==", - "dev": true + "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==" }, "body-parser": { "version": "1.19.0", @@ -2196,8 +2200,7 @@ "brorand": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", - "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=", - "dev": true + "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" }, "browserify-aes": { "version": "1.2.0", @@ -5119,7 +5122,6 @@ "version": "1.1.7", "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==", - "dev": true, "requires": { "inherits": "^2.0.3", "minimalistic-assert": "^1.0.1" @@ -5141,7 +5143,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=", - "dev": true, "requires": { "hash.js": "^1.0.3", "minimalistic-assert": "^1.0.0", @@ -5432,8 +5433,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "internal-ip": { "version": "4.3.0", @@ -5787,6 +5787,11 @@ "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==", "dev": true }, + "js-sha3": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.5.7.tgz", + "integrity": "sha1-DU/9gALVMzqrr0oj7tL2N0yfKOc=" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -6320,14 +6325,12 @@ "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", - "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==", - "dev": true + "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==" }, "minimalistic-crypto-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz", - "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=", - "dev": true + "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=" }, "minimatch": { "version": "3.0.4", @@ -8349,6 +8352,11 @@ "ajv-keywords": "^3.1.0" } }, + "scrypt-js": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-2.0.4.tgz", + "integrity": "sha512-4KsaGcPnuhtCZQCxFxN3GVYIhKFPTdLd8PLC552XwbMndtD0cjRFAhDuuydXQ0h08ZfPgzqe6EKHozpuH74iDw==" + }, "section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -10521,6 +10529,11 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true }, + "xmlhttprequest": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", + "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index f0c3bda92c4..4c2029b24d4 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,6 @@ "vue-toasted": "^1.1.25", "vuepress": "^1.0.3", "vuepress-plugin-flowchart": "^1.4.2" - } + }, + "dependencies": {} }