diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 19:05:08 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 19:05:08 +0800 |
commit | fff4dd7e947f7f66e0854dea5d192c72b9e3d674 (patch) | |
tree | 64e8d3577ddb61f50df046d3ee9a5a735da6e815 | |
parent | c2d958515009967a6802a06e47f454e12d15a7fe (diff) | |
download | dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar.gz dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar.bz2 dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar.lz dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar.xz dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.tar.zst dexon-0x-contracts-fff4dd7e947f7f66e0854dea5d192c72b9e3d674.zip |
Export svgs as typed pure components
-rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 21 | ||||
-rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 6 | ||||
-rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 9 | ||||
-rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 76 | ||||
-rw-r--r-- | packages/website/ts/globals.d.ts | 6 |
5 files changed, 87 insertions, 31 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 10916f28e..112d4ed68 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -3,20 +3,23 @@ import styled from 'styled-components'; interface Props { icon: any; - size?: any; + size?: string; } -const StyledIcon = styled.div` +export const IconClass: React.FunctionComponent<Props> = (props: Props) => { + const { icon, size } = props; + + return ( + <div /> + ); +}; + +export const Icon = styled(IconClass)` margin: auto; flex-shrink: 0; ${(props: Props) => props.size && ` - width: ${props.size}; height: auto; + width: ${props.size}; + height: auto; `} `; - -export const Icon: React.StatelessComponent = ({ icon, ...props }) => ( - <> - <StyledIcon as={icon as 'svg'} {...props} /> - </> -); diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 59db7d0ec..1a02e211e 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import logoWithType from '../icons/logo-with-type.svg'; +import LogoIcon from '../icons/logo-with-type.svg'; interface LogoInterface { // showType: boolean; @@ -11,12 +11,12 @@ const StyledLogo = styled.div` text-align: left; `; -const Icon = styled.div` +const Icon = styled(LogoIcon)` flex-shrink: 0; `; export const Logo: React.StatelessComponent<LogoInterface> = ({}) => ( <StyledLogo> - <Icon as={logoWithType as 'svg'} /> + <Icon /> </StyledLogo> ); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 766eb809b..9be2ee4da 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -7,9 +7,8 @@ import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout' import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Intro, Text } from 'ts/@next/components/text'; -import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; -import protocol from 'ts/@next/icons/illustrations/protocol.svg'; - +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; const Icon = styled.div` flex-shrink: 0; @@ -35,14 +34,14 @@ export const NextLanding = () => ( </Column> <Column colWidth="1/3"> - <Icon as={logoOutlined as 'svg'} /> + <ProtocolIcon /> </Column> </Wrap> </Section> <Section bgColor={colors.backgroundDark}> <WrapCentered> - <Icon as={protocol as 'svg'} /> + <Icon><LogoOutlined /></Icon> <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text> <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text> </WrapCentered> diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index ec13d40c5..ce2ad5308 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -3,22 +3,21 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Icon } from 'ts/@next/components/icon'; +import { Heading, Intro, Text } from 'ts/@next/components/text'; -import protocol from 'ts/@next/icons/illustrations/protocol.svg'; -import customize from 'ts/@next/icons/illustrations/customize.svg'; -import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; +import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; export const NextWhy = () => ( <SiteWrap> <Section> <WrapCentered> <Column colWidth="2/3"> - <Heading center>The exchange layer for the crypto economy</Heading> + <Heading size="medium" center>The exchange layer for the crypto economy</Heading> <Intro center>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.</Intro> <Text center>Build on 0x (arrow)</Text> </Column> @@ -28,19 +27,19 @@ export const NextWhy = () => ( <Section bgColor={colors.backgroundDark}> <Wrap> <Column colWidth="1/3"> - <Icon size="150" icon={protocol} /> + <ProtocolIcon width="150" /> <Heading>Support for all Ethereum Standards</Heading> <Text>0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol...</Text> </Column> <Column colWidth="1/3"> - <Icon size="150" icon={logoOutlined} /> + <LogoOutlined width="150" /> <Heading>Shared Networked Liquidity</Heading> <Text>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Text> </Column> <Column colWidth="1/3"> - <Icon size="150" icon={customize} /> + <CustomizeIcon width="150" /> <Heading>Customize the User Experience</Heading> <Text>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Text> </Column> @@ -50,13 +49,66 @@ export const NextWhy = () => ( <Section> <Wrap> <Column colWidth="1/3"> - This is a 1 COLUMN section + <ChapterLink href="#">Benefits</ChapterLink> + <ChapterLink href="#">Use Cases</ChapterLink> + <ChapterLink href="#">Features</ChapterLink> </Column> <Column colWidth="2/3"> - This is a 2 COLUMN section + <Heading size="medium">What 0x offers</Heading> + <CoinIcon width="150" /> + <Heading>A Standard for Exchange</Heading> + <Text muted>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Text> + + <CoinIcon width="150" /> + <Heading>Robust Smart Contracts</Heading> + <Text muted>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Text> + + <CoinIcon width="150" /> + <Heading>Extensible Architecture</Heading> + <Text muted>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Text> + + <CoinIcon width="150" /> + <Heading>Efficient Design</Heading> + <Text muted>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Text> + + <Heading size="medium">Use Cases</Heading> + <Text muted>slider</Text> + + <Heading size="medium">Exchange Functionality</Heading> + + <CoinIcon width="150" /> + <Heading>Secure Non-custodial Trading</Heading> + <Text muted>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Text> + + <CoinIcon width="150" /> + <Heading>Flexible Order Types</Heading> + <Text muted>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Text> + + <CoinIcon width="150" /> + <Heading>Build a Business</Heading> + <Text muted>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Text> + + <CoinIcon width="150" /> + <Heading>Networked Liquidity</Heading> + <Text muted>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Text> </Column> </Wrap> </Section> </SiteWrap> ); + +const ChapterLink = styled.a` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 097c8171e..cf23623a6 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -12,8 +12,10 @@ declare module '*.json' { } declare module '*.svg' { - const svg: any; - export default svg; + //const svg: any; + //export default svg; + import {PureComponent, SVGProps} from "react"; + export default class extends PureComponent<SVGProps<SVGSVGElement>> {} } declare module 'web3-provider-engine/subproviders/filters'; |