update content in tabs

1 files changed, 19 insertions, 4 deletions

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';