merge: pull request #69 from TomAFrench/rc-1.5.0

PaulRBerg · web-flow · commit 9111c7409902 · 2020-09-14T20:23:30.000+03:00
merge v1.5.0 candidate into develop
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2020-09-14
+
+### Added
+
+- Add simple integration of web3Modal to React templates, as per [pull request #63](https://github.com/PaulRBerg/create-eth-app/pull/63)
+
 ## [1.4.1] - 2020-09-03
 
 ### Fixed
diff --git a/handlebars/react/packages/react-app/package.json.hbs b/handlebars/react/packages/react-app/package.json.hbs
@@ -28,6 +28,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/react": "^16.9.19",
+    "@walletconnect/web3-provider": "^1.2.2",
     "apollo-boost": "^0.4.7",
     "apollo-client": "^2.6.8",
     "apollo-utilities": "^1.3.3",
@@ -39,7 +40,8 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-scripts": "3.4.1",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "web3modal": "^1.9.0"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/handlebars/react/packages/react-app/src/App.js.hbs b/handlebars/react/packages/react-app/src/App.js.hbs
@@ -1,24 +1,54 @@
-import React from "react";
-import logo from "./ethereumLogo.png";
+import React, { useCallback, useEffect, useState } from "react";
 import { Contract } from "@ethersproject/contracts";
-import { getDefaultProvider } from "@ethersproject/providers";
+import { Web3Provider, getDefaultProvider } from "@ethersproject/providers";
 import { useQuery } from "@apollo/react-hooks";
 
-import { Body, Button, Image, Link } from "./components";
+import { Body, Button, Header, Image, Link } from "./components";
+import { web3Modal, logoutOfWeb3Modal } from './utils/web3Modal'
+import logo from "./ethereumLogo.png";
 
 {{#each imports}}
 {{{ this }}}
 {{/each}}
 
-
 async function readOnChainData() {
   {{#each readOnChainData}}
   {{{ this }}}
   {{/each}}
 }
 
+function WalletButton({ provider, loadWeb3Modal }) {
+  return (
+    <Button
+      onClick={() => {
+        if (!provider) {
+          loadWeb3Modal();
+        } else {
+          logoutOfWeb3Modal();
+        }
+      }}
+    >
+      {!provider ? "Connect Wallet" : "Disconnect Wallet"}
+    </Button>
+  );
+}
+
 function App() {
   const { loading, error, data } = useQuery({{ graphqlQueryName }});
+  const [provider, setProvider] = useState();
+
+  /* Open wallet selection modal. */
+  const loadWeb3Modal = useCallback(async () => {
+    const newProvider = await web3Modal.connect();
+    setProvider(new Web3Provider(newProvider));
+  }, []);
+
+  /* If user has loaded a wallet before, load it automatically. */
+  useEffect(() => {
+    if (web3Modal.cachedProvider) {
+      loadWeb3Modal();
+    }
+  }, [loadWeb3Modal]);
 
   React.useEffect(() => {
     {{#each hooks.readData }}
@@ -28,13 +58,16 @@ function App() {
 
   return (
     <div>
+      <Header>
+        <WalletButton provider={provider} loadWeb3Modal={loadWeb3Modal} />
+      </Header>
       <Body>
         <Image src={logo} alt="react-logo" />
         <p>
           Edit <code>packages/react-app/src/App.js</code> and save to reload.
         </p>
         {/* Remove the "hidden" prop and open the JavaScript console in the browser to see what this function does */}
-        <Button hidden onClick={() => readOnChainData()} >
+        <Button hidden onClick={() => readOnChainData()}>
           {{ callToAction }}
         </Button>
         <Link
@@ -43,12 +76,8 @@ function App() {
         >
           Learn Ethereum
         </Link>
-        <Link href="https://reactjs.org" >
-          Learn React
-        </Link>
-        <Link href="{{ learnUrl }}" >
-          Learn {{ whatToLearn }}
-        </Link>
+        <Link href="https://reactjs.org">Learn React</Link>
+        <Link href="{{ learnUrl }}" >Learn {{ whatToLearn }}</Link>
       </Body>
     </div>
   );
diff --git a/handlebars/react/packages/react-app/src/components/index.js b/handlebars/react/packages/react-app/src/components/index.js
@@ -1,5 +1,15 @@
 import styled from "styled-components";
 
+export const Header = styled.header`
+  background-color: #282c34;
+  min-height: 70px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  color: white;
+`;
+
 export const Body = styled.body`
   align-items: center;
   background-color: #282c34;
@@ -8,7 +18,7 @@ export const Body = styled.body`
   flex-direction: column;
   font-size: calc(10px + 2vmin);
   justify-content: center;
-  min-height: 100vh;
+  min-height: calc(100vh - 70px);
 `;
 
 export const Image = styled.img`
@@ -37,7 +47,9 @@ export const Button = styled.button`
   margin: 0px 20px;
   padding: 12px 24px;
 
-  ${props => props.hidden && "hidden"} :focus {
+  ${props => props.hidden && "hidden"}
+  
+  :focus {
     border: none;
     outline: none;
   }
diff --git a/handlebars/react/packages/react-app/src/utils/web3Modal.js b/handlebars/react/packages/react-app/src/utils/web3Modal.js
@@ -0,0 +1,26 @@
+import Web3Modal from "web3modal";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+
+// Enter a valid infura key here to avoid being rate limited
+// You can get a key for free at https://infura.io/register
+const INFURA_ID = "INVALID_INFURA_KEY";
+
+// Web3Modal also supports many other wallets.
+// You can see other options at https://github.com/Web3Modal/web3modal
+export const web3Modal = new Web3Modal({
+  network: "mainnet",
+  cacheProvider: true,
+  providerOptions: {
+    walletconnect: {
+      package: WalletConnectProvider,
+      options: {
+        infuraId: INFURA_ID,
+      },
+    },
+  },
+});
+
+export const logoutOfWeb3Modal = async function() {
+  await web3Modal.clearCachedProvider();
+  window.location.reload();
+};
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-eth-app",
   "description": "Create Ethereum-powered apps with one command",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "bin": {
     "create-eth-app": "./dist/index.js"
   },

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-eth-app",`
`3`	`3`	`"description": "Create Ethereum-powered apps with one command",`
`4`		`- "version": "1.4.1",`
	`4`	`+ "version": "1.5.0",`
`5`	`5`	`"bin": {`
`6`	`6`	`"create-eth-app": "./dist/index.js"`
`7`	`7`	`},`