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

Prettier

Browse Source
This commit is contained in:
Fred Carlsen
2019-06-25 11:37:56 +02:00
committed by fabioberger
parent 1d3d5f7e32
commit 01247319c3
33 changed files with 366 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/ts/components/animatedChatIcon.tsx
View File

@@ -49,15 +49,7 @@ export const AnimatedChatIcon = () => (
</Bubble> </Bubble>
<Dot delay={0} vectorEffect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" /> <Dot delay={0} vectorEffect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
<Dot <Dot delay={4.4} vectorEffect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
delay={4.4}
vectorEffect="non-scaling-stroke"
cx="91"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
<Dot <Dot
delay={-4.6} delay={-4.6}
vectorEffect="non-scaling-stroke" vectorEffect="non-scaling-stroke"

58
packages/website/ts/components/docs/callout.tsx
View File

@@ -25,33 +25,61 @@ const ThemeSettings = {
success: { success: {
bgColor: 'rgba(0, 174, 153, 0.1)', bgColor: 'rgba(0, 174, 153, 0.1)',
icon: ( icon: (
<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/> <path
<path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/> d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
<path d="M9 14.667L12.125 18 19 10" stroke="#003831" strokeWidth="1.5"/> stroke="#00AE99"
</svg> strokeWidth="1.054"
) strokeMiterlimit="10"
/>
<path
d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
stroke="#003831"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path d="M9 14.667L12.125 18 19 10" stroke="#003831" strokeWidth="1.5" />
</svg>
),
}, },
standard: { standard: {
bgColor: '#F2F2F2', bgColor: '#F2F2F2',
icon: ( icon: (
<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/> <path
<path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/> d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
<path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831"/> stroke="#00AE99"
strokeWidth="1.054"
strokeMiterlimit="10"
/>
<path
d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
stroke="#003831"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831" />
</svg> </svg>
) ),
}, },
alert: { alert: {
bgColor: '#FFFAF3', bgColor: '#FFFAF3',
icon: ( icon: (
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0025 26.9774C21.169 26.9774 26.9786 21.1678 26.9786 14.0013C26.9786 6.83476 21.169 1.02515 14.0025 1.02515C6.83598 1.02515 1.02637 6.83476 1.02637 14.0013C1.02637 21.1678 6.83598 26.9774 14.0025 26.9774Z" stroke="#EA9928" strokeWidth="1.5" strokeMiterlimit="10"/> <path
<path d="M12.819 7.862V12.826L13.176 16.566H14.417L14.774 12.826V7.862H12.819ZM14.893 20V17.722H12.7V20H14.893Z" fill="#EA9928"/> d="M14.0025 26.9774C21.169 26.9774 26.9786 21.1678 26.9786 14.0013C26.9786 6.83476 21.169 1.02515 14.0025 1.02515C6.83598 1.02515 1.02637 6.83476 1.02637 14.0013C1.02637 21.1678 6.83598 26.9774 14.0025 26.9774Z"
stroke="#EA9928"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M12.819 7.862V12.826L13.176 16.566H14.417L14.774 12.826V7.862H12.819ZM14.893 20V17.722H12.7V20H14.893Z"
fill="#EA9928"
/>
</svg> </svg>
) ),
}, },
} };
export const Callout: React.FunctionComponent<CalloutConfig> = ({ type, text }: CalloutConfig) => ( export const Callout: React.FunctionComponent<CalloutConfig> = ({ type, text }: CalloutConfig) => (
<Wrapper type={type}> <Wrapper type={type}>
@@ -65,7 +93,7 @@ Callout.defaultProps = {
}; };
const Wrapper = styled.div<WrapperProps>` const Wrapper = styled.div<WrapperProps>`
background-color: ${props => ThemeSettings[props.type].bgColor}; background-color: ${props => ThemeSettings[props.type].bgColor};
color: ${colors.textDarkPrimary}; color: ${colors.textDarkPrimary};
padding: 1rem 1rem 1rem 1rem; padding: 1rem 1rem 1rem 1rem;
display: flex; display: flex;

11
packages/website/ts/components/docs/code.tsx
View File

@@ -168,7 +168,12 @@ export class Code extends React.Component<CodeProps, CodeState> {
<StyledButton>{copyButtonText}</StyledButton> <StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard> </CopyToClipboard>
</ButtonWrapper> </ButtonWrapper>
<SyntaxHighlighter language={this.props.language} style={customStyle} showLineNumbers={false} PreTag={CustomPre}> <SyntaxHighlighter
language={this.props.language}
style={customStyle}
showLineNumbers={false}
PreTag={CustomPre}
>
{this.props.children} {this.props.children}
</SyntaxHighlighter> </SyntaxHighlighter>
</Wrapper> </Wrapper>
@@ -181,8 +186,8 @@ export class Code extends React.Component<CodeProps, CodeState> {
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
border-radius: 4px; border-radius: 4px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #EAEAEA; border: 1px solid #eaeaea;
color: ${colors.brandDark}; color: ${colors.brandDark};
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;

10
packages/website/ts/components/docs/community_link.tsx
View File

@@ -31,8 +31,12 @@ export const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props
<Wrapper isHome={props.isHome} href={props.url}> <Wrapper isHome={props.isHome} href={props.url}>
<div> <div>
<Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} /> <Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} />
<Heading size="small" marginBottom="8px">{props.heading}</Heading> <Heading size="small" marginBottom="8px">
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph> {props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div> </div>
</Wrapper> </Wrapper>
</> </>
@@ -44,7 +48,7 @@ CommunityLink.defaultProps = {
const Wrapper = styled.a<WrapperProps>` const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD; border: 1px solid #dbdfdd;
padding: 50px 50px; padding: 50px 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

20
packages/website/ts/components/docs/feature_link.tsx
View File

@@ -21,19 +21,27 @@ export interface LinkProps {
shouldOpenInNewTab?: boolean; shouldOpenInNewTab?: boolean;
} }
interface WrapperProps { interface WrapperProps {}
}
export const FeatureLink: React.FunctionComponent<LinkProps> = (props: LinkProps) => ( export const FeatureLink: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
<> <>
<Wrapper href={props.url}> <Wrapper href={props.url}>
<Icon color={colors.brandLight} name={props.icon} size={60} margin={[0, 30, 0, 0]} /> <Icon color={colors.brandLight} name={props.icon} size={60} margin={[0, 30, 0, 0]} />
<Content> <Content>
<Heading asElement="h3" size="small" marginBottom="6px">{props.heading}</Heading> <Heading asElement="h3" size="small" marginBottom="6px">
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph> {props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</Content> </Content>
<svg viewBox="0 0 14 14" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 14 14" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z" fill="currentColor"/> <path
fillRule="evenodd"
clipRule="evenodd"
d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
fill="currentColor"
/>
</svg> </svg>
</Wrapper> </Wrapper>
</> </>
@@ -41,7 +49,7 @@ export const FeatureLink: React.FunctionComponent<LinkProps> = (props: LinkProps
const Wrapper = styled.a` const Wrapper = styled.a`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD; border: 1px solid #dbdfdd;
padding: 30px 30px; padding: 30px 30px;
display: flex; display: flex;
align-items: center; align-items: center;

6
packages/website/ts/components/docs/header.tsx
View File

@@ -113,11 +113,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
) : ( ) : (
<StyledNavLink to={link.url}>{link.text}</StyledNavLink> <StyledNavLink to={link.url}>{link.text}</StyledNavLink>
); );
return ( return <LinkWrap>{linkElement}</LinkWrap>;
<LinkWrap>
{linkElement}
</LinkWrap>
);
}; };
const DocsLogo = () => { const DocsLogo = () => {

8
packages/website/ts/components/docs/help_callout.tsx
View File

@@ -28,8 +28,12 @@ export const HelpCallout: React.FunctionComponent<HelpCalloutProps> = (props: He
<Wrapper href={props.url}> <Wrapper href={props.url}>
<Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} /> <Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} />
<div> <div>
<Heading size="small" marginBottom="8px">{props.heading}</Heading> <Heading size="small" marginBottom="8px">
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph> {props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div> </div>
</Wrapper> </Wrapper>
</> </>

4
packages/website/ts/components/docs/helpful_cta.tsx
View File

@@ -25,7 +25,9 @@ export const HelpfulCta: React.FunctionComponent<HelpfulCtaProps> = (props: Help
<Text>Was this page helpful</Text> <Text>Was this page helpful</Text>
<Buttons> <Buttons>
<CtaButton color={colors.white}>Yes</CtaButton> <CtaButton color={colors.white}>Yes</CtaButton>
<CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>No</CtaButton> <CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>
No
</CtaButton>
</Buttons> </Buttons>
</Wrapper> </Wrapper>
</> </>

6
packages/website/ts/components/docs/hero.tsx
View File

@@ -27,7 +27,9 @@ interface LinkConfig {
export const Hero: React.FunctionComponent<Props> = (props: Props) => ( export const Hero: React.FunctionComponent<Props> = (props: Props) => (
<> <>
<Wrapper isHome={props.isHome}> <Wrapper isHome={props.isHome}>
<Heading size="large" isCentered={true} marginBottom={props.isHome || props.description ? '30px' : '0'}>{props.title}</Heading> <Heading size="large" isCentered={true} marginBottom={props.isHome || props.description ? '30px' : '0'}>
{props.title}
</Heading>
{props.description && <Paragraph isCentered={true}>{props.description}</Paragraph>} {props.description && <Paragraph isCentered={true}>{props.description}</Paragraph>}
{props.isHome && <SearchInput isHome={true} />} {props.isHome && <SearchInput isHome={true} />}
</Wrapper> </Wrapper>
@@ -44,7 +46,7 @@ const Wrapper = styled.div<Props>`
padding-bottom: 80px; padding-bottom: 80px;
margin-bottom: 60px; margin-bottom: 60px;
min-height: 15rem; min-height: 15rem;
min-height: ${props => props.isHome ? '21.875rem' : '13.222rem'}; min-height: ${props => (props.isHome ? '21.875rem' : '13.222rem')};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

12
packages/website/ts/components/docs/newsletter_signup.tsx
View File

@@ -30,11 +30,15 @@ export const NewsletterSignup: React.FunctionComponent<NewsletterSignupProps> =
<Paragraph marginBottom="25px">{props.description}</Paragraph> <Paragraph marginBottom="25px">{props.description}</Paragraph>
<InputWrapper> <InputWrapper>
<Label htmlFor="emailSignup">Email Address</Label> <Label htmlFor="emailSignup">Email Address</Label>
<Input id="emailSignup" type="email" placeholder="Email Address"/> <Input id="emailSignup" type="email" placeholder="Email Address" />
<Submit> <Submit>
<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity=".5" d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#5C5C5C"/> <path
</svg> opacity=".5"
d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
fill="#5C5C5C"
/>
</svg>
</Submit> </Submit>
</InputWrapper> </InputWrapper>
</Wrapper> </Wrapper>

8
packages/website/ts/components/docs/note.tsx
View File

@@ -10,8 +10,7 @@ export interface NoteProps {
description?: string; description?: string;
} }
interface WrapperProps { interface WrapperProps {}
}
export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => ( export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => (
<> <>
@@ -26,7 +25,7 @@ export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => (
const Wrapper = styled.div` const Wrapper = styled.div`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD; border: 1px solid #dbdfdd;
padding: 20px 14px; padding: 20px 14px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -36,8 +35,7 @@ const Wrapper = styled.div`
margin-bottom: 30px; margin-bottom: 30px;
`; `;
const Content = styled.div` const Content = styled.div``;
`;
const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })` const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
font-size: 0.944444444rem !important; font-size: 0.944444444rem !important;

10
packages/website/ts/components/docs/resource/level.tsx
View File

@@ -18,17 +18,17 @@ export enum Difficulty {
const difficulties = { const difficulties = {
[Difficulty.Beginner]: { [Difficulty.Beginner]: {
label: 'Beginner', label: 'Beginner',
rating: 1 rating: 1,
}, },
[Difficulty.Intermediate]: { [Difficulty.Intermediate]: {
label: 'Intermediate', label: 'Intermediate',
rating: 2 rating: 2,
}, },
[Difficulty.Advanced]: { [Difficulty.Advanced]: {
label: 'Advanced', label: 'Advanced',
rating: 3 rating: 3,
}, },
} };
export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: LevelProps) => { export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: LevelProps) => {
const info = difficulties[difficulty]; const info = difficulties[difficulty];
@@ -37,7 +37,7 @@ export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: Level
<DifficultyLabel>{info.label}</DifficultyLabel> <DifficultyLabel>{info.label}</DifficultyLabel>
<RatingBar rating={info.rating} /> <RatingBar rating={info.rating} />
</Wrapper> </Wrapper>
) );
}; };
const Wrapper = styled.div` const Wrapper = styled.div`

25
packages/website/ts/components/docs/resource/resource.tsx
View File

@@ -20,13 +20,26 @@ interface TagProps {
isInverted?: boolean; isInverted?: boolean;
} }
export const Resource: React.FunctionComponent<ResourceProps> = ({ heading, description, url, tags }: ResourceProps) => ( export const Resource: React.FunctionComponent<ResourceProps> = ({
heading,
description,
url,
tags,
}: ResourceProps) => (
<Wrapper href={url}> <Wrapper href={url}>
<Heading color={colors.brandDark} size="small" marginBottom="8px">{heading}</Heading> <Heading color={colors.brandDark} size="small" marginBottom="8px">
<Paragraph size="default" marginBottom="30px">{description}</Paragraph> {heading}
</Heading>
<Paragraph size="default" marginBottom="30px">
{description}
</Paragraph>
<Meta> <Meta>
<Tags> <Tags>
{tags.map(({label, isInverted}, index) => <Tag key={`tag-${index}`} isInverted={isInverted}>{label}</Tag>)} {tags.map(({ label, isInverted }, index) => (
<Tag key={`tag-${index}`} isInverted={isInverted}>
{label}
</Tag>
))}
</Tags> </Tags>
<Level difficulty={Difficulty.Beginner} /> <Level difficulty={Difficulty.Beginner} />
</Meta> </Meta>
@@ -39,7 +52,7 @@ Resource.defaultProps = {
}; };
const Wrapper = styled.a` const Wrapper = styled.a`
border: 1px solid #D7E3DB; border: 1px solid #d7e3db;
padding: 25px 30px; padding: 25px 30px;
margin-bottom: 1.111111111rem; margin-bottom: 1.111111111rem;
display: block; display: block;
@@ -54,4 +67,4 @@ const Meta = styled.div`
const Tags = styled.div` const Tags = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
`; `;

8
packages/website/ts/components/docs/resource/tag.tsx
View File

@@ -14,9 +14,7 @@ interface WrapperProps {
} }
export const Tag: React.FunctionComponent<TagProps> = ({ isInverted, children }: TagProps) => ( export const Tag: React.FunctionComponent<TagProps> = ({ isInverted, children }: TagProps) => (
<Wrapper isInverted={isInverted}> <Wrapper isInverted={isInverted}>{children}</Wrapper>
{children}
</Wrapper>
); );
Tag.defaultProps = { Tag.defaultProps = {
@@ -24,9 +22,9 @@ Tag.defaultProps = {
}; };
const Wrapper = styled.div<WrapperProps>` const Wrapper = styled.div<WrapperProps>`
background-color: ${props => props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)'}; background-color: ${props => (props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)')};
border-radius: 4px; border-radius: 4px;
color: ${props => props.isInverted ? colors.white : colors.brandDark}; color: ${props => (props.isInverted ? colors.white : colors.brandDark)};
font-size: 0.666666667rem; font-size: 0.666666667rem;
font-family: 'Formular Mono'; font-family: 'Formular Mono';
font-weight: 400; font-weight: 400;

