diff options
Diffstat (limited to 'packages/website/ts/pages')
25 files changed, 855 insertions, 1112 deletions
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<AboutProps, AboutState> { } public render() { return ( - <div style={{backgroundColor: colors.lightestGrey}}> - <DocumentTitle title="0x About Us"/> + <div style={{ backgroundColor: colors.lightestGrey }}> + <DocumentTitle title="0x About Us" /> <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{backgroundColor: colors.lightestGrey}} + style={{ backgroundColor: colors.lightestGrey }} /> - <div - id="about" - className="mx-auto max-width-4 py4" - style={{color: colors.grey800}} - > - <div - className="mx-auto pb4 sm-px3" - style={{maxWidth: 435}} - > - <div - style={styles.header} - > - About us: - </div> + <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}> + <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}> + <div style={styles.header}>About us:</div> <div className="pt3" - style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}} + style={{ + fontSize: 17, + color: colors.darkestGrey, + lineHeight: 1.5, + }} > - 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. </div> </div> <div className="pt3 md-px4 lg-px0"> - <div className="clearfix pb3"> - {this._renderProfiles(teamRow1)} - </div> - <div className="clearfix"> - {this._renderProfiles(teamRow2)} - </div> + <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div> + <div className="clearfix">{this._renderProfiles(teamRow2)}</div> </div> <div className="pt3 pb2"> <div className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3" - style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}} + style={{ + color: colors.grey, + fontSize: 24, + fontFamily: 'Roboto Mono', + }} > Advisors: </div> - <div className="clearfix"> - {this._renderProfiles(advisors)} - </div> + <div className="clearfix">{this._renderProfiles(advisors)}</div> </div> - <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}> - <div - className="pb2" - style={styles.weAreHiring} - > + <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}> + <div className="pb2" style={styles.weAreHiring}> WE'RE HIRING </div> <div className="pb4 mb4" - style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}} + style={{ + fontSize: 16, + color: colors.darkestGrey, + lineHeight: 1.5, + letterSpacing: '0.5px', + }} > We are seeking outstanding candidates to{' '} - <a - href={constants.URL_ANGELLIST} - target="_blank" - style={{color: 'black'}} - > + <a href={constants.URL_ANGELLIST} target="_blank" style={{ color: 'black' }}> join our team </a> . We value passion, diversity and unique perspectives. @@ -237,13 +225,8 @@ export class About extends React.Component<AboutProps, AboutState> { const colSize = utils.getColSize(numIndiv); return _.map(profiles, profile => { return ( - <div - key={`profile-${profile.name}`} - > - <Profile - colSize={colSize} - profileInfo={profile} - /> + <div key={`profile-${profile.name}`}> + <Profile colSize={colSize} profileInfo={profile} /> </div> ); }); 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 ( - <div - className={`lg-col md-col lg-col-${props.colSize} md-col-6`} - > - <div - style={{maxWidth: 300}} - className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3" - > - <div - className="circle overflow-hidden mx-auto" - style={styles.imageContainer} - > - <img - width={IMAGE_DIMENSION} - src={props.profileInfo.image} - /> + <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}> + <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"> + <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}> + <img width={IMAGE_DIMENSION} src={props.profileInfo.image} /> </div> - <div - className="center" - style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}} - > + <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}> {props.profileInfo.name} </div> - {!_.isUndefined(props.profileInfo.title) && + {!_.isUndefined(props.profileInfo.title) && ( <div className="pt1 center" - style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}} + style={{ + fontSize: 14, + fontFamily: 'Roboto Mono', + color: colors.darkGrey, + }} > {props.profileInfo.title.toUpperCase()} </div> - } - <div - style={{minHeight: 60, lineHeight: 1.4}} - className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center" - > + )} + <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"> {props.profileInfo.description} </div> - <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}> + <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 180, opacity: 0.5 }}> {renderSocialMediaIcons(props.profileInfo)} </div> </div> @@ -84,13 +71,8 @@ function renderSocialMediaIcon(iconName: string, url: string) { return ( <div key={url} className="pr1"> - <a - href={url} - style={{color: 'inherit'}} - target="_blank" - className="text-decoration-none" - > - <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} /> + <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none"> + <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} /> </a> </div> ); 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<CommentProps> = (props: CommentProps) => { return ( <div className={`${props.className} comment`}> - <ReactMarkdown - source={props.comment} - renderers={{CodeBlock: MarkdownCodeBlock}} - /> + <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </div> ); }; 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 ( <span> {`{`} - {'\t'}{enumValues} - <br /> + {'\t'} + {enumValues} + <br /> {`}`} </span> ); 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<DocumentationAllProps, DocumentationState> { +export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> { 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 ( <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`}/> + <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> <TopBar blockchainIsLoaded={false} location={this.props.location} @@ -112,29 +109,26 @@ export class Documentation extends shouldFullWidth={true} docsInfo={this.props.docsInfo} /> - {_.isUndefined(this.state.docAgnosticFormat) ? - <div - className="col col-12" - style={styles.mainContainers} - > + {_.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="col col-12" style={styles.mainContainers}> <div className="relative sm-px2 sm-pt2 sm-m1" - style={{height: 122, top: '50%', transform: 'translateY(-50%)'}} + style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} > <div className="center pb2"> <CircularProgress size={40} thickness={5} /> </div> - <div className="center pt2" style={{paddingBottom: 11}}>Loading documentation...</div> + <div className="center pt2" style={{ paddingBottom: 11 }}> + Loading documentation... + </div> </div> - </div> : - <div - className="mx-auto flex" - style={{color: colors.grey800, height: 43}} - > + </div> + ) : ( + <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> <div className="border-right absolute" - style={{...styles.menuContainer, ...styles.mainContainers}} + style={{ ...styles.menuContainer, ...styles.mainContainers }} > <NestedSidebarMenu selectedVersion={this.props.docsVersion} @@ -146,11 +140,7 @@ export class Documentation extends </div> </div> <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div - id="documentation" - style={styles.mainContainers} - className="absolute" - > + <div id="documentation" style={styles.mainContainers} className="absolute"> <div id={SCROLL_TOP_ID} /> <h1 className="md-pl2 sm-pl3"> <a href={this.props.docsInfo.packageUrl} target="_blank"> @@ -161,7 +151,7 @@ export class Documentation extends </div> </div> </div> - } + )} </div> ); } @@ -224,136 +214,120 @@ export class Documentation extends ); }); return ( - <div - key={`section-${sectionName}`} - className="py2 pr3 md-pl2 sm-pl3" - > + <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> <div className="flex"> - <div style={{marginRight: 7}}> - <SectionHeader sectionName={sectionName} /> - </div> - {this._renderNetworkBadgesIfExists(sectionName)} + <div style={{ marginRight: 7 }}> + <SectionHeader sectionName={sectionName} /> + </div> + {this._renderNetworkBadgesIfExists(sectionName)} </div> - {docSection.comment && - <Comment - comment={docSection.comment} - /> - } + {docSection.comment && <Comment comment={docSection.comment} />} {docSection.constructors.length > 0 && - this.props.docsInfo.isVisibleConstructor(sectionName) && - <div> - <h2 className="thin">Constructor</h2> - {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} - </div> - } - {docSection.properties.length > 0 && + this.props.docsInfo.isVisibleConstructor(sectionName) && ( + <div> + <h2 className="thin">Constructor</h2> + {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} + </div> + )} + {docSection.properties.length > 0 && ( <div> <h2 className="thin">Properties</h2> <div>{propertyDefs}</div> </div> - } - {docSection.methods.length > 0 && + )} + {docSection.methods.length > 0 && ( <div> <h2 className="thin">Methods</h2> <div>{methodDefs}</div> </div> - } - {!_.isUndefined(docSection.events) && docSection.events.length > 0 && - <div> - <h2 className="thin">Events</h2> - <div>{eventDefs}</div> - </div> - } - {!_.isUndefined(typeDefs) && typeDefs.length > 0 && - <div> - <div>{typeDefs}</div> - </div> - } + )} + {!_.isUndefined(docSection.events) && + docSection.events.length > 0 && ( + <div> + <h2 className="thin">Events</h2> + <div>{eventDefs}</div> + </div> + )} + {!_.isUndefined(typeDefs) && + typeDefs.length > 0 && ( + <div> + <div>{typeDefs}</div> + </div> + )} </div> ); } 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 ( <a key={`badge-${networkName}-${sectionName}`} href={linkIfExists} target="_blank" - style={{color: colors.white, textDecoration: 'none'}} + style={{ color: colors.white, textDecoration: 'none' }} > - <Badge - title={networkName} - backgroundColor={networkNameToColor[networkName]} - /> + <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} /> </a> ); - }); + }, + ); 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 ( - <div> - {constructorDefs} - </div> - ); + return <div>{constructorDefs}</div>; } private _renderProperty(sectionName: string, property: Property): React.ReactNode { return ( - <div - key={`property-${property.name}-${property.type.name}`} - className="pb3" - > + <div key={`property-${property.name}-${property.type.name}`} className="pb3"> <code className="hljs"> {property.name}: - <Type - type={property.type} - sectionName={sectionName} - docsInfo={this.props.docsInfo} - /> + <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} /> </code> - {property.source && + {property.source && ( <SourceLink version={this.props.docsVersion} source={property.source} baseUrl={this.props.docsInfo.packageUrl} subPackageName={this.props.docsInfo.subPackageName} /> - } - {property.comment && - <Comment - comment={property.comment} - className="py2" - /> - } + )} + {property.comment && <Comment comment={property.comment} className="py2" />} </div> ); } - 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 ( <MethodBlock - key={`method-${method.name}-${sectionName}`} - sectionName={sectionName} - method={method} - typeDefinitionByName={typeDefinitionByName} - libraryVersion={this.props.docsVersion} - docsInfo={this.props.docsInfo} + key={`method-${method.name}-${sectionName}`} + sectionName={sectionName} + method={method} + typeDefinitionByName={typeDefinitionByName} + libraryVersion={this.props.docsVersion} + docsInfo={this.props.docsInfo} /> ); } @@ -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<void> { 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 ( <span> {`{`} - {values} - <br /> + {values} + <br /> {`}`} </span> ); 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<EventDefinitionProps, Event <div id={`${this.props.sectionName}-${event.name}`} className="pb2" - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > @@ -39,29 +39,24 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event id={event.name} shouldShowAnchor={this.state.shouldShowAnchor} /> - <div style={{fontSize: 16}}> + <div style={{ fontSize: 16 }}> <pre> - <code className="hljs"> - {this._renderEventCode()} - </code> + <code className="hljs">{this._renderEventCode()}</code> </pre> </div> </div> ); } private _renderEventCode() { - const indexed = <span style={{color: colors.green}}> indexed</span>; + const indexed = <span style={{ color: colors.green }}> indexed</span>; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { const type = ( - <Type - type={eventArg.type} - sectionName={this.props.sectionName} - docsInfo={this.props.docsInfo} - /> + <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} /> ); return ( <span key={`eventArg-${eventArg.name}`}> - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type}, + {eventArg.name} + {eventArg.isIndexed ? indexed : ''}: {type}, </span> ); }); @@ -71,9 +66,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event return ( <span> {`{`} - <br /> - {'\t'}{argList} - <br /> + <br /> + {'\t'} + {argList} + <br /> {`}`} </span> ); 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 ( <span key={`property-${property.name}-${property.type}-${type.name}`}> {property.name}:{' '} - {property.type.typeDocType !== TypeDocTypes.Reflection ? - <Type - type={property.type} - sectionName={props.sectionName} - docsInfo={props.docsInfo} - /> : + {property.type.typeDocType !== TypeDocTypes.Reflection ? ( + <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} /> + ) : ( <MethodSignature method={property.type.method} sectionName={props.sectionName} @@ -30,7 +27,7 @@ export function Interface(props: InterfaceProps) { shouldUseArrowSyntax={true} docsInfo={props.docsInfo} /> - }, + )}, </span> ); }); @@ -42,11 +39,11 @@ export function Interface(props: InterfaceProps) { {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} /> </span> ); - properties.push(( + properties.push( <span key={`indexSignature-${type.name}-${is.keyType.name}`}> [{param}]: {is.valueName}, - </span> - )); + </span>, + ); } 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 ( <span> {`{`} - <br /> - {'\t'}{propertyList} - <br /> + <br /> + {'\t'} + {propertyList} + <br /> {`}`} </span> ); 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<MethodBlockProps, MethodBlockSt return ( <div id={`${this.props.sectionName}-${method.name}`} - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} className="pb4" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - {!method.isConstructor && + {!method.isConstructor && ( <div className="flex"> - {(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')} <AnchorTitle headerSize={HeaderSizes.H3} title={method.name} @@ -79,7 +66,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt shouldShowAnchor={this.state.shouldShowAnchor} /> </div> - } + )} <code className="hljs"> <MethodSignature method={method} @@ -88,53 +75,38 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt docsInfo={this.props.docsInfo} /> </code> - {(method as TypescriptMethod).source && + {(method as TypescriptMethod).source && ( <SourceLink version={this.props.libraryVersion} source={(method as TypescriptMethod).source} baseUrl={this.props.docsInfo.packageUrl} subPackageName={this.props.docsInfo.subPackageName} /> - } - {method.comment && - <Comment - comment={method.comment} - className="py2" - /> - } - {method.parameters && !_.isEmpty(method.parameters) && - <div> - <h4 - className="pb1 thin" - style={{borderBottom: '1px solid #e1e8ed'}} - > - ARGUMENTS - </h4> - {this._renderParameterDescriptions(method.parameters)} - </div> - } - {method.returnComment && + )} + {method.comment && <Comment comment={method.comment} className="py2" />} + {method.parameters && + !_.isEmpty(method.parameters) && ( + <div> + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> + ARGUMENTS + </h4> + {this._renderParameterDescriptions(method.parameters)} + </div> + )} + {method.returnComment && ( <div className="pt1 comment"> - <h4 - className="pb1 thin" - style={{borderBottom: '1px solid #e1e8ed'}} - > + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> RETURNS </h4> - <Comment - comment={method.returnComment} - /> + <Comment comment={method.returnComment} /> </div> - } + )} </div> ); } private _renderChip(text: string) { return ( - <div - className="p1 mr1" - style={styles.chip} - > + <div className="p1 mr1" style={styles.chip}> {text} </div> ); @@ -146,22 +118,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt <div key={`param-description-${parameter.name}`} className="flex pb1 mb2" - style={{borderBottom: '1px solid #f0f4f7'}} + style={{ borderBottom: '1px solid #f0f4f7' }} > <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12"> - <div className="bold"> - {parameter.name} - </div> - <div className="pt1" style={{color: colors.grey, fontSize: 14}}> + <div className="bold">{parameter.name}</div> + <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}> {isOptional && 'optional'} </div> </div> <div className="col lg-col-8 md-col-8 sm-col-12 col-12"> - {parameter.comment && - <Comment - comment={parameter.comment} - /> - } + {parameter.comment && <Comment comment={parameter.comment} />} </div> </div> ); 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<MethodSignatureProps> = (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 ( <span> - {props.method.callPath}{methodName}{typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '} - {' '} - {props.method.returnType && + {props.method.callPath} + {methodName} + {typeParameterIfExists}({paramString}) + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {props.method.returnType && ( <Type type={props.method.returnType} sectionName={sectionName} typeDefinitionByName={props.typeDefinitionByName} docsInfo={props.docsInfo} /> - } + )} </span> ); }; @@ -53,8 +50,10 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (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 ( <span key={`param-${p.type}-${p.name}`}> - {p.name}{isOptional && '?'}: {type} + {p.name} + {isOptional && '?'}: {type} </span> ); }); @@ -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 = ( <span> {`<${typeParameter.name} extends `} - <Type - type={typeParameter.type} - sectionName={sectionName} - typeDefinitionByName={typeDefinitionByName} - docsInfo={docsInfo} - /> + <Type + type={typeParameter.type} + sectionName={sectionName} + typeDefinitionByName={typeDefinitionByName} + docsInfo={docsInfo} + /> {`>`} </span> ); 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 ( - <div className="pt2" style={{fontSize: 14}}> - <a - href={sourceCodeUrl} - target="_blank" - className="underline" - style={{color: colors.grey}} - > + <div className="pt2" style={{ fontSize: 14 }}> + <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}> Source </a> </div> 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 = ( <a href={typeNameUrlIfExists} target="_blank" className="text-decoration-none" - style={{color: colors.lightBlueA700}} + style={{ color: colors.lightBlueA700 }} > - {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}{typeName} + {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''} + {typeName} </a> ); - } 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() ? - <span - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} - style={{color: colors.lightBlueA700, cursor: 'pointer'}} - > - {typeName} - </span> : - <span - data-tip={true} - data-for={id} - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} - style={{color: colors.lightBlueA700, cursor: 'pointer', display: 'inline-block'}} - > - {typeName} - <ReactTooltip - type="light" - effect="solid" - id={id} - className="typeTooltip" + {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? ( + <span + onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + style={{ color: colors.lightBlueA700, cursor: 'pointer' }} > - <TypeDefinition - sectionName={props.sectionName} - customType={typeDefinition} - shouldAddId={false} - docsInfo={props.docsInfo} - /> - </ReactTooltip> - </span> - } + {typeName} + </span> + ) : ( + <span + data-tip={true} + data-for={id} + onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + style={{ + color: colors.lightBlueA700, + cursor: 'pointer', + display: 'inline-block', + }} + > + {typeName} + <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> + <TypeDefinition + sectionName={props.sectionName} + customType={typeDefinition} + shouldAddId={false} + docsInfo={props.docsInfo} + /> + </ReactTooltip> + </span> + )} </ScrollLink> ); } return ( <span> - <span style={{color: typeNameColor}}>{typeName}</span> - {isArray && '[]'}{!_.isEmpty(typeArgs) && + <span style={{ color: typeNameColor }}>{typeName}</span> + {isArray && '[]'} + {!_.isEmpty(typeArgs) && ( <span> - {'<'}{commaSeparatedTypeArgs}{'>'} + {'<'} + {commaSeparatedTypeArgs} + {'>'} </span> - } + )} </span> ); } 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<TypeDefinitionProps, TypeDef case KindString.Interface: typePrefix = 'Interface'; codeSnippet = ( - <Interface - type={customType} - sectionName={this.props.sectionName} - docsInfo={this.props.docsInfo} - /> + <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} /> ); break; case KindString.Variable: typePrefix = 'Enum'; - codeSnippet = ( - <CustomEnum - type={customType} - /> - ); + codeSnippet = <CustomEnum type={customType} />; break; case KindString.Enumeration: @@ -70,28 +62,21 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef defaultValue: c.defaultValue, }; }); - codeSnippet = ( - <Enum - values={enumValues} - /> - ); + codeSnippet = <Enum values={enumValues} />; break; case KindString.TypeAlias: typePrefix = 'Type Alias'; codeSnippet = ( <span> - <span - style={{color: colors.lightPurple}} - > - type - </span> {customType.name} ={' '} - {customType.type.typeDocType !== TypeDocTypes.Reflection ? + <span style={{ color: colors.lightPurple }}>type</span> {customType.name} ={' '} + {customType.type.typeDocType !== TypeDocTypes.Reflection ? ( <Type type={customType.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} - /> : + /> + ) : ( <MethodSignature method={customType.type.method} sectionName={this.props.sectionName} @@ -99,7 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef shouldUseArrowSyntax={true} docsInfo={this.props.docsInfo} /> - } + )} </span> ); break; @@ -113,7 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef <div id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} className="pb2" - style={{overflow: 'hidden', width: '100%'}} + style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > @@ -123,19 +108,12 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} shouldShowAnchor={this.state.shouldShowAnchor} /> - <div style={{fontSize: 16}}> + <div style={{ fontSize: 16 }}> <pre> - <code className="hljs"> - {codeSnippet} - </code> + <code className="hljs">{codeSnippet}</code> </pre> </div> - {customType.comment && - <Comment - comment={customType.comment} - className="py2" - /> - } + {customType.comment && <Comment comment={customType.comment} className="py2" />} </div> ); } 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: ( <div> - 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{' '} - (<a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank">0x.js</a> - {' '}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.{' '} - <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">0x Portal</a>, - 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 (<a + href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} + target="blank" + > + 0x.js + </a>{' '} + 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.{' '} + <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank"> + 0x Portal + </a>, a decentralized application that facilitates trustless trading of Ethereum-based tokens between known counterparties. </div> ), @@ -47,15 +52,14 @@ const sections: FAQSection[] = [ answer: ( <div> 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. </div> ), }, @@ -64,20 +68,18 @@ const sections: FAQSection[] = [ answer: ( <div> <ul> + <li>0x is a protocol for exchange, not a user-facing exchange application.</li> <li> - 0x is a protocol for exchange, not a user-facing exchange application. - </li> - <li> - 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. </li> <li> - 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. </li> </ul> </div> @@ -87,13 +89,12 @@ const sections: FAQSection[] = [ prompt: 'If 0x protocol is free to use, where do transaction fees come in?', answer: ( <div> - 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. </div> ), }, @@ -102,25 +103,23 @@ const sections: FAQSection[] = [ answer: ( <div> <div> - 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). </div> <ul> <li> - 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. </li> <li> - 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. </li> </ul> </div> @@ -130,16 +129,20 @@ const sections: FAQSection[] = [ prompt: 'What types of digital assets are supported by 0x?', answer: ( <div> - 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{' '} - <a href="https://cosmos.network/" target="_blank">Cosmos</a> and{' '} - <a href="http://polkadot.io/" target="_blank">Polkadot</a> 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{' '} + <a href="https://cosmos.network/" target="_blank"> + Cosmos + </a>{' '} + and{' '} + <a href="http://polkadot.io/" target="_blank"> + Polkadot + </a>{' '} + 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. </div> ), }, @@ -147,23 +150,19 @@ const sections: FAQSection[] = [ prompt: '0x is open source: what prevents someone from forking the protocol?', answer: ( <div> - 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. </div> ), }, @@ -180,26 +179,25 @@ const sections: FAQSection[] = [ 0x protocol token (ZRX) is utilized in two ways: 1) to solve the{' '} <a href="https://en.wikipedia.org/wiki/Coordination_game" target="_blank"> coordination problem - </a> 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: + </a>{' '} + 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: </div> <ul> <li> - 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). </li> <li> - 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. </li> </ul> </div> @@ -209,9 +207,9 @@ const sections: FAQSection[] = [ prompt: 'Why must transaction fees be denominated in 0x token (ZRX) rather than ETH?', answer: ( <div> - 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. </div> ), }, @@ -219,10 +217,10 @@ const sections: FAQSection[] = [ prompt: 'How will decentralized governance work?', answer: ( <div> - 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. </div> ), }, @@ -233,27 +231,19 @@ const sections: FAQSection[] = [ questions: [ { prompt: 'What is the total supply of ZRX tokens?', - answer: ( - <div> - 1,000,000,000 ZRX. Fixed supply. - </div> - ), + answer: <div>1,000,000,000 ZRX. Fixed supply.</div>, }, { prompt: 'When is the Token Launch? will there be a pre-sale?', - answer: ( - <div> - The token launch will be on August 15th, 2017. There will not be a pre-sale. - </div> - ), + answer: <div>The token launch will be on August 15th, 2017. There will not be a pre-sale.</div>, }, { prompt: 'What will the token launch proceeds be used for?', answer: ( <div> - 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{' '} <a href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY" target="_blank" @@ -267,66 +257,50 @@ const sections: FAQSection[] = [ prompt: 'What will be the initial distribution of ZRX tokens?', answer: ( <div> - <div className="center" style={{width: '100%'}}> - <img - style={{width: 350}} - src="/images/zrx_pie_chart.png" - /> + <div className="center" style={{ width: '100%' }}> + <img style={{ width: 350 }} src="/images/zrx_pie_chart.png" /> </div> <div className="py1"> - <div className="bold pb1"> - Token Launch (50%) - </div> + <div className="bold pb1">Token Launch (50%)</div> <div> - 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. </div> </div> <div className="py1"> - <div className="bold pb1"> - Retained by 0x (15%) - </div> + <div className="bold pb1">Retained by 0x (15%)</div> <div> - 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. </div> </div> <div className="py1"> - <div className="bold pb1"> - Developer Fund (15%) - </div> + <div className="bold pb1">Developer Fund (15%)</div> <div> - 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. </div> </div> <div className="py1"> - <div className="bold pb1"> - Founding Team (10%) - </div> + <div className="bold pb1">Founding Team (10%)</div> <div> - 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. </div> </div> <div className="py1"> - <div className="bold pb1"> - Early Backers & Advisors (10%) - </div> + <div className="bold pb1">Early Backers & Advisors (10%)</div> <div> - 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. </div> </div> </div> @@ -336,47 +310,39 @@ const sections: FAQSection[] = [ prompt: 'Can I mine ZRX tokens?', answer: ( <div> - 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. </div> ), }, { prompt: 'Will there be a lockup period for ZRX tokens sold in the token launch?', - answer: ( - <div> - No, ZRX tokens sold in the token launch will immediately be liquid. - </div> - ), + answer: <div>No, ZRX tokens sold in the token launch will immediately be liquid.</div>, }, { prompt: 'Will there be a lockup period for tokens allocated to the founding team?', answer: ( <div> - 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. </div> ), }, { prompt: 'Which cryptocurrencies will be accepted in the token launch?', - answer: ( - <div>ETH.</div> - ), + answer: <div>ETH.</div>, }, { prompt: 'When will 0x be live?', answer: ( <div> - 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. </div> ), }, @@ -401,19 +367,17 @@ const sections: FAQSection[] = [ questions: [ { prompt: 'Where is 0x based?', - answer: ( - <div> - 0x was founded in SF and is driven by a diverse group of contributors. - </div> - ), + answer: <div>0x was founded in SF and is driven by a diverse group of contributors.</div>, }, { prompt: 'How can I get involved?', answer: ( <div> - Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>! - As an open source project, 0x will rely on a worldwide community of passionate - developers to contribute proposals, ideas and code. + Join our{' '} + <a href={constants.URL_ZEROEX_CHAT} target="_blank"> + Rocket.chat + </a>! As an open source project, 0x will rely on a worldwide community of passionate developers + to contribute proposals, ideas and code. </div> ), }, @@ -421,20 +385,15 @@ const sections: FAQSection[] = [ prompt: 'Why the name 0x?', answer: ( <div> - 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. </div> ), }, { prompt: 'How do you pronounce 0x?', - answer: ( - <div> - We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please. - </div> - ), + answer: <div>We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.</div>, }, ], }, @@ -447,20 +406,13 @@ export class FAQ extends React.Component<FAQProps, FAQState> { public render() { return ( <div> - <DocumentTitle title="0x FAQ"/> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - /> - <div - id="faq" - className="mx-auto max-width-4 pt4" - style={{color: colors.grey800}} - > - <h1 className="center" style={{...styles.thin}}>0x FAQ</h1> - <div className="sm-px2 md-px2 lg-px0 pb4"> - {this._renderSections()} - </div> + <DocumentTitle title="0x FAQ" /> + <TopBar blockchainIsLoaded={false} location={this.props.location} /> + <div id="faq" className="mx-auto max-width-4 pt4" style={{ color: colors.grey800 }}> + <h1 className="center" style={{ ...styles.thin }}> + 0x FAQ + </h1> + <div className="sm-px2 md-px2 lg-px0 pb4">{this._renderSections()}</div> </div> <Footer /> </div> 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<QuestionProps, QuestionState> { } public render() { return ( - <div - className="py1" - > + <div className="py1"> <Card initiallyExpanded={this.props.shouldDisplayExpanded} onExpandChange={this._onExchangeChange.bind(this)} > <CardHeader title={this.props.prompt} - style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}} - titleStyle={{color: colors.darkerGrey}} + style={{ + borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none', + }} + titleStyle={{ color: colors.darkerGrey }} actAsExpander={true} showExpandableButton={true} /> <CardText expandable={true}> - <div style={{lineHeight: 1.4}}> - {this.props.answer} - </div> + <div style={{ lineHeight: 1.4 }}>{this.props.answer}</div> </CardText> </Card> </div> 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<LandingProps, LandingState> { } public render() { return ( - <div id="landing" className="clearfix" style={{color: colors.grey500}}> - <DocumentTitle title="0x Protocol"/> + <div id="landing" className="clearfix" style={{ color: colors.grey500 }}> + <DocumentTitle title="0x Protocol" /> <TopBar blockchainIsLoaded={false} location={this.props.location} isNightVersion={true} - style={{backgroundColor: colors.heroGrey, position: 'relative'}} + style={{ backgroundColor: colors.heroGrey, position: 'relative' }} /> {this._renderHero()} {this._renderProjects()} @@ -188,46 +191,43 @@ export class Landing extends React.Component<LandingProps, LandingState> { 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 ( - <div - className="clearfix py4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto max-width-4 clearfix" - > + <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto max-width-4 clearfix"> <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix"> <div className="col lg-col-5 md-col-5 col-12 sm-center"> - <img - src="/images/landing/hero_chip_image.png" - height={isSmallScreen ? 300 : 395} - /> + <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} /> </div> - <div - className={left} - style={{color: colors.white}} - > - <div style={{paddingLeft: isSmallScreen ? 0 : 12}}> + <div className={left} style={{ color: colors.white }}> + <div style={{ paddingLeft: isSmallScreen ? 0 : 12 }}> <div className="sm-pb2" - style={{fontFamily: 'Roboto Mono', fontSize: isSmallScreen ? 26 : 34}} + style={{ + fontFamily: 'Roboto Mono', + fontSize: isSmallScreen ? 26 : 34, + }} > Powering decentralized exchange </div> <div className="pt2 h5 sm-mx-auto" - style={{maxWidth: 446, fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300}} + style={{ + maxWidth: 446, + fontFamily: 'Roboto Mono', + lineHeight: 1.7, + fontWeight: 300, + }} > - 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. </div> - <div className="pt3 clearfix sm-mx-auto" style={{maxWidth: 342}}> + <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 342 }}> <div className="lg-pr2 md-pr2 col col-6 sm-center"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <RaisedButton - style={{borderRadius: 6, minWidth: 157.36}} - buttonStyle={{borderRadius: 6}} + style={{ borderRadius: 6, minWidth: 157.36 }} + buttonStyle={{ borderRadius: 6 }} labelStyle={buttonLabelStyle} label="Build on 0x" onClick={_.noop} @@ -241,7 +241,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { className="text-decoration-none" > <RaisedButton - style={{borderRadius: 6, minWidth: 150}} + style={{ borderRadius: 6, minWidth: 150 }} buttonStyle={lightButtonStyle} labelColor="white" backgroundColor={colors.heroGrey} @@ -263,18 +263,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { 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 ( - <div - key={`project-${project.logoFileName}`} - className={`col col-${colWidth} center`} - > + <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}> <div> - <a - href={project.projectUrl} - target="_blank" - className="text-decoration-none" - > + <a href={project.projectUrl} target="_blank" className="text-decoration-none"> <img src={`/images/landing/project_logos/${project.logoFileName}`} height={isSmallScreen ? 60 : 92} @@ -292,29 +285,26 @@ export class Landing extends React.Component<LandingProps, LandingState> { letterSpacing: 3, }; return ( - <div - className="clearfix py4" - style={{backgroundColor: colors.projectsGrey}} - > + <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}> <div className="mx-auto max-width-4 clearfix sm-px3"> - <div - className="h4 pb3 md-pl3 sm-pl2" - style={titleStyle} - > + <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}> Projects building on 0x </div> - <div className="clearfix"> - {projectList} - </div> + <div className="clearfix">{projectList}</div> <div className="pt3 mx-auto center" - style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}} + style={{ + color: colors.landingLinkGrey, + fontFamily: 'Roboto Mono', + maxWidth: 300, + fontSize: 14, + }} > view the{' '} <Link to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} className="text-decoration-none underline" - style={{color: colors.landingLinkGrey}} + style={{ color: colors.landingLinkGrey }} > full list </Link> @@ -326,52 +316,41 @@ export class Landing extends React.Component<LandingProps, LandingState> { private _renderTokenizationSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( - <div - className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" - style={{backgroundColor: colors.grey100}} - > + <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> <div className="mx-auto max-width-4 py4 clearfix"> - {isSmallScreen && - this._renderTokenCloud() - } + {isSmallScreen && this._renderTokenCloud()} <div className="col lg-col-6 md-col-6 col-12"> - <div className="mx-auto" style={{maxWidth: 385, paddingTop: 7}}> - <div - className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" - style={{fontFamily: 'Roboto Mono'}} - > + <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}> + <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> The world's value is becoming tokenized </div> <div className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center" - style={{fontFamily: 'Roboto Mono', lineHeight: 1.7}} + style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7 }} > - {isSmallScreen ? + {isSmallScreen ? ( <span> 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. - </span> : + </span> + ) : ( <div> <div> - The Ethereum blockchain is an open, borderless - financial system that represents + The Ethereum blockchain is an open, borderless financial system that + represents </div> <div> - 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. </div> </div> - } - </div> - <div className="flex pt1 sm-px3"> - {this._renderAssetTypes()} + )} </div> + <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div> </div> </div> - {!isSmallScreen && - this._renderTokenCloud() - } + {!isSmallScreen && this._renderTokenCloud()} </div> </div> ); @@ -379,81 +358,84 @@ export class Landing extends React.Component<LandingProps, LandingState> { private _renderProtocolSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( - <div - className="clearfix lg-py4 md-py4 sm-pt4" - style={{backgroundColor: colors.heroGrey}} - > + <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix"> <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img - src="/images/landing/relayer_diagram.png" - height={isSmallScreen ? 326 : 426} - /> + <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} /> </div> <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}} + style={{ + color: colors.beigeWhite, + paddingTop: 8, + maxWidth: isSmallScreen ? 'none' : 445, + }} > - <div - className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" - style={{fontFamily: 'Roboto Mono'}} - > - <div> - Off-chain order relay - </div> - <div> - On-chain settlement - </div> + <div className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" style={{ fontFamily: 'Roboto Mono' }}> + <div>Off-chain order relay</div> + <div>On-chain settlement</div> </div> <div className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto" - style={{fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300, maxWidth: 445}} + style={{ + fontFamily: 'Roboto Mono', + lineHeight: 1.7, + fontWeight: 300, + maxWidth: 445, + }} > - 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. </div> <div className="pt3 sm-mx-auto sm-px3" - style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}} + style={{ + color: colors.landingLinkGrey, + maxWidth: isSmallScreen ? 412 : 'none', + }} > - <div className="flex" style={{fontSize: 18}}> + <div className="flex" style={{ fontSize: 18 }}> <div className="lg-h4 md-h4 sm-h5" - style={{letterSpacing: isSmallScreen ? 1 : 3, fontFamily: 'Roboto Mono'}} + style={{ + letterSpacing: isSmallScreen ? 1 : 3, + fontFamily: 'Roboto Mono', + }} > RELAYERS BUILDING ON 0X </div> - <div className="h5" style={{marginLeft: isSmallScreen ? 26 : 49}}> + <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}> <Link to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} className="text-decoration-none underline" - style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}} + style={{ + color: colors.landingLinkGrey, + fontFamily: 'Roboto Mono', + }} > view all </Link> </div> </div> - <div className="lg-flex md-flex sm-clearfix pt3" style={{opacity: 0.4}}> + <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}> <div className="col col-4 sm-center"> - <img - src="/images/landing/ethfinex.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <img + src="/images/landing/ethfinex.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> - <div - className="col col-4 center" - > - <img - src="/images/landing/radar_relay.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <div className="col col-4 center"> + <img + src="/images/landing/radar_relay.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> - <div className="col col-4 sm-center" style={{textAlign: 'right'}}> - <img - src="/images/landing/paradex.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <div className="col col-4 sm-center" style={{ textAlign: 'right' }}> + <img + src="/images/landing/paradex.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> </div> </div> @@ -478,58 +460,45 @@ export class Landing extends React.Component<LandingProps, LandingState> { maxWidth: isSmallScreen ? 375 : 441, }; return ( - <div - className="clearfix lg-pt4 md-pt4" - style={{backgroundColor: colors.heroGrey}} - > + <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> - {isSmallScreen && - this._renderBlockChipImage() - } + {isSmallScreen && this._renderBlockChipImage()} <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - style={{color: colors.beigeWhite}} + style={{ color: colors.beigeWhite }} > <div className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center" - style={{fontFamily: 'Roboto Mono'}} + style={{ fontFamily: 'Roboto Mono' }} > A building block for dApps </div> - <div - className="pb3 pt2 sm-mx-auto sm-center" - style={descriptionStyle} - > + <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}> 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. </div> - <div - className="sm-mx-auto sm-center" - style={callToActionStyle} - > + <div className="sm-mx-auto sm-center" style={callToActionStyle}> Learn how in our{' '} <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none underline" - style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} + style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} > 0x.js - </Link> - {' '}and{' '} + </Link>{' '} + and{' '} <Link to={WebsitePaths.SmartContracts} className="text-decoration-none underline" - style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} + style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} > smart contract - </Link> - {' '}docs + </Link>{' '} + docs </div> </div> - {!isSmallScreen && - this._renderBlockChipImage() - } + {!isSmallScreen && this._renderBlockChipImage()} </div> </div> ); @@ -538,10 +507,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img - src="/images/landing/0x_chips.png" - height={isSmallScreen ? 240 : 368} - /> + <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} /> </div> ); } @@ -549,10 +515,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 center"> - <img - src="/images/landing/tokenized_world.png" - height={isSmallScreen ? 280 : 364.5} - /> + <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} /> </div> ); } @@ -566,7 +529,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { { 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<LandingProps, LandingState> { const assets = _.map(assetTypes, (assetType: AssetType) => { const style = _.isUndefined(assetType.style) ? {} : assetType.style; return ( - <div - key={`asset-${assetType.title}`} - className="center" - style={{opacity: 0.8, ...style}} - > + <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}> <div> - <img - src={assetType.imageUrl} - height="80" - /> + <img src={assetType.imageUrl} height="80" /> </div> - <div style={{fontFamily: 'Roboto Mono', fontSize: 13.5, fontWeight: 400, opacity: 0.75}}> + <div + style={{ + fontFamily: 'Roboto Mono', + fontSize: 13.5, + fontWeight: 400, + opacity: 0.75, + }} + > {assetType.title} </div> </div> @@ -606,43 +572,24 @@ export class Landing extends React.Component<LandingProps, LandingState> { }; const boxes = _.map(boxContents, (boxContent: BoxContent) => { return ( - <div - key={`box-${boxContent.title}`} - className="col lg-col-4 md-col-4 col-12 sm-pb4" - > - <div - className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} - style={boxStyle} - > + <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4"> + <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}> <div> - <img src={boxContent.imageUrl} style={{height: 210}} /> + <img src={boxContent.imageUrl} style={{ height: 210 }} /> </div> - <div - className="h3" - style={{color: 'black', fontFamily: 'Roboto Mono'}} - > + <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}> {boxContent.title} </div> - <div - className="pt2 pb2" - style={{fontFamily: 'Roboto Mono', fontSize: 14}} - > + <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}> {boxContent.description} </div> </div> </div> ); - }); return ( - <div - className="clearfix" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto py4 sm-mt2 clearfix" - style={{maxWidth: '60em'}} - > + <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}> {boxes} </div> </div> @@ -655,7 +602,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { { 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<LandingProps, LandingState> { { 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<LandingProps, LandingState> { { 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<LandingProps, LandingState> { { 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<LandingProps, LandingState> { key={`useCase-${useCase.type}`} className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`} > - <div - className="relative p2 pb2 sm-mx-auto" - style={useCaseBoxStyle} - > - <div - className="absolute center" - style={{top: -35, width: 'calc(100% - 32px)'}} - > - <img src={useCase.imageUrl} style={{height: 50}} /> + <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}> + <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}> + <img src={useCase.imageUrl} style={{ height: 50 }} /> </div> <div className="pt2 center" style={typeStyle}> {useCase.type} </div> <div className="pt2" - style={{lineHeight: 1.5, fontSize: 14, overflow: 'hidden', height: 104}} + style={{ + lineHeight: 1.5, + fontSize: 14, + overflow: 'hidden', + height: 104, + }} > {useCase.description} </div> @@ -746,14 +701,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); }); return ( - <div - className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" - style={{maxWidth: '67em'}} - > + <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}> {cases} </div> </div> @@ -772,26 +721,26 @@ export class Landing extends React.Component<LandingProps, LandingState> { 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 ( - <div - className="clearfix pb4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto max-width-4 pb4 mb3 clearfix" - > + <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto max-width-4 pb4 mb3 clearfix"> <div className={callToActionClassNames} - style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}} + style={{ + fontFamily: 'Roboto Mono', + color: colors.white, + lineHeight: isSmallScreen ? 1.7 : 3, + }} > Get started on building the decentralized future </div> <div className="col lg-col-4 md-col-4 col-12 sm-center sm-pt2"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <RaisedButton - style={{borderRadius: 6, minWidth: 150}} + style={{ borderRadius: 6, minWidth: 150 }} buttonStyle={lightButtonStyle} labelColor={colors.white} backgroundColor={colors.heroGrey} diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx index bdf9ad688..ff277c377 100644 --- a/packages/website/ts/pages/not_found.tsx +++ b/packages/website/ts/pages/not_found.tsx @@ -1,8 +1,8 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {Styles} from 'ts/types'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { Styles } from 'ts/types'; export interface NotFoundProps { location: Location; @@ -20,15 +20,12 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> { public render() { return ( <div> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - /> + <TopBar blockchainIsLoaded={false} location={this.props.location} /> <div className="mx-auto max-width-4 py4"> <div className="center py4"> <div className="py4"> <div className="py4"> - <h1 style={{...styles.thin}}>404 Not Found</h1> + <h1 style={{ ...styles.thin }}>404 Not Found</h1> <div className="py1"> <div className="py3"> 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<AnchorTitleProps, AnchorTitleSt opacity = this.state.isHovering ? 0.6 : 1; } return ( - <div className="relative flex" style={{...styles[this.props.headerSize], ...styles.headers}}> - <div - className="inline-block" - style={{paddingRight: 4}} - > + <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}> + <div className="inline-block" style={{ paddingRight: 4 }}> {this.props.title} </div> <ScrollLink @@ -78,7 +75,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt <i className="zmdi zmdi-link" onClick={utils.setUrlHash.bind(utils, this.props.id)} - style={{...styles.anchor, opacity}} + style={{ ...styles.anchor, opacity }} onMouseOver={this._setHoverState.bind(this, true)} onMouseOut={this._setHoverState.bind(this, false)} /> 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<MarkdownCodeBlockProps, M } public render() { return ( - <span style={{fontSize: 16}}> - <HighLight - className={this.props.language || 'javascript'} - > - {this.props.literal} - </HighLight> + <span style={{ fontSize: 16 }}> + <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> </span> ); } 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<MarkdownSectionProps, Markd <ScrollElement name={id}> <div className="clearfix"> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{textTransform: 'capitalize'}}> + <span style={{ textTransform: 'capitalize' }}> <AnchorTitle headerSize={this.props.headerSize} title={sectionName} @@ -51,20 +51,17 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </span> </div> <div className="col col-4 sm-hide xs-hide py2 right-align"> - {!_.isUndefined(this.props.githubLink) && + {!_.isUndefined(this.props.githubLink) && ( <RaisedButton href={this.props.githubLink} target="_blank" label="Edit on Github" - icon={<i className="zmdi zmdi-github" style={{fontSize: 23}} />} + icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />} /> - } + )} </div> </div> - <ReactMarkdown - source={this.props.markdownContent} - renderers={{CodeBlock: MarkdownCodeBlock}} - /> + <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </ScrollElement> </div> ); 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<NestedSidebarMenuProps, N if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( - <div - key={`section-${sectionName}`} - className="py1" - > + <div key={`section-${sectionName}`} className="py1"> <ScrollLink to={id} offset={-20} duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.DOCS_CONTAINER_ID} > - <div - style={{color: colors.grey, cursor: 'pointer'}} - className="pb1" - > + <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> {finalSectionName.toUpperCase()} </div> </ScrollLink> @@ -65,34 +59,29 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </div> ); } else { - return ( - <div key={`section-${sectionName}`} > - {this._renderMenuItems(menuItems)} - </div> - ); + return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>; } }); return ( <div> {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.docPath) && - <VersionDropDown - selectedVersion={this.props.selectedVersion} - versions={this.props.versions} - docPath={this.props.docPath} - /> - } + !_.isUndefined(this.props.selectedVersion) && + !_.isUndefined(this.props.docPath) && ( + <VersionDropDown + selectedVersion={this.props.selectedVersion} + versions={this.props.versions} + docPath={this.props.docPath} + /> + )} {navigation} </div> ); } 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<NestedSidebarMenuProps, N style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} > - <span style={{textTransform: 'capitalize'}}> - {menuItemName} - </span> + <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span> </MenuItem> </ScrollLink> {this._renderMenuItemSubsections(menuItemName)} @@ -128,30 +115,34 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N } private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { return ( - <ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}> - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); - return ( - <li key={`menuItem-${entityName}`}> - <ScrollLink - to={id} - offset={0} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - onTouchTap={this._onMenuItemClick.bind(this, name)} - > - <MenuItem + <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}> + {_.map(entityNames, entityName => { + const name = `${menuItemName}-${entityName}`; + const id = utils.getIdFromName(name); + return ( + <li key={`menuItem-${entityName}`}> + <ScrollLink + to={id} + offset={0} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.DOCS_CONTAINER_ID} onTouchTap={this._onMenuItemClick.bind(this, name)} - style={{minHeight: 35}} - innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}} > - {entityName} - </MenuItem> - </ScrollLink> - </li> - ); - })} + <MenuItem + onTouchTap={this._onMenuItemClick.bind(this, name)} + style={{ minHeight: 35 }} + innerDivStyle={{ + paddingLeft: 36, + fontSize: 14, + lineHeight: '35px', + }} + > + {entityName} + </MenuItem> + </ScrollLink> + </li> + ); + })} </ul> ); } 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<SectionHeaderProps, SectionHe <ScrollElement name={id}> <AnchorTitle headerSize={this.props.headerSize} - title={<span style={{textTransform: 'capitalize'}}>{sectionName}</span>} + title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>} 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<VersionDropDownProps, VersionDropDownState> { public render() { return ( - <div className="mx-auto" style={{width: 120}}> + <div className="mx-auto" style={{ width: 120 }}> <DropDownMenu maxHeight={300} value={this.props.selectedVersion} @@ -27,13 +27,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi } private _renderDropDownItems() { const items = _.map(this.props.versions, version => { - return ( - <MenuItem - key={version} - value={version} - primaryText={`v${version}`} - /> - ); + return <MenuItem key={version} value={version} primaryText={`v${version}`} />; }); 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<WikiProps, WikiState> { } public render() { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) - ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + ? {} + : this._getMenuSubsectionsBySection(this.state.articlesBySection); return ( <div> - <DocumentTitle title="0x Protocol Wiki"/> + <DocumentTitle title="0x Protocol Wiki" /> <TopBar blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} shouldFullWidth={true} /> - {_.isUndefined(this.state.articlesBySection) ? - <div - className="col col-12" - style={styles.mainContainers} - > + {_.isUndefined(this.state.articlesBySection) ? ( + <div className="col col-12" style={styles.mainContainers}> <div className="relative sm-px2 sm-pt2 sm-m1" - style={{height: 122, top: '50%', transform: 'translateY(-50%)'}} + style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} > <div className="center pb2"> <CircularProgress size={40} thickness={5} /> </div> - <div className="center pt2" style={{paddingBottom: 11}}>Loading wiki...</div> + <div className="center pt2" style={{ paddingBottom: 11 }}> + Loading wiki... + </div> </div> - </div> : - <div - className="mx-auto flex" - style={{color: colors.grey800, height: 43}} - > + </div> + ) : ( + <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> <div className="border-right absolute pt2" - style={{...styles.menuContainer, ...styles.mainContainers}} + style={{ ...styles.menuContainer, ...styles.mainContainers }} > <NestedSidebarMenu topLevelMenu={menuSubsectionsBySection} @@ -105,24 +100,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> </div> <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div - id="documentation" - style={styles.mainContainers} - className="absolute" - > + <div id="documentation" style={styles.mainContainers} className="absolute"> <div id="0xProtocolWiki" /> <h1 className="md-pl2 sm-pl3"> <a href={constants.URL_GITHUB_WIKI} target="_blank"> 0x Protocol Wiki </a> </h1> - <div id="wiki"> - {this._renderWikiArticles()} - </div> + <div id="wiki">{this._renderWikiArticles()}</div> </div> </div> </div> - } + )} </div> ); } @@ -143,12 +132,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}> + <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}> See a way to make this article better?{' '} - <a - href={githubLink} - target="_blank" - > + <a href={githubLink} target="_blank"> Edit here → </a> </div> @@ -156,10 +142,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { ); }); return ( - <div - key={`section-${sectionName}`} - className="py2 pr3 md-pl2 sm-pl3" - > + <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> {renderedArticles} </div> @@ -172,7 +155,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> { 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<void> { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; @@ -192,15 +179,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> { 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); |