Wallet Selector

.eslintrc

@@ -6,6 +6,6 @@
   },
   "globals": {
     "document": true,
-    "window": true,
+    "window": true
   }
-}
+}

.prettierrc.json

@@ -1,3 +1,3 @@
 {
-    "trailingComma": "all"
+  "trailingComma": "all"
 }

package.json

@@ -27,6 +27,7 @@
     "@material-ui/core": "^3.1.2",
     "@material-ui/icons": "^3.0.1",
     "axios": "^0.18.0",
+    "eth-registry": "^1.2.0",
     "ethjs": "^0.4.0",
     "express": "^4.14.0",
     "ipfs-mini": "^1.1.2",
@@ -42,7 +43,10 @@
     "react-syntax-highlighter": "^8.0.1",
     "react-typography": "^0.16.13",
     "typography": "^0.16.17",
-    "typography-theme-github": "^0.15.10"
+    "typography-theme-github": "^0.15.10",
+    "walletconnect-qrcode-modal": "^0.7.28",
+    "walletconnect-web3-provider": "^0.7.28",
+    "web3": "^1.0.0-beta.36"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

src/App.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
-import EthRegistry from "./js/metadata.js";
-import Main from "./components/main.js";
-import Header from "./components/Header";
-import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import Typography from "typography";
 import githubTheme from "typography-theme-github";
+import EthRegistry from "eth-registry";
+import Main from "./components/main";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 
 githubTheme.headerFontFamily = ["Roboto", "sans-serif"];
 githubTheme.bodyFontFamily = ["Roboto", "sans-serif"];
@@ -85,13 +86,14 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <Header ethregistry={ethregistry} />
         <MuiThemeProvider theme={theme}>
+          <Header ethregistry={ethregistry} />
           <Main
             params={this.props.match.params}
             location={this.props.location}
             ethregistry={ethregistry}
           />
+          <Footer metadata={ethregistry} />
         </MuiThemeProvider>
       </div>
     );

src/components/AccountManager.js

