aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-02-09 08:27:37 +0800
committerFabio Berger <me@fabioberger.com>2018-02-09 08:27:37 +0800
commit0652790703e9b4d8e96db26c34e389e5602eb410 (patch)
tree607524e39cf4440b78961c971795bbfa7dbeb4a5 /packages/website/ts
parent254d3f53e2cd09eed3eb6b8ce841f546d01dcdcd (diff)
downloaddexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar.gz
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar.bz2
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar.lz
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar.xz
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.tar.zst
dexon-sol-tools-0652790703e9b4d8e96db26c34e389e5602eb410.zip
Add Relayer section to landing
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/landing/landing.tsx146
-rw-r--r--packages/website/ts/utils/constants.ts1
2 files changed, 81 insertions, 66 deletions
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b0c622fb4..fc943dce8 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_DYDX,
+ },
+ {
+ logoFileName: 'ddex.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'decent_ex.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'dextroid.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'ercdex.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'open_relay.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ 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)}
{this._renderTokenizationSection()}
{this._renderProtocolSection()}
+ {this._renderProjects(relayerProjects, 'Relayers building on 0x', colors.heroGrey)}
{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) {
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 = isRelayersOnly ? 4 : 4;
+ break;
+
+ case ScreenWidths.Md:
+ colWidth = isRelayersOnly ? 3 : 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" 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
+ {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}
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3df4c9370..5bdf2ce8d 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -63,6 +63,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',