prompt metamask install

package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "metamask-logo": "^2.1.3",
     "ramda": "^0.25.0",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",

src/App.css

@@ -159,7 +159,7 @@
 
 .exchange-buyEthInput, .exchange-buyTokensInput{
     width: 10vw;
-    height: 4.5vh;
+    height: 4.2vh;
     text-align: center;
     color: rgb(209, 151, 245);
     vertical-align: middle;
@@ -176,11 +176,11 @@
 
 .exchange-buyEthButton, .exchange-buyTokensButton{
   position: fixed;
-  font-size: 2.5vh;
+  font-size: 1.55vw;
   width: 7vw;
   text-shadow: 3px 3px 10px #1c5f7c;
   margin-top: 10px;
-  height: 4.5vh;
+  height: 4.2vh;
   text-align: center;
   color: rgb(220, 160, 245);
   text-shadow: 1px 1px 5px #ff69f0;

src/components/menus/Instructions.css

@@ -9,7 +9,7 @@
   text-shadow: 2px 2px 10px #2daae0;
   margin-left: 35vw;
   margin-right: 1vw;
-  height: 55vh;
+  max-height: 55vh;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   overflow-y: scroll;

src/components/misc/Splashscreen.css

+.install-metamask {
+  width: 100vw;
+  top: 70vh;
+  position: fixed;
+  font-family: Optima, sans-serif;
+  font-size: 26px;
+  text-align: center;
+}
+
+.install-metamask a {
+}

src/components/misc/Splashscreen.js

+import React, { Component } from 'react';
+import './Splashscreen.css';
+
+var ModelViewer = require('metamask-logo')
+
+// To render with fixed dimensions:
+var viewer = ModelViewer({
+
+  // Dictates whether width & height are px or multiplied
+  // pxNotRatio: true,
+  // width: 500,
+  // height: 400,
+  pxNotRatio: false,
+  width: 1,
+  height: 0.7,
+
+  // To make the face follow the mouse.
+  followMouse: true,
+
+  // head should slowly drift (overrides lookAt)
+  // slowDrift: true,
+
+})
+
+var metamaskLink = 'https://metamask.io';
+
+class Splashscreen extends Component{
+
+  render() {
+    return (
+      <div className="install-metamask">
+      Uniswap requires MetaMask to connect to the Ethereum blockchain.<br/><br/>
+      <a href="https://metamask.io"> {metamaskLink} </a>
+      </div>
+    );
+  }
+
+}
+
+export default Splashscreen;

src/index.css

@@ -2,4 +2,5 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  overflow: hidden;
 }

src/index.js

@@ -2,9 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import Splashscreen from './components/misc/Splashscreen'
 import registerServiceWorker from './registerServiceWorker';
 
+function Detect(props) {
+  const metamask = props.metamask;
+  if(typeof metamask === 'undefined') {
+    return <Splashscreen />
+  }
+  else {
+    return <App />
+  }
+}
+
 ReactDOM.render(
-   <App />, document.getElementById('root')
+   <Detect metamask={window.web3} />, document.getElementById('root')
 );
 registerServiceWorker();