\n {isRanked &&
\n )\n}\n\nDappListItem.defaultProps = {\n isRanked: false,\n showActionButtons: false,\n}\n\nDappListItem.propTypes = DappModel\n\nexport default DappListItem\n","import DappListItem from './DappListItem'\n\nexport default DappListItem\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { DappListModel } from '../../utils/models'\nimport DappListItem from '../DappListItem'\n\nconst DappList = props => {\n const { dapps, isRanked, showActionButtons } = props\n return (\n dapps &&\n dapps.map((dapp, i) => (\n {position}
}\n \n
\n \n
\n {name}
\n{description}
\n \n {url}\n →\n \n {showActionButtons && (\n\n \n \n 12,345\n \n \n
\n Upvote\n \n \n
\n Downvote\n \n
Recently Added
\n\n
\n \n )\n}\n\nRecentlyAdded.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default RecentlyAdded\n","import { createSelector } from 'reselect'\nimport moment from 'moment'\n\nconst getDapps = state => state.dapps\n\nconst recentDapps = createSelector(\n [getDapps],\n dapps => [...dapps].sort((a, b) => moment(b.dateAdded).diff(a.dateAdded)),\n dapps =>\n [...dapps].filter(dapp => {\n return (\n moment(dapp.dateAdded).toISOString() >\n moment()\n .subtract(21, 'days')\n .utc()\n .toISOString()\n )\n }),\n)\n\nexport default recentDapps\n","import RecentlyAdded from './RecentlyAdded.container'\n\nexport default RecentlyAdded\n","import { connect } from 'react-redux'\nimport RecentlyAdded from './RecentlyAdded'\nimport recentDapps from './RecentlyAdded.selector'\n\nconst mapStateToProps = state => ({\n dapps: recentDapps(state),\n})\n\nexport default connect(mapStateToProps)(RecentlyAdded)\n","import React from 'react'\nimport { DappListModel } from '../../common/utils/models'\nimport DappList from '../../common/components/DappList'\nimport styles from './HighestRanked.module.scss'\n\nconst HighestRanked = props => {\n const { dapps } = props\n\n return (\n <>\n Highest Ranked
\n\n
\n \n )\n}\n\nHighestRanked.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default HighestRanked\n","import { createSelector } from 'reselect'\nimport moment from 'moment'\n\nconst getDapps = state => state.dapps\n\n// TODO: add ranking logic here\nconst highestRankedDapps = createSelector(\n [getDapps],\n dapps => [...dapps].sort((a, b) => moment(b.dateAdded).diff(a.dateAdded)),\n)\n\nexport default highestRankedDapps\n","import { connect } from 'react-redux'\nimport HighestRanked from './HighestRanked'\nimport highestRankedDapps from './HighestRanked.selector'\n\nconst mapStateToProps = state => ({\n dapps: highestRankedDapps(state),\n})\n\nexport default connect(mapStateToProps)(HighestRanked)\n","export const EXCHANGES = 'EXCHANGES'\nexport const MARKETPLACES = 'MARKETPLACES'\nexport const COLLECTIBLES = 'COLLECTIBLES'\nexport const GAMES = 'GAMES'\nexport const SOCIAL_NETWORKS = 'SOCIAL_NETWORKS'\nexport const UTILITIES = 'UTILITIES'\nexport const OTHER = 'OTHER'\n","import reducerUtil from '../../common/utils/reducer'\nimport { EXCHANGES } from '../../common/data/categories'\n\nconst UPDATE_CATEGORY = 'UPDATE_CATEGORY'\n\nexport const selectCategory = category => ({\n type: UPDATE_CATEGORY,\n payload: category,\n})\n\nconst initialState = EXCHANGES\n\nconst categoryChange = (_, category) => category\n\nconst map = {\n [UPDATE_CATEGORY]: categoryChange,\n}\n\nexport default reducerUtil(map, initialState)\n","export default (map, defaultState) => (currentState, action) => {\n const state = !currentState ? defaultState : currentState\n\n if (!action) {\n return state\n }\n\n return Object.keys(map).includes(action.type)\n ? map[action.type](state, action.payload)\n : state\n}\n","const humanise = (value, joiner = ' ') => {\n if (!value) {\n return ''\n }\n\n return value\n .split('_')\n .map(word => `${word[0]}${word.slice(1).toLowerCase()}`)\n .join(joiner)\n}\n\nexport default humanise\n","import * as Categories from '../data/categories'\nimport humanise from './humanise'\n\nexport default Object.entries(Categories).map(entry => ({\n key: entry[1],\n value: humanise(entry[1]),\n}))\n","import exchanges from '../../common/assets/images/categories/exchanges.svg'\nimport marketplaces from '../../common/assets/images/categories/marketplaces.svg'\nimport other from '../../common/assets/images/categories/other.svg'\nimport games from '../../common/assets/images/categories/games.svg'\nimport collectibles from '../../common/assets/images/categories/collectibles.svg'\nimport socialNetworks from '../../common/assets/images/categories/social-networks.svg'\nimport utilities from '../../common/assets/images/categories/utilities.svg'\n\nconst imageMap = {\n EXCHANGES: exchanges,\n MARKETPLACES: marketplaces,\n OTHER: other,\n MEDIA: other, // TODO: fix with icon from design\n GAMES: games,\n COLLECTIBLES: collectibles,\n SOCIAL_NETWORKS: socialNetworks,\n UTILITIES: utilities,\n}\n\nexport default category => imageMap[category]\n","import ViewAll from './ViewAll'\n\nexport default ViewAll\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link } from 'react-router-dom'\nimport styles from './ViewAll.module.scss'\n\nconst ViewAll = props => {\n const { size } = props\n\n return (\n \n View all →\n \n )\n}\n\nViewAll.propTypes = {\n size: PropTypes.string.isRequired,\n}\n\nexport default ViewAll\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport categories from '../../common/utils/categories'\nimport styles from './Categories.module.scss'\nimport categoryImage from './Categories.utils'\nimport ViewAll from '../../common/components/ViewAll'\n\nconst Categories = props => {\n const { select } = props\n const handleClick = category => select(category)\n\n return (\n <>\n \n
\n Categories
\n\n {categories.map(category => (\n \n
\n \n )\n}\n\nCategories.propTypes = {\n select: PropTypes.func.isRequired,\n}\n\nexport default Categories\n","import Categories from './Categories.container'\n\nexport default Categories\n","import { connect } from 'react-redux'\nimport { push } from 'connected-react-router'\nimport { selectCategory } from '../CategorySelector/CategorySelector.reducer'\nimport Categories from './Categories'\n\nconst mapDispatchToProps = dispatch => ({\n select: category => {\n dispatch(push('/categories'))\n dispatch(selectCategory(category))\n },\n})\n\nexport default connect(\n null,\n mapDispatchToProps,\n)(Categories)\n","import FeatureDapps from './FeatureDapps'\n\nexport default FeatureDapps\n","import React from 'react'\nimport ReactImageFallback from 'react-image-fallback'\nimport styles from './FeatureDapps.module.scss'\nimport fallbackBanner from '../../assets/images/fallback.svg'\nimport icon from '../../assets/images/icon.svg'\n\nconst FeatureDapps = props => {\n return (\n <>\n {category.value}
\n \n ))}\n\n {props.featured.map((dapp, index) => (\n \n
\n \n )\n}\n\nexport default FeatureDapps\n","import Footer from './Footer'\n\nexport default Footer\n","import React from 'react'\nimport styles from './Footer.module.scss'\nimport communityIcon from '../../common/assets/images/community.svg'\nimport addDappIcon from '../../common/assets/images/add-dapp.svg'\nimport supportIcon from '../../common/assets/images/support.svg'\n\nconst Footer = () => (\n \n
\n \n ))}\n \n
\n {dapp.name}
\n \n {dapp.description}\n \n\n \n \n
\n)\n\nexport default Footer\n","import React from 'react'\nimport ContentLoader from 'react-content-loader'\nimport styles from './LoadingHome.module.scss'\n\nconst MobileLoader = () => (\n \n 
\n
\n \n
\n \n {/* Join the DApp community chat
\n\n Status is a worldwide community committed to web3. Come discuss your\n new favourite DApp with us.\n
\n\n
*/}\n \n 
\n
\n \n
\n Submit a DApp
\nSubmit your favourite DApp now! No permission required.
\n\n 
\n
\n \n
\n \n Support
\n\n Can't find what you're looking for? Reach out and we'll\n see if we can help.\n
\n\n
\n \n
\n \n)\n\nexport default LoadingHome\n","import LoadingHome from './LoadingHome'\n\nexport default LoadingHome\n","import CryptoKittiesBanner from '../assets/images/featured/crytokittes_banner.png'\nimport CryptoKittiesLogo from '../assets/images/featured/cryptokitties_logo.png'\nimport AirswapBanner from '../assets/images/featured/airswap_banner.png'\nimport AirswapLogo from '../assets/images/featured/airswap_logo.png'\nimport KyberBanner from '../assets/images/featured/kyber_banner.png'\nimport KyberLogo from '../assets/images/featured/kyber_logo.png'\n\nconst featuredDapps = [\n {\n name: 'CryptoKittes',\n description: 'Collect and breed adorable digital cats',\n url: 'https://cryptokitties.co',\n banner: CryptoKittiesBanner,\n icon: CryptoKittiesLogo,\n },\n {\n name: 'Airswap',\n description: 'Meet the future of trading',\n url: 'https://instant.airswap.io',\n banner: AirswapBanner,\n icon: AirswapLogo,\n },\n {\n name: 'Kyber',\n description: 'On-chain, instant and liquid exchange and payment',\n url: 'https://web3.kyber.network',\n banner: KyberBanner,\n icon: KyberLogo,\n },\n]\n\nexport default featuredDapps\n","import React from 'react'\nimport RecentlyAdded from '../RecentlyAdded'\nimport HighestRanked from '../HighestRanked'\nimport Categories from '../Categories'\nimport FeaturedDapps from '../../common/components/FeatureDapps'\nimport Footer from '../Footer'\nimport LoadingHome from '../LoadingHome'\nimport featured from '../../common/data/featured'\nimport styles from './Home.module.scss'\n\nclass Home extends React.Component {\n constructor(props) {\n super(props)\n this.startLoadingAnimation = this.startLoadingAnimation.bind(this)\n this.state = { loaded: false }\n }\n\n componentDidMount() {\n // TODO: This is just a demo implementation. The real one would be using a flag in redux\n // that changes when the data has loaded from the smart contract/s\n setTimeout(this.startLoadingAnimation, 1000)\n }\n\n startLoadingAnimation() {\n this.setState({ loaded: true })\n }\n\n render() {\n const { loaded } = this.state\n\n return (\n <>\n {loaded && (\n <>\n \n
\n Discover
\n\n \n \n
\n\n \n
\n {categories.map(c => (\n Categories
\n\n {category &&
\n \n
\n \n )\n}\n\nFiltered.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default Filtered\n","import { createSelector } from 'reselect'\n\nconst getCategory = state => state.selectedCategory\nconst getDapps = state => state.dapps\n\nexport default createSelector(\n [getCategory, getDapps],\n (category, dapps) =>\n category ? dapps.filter(dapp => dapp.category === category) : dapps,\n)\n","import Filtered from './Filtered.container'\n\nexport default Filtered\n","import { connect } from 'react-redux'\nimport Filtered from './Filtered'\nimport filteredDapps from './Filtered.selector'\n\nconst mapStateToProps = state => ({\n dapps: filteredDapps(state),\n})\n\nexport default connect(mapStateToProps)(Filtered)\n","import React, { Component } from 'react'\n// import PropTypes from 'prop-types'\nimport ReactImageFallback from 'react-image-fallback'\nimport styles from './Vote.module.scss'\nimport sntIcon from '../../common/assets/images/SNT.svg'\nimport CategoriesUtils from '../Categories/Categories.utils'\nimport Categories from '../../common/utils/categories'\nimport icon from '../../common/assets/images/icon.svg'\n\nconst getCategoryName = category =>\n Categories.find(x => x.key === category).value\n\nclass Vote extends Component {\n constructor(props) {\n super(props)\n this.state = {\n isUpvote: true,\n sntValue: 0,\n }\n this.onClickTab = this.onClickTab.bind(this)\n this.handleChange = this.handleChange.bind(this)\n }\n\n onClickTab(showUpvote) {\n return () => {\n this.setState({ isUpvote: showUpvote })\n }\n }\n\n handleChange(e) {\n this.setState({ sntValue: e.target.value })\n }\n\n render() {\n const { isUpvote, sntValue } = this.state\n\n // TODO: extract these to props\n\n const dapp = {\n name: 'Kyber',\n url: 'https://web3.kyber.network',\n description:\n 'On-chain, instant and liquid platform for exchange and payment service',\n image: '/images/dapps/kyber.png',\n category: 'EXCHANGES',\n dateAdded: null,\n }\n\n const currentSNTamount = 23456\n const categoryPosition = 2\n const upvoteSNTcost = 12422\n const downvoteSNTcost = 3244\n\n return (\n \n
\n )\n }\n}\n\nVote.propTypes = {}\n\nexport default Vote\n","import Vote from './Vote.container'\n\nexport default Vote\n","import { connect } from 'react-redux'\nimport Vote from './Vote'\n\nconst mapDispatchToProps = dispatch => ({})\n\nexport default connect(\n null,\n mapDispatchToProps,\n)(Vote)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport humanise from '../../common/utils/humanise'\nimport styles from './CategoryHeader.module.scss'\nimport CategoryIcon from '../../common/components/CategoryIcon'\n\nconst CategoryHeader = props => {\n const { text, active } = props\n return (\n \n \n ↑ UPVOTE\n \n \n ↓ DOWNVOTE\n \n
\n \n
\n \n {isUpvote && upvoteSNTcost > 0 && (\n \n {`${upvoteSNTcost.toLocaleString()} ↑`}\n \n )}\n {!isUpvote && downvoteSNTcost > 0 && (\n \n {`${downvoteSNTcost.toLocaleString()} ↓`}\n \n )}\n \n 
\n {currentSNTamount.toLocaleString()}\n \n {isUpvote && upvoteSNTcost > 0 && (\n \n {`№${categoryPosition - 1} ↑`}\n \n )}\n \n
\n {!isUpvote && (\n \n {downvoteSNTcost}\n
\n )}\n {isUpvote && (\n \n \n
\n )}\n\n \n {isUpvote && (\n
\n \n SNT you spend to upvote is locked in the contract and contributes\n directly to {dapp.name}'s ranking.{' '}\n \n Learn more↗\n \n
\n )}\n {!isUpvote && (\n\n SNT you spend to downvote goes directly back to {dapp.name}.\n Downvoting moves their DApp down by 1% of the current ranking. The\n cost is fixed by our unique bonded curve.{' '}\n \n Learn more↗\n \n
\n )}\n \n\n
\n {humanise(text)}
\n \n )\n}\n\nCategoryHeader.propTypes = {\n text: PropTypes.string.isRequired,\n active: PropTypes.bool,\n}\n\nCategoryHeader.defaultProps = {\n active: false,\n}\n\nexport default CategoryHeader\n","import CategoryHeader from './CategoryHeader'\n\nexport default CategoryHeader\n","export const headerElements = () =>\n Array.from(document.querySelectorAll('.category-header'))\n\nexport const getYPosition = element => {\n let el = element\n let yPosition = 0\n\n while (el) {\n yPosition += el.offsetTop - el.scrollTop + el.clientTop\n el = el.offsetParent\n }\n\n return yPosition\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { debounce } from 'debounce'\nimport { DappListModel } from '../../common/utils/models'\nimport DappList from '../../common/components/DappList'\nimport CategoryHeader from '../CategoryHeader'\nimport styles from './Dapps.module.scss'\nimport { headerElements, getYPosition } from './Dapps.utils'\n\nclass Dapps extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n categories: props.categories.map(category => category.category),\n currentCategoryIndex: 0,\n }\n }\n\n componentDidMount() {\n this.scanHeaderPositions()\n this.boundScroll = debounce(this.handleScroll.bind(this), 1)\n window.addEventListener('scroll', this.boundScroll)\n }\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.boundScroll)\n }\n\n scanHeaderPositions() {\n const headerPositions = headerElements().map(element => ({\n id: element.id,\n position: getYPosition(element),\n }))\n\n this.setState({ headerPositions })\n }\n\n handleScroll() {\n const currentHeader = document.getElementById(this.currentCategory())\n const { headerPositions, categories } = this.state\n\n const newHeader = [...headerPositions]\n .reverse()\n .find(header => header.position < window.scrollY)\n\n if (!newHeader) {\n return this.setState({ currentCategoryIndex: 0 })\n }\n\n if (newHeader.id === currentHeader.id) {\n return false\n }\n\n const newIndex = categories.indexOf(newHeader.id)\n\n return this.setState({ currentCategoryIndex: newIndex })\n }\n\n currentCategory() {\n const { currentCategoryIndex, categories } = this.state\n return categories[currentCategoryIndex]\n }\n\n isCurrentCategory(category) {\n return category === this.currentCategory()\n }\n\n render() {\n const { categories } = this.props\n\n return (\n\n {categories.map(category => (\n
\n )\n }\n}\n\nDapps.propTypes = {\n categories: PropTypes.arrayOf(\n PropTypes.shape({ category: PropTypes.string, dapps: DappListModel }),\n ).isRequired,\n}\n\nexport default Dapps\n","import { createSelector } from 'reselect'\n\nconst getDapps = state => state.dapps\n\nconst categorisedDapps = createSelector(\n [getDapps],\n dapps =>\n dapps.reduce((acc, current) => {\n if (acc.some(i => i.category === current.category)) {\n return acc.map(n =>\n n.category === current.category\n ? {\n ...n,\n dapps: [...n.dapps, current],\n }\n : n,\n )\n }\n\n return [...acc, { category: current.category, dapps: [current] }]\n }, []),\n)\n\nexport default categorisedDapps\n","import Dapps from './Dapps.container'\n\nexport default Dapps\n","import { connect } from 'react-redux'\nimport Dapps from './Dapps'\nimport selector from './Dapps.selector'\n\nconst mapStateToProps = state => ({\n categories: selector(state),\n})\n\nexport default connect(mapStateToProps)(Dapps)\n","import Router from './Router'\n\nexport default Router\n","import React from 'react'\nimport { Route, Switch } from 'react-router-dom'\nimport Home from '../Home'\nimport Filtered from '../Filtered'\nimport RecentlyAdded from '../RecentlyAdded'\nimport Vote from '../Vote'\nimport Dapps from '../Dapps'\n\nexport default () => (\n \n
\n ))}\n \n
\n \n {isRanked &&
\n )\n}\n\nDappListItem.defaultProps = {\n isRanked: false,\n showActionButtons: false,\n}\n\nDappListItem.propTypes = DappModel\n\nexport default DappListItem\n","import DappListItem from './DappListItem'\n\nexport default DappListItem\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { DappListModel } from '../../utils/models'\nimport DappListItem from '../DappListItem'\n\nconst DappList = props => {\n const { dapps, isRanked, showActionButtons } = props\n return (\n dapps &&\n dapps.map((dapp, i) => (\n {position}
}\n \n
\n \n
\n {name}
\n{description}
\n \n {url}\n →\n \n {showActionButtons && (\n\n \n \n 12,345\n \n \n
\n Upvote\n \n \n
\n Downvote\n \n
Recently Added
\n\n
\n \n )\n}\n\nRecentlyAdded.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default RecentlyAdded\n","import { createSelector } from 'reselect'\nimport moment from 'moment'\n\nconst getDapps = state => state.dapps\n\nconst recentDapps = createSelector(\n [getDapps],\n dapps => [...dapps].sort((a, b) => moment(b.dateAdded).diff(a.dateAdded)),\n dapps =>\n [...dapps].filter(dapp => {\n return (\n moment(dapp.dateAdded).toISOString() >\n moment()\n .subtract(40, 'days')\n .utc()\n .toISOString()\n )\n }),\n)\n\nexport default recentDapps\n","import RecentlyAdded from './RecentlyAdded.container'\n\nexport default RecentlyAdded\n","import { connect } from 'react-redux'\nimport RecentlyAdded from './RecentlyAdded'\nimport recentDapps from './RecentlyAdded.selector'\n\nconst mapStateToProps = state => ({\n dapps: recentDapps(state),\n})\n\nexport default connect(mapStateToProps)(RecentlyAdded)\n","import React from 'react'\nimport { DappListModel } from '../../common/utils/models'\nimport DappList from '../../common/components/DappList'\nimport styles from './HighestRanked.module.scss'\n\nconst HighestRanked = props => {\n const { dapps } = props\n\n return (\n <>\n Highest Ranked
\n\n
\n \n )\n}\n\nHighestRanked.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default HighestRanked\n","import { createSelector } from 'reselect'\nimport moment from 'moment'\n\nconst getDapps = state => state.dapps\n\n// TODO: add ranking logic here\nconst highestRankedDapps = createSelector(\n [getDapps],\n dapps => [...dapps].sort((a, b) => moment(b.dateAdded).diff(a.dateAdded)),\n)\n\nexport default highestRankedDapps\n","import { connect } from 'react-redux'\nimport HighestRanked from './HighestRanked'\nimport highestRankedDapps from './HighestRanked.selector'\n\nconst mapStateToProps = state => ({\n dapps: highestRankedDapps(state),\n})\n\nexport default connect(mapStateToProps)(HighestRanked)\n","export const EXCHANGES = 'EXCHANGES'\nexport const MARKETPLACES = 'MARKETPLACES'\nexport const COLLECTIBLES = 'COLLECTIBLES'\nexport const GAMES = 'GAMES'\nexport const SOCIAL_NETWORKS = 'SOCIAL_NETWORKS'\nexport const UTILITIES = 'UTILITIES'\nexport const OTHER = 'OTHER'\n","import reducerUtil from '../../common/utils/reducer'\nimport { EXCHANGES } from '../../common/data/categories'\n\nconst UPDATE_CATEGORY = 'UPDATE_CATEGORY'\n\nexport const selectCategory = category => ({\n type: UPDATE_CATEGORY,\n payload: category,\n})\n\nconst initialState = EXCHANGES\n\nconst categoryChange = (_, category) => category\n\nconst map = {\n [UPDATE_CATEGORY]: categoryChange,\n}\n\nexport default reducerUtil(map, initialState)\n","export default (map, defaultState) => (currentState, action) => {\n const state = !currentState ? defaultState : currentState\n\n if (!action) {\n return state\n }\n\n return Object.keys(map).includes(action.type)\n ? map[action.type](state, action.payload)\n : state\n}\n","const humanise = (value, joiner = ' ') => {\n if (!value) {\n return ''\n }\n\n return value\n .split('_')\n .map(word => `${word[0]}${word.slice(1).toLowerCase()}`)\n .join(joiner)\n}\n\nexport default humanise\n","import * as Categories from '../data/categories'\nimport humanise from './humanise'\n\nexport default Object.entries(Categories).map(entry => ({\n key: entry[1],\n value: humanise(entry[1]),\n}))\n","import exchanges from '../../common/assets/images/categories/exchanges.svg'\nimport marketplaces from '../../common/assets/images/categories/marketplaces.svg'\nimport other from '../../common/assets/images/categories/other.svg'\nimport games from '../../common/assets/images/categories/games.svg'\nimport collectibles from '../../common/assets/images/categories/collectibles.svg'\nimport socialNetworks from '../../common/assets/images/categories/social-networks.svg'\nimport utilities from '../../common/assets/images/categories/utilities.svg'\n\nconst imageMap = {\n EXCHANGES: exchanges,\n MARKETPLACES: marketplaces,\n OTHER: other,\n MEDIA: other, // TODO: fix with icon from design\n GAMES: games,\n COLLECTIBLES: collectibles,\n SOCIAL_NETWORKS: socialNetworks,\n UTILITIES: utilities,\n}\n\nexport default category => imageMap[category]\n","import ViewAll from './ViewAll'\n\nexport default ViewAll\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link } from 'react-router-dom'\nimport styles from './ViewAll.module.scss'\n\nconst ViewAll = props => {\n const { size } = props\n\n return (\n \n View all →\n \n )\n}\n\nViewAll.propTypes = {\n size: PropTypes.string.isRequired,\n}\n\nexport default ViewAll\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport categories from '../../common/utils/categories'\nimport styles from './Categories.module.scss'\nimport categoryImage from './Categories.utils'\nimport ViewAll from '../../common/components/ViewAll'\n\nconst Categories = props => {\n const { select } = props\n const handleClick = category => select(category)\n\n return (\n <>\n \n
\n Categories
\n\n {categories.map(category => (\n \n
\n \n )\n}\n\nCategories.propTypes = {\n select: PropTypes.func.isRequired,\n}\n\nexport default Categories\n","import Categories from './Categories.container'\n\nexport default Categories\n","import { connect } from 'react-redux'\nimport { push } from 'connected-react-router'\nimport { selectCategory } from '../CategorySelector/CategorySelector.reducer'\nimport Categories from './Categories'\n\nconst mapDispatchToProps = dispatch => ({\n select: category => {\n dispatch(push('/categories'))\n dispatch(selectCategory(category))\n },\n})\n\nexport default connect(\n null,\n mapDispatchToProps,\n)(Categories)\n","import FeatureDapps from './FeatureDapps'\n\nexport default FeatureDapps\n","import React from 'react'\nimport ReactImageFallback from 'react-image-fallback'\nimport styles from './FeatureDapps.module.scss'\nimport fallbackBanner from '../../assets/images/fallback.svg'\nimport icon from '../../assets/images/icon.svg'\n\nconst FeatureDapps = props => {\n return (\n <>\n {category.value}
\n \n ))}\n\n {props.featured.map((dapp, index) => (\n \n
\n \n )\n}\n\nexport default FeatureDapps\n","import Footer from './Footer'\n\nexport default Footer\n","import React from 'react'\nimport styles from './Footer.module.scss'\nimport communityIcon from '../../common/assets/images/community.svg'\nimport addDappIcon from '../../common/assets/images/add-dapp.svg'\nimport supportIcon from '../../common/assets/images/support.svg'\n\nconst Footer = () => (\n \n
\n \n ))}\n \n
\n {dapp.name}
\n \n {dapp.description}\n \n\n \n \n
\n)\n\nexport default Footer\n","import React from 'react'\nimport ContentLoader from 'react-content-loader'\nimport styles from './LoadingHome.module.scss'\n\nconst MobileLoader = () => (\n \n \n
\n \n
\n \n {/* Join the DApp community chat
\n\n Status is a worldwide community committed to web3. Come discuss your\n new favourite DApp with us.\n
\n\n
*/}\n \n \n
\n \n
\n Submit a DApp
\nSubmit your favourite DApp now! No permission required.
\n\n \n
\n \n
\n \n Support
\n\n Can't find what you're looking for? Reach out and we'll\n see if we can help.\n
\n\n
\n \n
\n \n)\n\nexport default LoadingHome\n","import LoadingHome from './LoadingHome'\n\nexport default LoadingHome\n","import CryptoKittiesBanner from '../assets/images/featured/crytokittes_banner.png'\nimport CryptoKittiesLogo from '../assets/images/featured/cryptokitties_logo.png'\nimport AirswapBanner from '../assets/images/featured/airswap_banner.png'\nimport AirswapLogo from '../assets/images/featured/airswap_logo.png'\nimport KyberBanner from '../assets/images/featured/kyber_banner.png'\nimport KyberLogo from '../assets/images/featured/kyber_logo.png'\n\nconst featuredDapps = [\n {\n name: 'CryptoKittes',\n description: 'Collect and breed adorable digital cats',\n url: 'https://cryptokitties.co',\n banner: CryptoKittiesBanner,\n icon: CryptoKittiesLogo,\n },\n {\n name: 'Airswap',\n description: 'Meet the future of trading',\n url: 'https://instant.airswap.io',\n banner: AirswapBanner,\n icon: AirswapLogo,\n },\n {\n name: 'Kyber',\n description: 'On-chain, instant and liquid exchange and payment',\n url: 'https://web3.kyber.network',\n banner: KyberBanner,\n icon: KyberLogo,\n },\n]\n\nexport default featuredDapps\n","import React from 'react'\nimport RecentlyAdded from '../RecentlyAdded'\nimport HighestRanked from '../HighestRanked'\nimport Categories from '../Categories'\nimport FeaturedDapps from '../../common/components/FeatureDapps'\nimport Footer from '../Footer'\nimport LoadingHome from '../LoadingHome'\nimport featured from '../../common/data/featured'\nimport styles from './Home.module.scss'\n\nclass Home extends React.Component {\n constructor(props) {\n super(props)\n this.startLoadingAnimation = this.startLoadingAnimation.bind(this)\n this.state = { loaded: false }\n }\n\n componentDidMount() {\n // TODO: This is just a demo implementation. The real one would be using a flag in redux\n // that changes when the data has loaded from the smart contract/s\n setTimeout(this.startLoadingAnimation, 1000)\n }\n\n startLoadingAnimation() {\n this.setState({ loaded: true })\n }\n\n render() {\n const { loaded } = this.state\n\n return (\n <>\n {loaded && (\n <>\n \n
\n Discover
\n\n \n \n
\n\n \n
\n {categories.map(c => (\n Categories
\n\n {category &&
\n \n
\n \n )\n}\n\nFiltered.propTypes = {\n dapps: DappListModel.isRequired,\n}\n\nexport default Filtered\n","import { createSelector } from 'reselect'\n\nconst getCategory = state => state.selectedCategory\nconst getDapps = state => state.dapps\n\nexport default createSelector(\n [getCategory, getDapps],\n (category, dapps) =>\n category ? dapps.filter(dapp => dapp.category === category) : dapps,\n)\n","import Filtered from './Filtered.container'\n\nexport default Filtered\n","import { connect } from 'react-redux'\nimport Filtered from './Filtered'\nimport filteredDapps from './Filtered.selector'\n\nconst mapStateToProps = state => ({\n dapps: filteredDapps(state),\n})\n\nexport default connect(mapStateToProps)(Filtered)\n","import React, { Component } from 'react'\n// import PropTypes from 'prop-types'\nimport ReactImageFallback from 'react-image-fallback'\nimport styles from './Vote.module.scss'\nimport sntIcon from '../../common/assets/images/SNT.svg'\nimport CategoriesUtils from '../Categories/Categories.utils'\nimport Categories from '../../common/utils/categories'\nimport icon from '../../common/assets/images/icon.svg'\n\nconst getCategoryName = category =>\n Categories.find(x => x.key === category).value\n\nclass Vote extends Component {\n constructor(props) {\n super(props)\n this.state = {\n isUpvote: true,\n sntValue: 0,\n }\n this.onClickTab = this.onClickTab.bind(this)\n this.handleChange = this.handleChange.bind(this)\n }\n\n onClickTab(showUpvote) {\n return () => {\n this.setState({ isUpvote: showUpvote })\n }\n }\n\n handleChange(e) {\n this.setState({ sntValue: e.target.value })\n }\n\n render() {\n const { isUpvote, sntValue } = this.state\n\n // TODO: extract these to props\n\n const dapp = {\n name: 'Kyber',\n url: 'https://web3.kyber.network',\n description:\n 'On-chain, instant and liquid platform for exchange and payment service',\n image: '/images/dapps/kyber.png',\n category: 'EXCHANGES',\n dateAdded: null,\n }\n\n const currentSNTamount = 23456\n const categoryPosition = 2\n const upvoteSNTcost = 12422\n const downvoteSNTcost = 3244\n\n return (\n \n
\n )\n }\n}\n\nVote.propTypes = {}\n\nexport default Vote\n","import Vote from './Vote.container'\n\nexport default Vote\n","import { connect } from 'react-redux'\nimport Vote from './Vote'\n\nconst mapDispatchToProps = dispatch => ({})\n\nexport default connect(\n null,\n mapDispatchToProps,\n)(Vote)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport humanise from '../../common/utils/humanise'\nimport styles from './CategoryHeader.module.scss'\nimport CategoryIcon from '../../common/components/CategoryIcon'\n\nconst CategoryHeader = props => {\n const { text, active } = props\n return (\n \n \n ↑ UPVOTE\n \n \n ↓ DOWNVOTE\n \n
\n \n
\n \n {isUpvote && upvoteSNTcost > 0 && (\n \n {`${upvoteSNTcost.toLocaleString()} ↑`}\n \n )}\n {!isUpvote && downvoteSNTcost > 0 && (\n \n {`${downvoteSNTcost.toLocaleString()} ↓`}\n \n )}\n \n \n {currentSNTamount.toLocaleString()}\n \n {isUpvote && upvoteSNTcost > 0 && (\n \n {`№${categoryPosition - 1} ↑`}\n \n )}\n \n
\n {!isUpvote && (\n \n {downvoteSNTcost}\n
\n )}\n {isUpvote && (\n \n \n
\n )}\n\n \n {isUpvote && (\n
\n \n SNT you spend to upvote is locked in the contract and contributes\n directly to {dapp.name}'s ranking.{' '}\n \n Learn more↗\n \n
\n )}\n {!isUpvote && (\n\n SNT you spend to downvote goes directly back to {dapp.name}.\n Downvoting moves their DApp down by 1% of the current ranking. The\n cost is fixed by our unique bonded curve.{' '}\n \n Learn more↗\n \n
\n )}\n \n\n
\n {humanise(text)}
\n \n )\n}\n\nCategoryHeader.propTypes = {\n text: PropTypes.string.isRequired,\n active: PropTypes.bool,\n}\n\nCategoryHeader.defaultProps = {\n active: false,\n}\n\nexport default CategoryHeader\n","import CategoryHeader from './CategoryHeader'\n\nexport default CategoryHeader\n","export const headerElements = () =>\n Array.from(document.querySelectorAll('.category-header'))\n\nexport const getYPosition = element => {\n let el = element\n let yPosition = 0\n\n while (el) {\n yPosition += el.offsetTop - el.scrollTop + el.clientTop\n el = el.offsetParent\n }\n\n return yPosition\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { debounce } from 'debounce'\nimport { DappListModel } from '../../common/utils/models'\nimport DappList from '../../common/components/DappList'\nimport CategoryHeader from '../CategoryHeader'\nimport styles from './Dapps.module.scss'\nimport { headerElements, getYPosition } from './Dapps.utils'\n\nclass Dapps extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n categories: props.categories.map(category => category.category),\n currentCategoryIndex: 0,\n }\n }\n\n componentDidMount() {\n this.scanHeaderPositions()\n this.boundScroll = debounce(this.handleScroll.bind(this), 1)\n window.addEventListener('scroll', this.boundScroll)\n }\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.boundScroll)\n }\n\n scanHeaderPositions() {\n const headerPositions = headerElements().map(element => ({\n id: element.id,\n position: getYPosition(element),\n }))\n\n this.setState({ headerPositions })\n }\n\n handleScroll() {\n const currentHeader = document.getElementById(this.currentCategory())\n const { headerPositions, categories } = this.state\n\n const newHeader = [...headerPositions]\n .reverse()\n .find(header => header.position < window.scrollY)\n\n if (!newHeader) {\n return this.setState({ currentCategoryIndex: 0 })\n }\n\n if (newHeader.id === currentHeader.id) {\n return false\n }\n\n const newIndex = categories.indexOf(newHeader.id)\n\n return this.setState({ currentCategoryIndex: newIndex })\n }\n\n currentCategory() {\n const { currentCategoryIndex, categories } = this.state\n return categories[currentCategoryIndex]\n }\n\n isCurrentCategory(category) {\n return category === this.currentCategory()\n }\n\n render() {\n const { categories } = this.props\n\n return (\n\n {categories.map(category => (\n
\n )\n }\n}\n\nDapps.propTypes = {\n categories: PropTypes.arrayOf(\n PropTypes.shape({ category: PropTypes.string, dapps: DappListModel }),\n ).isRequired,\n}\n\nexport default Dapps\n","import { createSelector } from 'reselect'\n\nconst getDapps = state => state.dapps\n\nconst categorisedDapps = createSelector(\n [getDapps],\n dapps =>\n dapps.reduce((acc, current) => {\n if (acc.some(i => i.category === current.category)) {\n return acc.map(n =>\n n.category === current.category\n ? {\n ...n,\n dapps: [...n.dapps, current],\n }\n : n,\n )\n }\n\n return [...acc, { category: current.category, dapps: [current] }]\n }, []),\n)\n\nexport default categorisedDapps\n","import Dapps from './Dapps.container'\n\nexport default Dapps\n","import { connect } from 'react-redux'\nimport Dapps from './Dapps'\nimport selector from './Dapps.selector'\n\nconst mapStateToProps = state => ({\n categories: selector(state),\n})\n\nexport default connect(mapStateToProps)(Dapps)\n","import Router from './Router'\n\nexport default Router\n","import React from 'react'\nimport { Route, Switch } from 'react-router-dom'\nimport Home from '../Home'\nimport Filtered from '../Filtered'\nimport RecentlyAdded from '../RecentlyAdded'\nimport Vote from '../Vote'\nimport Dapps from '../Dapps'\n\nexport default () => (\n \n
\n ))}\n \n
\n