Add UX features

Detect all metamask states
UX for approve transactions
UX for getting more ETH from faucet
UX for submitted transactions
Toggle about

package.json

@@ -8,6 +8,7 @@
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.0",
+    "react-scroll-to-component": "^1.0.2",
     "react-select": "^1.2.1",
     "web3": "1.0.0-beta.22"
   },
@@ -16,7 +17,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "deploy" : "npm run build&&gh-pages -d build"
+    "deploy": "npm run build&&gh-pages -d build"
   },
   "devDependencies": {
     "gh-pages": "^1.1.0"

src/App.css

@@ -2,26 +2,38 @@ body{
   margin: 0;
   padding: 0;
   font-family: "Inter UI", sans-serif;
-  font-size: 24px;
-  line-height: 1.2;
+  font-size: 20px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.dim input{
+  pointer-events:none;
 }
 
 input{
-  font-size: 24px;
-  line-height: 1.2;
+  font-size: 20px;
+  line-height: 1.6;
 }
 
 p{
-  margin: 0px;
+  /* margin: .25rem; */
 }
 
-/* .app{
-  margin: 10rem;
-  margin-top: 5rem;
-} */
+a{
+  color: #2F80ED;
+  text-decoration: none;
+}
+
+a:hover{
+  text-decoration: underline;
+}
 
 .pa2 {
-  padding: 3rem;
+  padding: 2.5rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .title{
@@ -29,7 +41,7 @@ p{
   flex-direction: row;
 }
 .border{
-  border: 1px solid #f2f2f2;
+  border: 1px solid #f7f7f7;
 }
 .title {
   width: 100%;
@@ -44,13 +56,13 @@ p{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: #27AE60;
+  /* color: #27AE60; */
   flex: 1;
 }
 
 .connection a{
-  text-decoration: none;
-  color: #27AE60;
+  /* text-decoration: none; */
+  /* color: #27AE60; */
 }
 
 .order {
@@ -99,6 +111,12 @@ input[type=number]::-webkit-outer-spin-button {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  opacity: .6;
+}
+
+.rate p{
+  margin: 0px;
+  padding: 0px;
 }
 
 .info{
@@ -126,23 +144,80 @@ input[type=number]::-webkit-outer-spin-button {
   text-decoration: underline;
 }
 
+.about{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+  text-decoration: none;
+  color: black;
+}
+
+.about:hover .underline{
+  text-decoration: underline;
+}
+
 .swap{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  background-color: #f2f2f2;
   color: blue;
-  height: 48px;
+  height: 64px;
+  transition: height .3s ease;
+}
+
+.expand{
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  background-color: #f2f2f2;
+  height: auto;
   transition: height .3s ease;
 }
 
+.transaction p{
+  margin: 0px;
+}
+
+.transaction ol{
+  padding: 0px;
+  padding-left: 20px;
+}
+
+.grey-bg{
+  background-color: #f7f7f7;
+}
+
 .red{
   color: red;
 }
 
-.dim .order, .rate{
+.green{
+  color: #27AE60;
+}
+
+.green a{
+  color: #27AE60;
+}
+
+.yellow{
+  color: #F2C94C;
+}
+
+.dim .order , .liq, .ex{
+  opacity: .4;
+  pointer-events:none;
+}
+
+.dim .rate{
   opacity: .4;
+  pointer-events:none;
+}
+
+.dim .links{
+  opacity: .4;
+  pointer-events:none;
 }
 
 .hidden{
@@ -150,3 +225,7 @@ input[type=number]::-webkit-outer-spin-button {
   height: 0px;
   border: 0px solid #f2f2f2;
 }
+
+.f-a{
+  cursor: pointer;
+}

src/components/ConnectionHelper.js

+import React from 'react';
+
+function ConnectionHelper(props) {
+  // console.log(props.input > props.balance/10**18)
+
+  if (!props.metamask) {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works</a>.<br />
+        <b>To get started, please install <a href="">Metamask</a>.</b></p>
+        {/* <p></p> */}
+      </div>
+    )
+  } if (props.locked) {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a  onClick={() => {props.toggleAbout()}} className="f-a" >How it works</a>.<br />
+        Looks like you aren't connected. <b>Please unlock Metamask to continue.</b></p>
+        {/* <p><a href="">How it works</a></p> */}
+      </div>
+    )
+  } else if (!props.approved &&  props.exchangeType === "Token to Token") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>Our smart contract has to be approved by your address to be able to swap tokens for tokens.<br /> We set the transfer limit to 250 (<a href="">Why?</a>).</p>
+        <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
+      </div>
+    )
+  } else if (!props.approved && props.exchangeType === "Token to ETH") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>Our smart contract has to be approved by your address to be able to swap tokens for ETH.<br /> We set the transfer limit to 250 (<a href="">Why?</a>).</p>
+        <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
+      </div>
+    )
+  } else if (props.interaction === "error1") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>You can't swap a token for itself! 😂</p>
+      </div>
+    )
+  }
+  else if (props.interaction === "submitted") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>{"Transaction submitted! Click on the transaction hash below to check its status?"}</p>
+      </div>
+    )
+  }  else if (props.input > props.balance/10**18) {
+    return (
+      <div className="grey-bg red connection border pa2">
+        <p>This account doesn't have enough balance to make this transaction! Get more ETH with the <a href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
+      </div>
+    )
+  } else if (props.firstRun) {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a onClick={() => {props.toggleAbout()}} className="f-a">How it works</a>.<br />
+        Enter an input value below to get started.</p>
+        {/* <a className="f-a" onClick={() => props.onCloseHelper()}>×</a> */}
+        <p>↓</p>
+      </div>
+    )
+  } else {
+    return (
+      null
+    )
+  }
+}
+
+export default ConnectionHelper;

