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

Content (#7)

Browse Source 
* optional children in List component

* added real content to trace page

* added real content to cov page

* add support for json highlighting

* real content on compiler page

* real content on profiler page

* remove unused import

* remove list from compiler page

* wrap code components in pages with breakout component

* fix font size on text

* fix typo
This commit is contained in:
August Skare 2018-10-25 12:10:35 +01:00 committed by GitHub
parent e5d3e3b33a
commit 1ae9f68db8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 232 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/dev-tools-pages/ts/components/List.tsx
View File

@ -26,14 +26,19 @@ const StyledItem = styled.li`
`;
interface ListProps {
items: Array<string>;
items?: Array<string>;
children?: React.ReactNode;
}
function List(props: ListProps) {
const items = props.items;
const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
return <StyledList>{listItems}</StyledList>;
return (
<StyledList>
{props.children !== undefined
? props.children
: props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
</StyledList>
);
}
export default List;
export { List, StyledItem as ListItem };

2
packages/dev-tools-pages/ts/highlight.tsx
View File

@ -1,6 +1,8 @@
const highlight = require('highlight.js/lib/highlight');
const javascript = require('highlight.js/lib/languages/javascript');
const json = require('highlight.js/lib/languages/json');
highlight.registerLanguage('javascript', javascript);
highlight.registerLanguage('json', json);
export default highlight;

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

@ -1,15 +1,15 @@
import * as React from 'react';
import { render, hydrate } from 'react-dom';
import { Lead } from 'ts/components/Typography';
import context from 'ts/context/compiler';
import Base from 'ts/components/Base';
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';
import InlineCode from 'ts/components/InlineCode';
import List from 'ts/components/List';
import CompilerComponent from 'ts/components/Compiler';
import Breakout from 'ts/components/Breakout';
function Compiler() {
return (
@ -17,41 +17,51 @@ function Compiler() {
<CompilerComponent />
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />
<ContentBlock title="Install">
<Breakout>
<Code>npm install @0x/sol-compiler --g</Code>
</Breakout>
</ContentBlock>
<ContentBlock title="Prerequisites">
<Code>npm install @0x/sol-trace --save</Code>
<ContentBlock title="Run">
<Breakout>
<Code>cd /your_project_dir && sol-compiler</Code>
</Breakout>
</ContentBlock>
<ContentBlock title="Configure">
<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.
Configure via a <InlineCode>compiler.json</InlineCode> file.
</p>
</ContentBlock>
<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>
<Breakout>
<Code>mkdir compiler.json</Code>
</Breakout>
<p>Example of settings:</p>
<Breakout>
<Code language="json">
{`{
"contractsDir": "contracts",
"artifactsDir": "artifacts",
"contracts": "*",
"compilerSettings": {
"optimizer": { "enabled": false },
"outputSelection": {
"*": {
"*": ["abi", "evm.bytecode.object"]
}
}
}
}`}
</Code>
</Breakout>
</ContentBlock>
</Content>
<Content dark>
<ContentBlock main title="Artifacts">
<p>
<Lead>
Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
define which parts of the artifact you need.
</p>
</Lead>
</ContentBlock>
<ContentBlock title="Production">
@ -59,6 +69,68 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
define which parts of the artifact you need.
</p>
<Breakout>
<Code light language="json">
{`{
...
"compilerSettings": {
"outputSelection": {
"*": {
"*": ["abi"]
}
}
}
...
}`}
</Code>
</Breakout>
<Breakout>
<Code light language="json">
{`{
...
"compilerSettings": {
"outputSelection": {
"*": {
"*": [
"abi",
"evm.bytecode.object",
"evm.bytecode.sourceMap",
"evm.deployedBytecode.object",
"evm.deployedBytecode.sourceMap"
]
}
}
}
...
}`}
</Code>
</Breakout>
<Breakout>
<Code light language="json">
{`{
...
"compilerOutput": {
"abi": [...],
"evm": {
"bytecode": {
"object": "0xdeadbeef",
"sourceMap": "26:480:..."
},
"deployedBytecode": {
"object": "0xdeadbeef",
"sourceMap": "26:480:0..."
}
}
}
"sources": {
"Migrations.sol": {
"id": 0
}
},
...
}`}
</Code>
</Breakout>
</ContentBlock>
</Content>
</Base>

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

@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import List from 'ts/components/List';
import { List, ListItem } from 'ts/components/List';
import Intro from 'ts/components/Intro';
import Breakout from 'ts/components/Breakout';
function Cov() {
return (
@ -23,21 +24,30 @@ function Cov() {
</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-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>
<List>
<ListItem>
Use <a href="#">ganache-cli</a> as a backing node.
</ListItem>
<ListItem>
Understand and use <a href="#">web3-provider-engine</a>.
</ListItem>
</List>
</ContentBlock>
<ContentBlock title="Installation">
<Breakout>
<Code>npm install @0x/sol-cov --save</Code>
</Breakout>
<p>
Sol-cov 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-cov ships
with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
<a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
format.
</p>
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
<p>
Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
<InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
</p>
<Breakout>
<Code language="js">
{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
import { RevertTraceSubprovider } from '@0x/sol-cov';
const defaultFromAddress = "..."; // Some ethereum address with test funds
const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
const providerEngine = new ProviderEngine();
providerEngine.addProvider(revertTraceSubprovider);
providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
providerEngine.start();`}
</Code>
</Breakout>
</ContentBlock>
</Content>
</Base>

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

@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import List from 'ts/components/List';
import { List, ListItem } from 'ts/components/List';
import Intro from 'ts/components/Intro';
import Breakout from 'ts/components/Breakout';
function Profiler() {
return (
@ -23,21 +24,30 @@ function Profiler() {
</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>
<List>
<ListItem>
Use <a href="#">ganache-cli</a> as a backing node.
</ListItem>
<ListItem>
Understand and use <a href="#">web3-provider-engine</a>.
</ListItem>
</List>
</ContentBlock>
<ContentBlock title="Installation">
<Breakout>
<Code>npm install @0x/sol-trace --save</Code>
</Breakout>
<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.
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
<a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
format.
</p>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
<p>
Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
<InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
</p>
<Breakout>
<Code language="js">
{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
import { RevertTraceSubprovider } from '@0x/sol-cov';
const defaultFromAddress = "..."; // Some ethereum address with test funds
const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
const providerEngine = new ProviderEngine();
providerEngine.addProvider(revertTraceSubprovider);
providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
providerEngine.start();`}
</Code>
</Breakout>
</ContentBlock>
</Content>
</Base>

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

@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import List from 'ts/components/List';
import { List, ListItem } from 'ts/components/List';
import TraceComponent from 'ts/components/Trace';
import Breakout from 'ts/components/Breakout';
function Trace() {
return (
@ -17,21 +18,30 @@ function Trace() {
<TraceComponent />
<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>
<List>
<ListItem>
Use <a href="#">ganache-cli</a> as a backing node.
</ListItem>
<ListItem>
Understand and use <a href="#">web3-provider-engine</a>.
</ListItem>
</List>
</ContentBlock>
<ContentBlock title="Installation">
<Breakout>
<Code>npm install @0x/sol-trace --save</Code>
</Breakout>
<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.
ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
<a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
format.
</p>
</ContentBlock>
<ContentBlock title="Installation">
<Tabs>
<TabBlock title="Sol-compiler">
<Code language="js">
@ -44,6 +54,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
<TabBlock title="Truffle">Truffle</TabBlock>
<TabBlock title="Custom">Custom</TabBlock>
</Tabs>
<p>
Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
<InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
</p>
<Breakout>
<Code language="js">
{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
import { RevertTraceSubprovider } from '@0x/sol-cov';
const defaultFromAddress = "..."; // Some ethereum address with test funds
const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
const providerEngine = new ProviderEngine();
providerEngine.addProvider(revertTraceSubprovider);
providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
providerEngine.start();`}
</Code>
</Breakout>
</ContentBlock>
</Content>
</Base>