Add cookies to store app state

also store transaction history to review. Next step - listing
transaction status.

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "react": "^16.2.0",
+    "react-cookies": "^0.1.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.0",

src/App.js

 import React, { Component } from 'react';
 import Web3 from 'web3';
 import scrollToComponent from 'react-scroll-to-component';
+import cookie from 'react-cookies'
 
 import Head from './components/Head'
 import NetworkStatus from './components/NetworkStatus'
@@ -78,6 +79,12 @@ class App extends Component {
     if(localweb3 === 'undefined'){
       this.setState({connected: false})
     } else {
+      this.setState({
+        firstRun: cookie.load('firstRun'),
+        swapAdded: cookie.load('swapAdded'),
+        uniAdded: cookie.load('uniAdded'),
+        transactions: cookie.load('transactions') || [],
+      })
       this.getContracts();
       this.getUserAddress();
       this.checkNetwork();
@@ -503,11 +510,14 @@ class App extends Component {
         let transactions = this.state.transactions
         transactions.push(result)
         this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'})
+        cookie.save('transactions', transactions, { path: '/' })
       })
       .on('receipt', (receipt) => {
         console.log(receipt)
       })  //Transaction Submitted to blockchain
-      .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
+      .on('confirmation', (confirmationNumber, receipt) => {
+        console.log("Block Confirmations: " + confirmationNumber)
+      })  //Transaction Mined
       .on('error', console.error);
   }
 
@@ -525,6 +535,7 @@ class App extends Component {
         let transactions = this.state.transactions
         transactions.push(result)
         this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'})
+        cookie.save('transactions', transactions, { path: '/' })
       })
       .on('receipt', (receipt) => {console.log(receipt)})  //Transaction Submitted to blockchain
       .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
@@ -546,6 +557,7 @@ class App extends Component {
         let transactions = this.state.transactions
         transactions.push(result)
         this.setState({transactions: transactions, input: '', output: '', interaction: 'submitted'})
+        cookie.save('transactions', transactions, { path: '/' })
       })
       .on('receipt', (receipt) => {console.log(receipt)})  //Transaction Submitted to blockchain
       .on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)})  //Transaction Mined
@@ -555,10 +567,13 @@ class App extends Component {
   onCloseHelper = () => {
     if(this.state.outputToken.value === 'UNI'){
       this.setState({uniAdded: true})
+      cookie.save('uniAdded', true, { path: '/' })
     } else if(this.state.outputToken.value === 'SWAP'){
       this.setState({swapAdded: true})
+      cookie.save('swapAdded', true, { path: '/' })
     } else {
       this.setState({firstRun: !this.state.firstRun})
+      cookie.save('firstRun', !this.state.firstRun, { path: '/' })
     }
   }
 
@@ -644,13 +659,6 @@ class App extends Component {
           </section>
           : <section className="swap grey-bg hidden border pa2"></section>}
 
-        {this.state.transactions.length > 0 ?
-        <section className="transaction border grey-bg pa2">
-          <p className="underline">Transactions submitted</p>
-          <Transactions transactions={this.state.transactions}/>
-        </section>
-        : <section className="hidden border pa2"></section>}
-
         <section className="About" ref={(section) => { this.About = section; }}>
           <a onClick={() => {this.toggleAbout()}} className="link border pa2 f-a">
             <p className="underline">About Uniswap.</p>
@@ -662,11 +670,12 @@ class App extends Component {
           <section className="expand grey-bg border pa2">
             <p>Uniswap is a trustless, decentralized exchange for Ether and ERC20 tokens</p>
             <p>Uniswap exchange uses a "Market Maker" mechanism, where liquidity providers store a reserve of ETH and ERC20 tokens within an Ethereum smart contract. An exchange rate is set between the tokens and ETH based on the relative availibility of each token. Arbitrage ensures that the rate will be the same as on other exchanges. Buyers who send Token 1 to the smart contract will receive back Token 2 at the current rate. A small fee is paid from the buyer to the liquidity providers to incentive participation.</p>
-            <p>Until then, here is some more info on Market Makers:</p>
+            <p>A full writeup with math and whatnot will be written soon.Until then, here is some more info on Market Makers:</p>
             <a target="_blank" href="https://www.reddit.com/r/ethereum/comments/55m04x/lets_run_onchain_decentralized_exchanges_the_way/">https://www.reddit.com/r/ethereum/comments/55m04x/lets_run_onchain_decentralized_exchanges_the_way/</a>
             <a target="_blank" href="http://vitalik.ca/general/2017/06/22/marketmakers.html">http://vitalik.ca/general/2017/06/22/marketmakers.html</a>
             <p>Please reach out if you would like to get involved or support the project.</p>
-            <p>Email: <a href="mailto:hayden@uniswap.io">hayden@uniswap.io</a> ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078</p>
+            <p>Email: <a href="mailto:hayden@uniswap.io">hayden@uniswap.io</a></p>
+            <p>ETH Address: 0x4779721CaC18A46DbCF148f2Dd7A8E6cc1F90078</p>
           </section>
           : <section className="expand grey-bg border pa2 hidden">  </section>
         }
@@ -681,6 +690,13 @@ class App extends Component {
             <p>+</p>
           </a>
         </section>
+
+        {this.state.transactions.length > 0 ?
+        <section className="transaction border pa2">
+          <p className="underline">Past Transactions:</p>
+          <Transactions transactions={this.state.transactions}/>
+        </section>
+        : <section className="hidden border pa2"></section>}
       </div>
     )
   }

