added changes for PR

packages/website/ts/components/portal/portal.tsx

@@ -240,10 +240,10 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     onDismiss={this._dismissBanner.bind(this)}
                     heading="Check out the new 0x Explore page"
                     subline="Need more advanced functionality? Try our code sandbox."
-                    mainCta={{ text: 'Explore 0x', href: '/explore' }}
+                    mainCta={{ text: 'Explore 0x', href: WebsitePaths.Explore }}
                     secondaryCta={{
                         text: 'Code Sandbox',
-                        href: 'https://codesandbox.io/s/1qmjyp7p5j',
+                        href: constants.URL_SANDBOX,
                         shouldOpenInNewTab: true,
                     }}
                 />

packages/website/ts/pages/explore.tsx

@@ -8,14 +8,7 @@ import { Section } from 'ts/components/newLayout';
 import { SiteWrap } from 'ts/components/siteWrap';
 import { Heading } from 'ts/components/text';
 import { Input as SearchInput } from 'ts/components/ui/search_textfield';
-import {
-    AVAILABLE_ASSET_DATAS,
-    BY_NAME_ORDERINGS,
-    EDITORIAL,
-    FILTERS,
-    ORDERINGS,
-    PROJECTS,
-} from 'ts/pages/explore/explore_content';
+import { EDITORIAL, FILTERS, ORDERINGS, PROJECTS } from 'ts/pages/explore/explore_content';
 import { ExploreSettingsDropdown } from 'ts/pages/explore/explore_dropdown';
 import { ExploreGrid } from 'ts/pages/explore/explore_grid';
 import { EXPLORE_STATE_DIALOGS, ExploreGridDialogTile } from 'ts/pages/explore/explore_grid_state_tile';
@@ -31,6 +24,7 @@ import {
     ExploreTilesModifiers,
     ExploreTilesOrdering,
     ExploreTilesOrderingMetadata,
+    ExploreTilesOrderingType,
     ExploreTileVisibility,
     ExploreTileWidth,
 } from 'ts/types';
