diff --git a/src/assets/images/brave-logo.png b/src/assets/images/brave-logo.png new file mode 100644 index 0000000000..afe6600bdc Binary files /dev/null and b/src/assets/images/brave-logo.png differ diff --git a/src/assets/images/metamask-logo.png b/src/assets/images/metamask-logo.png new file mode 100644 index 0000000000..85714ea290 Binary files /dev/null and b/src/assets/images/metamask-logo.png differ diff --git a/src/components/Header/index.js b/src/components/Header/index.js index cf680ab5a6..01d0db9507 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -6,6 +6,8 @@ import UAParser from 'ua-parser-js'; import Logo from '../Logo'; import CoinbaseWalletLogo from '../../assets/images/coinbase-wallet-logo.png'; import TrustLogo from '../../assets/images/trust-wallet-logo.svg'; +import BraveLogo from '../../assets/images/brave-logo.png'; +import MetamaskLogo from '../../assets/images/metamask-logo.png'; import Web3Status from '../Web3Status'; import "./header.scss"; @@ -20,6 +22,13 @@ const links = { 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', }, + metamask: { + chrome: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', + }, + brave: { + android: 'https://play.google.com/store/apps/details?id=com.brave.browser', + ios: 'https://itunes.apple.com/us/app/brave-browser-fast-adblocker/id1052879175', + }, }; const ua = new UAParser(window.navigator.userAgent); @@ -48,6 +57,24 @@ function getCoinbaseWalletLink() { } } +function getBraveLink() { + const os = ua.getOS(); + + if (os.name === 'Mac OS') { + return links.brave.ios; + } + + return links.brave.android; +} + +function getMetamaskLink() { + return links.metamask.chrome; +} + +function isMobile() { + return ua.getDevice().type === 'mobile'; +} + function Header (props) { return (
@@ -58,11 +85,29 @@ function Header (props) { >
No Ethereum wallet found
- Please visit us from a web3-enabled mobile browser, such as Trust Wallet and Coinbase Wallet. + { + isMobile() + ? 'Please visit us from a web3-enabled mobile browser, such as Trust Wallet and Cipher Browser.' + : 'Please visit us after installing Metamask on Chrome or Brave.' + + }
- window.open(getCoinbaseWalletLink(), '_blank')} /> - window.open(getTrustLink(), '_blank')} /> + { + isMobile() + ? ( + [ + window.open(getCoinbaseWalletLink(), '_blank')} />, + window.open(getTrustLink(), '_blank')} /> + ] + ) + : ( + [ + window.open(getMetamaskLink(), '_blank')} />, + window.open(getBraveLink(), '_blank')} /> + ] + ) + }