aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-03-03 13:07:00 +0800
committerGitHub <noreply@github.com>2018-03-03 13:07:00 +0800
commit4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3 (patch)
tree93f15ba9ad448d9390db38b76c601ac41e4f4eeb /packages
parent4a57f2a762619932a882d08e62006e83a584a684 (diff)
parent212d680a477917817138790560d88d06cea5ec6f (diff)
downloaddexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar.gz
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar.bz2
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar.lz
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar.xz
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.tar.zst
dexon-sol-tools-4dbb2ed167ff93cc5e5bb0daea5a272eef01baf3.zip
Merge pull request #427 from 0xProject/fix/doc_bugs
Miscellaneous Doc Fixes
Diffstat (limited to 'packages')
-rw-r--r--packages/website/md/docs/connect/installation.md2
-rw-r--r--packages/website/package.json4
-rw-r--r--packages/website/public/images/doc_icons/connect.pngbin361 -> 289 bytes
-rw-r--r--packages/website/public/images/doc_icons/contracts.pngbin1104 -> 930 bytes
-rw-r--r--packages/website/public/images/doc_icons/zeroExJs.pngbin1318 -> 1209 bytes
-rw-r--r--packages/website/ts/blockchain.ts10
-rw-r--r--packages/website/ts/containers/about.ts (renamed from packages/website/ts/containers/about.tsx)0
-rw-r--r--packages/website/ts/containers/connect_documentation.ts (renamed from packages/website/ts/containers/connect_documentation.tsx)0
-rw-r--r--packages/website/ts/containers/faq.ts (renamed from packages/website/ts/containers/faq.tsx)0
-rw-r--r--packages/website/ts/containers/generate_order_form.ts (renamed from packages/website/ts/containers/generate_order_form.tsx)0
-rw-r--r--packages/website/ts/containers/landing.ts (renamed from packages/website/ts/containers/landing.tsx)0
-rw-r--r--packages/website/ts/containers/not_found.ts (renamed from packages/website/ts/containers/not_found.tsx)0
-rw-r--r--packages/website/ts/containers/portal.ts (renamed from packages/website/ts/containers/portal.tsx)0
-rw-r--r--packages/website/ts/containers/smart_contracts_documentation.ts (renamed from packages/website/ts/containers/smart_contracts_documentation.tsx)0
-rw-r--r--packages/website/ts/containers/wiki.ts (renamed from packages/website/ts/containers/wiki.tsx)0
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.ts (renamed from packages/website/ts/containers/zero_ex_js_documentation.tsx)0
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx2
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx26
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx5
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx6
-rw-r--r--packages/website/ts/pages/shared/markdown_link_block.tsx46
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx10
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx6
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx15
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx7
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx23
-rw-r--r--packages/website/ts/utils/configs.ts2
-rw-r--r--packages/website/ts/utils/utils.ts27
28 files changed, 130 insertions, 61 deletions
diff --git a/packages/website/md/docs/connect/installation.md b/packages/website/md/docs/connect/installation.md
index 184fa6e0d..950bf92ca 100644
--- a/packages/website/md/docs/connect/installation.md
+++ b/packages/website/md/docs/connect/installation.md
@@ -12,4 +12,4 @@ import { HttpClient } from '@0xproject/connect';
### Wiki
-Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial:-Connect) for information on how to integrate relayers into your application.
+Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial) for information on how to integrate relayers into your application.
diff --git a/packages/website/package.json b/packages/website/package.json
index ceb3853f9..07122cc7c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -43,10 +43,10 @@
"react-document-title": "^2.0.3",
"react-dom": "15.6.1",
"react-ga": "^2.4.1",
- "react-highlight": "^0.10.0",
+ "react-highlight": "0xproject/react-highlight",
"react-html5video": "^2.1.0",
"react-inlinesvg": "^0.5.5",
- "react-markdown": "^2.5.0",
+ "react-markdown": "^3.2.2",
"react-recaptcha": "^2.3.2",
"react-redux": "^5.0.3",
"react-router-dom": "^4.1.1",
diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png
index ba9bb8a3a..244f504b3 100644
--- a/packages/website/public/images/doc_icons/connect.png
+++ b/packages/website/public/images/doc_icons/connect.png
Binary files differ
diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png
index f5c6545ca..03956f162 100644
--- a/packages/website/public/images/doc_icons/contracts.png
+++ b/packages/website/public/images/doc_icons/contracts.png
Binary files differ
diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png
index 029777ffe..fe0c49a0f 100644
--- a/packages/website/public/images/doc_icons/zeroExJs.png
+++ b/packages/website/public/images/doc_icons/zeroExJs.png
Binary files differ
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 85b4e892f..156dc44e8 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -69,14 +69,6 @@ export class Blockchain {
private _cachedProviderNetworkId: number;
private _ledgerSubprovider: LedgerWalletSubprovider;
private _defaultGasPrice: BigNumber;
- private static async _onPageLoadAsync(): Promise<void> {
- if (document.readyState === 'complete') {
- return; // Already loaded
- }
- return new Promise<void>((resolve, reject) => {
- window.onload = () => resolve();
- });
- }
private static _getNameGivenProvider(provider: Web3.Provider): string {
if (!_.isUndefined((provider as any).isMetaMask)) {
return constants.PROVIDER_NAME_METAMASK;
@@ -710,7 +702,7 @@ export class Blockchain {
return tokenByAddress;
}
private async _onPageLoadInitFireAndForgetAsync() {
- await Blockchain._onPageLoadAsync(); // wait for page to load
+ await utils.onPageLoadAsync(); // wait for page to load
// Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
// order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
diff --git a/packages/website/ts/containers/about.tsx b/packages/website/ts/containers/about.ts
index ce8fd3afb..ce8fd3afb 100644
--- a/packages/website/ts/containers/about.tsx
+++ b/packages/website/ts/containers/about.ts
diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.ts
index 464bdcd74..464bdcd74 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.ts
diff --git a/packages/website/ts/containers/faq.tsx b/packages/website/ts/containers/faq.ts
index b539e33c9..b539e33c9 100644
--- a/packages/website/ts/containers/faq.tsx
+++ b/packages/website/ts/containers/faq.ts
diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.ts
index 8c5deb690..8c5deb690 100644
--- a/packages/website/ts/containers/generate_order_form.tsx
+++ b/packages/website/ts/containers/generate_order_form.ts
diff --git a/packages/website/ts/containers/landing.tsx b/packages/website/ts/containers/landing.ts
index a620bb12e..a620bb12e 100644
--- a/packages/website/ts/containers/landing.tsx
+++ b/packages/website/ts/containers/landing.ts
diff --git a/packages/website/ts/containers/not_found.tsx b/packages/website/ts/containers/not_found.ts
index dd151e2c8..dd151e2c8 100644
--- a/packages/website/ts/containers/not_found.tsx
+++ b/packages/website/ts/containers/not_found.ts
diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.ts
index befa16bdb..befa16bdb 100644
--- a/packages/website/ts/containers/portal.tsx
+++ b/packages/website/ts/containers/portal.ts
diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.ts
index a839529aa..a839529aa 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.tsx
+++ b/packages/website/ts/containers/smart_contracts_documentation.ts
diff --git a/packages/website/ts/containers/wiki.tsx b/packages/website/ts/containers/wiki.ts
index 2cb87d0a1..2cb87d0a1 100644
--- a/packages/website/ts/containers/wiki.tsx
+++ b/packages/website/ts/containers/wiki.ts
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.ts
index 500bf8d96..500bf8d96 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 23cfd96bd..5f177e97e 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -15,7 +15,7 @@ const defaultProps = {
export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
return (
<div className={`${props.className} comment`}>
- <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+ <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
</div>
);
};
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 7eed78fc3..699bef7a8 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -29,11 +29,11 @@ import {
TypescriptMethod,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const TOP_BAR_HEIGHT = 60;
-const SCROLL_TOP_ID = 'docsScrollTop';
const networkNameToColor: { [network: string]: string } = {
[Networks.Kovan]: colors.purple,
@@ -76,7 +76,8 @@ const styles: Styles = {
export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
- this._scrollToHash();
+ const hash = this.props.location.hash.slice(1);
+ utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
}
}
public render() {
@@ -115,8 +116,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
style={{ backgroundColor: colors.white }}
>
- <div id="documentation" style={styles.mainContainers} className="absolute px1">
- <div id={SCROLL_TOP_ID} />
+ <div
+ id={configs.SCROLL_CONTAINER_ID}
+ style={styles.mainContainers}
+ className="absolute px1"
+ >
+ <div id={configs.SCROLL_TOP_ID} />
{this._renderDocumentation()}
</div>
</div>
@@ -325,17 +330,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
/>
);
}
- private _scrollToHash(): void {
- const hashWithPrefix = this.props.location.hash;
- let hash = hashWithPrefix.slice(1);
- if (_.isEmpty(hash)) {
- hash = SCROLL_TOP_ID; // scroll to the top
- }
-
- scroller.scrollTo(hash, {
- duration: 0,
- offset: 0,
- containerId: 'documentation',
- });
- }
}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 0e53e38e7..e62c9ecbd 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
}
public render() {
const event = this.props.event;
+ const id = `${this.props.sectionName}-${event.name}`;
return (
<div
- id={`${this.props.sectionName}-${event.name}`}
+ id={id}
className="pb2"
style={{ overflow: 'hidden', width: '100%' }}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
<AnchorTitle
headerSize={HeaderSizes.H3}
title={`Event ${event.name}`}
- id={event.name}
+ id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
<div style={{ fontSize: 16 }}>
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index 98ca3aee6..6dfb74554 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import * as HighLight from 'react-highlight';
interface MarkdownCodeBlockProps {
- literal: string;
+ value: string;
language: string;
}
@@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
// Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
// to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
- return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+ return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
}
public render() {
return (
<span style={{ fontSize: 14 }}>
- <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
+ <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
</span>
);
}
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
new file mode 100644
index 000000000..e4553c87f
--- /dev/null
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -0,0 +1,46 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+
+interface MarkdownLinkBlockProps {
+ href: string;
+}
+
+interface MarkdownLinkBlockState {}
+
+export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
+ // Re-rendering a linkBlock causes it to remain unclickable.
+ // We therefore noop re-renders on this component if it's props haven't changed.
+ public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
+ return nextProps.href !== this.props.href;
+ }
+ public render() {
+ const href = this.props.href;
+ const isLinkToSection = _.startsWith(href, '#');
+ // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
+ if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
+ return (
+ <a href={href} target="_blank" rel="nofollow noreferrer noopener">
+ {this.props.children}
+ </a>
+ );
+ } else if (isLinkToSection) {
+ return (
+ <a
+ style={{ cursor: 'pointer', textDecoration: 'underline' }}
+ onClick={this._onHashUrlClick.bind(this, href)}
+ >
+ {this.props.children}
+ </a>
+ );
+ } else {
+ return <a href={href}>{this.props.children}</a>;
+ }
+ }
+ private _onHashUrlClick(href: string) {
+ const hash = href.split('#')[1];
+ utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+ utils.setUrlHash(hash);
+ }
+}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 4d7d8b4ca..7253072d9 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown';
import { Element as ScrollElement } from 'react-scroll';
import { AnchorTitle } from 'ts/pages/shared/anchor_title';
import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
+import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
import { HeaderSizes } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
@@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
</div>
</div>
<hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
- <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+ <ReactMarkdown
+ source={this.props.markdownContent}
+ escapeHtml={false}
+ renderers={{
+ code: MarkdownCodeBlock,
+ link: MarkdownLinkBlock,
+ }}
+ />
</ScrollElement>
</div>
);
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 1a08ca9f9..82a40eb7e 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -86,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
docs
</div>
</div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}>
+ <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
|
</div>
<div className="flex">
<div>
- <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" />
+ <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
</div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+ <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
{this.props.title}
</div>
</div>
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index a5f5f52cf..52a1f30d9 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { Element as ScrollElement } from 'react-scroll';
import { AnchorTitle } from 'ts/pages/shared/anchor_title';
import { HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface SectionHeaderProps {
@@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
<ScrollElement name={id}>
<AnchorTitle
headerSize={this.props.headerSize}
- title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
+ title={
+ <span
+ style={{
+ textTransform: 'uppercase',
+ color: colors.grey,
+ fontFamily: 'Roboto Mono',
+ fontWeight: 300,
+ fontSize: 27,
+ }}
+ >
+ {sectionName}
+ </span>
+ }
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 3b331af9b..1b4dbb375 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
+import { utils } from 'ts/utils/utils';
interface VersionDropDownProps {
selectedVersion: string;
@@ -31,8 +32,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
return items;
}
private _updateSelectedVersion(e: any, index: number, semver: string) {
- const port = window.location.port;
- const hasPort = !_.isUndefined(port);
let path = window.location.pathname;
const lastChar = path[path.length - 1];
if (_.isFinite(_.parseInt(lastChar))) {
@@ -40,7 +39,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
pathSections.pop();
path = pathSections.join('/');
}
- const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}${path}`;
- window.location.href = `${baseUrl}/${semver}${window.location.hash}`;
+ const baseUrl = utils.getCurrentBaseUrl();
+ window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
}
}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 56c3be0fe..4bb6052a2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}}
>
<div
- id="documentation"
+ id={configs.SCROLL_CONTAINER_ID}
style={{ ...mainContainersStyle, overflow: 'auto' }}
className="absolute"
>
- <div id="0xProtocolWiki" />
+ <div id={configs.SCROLL_TOP_ID} />
<div id="wiki" style={{ paddingRight: 2 }}>
{this._renderWikiArticles()}
</div>
@@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
</div>
);
}
- private _scrollToHash(): void {
- const hashWithPrefix = this.props.location.hash;
- let hash = hashWithPrefix.slice(1);
- if (_.isEmpty(hash)) {
- hash = '0xProtocolWiki'; // scroll to the top
- }
-
- scroller.scrollTo(hash, {
- duration: 0,
- offset: 0,
- containerId: 'documentation',
- });
- }
private async _fetchArticlesBySectionAsync(): Promise<void> {
const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
const response = await fetch(endpoint);
@@ -224,8 +211,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
{
articlesBySection,
},
- () => {
- this._scrollToHash();
+ async () => {
+ await utils.onPageLoadAsync();
+ const hash = this.props.location.hash.slice(1);
+ utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
},
);
}
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 7e9ba69de..388fc8530 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -94,6 +94,8 @@ export const configs = {
[3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
[4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
} as PublicNodeUrlsByNetworkId,
+ SCROLL_CONTAINER_ID: 'documentation',
+ SCROLL_TOP_ID: 'pageScrollTop',
SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index c38f84c92..a1e045af7 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,6 +4,7 @@ import deepEqual = require('deep-equal');
import isMobile = require('is-mobile');
import * as _ from 'lodash';
import * as moment from 'moment';
+import { scroller } from 'react-scroll';
import {
EtherscanLinkSuffixes,
Networks,
@@ -290,4 +291,30 @@ export const utils = {
);
return isTestNetwork;
},
+ getCurrentBaseUrl() {
+ const port = window.location.port;
+ const hasPort = !_.isUndefined(port);
+ const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+ return baseUrl;
+ },
+ scrollToHash(hash: string, containerId: string): void {
+ let finalHash = hash;
+ if (_.isEmpty(hash)) {
+ finalHash = configs.SCROLL_TOP_ID; // scroll to the top
+ }
+
+ scroller.scrollTo(finalHash, {
+ duration: 0,
+ offset: 0,
+ containerId,
+ });
+ },
+ async onPageLoadAsync(): Promise<void> {
+ if (document.readyState === 'complete') {
+ return; // Already loaded
+ }
+ return new Promise<void>((resolve, reject) => {
+ window.onload = () => resolve();
+ });
+ },
};