crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2081 from 0xProject/feature/cfl-page

Browse Source 
CFL page
This commit is contained in:
Francesco Agosti
2019-08-20 18:24:40 -07:00
committed by GitHub
parent 22c6548ed1 0233ae3134
commit 417bb87785
34 changed files with 906 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/package.json
View File

@@ -101,7 +101,7 @@
"@types/lodash": "4.14.104",
"@types/material-ui": "^0.20.0",
"@types/node": "*",
"@types/numeral": "^0.0.22",
"@types/numeral": "^0.0.26",
"@types/query-string": "^5.1.0",
"@types/rc-slider": "^8.6.0",
"@types/react": "^16.7.7",

5
packages/website/ts/components/banner.tsx
View File

@@ -12,6 +12,7 @@ import { Column, Section } from 'ts/components/newLayout';
interface Props {
heading?: string;
subline?: string;
customCta?: React.ReactNode;
mainCta?: CTAButton;
secondaryCta?: CTAButton;
theme?: ThemeInterface;
@@ -29,7 +30,7 @@ interface BorderProps {
}
export const Banner: React.StatelessComponent<Props> = (props: Props) => {
const { heading, subline, mainCta, secondaryCta } = props;
const { heading, subline, mainCta, secondaryCta, customCta } = props;
return (
<CustomSection
bgColor={colors.brandDark}
@@ -52,6 +53,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
</Column>
<ColumnCta>
<ButtonWrap>
{customCta}
{mainCta && (
<Button
color={colors.white}

46
packages/website/ts/pages/instant/code_demo.tsx → packages/website/ts/components/code_demo.tsx
View File

@@ -14,7 +14,6 @@ const CustomPre = styled.pre`
width: 100%;
height: 100%;
max-height: 800px;
border-radius: 4px;
code {
background-color: inherit !important;
border-radius: 0px;
@@ -22,21 +21,21 @@ const CustomPre = styled.pre`
border: none;
}
code:first-of-type {
background-color: #060d0d !important;
background-color: #003831 !important;
color: #999;
min-height: 100%;
text-align: center;
margin-right: 15px;
line-height: 25px;
padding: 10px 7px !important;
margin-right: 5px;
margin-left: 10px
line-height: 33px;
padding: 10px 10px !important;
}
code:last-of-type {
position: relative;
top: 10px;
top: 0;
padding-top: 11px;
display: inline-block;
line-height: 25px;
line-height: 33px;
}
`;
@@ -96,7 +95,7 @@ const customStyle = {
color: '#aa573c',
},
'hljs-string': {
color: '#bcff88',
color: '#f46036',
},
'hljs-symbol': {
color: '#2a9292',
@@ -111,10 +110,10 @@ const customStyle = {
color: '#576ddb',
},
'hljs-keyword': {
color: '#955ae7',
color: '#fff275',
},
'hljs-selector-tag': {
color: '#955ae7',
color: '#fff275',
},
'hljs-deletion': {
color: '#19171c',
@@ -131,8 +130,8 @@ const customStyle = {
hljs: {
display: 'block',
overflowX: 'hidden',
background: '#1B2625',
color: 'white',
background: '#003831',
color: '#7cffcb',
fontSize: '12px',
},
'hljs-emphasis': {
@@ -145,6 +144,9 @@ const customStyle = {
export interface CodeDemoProps {
children: string;
language: string;
fontSize: string;
shouldHideCopy?: boolean;
}
export interface CodeDemoState {
@@ -156,15 +158,26 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
didCopyCode: false,
};
public render(): React.ReactNode {
const { fontSize, shouldHideCopy } = this.props;
const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
const hljs = { ...customStyle.hljs, fontSize };
const style = { ...customStyle, hljs };
return (
<Container position="relative" height="100%">
<Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
<CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
{!shouldHideCopy && (
<CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
)}
</Container>
<SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
<SyntaxHighlighter
key={`${this.props.language}${this.props.children}`}
language={this.props.language}
style={style}
showLineNumbers={true}
PreTag={CustomPre}
>
{this.props.children}
</SyntaxHighlighter>
</Container>
@@ -176,7 +189,6 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
}
const StyledButton = styled(Button)`
border-radius: 4px;
font-size: 15px;
font-weight: 400;
padding: 9px 21px 7px;

11
packages/website/ts/components/definition.tsx
View File

@@ -12,7 +12,7 @@ export interface Action {
shouldUseAnchorTag?: boolean;
}
interface Props {
export interface DefinitionProps {
isInline?: boolean;
isInlineIcon?: boolean;
isCentered?: boolean;
@@ -24,10 +24,11 @@ interface Props {
titleSize?: 'small' | 'default' | number;
description: React.ReactNode | string;
actions?: Action[];
className?: string;
}
export const Definition = (props: Props) => (
<Wrap {...props}>
export const Definition = ({ className, ...props }: DefinitionProps) => (
<Wrap {...props} className={className}>
{!!props.icon && <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />}
<TextWrap {...props}>
@@ -69,7 +70,7 @@ export const Definition = (props: Props) => (
</Wrap>
);
const Wrap = styled.div<Props>`
const Wrap = styled.div<DefinitionProps>`
max-width: ${props => props.isInline && '354px'};
& + & {
@@ -94,7 +95,7 @@ const Wrap = styled.div<Props>`
}
`;
const TextWrap = styled.div<Props>`
const TextWrap = styled.div<DefinitionProps>`
width: 100%;
max-width: 560px;

6
packages/website/ts/components/dropdowns/dropdown_products.tsx
View File

@@ -18,9 +18,9 @@ const navData = [
url: WebsitePaths.LaunchKit,
},
{
title: 'Extensions',
description: 'Support new types of trading on your relayer with 0x Extensions',
url: WebsitePaths.Extensions,
title: 'Asset Swapper',
description: 'Swap tokens via smart contracts',
url: WebsitePaths.AssetSwapperPage,
},
{
title: 'Governance',

28
packages/website/ts/components/hero.tsx
View File

@@ -17,6 +17,8 @@ interface Props {
background?: React.ReactNode;
announcement?: AnnouncementProps;
sectionPadding?: string;
showFigureBottomMobile?: boolean;
figureMaxWidth?: string;
}
interface SectionProps {
@@ -36,6 +38,7 @@ interface WrapProps {
isCentered?: boolean;
isFullWidth?: boolean;
isCenteredMobile?: boolean;
showFigureBottomMobile?: boolean;
}
const Wrap = styled.div<WrapProps>`
width: calc(100% - 60px);
@@ -52,6 +55,9 @@ const Wrap = styled.div<WrapProps>`
@media (max-width: 768px) {
text-align: ${props => (props.isCenteredMobile ? `center` : 'left')};
flex-direction: ${props => (props.showFigureBottomMobile ? 'column-reverse' : 'column')};
display: flex;
align-items: center;
}
`;
@@ -90,12 +96,25 @@ const Description = styled.p`
}
`;
const Content = styled.div<{ width: string }>`
interface ContentProps {
width: string;
isCenteredMobile?: boolean;
}
const Content = styled.div<ContentProps>`
width: 100%;
@media (min-width: 768px) {
max-width: ${props => props.width};
}
${props =>
props.isCenteredMobile &&
`
@media (max-width: 768px) {
display: flex;
justify-content: center;
}
`};
`;
const ButtonWrap = styled.div`
@@ -156,8 +175,13 @@ export class Hero extends React.Component<Props> {
isCentered={!props.figure}
isFullWidth={props.isFullWidth}
isCenteredMobile={props.isCenteredMobile}
showFigureBottomMobile={props.showFigureBottomMobile}
>
{props.figure && <Content width="400px">{props.figure}</Content>}
{props.figure && (
<Content isCenteredMobile={props.isCenteredMobile} width={props.figureMaxWidth || '400px'}>
{props.figure}
</Content>
)}
<Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
{!!props.announcement && <Announcement {...props.announcement} />}

13
packages/website/ts/components/icon.tsx
View File

@@ -10,10 +10,10 @@ interface IconProps extends PaddingInterface {
color?: string;
name?: string;
component?: React.ReactNode;
size?: 'small' | 'medium' | 'large' | 'hero' | number;
size?: 'small' | 'medium' | 'large' | 'hero' | 'natural' | number;
}
export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
export const Icon: React.FunctionComponent<IconProps> = props => {
if (props.name && !props.component) {
const IconSVG = Loadable({
loader: async () => import(/* webpackChunkName: "icon" */ `ts/icons/illustrations/${props.name}.svg`),
@@ -49,8 +49,11 @@ export const InlineIconWrap = styled.div<PaddingInterface>`
}
`;
const _getSize = (size: string | number = 'small'): string => {
const _getSize = (size: string | number = 'small'): string | undefined => {
if (typeof size === 'string') {
if (size === 'natural') {
return undefined;
}
return `var(--${size}Icon)`;
}
@@ -68,8 +71,8 @@ const StyledIcon = styled.figure<IconProps>`
max-width: 100%;
svg {
width: 100%;
height: 100%;
width: ${props => (props.size === 'natural' ? '' : '100%')};
height: ${props => (props.size === 'natural' ? '' : '100%')};
object-fit: cover;
}
`;

33
packages/website/ts/components/info_tooltip.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { Icon } from 'ts/components/icon';
const InfoTooltipContainer = styled.div<InfoTooltipProps>`
cursor: pointer;
position: relative;
left: ${props => props.left || '0px'};
`;
const Tooltip = styled.div`
max-width: 250px;
padding: 5px;
`;
export interface InfoTooltipProps {
id: string;
left?: string;
}
export const InfoTooltip: React.FC<InfoTooltipProps> = props => {
return (
<InfoTooltipContainer {...props}>
<ReactTooltip id={props.id} type="light">
<Tooltip>{props.children}</Tooltip>
</ReactTooltip>
<div data-tip={true} data-for={props.id}>
<Icon name="info" size="natural" />
</div>
</InfoTooltipContainer>
);
};

5
packages/website/ts/components/mobileNav.tsx
View File

@@ -30,6 +30,9 @@ export class MobileNav extends React.PureComponent<Props> {
<li>
<Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
</li>
<li>
<Link to={WebsitePaths.AssetSwapperDocs}>Swap Tokens</Link>
</li>
</ul>
</Section>
@@ -58,7 +61,7 @@ export class MobileNav extends React.PureComponent<Props> {
const Wrap = styled.nav<{ isToggled: boolean }>`
width: 100%;
height: 357px;
height: 400px;
background-color: ${props => props.theme.mobileNavBgUpper};
color: ${props => props.theme.mobileNavColor};
transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')};

6
packages/website/ts/components/newLayout.tsx
View File

@@ -38,6 +38,7 @@ export interface SectionProps extends WrapProps {
bgColor?: 'dark' | 'light' | string;
children: any;
alignItems?: string;
omitWrapper?: boolean;
}
export interface FlexProps {
@@ -55,6 +56,9 @@ export interface ColumnProps {
}
export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
if (props.omitWrapper) {
return <SectionBase {...props} />;
}
return (
<SectionBase {...props}>
<Wrap {...props}>{props.children}</Wrap>
@@ -79,7 +83,7 @@ export const Column = styled.div<ColumnProps>`
export const FlexWrap = styled.div<FlexProps>`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {
display: ${props => props.isFlex && 'flex'};
justify-content: ${props =>

61
packages/website/ts/components/tabbed_code_demo.tsx Normal file
View File

@@ -0,0 +1,61 @@
import * as React from 'react';
import styled from 'styled-components';
import { CodeDemo } from 'ts/components/code_demo';
export interface CodeTab {
code: string;
label: string;
language: string;
}
export interface TabbedCodeDemoProps {
tabs: CodeTab[];
activeIndex: number;
onTabClick: (index: number) => void;
}
interface TabProps {
isActive: boolean;
}
export const TabbedWrapper = styled.div`
background-color: #0c2320;
width: 100%;
min-width: 605px;
height: 645px;
margin-left: 50px;
overflow: hidden;
@media (max-width: 1216px) {
display: none;
}
`;
const Tab = styled.div<TabProps>`
background-color: ${props => props.theme.lightBgColor};
opacity: ${props => (props.isActive ? '1' : '0.5')};
display: inline-block;
padding: 20px 40px;
font-size: 16px;
cursor: pointer;
&:hover {
opacity: ${props => (props.isActive ? '1' : '0.75')};
}
`;
export const TabbedCodeDemo: React.FC<TabbedCodeDemoProps> = props => {
const { activeIndex, tabs, onTabClick } = props;
const { code, language } = tabs[activeIndex];
return (
<TabbedWrapper>
{tabs.map((tab, index) => (
<Tab key={tab.label} isActive={activeIndex === index} onClick={onTabClick.bind(null, index)}>
{tab.label}
</Tab>
))}
<CodeDemo language={language} fontSize="14px" shouldHideCopy={true}>
{code}
</CodeDemo>
</TabbedWrapper>
);
};

8
packages/website/ts/icons/illustrations/asset_swapper_term.svg generated Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

4
packages/website/ts/icons/illustrations/dydx_logo.svg generated Normal file
View File

@@ -0,0 +1,4 @@
<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="95" cy="95" r="94" stroke="#00AE99" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.058 65.3125L80.3685 124.688H78.2437L106.933 65.3125H109.058ZM112.778 84.9653C112.778 83.3021 113.417 81.9496 114.691 80.9097C116.001 79.8702 117.684 79.3503 119.738 79.3503C121.085 79.3503 122.378 79.4889 123.617 79.766C124.892 80.0432 126.379 80.5802 128.08 81.3783L127.124 83.1456C125.566 82.3829 124.237 81.8459 123.139 81.5338C122.041 81.2566 120.925 81.118 119.792 81.118C118.269 81.118 117.081 81.465 116.232 82.158C115.347 82.851 114.904 83.7697 114.904 84.9134C114.904 86.0226 115.257 86.9758 115.966 87.773C116.71 88.5357 118.357 89.6445 120.908 91.1002C123.21 92.4178 124.874 93.544 125.902 94.4798C126.965 95.4504 127.744 96.4904 128.24 97.5996C128.699 98.7088 128.93 100.043 128.93 101.603C128.93 104.688 128.062 107.132 126.327 108.934C124.591 110.702 122.164 111.586 119.048 111.586C116.038 111.586 113.628 110.736 111.822 109.039C110.05 107.374 109.165 105.139 109.165 102.33C109.165 99.696 109.927 97.5478 111.45 95.8842C112.937 94.1857 115.328 92.9204 118.622 92.0883C116.427 90.8754 114.904 89.7313 114.054 88.6564C113.203 87.5477 112.778 86.3173 112.778 84.9653ZM136.474 81.482L144.657 94.1682L152.945 81.482H155.231L145.826 95.6758L155.974 111.169H153.583L144.604 97.3399L135.465 111.169H133.128L143.329 95.6758L134.084 81.482H136.474ZM115.807 94.6882C114.745 95.2081 113.894 95.8323 113.257 96.5597C112.618 97.2531 112.14 98.0856 111.822 99.0553C111.468 100.026 111.29 101.118 111.29 102.33C111.29 104.585 111.999 106.386 113.416 107.739C114.832 109.089 116.728 109.766 119.101 109.766C121.544 109.766 123.44 109.073 124.785 107.686C126.132 106.264 126.805 104.22 126.805 101.551C126.805 99.7488 126.308 98.1893 125.317 96.8722C124.361 95.5551 122.714 94.3242 120.376 93.1801C118.357 93.6657 116.835 94.1682 115.807 94.6882ZM47.108 79.766C48.3831 80.0432 49.8701 80.5802 51.571 81.3783L50.6143 83.1456C49.0555 82.3829 47.7275 81.8459 46.6297 81.5338C45.5318 81.2566 44.4157 81.118 43.2823 81.118C41.7596 81.118 40.5727 81.465 39.7229 82.158C38.8366 82.851 38.3949 83.7697 38.3949 84.9134C38.3949 86.0226 38.7484 86.9758 39.4575 87.773C40.2008 88.5357 41.8482 89.6445 44.3984 91.1002C46.7005 92.4178 48.3652 93.544 49.3918 94.4798C50.4549 95.4504 51.2343 96.4904 51.73 97.5996C52.1905 98.7088 52.4207 100.043 52.4207 101.603C52.4207 104.688 51.5527 107.132 49.8176 108.934C48.082 110.702 45.6552 111.586 42.5385 111.586C39.5278 111.586 37.1193 110.736 35.3129 109.039C33.5416 107.374 32.6562 105.139 32.6562 102.33C32.6562 99.696 33.4178 97.5478 34.941 95.8842C36.4285 94.1857 38.8192 92.9204 42.1136 92.0883C39.9175 90.8754 38.3948 89.7313 37.5441 88.6564C36.6939 87.5477 36.2691 86.3173 36.2691 84.9653C36.2691 83.3021 36.9068 81.9496 38.1819 80.9097C39.4926 79.8702 41.1748 79.3503 43.2292 79.3503C44.5752 79.3503 45.8681 79.4888 47.108 79.766ZM39.2976 94.6882C38.235 95.2081 37.3852 95.8323 36.7469 96.5597C36.1096 97.2531 35.6313 98.0856 35.3129 99.0553C34.9584 100.026 34.7816 101.118 34.7816 102.33C34.7816 104.585 35.4897 106.386 36.9069 107.739C38.3231 109.089 40.2186 109.766 42.592 109.766C45.0357 109.766 46.9307 109.073 48.2766 107.686C49.6225 106.264 50.2959 104.22 50.2959 101.551C50.2959 99.7488 49.7998 98.1893 48.808 96.8722C47.8518 95.5551 46.2043 94.3242 43.8671 93.1801C41.8482 93.6657 40.3246 94.1682 39.2976 94.6882ZM79.2519 81.482L69.1577 99.68V111.169H66.9785V99.8351L56.8313 81.482H59.275L68.0951 97.7038L76.9672 81.482H79.2519Z" fill="#00AE99"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

8
packages/website/ts/icons/illustrations/hummingbot.svg generated Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

5
packages/website/ts/icons/illustrations/info.svg generated Normal file
View File

@@ -0,0 +1,5 @@
<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 2.38745C4.05228 2.38745 4.5 1.92124 4.5 1.34613C4.5 0.771025 4.05228 0.30481 3.5 0.30481C2.94772 0.30481 2.5 0.771025 2.5 1.34613C2.5 1.92124 2.94772 2.38745 3.5 2.38745Z" fill="white"/>
<path d="M1 6.03198H4V14.3625" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 14.3625H7" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

7
packages/website/ts/icons/illustrations/small_0x_logo.svg generated Normal file
View File

@@ -0,0 +1,7 @@
<svg width="57" height="23" viewBox="0 0 57 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M27.244 6.426C28.026 5.38333 29.063 4.862 30.355 4.862C31.647 4.862 32.6783 5.38333 33.449 6.426C34.231 7.45733 34.622 8.99867 34.622 11.05C34.622 13.1013 34.231 14.6427 33.449 15.674C32.6783 16.7053 31.647 17.221 30.355 17.221C29.063 17.221 28.026 16.7053 27.244 15.674C26.4733 14.6427 26.088 13.1013 26.088 11.05C26.088 8.99867 26.4733 7.45733 27.244 6.426ZM27.193 11.05C27.193 12.7047 27.448 13.974 27.958 14.858L32.038 6.409C31.5847 6.035 31.0237 5.848 30.355 5.848C29.3237 5.848 28.536 6.29567 27.992 7.191C27.4593 8.075 27.193 9.36133 27.193 11.05ZM30.355 16.235C31.3863 16.235 32.1683 15.793 32.701 14.909C33.245 14.025 33.517 12.7387 33.517 11.05C33.517 9.39533 33.262 8.13167 32.752 7.259L28.672 15.691C29.1367 16.0537 29.6977 16.235 30.355 16.235ZM42.814 17L40.536 13.243H39.924L37.561 17H36.371L39.125 12.648L36.66 8.5H37.816L39.924 12.053H40.536L42.678 8.5H43.834L41.335 12.597L44.072 17H42.814Z" fill="white"/>
<path d="M4.2009 12.6404L5.75336 11.0341L3.82332 8.4296L1.36592 4.95247C0.497758 6.43408 0 8.15874 0 10C0 13.0502 1.36592 15.7812 3.52018 17.6152L6.63946 15.4108C5.57847 14.7498 4.72377 13.7874 4.2009 12.6404Z" fill="white"/>
<path d="M7.35964 4.2009L8.96592 5.75336L11.5704 3.82332L15.0475 1.36592C13.5659 0.497758 11.8413 0 10 0C6.94978 0 4.21883 1.36592 2.38475 3.52018L4.58924 6.63946C5.25022 5.57847 6.21256 4.72377 7.35964 4.2009Z" fill="white"/>
<path d="M14.2466 8.96592L16.1767 11.5704L18.6341 15.0475C19.5022 13.5659 20 11.8413 20 10C20 6.94978 18.6341 4.21883 16.4798 2.38475L13.3605 4.58924C14.4215 5.25022 15.2762 6.21256 15.7991 7.35964L14.2466 8.96592Z" fill="white"/>
<path d="M17.6152 16.4798L15.4108 13.3605C14.7498 14.4215 13.7874 15.2762 12.6404 15.7991L11.0341 14.2466L8.4296 16.1767L4.95247 18.6341C6.43408 19.5022 8.15874 20 10 20C13.0502 20 15.7812 18.6341 17.6152 16.4798Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
packages/website/ts/icons/illustrations/small_kyber_logo.svg generated Normal file
View File

@@ -0,0 +1,9 @@
<svg width="77" height="23" viewBox="0 0 77 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M24.598 17V4.862H25.72V11.288L32.486 4.862H33.914L30.021 8.687L34.356 17H33.132L29.273 9.656H28.933L25.72 12.682V17H24.598ZM37.8041 20.4H36.7161L38.4671 16.201L34.8631 8.5H36.0191L38.8241 14.501H39.2321L41.7651 8.5H42.8871L37.8041 20.4ZM48.7967 8.279C49.964 8.279 50.8877 8.69833 51.5677 9.537C52.2477 10.3757 52.5877 11.4467 52.5877 12.75C52.5877 14.042 52.242 15.113 51.5507 15.963C50.8707 16.8017 49.9527 17.221 48.7967 17.221C47.584 17.221 46.666 16.83 46.0427 16.048H45.7027V17H44.6657V4.641H45.7367V9.452H46.0767C46.6887 8.67 47.5954 8.279 48.7967 8.279ZM48.6607 16.269C49.5674 16.269 50.27 15.9517 50.7687 15.317C51.2674 14.671 51.5167 13.8153 51.5167 12.75C51.5167 11.6847 51.2674 10.8347 50.7687 10.2C50.27 9.554 49.5674 9.231 48.6607 9.231C47.686 9.231 46.955 9.571 46.4677 10.251C45.9804 10.9197 45.7367 11.7527 45.7367 12.75C45.7367 13.736 45.9804 14.569 46.4677 15.249C46.955 15.929 47.686 16.269 48.6607 16.269ZM62.0655 12.223V12.563H55.4525V12.801C55.4525 13.855 55.7188 14.6993 56.2515 15.334C56.7955 15.9573 57.5208 16.269 58.4275 16.269C59.7308 16.269 60.5298 15.7647 60.8245 14.756H61.8955C61.7481 15.4813 61.3798 16.0763 60.7905 16.541C60.2011 16.9943 59.4135 17.221 58.4275 17.221C57.1581 17.221 56.1665 16.7903 55.4525 15.929C54.7385 15.0677 54.3815 13.974 54.3815 12.648C54.3815 11.3333 54.7385 10.2793 55.4525 9.486C56.1778 8.68133 57.1638 8.279 58.4105 8.279C59.5778 8.279 60.4788 8.66433 61.1135 9.435C61.7481 10.2057 62.0655 11.135 62.0655 12.223ZM58.3765 9.231C57.5605 9.231 56.9031 9.46333 56.4045 9.928C55.9171 10.3927 55.6225 10.9537 55.5205 11.611H60.9605C60.9151 10.9537 60.6658 10.3927 60.2125 9.928C59.7591 9.46333 59.1471 9.231 58.3765 9.231ZM68.893 8.5V9.486H68.247C67.4083 9.486 66.734 9.75233 66.224 10.285C65.7253 10.8177 65.476 11.56 65.476 12.512V17H64.405V8.5H65.442V9.537H65.782C66.36 8.84567 67.2043 8.5 68.315 8.5H68.893Z" fill="#999999"/>
<g opacity="0.7">
<path d="M6.79883 9.99997L14.3925 14.0559C14.6658 14.1977 15 14.0275 15 13.7439V6.25603C15 5.9724 14.6658 5.80223 14.3925 5.94404L6.79883 9.99997Z" fill="#999999"/>
<path d="M14.2582 3.59199L9.25599 0.079222C9.02198 -0.0893906 8.70025 0.023018 8.64172 0.30404L6.79883 8.1445L14.1996 4.21023C14.4629 4.06973 14.4629 3.7606 14.2582 3.59199Z" fill="#999999"/>
<path d="M9.25132 19.9196L14.2438 16.3707C14.4774 16.2017 14.4482 15.8919 14.2146 15.7511L6.79883 11.8359L8.60899 19.7225C8.6674 19.976 9.01774 20.0886 9.25132 19.9196Z" fill="#999999"/>
<path d="M4.57976 9.99219L6.78489 1.68812C6.88663 1.36033 6.41168 1.11449 6.07244 1.33302L0.441014 4.80214C0.169621 4.99336 0 5.26652 0 5.567V14.4174C0 14.7179 0.169621 14.991 0.441014 15.1822L6.07244 18.6787C6.41168 18.8699 6.85272 18.6514 6.78489 18.3236L4.57976 9.99219Z" fill="#999999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

7
packages/website/ts/icons/illustrations/small_uniswap_logo.svg generated Normal file
View File

@@ -0,0 +1,7 @@
<svg width="94" height="23" viewBox="0 0 94 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M36.758 4.862H37.88V12.716C37.88 14.1327 37.4777 15.2377 36.673 16.031C35.8683 16.8243 34.718 17.221 33.222 17.221C31.726 17.221 30.5757 16.8243 29.771 16.031C28.9663 15.2377 28.564 14.1327 28.564 12.716V4.862H29.686V12.733C29.686 13.7983 29.992 14.6427 30.604 15.266C31.216 15.8893 32.0887 16.201 33.222 16.201C34.3553 16.201 35.228 15.8893 35.84 15.266C36.452 14.6427 36.758 13.7983 36.758 12.733V4.862ZM48.2062 17H47.1352V11.781C47.1352 10.081 46.3475 9.231 44.7722 9.231C43.9562 9.231 43.2818 9.537 42.7492 10.149C42.2278 10.761 41.9672 11.492 41.9672 12.342V17H40.8962V8.5H41.9332V9.452H42.2732C42.5112 9.112 42.8682 8.83433 43.3442 8.619C43.8315 8.39233 44.3585 8.279 44.9252 8.279C45.9452 8.279 46.7442 8.57367 47.3222 9.163C47.9115 9.741 48.2062 10.5287 48.2062 11.526V17ZM52.0787 8.5V17H51.0077V8.5H52.0787ZM52.1297 5.984H50.9567V4.641H52.1297V5.984ZM57.9651 17.221C56.8431 17.221 55.9761 16.9943 55.3641 16.541C54.7521 16.0877 54.3894 15.453 54.2761 14.637H55.3301C55.5341 15.725 56.3784 16.269 57.8631 16.269C58.6224 16.269 59.2118 16.133 59.6311 15.861C60.0618 15.5777 60.2771 15.1697 60.2771 14.637C60.2771 14.2063 60.1468 13.8663 59.8861 13.617C59.6254 13.3677 59.1948 13.1977 58.5941 13.107C57.7894 12.9937 57.1151 12.8747 56.5711 12.75C55.2678 12.5007 54.6161 11.8207 54.6161 10.71C54.6161 9.996 54.8938 9.41233 55.4491 8.959C56.0158 8.50567 56.8261 8.279 57.8801 8.279C58.8208 8.279 59.5744 8.49433 60.1411 8.925C60.7078 9.34433 61.0364 9.91667 61.1271 10.642H60.0731C60.0164 10.1887 59.7784 9.843 59.3591 9.605C58.9398 9.35567 58.4241 9.231 57.8121 9.231C57.1434 9.231 56.6221 9.35567 56.2481 9.605C55.8741 9.843 55.6871 10.1773 55.6871 10.608C55.6871 10.9707 55.8004 11.2483 56.0271 11.441C56.2651 11.6337 56.6334 11.781 57.1321 11.883C57.2114 11.8943 57.3474 11.917 57.5401 11.951C57.7328 11.9737 57.8744 11.9963 57.9651 12.019L59.0191 12.189C60.5718 12.4723 61.3481 13.277 61.3481 14.603C61.3481 15.3283 61.0421 15.946 60.4301 16.456C59.8294 16.966 59.0078 17.221 57.9651 17.221ZM66.8759 11.475H68.4739L70.0379 15.946H70.3779L71.4149 8.5H72.4689L71.2789 17H69.4259L67.8109 12.495H67.4709L65.8559 17H64.0029L62.8129 8.5H63.8669L64.9209 15.946H65.2609L66.8759 11.475ZM80.2544 17V16.048H79.9144C79.6424 16.3993 79.2627 16.6827 78.7754 16.898C78.2994 17.1133 77.761 17.221 77.1604 17.221C76.197 17.221 75.4434 16.9547 74.8994 16.422C74.3554 15.8893 74.0834 15.2433 74.0834 14.484C74.0834 13.7133 74.3384 13.056 74.8484 12.512C75.3697 11.968 76.1744 11.696 77.2624 11.696H80.2204V11.169C80.2204 10.591 80.0334 10.1263 79.6594 9.775C79.2854 9.41233 78.7074 9.231 77.9254 9.231C77.234 9.231 76.7014 9.36133 76.3274 9.622C75.9534 9.87133 75.7494 10.2283 75.7154 10.693H74.6444C74.7124 9.93367 75.041 9.34433 75.6304 8.925C76.2197 8.49433 76.9847 8.279 77.9254 8.279C78.9567 8.279 79.7727 8.52833 80.3734 9.027C80.9854 9.52567 81.2914 10.217 81.2914 11.101V17H80.2544ZM77.3134 16.269C78.118 16.269 78.8037 16.0197 79.3704 15.521C79.937 15.011 80.2204 14.3707 80.2204 13.6V12.597H77.5514C76.7807 12.597 76.1857 12.7613 75.7664 13.09C75.3584 13.4073 75.1544 13.8437 75.1544 14.399C75.1544 14.9883 75.347 15.4473 75.7324 15.776C76.129 16.1047 76.656 16.269 77.3134 16.269ZM88.1746 17.221C86.9733 17.221 86.0666 16.83 85.4546 16.048H85.1146V20.4H84.0436V8.5H85.0806V9.452H85.4206C86.044 8.67 86.962 8.279 88.1746 8.279C89.3306 8.279 90.2486 8.704 90.9286 9.554C91.62 10.3927 91.9656 11.458 91.9656 12.75C91.9656 14.0533 91.6256 15.1243 90.9456 15.963C90.2656 16.8017 89.342 17.221 88.1746 17.221ZM88.0386 9.231C87.064 9.231 86.333 9.571 85.8456 10.251C85.3583 10.931 85.1146 11.764 85.1146 12.75C85.1146 13.7473 85.3583 14.586 85.8456 15.266C86.333 15.9347 87.064 16.269 88.0386 16.269C88.9453 16.269 89.648 15.9517 90.1466 15.317C90.6453 14.671 90.8946 13.8153 90.8946 12.75C90.8946 11.6847 90.6453 10.8347 90.1466 10.2C89.648 9.554 88.9453 9.231 88.0386 9.231Z" fill="#999999"/>
<g opacity="0.7">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4096 5.87345C16.0545 6.21157 15.4926 6.19772 15.1545 5.84263L14.2363 4.87815C12.884 3.45765 10.6363 3.40237 9.21583 4.75465L3.0522 10.6224L8.89716 10.7661C9.38728 10.7782 9.77485 11.1853 9.76285 11.6754C9.75079 12.1656 9.34365 12.5532 8.85347 12.5411L0.865962 12.3447C0.375784 12.3327 -0.0117871 11.9255 0.000274037 11.4354L0.196714 3.44784C0.208775 2.95766 0.615853 2.57009 1.10603 2.58215C1.59621 2.59422 1.98378 3.00129 1.97172 3.49147L1.82796 9.33637L7.9916 3.46867C10.1223 1.44027 13.4939 1.5232 15.5223 3.65386L16.4405 4.61835C16.7785 4.97348 16.7648 5.53539 16.4096 5.87345Z" fill="#999999"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.76442 14.1266C3.11951 13.7885 3.68147 13.8023 4.01953 14.1574L4.93773 15.1219C6.29002 16.5424 8.53777 16.5976 9.95821 15.2454L16.1218 9.37765L10.2769 9.2339C9.78676 9.22189 9.39919 8.81476 9.41119 8.32458C9.42325 7.83446 9.83039 7.44683 10.3206 7.45889L18.3081 7.65533C18.7983 7.66739 19.1858 8.07453 19.1738 8.56465L18.9773 16.5522C18.9653 17.0424 18.5582 17.43 18.068 17.4179C17.5778 17.4058 17.1903 16.9987 17.2023 16.5086L17.3461 10.6636L11.1824 16.5314C9.05178 18.5598 5.68015 18.4769 3.65175 16.3462L2.73355 15.3817C2.39549 15.0266 2.40929 14.4646 2.76442 14.1266Z" fill="#999999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

4
packages/website/ts/index.tsx
View File

@@ -22,6 +22,7 @@ import { NextAboutTeam } from 'ts/pages/about/team';
import { Credits } from 'ts/pages/credits';
import { Explore } from 'ts/pages/explore';
import { CFL } from 'ts/pages/cfl';
import { NextEcosystem } from 'ts/pages/ecosystem';
import { Extensions } from 'ts/pages/extensions';
import { Governance } from 'ts/pages/governance/governance';
@@ -126,6 +127,7 @@ render(
<Route exact={true} path={`${WebsitePaths.Vote}/:zeip`} component={Governance as any} />
<Route exact={true} path={WebsitePaths.Vote} component={VoteIndex as any} />
<Route exact={true} path={WebsitePaths.Extensions} component={Extensions as any} />
<Route exact={true} path={WebsitePaths.AssetSwapperPage} component={CFL as any} />
<Route
exact={true}
path={WebsitePaths.PrivacyPolicy}
@@ -212,7 +214,7 @@ render(
component={LazyAssetBuyerDocumentation}
/>
<Route
path={`${WebsitePaths.AssetSwapper}/:version?`}
path={`${WebsitePaths.AssetSwapperDocs}/:version?`}
component={LazyAssetSwapperDocumentation}
/>
<Route path={WebsitePaths.Docs} component={DocsHome as any} />

171
packages/website/ts/pages/cfl.tsx Normal file
View File

@@ -0,0 +1,171 @@
import * as React from 'react';
import styled from 'styled-components';
import { Banner } from 'ts/components/banner';
import { Button } from 'ts/components/button';
import { Definition } from 'ts/components/definition';
import { DocumentTitle } from 'ts/components/document_title';
import { Hero } from 'ts/components/hero';
import { Icon, InlineIconWrap } from 'ts/components/icon';
import { Section } from 'ts/components/newLayout';
import { SiteWrap } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { CFLMetrics } from 'ts/pages/cfl/cfl_metrics';
import { CodeStepper } from 'ts/pages/cfl/code_stepper';
import { colors } from 'ts/style/colors';
import { constants } from 'ts/utils/constants';
import { documentConstants } from 'ts/utils/document_meta_constants';
interface Props {
theme: {
bgColor: string;
textColor: string;
linkColor: string;
};
}
const TerminalContainer = styled.div`
font-size: 16px;
color: ${colors.brandLight};
position: relative;
p {
position: absolute;
bottom: 23px;
font-family: 'Roboto Mono';
@media (max-width: 768px) {
bottom: -7px;
left: 20px;
}
@media (max-width: 375px) {
font-size: 12px;
bottom: 0px;
left: 8px;
}
}
`;
const DeveloperLink = styled(Button)`
@media (max-width: 500px) {
&& {
white-space: pre-wrap;
line-height: 1.3;
}
}
`;
const DeFiHeading = styled(Heading)`
text-align: center;
@media (min-width: 768px) {
padding-bottom: 80px;
}
@media (max-width: 768px) {
font-size: 34px !important;
padding: 15px 0px;
}
`;
const useCasesData = [
{
title: 'DeFi Lending and Margin Trading Platforms',
icon: 'dydx_logo',
description:
'DeFi projects swap tokens through 0x to improve their UX by abstracting out required tokens, rebalancing user positions in real-time, and pre-baking terms of an asset sale into contracts so that they can be trustlessly executed in the future.',
links: [
{
label: 'Explore Asset Swapper',
url: constants.CFL_DOCS,
},
{
label: `Learn about dYdX's integration`,
url: constants.URL_DYDX_CASE_STUDY,
},
],
},
{
title: 'Crypto Algo Traders',
icon: 'hummingbot',
description:
'Trading bots consume 0x liquidity to atomically swap tokens at tight spreads and perform risk-free arbitrage across both centralized and decentralized exchange venues.',
links: [
{
label: 'Explore Asset Swapper',
url: constants.CFL_DOCS,
},
{
label: `Learn about Hummingbot's integration`,
url: constants.URL_HUMMING_BOT_0X,
},
],
},
];
export class CFL extends React.Component<Props> {
public render(): React.ReactNode {
return (
<SiteWrap theme="dark">
<DocumentTitle {...documentConstants.CFL} />
<Hero
title="Swap tokens by tapping into 0x's networked liquidity"
isLargeTitle={false}
isFullWidth={true}
description="Source liquidity for your DeFi users by filling orders at the best prices"
showFigureBottomMobile={true}
isCenteredMobile={true}
figure={<CFLMetrics />}
figureMaxWidth="600px"
maxWidth="500px"
actions={
<Button href={constants.CFL_DOCS} isInline={true}>
Get Started
</Button>
// tslint:disable-next-line:jsx-curly-spacing
}
/>
<Section bgColor="dark" isTextCentered={true}>
<InlineIconWrap>
<Icon name="descriptionFlask" size="small" />
<Icon name="standardForExchange" size="small" />
<Icon name="descriptionBolt" size="small" />
</InlineIconWrap>
<Paragraph size="large" isCentered={true} isMuted={1} padding={['large', 0, 'default', 0]}>
Use Asset Swapper to programmatically exchange assets with a single line of code or build custom
integrations for more advanced token trades.
</Paragraph>
<DeveloperLink href={constants.CFL_DOCS} isWithArrow={true} isAccentColor={true}>
Explore the docs
</DeveloperLink>
</Section>
<Section bgColor="dark" omitWrapper={true} isPadded={false}>
<CodeStepper />
</Section>
<Section>
<DeFiHeading size="medium">Use Cases in DeFi</DeFiHeading>
{useCasesData.map(useCase => (
<Definition
key={useCase.title}
icon={useCase.icon}
title={useCase.title}
description={useCase.description}
isInlineIcon={true}
iconSize={240}
actions={useCase.links}
/>
))}
</Section>
<Banner
heading="Ready to get started?"
subline="Dive into our docs, or use your terminal"
customCta={
<TerminalContainer>
<Icon name="asset_swapper_term" size="natural" />
<p>$ yarn install @0x/asset-swapper</p>
</TerminalContainer>
}
/>
</SiteWrap>
);
}
}

187
packages/website/ts/pages/cfl/cfl_metrics.tsx Normal file
View File

@@ -0,0 +1,187 @@
import numeral from 'numeral';
import * as React from 'react';
import styled from 'styled-components';
import { Icon } from 'ts/components/icon';
import { defaultData } from 'ts/pages/cfl/default_data';
import { Metrics, MetricValue } from 'ts/pages/cfl/metrics';
import { backendClient } from 'ts/utils/backend_client';
import { CFLMetricsPairData } from 'ts/types';
const SLIPPAGE_TOOLTIP_TEXT =
'Percent difference between the expected price of a buy and the price at which the buy is executed.';
const CFLMetricsContainer = styled.div`
display: flex;
flex-direction: column;
width: fit-content;
@media (max-width: 768px) {
margin-top: 60px;
}
@media (min-width: 768px) {
margin-left: 60px;
}
`;
const PairTabsContainer = styled.div`
display: flex;
border: ${props => `1px solid ${props.theme.lightBgColor}`};
padding-right: 5px;
`;
const MetricsContainer = styled.div`
display: flex;
margin-top: 15px;
& div:not(:last-child) {
margin-right: 15px;
}
`;
interface PairTabProps {
isSelected: boolean;
}
const PairTab = styled.label<PairTabProps>`
cursor: pointer;
white-space: nowrap;
background-color: ${props => (props.isSelected ? props.theme.lightBgColor : '')};
opacity: ${props => (props.isSelected ? 1 : 0.5)};
margin: 5px 0px 5px 5px;
&:hover {
background-color: ${props => props.theme.lightBgColor};
}
padding: 10px 17px;
font-size: 12px;
@media (min-width: 1024px) {
padding: 15px 40px;
font-size: 17px;
}
`;
interface CFLMetricsProps {}
interface CFLMetricsState {
cflMetricsData: CFLMetricsPairData[];
selectedIndex: number;
}
export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState> {
public state: CFLMetricsState = {
selectedIndex: 0,
cflMetricsData: defaultData,
};
public componentDidMount(): void {
// tslint:disable-next-line:no-floating-promises
this._updateCFLMetricsDataAsync();
}
public render(): React.ReactNode {
const { cflMetricsData, selectedIndex } = this.state;
const quoteToken = this._getSelectedPairData().quoteAssetSymbol;
return (
<CFLMetricsContainer>
<PairTabsContainer>
{cflMetricsData.map((data, index) => {
const symbol = `${data.baseAssetSymbol} / ${data.quoteAssetSymbol}`;
return (
<PairTab
key={symbol}
isSelected={selectedIndex === index}
onClick={this._onTabClick.bind(this, index)}
>
{symbol}
</PairTab>
);
})}
</PairTabsContainer>
<MetricsContainer>
<Metrics title={`Price in ${quoteToken}`} metrics={[{ value: this._getLastPrice() }]} />
<Metrics title="7 day volume" metrics={[{ value: this._getVolume() }]} />
</MetricsContainer>
<MetricsContainer>
<Metrics
title={`7 day average slippage for $10,000`}
info={SLIPPAGE_TOOLTIP_TEXT}
metrics={this._getSlippageMetrics()}
/>
</MetricsContainer>
</CFLMetricsContainer>
);
}
private async _updateCFLMetricsDataAsync(): Promise<void> {
try {
const data = await backendClient.getCFLMetricsAsync();
this.setState({
cflMetricsData: data,
});
} catch (err) {
// Do nothing. Will remain in loading state.
}
}
private _onTabClick(index: number): void {
this.setState({ selectedIndex: index });
}
private _getSelectedPairData(): CFLMetricsPairData {
return this.state.cflMetricsData[this.state.selectedIndex];
}
private _getLastPrice(): string {
const data = this._getSelectedPairData();
if (!data.lastTradePrice) {
return '—';
}
const num = numeral(data.lastTradePrice);
return num.format('0.00');
}
private _getVolume(): string {
const data = this._getSelectedPairData();
if (!data.volumeUSD) {
return '—';
}
const num = numeral(data.volumeUSD);
return num.format('$0,0');
}
private _getSlippageMetrics(): MetricValue[] {
const data = this._getSelectedPairData();
if (!data.exchangeAverageSlippagePercentage) {
const placeholder = '—';
return [
{
label: <Icon name="small_0x_logo" size="natural" />,
value: placeholder,
},
{
label: <Icon name="small_kyber_logo" size="natural" />,
value: placeholder,
},
{
label: <Icon name="small_uniswap_logo" size="natural" />,
value: placeholder,
},
];
}
const zeroExSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Radar Relay',
);
const kyberSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Kyber',
);
const uniswapSlippage = data.exchangeAverageSlippagePercentage.find(
exchangeSlippage => exchangeSlippage.exchange === 'Uniswap',
);
const formatSlippage = (num: string) => numeral(num).format('0.00%');
return [
{
label: <Icon name="small_0x_logo" size="natural" />,
value: formatSlippage(zeroExSlippage.slippage),
},
{
label: <Icon name="small_kyber_logo" size="natural" />,
value: formatSlippage(kyberSlippage.slippage),
},
{
label: <Icon name="small_uniswap_logo" size="natural" />,
value: formatSlippage(uniswapSlippage.slippage),
},
];
}
}

159
packages/website/ts/pages/cfl/code_stepper.tsx Normal file
View File

@@ -0,0 +1,159 @@
import * as React from 'react';
import styled from 'styled-components';
import { Definition, DefinitionProps } from 'ts/components/definition';
import { CodeTab, TabbedCodeDemo } from 'ts/components/tabbed_code_demo';
const StepperContainer = styled.div`
display: flex;
padding: 30px;
justify-content: center;
`;
interface InteractiveDefinitionProps extends DefinitionProps {
isSelected?: boolean;
}
const InteractiveDefinition = styled(Definition)<InteractiveDefinitionProps>`
@media (min-width: 1216px) {
padding: 20px;
background-color: ${props => (props.isSelected ? '#0D1413' : '')};
border-left: ${props => (props.isSelected ? '3px solid #00AE99' : '3px solid rgba(0,0,0,0)')};
width: 500px;
p {
margin-bottom: 0px;
}
&:hover {
background-color: #0d1413;
cursor: pointer;
}
}
@media (max-width: 1216px) {
text-align: center;
margin-top: 60px;
}
`;
interface CodeStepperProps {}
interface CodeStepperState {
selectedSideTabIndex: number;
selectedCodeTabIndex: number;
}
const useCasesData = [
{
title: 'Source orders',
icon: 'recruitingSupport',
description: 'Automatically find orders for any token trading pair',
},
{
title: 'Pass orders',
icon: 'standardForExchange',
description: 'Easily transform orders into a contract fillable format',
},
{
title: 'Fill orders',
icon: 'flexibleOrders',
description: 'Quickly execute orders to fulfill your desired use case',
},
];
const codeData: CodeTab[] = [
{
code: `import { SwapQuoter } from '@0x/asset-swapper';
const apiUrl = 'https://api.relayer.com/v2';
const daiTokenAddress = '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359';
const wethTokenAddress = '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2';
const quoter = SwapQuoter.getSwapQuoterForStandardRelayerAPIUrl(
web3.provider,
apiUrl
);
// Get a quote to buy three units of DAI
const quote = await quoter.getMarketBuySwapQuoteAsync(
daiTokenAddress,
wethTokenAddress,
web3.utils.fromWei(3, 'ether'),
);
`,
label: 'getQuote.js',
language: 'javascript',
},
{
code: `import { SwapQuoteConsumer } from '@0x/asset-swapper';
const swapQuoteConsumer = new SwapQuoteConsumer(web3.provider);
const calldataInfo = await swapQuoteConsumer.getCalldataOrThrowAsync(quote);
const { calldataHexString } = calldataInfo;
const txHash = await yourSmartContract.methods
.liquidityRequiringMethod(calldataHexString)
.call();
`,
label: 'consumeQuote.js',
language: 'javascript',
},
{
code: `contract MyContract {
public address zeroExExchangeAddress;
function liquidityRequiringMethod(bytes calldata calldataHexString) {
zeroExExchangeAddress.call(calldataHexString);
}
}
`,
label: 'smartContract.sol',
language: 'typescript',
},
];
export class CodeStepper extends React.Component<CodeStepperProps, CodeStepperState> {
public state: CodeStepperState = {
selectedSideTabIndex: 0,
selectedCodeTabIndex: 0,
};
public render(): React.ReactNode {
const { selectedSideTabIndex, selectedCodeTabIndex } = this.state;
return (
<StepperContainer>
<div>
{useCasesData.map((item, index) => (
<div key={`offers-${index}`} onClick={this._onSideTabClick.bind(this, index)}>
<InteractiveDefinition
icon={item.icon}
title={item.title}
titleSize="small"
description={item.description}
isWithMargin={false}
isCentered={true}
isSelected={index === selectedSideTabIndex}
/>
</div>
))}
</div>
<TabbedCodeDemo tabs={codeData} activeIndex={selectedCodeTabIndex} onTabClick={this._onCodeTabClick} />
</StepperContainer>
);
}
private readonly _onSideTabClick = (index: number) => {
this.setState({
selectedSideTabIndex: index,
selectedCodeTabIndex: index,
});
};
private readonly _onCodeTabClick = (index: number) => {
this.setState({
selectedSideTabIndex: index,
selectedCodeTabIndex: index,
});
};
}

19
packages/website/ts/pages/cfl/default_data.ts Normal file
View File

@@ -0,0 +1,19 @@
import { CFLMetricsPairData } from 'ts/types';
export const defaultData: CFLMetricsPairData[] = [
{
baseAssetSymbol: 'ETH',
quoteAssetSymbol: 'DAI',
tradeAmount: 10000,
},
{
baseAssetSymbol: 'ETH',
quoteAssetSymbol: 'USDC',
tradeAmount: 10000,
},
{
baseAssetSymbol: 'DAI',
quoteAssetSymbol: 'USDC',
tradeAmount: 10000,
},
];

57
packages/website/ts/pages/cfl/metrics.tsx Normal file
View File

@@ -0,0 +1,57 @@
import * as React from 'react';
import styled from 'styled-components';
import { InfoTooltip } from 'ts/components/info_tooltip';
import { Paragraph } from 'ts/components/text';
const MetricsContainer = styled.div`
padding: 20px;
background-color: ${props => props.theme.darkBgColor};
width: 100%;
`;
const MetricValueContainer = styled.div`
display: flex;
justify-content: space-between;
`;
const TitleInfoContainer = styled.div`
display: flex;
justify-content: space-between;
`;
export interface MetricValue {
label?: React.ReactNode;
value: string;
}
interface MetricsProps {
title: string;
info?: string;
metrics: MetricValue[];
}
export const Metrics: React.FC<MetricsProps> = props => (
<MetricsContainer>
<TitleInfoContainer>
<Paragraph marginBottom="15px" size="small">
{props.title}
</Paragraph>
{props.info && (
<InfoTooltip id="slippage-def" left="16px">
{props.info}
</InfoTooltip>
)}
</TitleInfoContainer>
<MetricValueContainer>
{props.metrics.map((metric, index) => (
<div key={`metric-${index}`}>
{metric.label && <div>{metric.label}</div>}
<Paragraph isNoMargin={true} isMuted={1} size="large" color="white">
{metric.value}
</Paragraph>
</div>
))}
</MetricValueContainer>
</MetricsContainer>
);

2
packages/website/ts/pages/documentation/docs_home.tsx
View File

@@ -170,7 +170,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = {
description: 'Convenience package for discovering and performing swaps for any ERC Assets',
link: {
title: '@0x/asset-swapper',
to: WebsitePaths.AssetSwapper,
to: WebsitePaths.AssetSwapperDocs,
},
},
],

8
packages/website/ts/pages/instant.tsx
View File

@@ -63,11 +63,11 @@ const featuresData = [
title: 'Easy and flexible integration',
icon: 'flexibleIntegration0xInstant',
description:
'Use our out-of-the-box design or customize the user interface by integrating via 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 via the AssetSwapper engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.',
links: [
{
label: 'Explore AssetBuyer',
url: `${WebsitePaths.Docs}/asset-buyer`,
label: 'Explore AssetSwapper',
url: WebsitePaths.AssetSwapperPage,
},
],
},
@@ -124,7 +124,7 @@ export class Next0xInstant extends React.Component<Props> {
<ConfiguratorSection
id="configurator"
maxWidth="1386px"
padding="0 58px 70px"
padding="10px 58px 70px"
bgColor={colors.backgroundDark}
>
<Heading>0x Instant Configurator</Heading>

12
packages/website/ts/pages/instant/configurator.tsx
View File

@@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { CodeDemo } from 'ts/pages/instant/code_demo';
import { CodeDemo } from 'ts/components/code_demo';
import { ConfigGenerator } from 'ts/pages/instant/config_generator';
import { Link } from 'ts/components/link';
@@ -43,7 +43,9 @@ export class Configurator extends React.Component {
Explore the Docs
</Link>
</HeadingWrapper>
<CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
<CodeDemo key={codeToDisplay} language="html" fontSize="14px">
{codeToDisplay}
</CodeDemo>
</Column>
</FlexWrap>
);
@@ -79,9 +81,9 @@ export class Configurator extends React.Component {
: ''
}
}, 'body');
</script>
</body>
</html>`;
</script>
</body>
</html>`;
};
private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);

20
packages/website/ts/types.ts
View File

@@ -463,13 +463,14 @@ export enum WebsitePaths {
OrderUtils = '/docs/order-utils',
EthereumTypes = '/docs/ethereum-types',
AssetBuyer = '/docs/asset-buyer',
AssetSwapper = '/docs/asset-swapper',
AssetSwapperDocs = '/docs/asset-swapper',
Migrations = '/docs/migrations',
Careers = '/careers',
Credits = '/credits',
Vote = '/vote',
Extensions = '/extensions',
Explore = '/explore',
AssetSwapperPage = '/asset-swapper',
}
export enum DocPackages {
@@ -708,6 +709,23 @@ export interface WebsiteBackendJobInfo {
url: string;
}
export interface ExchangeSlippageData {
exchange: string;
slippage: string;
}
export interface CFLMetricsPairData {
baseAssetSymbol: string;
quoteAssetSymbol: string;
tradeAmount: number;
volumeUSD?: number;
lastTradePrice?: number;
lastTradeTime?: string;
exchangeAverageSlippagePercentage?: ExchangeSlippageData[];
}
export type WebsiteBackendCFLMetricsData = CFLMetricsPairData[];
export enum BrowserType {
Chrome = 'Chrome',
Firefox = 'Firefox',

5
packages/website/ts/utils/backend_client.ts
View File

@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import {
ArticlesBySection,
WebsiteBackendCFLMetricsData,
WebsiteBackendGasInfo,
WebsiteBackendJobInfo,
WebsiteBackendPriceInfo,
@@ -17,6 +18,7 @@ const PRICES_ENDPOINT = '/prices';
const RELAYERS_ENDPOINT = '/relayers';
const TOKENS_ENDPOINT = '/tokens';
const WIKI_ENDPOINT = '/wiki';
const CFL_METRICS_ENDPOINT = '/cfl-metrics';
const SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT = '/newsletter_subscriber/substack';
export const backendClient = {
@@ -58,4 +60,7 @@ export const backendClient = {
});
return result;
},
async getCFLMetricsAsync(): Promise<WebsiteBackendCFLMetricsData> {
return fetchUtils.requestAsync(utils.getBackendBaseUrl(), CFL_METRICS_ENDPOINT);
},
};

5
packages/website/ts/utils/configs.ts
View File

@@ -7,6 +7,7 @@ export const configs = {
AMOUNT_DISPLAY_PRECSION: 5,
BACKEND_BASE_PROD_URL: 'https://website-api.0x.org',
BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0x.org',
BACKEND_BASE_DEV_URL: 'https://localhost:3001',
GOOGLE_SHEETS_LEAD_FORMS: {
CREDITS: 'https://script.google.com/macros/s/AKfycbyN1lJaSGWg2OIzqT8bou4GiqwCmOVjV2v_fiPO/exec',
} as GoogleSheetLeadUrls,
@@ -16,8 +17,8 @@ export const configs = {
// WARNING: ZRX & WETH MUST always be default trackedTokens
DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
DOMAIN_DOGFOOD: 'dogfood.0x.org',
DOMAINS_DEVELOPMENT: ['0xproject.localhost:3572', 'localhost:3572', '127.0.0.1'],
DOMAIN_DOGFOOD: 'dogfood.0xproject.com',
DOMAINS_DEVELOPMENT: ['0xproject.localhost:3572', 'localhost:3572', '127.0.0.1', '0.0.0.0:3572'],
DOMAIN_PRODUCTION: '0x.org',
DOMAIN_VOTE: 'vote.0x.org',
VOTE_INSTANT_ORDER_SOURCE: 'https://api.radarrelay.com/0x/v2/',

3
packages/website/ts/utils/constants.ts
View File

@@ -111,6 +111,8 @@ export const constants = {
URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
URL_WEB3_DECODED_LOG_ENTRY_EVENT:
'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
URL_DYDX_CASE_STUDY: 'https://blog.0xproject.com/dydx-and-contract-fillable-liquidity-cb965fc6f7e9',
URL_HUMMING_BOT_0X: 'https://hummingbot.io/blog/2019-04-announcing-hummingbot/',
URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
@@ -142,6 +144,7 @@ export const constants = {
DOCS_SCROLL_DURATION_MS: 0,
SCROLL_CONTAINER_ID: 'scroll_container',
SCROLL_TOP_ID: 'pageScrollTop',
CFL_DOCS: `${WebsitePaths.Wiki}#Contract-Fillable-Liquidity`,
NETWORK_NAME_BY_ID: {
1: Networks.Mainnet,
3: Networks.Ropsten,

5
packages/website/ts/utils/document_meta_constants.tsx
View File

@@ -101,4 +101,9 @@ export const documentConstants: { [s: string]: DocumentMetadata } = {
description: '',
keywords: '',
},
CFL: {
title: '0x Asset Swapper: Programmatically swap tokens via smart contracts',
description: 'Bring automatic token trading to your DeFi users with Asset Swapper',
keywords: '',
},
};

7
packages/website/ts/utils/utils.ts
View File

@@ -330,7 +330,12 @@ export const utils = {
return parsedProviderName;
},
getBackendBaseUrl(): string {
return utils.isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
if (utils.isDogfood()) {
return configs.BACKEND_BASE_STAGING_URL;
} else if (utils.isDevelopment()) {
return configs.BACKEND_BASE_DEV_URL;
}
return configs.BACKEND_BASE_PROD_URL;
},
isDevelopment(): boolean {
return _.includes(configs.DOMAINS_DEVELOPMENT, window.location.host);

34
yarn.lock
View File

@@ -1919,9 +1919,10 @@
version "10.9.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897"
"@types/numeral@^0.0.22":
version "0.0.22"
resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.22.tgz#86bef1f0a2d743afdc2ef3168d45f2905e1a0b93"
"@types/numeral@^0.0.26":
version "0.0.26"
resolved "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.26.tgz#cfab9842ef9349ce714b06722940ca7ebf8a6298"
integrity sha512-DwCsRqeOWopdEsm5KLTxKVKDSDoj+pzZD1vlwu1GQJ6IF3RhjuleYlRwyRH6MJLGaf3v8wFTnC6wo3yYfz0bnA==
"@types/opn@^5.1.0":
version "5.1.0"
@@ -8854,10 +8855,27 @@ got@^6.7.1:
unzip-response "^2.0.1"
url-parse-lax "^1.0.0"
graceful-fs@4.1.15, graceful-fs@^3.0.0, graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@~1.2.0:
graceful-fs@^3.0.0:
version "3.0.12"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.12.tgz#0034947ce9ed695ec8ab0b854bc919e82b1ffaef"
integrity sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==
dependencies:
natives "^1.1.3"
graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
version "4.1.15"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
graceful-fs@^4.2.0:
version "4.2.2"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
graceful-fs@~1.2.0:
version "1.2.3"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
integrity sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=
"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -12489,6 +12507,11 @@ nanomatch@^1.2.9:
snapdragon "^0.8.1"
to-regex "^3.0.1"
natives@^1.1.3:
version "1.1.6"
resolved "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz#a603b4a498ab77173612b9ea1acdec4d980f00bb"
integrity sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -13065,7 +13088,8 @@ number-to-bn@1.7.0:
numeral@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
resolved "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
nwsapi@^2.0.7:
version "2.0.9"