Add 'add token' UX

Connection helped included add token prompt and link
Font now included in CSS (needs testing)

src/App.css

+@import url('https://rsms.me/inter/inter-ui.css');
+
 body{
   margin: 0;
   padding: 0;

src/App.js

@@ -53,6 +53,8 @@ class App extends Component {
       locked: true,
       connected: false,
       approved: true,
+      uniAdded: false,
+      swapAdded: false,
       firstRun: true,
       about: false,
       interaction: 'disconnected',
@@ -551,7 +553,13 @@ class App extends Component {
   }
 
   onCloseHelper = () => {
-    this.setState({firstRun: !this.state.firstRun})
+    if(this.state.outputToken.value === 'UNI'){
+      this.setState({uniAdded: true})
+    } else if(this.state.outputToken.value === 'SWAP'){
+      this.setState({swapAdded: true})
+    } else {
+      this.setState({firstRun: !this.state.firstRun})
+    }
   }
 
   toggleAbout = () => {
@@ -591,6 +599,8 @@ class App extends Component {
           interaction={this.state.interaction}
           exchangeType={this.state.exchangeType}
           firstRun={this.state.firstRun}
+          uniAdded={this.state.uniAdded}
+          swapAdded={this.state.swapAdded}
           onCloseHelper={this.onCloseHelper}
           input={this.state.input}
           balance={this.state.inputBalance}
@@ -653,8 +663,8 @@ class App extends Component {
             <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>
-            <a 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 href="http://vitalik.ca/general/2017/06/22/marketmakers.html">http://vitalik.ca/general/2017/06/22/marketmakers.html</a>
+            <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>
           </section>

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) {
@@ -16,7 +13,6 @@ function ConnectionHelper(props) {
       <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") {
@@ -33,6 +29,22 @@ function ConnectionHelper(props) {
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
+  } 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 />
+        Add UNI with <a href="">0x350E5DD084ecF271e8d3531D4324443952F47756</a>.</p>
+        <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
+      </div>
+    )
+  } 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 />
+        Add UNI with <a href="">0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA</a>.</p>
+        <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
+      </div>
+    )
   } else if (props.interaction === "error1") {
     return (
       <div className="grey-bg connection border pa2">
@@ -49,7 +61,7 @@ function ConnectionHelper(props) {
   }  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>
+        <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) {
@@ -57,7 +69,6 @@ function ConnectionHelper(props) {
       <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>
     )

src/components/NetworkStatus.js

@@ -8,7 +8,7 @@ function NetworkStatus(props) {
   if (isConnected){
     return (
       <div className="connection border pa2 green">
-        <a href={'https://rinkeby.etherscan.io/search?q=' + props.address} target="_blank">{props.address}</a>
+        <a target="_blank" href={'https://rinkeby.etherscan.io/search?q=' + props.address}>{props.address}</a>
         <p>●</p>
       </div>
     )