update content in tabs

4 files changed, 64 insertions, 15 deletions

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0d9be16bf..d2c14c90c 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -66,7 +66,8 @@ function Compiler() {
 
                 <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.
+                        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 light language="json">
@@ -94,9 +95,12 @@ function Compiler() {
 }`}
                         </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>
+                </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 light language="json">
                             {`{
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 743b990df..4d8288219 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -84,8 +84,23 @@ function Cov() {
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</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{' '}
@@ -93,7 +108,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index b8e78264e..d45721937 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -69,15 +69,30 @@ function Profiler() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <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">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</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{' '}
@@ -85,7 +100,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 870402df6..609ec8625 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -44,15 +44,30 @@ function Trace() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <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">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</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{' '}
@@ -60,7 +75,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';