aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-08-27 19:17:23 +0800
committerFabio Berger <me@fabioberger.com>2018-08-27 19:17:23 +0800
commita26237da6600386dabf2b3e2c94a00ac196bc778 (patch)
tree5f627159a5cab6269884f0e1f655915cfd0b6219
parent791eae24c0c38368eecf3be4b9c1f162a29ca065 (diff)
downloaddexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.gz
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.bz2
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.lz
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.xz
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.zst
dexon-sol-tools-a26237da6600386dabf2b3e2c94a00ac196bc778.zip
Implement Developers dropdown
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx180
-rw-r--r--packages/website/ts/utils/constants.ts1
2 files changed, 181 insertions, 0 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
new file mode 100644
index 000000000..3ab8af2b3
--- /dev/null
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,180 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { DropDown } from 'ts/components/ui/drop_down';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface KeyToLinkInfo {
+ [key: string]: LinkInfo;
+}
+
+interface LinkInfo {
+ link: string;
+ shouldOpenNewTab: boolean;
+}
+
+const gettingStartedKeyToLinkInfo1: KeyToLinkInfo = {
+ [Key.BuildARelayer]: {
+ link: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+ shouldOpenNewTab: false,
+ },
+ [Key.IntroTutorial]: {
+ link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+ shouldOpenNewTab: false,
+ },
+};
+const gettingStartedKeyToLinkInfo2: KeyToLinkInfo = {
+ [Key.TradingTutorial]: {
+ link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+ shouldOpenNewTab: false,
+ },
+ [Key.EthereumDevelopment]: {
+ link: `${WebsitePaths.Wiki}#Ethereum-Development`,
+ shouldOpenNewTab: false,
+ },
+};
+const popularDocsToLinkInfos: KeyToLinkInfo = {
+ [Key.ZeroExJs]: {
+ link: WebsitePaths.ZeroExJs,
+ shouldOpenNewTab: false,
+ },
+ [Key.Connect]: {
+ link: WebsitePaths.Connect,
+ shouldOpenNewTab: false,
+ },
+ [Key.SmartContract]: {
+ link: WebsitePaths.SmartContracts,
+ shouldOpenNewTab: false,
+ },
+};
+const usefulLinksToLinkInfo: KeyToLinkInfo = {
+ [Key.Github]: {
+ link: constants.URL_GITHUB_ORG,
+ shouldOpenNewTab: true,
+ },
+ [Key.Whitepaper]: {
+ link: WebsitePaths.Whitepaper,
+ shouldOpenNewTab: true,
+ },
+ [Key.Sandbox]: {
+ link: constants.URL_SANDBOX,
+ shouldOpenNewTab: true,
+ },
+};
+
+interface DevelopersDropDownProps {
+ translate: Translate;
+ menuItemStyles: React.CSSProperties;
+ menuIconStyle: React.CSSProperties;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = (
+ <div className="flex relative" style={{ color: this.props.menuIconStyle.color }}>
+ <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
+ </div>
+ );
+ return (
+ <DropDown
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ style={this.props.menuItemStyles}
+ popoverStyle={{ borderRadius: 4, width: 433, height: 373, marginTop: 10 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const dropdownMenu = (
+ <div>
+ <div style={{ padding: '1.75rem' }}>
+ {this._renderTitle('Getting started')}
+ <div className="flex">
+ <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div>
+ <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div>
+ </div>
+ </div>
+ <div
+ style={{
+ width: '100%',
+ height: 1,
+ backgroundColor: colors.grey300,
+ }}
+ />
+ <div className="flex" style={{ padding: '1.75rem' }}>
+ <div className="pr4 mr2">
+ <div>{this._renderTitle('Popular docs')}</div>
+ <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div>
+ </div>
+ <div>
+ <div>{this._renderTitle('Useful links')}</div>
+ <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div>
+ </div>
+ </div>
+ <div
+ style={{
+ padding: '1.125rem',
+ textAlign: 'center',
+ backgroundColor: '#EDEDED',
+ borderBottomLeftRadius: 4,
+ borderBottomRightRadius: 4,
+ }}
+ >
+ <Link
+ to={WebsitePaths.ZeroExJs/* TODO: Update once we have overview page */}
+ className="text-decoration-none"
+ style={{
+ color: colors.lightBlueA700,
+ fontWeight: 'bold',
+ fontSize: 14,
+ }}
+ >
+ VIEW ALL DOCUMENTATION
+ </Link>
+ </div>
+ </div>
+ );
+ return dropdownMenu;
+ }
+ private _renderTitle(title: string): React.ReactNode {
+ return (
+ <div style={{ color: '#999999', fontSize: 14, paddingBottom: 12, fontWeight: 600, letterSpacing: 1 }}>
+ {title.toUpperCase()}
+ </div>
+ );
+ }
+ private _renderLinkSection(keyToLinkInfo: KeyToLinkInfo): React.ReactNode {
+ const linkStyle: React.CSSProperties = {
+ color: colors.lightBlueA700,
+ fontFamily: 'Roboto, Roboto Mono',
+ };
+ const numLinks = _.size(keyToLinkInfo);
+ let i = 0;
+ const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => {
+ i++;
+ const isLast = i === numLinks;
+ const linkText = this.props.translate.get(key as Key, Deco.CapWords);
+ return (
+ <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}>
+ {linkInfo.shouldOpenNewTab ? (
+ <a target="_blank" className="text-decoration-none" style={linkStyle} href={linkInfo.link}>
+ {linkText}
+ </a>
+ ) : (
+ <Link to={linkInfo.link} className="text-decoration-none" style={linkStyle}>
+ {linkText}
+ </Link>
+ )}
+ </div>
+ );
+ });
+ return <div>{links}</div>;
+ }
+}
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 005d17823..2b4aa5209 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -83,6 +83,7 @@ export const constants = {
URL_PARITY_CHROME_STORE:
'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
URL_REDDIT: 'https://reddit.com/r/0xproject',
+ URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j',
URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
URL_TWITTER: 'https://twitter.com/0xproject',
URL_WETH_IO: 'https://weth.io/',