Add dialog for when web3 is not found

package.json

@@ -25,6 +25,7 @@
     "redux": "^3.7.2",
     "redux-subscriber": "^1.1.0",
     "redux-thunk": "^2.2.0",
+    "ua-parser-js": "^0.7.18",
     "web3": "^1.0.0-beta.36"
   },
   "scripts": {

src/assets/images/cipher-browser-logo.svg

+<svg width="1072" height="1072" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#3949AB" offset="0%"/><stop stop-color="#1A237E" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="url(#a)" cx="535.714" cy="535.714" r="535.714"/><g transform="rotate(45 169.906 687.237)" fill="#FFF"><path d="M66.814 0h177.9c36.9 0 66.814 29.914 66.814 66.814v177.9c0 36.9-29.913 66.814-66.813 66.814H66.814C29.914 311.528 0 281.615 0 244.715V66.814C0 29.914 29.914 0 66.814 0zm88.95 214.176c32.26 0 58.412-26.152 58.412-58.412s-26.152-58.411-58.412-58.411-58.411 26.151-58.411 58.411c0 32.26 26.151 58.412 58.411 58.412z"/><path d="M397.81 25.058c-23.063 0-41.759 18.696-41.759 41.759v177.9c0 23.064 18.696 41.76 41.759 41.76h177.9c23.063 0 41.76-18.696 41.76-41.76v-177.9c0-23.063-18.697-41.759-41.76-41.759h-177.9zm0-25.055h177.9c36.9 0 66.814 29.914 66.814 66.814v177.9c0 36.901-29.913 66.815-66.814 66.815h-177.9c-36.9 0-66.814-29.914-66.814-66.814V66.817c0-36.9 29.913-66.814 66.814-66.814z" fill-rule="nonzero"/><circle cx="486.76" cy="155.767" r="58.412"/><path d="M66.814 330.999h177.9c36.9 0 66.814 29.914 66.814 66.814v177.9c0 36.9-29.913 66.814-66.813 66.814H66.814C29.914 642.527 0 612.614 0 575.714V397.813c0-36.9 29.914-66.814 66.814-66.814zm88.95 214.176c32.26 0 58.412-26.152 58.412-58.412s-26.152-58.411-58.412-58.411-58.411 26.151-58.411 58.411c0 32.26 26.151 58.412 58.411 58.412zm242.049-214.176h177.9c36.9 0 66.814 29.914 66.814 66.814v177.9c0 36.9-29.913 66.814-66.813 66.814H397.813c-36.9 0-66.814-29.913-66.814-66.813V397.813c0-36.9 29.914-66.814 66.814-66.814zm88.95 214.176c32.26 0 58.412-26.152 58.412-58.412s-26.152-58.411-58.412-58.411-58.411 26.151-58.411 58.411c0 32.26 26.151 58.412 58.411 58.412z"/></g></g></svg>
\ No newline at end of file

src/assets/images/trust-wallet-logo.svg

+<svg width="288" height="288" viewBox="0 0 288 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>logo_solid_square_white</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(60 145)">
+<g id="logo_solid_square_white">
+<g id="background">
+<use xlink:href="#path0_fill" transform="translate(-60 -145)" fill="#3375BB"/>
+</g>
+<g id="logo">
+<use xlink:href="#path1_stroke" transform="translate(11.2 -85.7)" fill="#FFFFFF"/>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 288 0L -1.2207e-05 0L -1.2207e-05 288L 288 288L 288 0Z"/>
+<path id="path1_stroke" d="M 72.4 -7.62939e-07L 76.6355 -5.46695C 74.1422 -7.39862 70.6578 -7.39862 68.1645 -5.46695L 72.4 -7.62939e-07ZM 144.9 21.3L 151.815 21.4125C 151.845 19.5591 151.13 17.7711 149.83 16.4498C 148.53 15.1284 146.754 14.3843 144.9 14.3843L 144.9 21.3ZM 72.4 169.4L 68.5688 175.157C 70.8895 176.702 73.9105 176.702 76.2313 175.157L 72.4 169.4ZM 0 21.3L 0 14.3843C -1.85365 14.3843 -3.62972 15.1284 -4.92975 16.4498C -6.22977 17.7711 -6.94493 19.5591 -6.91479 21.4125L 0 21.3ZM 68.1645 5.46695C 99.5499 29.7826 135.462 28.2157 144.9 28.2157L 144.9 14.3843C 135.138 14.3843 103.85 15.6174 76.6355 -5.46695L 68.1645 5.46695ZM 137.985 21.1875C 137.464 53.3107 136.105 75.9691 133.501 92.7573C 130.933 109.367 127.26 119.322 122.533 126.314C 117.743 133.578 111.735 137.889 102.832 143.208C 93.8514 148.587 82.5075 154.381 68.5688 163.643L 76.2313 175.157C 89.4926 166.319 100.549 160.688 109.934 155.076C 119.396 149.405 127.719 143.159 133.992 134.061C 140.327 124.69 144.448 112.476 147.17 94.8708C 149.858 77.4434 151.286 53.8393 151.815 21.4125L 137.985 21.1875ZM 76.2313 163.643C 62.2932 154.381 50.957 148.588 41.9868 143.21C 33.0938 137.892 27.0986 133.583 22.3207 126.32C 17.6046 119.329 13.9431 109.373 11.3835 92.7609C 8.7891 75.9718 7.43568 53.3117 6.91479 21.1875L -6.91479 21.4125C -6.38568 53.8383 -4.96409 77.4407 -2.2866 94.8672C 0.425666 112.47 4.53296 124.684 10.8543 134.055C 17.1139 143.154 25.425 149.402 34.8789 155.075C 44.2556 160.687 55.3068 166.319 68.5688 175.157L 76.2313 163.643ZM 0 28.2157C 9.34002 28.2157 45.2509 29.782 76.6355 5.46695L 68.1645 -5.46695C 40.9491 15.618 9.65998 14.3843 0 14.3843L 0 28.2157Z"/>
+</defs>
+</svg>

src/components/Header/header.scss

@@ -24,5 +24,46 @@
   &__navigation {
     margin: 0 .75rem;
   }
+
+  &--inactive {
+    opacity: .5;
+  }
+
+  &__dialog {
+    @extend %col-nowrap;
+    border-radius: .875rem;
+    border: 1px solid $mercury-gray;
+    margin: 1rem .75rem 0 .75rem;
+    padding: 1.5rem 1rem;
+    text-align: center;
+    display: none;
+
+    &__description {
+      font-size: .75rem;
+      color: $dove-gray;
+      margin-top: .4rem;
+    }
+
+    &--disconnected {
+      display: inherit;
+    }
+  }
+
+  &__download {
+    @extend %row-nowrap;
+    justify-content: center;
+    margin-top: 1rem;
+
+    img {
+      height: 3.5rem;
+      width: 3.5rem;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    img + img {
+      margin-left: 1rem;
+    }
+  }
 }
 

src/components/Header/index.js

 import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import UAParser from 'ua-parser-js';
 import Logo from '../Logo';
+import CipherLogo from '../../assets/images/cipher-browser-logo.svg';
+import TrustLogo from '../../assets/images/trust-wallet-logo.svg';
 import Web3Status from '../Web3Status';
 
 import "./header.scss";
 import NavigationTabs from "../NavigationTabs";
 
-export default function Header (props) {
+const links = {
+  cipher: {
+    android: 'https://play.google.com/store/apps/details?id=com.cipherbrowser.cipher&hl=en_US',
+    ios: 'https://itunes.apple.com/us/app/cipher-browser-ethereum/id1294572970?mt=8',
+  },
+  trust: {
+    android: 'https://play.google.com/store/apps/details?id=com.wallet.crypto.trustapp&hl=en_US',
+    ios: 'https://itunes.apple.com/us/app/trust-ethereum-wallet/id1288339409?mt=8',
+  },
+};
+
+const ua = new UAParser(window.navigator.userAgent);
+
+function getTrustLink() {
+  const os = ua.getOS();
+
+  if (os.name === 'Android') {
+    return links.trust.android;
+  }
+
+  if (os.name === 'iOS') {
+    return links.trust.ios;
+  }
+}
+
+function getCipherLink() {
+  const os = ua.getOS();
+
+  if (os.name === 'Android') {
+    return links.cipher.android;
+  }
+
+  if (os.name === 'iOS') {
+    return links.cipher.ios;
+  }
+}
+
+function Header (props) {
   return (
     <div className="header">
-      <div className="header__top">
+      <div
+        className={classnames('header__dialog', {
+          'header__dialog--disconnected': !props.isConnected,
+        })}
+      >
+        <div>No Ethereum wallet found</div>
+        <div className="header__dialog__description">Please visit us from a web3-enabled mobile browser, such as Trust Wallet and Cipher Browser.</div>
+        <div className="header__download">
+          <img src={CipherLogo} onClick={() => window.open(getCipherLink(), '_blank')} />
+          <img src={TrustLogo} onClick={() => window.open(getTrustLink(), '_blank')} />
+        </div>
+      </div>
+      <div
+        className={classnames('header__top', {
+          'header--inactive': !props.isConnected,
+        })}
+      >
         <Logo />
         <div className="header__center-group">
           <span className="header__title">Uniswap</span>
         </div>
         <Web3Status address="0xcf1de0b4d1e492080336909f70413a5f4e7eec62" isConnected />
       </div>
-      <NavigationTabs className="header__navigation" />
+      <NavigationTabs
+        className={classnames('header__navigation', {
+          'header--inactive': !props.isConnected,
+        })}
+      />
     </div>
   )
 }
+
+Header.propTypes = {
+  web3: PropTypes.object.isRequired,
+  currentAddress: PropTypes.string,
+  isConnected: PropTypes.bool.isRequired,
+};
+
+export default connect(
+  state => ({
+    web3: state.web3.web3,
+    currentAddress: state.web3.currentAddress,
+    isConnected: !!(state.web3.web3 && state.web3.currentAddress),
+  }),
+)(Header)
\ No newline at end of file

src/pages/Pool/index.js

@@ -71,7 +71,13 @@ class Pool extends Component {
             <div className="pool__last-summary-text">You will receive between {b`66%`} and {b`67%`} of the BAT/ETH pool tokens.</div>
           </div>
         </div>
-        <button className="swap__cta-btn">Add Liquidity</button>
+        <button
+          className={classnames('swap__cta-btn', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
+          Add Liquidity
+        </button>
       </div>
     );
   }

src/pages/Send/index.js

@@ -61,7 +61,14 @@ class Send extends Component {
             <div>You will receive between <span className="swap__highlight-text">12.80</span> and <span className="swap__highlight-text">12.83 BAT</span></div>
           </div>
         </div>
-        <button className="swap__cta-btn">Send</button>
+        <button
+          className={classnames('swap__cta-btn', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
+          Send
+        </button>
+
       </div>
     );
   }

src/pages/Swap/index.js

@@ -54,7 +54,13 @@ class Swap extends Component {
             <div>You will receive between <span className="swap__highlight-text">12.80</span> and <span className="swap__highlight-text">12.83 BAT</span></div>
           </div>
         </div>
-        <button className="swap__cta-btn">Swap</button>
+        <button
+          className={classnames('swap__cta-btn', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
+          Swap
+        </button>
       </div>
     );
   }

yarn.lock

@@ -10855,6 +10855,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+ua-parser-js@^0.7.18:
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"