From 7f77347ea4537b66f045140bd5aa1995c3b2d948 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 3 Dec 2018 12:19:50 +0100 Subject: Changes boolean props to follow is[Property] syntax --- packages/website/ts/@next/components/footer.tsx | 6 +-- packages/website/ts/@next/components/layout.tsx | 18 +++---- packages/website/ts/@next/components/logo.tsx | 5 +- packages/website/ts/@next/components/siteWrap.tsx | 5 +- packages/website/ts/@next/components/text.tsx | 25 +++++---- packages/website/ts/@next/pages/about/mission.tsx | 10 ++-- packages/website/ts/@next/pages/instant.tsx | 22 ++++---- packages/website/ts/@next/pages/landing.tsx | 62 +++++++++++++++++------ packages/website/ts/@next/pages/why.tsx | 24 ++++----- 9 files changed, 107 insertions(+), 70 deletions(-) diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index b431ba9e5..032d2e8a1 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -61,18 +61,18 @@ export const Footer: React.StatelessComponent = ({}) => ( bgColor="#181818" noMargin> - + - + {_.map(linkRows, (row, index) => ( + isNoPadding={true}> { row.heading } diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 86072b81d..28503711c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -17,11 +17,11 @@ interface PaddingSizes { } interface SectionProps { - noPadding?: any; - padLarge?: any; - noMargin?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; + isNoMargin?: any; bgColor?: string; - fullWidth?: any; + isFullWidth?: boolean; } interface WrapProps { @@ -32,8 +32,8 @@ interface WrapProps { interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; - padLarge?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; bgColor?: string; } @@ -93,8 +93,8 @@ export const Main = styled.main` // just
? export const Section = styled.section` width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); @@ -137,7 +137,7 @@ export const WrapGrid = styled(WrapBase)` `; export const Column = styled.div` - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; border: 1px dotted rgba(255, 0, 0, 0.3); background-color: ${props => props.bgColor}; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 0b98fcf9d..5d6258f37 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import styled from 'styled-components'; +import { ThemeInterface } from 'ts/@next/components/siteWrap'; import LogoIcon from '../icons/logo-with-type.svg'; interface LogoInterface { - // showType: boolean; light?: any; + theme?: ThemeInterface; } @@ -20,7 +21,7 @@ const Icon = styled(LogoIcon)` flex-shrink: 0; path { - fill: ${props => props.light ? '#fff' : props.theme.textColor}; + fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor}; } `; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 7529e90c9..d38c7c50c 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -13,14 +13,15 @@ interface Props { children: any; } -interface GlobalThemes { +// we proabbly want to put this somewhere else (themes) +export interface ThemeInterface { [key: string]: { bgColor: string; textColor: string; } } -const GLOBAL_THEMES: GlobalThemes = { +const GLOBAL_THEMES: ThemeInterface = { dark: { bgColor: '#000000', textColor: '#FFFFFF', diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 4bc21f0fc..4e2b22f52 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,20 +1,19 @@ import * as React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { colors } from 'ts/style/colors'; +import styled from 'styled-components'; + interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; size?: 'default' | 'medium' | 'large' | 'small'; - center?: boolean; - children: Node | string; - noMargin?: any; + isCentered?: boolean; + isNoMargin?: boolean; } interface ParagraphProps { - noMargin?: any; + isNoMargin?: boolean; size?: 'default' | 'small' | 'medium' | 'large'; - muted?: any; - center?: any; + isMuted?: boolean | number; + isCentered?: boolean; } interface HeadingSizes { @@ -50,8 +49,8 @@ const StyledHeading = styled.h1` color: ${props => props.color || props.theme.textColor}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; font-weight: 300; - margin-bottom: ${props => !props.noMargin && '30px'}; - text-align: ${props => props.center && 'center'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; + text-align: ${props => props.isCentered && 'center'}; `; export const Heading: React.StatelessComponent = props => { @@ -69,9 +68,9 @@ export const Heading: React.StatelessComponent = props => { // for literally anything = export const Paragraph = styled.p` font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; - margin-bottom: ${props => !props.noMargin && '30px'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; line-height: 1.4; color: ${props => props.color || props.theme.textColor}; - opacity: ${props => props.muted || 0.75}; - text-align: ${props => props.center && 'center'}; + opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; + text-align: ${props => props.isCentered && 'center'}; `; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index 902612703..b85a4e91e 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -31,7 +31,9 @@ export const NextAboutMission = () => (
-
+
@@ -50,7 +52,7 @@ export const NextAboutMission = () => ( Do The Right Thing - We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole. + We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole. @@ -59,7 +61,7 @@ export const NextAboutMission = () => ( Consistently Ship - Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization. + Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization. @@ -68,7 +70,7 @@ export const NextAboutMission = () => ( Focus on long-term Impact - We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles. + We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles. diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 69a9fb6b3..a8707cdd7 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -16,13 +16,15 @@ export const Next0xInstant = () => (
- Introducing 0x Instant - A free and flexible way to offer simple crypto purchasing in any app or website + Introducing 0x Instant + A free and flexible way to offer simple crypto purchasing in any app or website
-
+
Preview of payment widgets @@ -36,7 +38,7 @@ export const Next0xInstant = () => ( Support ERC-20 and ERC-721 tokens - Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins. + Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins. @@ -51,7 +53,7 @@ export const Next0xInstant = () => ( Generate revenue for your business - With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp. + With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp. @@ -66,7 +68,7 @@ export const Next0xInstant = () => ( Easy and flexible integration - Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool. + Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.
Explore AssetBuyer Learn about liquidity @@ -95,14 +97,14 @@ export const Next0xInstant = () => (
- + Need more flexibility? Dive into our docs, or contact us if needed - +
@@ -116,8 +118,8 @@ export const Next0xInstant = () => (
- Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations. - See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. + Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations. + See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 137bcda7d..9ea050af7 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -55,11 +55,15 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
-
+
- + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have @@ -74,60 +78,88 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( {/* Note you can also pass in a string "large/default" or a number for custom margins */} {/* NOTE: this probably should be withComponent as part of a
*/} - - + + 873,435 - + Number of transactions - - + + $203M - + Total volume - - + + 227,372 - + Number of relayers
-
+
You're in good company {_.map([...Array(9)], (item, index) => ( - + ))}
- + Ready to build on 0x? - + Ready to build on 0x? diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index f9dff725b..52268bd26 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -17,9 +17,9 @@ export const NextWhy = () => (
- The exchange layer for the crypto economy - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - Build on 0x (arrow) + The exchange layer for the crypto economy + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + Build on 0x (arrow)
@@ -58,40 +58,40 @@ export const NextWhy = () => ( What 0x offers A Standard for Exchange - 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. + 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. Robust Smart Contracts - 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. + 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. Extensible Architecture - 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. + 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. Efficient Design - 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. + 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. Use Cases - slider + slider Exchange Functionality Secure Non-custodial Trading - Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. + Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. Flexible Order Types - Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. + Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. Build a Business - Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. + Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. Networked Liquidity - Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. + Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.
-- cgit v1.2.3