src/components/ConnectionHelper.js

@@ -32,7 +32,8 @@ function ConnectionHelper(props) {
   } else if (!props.uniAdded && props.outputToken.value === "UNI") {
     return (
       <div className="grey-bg connection border pa2">
-        <p>You’ll need to add the UNI tokens to Metamask. <a target="_blank" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
+        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a  onClick={() => {props.toggleAbout()}} className="f-a" >How it works</a>.<br /><br />
+        You’ll need to add the UNI tokens to Metamask. <a target="_blank" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
         Add UNI with <a href="">0x350E5DD084ecF271e8d3531D4324443952F47756</a>.</p>
         <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
       </div>
@@ -40,7 +41,8 @@ function ConnectionHelper(props) {
   } else if (!props.swapAdded && props.outputToken.value === "SWAP") {
     return (
       <div className="grey-bg connection border pa2">
-        <p>You’ll need to add the SWAP tokens to Metamask. <a target="_blank" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
+        <p>Welcome! Uniswap is a decentralized exhange platform for ERC20 Tokens. <a  onClick={() => {props.toggleAbout()}} className="f-a" >How it works</a>.<br /><br />
+        You’ll need to add the SWAP tokens to Metamask. <a target="_blank" href="http://metamask.consensyssupport.happyfox.com/kb/article/4-managing-tokens">Here’s a step by step guide.</a><br />
         Add UNI with <a href="">0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA</a>.</p>
         <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
       </div>
@@ -64,7 +66,7 @@ function ConnectionHelper(props) {
         <p>This account doesn't have enough balance to make this transaction! Get more ETH with the <a target="_blank" href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
       </div>
     )
-  } else if (props.firstRun) {
+  } else {
     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 />
@@ -72,10 +74,6 @@ function ConnectionHelper(props) {
         <p>↓</p>
       </div>
     )
-  } else {
-    return (
-      null
-    )
   }
 }
 

src/components/Transactions.js

@@ -5,7 +5,7 @@ function Transactions(props) {
     <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>
+        <li key={t.toString()}><p><a target="_blank" href={'https://rinkeby.etherscan.io/search?q=' + t}>{t}</a></p></li>
       )}
       </ol>
     </div>

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App metamask={window.web3} />, document.getElementById('root'));

yarn.lock

@@ -1628,7 +1628,7 @@ cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
 
-cookie@0.3.1:
+cookie@0.3.1, cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
@@ -5608,6 +5608,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-cookies@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-cookies/-/react-cookies-0.1.0.tgz#6bb883f2d1a397f138a4110300b46fe25df8f1a9"
+  dependencies:
+    cookie "^0.3.1"
+    object-assign "^4.1.1"
+
 react-dev-utils@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.0.tgz#425ac7c9c40c2603bc4f7ab8836c1406e96bb473"