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.tsx59
1 files changed, 45 insertions, 14 deletions
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index cc34e0fbe..cd6180fb9 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -6,6 +6,7 @@ import { context } from 'ts/context/trace';
import { Base } from 'ts/components/base';
import { Breakout } from 'ts/components/breakout';
+import { CallToAction } from 'ts/components/call_to_action';
import { Code } from 'ts/components/code';
import { Content } from 'ts/components/content';
import { ContentBlock } from 'ts/components/content-block';
@@ -36,29 +37,57 @@ const Trace: React.StatelessComponent<{}> = () => (
<ContentBlock title="Prerequisites">
<List>
<ListItem>
- Use <a href="#">ganache-cli</a> as a backing node.
+ Use{' '}
+ <a href="https://github.com/ethereum/go-ethereum" target="_blank">
+ Geth
+ </a>{' '}
+ as a backing node. We recommend using our{' '}
+ <a href="https://hub.docker.com/r/0xorg/devnet" target="_blank">
+ Devnet Docker container
+ </a>{' '}
+ which sets up a Geth node for testing purposes.{' '}
+ <a href="https://github.com/0xProject/0x-monorepo/issues/1520" target="_blank">
+ Ganache support is a work in progress.
+ </a>
</ListItem>
<ListItem>
- Understand and use <a href="#">web3-provider-engine</a>.
+ Understand and use{' '}
+ <a href="https://github.com/MetaMask/provider-engine" target="_blank">
+ web3-provider-engine
+ </a>
+ .
</ListItem>
</List>
</ContentBlock>
<ContentBlock title="Installation">
<Breakout>
- <Code>npm install @0x/sol-trace --save</Code>
+ <Code canCopy={true}>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
+ Sol-trace is a subprovider that needs to be prepended to your{' '}
+ <a href="https://github.com/MetaMask/provider-engine" target="_blank">
+ 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{' '}
- <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.
+ <a href="https://sol-compiler.com" target="_blank">
+ Sol-compiler
+ </a>{' '}
+ and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+ <a href="https://truffleframework.com/truffle" target="_blank">
+ Truffle framework
+ </a>{' '}
+ (Also see our{' '}
+ <a href="https://github.com/0xProject/dev-tools-truffle-example" target="_blank">
+ Truffle example project
+ </a>{' '}
+ for a complete walk-through). You can also write your own and support any artifact format.
</p>
<Tabs>
<TabBlock title="Sol-compiler">
- <Code language="javascript">
+ <Code language="javascript" canCopy={true}>
{`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
@@ -66,16 +95,16 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
</Code>
</TabBlock>
<TabBlock title="Truffle">
- <Code language="javascript">
+ <Code language="javascript" canCopy={true}>
{`import { TruffleArtifactAdapter } from '@0x/sol-trace';
const projectRoot = '.';
-const solcVersion = '0.4.24';
+const solcVersion = '0.5.0';
const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
</Code>
</TabBlock>
<TabBlock title="Custom">
- <Code language="javascript">
+ <Code language="javascript" canCopy={true}>
{`import { AbstractArtifactAdapter } from '@0x/sol-trace';
class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
@@ -85,13 +114,13 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
</Tabs>
<p>
Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
- <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+ <InlineCode>revertTraceSubprovider</InlineCode> and append it to our provider engine.
</p>
<Breakout>
- <Code language="javascript">
+ <Code language="javascript" canCopy={true}>
{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-coverage';
+import { RevertTraceSubprovider } from '@0x/sol-trace';
const defaultFromAddress = "..."; // Some ethereum address with test funds
const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
@@ -102,8 +131,10 @@ providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})
providerEngine.start();`}
</Code>
</Breakout>
+ <p>Stack traces will now be printed whenever your contracts revert!</p>
</ContentBlock>
</Content>
+ <CallToAction />
</Base>
);