{children}
+ ) : (
+ {subtitle}
+{children}
+);
+
+const InlineCode = styled(Code)`
+ background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
+ padding: 0.3125rem;
+`;
+
+export { InlineCode };
diff --git a/packages/dev-tools-pages/ts/components/intro.tsx b/packages/dev-tools-pages/ts/components/intro.tsx
new file mode 100644
index 0000000000..a0e76ab170
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/intro.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { Alpha, Lead } from './typography';
+
+const Main = styled.div`
+ background-color: ${colors.lightGray};
+ padding: 6.25rem;
+ display: flex;
+ justify-content: space-between;
+
+ ${media.large`
+ padding: 2.5rem;
+ `};
+ ${media.medium`
+ display: block;
+ `};
+`;
+
+const Title = styled(Alpha)`
+ margin-bottom: 2.5rem;
+
+ ${media.medium`margin-bottom: 2.25rem;`};
+`;
+
+const StyledIntroLead = styled(Lead)`
+ max-width: 25.9375rem;
+ margin-right: 2rem;
+ ${media.medium`
+ max-width: 100%;
+ margin-bottom: 1.5625rem;
+ `};
+`;
+
+const StyledIntroAside = styled.div`
+ max-width: 32.5rem;
+ position: relative;
+ ${media.medium`
+ max-width: 100%;
+ `};
+`;
+
+interface IntroLeadProps {
+ title: string;
+}
+
+const IntroLead: React.StatelessComponentError: VM Exception while processing transaction: rever
+ + The error basically says "anything could have gone wrong here", which keeps you + completely in the dark about its exact location. +
++ Working with a large code-base that contains hundreds of smart contracts, + finding the failing line of code quickly becomes a daunting task. +
+
+ {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+ require(
+ isValidSignature(
+ hash,
+ signerAddress,
+ signature
+ ),
+ "INVALID_SIGNATURE"
+ )`}
+
+ + It shows you the exact location of the specific code linen and where it was + called from. +
++ Turning "Your code failed somewhere, good luck debugging it" into "Your code + failed on line X of contract Y", it drastically improves the developer + experience. +
+npm install @0x/sol-compiler --g
+ cd /your_project_dir && sol-compiler
+
+ Configure via a
mkdir compiler.json
+ Example of settings:
+
+ {`{
+ "contractsDir": "contracts",
+ "artifactsDir": "artifacts",
+ "contracts": "*",
+ "compilerSettings": {
+ "optimizer": { "enabled": false },
+ "outputSelection": {
+ "*": {
+ "*": ["abi", "evm.bytecode.object"]
+ }
+ }
+ }
+}`}
+
+ + Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define + which parts of the artifact you need. +
+
+ {`{
+ "compilerSettings": {
+ "outputSelection": {
+ "*": {
+ "*": ["abi"]
+ }
+ }
+ }
+}`}
+
+
+ {`{
+ "compilerOutput": {
+ "abi": [...],
+ },
+}`}
+
+ + Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the + artifact. +
+
+ {`{
+ "compilerSettings": {
+ "outputSelection": {
+ "*": {
+ "*": [
+ "abi",
+ "evm.bytecode.object",
+ "evm.bytecode.sourceMap",
+ "evm.deployedBytecode.object",
+ "evm.deployedBytecode.sourceMap"
+ ]
+ }
+ }
+ }
+}`}
+
+
+ {`{
+ "compilerOutput": {
+ "abi": [...],
+ "evm": {
+ "bytecode": {
+ "object": "0xdeadbeef",
+ "sourceMap": "26:480:..."
+ },
+ "deployedBytecode": {
+ "object": "0xdeadbeef",
+ "sourceMap": "26:480:0..."
+ }
+ }
+ }
+ "sources": {
+ "Migrations.sol": {
+ "id": 0
+ }
+ },
+}`}
+
+ + 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
+ }
+}`}
+
+ 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
+ {`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
+ {`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();`}
+
+ + 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. +
+
+ {`+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);
+}`}
+
+ npm install @0x/sol-trace --save
+
+ Sol-trace 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-trace ships
+ with the
+ {`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
+ {`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();`}
+
+ npm install @0x/sol-trace --save
+
+ Sol-trace 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-trace ships
+ with the
+ {`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
+ {`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();`}
+
+