added metamask & localstorage saving

GriffGreen · Aug 13, 2019 · f34c152 · f34c152
1 parent e62817d
commit f34c152
Show file tree

Hide file tree

Showing 8 changed files with 2,317 additions and 185 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@oqton/redux-black-box": "^1.1.3",
+    "@tokenfoundry/react-metamask": "^0.4.0",
     "bulma": "^0.7.5",
     "bulma-switch": "^2.0.0",
     "eslint-loader": "^2.2.1",
@@ -15,7 +16,9 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "redux": "^4.0.4",
-    "styled-components": "^4.3.2"
+    "redux-localstorage-simple": "^2.1.6",
+    "styled-components": "^4.3.2",
+    "web3": "^1.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.js b/src/App.js
@@ -2,25 +2,27 @@ import React from 'react';
 import pages from "./pages";
 import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
 import "./sass/style.sass";
+import MetaMaskContext from "./components/MetaMask";
 
 function App() {
     return (
         <div className="App">
-
-            <BrowserRouter>
-                <Switch>
-                    {Object.values(pages).map(({ RootComponent, rootPath }) => (
-                        <Route
-                            key={rootPath}
-                            path={rootPath}
-                            exact={rootPath === "/"}
-                            render={props => (
-                                <RootComponent rootpath={rootPath} {...props} />
-                            )}
-                        />
-                    ))}
-                </Switch>
-            </BrowserRouter>
+            <MetaMaskContext.Provider immediate={false}>
+                <BrowserRouter>
+                    <Switch>
+                        {Object.values(pages).map(({ RootComponent, rootPath }) => (
+                            <Route
+                                key={rootPath}
+                                path={rootPath}
+                                exact={rootPath === "/"}
+                                render={props => (
+                                    <RootComponent rootpath={rootPath} {...props} />
+                                )}
+                            />
+                        ))}
+                    </Switch>
+                </BrowserRouter>
+            </MetaMaskContext.Provider>
         </div>
     );
 }

