crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/alternate-main' into dev-tools-pages

Browse Source
This commit is contained in:
Megan Pearson
2018-10-22 14:11:20 +02:00
parent 580e574c84 917952bc2a
commit 50eee9a657
19 changed files with 326 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/dev-tools-pages/ts/components/Button.tsx
View File

@@ -1,4 +1,5 @@
import styled from 'styled-components';
import { colors } from '../variables';
import { withContext, Props } from './withContext';
@@ -16,7 +17,7 @@ const Button =
white-space: nowrap;
vertical-align: middle;
background-color: ${props => props.colors.secondary};
color: #000;
color: ${colors.black};
border: 0;
border-radius: 5rem;
padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};

5
packages/dev-tools-pages/ts/components/Code.tsx
View File

@@ -1,5 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import BaseButton from './Button';
@@ -25,8 +26,8 @@ const Base =
styled.div <
CodeProps >
`
color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {

3
packages/dev-tools-pages/ts/components/Compiler.tsx
View File

@@ -1,5 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import InlineCode from './InlineCode';
@@ -13,7 +14,7 @@ const Cards = styled.dl`
`;
const Card = styled.div`
background-color: #f1f4f5;
background-color: ${colors.lightGray};
padding: 3.125rem;
padding-bottom: 2.5rem;
`;

34
packages/dev-tools-pages/ts/components/Content.tsx Normal file
View File

@@ -0,0 +1,34 @@
import * as React from 'react';
import styled from 'styled-components';
import Container from './Container';
const StyledMain =
styled.div <
MainProps >
`
padding-top: 6.25rem;
padding-bottom: 6.25rem;
${props =>
props.dark
? `
background-color: #000;
color: #fff;
`
: ''};
`;
interface MainProps {
dark?: boolean;
children: React.ReactNode;
}
function Main(props: MainProps) {
return (
<StyledMain dark={props.dark}>
<Container>{props.children}</Container>
</StyledMain>
);
}
export default Main;

20
packages/dev-tools-pages/ts/components/ContentBlock.tsx
View File

@@ -1,7 +1,8 @@
import * as React from 'react';
import styled from 'styled-components';
import { Beta } from './Typography';
import { withContext, Props } from './withContext';
import { Beta, Alpha } from './Typography';
const Base = styled.div`
display: flex;
@@ -26,9 +27,14 @@ const Item = styled.div`
}
`;
interface ContentBlockProps {
const StyledTitle = styled(Alpha)`
color: ${props => props.color};
`;
interface ContentBlockProps extends Props {
title: string;
children: React.ReactNode;
main?: boolean;
children?: React.ReactNode;
}
function ContentBlock(props: ContentBlockProps) {
@@ -36,12 +42,14 @@ function ContentBlock(props: ContentBlockProps) {
return <Item>{child}</Item>;
});
const Title = props.main ? StyledTitle : Beta;
return (
<Base>
<Beta>{props.title}</Beta>
<Content>{children}</Content>
<Title color={props.colors.main}>{props.title}</Title>
{children ? <Content>{children}</Content> : null}
</Base>
);
}
export default ContentBlock;
export default withContext(ContentBlock);

40
packages/dev-tools-pages/ts/components/Footer.tsx
View File

