1ae9f68db8
* 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
89 lines
3.8 KiB
TypeScript
89 lines
3.8 KiB
TypeScript
import * as React from 'react';
|
|
import { render, hydrate } from 'react-dom';
|
|
|
|
import context from 'ts/context/trace';
|
|
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, ListItem } from 'ts/components/List';
|
|
import TraceComponent from 'ts/components/Trace';
|
|
import Breakout from 'ts/components/Breakout';
|
|
|
|
function Trace() {
|
|
return (
|
|
<Base context={context}>
|
|
<TraceComponent />
|
|
<Content>
|
|
<ContentBlock main title="Get started" />
|
|
<ContentBlock title="Prerequisites">
|
|
<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{' '}
|
|
<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">
|
|
{`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>
|
|
<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>
|
|
);
|
|
}
|
|
|
|
const root = document.getElementById('app');
|
|
|
|
if (root.hasChildNodes()) {
|
|
hydrate(<Trace />, root);
|
|
} else {
|
|
render(<Trace />, root);
|
|
}
|