@@ -1,87 +1,130 @@
-import React, { Component } from "react";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
+import React, { Component, Fragment } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import EmptyAvatar from "../assets/empty_avatar.png";
+import WalletSelector from "../components/WalletSelector";
+import { getMetamaskAccounts } from "../js/metamask";
+import {
+  walletConnectGetWeb3,
+  walletConnectCreateSession,
+} from "../js/walletconnect";
 import "../css/menu.css";
 
 export default class AccountManager extends Component {
-    state = {
-        anchorEl: null,
-    };
+  state = {
+    web3Provider: null,
+    name: "",
+    anchorEl: null,
+    showWallets: false,
+  };
 
-    componentWillMount() {
-        if (
-            typeof window.web3 !== "undefined" &&
-            typeof window.web3.currentProvider !== "undefined"
-        ) {
-            this.setState({ web3Provider: window.web3.currentProvider }, () =>
-                this.getProfile(),
-            );
-        }
+  getProfile = async accounts => {
+    const address = accounts[0];
+    console.log(address);
+    this.setState({ name: address });
+    let profile = await this.props.ethregistry.get(address);
+    if (profile && profile.data) {
+      console.log(profile);
+      this.setState({
+        profile: profile.data.metadata,
+        name: profile.data.metadata.name,
+        avatar: profile.data.metadata.logo,
+      });
     }
 
-    getProfile = async () => {
-        console.log(this);
-        if (window.web3) console.log("getting");
-        const address = window.web3.eth.accounts[0];
-        console.log(address);
-        this.setState({ name: address });
-        let profile = await this.props.ethregistry.getAddressData(address);
-        if (profile && profile.data) {
-            console.log(profile);
-            this.setState({
-                profile: profile.data.metadata,
-                name: profile.data.metadata.name,
-                avatar: profile.data.metadata.logo,
-            });
-        }
+    try {
+    } catch (e) {}
+  };
 
-        try {
-        } catch (e) {}
-    };
+  handleClick = event => {
+    event.preventDefault();
+    this.setState({
+      anchorEl: event.currentTarget,
+      showWallets: !this.state.showWallets,
+    });
+  };
 
-    handleClick = event => {
-        this.setState({ anchorEl: event.currentTarget });
-    };
+  handleClose = () => {
+    this.setState({ anchorEl: null });
+  };
 
-    handleClose = () => {
-        this.setState({ anchorEl: null });
-    };
+  onMetamask = () =>
+    getMetamaskAccounts((accounts, error) => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+      this.setState({ web3Provider: window.web3.currentProvider }, () =>
+        this.getProfile(accounts),
+      );
+    });
 
-    render() {
-        const { anchorEl } = this.state;
-        return (
-            <a
-                className="HeaderNavlink px-2 Account"
-                data-hotkey="g n"
-                aria-owns={anchorEl ? "simple-menu" : null}
-                aria-haspopup="true"
-                onClick={this.handleClick}
-            >
-                <ul
-                    className="user-nav d-flex flex-items-center list-style-none"
-                    id="user-links"
-                >
-                    <li
-                        className={
-                            "name" + (this.state.profile ? " registered" : "")
-                        }
-                    >
-                        {this.state.name}
-                    </li>
-                    <li>
-                        <Avatar
-                            src={this.state.avatar || EmptyAvatar}
-                            style={{
-                                width: 32,
-                                height: 32,
-                                // border: "4px solid black",
-                            }}
-                        />
-                    </li>
-                </ul>
-            </a>
-        );
+  onWalletConnect = async () => {
+    const network = "mainnet";
+    const web3 = await walletConnectGetWeb3(network);
+
+    try {
+      let accounts = await web3.eth.getAccounts();
+      if (!accounts || !accounts.length) {
+        accounts = await walletConnectCreateSession();
+      }
+      this.setState({ web3Provider: web3.currentProvider }, () =>
+        this.getProfile(accounts),
+      );
+    } catch (error) {
+      console.error(error);
     }
+  };
+
+  onSelectWallet = selectedWallet => {
+    this.setState({ showWallets: false });
+    console.log(selectedWallet);
+
+    switch (selectedWallet) {
+      case "Metamask":
+        return this.onMetamask();
+      case "WalletConnect":
+        return this.onWalletConnect();
+      default:
+        return this.onMetamask();
+    }
+  };
+
+  render() {
+    const { anchorEl } = this.state;
+    return (
+      <Fragment>
+        <a
+          href="/"
+          className="HeaderNavlink px-2 Account"
+          data-hotkey="g n"
+          aria-owns={anchorEl ? "simple-menu" : null}
+          aria-haspopup="true"
+          onClick={this.handleClick}
+        >
+          <ul
+            className="user-nav d-flex flex-items-center list-style-none"
+            id="user-links"
+          >
+            <li className={"name" + (this.state.profile ? " registered" : "")}>
+              {this.state.name || "Connect Wallet"}
+            </li>
+            <li>
+              <Avatar
+                src={this.state.avatar || EmptyAvatar}
+                style={{
+                  width: 32,
+                  height: 32,
+                  // border: "4px solid black",
+                }}
+              />
+            </li>
+          </ul>
+        </a>
+        <WalletSelector
+          show={this.state.showWallets}
+          callback={this.onSelectWallet}
+        />
+      </Fragment>
+    );
+  }
 }

src/components/AddressBar.js

@@ -3,14 +3,14 @@ import React, { Component } from "react";
 import Registry from "./Registry";
 
 export default class AddressBar extends Component {
-    render() {
-        return (
-            <div class="monospace address">
-                <div class="barBadges">
-                    <Registry type={this.props.badges} icon />;
-                </div>
-                <div class="barAddress">{this.props.address}</div>
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div class="monospace address">
+        <div class="barBadges">
+          <Registry type={this.props.badges} icon />;
+        </div>
+        <div class="barAddress">{this.props.address}</div>
+      </div>
+    );
+  }
 }

src/components/Footer.js

@@ -30,14 +30,21 @@ class FooterPage extends React.Component {
   render() {
     const { metadata } = this.props;
     return (
-      <footer className="font-small pt-4 mt-4" style={{ flexGrow: 1 }}>
-        <Grid container spacing={16}>
-          <Grid item xs={2} sm={0} />
-          <Grid item xs={3} sm={3}>
+      <footer
+        className="font-small pt-4 mt-4"
+        style={{ flexGrow: 1, border: 0 }}
+      >
+        <Grid
+          id="footer-container"
+          container
+          spacing={24}
+          style={{ display: "flex", justifyContent: "center" }}
+        >
+          <Grid item sm={6} md={3}>
             <h2>Recent Submissions</h2>
             <Recent metadata={metadata} />
           </Grid>
-          <Grid item xs={3} sm={3} style={{ marginRight: "3rem" }}>
+          <Grid item sm={6} md={3}>
             <h2>Resources</h2>
             <b>Metadata Contract:</b>{" "}
             <p>
@@ -80,7 +87,7 @@ class FooterPage extends React.Component {
               </code>
             </p>
           </Grid>
-          <Grid item xs={2} sm={3}>
+          <Grid item sm={6} md={3}>
             <img src={LogoBanner} alt="logo" className="logo" />
             <p className="disclaimer">
               ETH Registry is an open-source tool for storing metadata on the
@@ -116,7 +123,6 @@ class FooterPage extends React.Component {
             </p>
             <p className="copyright">© 2018 Eth Registry</p>
           </Grid>
-          <Grid item xs={2} sm={0} />
         </Grid>
       </footer>
     );

src/components/Form.js

@@ -1,10 +1,9 @@
-import React, { Component, PropTypes } from "react";
+import React, { Component } from "react";
 import Grid from "@material-ui/core/Grid";
 import InputBase from "@material-ui/core/InputBase";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import Edit from "@material-ui/icons/Edit";
 import defaultsDeep from "lodash.defaultsdeep";
-import isEqual from "lodash.isequal";
 
 import FormComponent from "./FormComponent";
 import LogoDrop from "./LogoDrop";