basic transaction interaction

package.json

@@ -71,7 +71,8 @@
     "react-qr-svg": "^2.1.0",
     "react-time": "^4.3.0",
     "react-transition-group": "^2.5.0",
-    "slugify": "^1.3.1"
+    "slugify": "^1.3.1",
+    "web3": "^1.0.0-beta.36"
   },
   "devDependencies": {
     "@babel/node": "^7.0.0",

src/components/molecules/ModalThanks.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 import { QRCode } from 'react-qr-svg'
 import Clipboard from 'react-clipboard.js'
+import Web3 from 'web3'
 
 import Modal from '../atoms/Modal'
 import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
@@ -20,45 +21,124 @@ const query = graphql`
   }
 `
 
-const ModalThanks = ({ ...props }) => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const { author } = data.site.siteMetadata
+class ModalThanks extends PureComponent {
+  state = {
+    minimal: false,
+    web3Connected: false,
+    balance: '',
+    network: '',
+    accounts: [],
+    receipt: ''
+  }
 
-      return (
-        <Modal
-          {...props}
-          contentLabel="Say thanks with Bitcoin or Ether"
-          title="Say thanks"
-        >
-          <div className={styles.modalThanks}>
-            {Object.keys(author).map((address, i) => (
-              <div key={i} className={styles.coin}>
-                <h4>{address}</h4>
-                <QRCode
-                  bgColor="transparent"
-                  fgColor="#6b7f88"
-                  level="Q"
-                  style={{ width: 150 }}
-                  value={author[address]}
-                />
-                <pre>
-                  <code>{author[address]}</code>
-                  <Clipboard
-                    data-clipboard-text={author[address]}
-                    button-title="Copy to clipboard"
-                  >
-                    <IconClipboard />
-                  </Clipboard>
-                </pre>
+  web3 = new Web3(Web3.givenProvider || 'ws://localhost:8546')
+
+  componentDidMount() {
+    this.getWeb3Account()
+  }
+
+  getWeb3Account() {
+    if (this.web3 && this.web3.eth.net.isListening()) {
+      this.setState({ web3Connected: true })
+
+      this.web3.eth.net.getId((err, netId) => {
+        switch (netId) {
+          case '1':
+            this.setState({ network: 'Main' })
+            break
+          case '2':
+            this.setState({ network: 'Morden' })
+            break
+          case '3':
+            this.setState({ network: 'Ropsten' })
+            break
+          case '4':
+            this.setState({ network: 'Rinkeby' })
+            break
+          case '42':
+            this.setState({ network: 'Kovan' })
+            break
+          default:
+            this.setState({ network: 'unknown' })
+        }
+      })
+
+      this.web3.eth.getAccounts((error, accounts) => {
+        this.setState({ accounts })
+        this.web3.eth.getBalance(accounts[0]).then(balance => {
+          this.setState({ balance })
+        })
+      })
+    }
+  }
+
+  handleWeb3Button = () => {
+    this.web3.eth
+      .sendTransaction({
+        from: this.state.accounts[0],
+        to: '0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1',
+        value: '1000000000000000'
+      })
+      .then(receipt => this.setState({ receipt }))
+      .catch(err => console.error(err))
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const { author } = data.site.siteMetadata
+
+          return (
+            <Modal
+              {...this.props}
+              contentLabel="Say thanks with Bitcoin or Ether"
+              title="Say thanks"
+            >
+              <div className={styles.modalThanks}>
+                {this.state.web3Connected && (
+                  <div>
+                    <button
+                      className="btn btn-primary"
+                      onClick={this.handleWeb3Button}
+                    >
+                      Make it rain
+                    </button>
+                    {this.state.receipt.status && (
+                      <div>{this.state.receipt.transactionHash}</div>
+                    )}
+                  </div>
+                )}
+
+                {Object.keys(author).map((address, i) => (
+                  <div key={i} className={styles.coin}>
+                    <h4>{address}</h4>
+                    <QRCode
+                      bgColor="transparent"
+                      fgColor="#6b7f88"
+                      level="Q"
+                      style={{ width: 150 }}
+                      value={author[address]}
+                    />
+                    <pre>
+                      <code>{author[address]}</code>
+                      <Clipboard
+                        data-clipboard-text={author[address]}
+                        button-title="Copy to clipboard"
+                      >
+                        <IconClipboard />
+                      </Clipboard>
+                    </pre>
+                  </div>
+                ))}
               </div>
-            ))}
-          </div>
-        </Modal>
-      )
-    }}
-  />
-)
+            </Modal>
+          )
+        }}
+      />
+    )
+  }
+}
 
 export default ModalThanks

src/components/molecules/ModalThanks.module.scss

@@ -4,6 +4,11 @@
     @media (min-width: $screen-sm) {
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap;
+
+        > div:first-child {
+            width: 100%;
+        }
     }
 }