@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Alpha, Beta } from './Typography';
import { withContext, Props } from './withContext';
import Container from './Container';
import { media } from '../variables';
import MainIcon from 'ts/icons/logos/0x.svg';
import compiler from 'ts/context/compiler';
@@ -23,7 +24,7 @@ function Footer(props: Props) {
<Alpha>Other tools by 0x</Alpha>
<List>
{tools.map(({ title, subtitle, icon }) => (
<ListItem as="li" key={title}>
<ListItem key={title}>
<Icon as={icon} />
<div>
<Beta>{title}</Beta>
@@ -49,21 +50,38 @@ const StyledFooter = styled.footer`
background-color: ${(props: { background: string }) => props.background};
padding-top: 6.25rem;
padding-bottom: 5.4375rem;
${media.small`padding-top: 2.5rem;`};
`;
const Top = styled.div`
display: flex;
justify-content: space-between;
margin-bottom: 9.375rem;
${media.small`
display: block;
margin-bottom: 5.3125rem;
`};
${Alpha} {
${media.small`margin-bottom: 3.8125rem;`};
}
`;
const Icon = styled.div`
margin-right: 1.3125rem;
${media.small`margin-right: 0.9375rem`};
`;
const Media = styled.div`
display: flex;
align-items: center;
`;
const Icon = styled.div`
margin-right: 1.3125rem;
${Icon} {
align-self: flex-start;
}
`;
const List = styled.ul`
@@ -73,14 +91,26 @@ const List = styled.ul`
flex-direction: row;
margin: 0;
padding: 0;
${media.small`
display: block;
width: 100%;
`};
`;
const ListItem = styled(Media)`
const ListItem = styled.li`
display: flex;
align-items: center;
flex-basis: 50%;
margin-bottom: 3.3125rem;
:nth-last-of-type(-n + 2) {
margin-bottom: 0;
${media.small`margin-bottom: 1.875rem`};
}
${media.small`margin-bottom: 1.875rem`};
`;
const Small = styled.small`

6
packages/dev-tools-pages/ts/components/Header.tsx
View File

@@ -5,6 +5,8 @@ import { withContext, Props } from './withContext';
import Container from './Container';
import { Small } from './Typography';
import { media } from '../variables';
function Header(props: Props) {
const { icon, title, colors } = props;
@@ -36,6 +38,8 @@ const StyledHeader = styled.header`
justify-content: space-between;
align-items: center;
}
${media.small`padding-top: 2.125rem;`};
`;
const LogoMark = styled.div`
@@ -53,6 +57,8 @@ const Title = styled.h1`
font-size: 1.5rem;
margin: 0;
margin-left: 0.8125rem;
${media.small`font-size: 1.25rem;`};
`;
const StyledLink = styled(Small)`

3
packages/dev-tools-pages/ts/components/InlineCode.tsx
View File

@@ -1,7 +1,8 @@
import styled from 'styled-components';
import { colors } from '../variables';
const InlineCode = styled.code`
background-color: #eceff9;
background-color: ${colors.blueGray}
padding: 0.1875rem;
`;

6
packages/dev-tools-pages/ts/components/Intro.tsx
View File

@@ -1,10 +1,11 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import { Alpha, Beta } from './Typography';
const Main = styled.div`
background-color: #f1f4f5;
background-color: ${colors.lightGray};
padding: 6.25rem;
display: flex;
justify-content: space-between;
@@ -16,13 +17,12 @@ const Title = styled(Alpha)`
const Content = styled.div`
max-width: 25.9375rem;
display: flex;
flex-direction: column;
`;
const Code = styled.div`
background-color: #e9eced;
background-color: ${colors.darkGray};
width: 520px;
height: 350px;
`;

33
packages/dev-tools-pages/ts/components/Main.tsx
View File

@@ -1,33 +0,0 @@
import * as React from 'react';
import styled from 'styled-components';
import { withContext, Props } from './withContext';
import { Alpha } from './Typography';
const StyledMain = styled.div`
padding-top: 6.25rem;
padding-bottom: 6.25rem;
`;
const Title = styled(Alpha)`
color: ${props => props.color};
margin-bottom: 6.25rem;
`;
interface MainProps extends Props {
children: React.ReactNode;
}
function Main(props: MainProps) {
return (
<StyledMain>
<Title as="h2" color={props.colors.main}>
Get started
</Title>
{props.children}
</StyledMain>
);
}
export default withContext(Main);

4
packages/dev-tools-pages/ts/components/Tabs.tsx
View File

@@ -1,5 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
import {withContext, Props} from './withContext';
@@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
background-color: ${props => props.primaryColor};
}
${StyledTab}[aria-selected="true"] {
background-color: #F1F2F7;
background-color: ${colors.gray};
}
`;

46
packages/dev-tools-pages/ts/components/Trace.tsx
View File

@@ -1,5 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors, media } from '../variables';
import { withContext, Props } from './withContext';
import { Alpha, Beta, Gamma } from './Typography';
@@ -97,9 +98,11 @@ const StyledSection =
`
max-width: 90rem;
margin: 0 auto;
background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
padding-top: 6.25rem;
padding-bottom: 5.25rem;
${media.small`background: none`};
`;
const Wrapper = styled(Container)`
@@ -107,7 +110,14 @@ const Wrapper = styled(Container)`
${Alpha} {
padding-bottom: 2.5rem;
${media.small`padding-bottom: 1.875rem;`};
}
${media.small`
display: block;
width: 100%;
`};
`;
const Block =
@@ -115,8 +125,8 @@ const Block =
TraceProps >
`
width: 50%;
background: ${props => (props.background ? props.background : '#000')};
color: ${props => (props.background ? 'inherit' : '#fff')};
background: ${props => (props.background ? props.background : colors.black)};
color: ${props => (props.background ? 'inherit' : colors.white)};
:first-of-type {
padding-right: 6.25rem;
@@ -124,27 +134,55 @@ const Block =
:last-of-type {
padding-left: 6.25rem;
}
${media.small`
width: 100%;
padding-top: 2.5rem;
padding-bottom: 3.4375rem;
:first-of-type {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
:last-of-type {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
`};
`;
const MainCopy = styled(Beta)`
margin-bottom: 3.1875rem;
${media.small`
margin-bottom: 1.125rem;
font-size: 1rem;
`};
`;
const List = styled.ul`
margin-top: 6.25rem;
margin-bottom: 0;
padding: 0;
${media.small`margin-top: 3.4375rem;`};
`;
const Item = styled.li`
display: flex;
align-items: center;
margin-bottom: 4.4375rem;
:not(:last-child) {
margin-bottom: 4.4375rem;
${media.small`margin-bottom: 3.4375rem;`};
}
`;
const Copy = styled.div`
max-width: 20rem;
margin-right: 5.875rem;
${media.small`margin-right: 2.0625rem;`};
`;
export default withContext(Trace);

5
packages/dev-tools-pages/ts/components/Typography.tsx
View File

@@ -1,8 +1,11 @@
import styled from 'styled-components';
import { media } from '../variables';
const Alpha = styled.h2`
font-size: 1.75rem;
line-height: 1;
${media.small`font-size: 1.5rem;`};
`;
const Beta = styled.h3`
@@ -12,6 +15,8 @@ const Beta = styled.h3`
const Gamma = styled.h4`
font-size: 1rem;
${media.small`font-size: 0.875rem;`};
`;
const Small = styled.p`

4
packages/dev-tools-pages/ts/globalStyles.tsx
View File

@@ -1,4 +1,5 @@
import { createGlobalStyle } from 'styled-components';
import { media } from './variables';
import styledNormalize from 'styled-normalize';
import hljsStyles from 'highlight.js/styles/github-gist.css';
@@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle`
font-weight: 300;
font-size: 1rem;
line-height: 1.8;
${media.small`font-size: 0.875rem;`};
}
a {

76
packages/dev-tools-pages/ts/pages/Compiler.tsx
View File

@@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom';
import context from 'ts/context/compiler';
import Base from 'ts/components/Base';
import Container from 'ts/components/Container';
import Main from 'ts/components/Main';
import Content from 'ts/components/Content';
import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
@@ -15,40 +14,53 @@ import CompilerComponent from 'ts/components/Compiler';
function Compiler() {
return (
<Base context={context}>
<Container>
<CompilerComponent />
<Main>
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your{' '}
<a href="#">provider engine</a>. Depending on your project setup, you will need to use a
specific ArtifactAdapter. Sol-trace ships with the{' '}
<InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
also write your own and support any artifact format.
</p>
</ContentBlock>
<CompilerComponent />
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
write your own and support any artifact format.
</p>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Main>
</Container>
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Content>
<Content dark>
<ContentBlock main title="Artifacts">
<p>
Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
define which parts of the artifact you need.
</p>
</ContentBlock>
<ContentBlock title="Production">
<p>
Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
define which parts of the artifact you need.
</p>
</ContentBlock>
</Content>
</Base>
);
}

69
packages/dev-tools-pages/ts/pages/Cov.tsx
View File

@@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom';
import context from 'ts/context/cov';
import Base from 'ts/components/Base';
import Container from 'ts/components/Container';
import Main from 'ts/components/Main';
import Content from 'ts/components/Content';
import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
@@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro';
function Cov() {
return (
<Base context={context}>
<Container>
<Intro title="Measure your tests">
<Intro title="Measure your tests">
<p>
When it comes to writing smart contracts, testing is one of the most important steps of the process.
In order to quantify the robustness of your Solidity testing suite, you need to measure its code
coverage.
</p>
</Intro>
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
When it comes to writing smart contracts, testing is one of the most important steps of the
process. In order to quantify the robustness of your Solidity testing suite, you need to measure
its code coverage.
Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
write your own and support any artifact format.
</p>
</Intro>
<Main>
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your{' '}
<a href="#">provider engine</a>. Depending on your project setup, you will need to use a
specific ArtifactAdapter. Sol-trace ships with the{' '}
<InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
also write your own and support any artifact format.
</p>
</ContentBlock>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Main>
</Container>
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Content>
</Base>
);
}

69
packages/dev-tools-pages/ts/pages/Profiler.tsx
View File

@@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom';
import context from 'ts/context/profiler';
import Base from 'ts/components/Base';
import Container from 'ts/components/Container';
import Main from 'ts/components/Main';
import Content from 'ts/components/Content';
import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
@@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro';
function Profiler() {
return (
<Base context={context}>
<Container>
<Intro title="ra">
<Intro title="ra">
<p>
Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
This will help you find unexpected inefficiencies in parts of your smart contract, and take a
data-driven approach to optimizing it.
</p>
</Intro>
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
This will help you find unexpected inefficiencies in parts of your smart contract, and take a
data-driven approach to optimizing it.
Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
write your own and support any artifact format.
</p>
</Intro>
<Main>
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your{' '}
<a href="#">provider engine</a>. Depending on your project setup, you will need to use a
specific ArtifactAdapter. Sol-trace ships with the{' '}
<InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
also write your own and support any artifact format.
</p>
</ContentBlock>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Main>
</Container>
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Content>
</Base>
);
}

59
packages/dev-tools-pages/ts/pages/Trace.tsx
View File

@@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom';
import context from 'ts/context/trace';
import Base from 'ts/components/Base';
import Container from 'ts/components/Container';
import Main from 'ts/components/Main';
import Content from 'ts/components/Content';
import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
@@ -16,39 +15,37 @@ function Trace() {
return (
<Base context={context}>
<TraceComponent />
<Container>
<Main>
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your{' '}
<a href="#">provider engine</a>. Depending on your project setup, you will need to use a
specific ArtifactAdapter. Sol-trace ships with the{' '}
<InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
also write your own and support any artifact format.
</p>
</ContentBlock>
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<p>
Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
<InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
write your own and support any artifact format.
</p>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Main>
</Container>
</Code>
</TabBlock>
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
</ContentBlock>
</Content>
</Base>
);
}

33
packages/dev-tools-pages/ts/variables.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { css } from 'styled-components';
const colors = {
black: '#000000',
white: '#FFFFFF',
lightGray: '#F1F4F5',
gray: '#F1F2F7',
darkGray: '#E9ECED',
blueGray: '#ECEFF9',
};
interface SizesInterface {
[key: string]: number;
}
const sizes: SizesInterface = {
large: 992,
medium: 768,
small: 376,
};
const media = Object.keys(sizes).reduce((acc: any, label: string) => {
acc[label] = (args: any) => css`
@media (max-width: ${sizes[label] / 16}em) {
${css(args)};
}
`;
return acc;
}, {});
export default media;
export { colors, media };