41 |
55 |
43 | ({
50 | transform: `translateX(${styles.offset}%)`,
51 | })}
52 | />
53 |
54 | {description}
) 20 | } 21 | 22 | onClose = (e) => { 23 | e.preventDefault(); 24 | this.props.onClose(this.props.data.url); 25 | } 26 | 27 | 28 | render(){ 29 | const { size, closable, data: { name, description, url, icon }} = this.props; 30 | return ( 31 |
34 |
35 | 
40 |
56 | );
57 | }
58 | }
--------------------------------------------------------------------------------
/src/components/ExploreDapps/DappCategory.css:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | .dapp-category-container{
5 | display: flex;
6 | flex: 1;
7 | min-width: 50%;
8 | }
9 |
10 | .dapp-category{
11 | display: flex;
12 | flex: 1;
13 | height: 64px;
14 | background: #FFFFFF;
15 | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
16 | border-radius: 8px;
17 | text-align: center;
18 | align-items: center;
19 | min-width: 150px;
20 | margin: 7px;
21 | padding-left: 15px;
22 | padding-right: 8px;
23 | }
24 |
25 | .dapp-category:nth-child(even) {
26 | margin-right: 0px;
27 | }
28 |
29 | .dapp-category-icon {
30 | font-size: 32px;
31 | font-size: 32px;
32 | line-height: 32px;
33 | width: 32px;
34 | height: 32px;
35 | }
36 |
37 | .dapp-category-name {
38 | display: flex;
39 | font-style: normal;
40 | font-weight: normal;
41 | font-size: 14px;
42 | color: #24292E;
43 | padding: 8px;
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/src/components/ExploreDapps/DappCategory.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Link } from "react-router-dom";
3 |
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5 | import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
6 |
7 | import './DappCategory.css';
8 |
9 | export default class DappCategory extends Component {
10 | trackEventOpenDappCategory = () => {
11 | trackEvent(ANALYTICS_EVENT_OPTS.OPEN_DAPP_CATEGORY, {
12 | 'dapp_category_name' : this.props.data.name,
13 | });
14 | }
15 |
16 | render() {
17 | const { name, icon, color } = this.props.data;
18 | const url = `/${name.toLowerCase().replace(" ", "-")}`;
19 | return (
20 | // eslint-disable-next-line jsx-a11y/anchor-is-valid
21 |
26 |
41 |
45 |
46 | { closable && (
47 |
53 | )
54 | }
55 | {name}
42 | { description ? this.renderDescription(description) : null} 43 | {url} 44 |
27 |
34 |
35 | );
36 | }
37 | }
--------------------------------------------------------------------------------
/src/components/ExploreDapps/index.css:
--------------------------------------------------------------------------------
1 | .explore-dapps {
2 | display: flex;
3 | flex: 1;
4 | flex-direction: row;
5 | padding-bottom: 18px;
6 | flex-wrap: wrap;
7 | }
--------------------------------------------------------------------------------
/src/components/ExploreDapps/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import DappCategory from './DappCategory';
3 | import allDapps from '../../data/all-dapps';
4 | import './index.css';
5 |
6 | export default class ExploreDapps extends Component {
7 | render() {
8 | return (
9 |
10 | {
11 | allDapps.map( (dapp) => (
12 |
19 | );
20 | }
21 | }
--------------------------------------------------------------------------------
/src/components/Favorites/index.css:
--------------------------------------------------------------------------------
1 | .favorites-empty {
2 | min-height: 255px;
3 | display: flex;
4 | flex: 1;
5 | align-items: center;
6 | justify-content: center;
7 | }
8 |
9 | .favorites {
10 | width: 100%
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/Favorites/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { getHost } from '../../util/browser';
3 | import Dapp from '../Dapp';
4 | import './index.css';
5 |
6 | export default class Favorites extends Component {
7 | state = {
8 | favorites: [],
9 | }
10 |
11 | componentDidMount() {
12 | if (window.__mmFavorites) {
13 | this.setState({ favorites: window.__mmFavorites });
14 | }
15 |
16 | window.addEventListener('metamask_onHomepageScriptsInjected', () => {
17 | if (window.__mmFavorites && JSON.stringify(this.state.favorites) !== JSON.stringify(window.__mmFavorites)) {
18 | this.setState({ favorites: window.__mmFavorites });
19 | }
20 | });
21 |
22 | }
23 |
24 | onClose = async (url) => {
25 | const { favorites } = await window.ethereum.send('metamask_removeFavorite', [url]);
26 | this.setState({ favorites: favorites.reverse() });
27 | }
28 |
29 | renderFavorites() {
30 | return (
31 |
32 | {
33 | this.state.favorites.map((dapp, i) => (
34 |
49 | );
50 | }
51 |
52 | renderEmpty() {
53 | return (
54 |
55 |
57 | );
58 | }
59 |
60 | render() {
61 | if (!this.state.favorites || !this.state.favorites.length) {
62 | return this.renderEmpty();
63 | }
64 |
65 | return this.renderFavorites()
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/FeaturedDappsCarousel/FeaturedDapp.css:
--------------------------------------------------------------------------------
1 |
2 | .featured-dapp {
3 | /* White */
4 | display: flex;
5 | flex:1;
6 | align-items: center;
7 | flex-direction: column;
8 | padding-right: 20px;
9 | box-sizing: content-box;
10 | text-decoration: none;
11 | }
12 |
13 | .featured-dapp:active{
14 | opacity: 0.5
15 | }
16 |
17 | .featured-dapp-box{
18 | height: 65px;
19 | width: 65px;
20 | background: #FFFFFF;
21 | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
22 | border-radius: 8px;
23 | text-align: center;
24 | align-items: center;
25 | justify-content: center;
26 | }
27 |
28 | .featured-dapp-logo {
29 | height: 38px;
30 | width: 38px;
31 | margin-top: 13px;
32 | }
33 |
34 | .featured-dapp-name {
35 | margin-top: 12px;
36 | width: 65px;
37 | font-style: normal;
38 | font-weight: normal;
39 | font-size: 12px;
40 | line-height: 17px;
41 | text-align: center;
42 | color: #000000;
43 | padding-bottom: 0px;
44 | margin-bottom: 0px;
45 | }
46 |
47 |
48 |
--------------------------------------------------------------------------------
/src/components/FeaturedDappsCarousel/FeaturedDapp.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import './FeaturedDapp.css';
3 | import{trackEvent, ANALYTICS_EVENT_OPTS} from '../../util/analytics';
4 |
5 | export default class FeaturedDapp extends Component {
6 |
7 | track = (e) => {
8 | trackEvent(ANALYTICS_EVENT_OPTS.CLICKS_FEATURED_DAPP, {
9 | 'Dapp' : this.props.data.shortName,
10 | 'Url' : this.props.data.url,
11 | 'Position': this.props.position + 1
12 | });
13 | window.location.href = this.props.data.url;
14 | }
15 |
16 | render(){
17 | const { shortName, url, icon } = this.props.data;
18 | return (
19 |
24 |
25 | You have no favorites yet
56 |{shortName}
32 | 33 | 34 | ); 35 | } 36 | } -------------------------------------------------------------------------------- /src/components/FeaturedDappsCarousel/index.css: -------------------------------------------------------------------------------- 1 | .featured-dapps{ 2 | margin-bottom: 30px; 3 | } 4 | .featured-dapps-title{ 5 | padding-left: 16px; 6 | padding-right: 16px; 7 | font-size: 0.9rem; 8 | text-align: left; 9 | color: #6A737D; 10 | margin-bottom: 5px; 11 | font-weight: 500; 12 | } 13 | 14 | .featured-dapps-carousel-wrapper { 15 | overflow-y: hidden; 16 | overflow-x: scroll; 17 | height: 102px; 18 | width: 100%; 19 | } 20 | 21 | .featured-dapps-carousel { 22 | display: flex; 23 | flex: 1; 24 | flex-direction: row; 25 | overflow-x: scroll; 26 | padding-top: 10px; 27 | padding-left: 16px; 28 | padding-right: 16px; 29 | padding-bottom: 20px; 30 | -webkit-overflow-scrolling: touch; 31 | box-sizing: content-box; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/FeaturedDappsCarousel/index.js: -------------------------------------------------------------------------------- 1 | // import React, { Component } from 'react' 2 | // import FeaturedDapp from './FeaturedDapp'; 3 | // import featuredDapps from '../../data/featured-dapps'; 4 | 5 | // import './index.css'; 6 | 7 | 8 | // export default class FeaturedDappsCarousel extends Component { 9 | // render(){ 10 | // return ( 11 | //
12 | //
27 | // );
28 | // }
29 | // }
--------------------------------------------------------------------------------
/src/components/Header/index.css:
--------------------------------------------------------------------------------
1 | .header {
2 | z-index: 0;
3 | height: 170px;
4 | display: flex;
5 | flex: 1;
6 | background: #190066;
7 | margin-bottom: 55px;
8 | position: relative;
9 | align-items: center;
10 | justify-content: center;
11 | text-align: center;
12 |
13 | }
14 |
15 | .header .bg-img{
16 | height: 170px;
17 | width: 100%;
18 | margin-top: 85px;
19 | }
20 |
21 | .header .logo-img{
22 | background-color: transparent;
23 | position: absolute;
24 | height: 66px;
25 | width: 102px;
26 | z-index: 999999999;
27 | align-self: center;
28 | justify-content: center;
29 | margin-top: 10px;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import BgImage from '../../images/bg-img.svg';
3 | import './index.css';
4 |
5 | export default class Header extends Component {
6 | render(){
7 | return (
8 | Featured Projects
13 | //
14 | //
26 | //
15 | // {
16 | // featuredDapps.map( (dapp, position) => (
17 | //
25 | //
9 | 
10 |
11 | );
12 | }
13 | }
--------------------------------------------------------------------------------
/src/components/Navbar/index.css:
--------------------------------------------------------------------------------
1 | .navbar {
2 | background-color: #ffffff;
3 | display: flex;
4 | flex: 1;
5 | flex-direction: row;
6 | margin-bottom: 15px;
7 | }
8 | .navbar-back {
9 | position: absolute;
10 | margin: 16px;
11 | border: 0px;
12 | background-color: transparent;
13 | padding-top: 5px;
14 | padding-bottom: 5px;
15 | }
16 |
17 | .navbar h1{
18 | margin-top: 18px;
19 | display: flex;
20 | flex: 1;
21 | font-style: normal;
22 | font-weight: normal;
23 | font-size: 18px;
24 | line-height: 25px;
25 | align-items: center;
26 | justify-content: center;
27 | text-align: center;
28 | color: #000000;
29 | }
--------------------------------------------------------------------------------
/src/components/Navbar/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Link } from 'react-router-dom';
3 |
4 | import backIcon from '../../images/back-icon.svg';
5 |
6 | import './index.css';
7 |
8 | export default class Navbar extends Component {
9 | render(){
10 | const { title } = this.props;
11 | return (
12 |
13 |
17 | 
18 |
19 |
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/ScrollToTop/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react'
2 | import { withRouter } from 'react-router-dom';
3 |
4 | class ScrollToTop extends Component {
5 | componentDidUpdate(prevProps) {
6 | if (this.props.location.pathname !== prevProps.location.pathname) {
7 | window.scrollTo(0, 0);
8 | }
9 | }
10 |
11 | render() {
12 | return this.props.children;
13 | }
14 | }
15 |
16 | export default withRouter(ScrollToTop);
17 |
--------------------------------------------------------------------------------
/src/components/Tabs/Tab.css:
--------------------------------------------------------------------------------
1 | .tab-list-item {
2 | list-style: none;
3 | margin-bottom: -1px;
4 | padding: 0.5rem 0.75rem;
5 | color: #6A737D;
6 | font-size: 14px;
7 | display: flex;
8 | flex: 1;
9 | justify-content: center;
10 | }
11 |
12 | .tab-list-active {
13 | border-bottom: 2px solid #037DD6;
14 | color: #037DD6;
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/Tabs/Tab.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import './Tab.css';
4 |
5 | export default class Tab extends Component {
6 | static propTypes = {
7 | activeTab: PropTypes.string.isRequired,
8 | label: PropTypes.string.isRequired,
9 | onClick: PropTypes.func.isRequired,
10 | };
11 |
12 | onClick = () => {
13 | const { label, onClick } = this.props;
14 | onClick(label);
15 | }
16 |
17 | render() {
18 | const {
19 | onClick,
20 | props: {
21 | activeTab,
22 | label,
23 | },
24 | } = this;
25 |
26 | let className = 'tab-list-item';
27 |
28 | if (activeTab === label) {
29 | className += ' tab-list-active';
30 | }
31 |
32 | return (
33 | {title}
20 |
44 |
67 | );
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/TakeATour/index.css:
--------------------------------------------------------------------------------
1 | .take-a-tour-wrapper {
2 | position: relative;
3 | margin-left: 8px;
4 | margin-right: 8px;
5 | }
6 |
7 | .take-a-tour {
8 | display: flex;
9 | flex: 1;
10 | height: 48px;
11 | background: #FFFFFF;
12 | box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
13 | border-radius: 8px;
14 | text-align: center;
15 | align-items: center;
16 | justify-content: center;
17 | flex-direction: row;
18 | padding: 16px;
19 | }
20 |
21 | .take-a-tour-logo {
22 | margin-right: 16px;
23 | width: 38px;
24 | height: 38px;
25 | padding: 5px;
26 | box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
27 | border-radius: 8px;
28 | }
29 |
30 | .take-a-tour-content {
31 | display: flex;
32 | flex: 1;
33 | flex-direction: column;
34 | }
35 |
36 |
37 | .take-a-tour-content h3{
38 | display: flex;
39 | flex: 1;
40 | color: #24292E;
41 | font-family: Roboto;
42 | font-style: normal;
43 | font-weight: 500;
44 | font-size: 16px;
45 | line-height: 23px;
46 | margin-bottom: 5px;
47 | }
48 |
49 | .take-a-tour-content p{
50 | display: flex;
51 | flex: 1;
52 | font-family: Roboto;
53 | font-style: normal;
54 | font-weight: normal;
55 | font-size: 10px;
56 | line-height: 14px;
57 | color: #24292E;
58 | text-align: left;
59 | margin-top: 0px;
60 | }
61 |
62 | .take-a-tour-close {
63 | width: 16px;
64 | height: 16px;
65 | padding: 5px;
66 | position: absolute;
67 | top: 5px;
68 | right: 0;
69 | text-align: center;
70 | background-color: transparent;
71 | display: block;
72 | box-sizing: content-box;
73 | border: 0px;
74 | }
--------------------------------------------------------------------------------
/src/components/TakeATour/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import logo from '../../images/logo.svg';
3 | import closeIcon from '../../images/close-icon.svg';
4 | import './index.css';
5 |
6 | export default class TakeATour extends Component {
7 | state = {
8 | hideTutorialBanner: localStorage.getItem('hideTutorialBanner')
9 | }
10 |
11 | hideBanner = () => {
12 | localStorage.setItem('hideTutorialBanner', 'true');
13 | this.setState({hideTutorialBanner: true});
14 | }
15 |
16 | showTutorial = (e) => {
17 | e.preventDefault();
18 | window.ethereum.send('metamask_showTutorial');
19 | }
20 |
21 | render(){
22 | if (this.state.hideTutorialBanner) return null;
23 |
24 | return (
25 | -
45 | {children.map((child) => {
46 | const { label, hide } = child.props;
47 | if(hide) return null
48 |
49 | return (
50 |
60 | {children.map((child) => {
61 | if(child.props.hide) return null
62 | if (child.props.label !== activeTab) return undefined;
63 | return child.props.children;
64 | })}
65 |
66 |
26 |
31 | 
32 |
45 |
46 | );
47 | }
48 | }
--------------------------------------------------------------------------------
/src/data/all-dapps.js:
--------------------------------------------------------------------------------
1 | import { library } from '@fortawesome/fontawesome-svg-core'
2 | import { isIOS } from 'react-device-detect';
3 | import { faCreditCard,faDice, faCommentAlt, faMoneyBillWave, faNewspaper, faWrench, faExchangeAlt, faStore } from '@fortawesome/free-solid-svg-icons'
4 | library.add(faCreditCard, faDice, faCommentAlt, faMoneyBillWave, faNewspaper, faWrench, faExchangeAlt, faStore)
5 |
6 | const categories = [
7 | {
8 | name: 'Decentralized finance',
9 | displayIos: false,
10 | icon: 'money-bill-wave',
11 | color: '#5cd879',
12 | dapps: [
13 | {
14 | name: 'Compound',
15 | url: 'https://app.compound.finance/',
16 | description: 'Earn interest on your ETH',
17 | icon: './images/dapps/compound.finance.png'
18 | },
19 | {
20 | name: 'MakerDAO CDP',
21 | url: 'https://oasis.app/',
22 | description: 'Trade, borrow, and save using Dai',
23 | icon: './images/dapps/cdp.makerdao.com.png'
24 | },
25 | {
26 | name: 'PoolTogether',
27 | url: 'https://app.pooltogether.com/',
28 | description: 'A prize-linked savings account. By saving money you have a chance to win prizes',
29 | icon: './images/dapps/pooltogether.us.png'
30 | },
31 | {
32 | name: 'DeFi Saver',
33 | url: 'https://defisaver.com/',
34 | description: 'One-stop management solution for DeFi protocols',
35 | icon: './images/dapps/defi_saver.png'
36 | },
37 | {
38 | name: 'pTokens',
39 | url: 'https://dapp.ptokens.io/',
40 | description: 'Make your crypto compatible with any blockchain!',
41 | icon: './images/dapps/pTokens.png'
42 | },
43 | {
44 | name: 'Zapper',
45 | url: 'https://zapper.fi',
46 | description: 'Manage your DeFi assets and liabilities in one simple interface',
47 | icon: './images/dapps/zapper.svg'
48 | },
49 | {
50 | name: 'Yearn',
51 | url: 'https://yearn.finance/',
52 | description: 'An ecosystem of aggregators that utilize lending services to optimize your token lending',
53 | icon: './images/dapps/yearn.finance.png'
54 | },
55 | {
56 | name: 'Aave',
57 | url: 'https://aave.com/',
58 | description: 'An open-source, non-custodial protocol enabling the creation of money markets',
59 | icon: './images/dapps/aave.svg'
60 | },
61 | {
62 | name: 'Zerion',
63 | url: 'https://zerion.io/',
64 | description: 'Zerion is the easiest way to build and manage your entire DeFi portfolio from one place',
65 | icon: './images/dapps/zerion.io.png'
66 | },
67 | {
68 | name: 'Token Sets',
69 | url: 'https://www.tokensets.com/',
70 | description: 'Manage your crypto porfolio',
71 | icon: './images/dapps/tokensets.com.png'
72 | },
73 | {
74 | name: 'Pickle Finance',
75 | url: 'https://pickle.finance',
76 | description: 'Stabilize stablecoins',
77 | icon: './images/dapps/pickle.finance.jpeg'
78 | },
79 | {
80 | name: 'Nexus Mutual',
81 | url: 'https://nexusmutual.io/',
82 | description: 'A people-powered alternative to insurance',
83 | icon: './images/dapps/nexusmutual.io.png'
84 | },
85 | {
86 | name: 'Curve',
87 | url: 'https://www.curve.fi/',
88 | description: 'Creating deep on-chain liquidity using advanced bonding curves',
89 | icon: './images/dapps/curve.fi.png'
90 | },
91 | ],
92 | },
93 | {
94 | name: 'Decentralized exchanges',
95 | displayIos: false,
96 | icon: 'exchange-alt',
97 | color: '#bbb9f3',
98 | dapps: [
99 | {
100 | name: 'Uniswap',
101 | url: 'https://uniswap.exchange/',
102 | description: 'Swap and trade tokens',
103 | icon: './images/dapps/uniswap.exchange.png'
104 | },
105 | {
106 | name: 'dYdX',
107 | url: 'https://trade.dydx.exchange/',
108 | description: 'A decentralized and non-custodial trading platform offering perpetual margin, and spot trading',
109 | icon: './images/dapps/dydx.png'
110 | },
111 | {
112 | name: 'Kyber Swap',
113 | url: 'https://kyberswap.com/',
114 | description: 'A simple way to exchange tokens',
115 | icon: './images/dapps/kyber.network.png'
116 | },
117 | {
118 | name: 'Tokenlon',
119 | url: 'https://tokenlon.im/',
120 | description: 'Tokenlon DEX, powered by 0x protocol',
121 | icon: './images/dapps/tokenlon.png'
122 | },
123 | {
124 | name: '1inch',
125 | url: 'https://1inch.exchange',
126 | description: '1inch is a DEX aggregator with the best DEX prices and single point of entry for DeFi',
127 | icon: './images/dapps/1inch.svg'
128 | },
129 | {
130 | name: 'Totle Swap',
131 | url: 'https://totle.exchange',
132 | description: 'Swap any ERC-20 token at the best price',
133 | icon: './images/dapps/totle.jpeg'
134 | },
135 | {
136 | name: 'Radar Relay',
137 | url: 'https://relay.radar.tech/',
138 | description: 'Simple and secure wallet to wallet trading with the best prices in DeFi',
139 | icon: './images/dapps/radar_relay.png'
140 | },
141 | {
142 | name: 'AirSwap',
143 | url: 'https://instant.airswap.io/',
144 | description: 'Trade Tokens Easily, Securely, & Without Trading Fees',
145 | icon: './images/dapps/instant.airswap.io.png'
146 | },
147 | {
148 | name: 'Balancer',
149 | url: 'https://balancer.exchange/#/swap',
150 | description: 'Swap ERC20 tokens trustlessly across all Balancer liquidity pools.balancer.exchange',
151 | icon: './images/dapps/balancer.exchange.png'
152 | },
153 | {
154 | name: 'Matcha',
155 | url: 'https://matcha.xyz/',
156 | description: 'Simple crypto trading for everyone',
157 | icon: './images/dapps/matcha.png'
158 | },
159 | ]
160 | },
161 | {
162 | name: 'Art & collectibles',
163 | displayIos: false,
164 | icon: 'store',
165 | color: '#F29D62',
166 | dapps: [
167 | {
168 | name: 'miime',
169 | url: 'https://miime.io/',
170 | description: 'miime is an NFT marketplace catering to blockchain gamers in Japan and across the world',
171 | icon: './images/dapps/miime.png'
172 | },
173 | {
174 | name: 'Mintable',
175 | url: 'https://mintable.app',
176 | description: 'Mintable is a next generation NFT marketplace, the easiest place to trade NFTs and create your own.',
177 | icon: './images/dapps/mintable.png'
178 | },
179 | {
180 | name: 'OpenSea',
181 | url: 'https://opensea.io/',
182 | description: 'Buy, sell, and discover rare digital items',
183 | icon: './images/dapps/opensea.io.png'
184 | },
185 | {
186 | name: 'KnownOrigin',
187 | url: 'https://knownorigin.io/',
188 | description: 'Discover and collect rare digital artwork',
189 | icon: './images/dapps/known_origin.png'
190 | },
191 | {
192 | name: 'Mintbase',
193 | url: 'https://mintbase.io',
194 | description: 'Leading non-fungible token creation tool and marketplace',
195 | icon: './images/dapps/mintbase.png'
196 | },
197 | {
198 | name: 'Axie Infinity',
199 | url: 'https://axieinfinity.com/#',
200 | description: 'Collect and raise fantasy creatures called Axie',
201 | icon: './images/dapps/axieinfinity.com.png'
202 | },
203 | {
204 | name: 'Sorare',
205 | url: 'https://sorare.com/',
206 | description: 'Global Fantasy Football. Collect limited edition digital collectibles',
207 | icon: './images/dapps/sorare.jpg'
208 | },
209 | {
210 | name: 'Clovers Network',
211 | url: 'https://clovers.network',
212 | description: 'Discover, collect & trade cryptographic icons',
213 | icon: './images/dapps/clovers.png'
214 | },
215 | {
216 | name: 'CryptoKitties',
217 | url: 'https://www.cryptokitties.co/',
218 | description: 'Collect, breed and trade unique CryptoKitties',
219 | icon: './images/dapps/cryptokitties.co.png'
220 | },
221 | {
222 | name: 'Super Rare',
223 | url: 'https://superrare.co/',
224 | description: 'Discover and collect digital artworks',
225 | icon: './images/dapps/superrare.co.jpg'
226 | },
227 | {
228 | name: 'Rarible',
229 | url: 'https://rarible.com/',
230 | description: 'Create and sell digital collectibles',
231 | icon: './images/dapps/rarible.com.jpg'
232 | },
233 | {
234 | name: 'Makersplace',
235 | url: 'https://makersplace.com/',
236 | description: 'Collect truly rare digital artworks',
237 | icon: './images/dapps/makersplace.com.jpg'
238 | },
239 | {
240 | name: 'My Crypto Heroes',
241 | url: 'https://www.mycryptoheroes.net/home',
242 | description: 'Collect and battle heroes',
243 | icon: './images/dapps/my_crypto_heroes.jpg'
244 | },
245 | {
246 | name: 'CryptoDozer Marketplace',
247 | url: 'https://market.playdapp.io',
248 | description: 'From sales to purchases, marketplace is reliable and fast',
249 | icon: './images/dapps/cryptodozer.io.png'
250 | },
251 | {
252 | name: 'Brave Frontier Heroes',
253 | url: 'https://bravefrontierheroes.com',
254 | description: 'Use heroes in turn-based quests and battles.',
255 | icon: './images/dapps/brave_frontier_heroes.png'
256 | },
257 | {
258 | name: 'Blockchain Cuties',
259 | url: 'https://blockchaincuties.com/',
260 | description: 'Cuties are cats, dogs, and bears that go on adventures.',
261 | icon: './images/dapps/blockchaincuties.com.png'
262 | },
263 | {
264 | name: 'F1 Delta Time',
265 | url: 'https://www.f1deltatime.com/',
266 | description: 'Own F1 Delta collectibles & stake to earn',
267 | icon: './images/dapps/f1deltatime.com.png'
268 | },
269 | {
270 | name: 'MegaCryptoPolis',
271 | url: 'https://mcp3d.com',
272 | description: 'Collect land and build a blockchain city.',
273 | icon: './images/dapps/megacryptopolis.png'
274 | },
275 | ]
276 | },
277 | {
278 | name: 'Earn crypto',
279 | displayIos: false,
280 | icon: 'credit-card',
281 | color: '#1098FC',
282 | dapps: [
283 | {
284 | name: 'Gitcoin',
285 | url: 'https://gitcoin.co/',
286 | description: 'Get paid in crypto for working on open source projects',
287 | icon: './images/dapps/gitcoin.co.png'
288 | },
289 | {
290 | name: 'Local Ethereum',
291 | url: 'https://localethereum.com/',
292 | description: 'Get ETH peer-to-peer in over 130 countries',
293 | icon: './images/dapps/localethereum.com.png'
294 | },
295 | {
296 | name: 'Cent',
297 | url: 'https://beta.cent.co/',
298 | description: 'Earn ETH by creating content',
299 | icon: './images/dapps/cent.co.png'
300 | },
301 | {
302 | name: 'Mirror',
303 | url: 'https://mirror.xyz',
304 | description: 'Mirror—a crypto native creative suite, with crowdfunding & publishing tools for creators. ',
305 | icon: './images/dapps/mirror.png'
306 | },
307 | ],
308 | },
309 | {
310 | name: 'Developer tools',
311 | displayIos: false,
312 | icon: 'wrench',
313 | color: '#838c96',
314 | dapps: [
315 | {
316 | name: 'Chainlist',
317 | url: 'https://chainlist.org/',
318 | description: 'A site for adding additional blockchains to your wallet',
319 | icon: './images/dapps/chainlist.png'
320 | },
321 | {
322 | name: 'Ethereum Name Service',
323 | url: 'https://app.ens.domains/',
324 | description: 'Have one name for all your cryptocurrency wallets, a decentralised website, & more',
325 | icon: './images/dapps/ens.jpg'
326 | },
327 | {
328 | name: 'Gnosis Safe Multisig',
329 | url: 'https://gnosis-safe.io/app/#/',
330 | description: 'Manage digital assets collectively',
331 | icon: './images/dapps/gnosis_safe.png'
332 | },
333 | {
334 | name: 'Microsponsors',
335 | url: 'https://microsponsors.io',
336 | description: 'Microsponsors is an auction house for tokenized Time',
337 | icon: './images/dapps/microsponsors.png'
338 | },
339 | {
340 | name: 'MythX',
341 | url: 'https://mythx.io/',
342 | description: 'Smart contract security service for Ethereum',
343 | icon: './images/dapps/mythx.png'
344 | },
345 | ]
346 | },
347 | {
348 | name: 'Social',
349 | displayIos: false,
350 | icon: 'comment-alt',
351 | color: '#F8CD45',
352 | dapps: [
353 | {
354 | name: '3Box',
355 | url: 'https://3box.io/hub',
356 | description: 'Social profiles for Ethereum',
357 | icon: './images/dapps/3box.io.png'
358 | },
359 | {
360 | name: 'Kauri',
361 | url: 'https://kauri.io/',
362 | description: 'Ethereum dev content in a decentralized knowledge base',
363 | icon: './images/dapps/kauri.io.png'
364 | },
365 | {
366 | name: 'FOAM',
367 | url: 'https://map.foam.space',
368 | description: 'Create, curate, and search a consensus-driven map',
369 | icon: './images/dapps/foam.space.png'
370 | },
371 | {
372 | name: 'Aragon',
373 | url: 'https://aragon.org/discover/',
374 | description: 'Create and manage communities, companies, organizations',
375 | icon: './images/dapps/aragon.org.png'
376 | },
377 | ],
378 | },
379 | {
380 | name: 'Markets',
381 | displayIos: false,
382 | icon: 'newspaper',
383 | color: '#FF849A',
384 | dapps: [
385 | {
386 | name: 'Popula',
387 | url: 'https://popula.com/',
388 | description: 'News powered by Civil and Ethereum',
389 | icon: './images/dapps/popula.com.png'
390 | },
391 | {
392 | name: 'CoinDesk',
393 | url: 'https://www.coindesk.com/',
394 | description: 'Blockchain news',
395 | icon: './images/dapps/coindesk.com.png'
396 | },
397 | {
398 | name: 'CoinGecko',
399 | url: 'https://www.coingecko.com/en',
400 | description: 'Cryptocurrency Prices & Market Capitalization',
401 | icon: './images/dapps/coingecko.com.png'
402 | },
403 | {
404 | name: 'DeCrypt',
405 | url: 'https://decrypt.co/',
406 | description: 'News about Ethereum, Bitcoin and Web3',
407 | icon: './images/dapps/decrypt.co.jpg'
408 | },
409 | {
410 | name: 'Defipulse',
411 | url: 'https://defipulse.com/',
412 | description: 'The analytics + rankings hub for DeFi',
413 | icon: './images/dapps/defipulse.com.png'
414 | },
415 | ],
416 | }
417 | ];
418 |
419 | // hide any of the above on iOS when displayIos is false
420 | const filtered = categories.filter(({ displayIos = true }) => !(isIOS && !displayIos));
421 |
422 | export default filtered;
423 |
--------------------------------------------------------------------------------
/src/data/featured-dapps.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | url: 'https://uniswap.exchange/',
4 | name: 'Uniswap Exchange',
5 | shortName: 'Uniswap',
6 | description: 'Uniswap is a protocol for automated token exchange on Ethereum.',
7 | icon: './images/dapps/uniswap.exchange.png'
8 | },
9 | {
10 | url: 'https://opensea.io/',
11 | name: 'OpenSea',
12 | shortName: 'OpenSea',
13 | description: 'The largest marketplace for crypto collectibles. Buy, sell, and discover rare digital items',
14 | icon: './images/dapps/opensea.io.png'
15 | },
16 | {
17 | url: 'https://compound.finance/',
18 | name: 'Compound',
19 | shortName: 'Compound',
20 | description: 'Supply assets to the Compound protocol and earn interest.',
21 | icon: './images/dapps/compound.finance.png'
22 | },
23 | {
24 | url: 'https://oasis.app/',
25 | name: 'MakerDAO CDP',
26 | shortName: 'MakerDAO',
27 | description: 'This is the place to generate DAI! Manage depositing of collateral and generation of DAI.',
28 | icon: './images/dapps/cdp.makerdao.com.png'
29 | },
30 | {
31 | url: 'https://3box.io/',
32 | name: '3Box',
33 | shortName: '3Box',
34 | description:
35 | 'Create a social profile for your Ethereum account to start building trust, connection, and community.',
36 | icon: './images/dapps/3box.io.png'
37 | },
38 | {
39 | url: 'https://mainnet.aragon.org/',
40 | name: 'Aragon',
41 | shortName: 'Aragon',
42 | description: 'Aragon lets you freely organize and collaborate without borders or intermediaries.',
43 | icon: './images/dapps/aragon.org.png'
44 | }
45 | ];
46 |
--------------------------------------------------------------------------------
/src/images/back-icon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/bg-img.svg:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/src/images/close-icon.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/images/logo-wordmark.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
33 |
37 |
38 |
44 | Take a tour
34 |Our new mobile app gives you the control to access the new decentralized web
35 | 36 |
31 |
39 | );
40 | }
41 | }
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import Header from '../components/Header/';
3 | import Tabs from '../components/Tabs/';
4 | import Autocomplete from '../components/Autocomplete/';
5 | // import FeaturedDappsCarousel from '../components/FeaturedDappsCarousel/';
6 | import ExploreDapps from '../components/ExploreDapps/';
7 | import Favorites from '../components/Favorites/';
8 | import TakeATour from '../components/TakeATour/';
9 | import{trackEvent, ANALYTICS_EVENT_OPTS} from '../util/analytics';
10 | import { isIOS } from 'react-device-detect';
11 |
12 | const isMobile = {
13 | Android: function () {
14 | return navigator.userAgent.match(/Android/i);
15 | },
16 | BlackBerry: function () {
17 | return navigator.userAgent.match(/BlackBerry/i);
18 | },
19 | iOS: function () {
20 | return navigator.userAgent.match(/iPhone|iPad|iPod/i);
21 | },
22 | Opera: function () {
23 | return navigator.userAgent.match(/Opera Mini/i);
24 | },
25 | Windows: function () {
26 | return navigator.userAgent.match(/IEMobile/i);
27 | },
28 | any: function () {
29 | return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
30 | }
31 | };
32 |
33 | export default class Home extends Component {
34 | componentDidMount() {
35 | trackEvent(ANALYTICS_EVENT_OPTS.IMPRESSION);
36 | }
37 |
38 | render() {
39 | return (
40 |
33 | { category.dapps.sort((a, b) => a.name.charCodeAt(0) - b.name.charCodeAt(0)).map( (dapp, i) => (
34 |
38 |
41 |
45 |
52 | {isMobile.any() ?
54 | );
55 | }
56 | }
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/util/analytics.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | export function trackEvent(action, data){
3 | if(mixpanel && window.__mmMetametrics && mixpanel.track){
4 | const category = action.category
5 | delete action.category
6 | mixpanel.track(
7 | category,
8 | {...action, ...data},
9 | );
10 | }
11 | }
12 |
13 | const generateOpt = (category, action, name) => ({ category, action, name });
14 |
15 | const NAMES = {
16 | DAPP: 'Dapp',
17 | FEATURED_DAPP: 'Featured Dapp',
18 | DAPP_CATEGORY: 'Dapp Category',
19 | HOMEPAGE_TAB: 'Homepage Tab',
20 | OPEN_FAVORITE: 'Opened Favorites',
21 | SEARCH_USED: 'Search Used',
22 | OPEN_DAPP_CATEGORY: 'Opened Dapp Category',
23 | OPEN_LISTED_DAPP: 'Opened Listed Dapp',
24 | };
25 |
26 | const ACTIONS = {
27 | CLICK: 'Click',
28 | IMPRESSION: 'Impression',
29 | };
30 |
31 | const CATEGORIES = {
32 | BROWSER_HOME: 'Browser Home',
33 | };
34 |
35 | export const ANALYTICS_EVENT_OPTS = {
36 | CLICKS_DAPP: generateOpt(
37 | CATEGORIES.BROWSER_HOME,
38 | ACTIONS.CLICK,
39 | NAMES.DAPP
40 | ),
41 | CLICKS_FEATURED_DAPP: generateOpt(
42 | CATEGORIES.BROWSER_HOME,
43 | ACTIONS.CLICK,
44 | NAMES.FEATURED_DAPP
45 | ),
46 | CLICKS_DAPP_CATEGORY: generateOpt(
47 | CATEGORIES.BROWSER_HOME,
48 | ACTIONS.CLICK,
49 | NAMES.DAPP_CATEGORY
50 | ),
51 | CLICKS_HOMEPAGE_TAB: generateOpt(
52 | CATEGORIES.BROWSER_HOME,
53 | ACTIONS.CLICK,
54 | NAMES.HOMEPAGE_TAB
55 | ),
56 | IMPRESSION: generateOpt(
57 | CATEGORIES.BROWSER_HOME,
58 | ACTIONS.IMPRESSION,
59 | ),
60 | CLICKS_FAVORITES_TAB: generateOpt(
61 | NAMES.OPEN_FAVORITE
62 | ),
63 | SEARCH_USED: generateOpt(
64 | NAMES.SEARCH_USED
65 | ),
66 | OPEN_DAPP_CATEGORY: generateOpt(
67 | NAMES.OPEN_DAPP_CATEGORY
68 | ),
69 | OPEN_LISTED_DAPP: generateOpt(
70 | NAMES.OPEN_LISTED_DAPP
71 | )
72 | };
73 |
74 | export default {trackEvent,ANALYTICS_EVENT_OPTS }
75 |
--------------------------------------------------------------------------------
/src/util/browser.js:
--------------------------------------------------------------------------------
1 |
2 | import URL from 'url-parse';
3 |
4 | /**
5 | * Returns a sanitized url, which could be a search engine url if
6 | * a keyword is detected instead of a url
7 | *
8 | * @param {string} input - String corresponding to url input
9 | * @param {string} searchEngine - Protocol string to append to URLs that have none
10 | * @param {string} defaultProtocol - Protocol string to append to URLs that have none
11 | * @returns {string} - String corresponding to sanitized input depending if it's a search or url
12 | */
13 | export default function onUrlSubmit(input, searchEngine, defaultProtocol = 'https://') {
14 | //Check if it's a url or a keyword
15 | const res = input.match(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!&',;=.+]+$/g);
16 | if (res === null) {
17 | // In case of keywords we default to google search
18 | let searchUrl = 'https://www.google.com/search?q=' + escape(input);
19 | if (searchEngine === 'DuckDuckGo') {
20 | searchUrl = 'https://duckduckgo.com/?q=' + escape(input);
21 | }
22 | return searchUrl;
23 | }
24 | const hasProtocol = input.match(/^[a-z]*:\/\//);
25 | const sanitizedURL = hasProtocol ? input : `${defaultProtocol}${input}`;
26 | return sanitizedURL;
27 | }
28 |
29 | export function getHost(url) {
30 | const urlObj = new URL(url);
31 | const { hostname } = urlObj;
32 | return hostname;
33 | }
--------------------------------------------------------------------------------
46 |
48 |
49 |
51 |