From fff4dd7e947f7f66e0854dea5d192c72b9e3d674 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:08 +0100 Subject: Export svgs as typed pure components --- packages/website/ts/@next/components/icon.tsx | 21 ++++---- packages/website/ts/@next/components/logo.tsx | 6 +-- packages/website/ts/@next/pages/landing.tsx | 9 ++-- packages/website/ts/@next/pages/why.tsx | 76 ++++++++++++++++++++++----- packages/website/ts/globals.d.ts | 6 ++- 5 files changed, 87 insertions(+), 31 deletions(-) (limited to 'packages') 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) => { + const { icon, size } = props; + + return ( +
+ ); +}; + +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 }) => ( - <> - - -); 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 = ({}) => ( - + ); 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 = () => ( - +
- + 0x is the best solution for adding exchange functionality to your business. Discover how developers use 0x (need arrow + line under) 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 = () => (
- The exchange layer for the crypto economy + 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) @@ -28,19 +27,19 @@ export const NextWhy = () => (
- + Support for all Ethereum Standards 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... - + Shared Networked Liquidity 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. - + Customize the User Experience 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. @@ -50,13 +49,66 @@ export const NextWhy = () => (
- This is a 1 COLUMN section + Benefits + Use Cases + Features - This is a 2 COLUMN section + 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. + + + Robust Smart Contracts + 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. + + + Efficient Design + 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. + + Use Cases + slider + + Exchange Functionality + + + Secure Non-custodial Trading + 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. + + + Build a Business + 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.
); + +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> {} } declare module 'web3-provider-engine/subproviders/filters'; -- cgit v1.2.3