From e744e4cd989bd3ae1070c59f7baa8097f18b8b06 Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Fri, 22 Dec 2017 15:05:32 +0100 Subject: Apply prettier config --- packages/website/ts/pages/about/about.tsx | 97 ++--- packages/website/ts/pages/about/profile.tsx | 54 +-- .../website/ts/pages/documentation/comment.tsx | 7 +- .../website/ts/pages/documentation/custom_enum.tsx | 9 +- .../website/ts/pages/documentation/docs_info.ts | 9 +- .../ts/pages/documentation/documentation.tsx | 246 ++++++------ packages/website/ts/pages/documentation/enum.tsx | 6 +- .../ts/pages/documentation/event_definition.tsx | 36 +- .../website/ts/pages/documentation/interface.tsx | 32 +- .../ts/pages/documentation/method_block.tsx | 106 ++--- .../ts/pages/documentation/method_signature.tsx | 60 +-- .../website/ts/pages/documentation/source_link.tsx | 17 +- packages/website/ts/pages/documentation/type.tsx | 113 +++--- .../ts/pages/documentation/type_definition.tsx | 68 ++-- packages/website/ts/pages/faq/faq.tsx | 374 ++++++++---------- packages/website/ts/pages/faq/question.tsx | 18 +- packages/website/ts/pages/landing/landing.tsx | 427 +++++++++------------ packages/website/ts/pages/not_found.tsx | 13 +- packages/website/ts/pages/shared/anchor_title.tsx | 21 +- .../ts/pages/shared/markdown_code_block.tsx | 8 +- .../website/ts/pages/shared/markdown_section.tsx | 23 +- .../ts/pages/shared/nested_sidebar_menu.tsx | 107 +++--- .../website/ts/pages/shared/section_header.tsx | 10 +- .../website/ts/pages/shared/version_drop_down.tsx | 10 +- packages/website/ts/pages/wiki/wiki.tsx | 96 +++-- 25 files changed, 855 insertions(+), 1112 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 722e819ff..3ff16f9fe 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {Profile} from 'ts/pages/about/profile'; -import {ProfileInfo, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { Profile } from 'ts/pages/about/profile'; +import { ProfileInfo, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const teamRow1: ProfileInfo[] = [ { @@ -155,73 +155,61 @@ export class About extends React.Component { } public render() { return ( -
- +
+ -
-
-
- About us: -
+
+
+
About us:
- Our team is a diverse and globally distributed group with backgrounds - in engineering, research, business and design. We are passionate about - decentralized technology and its potential to act as an equalizing force - in the world. + Our team is a diverse and globally distributed group with backgrounds in engineering, + research, business and design. We are passionate about decentralized technology and its + potential to act as an equalizing force in the world.
-
- {this._renderProfiles(teamRow1)} -
-
- {this._renderProfiles(teamRow2)} -
+
{this._renderProfiles(teamRow1)}
+
{this._renderProfiles(teamRow2)}
Advisors:
-
- {this._renderProfiles(advisors)} -
+
{this._renderProfiles(advisors)}
-
-
+
+
WE'RE HIRING
We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. @@ -237,13 +225,8 @@ export class About extends React.Component { const colSize = utils.getColSize(numIndiv); return _.map(profiles, profile => { return ( -
- +
+
); }); diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index ef74f268a..bd2316f31 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {ProfileInfo, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { ProfileInfo, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; const IMAGE_DIMENSION = 149; const styles: Styles = { @@ -24,43 +24,30 @@ interface ProfileProps { export function Profile(props: ProfileProps) { return ( -
-
-
- +
+
+
+
-
+
{props.profileInfo.name}
- {!_.isUndefined(props.profileInfo.title) && + {!_.isUndefined(props.profileInfo.title) && (
{props.profileInfo.title.toUpperCase()}
- } -
+ )} +
{props.profileInfo.description}
-
+
{renderSocialMediaIcons(props.profileInfo)}
@@ -84,13 +71,8 @@ function renderSocialMediaIcon(iconName: string, url: string) { return ( ); diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx index 9627fdcdc..23cfd96bd 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; -import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block'; +import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; interface CommentProps { comment: string; @@ -15,10 +15,7 @@ const defaultProps = { export const Comment: React.SFC = (props: CommentProps) => { return (
- +
); }; diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx index 7dced9b60..8d50a2f52 100644 --- a/packages/website/ts/pages/documentation/custom_enum.tsx +++ b/packages/website/ts/pages/documentation/custom_enum.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {CustomType} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { CustomType } from 'ts/types'; +import { utils } from 'ts/utils/utils'; const STRING_ENUM_CODE_PREFIX = ' strEnum('; @@ -23,8 +23,9 @@ export function CustomEnum(props: CustomEnumProps) { return ( {`{`} - {'\t'}{enumValues} -
+ {'\t'} + {enumValues} +
{`}`} ); diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index b88b247e8..4b1ec122a 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -18,7 +18,7 @@ export class DocsInfo { public docsJsonRoot: string; public menu: DocsMenu; public sections: SectionsMap; - public sectionNameToMarkdown: {[sectionName: string]: string}; + public sectionNameToMarkdown: { [sectionName: string]: string }; private _docsInfo: DocsInfoConfig; constructor(config: DocsInfoConfig) { this.displayName = config.displayName; @@ -41,7 +41,7 @@ export class DocsInfo { const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName]; return modulePathsIfExists; } - public getMenu(selectedVersion?: string): {[section: string]: string[]} { + public getMenu(selectedVersion?: string): { [section: string]: string[] } { if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) { return this._docsInfo.menu; } @@ -55,8 +55,7 @@ export class DocsInfo { finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => { const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName]; if (!_.isUndefined(versionIntroducedIfExists)) { - const existsInSelectedVersion = compareVersions(selectedVersion, - versionIntroducedIfExists) >= 0; + const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0; return existsInSelectedVersion; } else { return true; @@ -106,7 +105,7 @@ export class DocsInfo { public isVisibleConstructor(sectionName: string): boolean { return _.includes(this._docsInfo.visibleConstructors, sectionName); } - public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat { + public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat { return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this); } } diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 1731c19fe..2315847ad 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -3,23 +3,21 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { - scroller, -} from 'react-scroll'; +import { scroller } from 'react-scroll'; import semverSort = require('semver-sort'); -import {TopBar} from 'ts/components/top_bar'; -import {Badge} from 'ts/components/ui/badge'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {EventDefinition} from 'ts/pages/documentation/event_definition'; -import {MethodBlock} from 'ts/pages/documentation/method_block'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {Type} from 'ts/pages/documentation/type'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Dispatcher} from 'ts/redux/dispatcher'; +import { TopBar } from 'ts/components/top_bar'; +import { Badge } from 'ts/components/ui/badge'; +import { Comment } from 'ts/pages/documentation/comment'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { EventDefinition } from 'ts/pages/documentation/event_definition'; +import { MethodBlock } from 'ts/pages/documentation/method_block'; +import { SourceLink } from 'ts/pages/documentation/source_link'; +import { Type } from 'ts/pages/documentation/type'; +import { TypeDefinition } from 'ts/pages/documentation/type_definition'; +import { MarkdownSection } from 'ts/pages/shared/markdown_section'; +import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; +import { SectionHeader } from 'ts/pages/shared/section_header'; +import { Dispatcher } from 'ts/redux/dispatcher'; import { AddressByContractName, DocAgnosticFormat, @@ -33,15 +31,15 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {docUtils} from 'ts/utils/doc_utils'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { docUtils } from 'ts/utils/doc_utils'; +import { utils } from 'ts/utils/utils'; const SCROLL_TOP_ID = 'docsScrollTop'; -const networkNameToColor: {[network: string]: string} = { +const networkNameToColor: { [network: string]: string } = { [Networks.kovan]: colors.purple, [Networks.ropsten]: colors.red, [Networks.mainnet]: colors.turquois, @@ -79,8 +77,7 @@ const styles: Styles = { }, }; -export class Documentation extends - React.Component { +export class Documentation extends React.Component { constructor(props: DocumentationAllProps) { super(props); this.state = { @@ -96,12 +93,12 @@ export class Documentation extends this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); } public render() { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ? - {} : - this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); return (
- + - {_.isUndefined(this.state.docAgnosticFormat) ? -
+ {_.isUndefined(this.state.docAgnosticFormat) ? ( +
-
Loading documentation...
+
+ Loading documentation... +
-
: -
+
+ ) : ( +
); } @@ -224,136 +214,120 @@ export class Documentation extends ); }); return ( -
+
-
- -
- {this._renderNetworkBadgesIfExists(sectionName)} +
+ +
+ {this._renderNetworkBadgesIfExists(sectionName)}
- {docSection.comment && - - } + {docSection.comment && } {docSection.constructors.length > 0 && - this.props.docsInfo.isVisibleConstructor(sectionName) && -
-

Constructor

- {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} -
- } - {docSection.properties.length > 0 && + this.props.docsInfo.isVisibleConstructor(sectionName) && ( +
+

Constructor

+ {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} +
+ )} + {docSection.properties.length > 0 && (

Properties

{propertyDefs}
- } - {docSection.methods.length > 0 && + )} + {docSection.methods.length > 0 && (

Methods

{methodDefs}
- } - {!_.isUndefined(docSection.events) && docSection.events.length > 0 && -
-

Events

-
{eventDefs}
-
- } - {!_.isUndefined(typeDefs) && typeDefs.length > 0 && -
-
{typeDefs}
-
- } + )} + {!_.isUndefined(docSection.events) && + docSection.events.length > 0 && ( +
+

Events

+
{eventDefs}
+
+ )} + {!_.isUndefined(typeDefs) && + typeDefs.length > 0 && ( +
+
{typeDefs}
+
+ )}
); } private _renderNetworkBadgesIfExists(sectionName: string) { const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion]; - const badges = _.map(networkToAddressByContractName, + const badges = _.map( + networkToAddressByContractName, (addressByContractName: AddressByContractName, networkName: string) => { const contractAddress = addressByContractName[sectionName]; if (_.isUndefined(contractAddress)) { return null; } const linkIfExists = utils.getEtherScanLinkIfExists( - contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address, + contractAddress, + constants.NETWORK_ID_BY_NAME[networkName], + EtherscanLinkSuffixes.Address, ); return ( - + ); - }); + }, + ); return badges; } - private _renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[], - sectionName: string, - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + private _renderConstructors( + constructors: SolidityMethod[] | TypescriptMethod[], + sectionName: string, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { const constructorDefs = _.map(constructors, constructor => { - return this._renderMethodBlocks( - constructor, sectionName, constructor.isConstructor, typeDefinitionByName, - ); + return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName); }); - return ( -
- {constructorDefs} -
- ); + return
{constructorDefs}
; } private _renderProperty(sectionName: string, property: Property): React.ReactNode { return ( -
+
{property.name}: - + - {property.source && + {property.source && ( - } - {property.comment && - - } + )} + {property.comment && }
); } - private _renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string, - isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + private _renderMethodBlocks( + method: SolidityMethod | TypescriptMethod, + sectionName: string, + isConstructor: boolean, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { return ( ); } @@ -364,7 +338,11 @@ export class Documentation extends hash = SCROLL_TOP_ID; // scroll to the top } - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); + scroller.scrollTo(hash, { + duration: 0, + offset: 0, + containerId: 'documentation', + }); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot); @@ -384,14 +362,18 @@ export class Documentation extends const versionFileNameToFetch = versionToFileName[versionToFetch]; const versionDocObj = await docUtils.getJSONDocFileAsync( - versionFileNameToFetch, this.props.docsInfo.docsJsonRoot, + versionFileNameToFetch, + this.props.docsInfo.docsJsonRoot, ); const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); - this.setState({ - docAgnosticFormat, - }, () => { - this._scrollToHash(); - }); + this.setState( + { + docAgnosticFormat, + }, + () => { + this._scrollToHash(); + }, + ); } } diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx index b5fbc4bd2..7dfdee771 100644 --- a/packages/website/ts/pages/documentation/enum.tsx +++ b/packages/website/ts/pages/documentation/enum.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {EnumValue} from 'ts/types'; +import { EnumValue } from 'ts/types'; interface EnumProps { values: EnumValue[]; @@ -14,8 +14,8 @@ export function Enum(props: EnumProps) { return ( {`{`} - {values} -
+ {values} +
{`}`} ); diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 2fef019d2..0e53e38e7 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,10 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Type} from 'ts/pages/documentation/type'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {Event, EventArg, HeaderSizes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Type } from 'ts/pages/documentation/type'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { Event, EventArg, HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; @@ -29,7 +29,7 @@ export class EventDefinition extends React.Component @@ -39,29 +39,24 @@ export class EventDefinition extends React.Component -
+ 
-                        
-                            {this._renderEventCode()}
-                        
+                        {this._renderEventCode()}
); } private _renderEventCode() { - const indexed = indexed; + const indexed = indexed; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { const type = ( - + ); return ( - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type}, + {eventArg.name} + {eventArg.isIndexed ? indexed : ''}: {type}, ); }); @@ -71,9 +66,10 @@ export class EventDefinition extends React.Component {`{`} -
- {'\t'}{argList} -
+
+ {'\t'} + {argList} +
{`}`} ); diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx index 1a6b562fe..16a772125 100644 --- a/packages/website/ts/pages/documentation/interface.tsx +++ b/packages/website/ts/pages/documentation/interface.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {Type} from 'ts/pages/documentation/type'; -import {CustomType, TypeDocTypes} from 'ts/types'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { Type } from 'ts/pages/documentation/type'; +import { CustomType, TypeDocTypes } from 'ts/types'; interface InterfaceProps { type: CustomType; @@ -17,12 +17,9 @@ export function Interface(props: InterfaceProps) { return ( {property.name}:{' '} - {property.type.typeDocType !== TypeDocTypes.Reflection ? - : + {property.type.typeDocType !== TypeDocTypes.Reflection ? ( + + ) : ( - }, + )}, ); }); @@ -42,11 +39,11 @@ export function Interface(props: InterfaceProps) { {is.keyName}: ); - properties.push(( + properties.push( [{param}]: {is.valueName}, - - )); + , + ); } const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => { return [prev, '\n\t', curr]; @@ -54,9 +51,10 @@ export function Interface(props: InterfaceProps) { return ( {`{`} -
- {'\t'}{propertyList} -
+
+ {'\t'} + {propertyList} +
{`}`} ); diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 147bc34d6..dfde5931b 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,23 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import { - HeaderSizes, - Parameter, - SolidityMethod, - Styles, - TypeDefinitionByName, - TypescriptMethod, -} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {typeDocUtils} from 'ts/utils/typedoc_utils'; +import { Comment } from 'ts/pages/documentation/comment'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { SourceLink } from 'ts/pages/documentation/source_link'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { typeDocUtils } from 'ts/utils/typedoc_utils'; interface MethodBlockProps { - method: SolidityMethod|TypescriptMethod; + method: SolidityMethod | TypescriptMethod; sectionName: string; libraryVersion: string; typeDefinitionByName: TypeDefinitionByName; @@ -56,22 +49,16 @@ export class MethodBlock extends React.Component - {!method.isConstructor && + {!method.isConstructor && (
- {(method as TypescriptMethod).isStatic && - this._renderChip('Static') - } - {(method as SolidityMethod).isConstant && - this._renderChip('Constant') - } - {(method as SolidityMethod).isPayable && - this._renderChip('Payable') - } + {(method as TypescriptMethod).isStatic && this._renderChip('Static')} + {(method as SolidityMethod).isConstant && this._renderChip('Constant')} + {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
- } + )} - {(method as TypescriptMethod).source && + {(method as TypescriptMethod).source && ( - } - {method.comment && - - } - {method.parameters && !_.isEmpty(method.parameters) && -
-

- ARGUMENTS -

- {this._renderParameterDescriptions(method.parameters)} -
- } - {method.returnComment && + )} + {method.comment && } + {method.parameters && + !_.isEmpty(method.parameters) && ( +
+

+ ARGUMENTS +

+ {this._renderParameterDescriptions(method.parameters)} +
+ )} + {method.returnComment && (
-

+

RETURNS

- +
- } + )}
); } private _renderChip(text: string) { return ( -
+
{text}
); @@ -146,22 +118,16 @@ export class MethodBlock extends React.Component
-
- {parameter.name} -
-
+
{parameter.name}
+
{isOptional && 'optional'}
- {parameter.comment && - - } + {parameter.comment && }
); diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 366d4c13e..041dcd093 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -1,12 +1,12 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Type} from 'ts/pages/documentation/type'; -import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types'; -import {constants} from 'ts/utils/constants'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Type } from 'ts/pages/documentation/type'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface MethodSignatureProps { - method: TypescriptMethod|SolidityMethod; + method: TypescriptMethod | SolidityMethod; sectionName: string; shouldHideMethodName?: boolean; shouldUseArrowSyntax?: boolean; @@ -21,31 +21,28 @@ const defaultProps = { export const MethodSignature: React.SFC = (props: MethodSignatureProps) => { const sectionName = constants.TYPES_SECTION_NAME; - const parameters = renderParameters( - props.method, props.docsInfo, sectionName, props.typeDefinitionByName, - ); + const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => { return [prev, ', ', curr]; }); const methodName = props.shouldHideMethodName ? '' : props.method.name; - const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ? - undefined : - renderTypeParameter( - props.method, props.docsInfo, sectionName, props.typeDefinitionByName, - ); + const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) + ? undefined + : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); return ( - {props.method.callPath}{methodName}{typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '} - {' '} - {props.method.returnType && + {props.method.callPath} + {methodName} + {typeParameterIfExists}({paramString}) + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {props.method.returnType && ( - } + )} ); }; @@ -53,8 +50,10 @@ export const MethodSignature: React.SFC = (props: MethodSi MethodSignature.defaultProps = defaultProps; function renderParameters( - method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo, - sectionName: string, typeDefinitionByName?: TypeDefinitionByName, + method: TypescriptMethod | SolidityMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, ) { const parameters = method.parameters; const params = _.map(parameters, (p: Parameter) => { @@ -69,7 +68,8 @@ function renderParameters( ); return ( - {p.name}{isOptional && '?'}: {type} + {p.name} + {isOptional && '?'}: {type} ); }); @@ -77,19 +77,21 @@ function renderParameters( } function renderTypeParameter( - method: TypescriptMethod, docsInfo: DocsInfo, - sectionName: string, typeDefinitionByName?: TypeDefinitionByName, + method: TypescriptMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, ) { const typeParameter = method.typeParameter; const typeParam = ( {`<${typeParameter.name} extends `} - + {`>`} ); diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 1a3b58f81..6588ee39e 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Source} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { Source } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface SourceLinkProps { source: Source; @@ -10,9 +10,7 @@ interface SourceLinkProps { subPackageName: string; } -const packagesWithNamespace = [ - 'connect', -]; +const packagesWithNamespace = ['connect']; export function SourceLink(props: SourceLinkProps) { const src = props.source; @@ -24,13 +22,8 @@ export function SourceLink(props: SourceLinkProps) { } const sourceCodeUrl = `${url}/blob/${tagPrefix}%40${props.version}/packages/${pkg}/${src.fileName}#L${src.line}`; return ( -
- + diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 6182b147a..e989e7129 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,16 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; +import { Link as ScrollLink } from 'react-scroll'; import * as ReactTooltip from 'react-tooltip'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { TypeDefinition } from 'ts/pages/documentation/type_definition'; +import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; // Some types reference other libraries. For these types, we want to link the user to the relevant documentation. -const typeToUrl: {[typeName: string]: string} = { +const typeToUrl: { [typeName: string]: string } = { Web3: constants.URL_WEB3_DOCS, Provider: constants.URL_WEB3_PROVIDER_DOCS, BigNumber: constants.URL_BIGNUMBERJS_GITHUB, @@ -18,13 +18,13 @@ const typeToUrl: {[typeName: string]: string} = { LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT, }; -const typePrefix: {[typeName: string]: string} = { +const typePrefix: { [typeName: string]: string } = { Provider: 'Web3', DecodedLogEntryEvent: 'Web3', LogEntryEvent: 'Web3', }; -const typeToSection: {[typeName: string]: string} = { +const typeToSection: { [typeName: string]: string } = { ExchangeWrapper: 'exchange', TokenWrapper: 'token', TokenRegistryWrapper: 'tokenRegistry', @@ -48,7 +48,7 @@ export function Type(props: TypeProps): any { const isReference = type.typeDocType === TypeDocTypes.Reference; const isArray = type.typeDocType === TypeDocTypes.Array; let typeNameColor = 'inherit'; - let typeName: string|React.ReactNode; + let typeName: string | React.ReactNode; let typeArgs: React.ReactNode[] = []; switch (type.typeDocType) { case TypeDocTypes.Intrinsic: @@ -130,27 +130,29 @@ export function Type(props: TypeProps): any { return [prev, ', ', curr]; }); - const typeNameUrlIfExists = typeToUrl[(typeName as string)]; - const typePrefixIfExists = typePrefix[(typeName as string)]; - const sectionNameIfExists = typeToSection[(typeName as string)]; + const typeNameUrlIfExists = typeToUrl[typeName as string]; + const typePrefixIfExists = typePrefix[typeName as string]; + const sectionNameIfExists = typeToSection[typeName as string]; if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( - {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}{typeName} + {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''} + {typeName} ); - } else if ((isReference || isArray) && - (props.docsInfo.isPublicType(typeName as string) || - !_.isUndefined(sectionNameIfExists))) { + } else if ( + (isReference || isArray) && + (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists)) + ) { const id = Math.random().toString(); - const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ? - `${props.sectionName}-${typeName}` : - sectionNameIfExists; + const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) + ? `${props.sectionName}-${typeName}` + : sectionNameIfExists; let typeDefinition; if (props.typeDefinitionByName) { typeDefinition = props.typeDefinitionByName[typeName as string]; @@ -162,46 +164,49 @@ export function Type(props: TypeProps): any { duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.DOCS_CONTAINER_ID} > - {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? - - {typeName} - : - - {typeName} - - - - - } + {typeName} + + ) : ( + + {typeName} + + + + + )} ); } return ( - {typeName} - {isArray && '[]'}{!_.isEmpty(typeArgs) && + {typeName} + {isArray && '[]'} + {!_.isEmpty(typeArgs) && ( - {'<'}{commaSeparatedTypeArgs}{'>'} + {'<'} + {commaSeparatedTypeArgs} + {'>'} - } + )} ); } diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index 25499a6d0..d46eec76c 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -1,16 +1,16 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Comment} from 'ts/pages/documentation/comment'; -import {CustomEnum} from 'ts/pages/documentation/custom_enum'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {Enum} from 'ts/pages/documentation/enum'; -import {Interface} from 'ts/pages/documentation/interface'; -import {MethodSignature} from 'ts/pages/documentation/method_signature'; -import {Type} from 'ts/pages/documentation/type'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { Comment } from 'ts/pages/documentation/comment'; +import { CustomEnum } from 'ts/pages/documentation/custom_enum'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Enum } from 'ts/pages/documentation/enum'; +import { Interface } from 'ts/pages/documentation/interface'; +import { MethodSignature } from 'ts/pages/documentation/method_signature'; +import { Type } from 'ts/pages/documentation/type'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; interface TypeDefinitionProps { sectionName: string; @@ -45,21 +45,13 @@ export class TypeDefinition extends React.Component + ); break; case KindString.Variable: typePrefix = 'Enum'; - codeSnippet = ( - - ); + codeSnippet = ; break; case KindString.Enumeration: @@ -70,28 +62,21 @@ export class TypeDefinition extends React.Component - ); + codeSnippet = ; break; case KindString.TypeAlias: typePrefix = 'Type Alias'; codeSnippet = ( - - type - {customType.name} ={' '} - {customType.type.typeDocType !== TypeDocTypes.Reflection ? + type {customType.name} ={' '} + {customType.type.typeDocType !== TypeDocTypes.Reflection ? ( : + /> + ) : ( - } + )} ); break; @@ -113,7 +98,7 @@ export class TypeDefinition extends React.Component @@ -123,19 +108,12 @@ export class TypeDefinition extends React.Component -
+ 
-                        
-                            {codeSnippet}
-                        
+                        {codeSnippet}
- {customType.comment && - - } + {customType.comment && }
); } diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c5afcb79f..b4b5214a2 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {Question} from 'ts/pages/faq/question'; -import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { Question } from 'ts/pages/faq/question'; +import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; export interface FAQProps { source: string; @@ -30,14 +30,19 @@ const sections: FAQSection[] = [ prompt: 'What is 0x?', answer: (
- At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, - low friction exchange of Ethereum-based assets. Developers can use 0x as a platform - to build exchange applications on top of{' '} - (0x.js - {' '}is a Javascript library for interacting with the 0x protocol). For end users, 0x will be - the infrastructure of a wide variety of user-facing applications i.e.{' '} - 0x Portal, - a decentralized application that facilitates trustless trading of Ethereum-based tokens + At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, low + friction exchange of Ethereum-based assets. Developers can use 0x as a platform to build + exchange applications on top of ( + 0x.js + {' '} + is a Javascript library for interacting with the 0x protocol). For end users, 0x will be the + infrastructure of a wide variety of user-facing applications i.e.{' '} + + 0x Portal + , a decentralized application that facilitates trustless trading of Ethereum-based tokens between known counterparties.
), @@ -47,15 +52,14 @@ const sections: FAQSection[] = [ answer: (
In the two years since the Ethereum blockchain’s genesis block, numerous decentralized - applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange. - Rapid iteration and a lack of best practices have left the blockchain scattered with - proprietary and application-specific implementations. As a result, end users are - exposed to numerous smart contracts of varying quality and security, with unique - configuration processes and learning curves, all of which implement the same - functionality. This approach imposes unnecessary costs on the network by fragmenting - end users according to the particular dApp each user happens to be using, eliminating - valuable network effects around liquidity. 0x is the solution to this problem by - acting as modular, unopinionated building blocks that may be assembled and reconfigured. + applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange. Rapid + iteration and a lack of best practices have left the blockchain scattered with proprietary and + application-specific implementations. As a result, end users are exposed to numerous smart + contracts of varying quality and security, with unique configuration processes and learning + curves, all of which implement the same functionality. This approach imposes unnecessary costs + on the network by fragmenting end users according to the particular dApp each user happens to be + using, eliminating valuable network effects around liquidity. 0x is the solution to this problem + by acting as modular, unopinionated building blocks that may be assembled and reconfigured.
), }, @@ -64,20 +68,18 @@ const sections: FAQSection[] = [ answer: (
    +
  • 0x is a protocol for exchange, not a user-facing exchange application.
  • - 0x is a protocol for exchange, not a user-facing exchange application. -
    • -
  • - 0x is decentralized and trustless; there is no central party which can be - hacked, run away with customer funds or be subjected to government regulations. - Hacks of Mt. Gox, Shapeshift and Bitfinex have demonstrated that these types of - systemic risks are palpable. + 0x is decentralized and trustless; there is no central party which can be hacked, run + away with customer funds or be subjected to government regulations. Hacks of Mt. Gox, + Shapeshift and Bitfinex have demonstrated that these types of systemic risks are + palpable.
  • - Rather than a proprietary system that exists to extract rent for its owners, - 0x is public infrastructure that is funded by a globally distributed community - of stakeholders. While the protocol is free to use, it enables for-profit - user-facing exchange applications to be built on top of the protocol. + Rather than a proprietary system that exists to extract rent for its owners, 0x is + public infrastructure that is funded by a globally distributed community of + stakeholders. While the protocol is free to use, it enables for-profit user-facing + exchange applications to be built on top of the protocol.
@@ -87,13 +89,12 @@ const sections: FAQSection[] = [ prompt: 'If 0x protocol is free to use, where do transaction fees come in?', answer: (
- 0x protocol uses off-chain order books to massively reduce friction costs for - market makers and ensure that the blockchain is only used for trade settlement. - Hosting and maintaining an off-chain order book is a service; to incent “Relayers” - to provide this service they must be able to charge transaction fees on trading - activity. Relayers are free to set their transaction fees to any value they desire. - We expect Relayers to be highly competitive and transaction fees to approach an - efficient economic equilibrium over time. + 0x protocol uses off-chain order books to massively reduce friction costs for market makers and + ensure that the blockchain is only used for trade settlement. Hosting and maintaining an + off-chain order book is a service; to incent “Relayers” to provide this service they must be + able to charge transaction fees on trading activity. Relayers are free to set their transaction + fees to any value they desire. We expect Relayers to be highly competitive and transaction fees + to approach an efficient economic equilibrium over time.
), }, @@ -102,25 +103,23 @@ const sections: FAQSection[] = [ answer: (
- Participants in a state channel pass cryptographically signed messages back and - forth, accumulating intermediate state changes without publishing them to the - canonical chain until the channel is closed. State channels are ideal for “bar tab” - applications where numerous intermediate state changes may be accumulated off-chain - before being settled by a final on-chain transaction (i.e. day trading, poker, - turn-based games). + Participants in a state channel pass cryptographically signed messages back and forth, + accumulating intermediate state changes without publishing them to the canonical chain until + the channel is closed. State channels are ideal for “bar tab” applications where numerous + intermediate state changes may be accumulated off-chain before being settled by a final + on-chain transaction (i.e. day trading, poker, turn-based games).
  • - While state channels drastically reduce the number of on-chain transactions - for specific use cases, numerous on-chain transactions and a security deposit - are required to open and safely close a state channel making them less efficient - than 0x for executing one-time trades. + While state channels drastically reduce the number of on-chain transactions for specific + use cases, numerous on-chain transactions and a security deposit are required to open + and safely close a state channel making them less efficient than 0x for executing + one-time trades.
  • - State channels are isolated from the Ethereum blockchain meaning that - they cannot interact with smart contracts. 0x is designed to be integrated - directly into smart contracts so trades can be executed programmatically - in a single line of Solidity code. + State channels are isolated from the Ethereum blockchain meaning that they cannot + interact with smart contracts. 0x is designed to be integrated directly into smart + contracts so trades can be executed programmatically in a single line of Solidity code.
@@ -130,16 +129,20 @@ const sections: FAQSection[] = [ prompt: 'What types of digital assets are supported by 0x?', answer: (
- 0x supports all Ethereum-based assets that adhere to the ERC20 token standard. - There are many ERC20 tokens, worth a combined $2.2B, and more tokens are created - each month. We believe that, by 2020, thousands of assets will be tokenized and - moved onto the Ethereum blockchain including traditional securities such as equities, - bonds and derivatives, fiat currencies and scarce digital goods such as video game - items. In the future, cross-blockchain solutions such as{' '} - Cosmos and{' '} - Polkadot will allow cryptocurrencies - to freely move between blockchains and, naturally, currencies such as Bitcoin will - end up being represented as ERC20 tokens on the Ethereum blockchain. + 0x supports all Ethereum-based assets that adhere to the ERC20 token standard. There are many + ERC20 tokens, worth a combined $2.2B, and more tokens are created each month. We believe that, + by 2020, thousands of assets will be tokenized and moved onto the Ethereum blockchain including + traditional securities such as equities, bonds and derivatives, fiat currencies and scarce + digital goods such as video game items. In the future, cross-blockchain solutions such as{' '} + + Cosmos + {' '} + and{' '} + + Polkadot + {' '} + will allow cryptocurrencies to freely move between blockchains and, naturally, currencies such + as Bitcoin will end up being represented as ERC20 tokens on the Ethereum blockchain.
), }, @@ -147,23 +150,19 @@ const sections: FAQSection[] = [ prompt: '0x is open source: what prevents someone from forking the protocol?', answer: (
- Ethereum and Bitcoin are both open source protocols. Each protocol has been forked, - but the resulting clone networks have seen little adoption (as measured by transaction - count or market cap). This is because users have little to no incentive to switch - over to a clone network if the original has initial network effects and a talented - developer team behind it. - An exception is in the case that a protocol includes a controversial feature such as - a method of rent extraction or a monetary policy that favors one group of users over - another (Zcash developer subsidy - for better or worse - resulted in Zclassic). - Perceived inequality can provide a strong enough incentive that users will fork the - original protocol’s codebase and spin up a new network that eliminates the controversial - feature. In the case of 0x, there is no rent extraction and no users are given - special permissions. - - 0x protocol is upgradable. Cutting-edge technical capabilities can be integrated - into 0x via decentralized governance (see section below), eliminating incentives - to fork off of the original protocol and sacrifice the network effects surrounding - liquidity that result from the shared protocol and settlement layer. + Ethereum and Bitcoin are both open source protocols. Each protocol has been forked, but the + resulting clone networks have seen little adoption (as measured by transaction count or market + cap). This is because users have little to no incentive to switch over to a clone network if the + original has initial network effects and a talented developer team behind it. An exception is in + the case that a protocol includes a controversial feature such as a method of rent extraction or + a monetary policy that favors one group of users over another (Zcash developer subsidy - for + better or worse - resulted in Zclassic). Perceived inequality can provide a strong enough + incentive that users will fork the original protocol’s codebase and spin up a new network that + eliminates the controversial feature. In the case of 0x, there is no rent extraction and no + users are given special permissions. 0x protocol is upgradable. Cutting-edge technical + capabilities can be integrated into 0x via decentralized governance (see section below), + eliminating incentives to fork off of the original protocol and sacrifice the network effects + surrounding liquidity that result from the shared protocol and settlement layer.
), }, @@ -180,26 +179,25 @@ const sections: FAQSection[] = [ 0x protocol token (ZRX) is utilized in two ways: 1) to solve the{' '} coordination problem - and drive network effects around liquidity, creating a feedback loop - where early adopters of the protocol benefit from wider adoption and 2) to - be used for decentralized governance over 0x protocol's update mechanism. - In more detail: + {' '} + and drive network effects around liquidity, creating a feedback loop where early adopters of + the protocol benefit from wider adoption and 2) to be used for decentralized governance over + 0x protocol's update mechanism. In more detail:
  • - ZRX tokens are used by Makers and Takers (market participants that generate - and consume orders, respectively) to pay transaction fees to Relayers - (entities that host and maintain public order books). + ZRX tokens are used by Makers and Takers (market participants that generate and consume + orders, respectively) to pay transaction fees to Relayers (entities that host and + maintain public order books).
  • - ZRX tokens are used for decentralized governance over 0x protocol’s update - mechanism which allows its underlying smart contracts to be replaced and - improved over time. An update mechanism is needed because 0x is built upon - Ethereum’s rapidly evolving technology stack, decentralized governance is - needed because 0x protocol’s smart contracts will have access to user funds - and numerous dApps will need to plug into 0x smart contracts. Decentralized - governance ensures that this update process is secure and minimizes disruption - to the network. + ZRX tokens are used for decentralized governance over 0x protocol’s update mechanism + which allows its underlying smart contracts to be replaced and improved over time. An + update mechanism is needed because 0x is built upon Ethereum’s rapidly evolving + technology stack, decentralized governance is needed because 0x protocol’s smart + contracts will have access to user funds and numerous dApps will need to plug into 0x + smart contracts. Decentralized governance ensures that this update process is secure and + minimizes disruption to the network.
@@ -209,9 +207,9 @@ const sections: FAQSection[] = [ prompt: 'Why must transaction fees be denominated in 0x token (ZRX) rather than ETH?', answer: (
- 0x protocol’s decentralized update mechanism is analogous to proof-of-stake. - To maximize the alignment of stakeholder and end user incentives, the staked - asset must provide utility within the protocol. + 0x protocol’s decentralized update mechanism is analogous to proof-of-stake. To maximize the + alignment of stakeholder and end user incentives, the staked asset must provide utility within + the protocol.
), }, @@ -219,10 +217,10 @@ const sections: FAQSection[] = [ prompt: 'How will decentralized governance work?', answer: (
- Decentralized governance is an ongoing focus of research; it will involve token - voting with ZRX. Ultimately the solution will maximize security while also maximizing - the protocol’s ability to absorb new innovations. Until the governance structure is - formalized and encoded within 0x DAO, a multi-sig will be used as a placeholder. + Decentralized governance is an ongoing focus of research; it will involve token voting with ZRX. + Ultimately the solution will maximize security while also maximizing the protocol’s ability to + absorb new innovations. Until the governance structure is formalized and encoded within 0x DAO, + a multi-sig will be used as a placeholder.
), }, @@ -233,27 +231,19 @@ const sections: FAQSection[] = [ questions: [ { prompt: 'What is the total supply of ZRX tokens?', - answer: ( -
- 1,000,000,000 ZRX. Fixed supply. -
- ), + answer:
1,000,000,000 ZRX. Fixed supply.
, }, { prompt: 'When is the Token Launch? will there be a pre-sale?', - answer: ( -
- The token launch will be on August 15th, 2017. There will not be a pre-sale. -
- ), + answer:
The token launch will be on August 15th, 2017. There will not be a pre-sale.
, }, { prompt: 'What will the token launch proceeds be used for?', answer: (
- 100% of the proceeds raised in the token launch will be used to fund the development - of free and open source software, tools and infrastructure that support the protocol - and surrounding ecosystem. Check out our{' '} + 100% of the proceeds raised in the token launch will be used to fund the development of free and + open source software, tools and infrastructure that support the protocol and surrounding + ecosystem. Check out our{' '} -
- +
+
-
- Token Launch (50%) -
+
Token Launch (50%)
- ZRX is inherently a governance token that plays a critical role in the - process of upgrading 0x protocol. We are fully committed to formulating - a functional and theoretically sound governance model and we plan to dedicate - significant resources to R&D. + ZRX is inherently a governance token that plays a critical role in the process of + upgrading 0x protocol. We are fully committed to formulating a functional and + theoretically sound governance model and we plan to dedicate significant resources to + R&D.
-
- Retained by 0x (15%) -
+
Retained by 0x (15%)
- The 0x core development team will be able to sustain itself for approximately - five years using funds raised through the token launch. If 0x protocol - proves to be as foundational a technology as we believe it to be, the - retained ZRX tokens will allow the 0x core development team to sustain - operations beyond the first 5 years. + The 0x core development team will be able to sustain itself for approximately five years + using funds raised through the token launch. If 0x protocol proves to be as foundational + a technology as we believe it to be, the retained ZRX tokens will allow the 0x core + development team to sustain operations beyond the first 5 years.
-
- Developer Fund (15%) -
+
Developer Fund (15%)
- The Developer Fund will be used to make targeted capital injections - into high potential projects and teams that are attempting to grow - the 0x ecosystem, strategic partnerships, hackathon prizes and community - development activities. + The Developer Fund will be used to make targeted capital injections into high potential + projects and teams that are attempting to grow the 0x ecosystem, strategic partnerships, + hackathon prizes and community development activities.
-
- Founding Team (10%) -
+
Founding Team (10%)
- The founding team’s allocation of ZRX will vest over a traditional 4 - year vesting schedule with a one year cliff. We believe this should - be standard practice for any team that is committed to making their - project a long term success. + The founding team’s allocation of ZRX will vest over a traditional 4 year vesting + schedule with a one year cliff. We believe this should be standard practice for any team + that is committed to making their project a long term success.
-
- Early Backers & Advisors (10%) -
+
Early Backers & Advisors (10%)
- Our backers and advisors have provided capital, resources and guidance - that have allowed us to fill out our team, setup a robust legal entity - and build a fully functional product before launching a token. As a result, - we have a proven track record and can offer a token that holds genuine utility. + Our backers and advisors have provided capital, resources and guidance that have allowed + us to fill out our team, setup a robust legal entity and build a fully functional + product before launching a token. As a result, we have a proven track record and can + offer a token that holds genuine utility.
@@ -336,47 +310,39 @@ const sections: FAQSection[] = [ prompt: 'Can I mine ZRX tokens?', answer: (
- No, the total supply of ZRX tokens is fixed and there is no continuous issuance - model. Users that facilitate trading over 0x protocol by operating a Relayer - earn transaction fees denominated in ZRX; as more trading activity is generated, - more transaction fees are earned. + No, the total supply of ZRX tokens is fixed and there is no continuous issuance model. Users + that facilitate trading over 0x protocol by operating a Relayer earn transaction fees + denominated in ZRX; as more trading activity is generated, more transaction fees are earned.
), }, { prompt: 'Will there be a lockup period for ZRX tokens sold in the token launch?', - answer: ( -
- No, ZRX tokens sold in the token launch will immediately be liquid. -
- ), + answer:
No, ZRX tokens sold in the token launch will immediately be liquid.
, }, { prompt: 'Will there be a lockup period for tokens allocated to the founding team?', answer: (
- Yes. ZRX tokens allocated to founders, advisors and staff members will be released - over a 4 year vesting schedule with a 25% cliff upon completion of the initial - token launch and 25% released each subsequent year in monthly installments. Staff - members hired after the token launch will have a 4 year vesting schedule with a - one year cliff. + Yes. ZRX tokens allocated to founders, advisors and staff members will be released over a 4 year + vesting schedule with a 25% cliff upon completion of the initial token launch and 25% released + each subsequent year in monthly installments. Staff members hired after the token launch will + have a 4 year vesting schedule with a one year cliff.
), }, { prompt: 'Which cryptocurrencies will be accepted in the token launch?', - answer: ( -
ETH.
- ), + answer:
ETH.
, }, { prompt: 'When will 0x be live?', answer: (
- An alpha version of 0x has been live on our private test network since January - 2017. Version 1.0 of 0x protocol will be deployed to the canonical Ethereum - blockchain after a round of security audits and prior to the public token launch. - 0x will be using the 0x protocol during our token launch. + An alpha version of 0x has been live on our private test network since January 2017. Version 1.0 + of 0x protocol will be deployed to the canonical Ethereum blockchain after a round of security + audits and prior to the public token launch. 0x will be using the 0x protocol during our token + launch.
), }, @@ -401,19 +367,17 @@ const sections: FAQSection[] = [ questions: [ { prompt: 'Where is 0x based?', - answer: ( -
- 0x was founded in SF and is driven by a diverse group of contributors. -
- ), + answer:
0x was founded in SF and is driven by a diverse group of contributors.
, }, { prompt: 'How can I get involved?', answer: (
- Join our Rocket.chat! - As an open source project, 0x will rely on a worldwide community of passionate - developers to contribute proposals, ideas and code. + Join our{' '} + + Rocket.chat + ! As an open source project, 0x will rely on a worldwide community of passionate developers + to contribute proposals, ideas and code.
), }, @@ -421,20 +385,15 @@ const sections: FAQSection[] = [ prompt: 'Why the name 0x?', answer: (
- 0x is the prefix for hexadecimal numeric constants including Ethereum addresses. - In a more abstract context, as the first open protocol for exchange 0x represents - the beginning of the end for the exchange industry’s rent seeking oligopoly: - zero exchange. + 0x is the prefix for hexadecimal numeric constants including Ethereum addresses. In a more + abstract context, as the first open protocol for exchange 0x represents the beginning of the end + for the exchange industry’s rent seeking oligopoly: zero exchange.
), }, { prompt: 'How do you pronounce 0x?', - answer: ( -
- We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please. -
- ), + answer:
We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.
, }, ], }, @@ -447,20 +406,13 @@ export class FAQ extends React.Component { public render() { return (
- - -
-

0x FAQ

-
- {this._renderSections()} -
+ + +
+

+ 0x FAQ +

+
{this._renderSections()}
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index 54ae1a592..988c04bc9 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; -import {Card, CardHeader, CardText} from 'material-ui/Card'; +import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; export interface QuestionProps { prompt: string; @@ -22,24 +22,22 @@ export class Question extends React.Component { } public render() { return ( -
+
-
- {this.props.answer} -
+
{this.props.answer}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 1e97ae240..ca76497df 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,13 +2,13 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import {Link} from 'react-router-dom'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {ScreenWidths, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Link } from 'react-router-dom'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; interface BoxContent { title: string; @@ -39,22 +39,25 @@ const THROTTLE_TIMEOUT = 100; const boxContents: BoxContent[] = [ { title: 'Trustless exchange', - description: 'Built on Ethereum\'s distributed network with no centralized \ + description: + "Built on Ethereum's distributed network with no centralized \ point of failure and no down time, each trade is settled atomically \ - and without counterparty risk.', + and without counterparty risk.", imageUrl: '/images/landing/distributed_network.png', classNames: '', }, { title: 'Shared liquidity', - description: 'By sharing a standard API, relayers can easily aggregate liquidity pools, \ + description: + 'By sharing a standard API, relayers can easily aggregate liquidity pools, \ creating network effects around liquidity that compound as more relayers come online.', imageUrl: '/images/landing/liquidity.png', classNames: 'mx-auto', }, { title: 'Open source', - description: '0x is open source, permissionless and free to use. Trade directly with a known \ + description: + '0x is open source, permissionless and free to use. Trade directly with a known \ counterparty for free or pay a relayer some ZRX tokens to access their liquidity \ pool.', imageUrl: '/images/landing/open_source.png', @@ -155,13 +158,13 @@ export class Landing extends React.Component { } public render() { return ( -
- +
+ {this._renderHero()} {this._renderProjects()} @@ -188,46 +191,43 @@ export class Landing extends React.Component { lineHeight: '33px', height: 38, }; - const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; return ( -
-
+
+
- +
-
-
+
+
Powering decentralized exchange
- 0x is an open, permissionless protocol allowing for ERC20 tokens to - be traded on the Ethereum blockchain. + 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on the + Ethereum blockchain.
-
+
{ className="text-decoration-none" > { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const isMediumScreen = this.state.screenWidth === ScreenWidths.Md; const projectList = _.map(projects, (project: Project, i: number) => { - const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2)); + const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2; return ( -
+
- + { letterSpacing: 3, }; return ( -
+
-
+
Projects building on 0x
-
- {projectList} -
+
{projectList}
view the{' '} full list @@ -326,52 +316,41 @@ export class Landing extends React.Component { private _renderTokenizationSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( -
+
- {isSmallScreen && - this._renderTokenCloud() - } + {isSmallScreen && this._renderTokenCloud()}
-
-
+
+
The world's value is becoming tokenized
- {isSmallScreen ? + {isSmallScreen ? ( The Ethereum blockchain is an open, borderless financial system that represents a wide variety of assets as cryptographic tokens. In the future, most digital assets and goods will be tokenized. - : + + ) : (
- The Ethereum blockchain is an open, borderless - financial system that represents + The Ethereum blockchain is an open, borderless financial system that + represents
- a wide variety of assets as cryptographic tokens. - In the future, most digital assets and goods will be tokenized. + a wide variety of assets as cryptographic tokens. In the future, most + digital assets and goods will be tokenized.
- } -
-
- {this._renderAssetTypes()} + )}
+
{this._renderAssetTypes()}
- {!isSmallScreen && - this._renderTokenCloud() - } + {!isSmallScreen && this._renderTokenCloud()}
); @@ -379,81 +358,84 @@ export class Landing extends React.Component { private _renderProtocolSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( -
+
- +
-
-
- Off-chain order relay -
-
- On-chain settlement -
+
+
Off-chain order relay
+
On-chain settlement
- In 0x protocol, orders are transported off-chain, massively reducing gas - costs and eliminating blockchain bloat. Relayers help broadcast orders and - collect a fee each time they facilitate a trade. Anyone can build a relayer. + In 0x protocol, orders are transported off-chain, massively reducing gas costs and + eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time + they facilitate a trade. Anyone can build a relayer.
-
+
RELAYERS BUILDING ON 0X
-
+
view all
-
+
- +
-
- +
+
-
- +
+
@@ -478,58 +460,45 @@ export class Landing extends React.Component { maxWidth: isSmallScreen ? 375 : 441, }; return ( -
+
- {isSmallScreen && - this._renderBlockChipImage() - } + {isSmallScreen && this._renderBlockChipImage()}
A building block for dApps
-
+
0x protocol is a pluggable building block for dApps that require exchange functionality. Join the many developers that are already using 0x in their web applications and smart contracts.
-
+
Learn how in our{' '} 0x.js - - {' '}and{' '} + {' '} + and{' '} smart contract - - {' '}docs + {' '} + docs
- {!isSmallScreen && - this._renderBlockChipImage() - } + {!isSmallScreen && this._renderBlockChipImage()}
); @@ -538,10 +507,7 @@ export class Landing extends React.Component { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return (
- +
); } @@ -549,10 +515,7 @@ export class Landing extends React.Component { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return (
- +
); } @@ -566,7 +529,10 @@ export class Landing extends React.Component { { title: 'Traditional assets', imageUrl: '/images/landing/stocks.png', - style: {paddingLeft: isSmallScreen ? 41 : 56, paddingRight: isSmallScreen ? 41 : 56}, + style: { + paddingLeft: isSmallScreen ? 41 : 56, + paddingRight: isSmallScreen ? 41 : 56, + }, }, { title: 'Digital goods', @@ -576,18 +542,18 @@ export class Landing extends React.Component { const assets = _.map(assetTypes, (assetType: AssetType) => { const style = _.isUndefined(assetType.style) ? {} : assetType.style; return ( -
+
- +
-
+
{assetType.title}
@@ -606,43 +572,24 @@ export class Landing extends React.Component { }; const boxes = _.map(boxContents, (boxContent: BoxContent) => { return ( -
-
+
+
- +
-
+
{boxContent.title}
-
+
{boxContent.description}
); - }); return ( -
-
+
+
{boxes}
@@ -655,7 +602,8 @@ export class Landing extends React.Component { { imageUrl: '/images/landing/governance_icon.png', type: 'Decentralized governance', - description: 'Decentralized organizations use tokens to represent ownership and \ + description: + 'Decentralized organizations use tokens to represent ownership and \ guide their governance logic. 0x allows decentralized organizations \ to seamlessly and safely trade ownership for startup capital.', projectIconUrls: ['/images/landing/aragon.png'], @@ -664,7 +612,8 @@ export class Landing extends React.Component { { imageUrl: '/images/landing/prediction_market_icon.png', type: 'Prediction markets', - description: 'Decentralized prediction market platforms generate sets of tokens that \ + description: + 'Decentralized prediction market platforms generate sets of tokens that \ represent a financial stake in the outcomes of real-world events. 0x allows \ these tokens to be instantly tradable.', projectIconUrls: ['/images/landing/augur.png'], @@ -673,7 +622,8 @@ export class Landing extends React.Component { { imageUrl: '/images/landing/stable_tokens_icon.png', type: 'Stable tokens', - description: 'Novel economic constructs such as stable coins require efficient, liquid \ + description: + 'Novel economic constructs such as stable coins require efficient, liquid \ markets to succeed. 0x will facilitate the underlying economic mechanisms \ that allow these tokens to remain stable.', projectIconUrls: ['/images/landing/maker.png'], @@ -682,22 +632,28 @@ export class Landing extends React.Component { { imageUrl: '/images/landing/loans_icon.png', type: 'Decentralized loans', - description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \ + description: + 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \ 0x enables an ecosystem of lenders to self-organize and efficiently determine \ market prices for all outstanding loans.', projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'], classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', - style: {width: 291, float: 'right', marginTop: !isSmallScreen ? 38 : 0}, + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, }, { imageUrl: '/images/landing/fund_management_icon.png', type: 'Fund management', - description: 'Decentralized fund management limits fund managers to investing in pre-agreed \ + description: + 'Decentralized fund management limits fund managers to investing in pre-agreed \ upon asset classes. Embedding 0x into fund management smart contracts enables \ them to enforce these security constraints.', projectIconUrls: ['/images/landing/melonport.png'], classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', - style: {width: 291, marginTop: !isSmallScreen ? 38 : 0}, + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, }, ]; @@ -722,22 +678,21 @@ export class Landing extends React.Component { key={`useCase-${useCase.type}`} className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`} > -
-
- +
+
+
{useCase.type}
{useCase.description}
@@ -746,14 +701,8 @@ export class Landing extends React.Component { ); }); return ( -
-
+
+
{cases}
@@ -772,26 +721,26 @@ export class Landing extends React.Component { lineHeight: '33px', height: 49, }; - const callToActionClassNames = 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \ + const callToActionClassNames = + 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \ lg-right-align md-right-align sm-center sm-px3 h4'; return ( -
-
+
+
Get started on building the decentralized future
{ public render() { return (
- +
-

404 Not Found

+

404 Not Found

Hm... looks like we couldn't find what you are looking for. diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index 0c1e8f4b7..db5be1f59 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/website/ts/pages/shared/anchor_title.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; -import {HeaderSizes, Styles} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Link as ScrollLink } from 'react-scroll'; +import { HeaderSizes, Styles } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; -const headerSizeToScrollOffset: {[headerSize: string]: number} = { +const headerSizeToScrollOffset: { [headerSize: string]: number } = { h2: -20, h3: 0, }; interface AnchorTitleProps { - title: string|React.ReactNode; + title: string | React.ReactNode; id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; @@ -62,11 +62,8 @@ export class AnchorTitle extends React.Component -
+
+
{this.props.title}
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index aded15f0c..be96fda16 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -17,12 +17,8 @@ export class MarkdownCodeBlock extends React.Component - - {this.props.literal} - + + {this.props.literal} ); } diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index e81920fc3..5487dc8cc 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -2,11 +2,11 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; -import {Element as ScrollElement} from 'react-scroll'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block'; -import {HeaderSizes} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { Element as ScrollElement } from 'react-scroll'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; +import { HeaderSizes } from 'ts/types'; +import { utils } from 'ts/utils/utils'; interface MarkdownSectionProps { sectionName: string; @@ -41,7 +41,7 @@ export class MarkdownSection extends React.Component
- +
- {!_.isUndefined(this.props.githubLink) && + {!_.isUndefined(this.props.githubLink) && ( } + icon={} /> - } + )}
- +
); diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 6dc194010..849c33504 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -1,15 +1,15 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; -import {VersionDropDown} from 'ts/pages/shared/version_drop_down'; -import {MenuSubsectionsBySection, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Link as ScrollLink } from 'react-scroll'; +import { VersionDropDown } from 'ts/pages/shared/version_drop_down'; +import { MenuSubsectionsBySection, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { - topLevelMenu: {[topLevel: string]: string[]}; + topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,20 +44,14 @@ export class NestedSidebarMenu extends React.Component +
-
+
{finalSectionName.toUpperCase()}
@@ -65,34 +59,29 @@ export class NestedSidebarMenu extends React.Component ); } else { - return ( -
- {this._renderMenuItems(menuItems)} -
- ); + return
{this._renderMenuItems(menuItems)}
; } }); return (
{!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.docPath) && - - } + !_.isUndefined(this.props.selectedVersion) && + !_.isUndefined(this.props.docPath) && ( + + )} {navigation}
); } private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { - const menuItemStyles = this.props.shouldDisplaySectionHeaders ? - styles.menuItemWithHeaders : - styles.menuItemWithoutHeaders; - const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? - styles.menuItemInnerDivWithHeaders : {}; + const menuItemStyles = this.props.shouldDisplaySectionHeaders + ? styles.menuItemWithHeaders + : styles.menuItemWithoutHeaders; + const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(menuItemNames, menuItemName => { const id = utils.getIdFromName(menuItemName); return ( @@ -109,9 +98,7 @@ export class NestedSidebarMenu extends React.Component - - {menuItemName} - + {menuItemName} {this._renderMenuItemSubsections(menuItemName)} @@ -128,30 +115,34 @@ export class NestedSidebarMenu extends React.Component - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); - return ( -
  • - - + {_.map(entityNames, entityName => { + const name = `${menuItemName}-${entityName}`; + const id = utils.getIdFromName(name); + return ( +
  • + - {entityName} - - -
    • - ); - })} + + {entityName} + + + + ); + })} ); } diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx index 5ea9fc681..a5f5f52cf 100644 --- a/packages/website/ts/pages/shared/section_header.tsx +++ b/packages/website/ts/pages/shared/section_header.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Element as ScrollElement} from 'react-scroll'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {HeaderSizes} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { Element as ScrollElement } from 'react-scroll'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { HeaderSizes } from 'ts/types'; +import { utils } from 'ts/utils/utils'; interface SectionHeaderProps { sectionName: string; @@ -34,7 +34,7 @@ export class SectionHeader extends React.Component {sectionName}} + title={{sectionName}} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx index 8d3322d72..b922e1048 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -14,7 +14,7 @@ interface VersionDropDownState {} export class VersionDropDown extends React.Component { public render() { return ( -
    +
    { - return ( - - ); + return ; }); return items; } diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 72da94a20..d065614ba 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -2,18 +2,16 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { - scroller, -} from 'react-scroll'; -import {TopBar} from 'ts/components/top_bar'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { scroller } from 'react-scroll'; +import { TopBar } from 'ts/components/top_bar'; +import { MarkdownSection } from 'ts/pages/shared/markdown_section'; +import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; +import { SectionHeader } from 'ts/pages/shared/section_header'; +import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; @@ -62,40 +60,37 @@ export class Wiki extends React.Component { } public render() { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) - ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + ? {} + : this._getMenuSubsectionsBySection(this.state.articlesBySection); return (
    - + - {_.isUndefined(this.state.articlesBySection) ? -
    + {_.isUndefined(this.state.articlesBySection) ? ( +
    -
    Loading wiki...
    +
    + Loading wiki... +
    -
    : -
    +
    + ) : ( +
    {
    -
    +

    0x Protocol Wiki

    -
    - {this._renderWikiArticles()} -
    +
    {this._renderWikiArticles()}
    - } + )}
    ); } @@ -143,12 +132,9 @@ export class Wiki extends React.Component { headerSize={HeaderSizes.H2} githubLink={githubLink} /> -
    +
    See a way to make this article better?{' '} - + Edit here →
    @@ -156,10 +142,7 @@ export class Wiki extends React.Component { ); }); return ( -
    +
    {renderedArticles}
    @@ -172,7 +155,11 @@ export class Wiki extends React.Component { hash = '0xProtocolWiki'; // scroll to the top } - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); + scroller.scrollTo(hash, { + duration: 0, + offset: 0, + containerId: 'documentation', + }); } private async _fetchArticlesBySectionAsync(): Promise { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; @@ -192,15 +179,18 @@ export class Wiki extends React.Component { return; } const articlesBySection = await response.json(); - this.setState({ - articlesBySection, - }, () => { - this._scrollToHash(); - }); + this.setState( + { + articlesBySection, + }, + () => { + this._scrollToHash(); + }, + ); } private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: {[section: string]: string[]} = {}; + const menuSubsectionsBySection: { [section: string]: string[] } = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; const articleNames = _.map(articles, article => article.title); -- cgit v1.2.3