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