Document

{title} diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx index cdcad6982..688625730 100644 --- a/packages/dev-tools-pages/ts/components/hero.tsx +++ b/packages/dev-tools-pages/ts/components/hero.tsx @@ -9,12 +9,12 @@ import { Beta } from './typography'; const Hero: React.StatelessComponent = ({ children }) => ( - {({ subtitle, tagline }: ContextInterface) => ( + {({ subtitle, tagline, docLink }: ContextInterface) => ( {subtitle} {tagline} - diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx index 177e265e5..e4642c826 100644 --- a/packages/dev-tools-pages/ts/context/compiler.tsx +++ b/packages/dev-tools-pages/ts/context/compiler.tsx @@ -5,6 +5,7 @@ import { ContextInterface } from './index'; export const context: ContextInterface = { title: 'sol-compiler', name: 'compiler', + docLink: 'https://0x.org/docs/sol-compiler', subtitle: 'Solidity compilation that just works', tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts', icon: Icon, diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx deleted file mode 100644 index ff1ced27d..000000000 --- a/packages/dev-tools-pages/ts/pages/cov.tsx +++ /dev/null @@ -1,149 +0,0 @@ -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: () =>

, - delay: 1000, - render(loadable: { CovAnimation: any }): React.ReactNode { - const Component = loadable.CovAnimation; - return ; - }, -}); - -const Cov: React.StatelessComponent<{}> = () => ( - - - - - - -

- 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. -

- - -


-                    {`+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
-    }
-}`}
-

- - - - - - - - - Use ganache-cli as a backing node. - - - Understand and use web3-provider-engine. - - - - - - npm install @0x/sol-cov --save - - -

- Sol-cov is a subprovider that needs to be prepended to your provider engine. - Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships with - the SolCompilerArtifactAdapter for use with Sol-compiler{' '} - and TruffleArtifactAdapter for use with the{' '} - Truffle framework. You can also write your own and support any artifact format. -

- - - -


-                            {`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);`}
-

- - -


-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-

- - -


-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-

- - -

- Now that we have an artifactAdapter, we can create a{' '} - RevertTraceSubprovider and append it to our provider engine. -

- - -


-                        {`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();`}
-

- - - - -); - -const root = document.getElementById('app'); - -if (root.hasChildNodes()) { - hydrate(, root); -} else { - render(, root); -} diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx new file mode 100644 index 000000000..cf759c712 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/coverage.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/coverage'; + +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: () =>

, + delay: 1000, + render(loadable: { CovAnimation: any }): React.ReactNode { + const Component = loadable.CovAnimation; + return ; + }, +}); + +const Coverage: React.StatelessComponent<{}> = () => ( + + + + + + +

+ 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. +

+ + +


+                    {`+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
+    }
+}`}
+

+ + + + + + + + + Use ganache-cli as a backing node. + + + Understand and use web3-provider-engine. + + + + + + npm install @0x/sol-coverage --save + + +

+ Sol-coverage is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-coverage ships + with the SolCompilerArtifactAdapter for use with{' '} + Sol-compiler and TruffleArtifactAdapter for use with the{' '} + Truffle framework. You can also write your own and support any artifact format. +

+ + + +


+                            {`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);`}
+

+ + +


+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+

+ + +


+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+

+ + +

+ Now that we have an artifactAdapter, we can create a{' '} + RevertTraceSubprovider and append it to our provider engine. +

+ + +


+                        {`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();`}
+

+ + + + +); + +const root = document.getElementById('app'); + +if (root.hasChildNodes()) { + hydrate(, root); +} else { + render(, root); +} diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index 860e2c25e..16ac9088e 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -121,7 +121,7 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}


                         {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-cov';
+import { RevertTraceSubprovider } from '@0x/sol-coverage';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
 const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index a25d2eff8..cc34e0fbe 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -91,7 +91,7 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
                 
                     
                         {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-cov';
+import { RevertTraceSubprovider } from '@0x/sol-coverage';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
 const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index 640297770..2213d3c21 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -12,7 +12,7 @@ const pages = require('./pages');
 const config = {
     entry: {
         compiler: './ts/pages/compiler.tsx',
-        cov: './ts/pages/cov.tsx',
+        coverage: './ts/pages/coverage.tsx',
         profiler: './ts/pages/profiler.tsx',
         trace: './ts/pages/trace.tsx',
     },
-- 
cgit v1.2.3