diff --git a/src/components/MetaMask.js b/src/components/MetaMask.js
@@ -0,0 +1,4 @@
+import { createMetaMaskContext } from "@tokenfoundry/react-metamask";
+
+const MetaMaskContext = createMetaMaskContext();
+export default MetaMaskContext;
diff --git a/src/components/MetaMaskButton.js b/src/components/MetaMaskButton.js
@@ -0,0 +1,61 @@
+// MetaMaskButton.js
+import React, { useContext } from "react";
+
+import MetaMaskContext from "./MetaMask";
+
+export default function MetaMaskButton() {
+    const { web3, accounts, error, awaiting, openMetaMask } = useContext(
+        MetaMaskContext,
+    );
+
+    function handleButtonClick() {
+        alert(`Web3 (${web3.version}) is enabled`);
+    }
+
+    if (error && error.message === "MetaMask not installed") {
+        return (
+            <a href="https://metamask.io/" target="_blank" rel="noopener noreferrer">
+                Install MetaMask
+      </a>
+        );
+    } else if (error && error.message === "User denied account authorization") {
+        return (
+            <button type="button" onClick={openMetaMask}>
+                Please allow MetaMask to connect.
+      </button>
+        );
+    } else if (error && error.message === "MetaMask is locked") {
+        return (
+            <button type="button" onClick={openMetaMask}>
+                Please allow MetaMask to connect.
+      </button>
+        );
+    } else if (error) {
+        return (
+            <button type="button" onClick={openMetaMask}>
+                UNHANDLED ERROR: {error.message}
+            </button>
+        );
+    } else if (!web3 && awaiting) {
+        return (
+            <button type="button" onClick={openMetaMask}>
+                MetaMask is loading...
+      </button>
+        );
+    } else if (!web3) {
+        return (
+            <button type="button" onClick={openMetaMask}>
+                Please open and allow MetaMask
+      </button>
+        );
+    } else if (accounts.length === 0) {
+        return <button type="button">No Wallet 🦊</button>;
+    } else {
+        // `web3` and `account` loaded 🎉
+        return (
+            <button type="button" onClick={handleButtonClick}>
+                <code>{accounts[0]}</code> 🦊 (v: {web3.version.api})
+      </button>
+        );
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -3,16 +3,31 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-
+import { save, load } from "redux-localstorage-simple"
 import { Provider } from "react-redux";
-import { createStore, applyMiddleware } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
 
-import techdappReducer from './store/techdapp';
+import reducer from './store/techdapp';
 
 
 import { blackBoxMiddleware } from '@oqton/redux-black-box';
 
-const store = createStore(techdappReducer, undefined, applyMiddleware(blackBoxMiddleware));
+// const store = createStore(techdappReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()), applyMiddleware(blackBoxMiddleware));
+
+
+const composeEnhancers =
+    typeof window === 'object' &&
+        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+        }) : compose;
+
+const enhancer = composeEnhancers(
+    applyMiddleware(blackBoxMiddleware,save()),
+    // applyMiddleware(save),
+);
+const store = createStore(reducer,load(), enhancer);
+
 
 ReactDOM.render(
     <Provider store={store}>

diff --git a/src/pages/home/components/Welcome.js b/src/pages/home/components/Welcome.js
@@ -3,30 +3,38 @@ import React from "react";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import TandC from "./TandC";
+import MetaMaskButton from "../../../components/MetaMaskButton";
 
 const Comp = ({ agreed, onSetAgreed }) => {
-    
+
     // import styled from 'styled-components'
     const Button = styled.button`
 background: palevioletred;
 border-radius: 3px;
 border: none;
 color: white;
 `
-//     const TomatoButton = styled(Button)`
-// background: tomato;
-// `
+    //     const TomatoButton = styled(Button)`
+    // background: tomato;
+    // `
     return (<>
-        <Button>Agreed : {`val=${agreed}`}</Button>
-        <br />
-        <TandC/>
+        <section class="section">
+            <div class="container">
+                <h1 class="title">Section</h1>
+                <h2 class="subtitle">
+                    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
+      </h2>
+      <MetaMaskButton/>
+            </div>
+        </section>
+        <TandC />
         {/* <TomatoButton onClick={onSetAgreed}>click to agree</TomatoButton> */}
     </>);
 };
 
 
 const mapStateToProps = state => {
-    
+
     return {
         agreed: state.agreed,
     };

diff --git a/src/sass/style.sass b/src/sass/style.sass
@@ -1,99 +1,5 @@
 @charset "utf-8";
-@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan:400,700|Exo+2:400,700');
-
-
-// **********************************
-//  overwrites
-// **********************************
-
-
-// Core Variables
-$info: #413594
-$success: #20BC44
-$family-sans-serif: 'Exo 2', sans-serif
-
-$base-col: #2e4e72
-$accent-col-1: #c6dc94
-$accent-col-2: #54b276
-
-$input-background-color: transparent
-$input-color: white
-$input-focus-border-color: white
-$input-border-color: rgba(255,255,255,0.5)
-
-$footer-background-color: #253548
-
-$switch-background: rgba(255,255,255,0.1)
-
-$link-col: #aaaaaa
-$link-col-hover: #eeeeee
-
 
 @import '~bulma/bulma.sass'
 @import '~bulma-switch/src/sass/index.sass'
 
-
-$dottedlinecolor: rgba(0,0,0,0.3)   
-
-.switch[type="checkbox"].is-rounded + label::after
-    outline: 0
-
-.switch[type="checkbox"].is-link:checked + label::before
-    outline: 0
-
-.switch[type="checkbox"]:focus + label::before
-    outline: 0
-
-
-a
-    color: $link-col
-
-html
-  background-color: $base-col
-  font-family: 'Baloo Bhaijaan', cursive
-
-a:hover
-    color: $link-col-hover
-
-.subtitle
-    opacity: .7
-
-.setting
-    border-top: 1px dashed $dottedlinecolor
-    box-sizing:border-box
-    padding-top: 40px   
-    margin: 50px 0
-
-.setting input
-    margin-top: 15px
-    outline:none
-
-.help
-    margin-top: 10px
-    font-weight: bold
-
-
-.footer .content p
-    opacity: .25
-
-
-.buttons
-    margin-top: 10vh
-
-
-.set_setting
-    border-top: 1px dashed $dottedlinecolor
-    box-sizing:border-box
-    padding-top: 2vh
-    margin: 3vh 0
-
-.changebtn
-    margin-top: 4vh
-
-.switch_w_options
-    margin-top: 10px
-
-
-.spacer
-    height: 15px
-    width: 100%