src/components/HelperMessages.js

@@ -4,22 +4,25 @@ function HelperMessages(props) {
   let message = ''
   switch (props.interaction) {
     case 'connected':
-      message = "Nice! You're connected. Enter an input value below to get started."
+      message = <p>{"Nice! You're connected. Enter an input value below to get started."}</p>
+      break;
+    case 'locked':
+      message = <p>{"Your metamask is locked! Please unlock to continue."}</p>
       break;
     case 'input':
-      message = "You're swapping " + props.inputToken.value + " for " + props.outputToken.value + ". Want to know more about how the prices are determined?"
+      message = <p>{"You're swapping " + props.inputToken.value + " for " + props.outputToken.value + ". Want to know more about how the prices are determined?"}</p>
       // message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
       break;
     case 'error1':
-      message = "You can't swap a token for itself! 😂" 
+      message = <p>{"You can't swap a token for itself! 😂"}</p>
       // message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
       break;
     default:
-      message = "Hi there! This site helps you swap ERC20 tokens. Looks like you aren't connected. Need help?"
+      message = <p>{"Hi there! This site helps you swap ERC20 tokens. Looks like you aren't connected. Need help?"}</p>
   }
   return (
     <section className="info border pa2">
-      <p>{message}</p>
+      {message}
       <p>↓</p>
     </section>
   )

src/components/NetworkStatus.js

@@ -2,16 +2,33 @@ import React from 'react';
 
 function NetworkStatus(props) {
   let isConnected = props.connected
+  let metamask = props.metamask
+  let locked = props.locked
+
   if (isConnected){
     return (
-      <div className="connection border pa2">
+      <div className="connection border pa2 green">
         <a href={'https://rinkeby.etherscan.io/search?q=' + props.address} target="_blank">{props.address}</a>
         <p>●</p>
       </div>
     )
-  } else {
+  } else if (!metamask) {
     return (
       <div className="connection red border pa2">
+        <p>{"Waiting for connection to the blockchain..."}</p>
+        <p>●</p>
+      </div>
+    )
+  } else if (locked && !isConnected) {
+    return (
+      <div className="connection yellow border pa2">
+        <p>{"Waiting for Metamask to unlock..."}</p>
+        <p>●</p>
+      </div>
+    )
+  } else {
+    return (
+      <div className="connection yellow border pa2">
         <p>{'MetaMask connected to ' + props.network + ' Switch to Rinkeby and refresh!'}</p>
         <p>●</p>
       </div>

src/components/SelectToken.css

@@ -25,11 +25,12 @@
 .Select-value{
   position: absolute;
   width: 5rem;
-  margin-top: 1px;
+  margin-top: 5px;
 }
 
 .Select-input{
   width: 5rem;
+    margin-top: 5px;
 }
 
 .Select-menu-outer {

src/components/Transactions.js

+import React from 'react';
+
+function Transactions(props) {
+  return (
+    <div className="connection">
+      <ol>
+      {props.transactions.map((t) =>
+        <li key={t.toString()}><p><a href={'https://rinkeby.etherscan.io/search?q=' + t}>{t}</a></p></li>
+      )}
+      </ol>
+    </div>
+  )
+}
+
+export default Transactions;

yarn.lock

@@ -1511,6 +1511,37 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
+component-clone@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/component-clone/-/component-clone-0.2.2.tgz#c7f5979822880fad8cfb0962ba29186d061ee04f"
+  dependencies:
+    component-type "*"
+
+component-emitter@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+
+component-raf@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-raf/-/component-raf-1.2.0.tgz#b2bc72d43f1b014fde7a4b3c447c764bc73ccbaa"
+
+component-tween@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-tween/-/component-tween-1.2.0.tgz#cc39ce5dbab05b52825f41d1947638a0b01b2b8a"
+  dependencies:
+    component-clone "0.2.2"
+    component-emitter "1.2.0"
+    component-type "1.1.0"
+    ease-component "1.0.0"
+
+component-type@*:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.2.1.tgz#8a47901700238e4fc32269771230226f24b415a9"
+
+component-type@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.1.0.tgz#95b666aad53e5c8d1f2be135c45b5d499197c0c5"
+
 compressible@~2.0.11:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
@@ -2131,6 +2162,10 @@ duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+ease-component@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ease-component/-/ease-component-1.0.0.tgz#b375726db0b5b04595b77440396fec7daa5d77c9"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -5668,6 +5703,12 @@ react-scripts@1.1.0:
   optionalDependencies:
     fsevents "1.1.2"
 
+react-scroll-to-component@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-scroll-to-component/-/react-scroll-to-component-1.0.2.tgz#f260dc936c62a53e772786d7832fe0884e195354"
+  dependencies:
+    scroll-to "0.0.2"
+
 react-select@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
@@ -6061,6 +6102,13 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
+scroll-to@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/scroll-to/-/scroll-to-0.0.2.tgz#936d398a9133660a2492145c2c0081dfcb0728f3"
+  dependencies:
+    component-raf "1.2.0"
+    component-tween "1.2.0"
+
 scrypt.js@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/scrypt.js/-/scrypt.js-0.2.0.tgz#af8d1465b71e9990110bedfc593b9479e03a8ada"