diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/pages')
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/compiler.tsx | 170 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/cov.tsx | 149 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/landing.tsx | 27 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/profiler.tsx | 146 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/trace.tsx | 116 |
5 files changed, 581 insertions, 27 deletions
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx new file mode 100644 index 000000000..93a667562 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/compiler.tsx @@ -0,0 +1,170 @@ +import * as React from 'react'; +import { hydrate, render } from 'react-dom'; +import * as Loadable from 'react-loadable'; + +import { context } from 'ts/context/compiler'; + +import { Base } from 'ts/components/base'; +import { Breakout } from 'ts/components/breakout'; +import { Code } from 'ts/components/code'; +import { Compiler as CompilerComponent } from 'ts/components/compiler'; +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 { Lead } from 'ts/components/typography'; + +const Animation = Loadable({ + loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'), + loading: () => <div />, + delay: 1000, + render(loadable: { CompilerAnimation: any }): React.ReactNode { + const Component = loadable.CompilerAnimation; + return <Component />; + }, +}); + +const Compiler: React.StatelessComponent<{}> = () => ( + <Base context={context}> + <Hero> + <Animation /> + </Hero> + <CompilerComponent /> + <Content> + <ContentBlock main={true} title="Get started" /> + <ContentBlock title="Install"> + <Breakout> + <Code canCopy={true}>npm install @0x/sol-compiler --g</Code> + </Breakout> + </ContentBlock> + + <ContentBlock title="Run"> + <Breakout> + <Code>cd /your_project_dir && sol-compiler</Code> + </Breakout> + </ContentBlock> + + <ContentBlock title="Configure"> + <p> + Configure via a <InlineCode>compiler.json</InlineCode> file. + </p> + <Breakout> + <Code>mkdir compiler.json</Code> + </Breakout> + <p>Example of settings:</p> + <Breakout> + <Code language="json"> + {`{ + "contractsDir": "contracts", + "artifactsDir": "artifacts", + "contracts": "*", + "compilerSettings": { + "optimizer": { "enabled": false }, + "outputSelection": { + "*": { + "*": ["abi", "evm.bytecode.object"] + } + } + } +}`} + </Code> + </Breakout> + </ContentBlock> + </Content> + <Content dark={true}> + <ContentBlock main={true} title="Artifacts"> + <Lead> + Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define + which parts of the artifact you need. + </Lead> + </ContentBlock> + + <ContentBlock title="Production"> + <p> + Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define + which parts of the artifact you need. + </p> + <Breakout> + <Code isLight={true} language="json" isEtc={true}> + {`{ + "compilerSettings": { + "outputSelection": { + "*": { + "*": ["abi"] + } + } + } +}`} + </Code> + </Breakout> + <Breakout> + <Code isLight={true} language="json" isEtc={true}> + {`{ + "compilerOutput": { + "abi": [...], + }, +}`} + </Code> + </Breakout> + </ContentBlock> + <ContentBlock title="Development"> + <p> + Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the + artifact. + </p> + <Breakout> + <Code isLight={true} language="json" isEtc={true}> + {`{ + "compilerSettings": { + "outputSelection": { + "*": { + "*": [ + "abi", + "evm.bytecode.object", + "evm.bytecode.sourceMap", + "evm.deployedBytecode.object", + "evm.deployedBytecode.sourceMap" + ] + } + } + } +}`} + </Code> + </Breakout> + + <Breakout> + <Code isLight={true} language="json" isEtc={true}> + {`{ + "compilerOutput": { + "abi": [...], + "evm": { + "bytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:..." + }, + "deployedBytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:0..." + } + } + } + "sources": { + "Migrations.sol": { + "id": 0 + } + }, +}`} + </Code> + </Breakout> + </ContentBlock> + </Content> + </Base> +); + +const root = document.getElementById('app'); + +if (root.hasChildNodes()) { + hydrate(<Compiler />, root); +} else { + render(<Compiler />, root); +} diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx new file mode 100644 index 000000000..85487248a --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/cov.tsx @@ -0,0 +1,149 @@ +import * as React from 'react'; +import { hydrate, render } from 'react-dom'; +import * as Loadable from 'react-loadable'; + +import { context } from 'ts/context/cov'; + +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 { Intro, IntroAside, IntroLead } from 'ts/components/intro'; +import { List, ListItem } from 'ts/components/list'; +import { TabBlock, Tabs } from 'ts/components/tabs'; + +const Animation = Loadable({ + loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'), + loading: () => <div />, + delay: 1000, + render(loadable: { CovAnimation: any }): React.ReactNode { + const Component = loadable.CovAnimation; + return <Component />; + }, +}); + +const Cov: React.StatelessComponent<{}> = () => ( + <Base context={context}> + <Hero> + <Animation /> + </Hero> + <Intro> + <IntroLead title="Measure your tests"> + <p> + When it comes to writing smart contracts, testing is one of the most important steps of the process. + In order to quantify the robustness of your Solidity testing suite, you need to measure its code + coverage. + </p> + </IntroLead> + <IntroAside> + <Code + language="javascript" + isDiff={true} + gutterLength={2} + gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]} + > + {`+function executeTransaction(uint transactionId) + public ++ notExecuted(transactionId) ++ fullyConfirmed(transactionId) ++ pastTimeLock(transactionId) +{ ++ Transaction storage tx = transactions[transactionId] ++ tx.executed = true ++ if (tx.destination.call.value(tx.value)(tx.data)) ++ Execution(transactionId) + else { +- ExecutionFailure(transactionId) +- tx.executed = false + } +}`} + </Code> + </IntroAside> + </Intro> + + <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-coverage --save</Code> + </Breakout> + + <p> + Sol-cov 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-cov 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-coverage'; + +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(<Cov />, root); +} else { + render(<Cov />, root); +} diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx deleted file mode 100644 index a70a9de46..000000000 --- a/packages/dev-tools-pages/ts/pages/landing.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Button } from '../components/ui/button'; -import { Container } from '../components/ui/container'; -import { Text } from '../components/ui/text'; - -interface LandingProps {} - -interface LandingState {} - -export class Landing extends React.Component<LandingProps, LandingState> { - constructor(props: LandingProps) { - super(props); - } - public render(): React.ReactNode { - return ( - <Container id="landing" className="clearfix"> - <Container className="mx-auto p4" width="200px"> - <Button> - <Text fontColor="white">Click me!</Text> - </Button> - </Container> - </Container> - ); - } -} diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx new file mode 100644 index 000000000..16ac9088e --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -0,0 +1,146 @@ +import * as React from 'react'; +import { hydrate, render } from 'react-dom'; +import * as Loadable from 'react-loadable'; + +import { context } from 'ts/context/profiler'; + +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 { Intro, IntroAside, IntroLead } from 'ts/components/intro'; +import { List, ListItem } from 'ts/components/list'; +import { TabBlock, Tabs } from 'ts/components/tabs'; + +const Animation = Loadable({ + loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'), + loading: () => <div />, + delay: 1000, + render(loadable: { ProfilerAnimation: any }): React.ReactNode { + const Component = loadable.ProfilerAnimation; + return <Component />; + }, +}); + +const Profiler: React.StatelessComponent<{}> = () => ( + <Base context={context}> + <Hero> + <Animation /> + </Hero> + <Intro> + <IntroLead title="Outline gas usage"> + <p> + Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. + This will help you find unexpected inefficiencies in parts of your smart contract, and take a + data-driven approach to optimizing it. + </p> + </IntroLead> + <IntroAside> + <Code + language="javascript" + isDiff={true} + gutterLength={6} + gutter={[15, 15, undefined, 21747, 20303, 1435]} + > + {`+function() public payable { ++ deposit(); +} ++function deposit() public payabble { ++ balanceOf[msg.sender] += msg.value; ++ Deposit(msg.sender, msg.value); +} +-function withdraw(uint wad) public { +- require(balanceOf[msg.sender] >= wad); +- balanceOf[msg.sender] -= wad; +- msg.sender.transfer(wad); +- Withdrawal(msg.sender, wad); +}`} + </Code> + </IntroAside> + </Intro> + <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-coverage'; + +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(<Profiler />, root); +} else { + render(<Profiler />, root); +} 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..cc34e0fbe --- /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-coverage'; + +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); +} |