diff options
author | Fabio B <kandinsky454@protonmail.ch> | 2019-01-09 23:22:59 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-09 23:22:59 +0800 |
commit | 08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb (patch) | |
tree | c2def4f4295f3bf5d61ceef51aa659feb73ef814 /packages/dev-tools-pages/ts/pages/trace.tsx | |
parent | aa5af04447dfae24731557c6beead55bd8ff99a9 (diff) | |
parent | 39786c3ad53c1579c4f22bd19f519589b9646287 (diff) | |
download | dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.gz dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.bz2 dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.lz dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.xz dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.zst dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.zip |
Merge pull request #1249 from bakkenbaeck/dev-tools-pages
Dev tools pages
Diffstat (limited to 'packages/dev-tools-pages/ts/pages/trace.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/pages/trace.tsx | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx new file mode 100644 index 000000000..a25d2eff8 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -0,0 +1,116 @@ +import * as React from 'react'; +import { hydrate, render } from 'react-dom'; +import * as Loadable from 'react-loadable'; + +import { context } from 'ts/context/trace'; + +import { Base } from 'ts/components/base'; +import { Breakout } from 'ts/components/breakout'; +import { Code } from 'ts/components/code'; +import { Content } from 'ts/components/content'; +import { ContentBlock } from 'ts/components/content-block'; +import { Hero } from 'ts/components/hero'; +import { InlineCode } from 'ts/components/inline-code'; +import { List, ListItem } from 'ts/components/list'; +import { TabBlock, Tabs } from 'ts/components/tabs'; +import { Trace as TraceComponent } from 'ts/components/trace'; + +const Animation = Loadable({ + loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'), + loading: () => <div />, + delay: 1000, + render(loadable: { TraceAnimation: any }): React.ReactNode { + const Component = loadable.TraceAnimation; + return <Component />; + }, +}); + +const Trace: React.StatelessComponent<{}> = () => ( + <Base context={context}> + <Hero> + <Animation /> + </Hero> + <TraceComponent /> + <Content> + <ContentBlock main={true} 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="javascript"> + {`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"> + <Code language="javascript"> + {`import { TruffleArtifactAdapter } from '@0x/sol-trace'; + +const projectRoot = '.'; +const solcVersion = '0.4.24'; +const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`} + </Code> + </TabBlock> + <TabBlock title="Custom"> + <Code language="javascript"> + {`import { AbstractArtifactAdapter } from '@0x/sol-trace'; + +class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...}; +const artifactAdapter = new YourCustomArtifactsAdapter(...);`} + </Code> + </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="javascript"> + {`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); +} |