aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-02-09 10:41:16 +0800
committerGitHub <noreply@github.com>2018-02-09 10:41:16 +0800
commit7e04c4f24b789a2ce8f4a5884212cfb1e508b508 (patch)
tree70fc86d2a9ac37297f52d320b20786a0de88e144
parent9c934d903d00c1f80a9741acd562217acd5ae212 (diff)
parent9495c8f46cf336d4f6ffef73040048683baf974b (diff)
downloaddexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar.gz
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar.bz2
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar.lz
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar.xz
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.tar.zst
dexon-sol-tools-7e04c4f24b789a2ce8f4a5884212cfb1e508b508.zip
Merge pull request #383 from 0xProject/fix/website/addMoreRelayersLanding
Add relayers section to landing page
-rw-r--r--packages/website/public/images/landing/project_logos/amadeus.pngbin0 -> 6156 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/ddex.pngbin0 -> 5504 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/decent_ex.pngbin0 -> 5100 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/dextroid.pngbin0 -> 5609 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/ercdex.pngbin0 -> 5726 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/ethfinex-top.pngbin4376 -> 0 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/ethfinex.pngbin0 -> 5486 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/idt.pngbin0 -> 3154 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/open_relay.pngbin0 -> 6149 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/paradex.pngbin0 -> 5725 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/paradex_top.pngbin5109 -> 0 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/radar_relay.pngbin0 -> 5748 bytes
-rw-r--r--packages/website/public/images/landing/project_logos/radar_relay_top.pngbin4898 -> 0 bytes
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx10
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx18
-rw-r--r--packages/website/ts/pages/landing/landing.tsx160
-rw-r--r--packages/website/ts/utils/constants.ts7
17 files changed, 124 insertions, 71 deletions
diff --git a/packages/website/public/images/landing/project_logos/amadeus.png b/packages/website/public/images/landing/project_logos/amadeus.png
new file mode 100644
index 000000000..e3926b79f
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/amadeus.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/ddex.png b/packages/website/public/images/landing/project_logos/ddex.png
new file mode 100644
index 000000000..a1a8def26
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ddex.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/decent_ex.png b/packages/website/public/images/landing/project_logos/decent_ex.png
new file mode 100644
index 000000000..1fac76947
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/decent_ex.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/dextroid.png b/packages/website/public/images/landing/project_logos/dextroid.png
new file mode 100644
index 000000000..5fdcd7f8e
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/dextroid.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/ercdex.png b/packages/website/public/images/landing/project_logos/ercdex.png
new file mode 100644
index 000000000..1367837e0
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ercdex.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/ethfinex-top.png b/packages/website/public/images/landing/project_logos/ethfinex-top.png
deleted file mode 100644
index 5eda914ca..000000000
--- a/packages/website/public/images/landing/project_logos/ethfinex-top.png
+++ /dev/null
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/ethfinex.png b/packages/website/public/images/landing/project_logos/ethfinex.png
new file mode 100644
index 000000000..5aa0c556f
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ethfinex.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/idt.png b/packages/website/public/images/landing/project_logos/idt.png
new file mode 100644
index 000000000..859c289d2
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/idt.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/open_relay.png b/packages/website/public/images/landing/project_logos/open_relay.png
new file mode 100644
index 000000000..fa1853df6
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/open_relay.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/paradex.png b/packages/website/public/images/landing/project_logos/paradex.png
new file mode 100644
index 000000000..7948eb938
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/paradex.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/paradex_top.png b/packages/website/public/images/landing/project_logos/paradex_top.png
deleted file mode 100644
index 3fe9472b9..000000000
--- a/packages/website/public/images/landing/project_logos/paradex_top.png
+++ /dev/null
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/radar_relay.png b/packages/website/public/images/landing/project_logos/radar_relay.png
new file mode 100644
index 000000000..af0e610f8
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/radar_relay.png
Binary files differ
diff --git a/packages/website/public/images/landing/project_logos/radar_relay_top.png b/packages/website/public/images/landing/project_logos/radar_relay_top.png
deleted file mode 100644
index 737159959..000000000
--- a/packages/website/public/images/landing/project_logos/radar_relay_top.png
+++ /dev/null
Binary files differ
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 1a0691e83..b1367be4f 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -169,12 +169,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
path={`${WebsitePaths.Wiki}`}
style={styles.menuItem}
isNightVersion={isNightVersion}
+ isExternal={false}
+ />
+ <TopBarMenuItem
+ title="Blog"
+ path={constants.URL_BLOG}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ isExternal={true}
/>
<TopBarMenuItem
title="About"
path={`${WebsitePaths.About}`}
style={styles.menuItem}
isNightVersion={isNightVersion}
+ isExternal={false}
/>
<TopBarMenuItem
title="Portal DApp"
@@ -183,6 +192,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
style={styles.menuItem}
className={`${isFullWidthPage && 'md-hide'}`}
isNightVersion={isNightVersion}
+ isExternal={false}
/>
</div>
</div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 96ee86142..983050abc 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -11,6 +11,7 @@ interface TopBarMenuItemProps {
title: string;
path?: string;
isPrimary?: boolean;
+ isExternal: boolean;
style?: React.CSSProperties;
className?: string;
isNightVersion?: boolean;
@@ -43,9 +44,20 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
className={`center ${this.props.className}`}
style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
>
- <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
- {this.props.title}
- </Link>
+ {this.props.isExternal ? (
+ <a
+ className="text-decoration-none"
+ style={{ color: linkColor }}
+ target="_blank"
+ href={this.props.path}
+ >
+ {this.props.title}
+ </a>
+ ) : (
+ <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
+ {this.props.title}
+ </Link>
+ )}
</div>
);
}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b0c622fb4..d4c934459 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -65,17 +65,17 @@ const boxContents: BoxContent[] = [
},
];
-const projects: Project[] = [
+const relayersAndDappProjects: Project[] = [
{
- logoFileName: 'ethfinex-top.png',
+ logoFileName: 'ethfinex.png',
projectUrl: constants.PROJECT_URL_ETHFINEX,
},
{
- logoFileName: 'radar_relay_top.png',
+ logoFileName: 'radar_relay.png',
projectUrl: constants.PROJECT_URL_RADAR_RELAY,
},
{
- logoFileName: 'paradex_top.png',
+ logoFileName: 'paradex.png',
projectUrl: constants.PROJECT_URL_PARADEX,
},
{
@@ -132,6 +132,57 @@ const projects: Project[] = [
},
];
+const relayerProjects: Project[] = [
+ {
+ logoFileName: 'ethfinex.png',
+ projectUrl: constants.PROJECT_URL_ETHFINEX,
+ },
+ {
+ logoFileName: 'radar_relay.png',
+ projectUrl: constants.PROJECT_URL_RADAR_RELAY,
+ },
+ {
+ logoFileName: 'paradex.png',
+ projectUrl: constants.PROJECT_URL_PARADEX,
+ },
+ {
+ logoFileName: 'the_ocean.png',
+ projectUrl: constants.PROJECT_URL_0CEAN,
+ },
+ {
+ logoFileName: 'dydx.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'amadeus.png',
+ projectUrl: constants.PROJECT_URL_AMADEUS,
+ },
+ {
+ logoFileName: 'ddex.png',
+ projectUrl: constants.PROJECT_URL_DDEX,
+ },
+ {
+ logoFileName: 'decent_ex.png',
+ projectUrl: constants.PROJECT_URL_DECENT_EX,
+ },
+ {
+ logoFileName: 'dextroid.png',
+ projectUrl: constants.PROJECT_URL_DEXTROID,
+ },
+ {
+ logoFileName: 'ercdex.png',
+ projectUrl: constants.PROJECT_URL_ERC_DEX,
+ },
+ {
+ logoFileName: 'open_relay.png',
+ projectUrl: constants.PROJECT_URL_OPEN_RELAY,
+ },
+ {
+ logoFileName: 'idt.png',
+ projectUrl: constants.PROJECT_URL_IDT,
+ },
+];
+
export interface LandingProps {
location: Location;
}
@@ -167,9 +218,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
style={{ backgroundColor: colors.heroGrey, position: 'relative' }}
/>
{this._renderHero()}
- {this._renderProjects()}
+ {this._renderProjects(relayersAndDappProjects, 'Projects building on 0x', colors.projectsGrey, false)}
{this._renderTokenizationSection()}
{this._renderProtocolSection()}
+ {this._renderProjects(relayerProjects, 'Relayers building on 0x', colors.heroGrey, true)}
{this._renderInfoBoxes()}
{this._renderBuildingBlocksSection()}
{this._renderUseCases()}
@@ -259,11 +311,25 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
- private _renderProjects() {
+ private _renderProjects(projects: Project[], title: string, backgroundColor: string, isTitleCenter: boolean) {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
const projectList = _.map(projects, (project: Project, i: number) => {
- const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2;
+ const isRelayersOnly = projects.length === 12;
+ let colWidth: number;
+ switch (this.state.screenWidth) {
+ case ScreenWidths.Sm:
+ colWidth = 4;
+ break;
+
+ case ScreenWidths.Md:
+ colWidth = 3;
+ break;
+
+ case ScreenWidths.Lg:
+ colWidth = isRelayersOnly ? 2 : 2 - i % 2;
+ break;
+ }
return (
<div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
<div>
@@ -285,10 +351,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
letterSpacing: 3,
};
return (
- <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}>
+ <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}>
<div className="mx-auto max-width-4 clearfix sm-px3">
- <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}>
- Projects building on 0x
+ <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}>
+ {title}
</div>
<div className="clearfix">{projectList}</div>
<div
@@ -319,7 +385,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
<div className="mx-auto max-width-4 py4 clearfix">
{isSmallScreen && this._renderTokenCloud()}
- <div className="col lg-col-6 md-col-6 col-12">
+ <div className="col lg-col-6 md-col-6 col-12" style={{ color: colors.darkestGrey }}>
<div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}>
<div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
The world's value is becoming tokenized
@@ -358,16 +424,15 @@ export class Landing extends React.Component<LandingProps, LandingState> {
private _renderProtocolSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
- <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
- <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
+ <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="mx-auto max-width-4 pt4 clearfix">
<div className="col lg-col-6 md-col-6 col-12 sm-center">
<img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
</div>
<div
- className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
+ className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto lg-pt4 md-pt4 lg-mt3 md-mt3"
style={{
color: colors.beigeWhite,
- paddingTop: 8,
maxWidth: isSmallScreen ? 'none' : 445,
}}
>
@@ -388,57 +453,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time
they facilitate a trade. Anyone can build a relayer.
</div>
- <div
- className="pt3 sm-mx-auto sm-px3"
- style={{
- color: colors.landingLinkGrey,
- maxWidth: isSmallScreen ? 412 : 'none',
- }}
- >
- <div className="flex" style={{ fontSize: 18 }}>
- <div
- className="lg-h4 md-h4 sm-h5"
- style={{
- letterSpacing: isSmallScreen ? 1 : 3,
- fontFamily: 'Roboto Mono',
- }}
- >
- RELAYERS BUILDING ON 0X
- </div>
- <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}>
- <Link
- to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
- className="text-decoration-none underline"
- style={{
- color: colors.landingLinkGrey,
- fontFamily: 'Roboto Mono',
- }}
- >
- view all
- </Link>
- </div>
- </div>
- <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}>
- <div className="col col-4 sm-center">
- <img
- src="/images/landing/ethfinex.png"
- style={{ height: isSmallScreen ? 85 : 107 }}
- />
- </div>
- <div className="col col-4 center">
- <img
- src="/images/landing/radar_relay.png"
- style={{ height: isSmallScreen ? 85 : 107 }}
- />
- </div>
- <div className="col col-4 sm-center" style={{ textAlign: 'right' }}>
- <img
- src="/images/landing/paradex.png"
- style={{ height: isSmallScreen ? 85 : 107 }}
- />
- </div>
- </div>
- </div>
</div>
</div>
</div>
@@ -551,7 +565,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
fontFamily: 'Roboto Mono',
fontSize: 13.5,
fontWeight: 400,
- opacity: 0.75,
+ color: colors.darkestGrey,
}}
>
{assetType.title}
@@ -587,9 +601,19 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
});
+ const titleStyle: React.CSSProperties = {
+ fontFamily: 'Roboto Mono',
+ color: colors.grey,
+ textTransform: 'uppercase',
+ fontWeight: 300,
+ letterSpacing: 3,
+ };
return (
<div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
- <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
+ <div className="center pb3 pt4" style={titleStyle}>
+ Benefits of 0x
+ </div>
+ <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
{boxes}
</div>
</div>
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3df4c9370..6af821dbe 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -48,6 +48,12 @@ export const constants = {
TESTNET_NAME: 'Kovan',
TYPES_SECTION_NAME: 'types',
PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
+ PROJECT_URL_AMADEUS: 'http://amadeusrelay.org',
+ PROJECT_URL_DDEX: 'https://ddex.io',
+ PROJECT_URL_DECENT_EX: 'https://decent.exchange',
+ PROJECT_URL_DEXTROID: 'https://www.dextroid.io',
+ PROJECT_URL_ERC_DEX: 'https://ercdex.com',
+ PROJECT_URL_OPEN_RELAY: 'https://openrelay.xyz',
PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
PROJECT_URL_PARADEX: 'https://paradex.io',
PROJECT_URL_DYDX: 'https://dydx.exchange',
@@ -63,6 +69,7 @@ export const constants = {
PROJECT_URL_AUGUR: 'https://augur.net',
PROJECT_URL_AUCTUS: 'https://auctus.org',
PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
+ PROJECT_URL_IDT: 'https://kinalpha.com',
URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
URL_BITLY_API: 'https://api-ssl.bitly.com',