@@ -77,9 +71,7 @@ export class Explore extends React.Component<ExploreProps> {
                     <ExploreToolBar
                         onFilterClick={this._setFilter}
                         filters={this.state.filters}
-                        // editorial={this.state.isEditorialShown}
-                        // onEditorial={this._onEditorial}
-                        orderings={ORDERINGS}
+                        orderings={_.values(ORDERINGS)}
                         activeOrdering={this.state.tilesOrdering}
                         onOrdering={this._onOrdering}
                     />
@@ -109,13 +101,19 @@ export class Explore extends React.Component<ExploreProps> {
         zeroExInstant.render(params, 'body');
     };
 
-    private readonly _onAnalytics = (project: ExploreProject, action: ExploreAnalyticAction): void => {
+    private readonly _onAnalytics = (metadata: any, action: ExploreAnalyticAction): void => {
         switch (action) {
             case ExploreAnalyticAction.InstantClick:
-                analytics.track('Explore - Instant - Clicked', { name: project.name });
+                analytics.track('Explore - Instant - Clicked', { name: metadata.name });
                 break;
             case ExploreAnalyticAction.LinkClick:
-                analytics.track('Explore - Link - Clicked', { name: project.name });
+                analytics.track('Explore - Link - Clicked', { name: metadata.name });
+                break;
+            case ExploreAnalyticAction.FilterClick:
+                analytics.track('Explore - Filter - Clicked', { filterName: metadata.filterName });
+                break;
+            case ExploreAnalyticAction.QuerySearched:
+                analytics.track('Explore - Query - Searched', { query: metadata.query });
                 break;
             default:
                 break;
@@ -157,17 +155,18 @@ export class Explore extends React.Component<ExploreProps> {
     };
 
     private readonly _changeSearchResults = async (query: string): Promise<void> => {
+        this._onAnalytics({ query }, ExploreAnalyticAction.QuerySearched);
         const searchedTiles = await this._generateTilesWithModifier(this.state.tiles, ExploreTilesModifiers.Search, {
             query,
             filter: this.state.filters.find(f => f.active),
         });
-        // const newTiles = this._generateTilesWithModifier(searchedTiles, ExploreTilesModifiers.Editorial, {
-        //     isEditorialShown: _.isEmpty(query) ? this.state.isEditorialShown : false,
-        // })
         this.setState({ tiles: searchedTiles });
     };
 
     private readonly _setFilter = async (filterName: string, active: boolean = true): Promise<void> => {
+        if (active) {
+            this._onAnalytics({ filterName }, ExploreAnalyticAction.FilterClick);
+        }
         let updatedFilters: ExploreFilterMetadata[];
         updatedFilters = this.state.filters.map(f => {
             const newFilter = _.assign({}, f);
@@ -219,9 +218,12 @@ export class Explore extends React.Component<ExploreProps> {
             return tiles;
         }
         if (modifier === ExploreTilesModifiers.Ordering) {
-            if (!!BY_NAME_ORDERINGS[options.tilesOrdering]) {
-                return _.sortBy(tiles, t => _.indexOf(BY_NAME_ORDERINGS[options.tilesOrdering], t.name));
-            } else {
+            switch (ORDERINGS[options.tilesOrdering].type) {
+                case ExploreTilesOrderingType.HardCodedByName:
+                    return _.sortBy(tiles, t => _.indexOf(ORDERINGS[options.tilesOrdering].hardCoded, t.name));
+                case ExploreTilesOrderingType.DynamicBySortFunction:
+                    return ORDERINGS[options.tilesOrdering].sort(tiles);
+                default:
                     return tiles;
             }
         }
@@ -243,7 +245,11 @@ export class Explore extends React.Component<ExploreProps> {
                 newTile.visibility === ExploreTileVisibility.Visible
             ) {
                 newTile.visibility =
-                    (_.startsWith(newTile.exploreProject.label.toLowerCase(), trimmedQuery) &&
+                    (_.chain(newTile.exploreProject.label.toLowerCase())
+                        .split(' ')
+                        .concat([newTile.exploreProject.label.toLowerCase()])
+                        .reduce((a: boolean, s: string) => a || _.startsWith(s, trimmedQuery), false)
+                        .value() &&
                         ExploreTileVisibility.Visible) ||
                     ExploreTileVisibility.Hidden;
             }
@@ -265,9 +271,7 @@ export class Explore extends React.Component<ExploreProps> {
         const tiles = rawProjects.map((e: ExploreProject) => {
             const exploreProject = _.assign({}, e);
             if (!!exploreProject.instant) {
-                exploreProject.instant = _.assign({}, exploreProject.instant, {
-                    availableAssetDatas: AVAILABLE_ASSET_DATAS,
-                });
+                exploreProject.instant = _.assign({}, exploreProject.instant);
                 exploreProject.onInstantClick = this._launchInstantAsync.bind(this, exploreProject.instant);
             }
             exploreProject.onAnalytics = this._onAnalytics.bind(this, exploreProject);
@@ -281,9 +285,7 @@ export class Explore extends React.Component<ExploreProps> {
         const orderedTiles = await this._generateTilesWithModifier(tiles, ExploreTilesModifiers.Ordering, {
             tilesOrdering: this.state.tilesOrdering,
         });
-        this.setState({ tiles: orderedTiles, isEntriesLoading: false }, () => {
-            // this._generateEditorialContent();
-        });
+        this.setState({ tiles: orderedTiles, isEntriesLoading: false });
     };
 }
 
@@ -342,11 +344,16 @@ const ExploreToolBarWrapper = styled.div`
 `;
 
 const ExploreToolBarContentWrapper = styled.div`
-    display: flex;
-    padding-bottom: 2rem;
-    @media (max-width: 36rem) {
+    display: inline-block;
+    white-space: nowrap;
+    padding-bottom: 0.4rem
+    margin-bottom: 1.6rem;
+    overflow-x: auto;
+    @media (max-width: 64rem) {
+       & > * {
             display: none;
        }
+    }
     & > * {
         margin: 0 0.3rem;
     }

packages/website/ts/pages/explore/explore_content.tsx

@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ExploreGridFeaturedTile } from 'ts/pages/explore/explore_grid_featured_tile';
@@ -17,62 +18,230 @@ export const PROJECTS: { [s: string]: ExploreProject } = {
     paradex: {
         name: 'paradex',
         label: 'Paradex',
-        description: 'Paradex is a matching relayer with a focus on stable coins that is now a part of Coinbase.',
+        description: 'Matching order book relayer acquired by Coinbase.',
         logo_url: '/images/explore/paradex.png',
         theme_color: '#151628',
         url: 'https://paradex.io/',
-        keywords: ['relayer'],
+        keywords: ['tokens'],
     },
     veil: {
         name: 'veil',
         label: 'Veil',
-        description:
-            'Veil is a non-custodial trading platform for blockchain-based derivatives and prediction markets.',
+        description: 'Platform for creating and trading in prediction markets on everything.',
         logo_url: '/images/explore/veil.png',
         theme_color: '#0204EB',
         url: 'https://veil.co/',
-        keywords: ['relayer'],
+        keywords: ['prediction_markets'],
     },
     radar_relay: {
         name: 'radar_relay',
         label: 'Radar Relay',
-        description: 'Radar Relay is an open order book relayer made by an international team based in Colorado.',
+        description: 'Open order book relayer for wallet-to-wallet ERC-20 token trading.',
         logo_url: '/images/explore/radar_relay.png',
         theme_color: '#262626',
         url: 'https://radarrelay.com/',
-        keywords: ['relayer'],
+        keywords: ['tokens'],
         instant: {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
+            availableAssetDatas: [
+                '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359', // DAI
+                '0xf47261b0000000000000000000000000a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48', // USDC
+                '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef', // BAT
+                '0xf47261b000000000000000000000000005f4a42e251f2d52b8ed15e9fedaacfcef1fad27', // ZIL
+                '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942', // MANA
+                '0xf47261b00000000000000000000000000abdace70d3790235af448c88547603b945604ea', // DNT
+                '0xf47261b000000000000000000000000041e5560054824ea6b0732e656e3ad64e20e94e45', // CVC
+            ],
         },
     },
     emoon: {
         name: 'emoon',
         label: 'Emoon',
-        description: 'Emoon is a peer-to-peer marketplace for the exchange of ERC-20 and ERC-721 crypto assets.',
+        description: 'A user-friendly marketplace to trade ERC-20 and ERC-721 crypto gaming assets.',
         logo_url: '/images/explore/emoon.png',
         theme_color: '#3F89E7',
         url: 'https://www.emoon.io/',
-        keywords: ['relayer', 'collectibles'],
+        keywords: ['collectibles'],
     },
     openrelay: {
         name: 'openrelay',
         label: 'OpenRelay',
-        description:
-            'Open Relay is an open order book relayer with a focus on scalable and open source backend infrastructure.',
+        description: 'Highly scalable open source order book platform as a service for developers.',
         logo_url: '/images/explore/open_relay.png',
         theme_color: '#163AAB',
         url: 'https://openrelay.xyz/',
-        keywords: ['relayer'],
+        keywords: ['infrastructure'],
     },
     boxswap: {
         name: 'boxswap',
-        label: 'BoxSwap',
+        label: 'Boxswap',
         description: 'OTC relayer made for swapping ERC-20 and ERC-721 assets in a marketplace communities.',
         logo_url: '/images/explore/box_swap.png',
         theme_color: '#FF99DF',
         url: 'https://boxswap.io/',
         keywords: ['collectibles'],
     },
+    bamboo_relay: {
+        name: 'bamboo_relay',
+        label: 'Bamboo Relay',
+        description: 'Trade, lend and borrow tokens directly from your wallet.',
+        logo_url: '/images/explore/bamboo_relay.png',
+        theme_color: '#05183A',
+        url: 'https://bamboorelay.com/',
+        keywords: ['tokens'],
+    },
+    star_bit_ex: {
+        name: 'star_bit_ex',
+        label: 'Star Bit Ex',
+        description: 'Taiwanese matching relayer focused on gamifying the buying of tokens.',
+        logo_url: '/images/explore/star_bit_ex.png',
+        theme_color: '#192C55',
+        url: 'https://www.starbitex.com/',
+        keywords: ['tokens'],
+    },
+    token_jar: {
+        name: 'token_jar',
+        label: 'TokenJar',
+        description: 'Matching order book relayer with free listing of many ERC-20 tokens.',
+        logo_url: '/images/explore/token_jar.png',
+        theme_color: '#000000',
+        url: 'https://tokenjar.io/',
+        keywords: ['tokens'],
+    },
+    tokenmom: {
+        name: 'tokenmom',
+        label: 'Tokenmom',
+        description: 'Matching order book relayer based in Korea.',
+        logo_url: '/images/explore/tokenmom.png',
+        theme_color: '#000000',
+        url: 'https://www.tokenmom.com',
+        keywords: ['tokens'],
+    },
+    lake_project: {
+        name: 'lake_project',
+        label: 'Lake Project',
+        description: 'Open order book relayer with a focus on AI driven investing.',
+        logo_url: '/images/explore/lake_project.png',
+        theme_color: '#232428',
+        url: 'https://trade.lakeproject.co/',
+        keywords: ['tokens'],
+    },
+    ledgerdex: {
+        name: 'ledgerdex',
+        label: 'LedgerDex',
+        description:
+            'Open order book relayer that allows wallet-to-wallet trading and next generation token management.',
+        logo_url: '/images/explore/ledgerdex.png',
+        theme_color: '#51A362',
+        url: 'https://app.ledgerdex.com/',
+        keywords: ['tokens'],
+        // TODO: check if they work per region and actually don't work on certain regions
+        // instant: {
+        //     orderSource: 'https://api-v2.ledgerdex.com/sra/v2/',
+        //     availableAssetDatas: [
+        //         '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359', // DAI
+        //     ],
+        // },
+    },
+    fordex: {
+        name: 'fordex',
+        label: 'Fordex',
+        description: 'Open order book relayer that enables stablecoin arbitrage.',
+        logo_url: '/images/explore/fordex.png',
+        theme_color: '#080424',
+        url: 'https://alpha.fordex.co/',
+        keywords: ['tokens'],
+    },
+    ethfinex: {
+        name: 'ethfinex',
+        label: 'Ethfinex',
+        description: 'A hybrid relayer and exchange connected to Bitfinex.',
+        logo_url: '/images/explore/ethfinex.png',
+        theme_color: '#222431',
+        url: 'https://trustless.ethfinex.com',
+        keywords: ['tokens'],
+    },
+    the_ocean: {
+        name: 'the_ocean',
+        label: 'The Ocean',
+        description: 'Security token and matching order book relayer.',
+        logo_url: '/images/explore/the_ocean.png',
+        theme_color: '#4375EA',
+        url: 'https://app.theocean.trade/',
+        keywords: ['tokens'],
+    },
+    fabrx: {
+        name: 'fabrx',
+        label: 'Fabrx',
+        description: 'NFT and DeFi platform as a service.',
+        logo_url: '/images/explore/fabrx.png',
+        theme_color: '#2A536C',
+        url: 'https://www.fabrx.io/',
+        keywords: ['infrastructure'],
+    },
+    ambo: {
+        name: 'ambo',
+        label: 'Ambo',
+        description: 'Mobile focused wallet and relayer acquired by MyCrypto.',
+        logo_url: '/images/explore/ambo.png',
+        theme_color: '#123A6F',
+        url: 'https://ambo.io/downloads/',
+        keywords: ['wallets'],
+    },
+    mobidex: {
+        name: 'mobidex',
+        label: 'Mobidex',
+        description: 'Mobile first open order book relayer.',
+        logo_url: '/images/explore/mobidex.png',
+        theme_color: '#F4B44C',
+        url: 'https://mobidex.io/',
+        keywords: ['wallets'],
+    },
+    imtoken: {
+        name: 'imtoken',
+        label: 'ImToken',
+        description: '100% mobile order book and one-click interface in the imToken app.',
+        logo_url: '/images/explore/imtoken.png',
+        theme_color: '#0791C0',
+        url: 'https://token.im/',
+        keywords: ['wallets'],
+    },
+    rex_relay: {
+        name: 'rex_relay',
+        label: 'Rex Relay',
+        description: 'Relayer as a service: build a relayer with no coding required.',
+        logo_url: '/images/explore/rex_relay.png',
+        theme_color: '#1E1F20',
+        url: 'https://www.rexrelay.com/',
+        keywords: ['infrastructure'],
+    },
+    pixura: {
+        name: 'pixura',
+        label: 'Pixura',
+        description: 'NFT marketplace as a service, powering art exchange SuperRare.',
+        logo_url: '/images/explore/pixura.png',
+        theme_color: '#1F5FF1',
+        url: 'https://pixura.io/#about',
+        keywords: ['infrastructure'],
+    },
+    zeroex_tracker: {
+        name: 'zeroex_tracker',
+        label: '0x Tracker',
+        description: 'Data analytics for the 0x ecosystem.',
+        logo_url: '/images/explore/zeroex_tracker.png',
+        theme_color: '#0A0830',
+        url: 'https://0xtracker.com/',
+        keywords: ['infrastructure'],
+    },
+    gods_unchained: {
+        name: 'gods_unchained',
+        label: 'Gods Unchained',
+        description: 'A next-generation trading card game pushing the boundaries of digital asset ownership.',
+        logo_url: '/images/explore/gods_unchained.png',
+        theme_color: '#000F0F',
+        url: 'https://www.godsunchained.com',
+        keywords: ['collectibles'],
+    },
 };
 
 export const EDITORIAL: ExploreTile[] = [
@@ -96,8 +265,8 @@ export const FILTERS: ExploreFilterMetadata[] = [
         filterType: ExploreFilterType.All,
     },
     {
-        label: 'Relayer',
-        name: 'relayer',
+        label: 'Tokens',
+        name: 'tokens',
         filterType: ExploreFilterType.Keyword,
     },
     {
@@ -105,34 +274,88 @@ export const FILTERS: ExploreFilterMetadata[] = [
         name: 'collectibles',
         filterType: ExploreFilterType.Keyword,
     },
+    {
+        label: 'Infrastructure',
+        name: 'infrastructure',
+        filterType: ExploreFilterType.Keyword,
+    },
+    {
+        label: 'Wallets',
+        name: 'wallets',
+        filterType: ExploreFilterType.Keyword,
+    },
+    {
+        label: 'Prediction Markets',
+        name: 'prediction_markets',
+        filterType: ExploreFilterType.Keyword,
+    },
 ];
 
-export const ORDERINGS: ExploreTilesOrderingMetadata[] = [
-    { label: 'Popular', ordering: ExploreTilesOrdering.Popular, type: ExploreTilesOrderingType.HardCodedByName },
-    {
+export const ORDERINGS: { [s: string]: ExploreTilesOrderingMetadata } = {
+    [ExploreTilesOrdering.Popular]: {
+        label: 'Popular',
+        ordering: ExploreTilesOrdering.Popular,
+        type: ExploreTilesOrderingType.HardCodedByName,
+        hardCoded: [
+            'radar_relay',
+            'veil',
+            'ethfinex',
+            'gods_unchained',
+            'zeroex_tracker',
+            'emoon',
+            'paradex',
+            'boxswap',
+            'imtoken',
+            'pixura',
+            'lake_project',
+            'openrelay',
+            'the_ocean',
+            'fordex',
+            'bamboo_relay',
+            'star_bit_ex',
+            'ledgerdex',
+            'tokenmom',
+            'token_jar',
+            'mobidex',
+            'fabrx',
+            'ambo',
+            'rex_relay',
+        ],
+    },
+    [ExploreTilesOrdering.RecentlyAdded]: {
         label: 'Recently Added',
         ordering: ExploreTilesOrdering.RecentlyAdded,
         type: ExploreTilesOrderingType.HardCodedByName,
+        hardCoded: [
+            'fabrx',
+            'ambo',
+            'fordex',
+            'pixura',
+            'tokenmom',
+            'lake_project',
+            'veil',
+            'gods_unchained',
+            'boxswap',
+            'rex_relay',
+            'emoon',
+            'zeroex_tracker',
+            'imtoken',
+            'openrelay',
+            'the_ocean',
+            'token_jar',
+            'ledgerdex',
+            'bamboo_relay',
+            'mobidex',
+            'star_bit_ex',
+            'ethfinex',
+            'radar_relay',
+            'paradex',
+        ],
     },
-    {
+    [ExploreTilesOrdering.Alphabetical]: {
         label: 'Alphabetical',
         ordering: ExploreTilesOrdering.Alphabetical,
-        type: ExploreTilesOrderingType.HardCodedByName,
+        type: ExploreTilesOrderingType.DynamicBySortFunction,
+        sort: (tiles: ExploreTile[]) => _.sortBy(tiles, t => t.name),
     },
-];
-
-export const BY_NAME_ORDERINGS: { [s: string]: string[] } = {
-    [ExploreTilesOrdering.Popular]: ['boxswap', 'veil', 'paradex', 'emoon', 'radar_relay', 'openrelay'],
-    [ExploreTilesOrdering.RecentlyAdded]: ['veil', 'boxswap', 'emoon', 'paradex', 'radar_relay', 'openrelay'],
-    [ExploreTilesOrdering.Alphabetical]: ['veil', 'boxswap', 'emoon', 'paradex', 'radar_relay', 'openrelay'],
 };
-
-export const AVAILABLE_ASSET_DATAS: string[] = [
-    '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359', // DAI
-    '0xf47261b0000000000000000000000000a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48', // USDC
-    '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef', // BAT
-    '0xf47261b000000000000000000000000005f4a42e251f2d52b8ed15e9fedaacfcef1fad27', // ZIL
-    '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942', // MANA
-    '0xf47261b00000000000000000000000000abdace70d3790235af448c88547603b945604ea', // DNT
-    '0xf47261b000000000000000000000000041e5560054824ea6b0732e656e3ad64e20e94e45', // CVC
-];

packages/website/ts/pages/explore/explore_dropdown.tsx

@@ -50,7 +50,7 @@ const SettingsIconWrapper = styled.div`
 
 export const SettingsWrapper = styled.div`
     position: relative;
-    @media (max-width: 36rem) {
+    @media (max-width: 64rem) {
         display: none;
     }
     &:hover > div {
@@ -106,15 +106,9 @@ export const DropdownWrap = styled.div<DropdownWrapInterface>`
         border-width: 11px;
         margin-left: -11px;
     }
-
     @media (max-width: 768px) {
         display: none;
     }
-    // display: block;
-    // visibility: visible;
-    // opacity: 1;
-    // transform: translate3d(0, 0, 0);
-    // transition: opacity 0.35s, transform 0.35s, visibility 0s;
 `;
 
 export interface ExploreSettingsDropdownProps {
@@ -183,23 +177,27 @@ export const OrderingWrapper = styled.div`
 
 const MobileSettingsWrapper = styled(SettingsWrapper)`
     display: none;
-    @media (max-width: 36rem) {
+    @media (max-width: 64rem) {
         display: block;
+        padding-bottom: 1rem;
+    }
+    @media (max-width: 36rem) {
         & > button {
             width: 100%;
         }
-        padding-bottom: 1rem;
     }
 `;
 
 const MobileDropdownWrap = styled(DropdownWrap)`
-    width: 100%;
     margin-top: 0;
+    @media (max-width: 36rem) {
+        width: 100%;
         left: 0;
         &:after,
         &:before {
             left: 50%;
         }
+    }
 `;
 
 interface ExploreMobileSettingsDropdownProps extends ExploreSettingsDropdownProps {

packages/website/ts/pages/explore/explore_grid_state_tile.tsx

@@ -20,7 +20,7 @@ export const EXPLORE_STATE_DIALOGS: { [s: string]: ExploreGridDialogTileProps }
     },
     EMPTY: {
         title: 'No projects found.',
-        description: 'Try deselecting a few tags or changing your search.',
+        description: 'Try changing your search.',
     },
 };
 

packages/website/ts/pages/explore/explore_grid_tile.tsx

@@ -30,13 +30,15 @@ export const ExploreGridTile = (props: ExploreProject) => {
             )}
             <ExploreGridTileLink onClick={onClick} href={props.url} target="_blank">
                 <ExploreGridHeroWell color={props.theme_color}>
-                    <Image src={props.logo_url} height={'90px'} />
+                    <Image src={props.logo_url} height={'90px'} maxWidth={'100px'} />
                 </ExploreGridHeroWell>
                 <ExploreGridContentWell>
                     <Heading marginBottom={'0.5rem'} size={'small'}>
                         {props.label}
                     </Heading>
-                    <Paragraph marginBottom={'0.5rem'}>{props.description}</Paragraph>
+                    <Paragraph style={{ minHeight: '4.2rem' }} marginBottom={'0.5rem'}>
+                        {props.description}
+                    </Paragraph>
                 </ExploreGridContentWell>
             </ExploreGridTileLink>
         </ExploreGridTileWrapper>

packages/website/ts/types.ts

@@ -243,7 +243,7 @@ export type ContractInstance = any; // TODO: add type definition for Contract
 
 export interface ExploreProjectInstantMetadata {
     orderSource: string;
-    availableAssetDatas?: string;
+    availableAssetDatas?: string[];
 }
 
 export interface ExploreProject {
@@ -262,6 +262,8 @@ export interface ExploreProject {
 export enum ExploreAnalyticAction {
     InstantClick = 'INSTANT_CLICK',
     LinkClick = 'LINK_CLICK',
+    FilterClick = 'FILTER_CLICK',
+    QuerySearched = 'QUERY_SEARCHED',
 }
 
 export enum ExploreTilesOrdering {
@@ -273,12 +275,15 @@ export enum ExploreTilesOrdering {
 export enum ExploreTilesOrderingType {
     HardCodedByName = 'HARDCODED_BY_NAME',
     // for other ordering logics in the future
+    DynamicBySortFunction = 'DYNAMIC_BY_SORT',
 }
 
 export interface ExploreTilesOrderingMetadata {
     label: string;
     ordering: ExploreTilesOrdering;
     type: ExploreTilesOrderingType;
+    hardCoded?: string[];
+    sort?(tiles: ExploreTile[]): ExploreTile[];
 }
 
 export enum ExploreTilesModifiers {

packages/website/ts/utils/document_meta_constants.tsx

@@ -12,7 +12,7 @@ export const documentConstants: { [s: string]: DocumentMetadata } = {
         keywords: '',
     },
     EXPLORE: {
-        title: 'Explore 0x',
+        title: 'Explore the 0x Ecosystem',
         description:
             '0x Protocol is free, open-source infrastructure that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens.',
         keywords: '',

yarn.lock

@@ -13620,15 +13620,6 @@ react-dom@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-dom@^16.4.2:
-  version "16.8.5"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.5.tgz#b3e37d152b49e07faaa8de41fdf562be3463335e"
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.5"
-
 react-dom@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
@@ -13932,15 +13923,6 @@ react@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@^16.4.2:
-  version "16.8.5"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.5.tgz#49be3b655489d74504ad994016407e8a0445de66"
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.5"
-
 react@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
@@ -14812,13 +14794,6 @@ schedule@^0.5.0:
   dependencies:
     object-assign "^4.1.1"
 
-scheduler@^0.13.5:
-  version "0.13.5"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.5.tgz#b7226625167041298af3b98088a9dbbf6d7733a8"
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^0.4.4:
   version "0.4.7"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"