feat(website): implement rest of links
This commit is contained in:
Brandon Millman
@@ -6,63 +6,65 @@ import { Image } from 'ts/components/ui/image';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { ScreenWidths } from 'ts/types';
|
||||
import { utils } from 'ts/utils/utils';
|
||||
|
||||
export interface FeatureProps {
|
||||
screenWidth: ScreenWidths;
|
||||
onGetStartedClick: () => void;
|
||||
}
|
||||
|
||||
export const Features = (props: FeatureProps) => (
|
||||
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_1.svg"
|
||||
title="Support ERC-20 and ERC-721 tokens"
|
||||
description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
|
||||
linkInfos={[
|
||||
{
|
||||
displayText: 'Get started',
|
||||
linkSrc: 'google.com',
|
||||
},
|
||||
{
|
||||
displayText: 'Explore the docs',
|
||||
linkSrc: 'google.com',
|
||||
},
|
||||
]}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_2.svg"
|
||||
title="Generate revenue for your business"
|
||||
description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp."
|
||||
linkInfos={[
|
||||
{
|
||||
displayText: 'Learn about affiliate fees',
|
||||
linkSrc: 'google.com',
|
||||
},
|
||||
]}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_3.svg"
|
||||
title="Easy and Flexible Integration"
|
||||
description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
|
||||
linkInfos={[
|
||||
{
|
||||
displayText: 'Explore AssetBuyer',
|
||||
linkSrc: 'google.com',
|
||||
},
|
||||
{
|
||||
displayText: 'Learn about liquidity',
|
||||
linkSrc: 'google.com',
|
||||
},
|
||||
]}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
export const Features = (props: FeatureProps) => {
|
||||
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
|
||||
const getStartedLinkInfo = {
|
||||
displayText: 'Get started',
|
||||
onClick: props.onGetStartedClick,
|
||||
};
|
||||
const exploreTheDocsLinkInfo = {
|
||||
displayText: 'Explore the docs',
|
||||
linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`,
|
||||
};
|
||||
const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo];
|
||||
return (
|
||||
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_1.svg"
|
||||
title="Support ERC-20 and ERC-721 tokens"
|
||||
description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
|
||||
linkInfos={tokenLinkInfos}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_2.svg"
|
||||
title="Generate revenue for your business"
|
||||
description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp."
|
||||
linkInfos={[
|
||||
{
|
||||
displayText: 'Learn about affiliate fees',
|
||||
linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`,
|
||||
},
|
||||
]}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
<FeatureItem
|
||||
imgSrc="images/instant/feature_3.svg"
|
||||
title="Easy and Flexible Integration"
|
||||
description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
|
||||
linkInfos={[
|
||||
{
|
||||
displayText: 'Explore AssetBuyer',
|
||||
linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`,
|
||||
},
|
||||
]}
|
||||
screenWidth={props.screenWidth}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
interface LinkInfo {
|
||||
displayText: string;
|
||||
linkSrc: string;
|
||||
linkSrc?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
interface FeatureItemProps {
|
||||
@@ -95,7 +97,11 @@ const FeatureItem = (props: FeatureItemProps) => {
|
||||
<Container className="flex" marginTop="28px">
|
||||
{_.map(linkInfos, linkInfo => {
|
||||
const onClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
window.open(linkInfo.linkSrc, '_blank');
|
||||
if (!_.isUndefined(linkInfo.onClick)) {
|
||||
linkInfo.onClick();
|
||||
} else if (!_.isUndefined(linkInfo.linkSrc)) {
|
||||
utils.openUrl(linkInfo.linkSrc);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Container
|
||||
|
||||
@@ -56,18 +56,18 @@ export class Instant extends React.Component<InstantProps, InstantState> {
|
||||
isNightVersion={true}
|
||||
/>
|
||||
<Container backgroundColor={colors.instantPrimaryBackground} />
|
||||
<Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onHeaderCTAClick} />
|
||||
<Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onGetStartedClick} />
|
||||
<Screenshots screenWidth={this.props.screenWidth} />
|
||||
<Features screenWidth={this.props.screenWidth} />
|
||||
<Features screenWidth={this.props.screenWidth} onGetStartedClick={this._onGetStartedClick} />
|
||||
{!this._isSmallScreen() && <Configurator hash={CONFIGURATOR_HASH} />}
|
||||
<NeedMore screenWidth={this.props.screenWidth} />
|
||||
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
private readonly _onHeaderCTAClick = () => {
|
||||
private readonly _onGetStartedClick = () => {
|
||||
if (this._isSmallScreen()) {
|
||||
utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#About`);
|
||||
utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`);
|
||||
} else {
|
||||
this._scrollToConfigurator();
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ import { Container } from 'ts/components/ui/container';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { ScreenWidths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { utils } from 'ts/utils/utils';
|
||||
|
||||
export interface NeedMoreProps {
|
||||
screenWidth: ScreenWidths;
|
||||
@@ -32,11 +34,18 @@ export const NeedMore = (props: NeedMoreProps) => {
|
||||
backgroundColor={colors.white}
|
||||
fontColor={backgroundColor}
|
||||
fontSize="18px"
|
||||
onClick={onGetInTouchClick}
|
||||
>
|
||||
Get in Touch
|
||||
</Button>
|
||||
</Container>
|
||||
<Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
|
||||
<Button
|
||||
type="button"
|
||||
backgroundColor={colors.mediumBlue}
|
||||
fontColor={colors.white}
|
||||
fontSize="18px"
|
||||
onClick={onDocsClick}
|
||||
>
|
||||
Explore the Docs
|
||||
</Button>
|
||||
</Container>
|
||||
@@ -44,3 +53,10 @@ export const NeedMore = (props: NeedMoreProps) => {
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const onGetInTouchClick = () => {
|
||||
utils.openUrl(constants.URL_ZEROEX_CHAT);
|
||||
};
|
||||
const onDocsClick = () => {
|
||||
utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user