aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/pages/Trace.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/pages/Trace.tsx')
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx49
1 files changed, 39 insertions, 10 deletions
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() {
<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>