[WIP] Refactoring of docs pages components.
This commit is contained in:
Piotr Janosz
committed by
fabioberger
fabioberger
parent
13e262b9cf
commit
7454a7a6f3
@@ -6,7 +6,7 @@ import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
interface ICommunityLinkProps {
|
||||
export interface ICommunityLinkProps {
|
||||
heading: string;
|
||||
icon: string;
|
||||
description?: string;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import Headroom from 'react-headroom';
|
||||
import MediaQuery from 'react-responsive';
|
||||
import styled, { css, withTheme } from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { Link } from '@0x/react-shared';
|
||||
|
||||
@@ -18,7 +18,6 @@ import { WebsitePaths } from 'ts/types';
|
||||
interface IHeaderProps {
|
||||
location?: Location;
|
||||
isNavToggled?: boolean;
|
||||
// theme: ThemeValuesInterface;
|
||||
toggleMobileNav?: () => void;
|
||||
}
|
||||
|
||||
@@ -58,7 +57,7 @@ const navItems: INavItems[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const HeaderBase: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }) => {
|
||||
export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }) => {
|
||||
const onUnpin = () => {
|
||||
if (isNavToggled) {
|
||||
toggleMobileNav();
|
||||
@@ -101,8 +100,6 @@ const HeaderBase: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }) =
|
||||
);
|
||||
};
|
||||
|
||||
export const Header = withTheme(HeaderBase);
|
||||
|
||||
const NavItem: React.FC<INavLinkProps> = ({ link }) => {
|
||||
const linkElement = link.url ? (
|
||||
<StyledNavLink to={link.url}>{link.text}</StyledNavLink>
|
||||
|
||||
@@ -1,43 +1,68 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// import { Tabs } from 'react-tabs';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
|
||||
import { Note } from 'ts/components/docs/note';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { SearchInput } from 'ts/components/docs/search_input';
|
||||
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { StepLinkConfig } from 'ts/components/docs/step_link';
|
||||
import { StepLinks } from 'ts/components/docs/step_links';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
|
||||
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section, SectionProps } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
location: Location;
|
||||
theme: {
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
linkColor: string;
|
||||
export const DocsGuides: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={`Guides`} />
|
||||
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<Filters groups={filterGroups} />
|
||||
</aside>
|
||||
<article>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
</article>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
grid-column-gap: 98px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
const filterGroups: FilterGroup[] = [
|
||||
{
|
||||
@@ -81,84 +106,3 @@ const filterGroups: FilterGroup[] = [
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export class DocsGuides extends React.Component<Props> {
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={`Guides`} />
|
||||
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<Filters groups={filterGroups} />
|
||||
</aside>
|
||||
<article>
|
||||
<div>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
<Resource
|
||||
heading="0x Mesh - your gateway to networked liquidity"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
|
||||
url="/docs/guides/usage"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Columns = styled.div<{ count?: number }>`
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
grid-column-gap: 98px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
Columns.defaultProps = {
|
||||
count: 2,
|
||||
};
|
||||
|
||||
const Separator = styled.hr`
|
||||
border-width: 0 0 1px;
|
||||
border-color: #e4e4e4;
|
||||
height: 0;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
`;
|
||||
|
||||
const LargeHeading = styled(Heading).attrs({
|
||||
asElement: 'h1',
|
||||
})`
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const LargeIntro = styled(Paragraph).attrs({
|
||||
size: 'medium',
|
||||
})``;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button } from 'ts/components/button';
|
||||
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
@@ -158,7 +158,7 @@ const getStartedLinks: LinkProps[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const communityShortcuts: CommunityLinkProps[] = [
|
||||
const communityShortcuts: ICommunityLinkProps[] = [
|
||||
{
|
||||
heading: 'Discord',
|
||||
description: 'Chat with the 0x community',
|
||||
|
||||
@@ -1,19 +1,15 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// import { Tabs } from 'react-tabs';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
|
||||
import { Note } from 'ts/components/docs/note';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { ChapterLinks } from 'ts/components/docs/sidebar/chapter_links';
|
||||
import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
@@ -24,20 +20,251 @@ import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
|
||||
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section, SectionProps } from 'ts/components/newLayout';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
location: Location;
|
||||
theme: {
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
linkColor: string;
|
||||
export const DocsPageTemplate: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
|
||||
<Section maxWidth="1030px" isPadded={false} padding="0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<Filters groups={filterGroups} />
|
||||
<ChapterLinks />
|
||||
</aside>
|
||||
<article>
|
||||
<LargeHeading>Large Heading</LargeHeading>
|
||||
<LargeIntro>Larger introduction text</LargeIntro>
|
||||
<Heading asElement="h2" size="default">
|
||||
Notifications
|
||||
</Heading>
|
||||
<Notification text="This is' a pretty standard information callout" />
|
||||
<Notification text="This is an indication that something isn’t quite right" type="alert" />
|
||||
<Notification text="This is a success message" type="success" />
|
||||
<Heading asElement="h2" size="default">
|
||||
Tutorial Steps
|
||||
</Heading>
|
||||
<TutorialSteps>
|
||||
<li>Step 1</li>
|
||||
<li>Step 2</li>
|
||||
<li>Step 3</li>
|
||||
</TutorialSteps>
|
||||
<Heading asElement="h2" size="default">
|
||||
Standard Heading
|
||||
</Heading>
|
||||
<Paragraph>This would be paragraph text.</Paragraph>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
|
||||
Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
|
||||
Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
|
||||
in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
|
||||
auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
|
||||
sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<Paragraph>And here is a table:</Paragraph>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Parameter</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>makerAddress</td>
|
||||
<td>
|
||||
Address that created the order. The maker is one of the two parties that will be
|
||||
involved in the trade if the order gets filled.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>takerAddress</td>
|
||||
<td>
|
||||
Address that is allowed to fill the order. If set to 0, anyone is allowed to
|
||||
fill the order. This field allows makers to decide who can fill an order,
|
||||
rendering it useless to eavesdroppers or outside parties.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>feeRecipientAddress</td>
|
||||
<td>
|
||||
The address that will receive the fees stipulated by the order. This is
|
||||
typically used to incentivize off-chain order relay.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>senderAddress</td>
|
||||
<td>
|
||||
Is an advanced feature that can be defaulted to the 0 address. It allows the
|
||||
maker to enforce that the order must flow through some additional logic residing
|
||||
in an additional Ethereum smart contract before it can be filled (e.g a KYC
|
||||
whitelist contract) -- more on "extension contracts" later.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerAssetAmount</td>
|
||||
<td>
|
||||
Amount of the maker'sAsset being offered by the maker. Must be greater than 0.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerFee</td>
|
||||
<td>
|
||||
The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in
|
||||
the event of an order fill. Partial fills result in partial fees.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<H3>Tabbed Code Snippet</H3>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Typescript</Tab>
|
||||
<Tab>Python</Tab>
|
||||
<Tab>Solidity</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
<H3>Runnable Code Snippet</H3>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Typescript</Tab>
|
||||
<Tab>Python</Tab>
|
||||
<Tab>Solidity</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel>
|
||||
<Code isRunnable={true}>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
<H3>Subheading</H3>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
|
||||
Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
|
||||
Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
|
||||
in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
|
||||
auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
|
||||
sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<div>
|
||||
<Note
|
||||
heading="Information"
|
||||
description="This is a side-info callout used to explain things a little more when needed."
|
||||
/>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
|
||||
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
|
||||
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
|
||||
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
|
||||
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
|
||||
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
</div>
|
||||
<UnorderedList>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
</UnorderedList>
|
||||
<Heading asElement="h2" size="default">
|
||||
Next Steps
|
||||
</Heading>
|
||||
<StepLinks links={usefulLinks} />
|
||||
<HelpCallout />
|
||||
<NewsletterSignup />
|
||||
<HelpfulCta />
|
||||
<div>
|
||||
<Heading asElement="h2" size="default">
|
||||
Resources
|
||||
</Heading>
|
||||
<Resource
|
||||
heading="RadarRelay SDK"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs"
|
||||
/>
|
||||
<Resource
|
||||
heading="RadarRelay SDK"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
|
||||
url="/docs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Heading asElement="h2" size="default">
|
||||
Feature Links
|
||||
</Heading>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 230px 1fr;
|
||||
grid-column-gap: 118px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
const LargeHeading = styled(Heading).attrs({
|
||||
asElement: 'h1',
|
||||
})`
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const LargeIntro = styled(Paragraph).attrs({
|
||||
size: 'medium',
|
||||
})``;
|
||||
|
||||
const H3 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h3',
|
||||
})``;
|
||||
|
||||
const usefulLinks: StepLinkConfig[] = [
|
||||
{
|
||||
@@ -108,266 +335,3 @@ const exchange = new ExchangeContract(provider, networkId);
|
||||
const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
|
||||
from: senderAddress,
|
||||
});`;
|
||||
|
||||
export class DocsPageTemplate extends React.Component<Props> {
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
|
||||
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<Filters groups={filterGroups} />
|
||||
<ChapterLinks />
|
||||
</aside>
|
||||
<article>
|
||||
<LargeHeading>Large Heading</LargeHeading>
|
||||
<LargeIntro>Larger introduction text</LargeIntro>
|
||||
<Heading asElement="h2" size="default">
|
||||
Notifications
|
||||
</Heading>
|
||||
<Notification text="This is' a pretty standard information callout" />
|
||||
<Notification text="This is an indication that something isn’t quite right" type="alert" />
|
||||
<Notification text="This is a success message" type="success" />
|
||||
<Heading asElement="h2" size="default">
|
||||
Tutorial Steps
|
||||
</Heading>
|
||||
<TutorialSteps>
|
||||
<li>Step 1</li>
|
||||
<li>Step 2</li>
|
||||
<li>Step 3</li>
|
||||
</TutorialSteps>
|
||||
<Heading asElement="h2" size="default">
|
||||
Standard Heading
|
||||
</Heading>
|
||||
<Paragraph>This would be paragraph text.</Paragraph>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
|
||||
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
|
||||
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
|
||||
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
|
||||
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
|
||||
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<Paragraph>And here is a table:</Paragraph>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Parameter</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>makerAddress</td>
|
||||
<td>
|
||||
Address that created the order. The maker is one of the two parties that
|
||||
will be involved in the trade if the order gets filled.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>takerAddress</td>
|
||||
<td>
|
||||
Address that is allowed to fill the order. If set to 0, anyone is allowed to
|
||||
fill the order. This field allows makers to decide who can fill an order,
|
||||
rendering it useless to eavesdroppers or outside parties.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>feeRecipientAddress</td>
|
||||
<td>
|
||||
The address that will receive the fees stipulated by the order. This is
|
||||
typically used to incentivize off-chain order relay.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>senderAddress</td>
|
||||
<td>
|
||||
Is an advanced feature that can be defaulted to the 0 address. It allows the
|
||||
maker to enforce that the order must flow through some additional logic
|
||||
residing in an additional Ethereum smart contract before it can be filled
|
||||
(e.g a KYC whitelist contract) -- more on "extension contracts" later.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerAssetAmount</td>
|
||||
<td>
|
||||
Amount of the maker'sAsset being offered by the maker. Must be greater than
|
||||
0.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerFee</td>
|
||||
<td>
|
||||
The fee to be paid by the order maker to the{' '}
|
||||
<code>feeRecipientAddress</code> in the event of an order fill. Partial
|
||||
fills result in partial fees.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<H3>Tabbed Code Snippet</H3>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Typescript</Tab>
|
||||
<Tab>Python</Tab>
|
||||
<Tab>Solidity</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
<H3>Runnable Code Snippet</H3>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Typescript</Tab>
|
||||
<Tab>Python</Tab>
|
||||
<Tab>Solidity</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel>
|
||||
<Code isRunnable={true}>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Code>{codeSample}</Code>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
<H3>Subheading</H3>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
|
||||
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
|
||||
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
|
||||
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
|
||||
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
|
||||
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<div>
|
||||
<Note
|
||||
heading="Information"
|
||||
description="This is a side-info callout used to explain things a little more when needed."
|
||||
/>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in
|
||||
nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis
|
||||
convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero.
|
||||
Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed
|
||||
tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem
|
||||
faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod.
|
||||
Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
|
||||
dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
</div>
|
||||
<UnorderedList>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
<li>List items</li>
|
||||
</UnorderedList>
|
||||
<Heading asElement="h2" size="default">
|
||||
Next Steps
|
||||
</Heading>
|
||||
<StepLinks links={usefulLinks} />
|
||||
<HelpCallout />
|
||||
<NewsletterSignup />
|
||||
<HelpfulCta />
|
||||
<div>
|
||||
<Heading asElement="h2" size="default">
|
||||
Resources
|
||||
</Heading>
|
||||
<Resource
|
||||
heading="RadarRelay SDK"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Relayer' }]}
|
||||
url="/docs"
|
||||
/>
|
||||
<Resource
|
||||
heading="RadarRelay SDK"
|
||||
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
|
||||
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
|
||||
url="/docs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Heading asElement="h2" size="default">
|
||||
Feature Links
|
||||
</Heading>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
<FeatureLink
|
||||
heading="RadarRelay SDK"
|
||||
description="A description could possibly go here but could be tight."
|
||||
icon="flexibleIntegration"
|
||||
url="#"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Columns = styled.div<{ count?: number }>`
|
||||
display: grid;
|
||||
grid-template-columns: 230px 1fr;
|
||||
grid-column-gap: 118px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
Columns.defaultProps = {
|
||||
count: 2,
|
||||
};
|
||||
|
||||
const Separator = styled.hr`
|
||||
border-width: 0 0 1px;
|
||||
border-color: #e4e4e4;
|
||||
height: 0;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
`;
|
||||
|
||||
const LargeHeading = styled(Heading).attrs({
|
||||
asElement: 'h1',
|
||||
})`
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const LargeIntro = styled(Paragraph).attrs({
|
||||
size: 'medium',
|
||||
})``;
|
||||
|
||||
const H2 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h2',
|
||||
})``;
|
||||
|
||||
const H3 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h3',
|
||||
})``;
|
||||
|
||||
@@ -1,129 +1,18 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// import { Tabs } from 'react-tabs';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
|
||||
import { Note } from 'ts/components/docs/note';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { SearchInput } from 'ts/components/docs/search_input';
|
||||
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { StepLinkConfig } from 'ts/components/docs/step_link';
|
||||
import { StepLinks } from 'ts/components/docs/step_links';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
|
||||
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section, SectionProps } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
location: Location;
|
||||
theme: {
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
linkColor: string;
|
||||
};
|
||||
}
|
||||
|
||||
const filterGroups: FilterGroup[] = [
|
||||
{
|
||||
heading: 'Type',
|
||||
name: 'type',
|
||||
filters: [
|
||||
{
|
||||
value: 'Docker images',
|
||||
label: 'Docker images',
|
||||
},
|
||||
{
|
||||
value: 'Typescript/Javascript Libraries',
|
||||
label: 'Typescript/Javascript Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Python Libraries',
|
||||
label: 'Python Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Golang Libraries',
|
||||
label: 'Golang Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Starter projects',
|
||||
label: 'Starter projects',
|
||||
},
|
||||
{
|
||||
value: 'Command-line tools',
|
||||
label: 'Command-line tools',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Developer Persona',
|
||||
name: 'developerPersona',
|
||||
filters: [
|
||||
{
|
||||
value: 'Relayer',
|
||||
label: 'Relayer',
|
||||
},
|
||||
{
|
||||
value: 'Trader',
|
||||
label: 'Trader',
|
||||
},
|
||||
{
|
||||
value: 'Instant integrator',
|
||||
label: 'Instant integrator',
|
||||
},
|
||||
{
|
||||
value: 'Protocol developer',
|
||||
label: 'Protocol developer',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Level',
|
||||
name: 'level',
|
||||
filters: [
|
||||
{
|
||||
value: 'Beginner',
|
||||
label: 'Beginner',
|
||||
},
|
||||
{
|
||||
value: 'Intermediate',
|
||||
label: 'Intermediate',
|
||||
},
|
||||
{
|
||||
value: 'Advanced',
|
||||
label: 'Advanced',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Communtity Maintained',
|
||||
name: 'communityMaintained',
|
||||
filters: [
|
||||
{
|
||||
value: '1',
|
||||
label: 'Include Community Maintained',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export class DocsTools extends React.Component<Props> {
|
||||
public render(): React.ReactNode {
|
||||
export const DocsTools: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
@@ -218,34 +107,94 @@ export class DocsTools extends React.Component<Props> {
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Columns = styled.div<{ count?: number }>`
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
grid-column-gap: 98px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
Columns.defaultProps = {
|
||||
count: 2,
|
||||
};
|
||||
|
||||
const Separator = styled.hr`
|
||||
border-width: 0 0 1px;
|
||||
border-color: #e4e4e4;
|
||||
height: 0;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
`;
|
||||
|
||||
const LargeHeading = styled(Heading).attrs({
|
||||
asElement: 'h1',
|
||||
})`
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const LargeIntro = styled(Paragraph).attrs({
|
||||
size: 'medium',
|
||||
})``;
|
||||
const filterGroups: FilterGroup[] = [
|
||||
{
|
||||
heading: 'Type',
|
||||
name: 'type',
|
||||
filters: [
|
||||
{
|
||||
value: 'Docker images',
|
||||
label: 'Docker images',
|
||||
},
|
||||
{
|
||||
value: 'Typescript/Javascript Libraries',
|
||||
label: 'Typescript/Javascript Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Python Libraries',
|
||||
label: 'Python Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Golang Libraries',
|
||||
label: 'Golang Libraries',
|
||||
},
|
||||
{
|
||||
value: 'Starter projects',
|
||||
label: 'Starter projects',
|
||||
},
|
||||
{
|
||||
value: 'Command-line tools',
|
||||
label: 'Command-line tools',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Developer Persona',
|
||||
name: 'developerPersona',
|
||||
filters: [
|
||||
{
|
||||
value: 'Relayer',
|
||||
label: 'Relayer',
|
||||
},
|
||||
{
|
||||
value: 'Trader',
|
||||
label: 'Trader',
|
||||
},
|
||||
{
|
||||
value: 'Instant integrator',
|
||||
label: 'Instant integrator',
|
||||
},
|
||||
{
|
||||
value: 'Protocol developer',
|
||||
label: 'Protocol developer',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Level',
|
||||
name: 'level',
|
||||
filters: [
|
||||
{
|
||||
value: 'Beginner',
|
||||
label: 'Beginner',
|
||||
},
|
||||
{
|
||||
value: 'Intermediate',
|
||||
label: 'Intermediate',
|
||||
},
|
||||
{
|
||||
value: 'Advanced',
|
||||
label: 'Advanced',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Communtity Maintained',
|
||||
name: 'communityMaintained',
|
||||
filters: [
|
||||
{
|
||||
value: '1',
|
||||
label: 'Include Community Maintained',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,35 +1,23 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
// import { Tabs } from 'react-tabs';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import React from 'react';
|
||||
import { match } from 'react-router-dom';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
|
||||
import { Note } from 'ts/components/docs/note';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { ChapterLinks } from 'ts/components/docs/sidebar/chapter_links';
|
||||
import { Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { StepLinkConfig } from 'ts/components/docs/step_link';
|
||||
import { StepLinks } from 'ts/components/docs/step_links';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
|
||||
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section, SectionProps } from 'ts/components/newLayout';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
@@ -117,7 +105,7 @@ export class DocsView extends React.Component<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
const Columns = styled.div<{ count?: number }>`
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 230px 1fr;
|
||||
grid-column-gap: 118px;
|
||||
@@ -128,10 +116,6 @@ const ContentWrapper = styled.article`
|
||||
min-height: 300px;
|
||||
`;
|
||||
|
||||
Columns.defaultProps = {
|
||||
count: 2,
|
||||
};
|
||||
|
||||
const Separator = styled.hr`
|
||||
border-width: 0 0 1px;
|
||||
border-color: #e4e4e4;
|
||||
@@ -146,10 +130,6 @@ const LargeHeading = styled(Heading).attrs({
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const LargeIntro = styled(Paragraph).attrs({
|
||||
size: 'medium',
|
||||
})``;
|
||||
|
||||
const H2 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h2',
|
||||
|
||||
Reference in New Issue
Block a user