merge development

2018-10-18 11:35:07 +01:00
parent c333d093b5 bd8ba14bf4
commit cdd650d0eb
158 changed files with 2034 additions and 829 deletions
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading';
 import { Menu, MenuTheme } from 'ts/components/portal/menu';
 import { Section } from 'ts/components/portal/section';
 import { TextHeader } from 'ts/components/portal/text_header';
-import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
+import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
@@ -539,6 +539,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
    }
    private _renderRelayerIndexSection(): React.ReactNode {
        const isMobile = utils.isMobileWidth(this.props.screenWidth);
+        // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume
        return (
            <Section
                header={!isMobile && <TextHeader labelText="0x Relayers" />}
@@ -549,7 +550,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                {this._renderStartOnboarding()}
                            </Container>
                        )}
-                        <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />
+                        <RelayerIndex
+                            networkId={this.props.networkId}
+                            screenWidth={this.props.screenWidth}
+                            cellStyle={RelayerIndexCellStyle.Minimized}
+                        />
                    </Container>
                }
            />
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
 import { utils } from 'ts/utils/utils';

+export enum RelayerGridTileStyle {
+    Expanded = 0,
+    Minimized,
+}
+
 export interface RelayerGridTileProps {
    relayerInfo: WebsiteBackendRelayerInfo;
    networkId: number;
+    style: RelayerGridTileStyle;
 }

 const styles: Styles = {
@@ -30,10 +36,14 @@ const styles: Styles = {
        height: '100%',
        boxSizing: 'border-box',
    },
-    header: {
+    expandedHeader: {
        height: '50%',
        width: '100%',
    },
+    minimizedHeader: {
+        height: '100%',
+        width: '100%',
+    },
    body: {
        height: '50%',
        width: '100%',
@@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
        !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
            ? props.relayerInfo.primaryColor
            : FALLBACK_PRIMARY_COLOR;
+    const isExpanded = props.style === RelayerGridTileStyle.Expanded;
+    const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader;
    return (
        <Island style={styles.root} Component={GridTile}>
            <div style={styles.innerDiv} onClick={onClick}>
-                <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}>
                    <Image
                        className="mx-auto"
                        src={props.relayerInfo.logoImgUrl}
@@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
                        height={RELAYER_ICON_HEIGHT}
                    />
                </div>
-                <div style={styles.body}>
-                    <div className="pb1" style={styles.relayerNameLabel}>
-                        {props.relayerInfo.name}
-                    </div>
-                    <Section titleText="Weekly Trade Volume">
-                        {!_.isUndefined(weeklyTxnVolume) && (
-                            <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
-                        )}
-                    </Section>
-                    <Container marginTop="10px">
-                        <Section titleText="Top Tokens">
-                            {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+                {isExpanded && (
+                    <div style={styles.body}>
+                        <div className="pb1" style={styles.relayerNameLabel}>
+                            {props.relayerInfo.name}
+                        </div>
+                        <Section titleText="Weekly Trade Volume">
+                            {!_.isUndefined(weeklyTxnVolume) && (
+                                <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
+                            )}
                        </Section>
-                    </Container>
-                </div>
+                        <Container marginTop="10px">
+                            <Section titleText="Top Tokens">
+                                {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+                            </Section>
+                        </Container>
+                    </div>
+                )}
            </div>
        </Island>
    );
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress';
 import { GridList } from 'material-ui/GridList';
 import * as React from 'react';

-import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile';
 import { Retry } from 'ts/components/ui/retry';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';

+export enum RelayerIndexCellStyle {
+    Expanded = 0,
+    Minimized,
+}
+
 export interface RelayerIndexProps {
    networkId: number;
    screenWidth: ScreenWidths;
+    cellStyle: RelayerIndexCellStyle;
 }

 interface RelayerIndexState {
@@ -18,7 +24,8 @@ interface RelayerIndexState {
    error?: Error;
 }

-const CELL_HEIGHT = 290;
+const CELL_HEIGHT_EXPANDED = 290;
+const CELL_HEIGHT_MINIMIZED = 225;
 const NUMBER_OF_COLUMNS_LARGE = 3;
 const NUMBER_OF_COLUMNS_MEDIUM = 2;
 const NUMBER_OF_COLUMNS_SMALL = 2;
@@ -61,15 +68,23 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                numberOfRelayers,
                this._numberOfColumnsForScreenWidth(this.props.screenWidth),
            );
+            const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded;
+            const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED;
+            const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized;
            return (
                <GridList
-                    cellHeight={CELL_HEIGHT}
+                    cellHeight={cellHeight}
                    cols={numberOfColumns}
                    padding={GRID_PADDING}
                    style={{ marginTop: -10, marginBottom: 0 }}
                >
                    {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
-                        <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+                        <RelayerGridTile
+                            key={index}
+                            relayerInfo={relayerInfo}
+                            networkId={this.props.networkId}
+                            style={gridTileStyle}
+                        />
                    ))}
                </GridList>
            );
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -85,6 +85,7 @@ const DOC_WEBSITE_PATHS_TO_KEY = {
    [WebsitePaths.ZeroExJs]: Key.ZeroExJs,
    [WebsitePaths.OrderUtils]: Key.OrderUtils,
    [WebsitePaths.OrderWatcher]: Key.OrderWatcher,
+    [WebsitePaths.AssetBuyer]: Key.AssetBuyer,
 };

 const DEFAULT_HEIGHT = 68;
--- a/packages/website/ts/containers/asset_buyer_documentation.ts
+++ b/packages/website/ts/containers/asset_buyer_documentation.ts
@@ -0,0 +1,69 @@
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { DocPackages } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+/* tslint:disable:no-var-requires */
+const IntroMarkdown = require('md/docs/asset_buyer/introduction');
+const InstallationMarkdown = require('md/docs/asset_buyer/installation');
+const UsageMarkdown = require('md/docs/asset_buyer/usage');
+/* tslint:enable:no-var-requires */
+
+const markdownSections = {
+    introduction: 'introduction',
+    installation: 'installation',
+    usage: 'usage',
+};
+
+const docsInfoConfig: DocsInfoConfig = {
+    id: DocPackages.AssetBuyer,
+    packageName: '@0xproject/asset-buyer',
+    type: SupportedDocJson.TypeDoc,
+    displayName: 'AssetBuyer',
+    packageUrl: 'https://github.com/0xProject/0x-monorepo',
+    markdownMenu: {
+        introduction: [markdownSections.introduction],
+        install: [markdownSections.installation],
+        usage: [markdownSections.usage],
+    },
+    sectionNameToMarkdownByVersion: {
+        '0.0.1': {
+            [markdownSections.introduction]: IntroMarkdown,
+            [markdownSections.installation]: InstallationMarkdown,
+            [markdownSections.usage]: UsageMarkdown,
+        },
+    },
+    markdownSections,
+};
+const docsInfo = new DocsInfo(docsInfoConfig);
+
+interface ConnectedState {
+    docsVersion: string;
+    availableDocVersions: string[];
+    docsInfo: DocsInfo;
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({
+    docsVersion: state.docsVersion,
+    availableDocVersions: state.availableDocVersions,
+    translate: state.translate,
+    docsInfo,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
+    DocPageComponent,
+);
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -69,6 +69,9 @@ const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async (
 const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () =>
    import(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'),
 );
+const LazyAssetBuyerDocumentation = createLazyComponent('Documentation', async () =>
+    import(/* webpackChunkName: "assetBuyerDocs" */ 'ts/containers/asset_buyer_documentation'),
+);

 const DOCUMENT_TITLE = '0x: The Protocol for Trading Tokens';
 const DOCUMENT_DESCRIPTION = 'An Open Protocol For Decentralized Exchange On The Ethereum Blockchain';
@@ -134,8 +137,11 @@ render(
                                    path={`${WebsitePaths.EthereumTypes}/:version?`}
                                    component={LazyEthereumTypesDocumentation}
                                />
+                                <Route
+                                    path={`${WebsitePaths.AssetBuyer}/:version?`}
+                                    component={LazyAssetBuyerDocumentation}
+                                />
                                <Route path={WebsitePaths.Docs} component={DocsHome as any} />
-
                                {/* Legacy endpoints */}
                                <Route
                                    path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`}
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -243,9 +243,10 @@ const teamRow9: ProfileInfo[] = [
    {
        name: 'Steve Klebanoff',
        title: 'Senior Engineer',
-        description: ` Full-stack engineer. Previously Staff Software Engineer at Appfolio. Computer Science & Cognitive Psychology at Northeastern University.`,
+        description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`,
        image: 'images/team/steve.png',
        linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
+        github: 'https://github.com/steveklebanoff',
    },
 ];

--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -43,6 +43,7 @@ const docIdToSubpackageName: { [id: string]: string } = {
    [DocPackages.OrderUtils]: 'order-utils',
    [DocPackages.OrderWatcher]: 'order-watcher',
    [DocPackages.EthereumTypes]: 'ethereum-types',
+    [DocPackages.AssetBuyer]: 'asset-buyer',
 };

 export interface DocPageProps {
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -364,6 +364,7 @@ export enum WebsitePaths {
    Subproviders = '/docs/subproviders',
    OrderUtils = '/docs/order-utils',
    EthereumTypes = '/docs/ethereum-types',
+    AssetBuyer = '/docs/asset-buyer',
    Careers = '/careers',
 }

@@ -380,6 +381,7 @@ export enum DocPackages {
    EthereumTypes = 'ETHEREUM_TYPES',
    ContractWrappers = 'CONTRACT_WRAPPERS',
    OrderWatcher = 'ORDER_WATCHER',
+    AssetBuyer = 'ASSET_BUYER',
 }

 export enum Key {
@@ -441,6 +443,7 @@ export enum Key {
    ZeroExJs = '0X_JS',
    ContractWrappers = 'CONTRACT_WRAPPERS',
    OrderWatcher = 'ORDER_WATCHER',
+    AssetBuyer = 'ASSET_BUYER',
    Blog = 'BLOG',
    Forum = 'FORUM',
    Connect = 'CONNECT',