diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-12-21 07:21:28 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-12-21 07:21:28 +0800 |
commit | 56af9b2aab26fd6a774d0b345ce8e1441bb1a9e0 (patch) | |
tree | 54ed033d1d080bcf6212ce697dffa6f427b1b020 /packages/website/ts/@next/components/dropdowns | |
parent | b399aa25aa9386d388d31edb463e803c7c31a2db (diff) | |
parent | 0a84ee748823e5099b0767eedc5de95c71cb8f4e (diff) | |
download | dexon-0x-contracts-56af9b2aab26fd6a774d0b345ce8e1441bb1a9e0.tar.gz dexon-0x-contracts-56af9b2aab26fd6a774d0b345ce8e1441bb1a9e0.tar.zst dexon-0x-contracts-56af9b2aab26fd6a774d0b345ce8e1441bb1a9e0.zip |
Merge branch 'development' into fix/instant/signature-denied
* development: (914 commits)
Unfix compiler version except for top level contracts
Move OrderValidator to extensions
Update CHANGELOG
Remove assembly version of matchOrders
Add getOrderInfo check before calling fillOrder
Update comments and hard code function selector constants
Fix build after rebase
update comments
Fix build and add back tests
Update dependency paths
Add OrderMatcher tests
feat: Add OrderMatcher contract that takes spread in multiple assets by calling `matchOrders` followed by `fillOrder`
Update CHANGELOG
Use more efficient equality checks
Add note about input validation
Use more efficient check for overflow
Check if amount == 0 before doing division
Reapply prettier
New relayers
feat(sra_client.py): Test deployed pkg via tox
...
Diffstat (limited to 'packages/website/ts/@next/components/dropdowns')
-rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx | 180 | ||||
-rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_products.tsx | 48 |
2 files changed, 228 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx new file mode 100644 index 000000000..96d88846b --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -0,0 +1,180 @@ +import { Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import styled, { withTheme } from 'styled-components'; + +import { Button } from 'ts/@next/components/button'; +import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { Heading } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; + +interface Props { + theme: ThemeValuesInterface; +} + +interface LinkConfig { + label: string; + url: string; + shouldOpenInNewTab?: boolean; +} + +const introData: LinkConfig[] = [ + { + label: 'Build a relayer', + url: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + label: 'Develop on Ethereum', + url: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + label: 'Make & take orders', + url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + { + label: 'Use networked liquidity', + url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; + +const docsData: LinkConfig[] = [ + { + label: '0x.js', + url: WebsitePaths.ZeroExJs, + }, + { + label: '0x Connect', + url: WebsitePaths.Connect, + }, + { + label: 'Smart Contract', + url: WebsitePaths.SmartContracts, + }, +]; + +const linksData: LinkConfig[] = [ + { + label: 'Wiki', + url: WebsitePaths.Wiki, + }, + { + label: 'Github', + url: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + { + label: 'Protocol specification', + url: constants.URL_PROTOCOL_SPECIFICATION, + shouldOpenInNewTab: true, + }, +]; + +export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => ( + <> + <DropdownWrap> + <div> + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> + Getting Started + </Heading> + + <StyledGrid isCentered={false} isWrapped={true}> + {_.map(introData, (item, index) => ( + <li> + <Link key={`introLink-${index}`} to={item.url}> + {item.label} + </Link> + </li> + ))} + </StyledGrid> + </div> + + <StyledWrap> + <Column width="calc(100% - 15px)"> + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> + Popular Docs + </Heading> + + <ul> + {_.map(docsData, (item, index) => ( + <li key={`docsLink-${index}`}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> + {item.label} + </Link> + </li> + ))} + </ul> + </Column> + + <Column width="calc(100% - 15px)"> + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> + Useful Links + </Heading> + + <ul> + {_.map(linksData, (item, index) => ( + <li key={`usefulLink-${index}`}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> + {item.label} + </Link> + </li> + ))} + </ul> + </Column> + </StyledWrap> + + <StyledLink + to={WebsitePaths.Docs} + bgColor={props.theme.dropdownButtonBg} + isAccentColor={true} + isNoBorder={true} + > + View All Documentation + </StyledLink> + </DropdownWrap> + </> +)); + +const DropdownWrap = styled.div` + padding: 15px 30px 75px 30px; + + a { + color: inherit; + } + + li { + margin: 8px 0; + } +`; + +const StyledGrid = styled(WrapGrid.withComponent('ul'))` + li { + width: 50%; + flex-shrink: 0; + } +`; + +const StyledWrap = styled(FlexWrap)` + padding-top: 20px; + margin-top: 30px; + position: relative; + + &:before { + content: ''; + width: 100%; + height: 1px; + background-color: ${props => props.theme.dropdownColor}; + opacity: 0.15; + position: absolute; + top: 0; + left: 0; + } +`; + +const StyledLink = styled(Button)` + width: 100%; + position: absolute; + bottom: 0; + left: 0; +`; diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx new file mode 100644 index 000000000..886cee44a --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -0,0 +1,48 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; + +const navData = [ + { + title: '0x Instant', + description: 'Simple crypto purchasing', + url: WebsitePaths.Instant, + }, + { + title: '0x Launch Kit', + description: 'Build on the 0x protocol', + url: WebsitePaths.LaunchKit, + }, +]; + +export const DropdownProducts: React.FunctionComponent<{}> = () => ( + <List> + {_.map(navData, (item, index) => ( + <li key={`productLink-${index}`}> + <Link to={item.url}> + <Heading asElement="h3" color="inherit" isNoMargin={true} size="small"> + {item.title} + </Heading> + + {item.description && ( + <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}> + {item.description} + </Paragraph> + )} + </Link> + </li> + ))} + </List> +); + +const List = styled.ul` + a { + padding: 15px 30px; + display: block; + color: inherit; + } +`; |