From 1ae9f68db8c9768e68d1eab1f411b346e9512c1c Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 12:10:35 +0100 Subject: Content (#7) * 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 --- packages/dev-tools-pages/ts/components/List.tsx | 15 ++- packages/dev-tools-pages/ts/highlight.tsx | 2 + packages/dev-tools-pages/ts/pages/Compiler.tsx | 128 ++++++++++++++++++------ packages/dev-tools-pages/ts/pages/Cov.tsx | 53 +++++++--- packages/dev-tools-pages/ts/pages/Profiler.tsx | 49 +++++++-- packages/dev-tools-pages/ts/pages/Trace.tsx | 49 +++++++-- 6 files changed, 231 insertions(+), 65 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx index 3041fc475..ceb3bc108 100644 --- a/packages/dev-tools-pages/ts/components/List.tsx +++ b/packages/dev-tools-pages/ts/components/List.tsx @@ -26,14 +26,19 @@ const StyledItem = styled.li` `; interface ListProps { - items: Array; + items?: Array; + children?: React.ReactNode; } function List(props: ListProps) { - const items = props.items; - const listItems = items.map((bullet, index) => {bullet}); - - return {listItems}; + return ( + + {props.children !== undefined + ? props.children + : props.items.map((bullet, index) => {bullet})} + + ); } export default List; +export { List, StyledItem as ListItem }; diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 0c4602d51..9d7844c89 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -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; diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx index 96f26a978..92390e20b 100644 --- a/packages/dev-tools-pages/ts/pages/Compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -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() { - - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your provider engine. - Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace - ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can also - write your own and support any artifact format. -

+ + + npm install @0x/sol-compiler --g + - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + cd /your_project_dir && sol-compiler + + -// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in -const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - + +

+ Configure via a compiler.json file. +

+ + mkdir compiler.json + +

Example of settings:

+ + + {`{ + "contractsDir": "contracts", + "artifactsDir": "artifacts", + "contracts": "*", + "compilerSettings": { + "optimizer": { "enabled": false }, + "outputSelection": { + "*": { + "*": ["abi", "evm.bytecode.object"] + } + } + } +}`} + + -

+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need. -

+ @@ -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.

+ + + {`{ + ... + "compilerSettings": { + "outputSelection": { + "*": { + "*": ["abi"] + } + } + } + ... +}`} + + + + + {`{ + ... + "compilerSettings": { + "outputSelection": { + "*": { + "*": [ + "abi", + "evm.bytecode.object", + "evm.bytecode.sourceMap", + "evm.deployedBytecode.object", + "evm.deployedBytecode.sourceMap" + ] + } + } + } + ... +}`} + + + + + {`{ + ... + "compilerOutput": { + "abi": [...], + "evm": { + "bytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:..." + }, + "deployedBytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:0..." + } + } + } + "sources": { + "Migrations.sol": { + "id": 0 + } + }, + ... +}`} + + diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx index c3dfb33c5..ccaa60d5a 100644 --- a/packages/dev-tools-pages/ts/pages/Cov.tsx +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -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() { - - - - npm install @0x/sol-trace --save + + + Use ganache-cli as a backing node. + + + Understand and use web3-provider-engine. + + + + + + npm install @0x/sol-cov --save + +

- Sol-trace is a subprovider that needs to be prepended to your provider engine. - Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace - ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can also - write your own and support any artifact format. + Sol-cov is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships + with the SolCompilerArtifactAdapter for use with{' '} + Sol-compiler and TruffleArtifactAdapter for use with + the Truffle framework. You can also write your own and support any artifact + format.

- - @@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi Truffle Custom +

+ Now that we have an artifactAdapter, we can create a{' '} + RevertTraceSubprovider and append it to our provider engine. +

+ + + + {`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();`} + + diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx index 48c4c122b..ac88bd933 100644 --- a/packages/dev-tools-pages/ts/pages/Profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -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() { - - - - npm install @0x/sol-trace --save + + + Use ganache-cli as a backing node. + + + Understand and use web3-provider-engine. + + + + + + npm install @0x/sol-trace --save + +

Sol-trace is a subprovider that needs to be prepended to your provider engine. Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace - ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can also - write your own and support any artifact format. + ships with the SolCompilerArtifactAdapter for use with{' '} + Sol-compiler and TruffleArtifactAdapter for use with + the Truffle framework. You can also write your own and support any artifact + format.

- - @@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi Truffle Custom +

+ Now that we have an artifactAdapter, we can create a{' '} + RevertTraceSubprovider and append it to our provider engine. +

+ + + + {`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();`} + + diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx index 961f4534f..870402df6 100644 --- a/packages/dev-tools-pages/ts/pages/Trace.tsx +++ b/packages/dev-tools-pages/ts/pages/Trace.tsx @@ -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() { - - - - npm install @0x/sol-trace --save + + + Use ganache-cli as a backing node. + + + Understand and use web3-provider-engine. + + + + + + npm install @0x/sol-trace --save + +

Sol-trace is a subprovider that needs to be prepended to your provider engine. Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace - ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can also - write your own and support any artifact format. + ships with the SolCompilerArtifactAdapter for use with{' '} + Sol-compiler and TruffleArtifactAdapter for use with + the Truffle framework. You can also write your own and support any artifact + format.

- - @@ -44,6 +54,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi Truffle Custom +

+ Now that we have an artifactAdapter, we can create a{' '} + RevertTraceSubprovider and append it to our provider engine. +

+ + + + {`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();`} + + -- cgit