aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/dropdowns
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-12-21 07:21:28 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-12-21 07:21:28 +0800
commit56af9b2aab26fd6a774d0b345ce8e1441bb1a9e0 (patch)
tree54ed033d1d080bcf6212ce697dffa6f427b1b020 /packages/website/ts/@next/components/dropdowns
parentb399aa25aa9386d388d31edb463e803c7c31a2db (diff)
parent0a84ee748823e5099b0767eedc5de95c71cb8f4e (diff)
downloaddexon-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.tsx180
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx48
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;
+ }
+`;