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(-)
(limited to 'packages/dev-tools-pages')
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 v1.2.3