aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/instant/features.tsx106
-rw-r--r--packages/website/ts/pages/instant/instant.tsx8
-rw-r--r--packages/website/ts/pages/instant/need_more.tsx18
3 files changed, 77 insertions, 55 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 73be793d5..9c1668c1c 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -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
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index b758ef162..fa6bd1c33 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -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();
}
diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx
index 190b27f9a..e6d5c3694 100644
--- a/packages/website/ts/pages/instant/need_more.tsx
+++ b/packages/website/ts/pages/instant/need_more.tsx
@@ -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`);
+};
generated by cgit (git 2.34.1) at 2024-11-19 11:47:58 +0800