22
packages/website/ts/components/docs/search_input.tsx
View File

@@ -39,34 +39,40 @@ const Wrapper = styled.div<Props>`
width: 100%; width: 100%;
max-width: 240px; max-width: 240px;
${props => props.isHome && ` ${props =>
props.isHome &&
`
max-width: 890px; max-width: 890px;
margin: 0 auto; margin: 0 auto;
`}; `};
`; `;
const Label = styled.label` const Label = styled.label`
position: relative; position: relative;
`; `;
const LabelText = styled.span` const LabelText = styled.span`
position: absolute; position: absolute;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
`; `;
const Input = styled.input.attrs({ const Input = styled.input.attrs({
placeholder: 'Search docs...', placeholder: 'Search docs...',
})<Props>` })<Props>`
background: transparent left center url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E") no-repeat ; background: transparent left center
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
no-repeat;
font-size: 1.375rem; font-size: 1.375rem;
padding: 18px 18px 21px 35px; padding: 18px 18px 21px 35px;
width: 100%; width: 100%;
border: 0; border: 0;
border-bottom: 1px solid #B4BEBD; border-bottom: 1px solid #b4bebd;
outline: none; outline: none;
${props => !props.isHome && ` ${props =>
!props.isHome &&
`
background-color: #EBEEEC; background-color: #EBEEEC;
border-bottom: 0; border-bottom: 0;
padding: 13px 21px 15px 52px; padding: 13px 21px 15px 52px;

10
packages/website/ts/components/docs/shortcut_link.tsx
View File

@@ -31,8 +31,12 @@ export const ShortcutLink: React.FunctionComponent<LinkProps> = (props: LinkProp
<Wrapper isHome={props.isHome} href={props.url}> <Wrapper isHome={props.isHome} href={props.url}>
<Icon color={colors.brandLight} name={props.icon} size={80} margin={[0, 40, 0, 0]} /> <Icon color={colors.brandLight} name={props.icon} size={80} margin={[0, 40, 0, 0]} />
<div> <div>
<Heading size="small" marginBottom="8px">{props.heading}</Heading> <Heading size="small" marginBottom="8px">
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph> {props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div> </div>
</Wrapper> </Wrapper>
</> </>
@@ -44,7 +48,7 @@ ShortcutLink.defaultProps = {
const Wrapper = styled.a<WrapperProps>` const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD; border: 1px solid #dbdfdd;
padding: 50px 50px; padding: 50px 50px;
display: flex; display: flex;
align-items: center; align-items: center;

15
packages/website/ts/components/docs/sidebar/filter.tsx
View File

@@ -30,14 +30,15 @@ const Checkbox = styled.input.attrs({ type: 'checkbox' })`
`; `;
const CheckboxBox = styled.div` const CheckboxBox = styled.div`
border: 1px solid #CBCBCB; border: 1px solid #cbcbcb;
width: 22px; width: 22px;
height: 22px; height: 22px;
margin-right: 0.666rem; margin-right: 0.666rem;
${Checkbox}:checked ~ & { ${Checkbox}:checked ~ & {
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.983 12.522c-.21 0-.4-.07-.557-.226l-3.46-3.461a.777.777 0 0 1 0-1.113.777.777 0 0 1 1.112 0L6 10.626l6.94-6.922a.777.777 0 0 1 1.112 0c.313.313.313.8 0 1.113l-7.495 7.479a.83.83 0 0 1-.574.226z' fill='currentColor'/%3E%3C/svg%3E") no-repeat center; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.983 12.522c-.21 0-.4-.07-.557-.226l-3.46-3.461a.777.777 0 0 1 0-1.113.777.777 0 0 1 1.112 0L6 10.626l6.94-6.922a.777.777 0 0 1 1.112 0c.313.313.313.8 0 1.113l-7.495 7.479a.83.83 0 0 1-.574.226z' fill='currentColor'/%3E%3C/svg%3E")
} no-repeat center;
}
`; `;
const Label = styled.span` const Label = styled.span`

42
packages/website/ts/components/docs/sidebar/filters.tsx
View File

@@ -10,11 +10,9 @@ import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme'; import { styled } from 'ts/style/theme';
import { zIndex } from 'ts/style/z_index'; import { zIndex } from 'ts/style/z_index';
export interface FiltersProps { export interface FiltersProps {}
}
export interface FiltersState { export interface FiltersState {}
}
interface Group { interface Group {
heading: string; heading: string;
@@ -23,8 +21,8 @@ interface Group {
} }
interface FilterProps { interface FilterProps {
value: string; value: string;
label: string; label: string;
} }
const groups: Group[] = [ const groups: Group[] = [
@@ -34,21 +32,21 @@ const groups: Group[] = [
filters: [ filters: [
{ {
value: 'mesh', value: 'mesh',
label: 'Mesh' label: 'Mesh',
}, },
{ {
value: 'testing', value: 'testing',
label: 'Testing' label: 'Testing',
}, },
{ {
value: 'mesh', value: 'mesh',
label: 'Mesh' label: 'Mesh',
}, },
{ {
value: 'testing', value: 'testing',
label: 'Testing' label: 'Testing',
}, },
] ],
}, },
{ {
heading: 'Level', heading: 'Level',
@@ -56,25 +54,23 @@ const groups: Group[] = [
filters: [ filters: [
{ {
value: 'beginner', value: 'beginner',
label: 'Beginner' label: 'Beginner',
}, },
{ {
value: 'intermediate', value: 'intermediate',
label: 'Intermediate' label: 'Intermediate',
}, },
{ {
value: 'advanced', value: 'advanced',
label: 'Advanced' label: 'Advanced',
}, },
] ],
}, },
] ];
export class Filters extends React.Component<FiltersProps, FiltersState> { export class Filters extends React.Component<FiltersProps, FiltersState> {
public static defaultProps = { public static defaultProps = {};
}; public state: FiltersState = {};
public state: FiltersState = {
};
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<Wrapper> <Wrapper>
@@ -82,8 +78,8 @@ export class Filters extends React.Component<FiltersProps, FiltersState> {
<GroupWrapper key={`filter-group-${index}`}> <GroupWrapper key={`filter-group-${index}`}>
<GroupHeading asElement="h3">{heading}</GroupHeading> <GroupHeading asElement="h3">{heading}</GroupHeading>
{filters.map(({ value, label }: FilterProps, index) => ( {filters.map(({ value, label }: FilterProps, index) => (
<Filter key={`filter-${name}-${index}`} name={name} value={value} label={label} /> <Filter key={`filter-${name}-${index}`} name={name} value={value} label={label} />
))} ))}
</GroupWrapper> </GroupWrapper>
))} ))}
</Wrapper> </Wrapper>
@@ -104,7 +100,7 @@ const GroupWrapper = styled.div`
`; `;
const GroupHeading = styled(Heading)` const GroupHeading = styled(Heading)`
color: ${colors.textDarkPrimary}; color: ${colors.textDarkPrimary};
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 400 !important; font-weight: 400 !important;
margin-bottom: 1em !important; margin-bottom: 1em !important;

12
packages/website/ts/components/docs/step_link.tsx
View File

@@ -19,15 +19,19 @@ export interface StepLinkConfig {
shouldOpenInNewTab?: boolean; shouldOpenInNewTab?: boolean;
} }
interface WrapperProps { interface WrapperProps {}
}
export const StepLink: React.FunctionComponent<StepLinkConfig> = (props: StepLinkConfig) => ( export const StepLink: React.FunctionComponent<StepLinkConfig> = (props: StepLinkConfig) => (
<> <>
<Wrapper href={props.url}> <Wrapper href={props.url}>
<Text>{props.title}</Text> <Text>{props.title}</Text>
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z" fill="currentColor"/> <path
fillRule="evenodd"
clipRule="evenodd"
d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
fill="currentColor"
/>
</svg> </svg>
</Wrapper> </Wrapper>
</> </>
@@ -46,7 +50,7 @@ const Wrapper = styled.a<WrapperProps>`
} }
& + & { & + & {
border-top: 1px solid #DBDFDD; border-top: 1px solid #dbdfdd;
} }
`; `;

6
packages/website/ts/components/docs/step_links.tsx
View File

@@ -12,7 +12,9 @@ export interface LinkProps {
export const StepLinks: React.FunctionComponent<LinkProps> = (props: LinkProps) => ( export const StepLinks: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
<> <>
<Wrapper> <Wrapper>
{props.links.map((shortcut, index) => <StepLink key={`step-${index}`} {...shortcut} />)} {props.links.map((shortcut, index) => (
<StepLink key={`step-${index}`} {...shortcut} />
))}
</Wrapper> </Wrapper>
</> </>
); );
@@ -23,6 +25,6 @@ StepLinks.defaultProps = {
const Wrapper = styled.div` const Wrapper = styled.div`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD; border: 1px solid #dbdfdd;
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
`; `;

15
packages/website/ts/components/docs/table.tsx
View File

@@ -9,17 +9,14 @@ export interface Props {
export const Table: React.FunctionComponent<Props> = (props: Props) => ( export const Table: React.FunctionComponent<Props> = (props: Props) => (
<> <>
<Wrapper> <Wrapper>{props.children}</Wrapper>
{props.children}
</Wrapper>
</> </>
); );
Table.defaultProps = { Table.defaultProps = {};
};
const Wrapper = styled.table` const Wrapper = styled.table`
border: 1px solid #CFCFCF; border: 1px solid #cfcfcf;
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
width: 100%; width: 100%;
@@ -27,13 +24,13 @@ const Wrapper = styled.table`
font-size: 0.888888889rem; font-size: 0.888888889rem;
font-weight: 400; font-weight: 400;
padding: 14px 20px 13px; padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF; border-bottom: 1px solid #cfcfcf;
text-align: left; text-align: left;
} }
td { td {
padding: 14px 20px 13px; padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF; border-bottom: 1px solid #cfcfcf;
font-size: 0.777777778rem; font-size: 0.777777778rem;
opacity: 0.76; opacity: 0.76;
line-height: 1.428571429; line-height: 1.428571429;
@@ -41,7 +38,7 @@ const Wrapper = styled.table`
td + td, td + td,
th + th { th + th {
border-left: 1px solid #CFCFCF; border-left: 1px solid #cfcfcf;
} }
tr { tr {

15
packages/website/ts/components/docs/tabs.tsx
View File

@@ -1,6 +1,11 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import { Tab as OriginalTab, TabList as OriginalTabList, TabPanel as OriginalTabPanel, Tabs as OriginalTabs } from 'react-tabs'; import {
Tab as OriginalTab,
TabList as OriginalTabList,
TabPanel as OriginalTabPanel,
Tabs as OriginalTabs,
} from 'react-tabs';
import styled, { withTheme } from 'styled-components'; import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
@@ -10,7 +15,7 @@ export const Tabs = styled(OriginalTabs).attrs({
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
.is-active { .is-active {
background-color: #F3F6F4; background-color: #f3f6f4;
color: ${colors.brandDark}; color: ${colors.brandDark};
} }
`; `;
@@ -21,20 +26,20 @@ export const Tab = styled(OriginalTab)`
cursor: pointer; cursor: pointer;
padding: 12px 12px 13px; padding: 12px 12px 13px;
font-size: 1rem; font-size: 1rem;
color: #5C5C5C; color: #5c5c5c;
font-weight: 300; font-weight: 300;
`; `;
export const TabPanel = styled(OriginalTabPanel).attrs({ export const TabPanel = styled(OriginalTabPanel).attrs({
selectedClassName: 'is-active', selectedClassName: 'is-active',
})` })`
background-color: #F3F6F4; background-color: #f3f6f4;
border-radius: 4px; border-radius: 4px;
padding: 12px 12px; padding: 12px 12px;
display: none; display: none;
&.is-active { &.is-active {
display: block; display: block;
} }
`; `;

10
packages/website/ts/components/docs/tutorial_steps.tsx
View File

@@ -6,19 +6,15 @@ export interface Props {
children: React.ReactNode; children: React.ReactNode;
} }
interface WrapperProps { interface WrapperProps {}
}
export const TutorialSteps: React.FunctionComponent<Props> = (props: Props) => ( export const TutorialSteps: React.FunctionComponent<Props> = (props: Props) => (
<> <>
<Wrapper> <Wrapper>{props.children}</Wrapper>
{props.children}
</Wrapper>
</> </>
); );
TutorialSteps.defaultProps = { TutorialSteps.defaultProps = {};
};
const Wrapper = styled.ul<WrapperProps>` const Wrapper = styled.ul<WrapperProps>`
list-style-type: none; list-style-type: none;

7
packages/website/ts/components/docs/unordered_list.tsx
View File

@@ -9,14 +9,11 @@ export interface Props {
export const UnorderedList: React.FunctionComponent<Props> = (props: Props) => ( export const UnorderedList: React.FunctionComponent<Props> = (props: Props) => (
<> <>
<Wrapper> <Wrapper>{props.children}</Wrapper>
{props.children}
</Wrapper>
</> </>
); );
UnorderedList.defaultProps = { UnorderedList.defaultProps = {};
};
const Wrapper = styled.ul` const Wrapper = styled.ul`
list-style-type: disc; list-style-type: disc;

1
packages/website/ts/pages/credits.tsx
View File

@@ -115,5 +115,4 @@ export class Credits extends React.Component<CreditsProps> {
Apply Now Apply Now
</Button> </Button>
); );
} }

35
packages/website/ts/pages/docs/guides.tsx
View File

@@ -71,11 +71,31 @@ export class DocsGuides extends React.Component<Props> {
</aside> </aside>
<article> <article>
<div> <div>
<Resource heading="0x Mesh - your gateway to networked liquidity" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Relayer' } ]} /> <Resource
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} /> heading="0x Mesh - your gateway to networked liquidity"
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} /> description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} /> tags={[{ label: 'Relayer' }]}
<Resource heading="0x Mesh - your gateway to networked liquidity" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Community Maintained', isInverted: true }, { label: 'Relayer' } ]} /> />
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
/>
</div> </div>
</article> </article>
</Columns> </Columns>
@@ -98,7 +118,7 @@ Columns.defaultProps = {
const Separator = styled.hr` const Separator = styled.hr`
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: #E4E4E4; border-color: #e4e4e4;
height: 0; height: 0;
margin-top: 60px; margin-top: 60px;
margin-bottom: 60px; margin-bottom: 60px;
@@ -112,5 +132,4 @@ const LargeHeading = styled(Heading).attrs({
const LargeIntro = styled(Paragraph).attrs({ const LargeIntro = styled(Paragraph).attrs({
size: 'medium', size: 'medium',
})` })``;
`;

20
packages/website/ts/pages/docs/home.tsx
View File

@@ -94,10 +94,8 @@ const communityShortcuts: CommunityLinkProps[] = [
]; ];
export class DocsHome extends React.Component<Props> { export class DocsHome extends React.Component<Props> {
public state = { public state = {};
}; public componentDidMount(): void {}
public componentDidMount(): void {
}
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<SiteWrap theme="light"> <SiteWrap theme="light">
@@ -105,9 +103,11 @@ export class DocsHome extends React.Component<Props> {
<Hero isHome={true} title="0x Docs" /> <Hero isHome={true} title="0x Docs" />
<Section maxWidth={'1150px'} isPadded={false} padding="0 0"> <Section maxWidth={'1150px'} isPadded={false} padding="0 0">
<ShortcutsWrapper> <ShortcutsWrapper>
{shortcuts.map((shortcut, index) => <ShortcutLink key={`shortcut-${index}`} {...shortcut} />)} {shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
))}
</ShortcutsWrapper> </ShortcutsWrapper>
<Separator/> <Separator />
<Columns> <Columns>
<div> <div>
<Heading size="default">Get Started</Heading> <Heading size="default">Get Started</Heading>
@@ -117,9 +117,11 @@ export class DocsHome extends React.Component<Props> {
<StepLinks links={usefulLinks} /> <StepLinks links={usefulLinks} />
</div> </div>
</Columns> </Columns>
<Separator/> <Separator />
<CommunityWrapper> <CommunityWrapper>
{communityShortcuts.map((shortcut, index) => <CommunityLink key={`communityLink-${index}`} {...shortcut} />)} {communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper> </CommunityWrapper>
</Section> </Section>
</SiteWrap> </SiteWrap>
@@ -154,7 +156,7 @@ Columns.defaultProps = {
const Separator = styled.hr` const Separator = styled.hr`
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: #E4E4E4; border-color: #e4e4e4;
height: 0; height: 0;
margin-top: 60px; margin-top: 60px;
margin-bottom: 60px; margin-bottom: 60px;

160
packages/website/ts/pages/docs/page_template.tsx
View File

@@ -72,26 +72,34 @@ export class DocsPageTemplate extends React.Component<Props> {
<article> <article>
<LargeHeading>Large Heading</LargeHeading> <LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Larger introduction text</LargeIntro> <LargeIntro>Larger introduction text</LargeIntro>
<Heading asElement="h2" size="default">Notifications</Heading> <Heading asElement="h2" size="default">
Notifications
</Heading>
<Callout text="This is' a pretty standard information callout" /> <Callout text="This is' a pretty standard information callout" />
<Callout text="This is an indication that something isn’t quite right" type="alert" /> <Callout text="This is an indication that something isn’t quite right" type="alert" />
<Callout text="This is a success message" type="success" /> <Callout text="This is a success message" type="success" />
<Heading asElement="h2" size="default">Tutorial Steps</Heading> <Heading asElement="h2" size="default">
Tutorial Steps
</Heading>
<TutorialSteps> <TutorialSteps>
<li>Step 1</li> <li>Step 1</li>
<li>Step 2</li> <li>Step 2</li>
<li>Step 3</li> <li>Step 3</li>
</TutorialSteps> </TutorialSteps>
<Heading asElement="h2" size="default">Standard Heading</Heading> <Heading asElement="h2" size="default">
Standard Heading
</Heading>
<Paragraph>This would be paragraph text.</Paragraph>
<Paragraph> <Paragraph>
This would be paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
</Paragraph> varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
<Paragraph> sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
</Paragraph> dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
<Paragraph> ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
And here is a table: pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph> </Paragraph>
<Paragraph>And here is a table:</Paragraph>
<Table> <Table>
<thead> <thead>
<tr> <tr>
@@ -102,31 +110,55 @@ export class DocsPageTemplate extends React.Component<Props> {
<tbody> <tbody>
<tr> <tr>
<td>makerAddress</td> <td>makerAddress</td>
<td>Address that created the order. The maker is one of the two parties that will be involved in the trade if the order gets filled.</td> <td>
Address that created the order. The maker is one of the two parties that
will be involved in the trade if the order gets filled.
</td>
</tr> </tr>
<tr> <tr>
<td>takerAddress</td> <td>takerAddress</td>
<td>Address that is allowed to fill the order. If set to 0, anyone is allowed to fill the order. This field allows makers to decide who can fill an order, rendering it useless to eavesdroppers or outside parties.</td> <td>
Address that is allowed to fill the order. If set to 0, anyone is allowed to
fill the order. This field allows makers to decide who can fill an order,
rendering it useless to eavesdroppers or outside parties.
</td>
</tr> </tr>
<tr> <tr>
<td>feeRecipientAddress</td> <td>feeRecipientAddress</td>
<td>The address that will receive the fees stipulated by the order. This is typically used to incentivize off-chain order relay.</td> <td>
The address that will receive the fees stipulated by the order. This is
typically used to incentivize off-chain order relay.
</td>
</tr> </tr>
<tr> <tr>
<td>senderAddress</td> <td>senderAddress</td>
<td>Is an advanced feature that can be defaulted to the 0 address. It allows the maker to enforce that the order must flow through some additional logic residing in an additional Ethereum smart contract before it can be filled (e.g a KYC whitelist contract) -- more on "extension contracts" later.</td> <td>
Is an advanced feature that can be defaulted to the 0 address. It allows the
maker to enforce that the order must flow through some additional logic
residing in an additional Ethereum smart contract before it can be filled
(e.g a KYC whitelist contract) -- more on "extension contracts" later.
</td>
</tr> </tr>
<tr> <tr>
<td>makerAssetAmount</td> <td>makerAssetAmount</td>
<td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td> <td>
Amount of the maker'sAsset being offered by the maker. Must be greater than
0.
</td>
</tr> </tr>
<tr> <tr>
<td>makerFee</td> <td>makerFee</td>
<td>The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the event of an order fill. Partial fills result in partial fees.</td> <td>
The fee to be paid by the order maker to the{' '}
<code>feeRecipientAddress</code> in the event of an order fill. Partial
fills result in partial fees.
</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
<Heading asElement="h3" size="default">Code Snippet</Heading> <Heading asElement="h3" size="default">
Code Snippet
</Heading>
<Code> <Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples'; {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
@@ -136,7 +168,9 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
from: senderAddress, from: senderAddress,
});`} });`}
</Code> </Code>
<Heading asElement="h3" size="default">Tabbed Code Snippet</Heading> <Heading asElement="h3" size="default">
Tabbed Code Snippet
</Heading>
<Tabs> <Tabs>
<TabList> <TabList>
<Tab>Typescript</Tab> <Tab>Typescript</Tab>
@@ -146,7 +180,7 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
<TabPanel> <TabPanel>
<Code> <Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples'; {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
const exchange = new ExchangeContract(provider, networkId); const exchange = new ExchangeContract(provider, networkId);
@@ -178,15 +212,33 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
</Code> </Code>
</TabPanel> </TabPanel>
</Tabs> </Tabs>
<Heading asElement="h3" size="default">Subheading</Heading> <Heading asElement="h3" size="default">
Subheading
</Heading>
<Paragraph> <Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph> </Paragraph>
<div> <div>
<Note heading="Information" description="This is a side-info callout used to explain things a little more when needed." /> <Note
<Paragraph> heading="Information"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod description="This is a side-info callout used to explain things a little more when needed."
</Paragraph> />
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in
nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis
convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero.
Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed
tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem
faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod.
Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
dignissim mi a maximus euismod
</Paragraph>
</div> </div>
<UnorderedList> <UnorderedList>
<li>List items</li> <li>List items</li>
@@ -194,23 +246,56 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
<li>List items</li> <li>List items</li>
<li>List items</li> <li>List items</li>
</UnorderedList> </UnorderedList>
<Heading asElement="h2" size="default">Tabbed Code Snippet</Heading> <Heading asElement="h2" size="default">
<Heading asElement="h2" size="default">Run Code Snippet</Heading> Tabbed Code Snippet
<Heading asElement="h2" size="default">Next Steps</Heading> </Heading>
<Heading asElement="h2" size="default">
Run Code Snippet
</Heading>
<Heading asElement="h2" size="default">
Next Steps
</Heading>
<StepLinks links={usefulLinks} /> <StepLinks links={usefulLinks} />
<HelpCallout /> <HelpCallout />
<NewsletterSignup /> <NewsletterSignup />
<HelpfulCta /> <HelpfulCta />
<div> <div>
<Heading asElement="h2" size="default">Resources</Heading> <Heading asElement="h2" size="default">
<Resource heading="RadarRelay SDK" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Relayer' } ]} /> Resources
<Resource heading="RadarRelay SDK" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Community Maintained', isInverted: true }, { label: 'Relayer' } ]} /> </Heading>
<Resource
heading="RadarRelay SDK"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="RadarRelay SDK"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
/>
</div> </div>
<div> <div>
<Heading asElement="h2" size="default">Feature Links</Heading> <Heading asElement="h2" size="default">
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" /> Feature Links
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" /> </Heading>
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" /> <FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
</div> </div>
</article> </article>
</Columns> </Columns>
@@ -233,7 +318,7 @@ Columns.defaultProps = {
const Separator = styled.hr` const Separator = styled.hr`
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: #E4E4E4; border-color: #e4e4e4;
height: 0; height: 0;
margin-top: 60px; margin-top: 60px;
margin-bottom: 60px; margin-bottom: 60px;
@@ -247,5 +332,4 @@ const LargeHeading = styled(Heading).attrs({
const LargeIntro = styled(Paragraph).attrs({ const LargeIntro = styled(Paragraph).attrs({
size: 'medium', size: 'medium',
})` })``;
`;

1
packages/website/ts/pages/extensions.tsx
View File

@@ -124,7 +124,6 @@ export class Extensions extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`); window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true }); this.setState({ isContactModalOpen: true });
}; };
} }
const HeroActions = () => ( const HeroActions = () => (

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

@@ -172,7 +172,6 @@ export class Next0xInstant extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`); window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true }); this.setState({ isContactModalOpen: true });
}; };
} }
// scroll animation calc is simply (imageWidth * totalRepetitions) / 2 // scroll animation calc is simply (imageWidth * totalRepetitions) / 2

1
packages/website/ts/pages/launch_kit.tsx
View File

@@ -189,7 +189,6 @@ export class NextLaunchKit extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`); window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true }); this.setState({ isContactModalOpen: true });
}; };
} }
const HeroActions = () => ( const HeroActions = () => (

1
packages/website/ts/pages/market_maker.tsx
View File

@@ -171,5 +171,4 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
</Button> </Button>
</> </>
); );
} }

1
packages/website/ts/pages/why.tsx
View File

@@ -235,7 +235,6 @@ export class NextWhy extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`); window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true }); this.setState({ isContactModalOpen: true });
}; };
} }
interface SectionProps { interface SectionProps {