From 589b535b918ebf132cd55e8dc1ebfbfc96d90fe6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 9 Jan 2019 17:30:01 +0100 Subject: Add docLink --- packages/dev-tools-pages/ts/context/cov.tsx | 19 ------------------- packages/dev-tools-pages/ts/context/coverage.tsx | 20 ++++++++++++++++++++ packages/dev-tools-pages/ts/context/index.tsx | 1 + packages/dev-tools-pages/ts/context/profiler.tsx | 1 + packages/dev-tools-pages/ts/context/trace.tsx | 1 + 5 files changed, 23 insertions(+), 19 deletions(-) delete mode 100644 packages/dev-tools-pages/ts/context/cov.tsx create mode 100644 packages/dev-tools-pages/ts/context/coverage.tsx (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx deleted file mode 100644 index 1ade45e9d..000000000 --- a/packages/dev-tools-pages/ts/context/cov.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Icon from 'ts/icons/logos/cov.svg'; - -import { ContextInterface } from './index'; - -export const context: ContextInterface = { - title: 'sol-cov', - name: 'cov', - subtitle: 'Solidity code coverage', - tagline: 'Measure Solidity code coverage', - icon: Icon, - colors: { - main: '#BB9200', - secondary: '#F1DB8D', - secondary_alt: '#F1D882', - type: '#D7AE1B', - type_alt: '#BD9406', - dark: '#817033', - }, -}; diff --git a/packages/dev-tools-pages/ts/context/coverage.tsx b/packages/dev-tools-pages/ts/context/coverage.tsx new file mode 100644 index 000000000..3e44b6ec2 --- /dev/null +++ b/packages/dev-tools-pages/ts/context/coverage.tsx @@ -0,0 +1,20 @@ +import Icon from 'ts/icons/logos/cov.svg'; + +import { ContextInterface } from './index'; + +export const context: ContextInterface = { + title: 'sol-coverage', + name: 'coverage', + subtitle: 'Solidity code coverage', + docLink: 'https://0x.org/docs/sol-coverage', + tagline: 'Measure Solidity code coverage', + icon: Icon, + colors: { + main: '#BB9200', + secondary: '#F1DB8D', + secondary_alt: '#F1D882', + type: '#D7AE1B', + type_alt: '#BD9406', + dark: '#817033', + }, +}; diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx index 35c647ad6..97ccf5c16 100644 --- a/packages/dev-tools-pages/ts/context/index.tsx +++ b/packages/dev-tools-pages/ts/context/index.tsx @@ -3,6 +3,7 @@ import { createContext } from 'react'; interface ContextInterface { title?: string; name?: string; + docLink?: string; subtitle?: string; tagline?: string; icon?: React.ReactNode; diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx index 5ccfa5b4c..e2ddcb230 100644 --- a/packages/dev-tools-pages/ts/context/profiler.tsx +++ b/packages/dev-tools-pages/ts/context/profiler.tsx @@ -5,6 +5,7 @@ import { ContextInterface } from './index'; export const context: ContextInterface = { title: 'sol-profiler', name: 'profiler', + docLink: 'https://0x.org/docs/sol-profiler', subtitle: 'Gas profiling for Solidity', tagline: "Implement data-guided optimizations by profiling your contract's gas usage", icon: Icon, diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx index 9627cc0a4..3c19661f2 100644 --- a/packages/dev-tools-pages/ts/context/trace.tsx +++ b/packages/dev-tools-pages/ts/context/trace.tsx @@ -6,6 +6,7 @@ export const context: ContextInterface = { title: 'sol-trace', name: 'trace', subtitle: 'Human-readable stack traces', + docLink: 'https://0x.org/docs/sol-trace', tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions', icon: Icon, colors: { -- cgit From 241be6de30d5c531ec6e9459d14aca54632a7c6a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 9 Jan 2019 17:30:34 +0100 Subject: Rename sol-cov to sol-coverage, fix links --- packages/dev-tools-pages/assets/crawl.html | 33 +++-- packages/dev-tools-pages/pages.js | 4 +- packages/dev-tools-pages/ts/components/footer.tsx | 8 +- packages/dev-tools-pages/ts/components/hero.tsx | 4 +- packages/dev-tools-pages/ts/context/compiler.tsx | 1 + packages/dev-tools-pages/ts/pages/cov.tsx | 149 ---------------------- packages/dev-tools-pages/ts/pages/coverage.tsx | 149 ++++++++++++++++++++++ packages/dev-tools-pages/ts/pages/profiler.tsx | 2 +- packages/dev-tools-pages/ts/pages/trace.tsx | 2 +- packages/dev-tools-pages/webpack.config.js | 2 +- 10 files changed, 176 insertions(+), 178 deletions(-) delete mode 100644 packages/dev-tools-pages/ts/pages/cov.tsx create mode 100644 packages/dev-tools-pages/ts/pages/coverage.tsx (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/assets/crawl.html b/packages/dev-tools-pages/assets/crawl.html index 9135c3ede..352300d73 100644 --- a/packages/dev-tools-pages/assets/crawl.html +++ b/packages/dev-tools-pages/assets/crawl.html @@ -1,20 +1,17 @@ - - - - - Document - - - - - - - \ No newline at end of file + + + + + Test + + + + + diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js index 7609a07e9..ed6266ded 100644 --- a/packages/dev-tools-pages/pages.js +++ b/packages/dev-tools-pages/pages.js @@ -18,9 +18,9 @@ const pages = [ }, { title: 'sol-cov', - filename: 'cov/index.html', + filename: 'coverage/index.html', template: 'assets/index.html', - chunks: ['cov'], + chunks: ['coverage'], favicon: 'assets/favicons/cov.ico', minify: true, meta: { diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx index 04fd9b88e..50ed0439b 100644 --- a/packages/dev-tools-pages/ts/components/footer.tsx +++ b/packages/dev-tools-pages/ts/components/footer.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { context as compiler } from 'ts/context/compiler'; -import { context as cov } from 'ts/context/cov'; +import { context as coverage } from 'ts/context/coverage'; import { context as profiler } from 'ts/context/profiler'; import { context as trace } from 'ts/context/trace'; import MainIcon from 'ts/icons/logos/0x.svg'; @@ -12,7 +12,7 @@ import { media } from 'ts/variables'; import { Container } from './container'; import { Alpha, Beta } from './typography'; -const tools = [trace, cov, compiler, profiler]; +const tools = [trace, coverage, compiler, profiler]; const Footer: React.StatelessComponent<{}> = () => ( @@ -20,9 +20,9 @@ const Footer: React.StatelessComponent<{}> = () => ( Other tools by 0x - {_.map(tools, ({ title, subtitle, icon }) => ( + {_.map(tools, ({ title, subtitle, icon, name }) => ( - +
{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 From dc20429bca51876e94ee747e3cb925ae0ac6a4ac Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 10 Jan 2019 20:14:51 +0100 Subject: Add deployment commands for the Dev tools pages --- packages/dev-tools-pages/package.json | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index db927849e..bb8da7fe9 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -12,7 +12,17 @@ "build:dev": "../../node_modules/.bin/webpack --mode development", "clean": "shx rm -f public/bundle*", "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "dev": "webpack-dev-server --mode development --content-base public" + "dev": "webpack-dev-server --mode development --content-base public", + "deploy:all": "npm run build; npm run deploy:compiler; npm run deploy:compiler:index; npm run deploy:coverage; npm run deploy:coverage:index; npm run deploy:profiler; npm run deploy:profiler:index; npm run deploy:trace; npm run deploy:trace:index;", + "deploy:compiler": "DIR_NAME=./public/. BUCKET=s3://sol-compiler.com yarn s3:sync --exclude 'bundle-cov*' --exclude 'bundle-trace*' --exclude 'bundle-profiler*'", + "deploy:coverage": "DIR_NAME=./public/. BUCKET=s3://sol-coverage.com yarn s3:sync --exclude 'bundle-compiler*' --exclude 'bundle-trace*' --exclude 'bundle-profiler*'", + "deploy:profiler": "DIR_NAME=./public/. BUCKET=s3://sol-profiler.com yarn s3:sync --exclude 'bundle-cov*' --exclude 'bundle-trace*' --exclude 'bundle-compiler*'", + "deploy:trace": "DIR_NAME=./public/. BUCKET=s3://sol-trace.com yarn s3:sync --exclude 'bundle-cov*' --exclude 'bundle-compiler*' --exclude 'bundle-profiler*'", + "deploy:compiler:index": "DIR_NAME=./public/compiler/. BUCKET=s3://sol-compiler.com yarn s3:sync", + "deploy:coverage:index": "DIR_NAME=./public/coverage/. BUCKET=s3://sol-coverage.com yarn s3:sync", + "deploy:profiler:index": "DIR_NAME=./public/profiler/. BUCKET=s3://sol-profiler.com yarn s3:sync", + "deploy:trace:index": "DIR_NAME=./public/trace/. BUCKET=s3://sol-trace.com yarn s3:sync", + "s3:sync": "aws s3 sync $DIR_NAME $BUCKET --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js --exclude 'profiler/*' --exclude 'trace/*' --exclude 'coverage/*' --exclude 'compiler/*'" }, "license": "Apache-2.0", "dependencies": { -- cgit From a516b00a0397a567fd233bd955206d46321cc178 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 11 Jan 2019 00:45:26 +0100 Subject: Fix footer links --- packages/dev-tools-pages/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx index 50ed0439b..d568a86fc 100644 --- a/packages/dev-tools-pages/ts/components/footer.tsx +++ b/packages/dev-tools-pages/ts/components/footer.tsx @@ -22,7 +22,7 @@ const Footer: React.StatelessComponent<{}> = () => ( {_.map(tools, ({ title, subtitle, icon, name }) => ( - +
{title} -- cgit From db878f4a7bdddef81a70b5fb9b533c08bde8c453 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 11 Jan 2019 14:15:15 +0100 Subject: Fix title and og tags for sol-coverage --- packages/dev-tools-pages/pages.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js index ed6266ded..0f19f4744 100644 --- a/packages/dev-tools-pages/pages.js +++ b/packages/dev-tools-pages/pages.js @@ -17,7 +17,7 @@ const pages = [ }, }, { - title: 'sol-cov', + title: 'sol-coverage', filename: 'coverage/index.html', template: 'assets/index.html', chunks: ['coverage'], @@ -25,7 +25,7 @@ const pages = [ minify: true, meta: { description: 'Solidity code coverage', - 'og-title': { property: 'og:title', content: 'sol-cov' }, + 'og-title': { property: 'og:title', content: 'sol-coverage' }, 'og-description': { property: 'og:description', content: 'Solidity code coverage' }, 'og-type': { property: 'og:type', content: 'website' }, 'og-image': { property: 'og:image', content: '/images/og-cov' }, -- cgit From ebb10e66045613b7265e4d23e40b63ecf49af4fe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 11 Jan 2019 14:15:24 +0100 Subject: Remove unused import --- packages/dev-tools-pages/webpack.config.js | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js index 2213d3c21..ef2f98cf2 100644 --- a/packages/dev-tools-pages/webpack.config.js +++ b/packages/dev-tools-pages/webpack.config.js @@ -3,7 +3,6 @@ const webpack = require('webpack'); const TerserPlugin = require('terser-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const HtmlWebpackPlugin = require('html-webpack-plugin'); -const childProcess = require('child_process'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); -- cgit From 6fb2721294f5d25edb76cb6f9b34eb3e07212950 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 11 Jan 2019 14:20:56 +0100 Subject: Fix copy and links --- .../dev-tools-pages/ts/components/compiler.tsx | 12 ++++--- packages/dev-tools-pages/ts/components/hero.tsx | 2 +- packages/dev-tools-pages/ts/components/trace.tsx | 13 ++++--- packages/dev-tools-pages/ts/pages/compiler.tsx | 20 +++++++---- packages/dev-tools-pages/ts/pages/coverage.tsx | 42 ++++++++++++++-------- packages/dev-tools-pages/ts/pages/profiler.tsx | 36 +++++++++++++------ packages/dev-tools-pages/ts/pages/trace.tsx | 36 +++++++++++++------ 7 files changed, 107 insertions(+), 54 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx index 694a535dd..c00e3a2b9 100644 --- a/packages/dev-tools-pages/ts/components/compiler.tsx +++ b/packages/dev-tools-pages/ts/components/compiler.tsx @@ -45,7 +45,7 @@ const Dd = styled.dd` const cards = [ { - title: 'A Project-centric', + title: 'Project-centric', body: ( Compiles an entire project instead of only individual .sol files. @@ -54,7 +54,7 @@ const cards = [ }, { title: 'Incremental builds', - body: 'Recompiles your smart contracts after they have changed', + body: 'Only recompiles smart contracts that have been modified.', }, { title: 'Customizable artifacts', @@ -63,12 +63,16 @@ const cards = [ }, { title: 'Seamless', - body: 'Fetches and caches the required compiler binaries.', + body: 'Fetches and caches the required compiler binaries for the Solidity versions you use.', }, { title: 'Versioning', body: - 'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).', + 'Compiles each contract with the Solidity version specified at the top of its file (it even supports version ranges!).', + }, + { + title: 'Watch mode', + body: 'Have your contracts instantly recompile on file save.', }, ]; diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx index 688625730..a024a49dc 100644 --- a/packages/dev-tools-pages/ts/components/hero.tsx +++ b/packages/dev-tools-pages/ts/components/hero.tsx @@ -14,7 +14,7 @@ const Hero: React.StatelessComponent = ({ children }) => ( {subtitle} {tagline} - diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx index 108154648..96e75013d 100644 --- a/packages/dev-tools-pages/ts/components/trace.tsx +++ b/packages/dev-tools-pages/ts/components/trace.tsx @@ -25,7 +25,7 @@ const Trace: React.StatelessComponent<{}> = () => ( troublemaking line of code. The only hint you'll get is a generic error. - Error: VM Exception while processing transaction: rever + Error: VM Exception while processing transaction: revert @@ -44,8 +44,8 @@ const Trace: React.StatelessComponent<{}> = () => ( Time-consuming

- Working with a large code-base that contains hundreds of smart contracts, - finding the failing line of code quickly becomes a daunting task. + Working within a large code-base that contains many smart contracts, finding the + failing line of code quickly becomes a daunting task.

@@ -78,8 +78,8 @@ const Trace: React.StatelessComponent<{}> = () => ( Exact location

- It shows you the exact location of the specific code linen and where it was - called from. + It shows you the exact location of the offending line and where it was called + from.

@@ -90,8 +90,7 @@ const Trace: React.StatelessComponent<{}> = () => ( Time-saving

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. + failed on line X of contract Y", drastically improves the developer experience.

diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx index 93a667562..0468fd84f 100644 --- a/packages/dev-tools-pages/ts/pages/compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/compiler.tsx @@ -24,6 +24,9 @@ const Animation = Loadable({ }, }); +const SOLIDITY_INPUT_FORMAT_DOCS = + 'https://solidity.readthedocs.io/en/v0.4.24/using-the-compiler.html#compiler-input-and-output-json-description'; + const Compiler: React.StatelessComponent<{}> = () => ( @@ -74,15 +77,19 @@ const Compiler: React.StatelessComponent<{}> = () => ( - 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 input format + {' '} + to specify what to include in the generated artifacts. This way, you have complete flexibility on + what is included.

- Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define - which parts of the artifact you need. + In production, you want to optimize for a small bundle size, so your compiler.json config would + instruct sol-compiler to only output the contract ABI.

@@ -109,8 +116,9 @@ const Compiler: React.StatelessComponent<{}> = () => (

- Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the - artifact. + In development, you need to use profiler and other dev tools that require more information from the + artifact. To do this, you can specify that the artifact also contain the bytecode, deployed bytecode + and source maps.

diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx index cf759c712..de03d3a9c 100644 --- a/packages/dev-tools-pages/ts/pages/coverage.tsx +++ b/packages/dev-tools-pages/ts/pages/coverage.tsx @@ -33,9 +33,9 @@ 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. + When it comes to writing secure smart contracts, testing is one of the most important steps in the + process. In order to quantify the robustness of your Solidity testing suite, you need to measure its + code coverage.

@@ -69,10 +69,17 @@ const Coverage: React.StatelessComponent<{}> = () => ( - Use ganache-cli as a backing node. + Use{' '} + + ganache-cli + {' '} + as a backing node. - Understand and use web3-provider-engine. + Understand and use{' '} + + web3-provider-engine + . @@ -82,11 +89,18 @@ const Coverage: React.StatelessComponent<{}> = () => (

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

@@ -118,19 +132,19 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}

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

{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; -import { RevertTraceSubprovider } from '@0x/sol-coverage'; +import { CoverageSubprovider } from '@0x/sol-coverage'; const defaultFromAddress = "..."; // Some ethereum address with test funds -const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress); +const coverageSubprovider = new CoverageSubprovider(artifactAdapter, defaultFromAddress); const providerEngine = new ProviderEngine(); -providerEngine.addProvider(revertTraceSubprovider); +providerEngine.addProvider(coverageSubprovider); providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})); providerEngine.start();`} diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index 16ac9088e..feca368ba 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -66,10 +66,17 @@ const Profiler: React.StatelessComponent<{}> = () => ( - Use ganache-cli as a backing node. + Use{' '} + + ganache-cli + {' '} + as a backing node. - Understand and use web3-provider-engine. + Understand and use{' '} + + web3-provider-engine + . @@ -79,11 +86,18 @@ const Profiler: React.StatelessComponent<{}> = () => (

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

@@ -115,19 +129,19 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}

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

{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; -import { RevertTraceSubprovider } from '@0x/sol-coverage'; +import { ProfilerSubprovider } from '@0x/sol-coverage'; const defaultFromAddress = "..."; // Some ethereum address with test funds -const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress); +const profilerSubprovider = new ProfilerSubprovider(artifactAdapter, defaultFromAddress); const providerEngine = new ProviderEngine(); -providerEngine.addProvider(revertTraceSubprovider); +providerEngine.addProvider(profilerSubprovider); providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})); providerEngine.start();`} diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index cc34e0fbe..1fa159461 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -36,10 +36,17 @@ const Trace: React.StatelessComponent<{}> = () => ( - Use ganache-cli as a backing node. + Use{' '} + + ganache-cli + {' '} + as a backing node. - Understand and use web3-provider-engine. + Understand and use{' '} + + web3-provider-engine + . @@ -49,11 +56,18 @@ const Trace: React.StatelessComponent<{}> = () => (

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

@@ -85,19 +99,19 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}

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

{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; -import { RevertTraceSubprovider } from '@0x/sol-coverage'; +import { TraceSubprovider } from '@0x/sol-coverage'; const defaultFromAddress = "..."; // Some ethereum address with test funds -const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress); +const traceSubprovider = new TraceSubprovider(artifactAdapter, defaultFromAddress); const providerEngine = new ProviderEngine(); -providerEngine.addProvider(revertTraceSubprovider); +providerEngine.addProvider(traceSubprovider); providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})); providerEngine.start();`} -- cgit From 6871f36dadf720e600a75d4a07f0464e69e10c86 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 16 Jan 2019 18:44:52 +0100 Subject: Update 0x url --- packages/dev-tools-pages/ts/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx index 2787692c1..49019910c 100644 --- a/packages/dev-tools-pages/ts/components/header.tsx +++ b/packages/dev-tools-pages/ts/components/header.tsx @@ -17,7 +17,7 @@ const Header: React.StatelessComponent<{}> = () => ( {title} - + Built by 0x -- cgit From b2ea4f6aafd35951fd1f002f8c8aafc79bb02b0f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 12:53:09 +0100 Subject: Update requirement sections --- packages/dev-tools-pages/ts/pages/coverage.tsx | 22 ++++++++++++++++------ packages/dev-tools-pages/ts/pages/profiler.tsx | 24 +++++++++++++++++------- packages/dev-tools-pages/ts/pages/trace.tsx | 24 +++++++++++++++++------- 3 files changed, 50 insertions(+), 20 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx index de03d3a9c..0e0630a0c 100644 --- a/packages/dev-tools-pages/ts/pages/coverage.tsx +++ b/packages/dev-tools-pages/ts/pages/coverage.tsx @@ -70,16 +70,24 @@ const Coverage: React.StatelessComponent<{}> = () => ( Use{' '} - - ganache-cli + + Geth {' '} - as a backing node. + as a backing node. We recommend using our{' '} + + Devnet Docker container + {' '} + which sets up a Geth node for testing purposes.{' '} + + Ganache support is a work in progress. + Understand and use{' '} web3-provider-engine - . + + . @@ -92,7 +100,8 @@ const Coverage: React.StatelessComponent<{}> = () => ( 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 + + . Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-coverage ships with the SolCompilerArtifactAdapter for use with{' '} Sol-compiler @@ -100,7 +109,8 @@ const Coverage: React.StatelessComponent<{}> = () => ( and TruffleArtifactAdapter for use with the{' '} Truffle framework - . You can also write your own and support any artifact format. + + . You can also write your own and support any artifact format.

diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index feca368ba..96fad3495 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -67,16 +67,24 @@ const Profiler: React.StatelessComponent<{}> = () => ( Use{' '} - - ganache-cli + + Geth {' '} - as a backing node. + as a backing node. We recommend using our{' '} + + Devnet Docker container + {' '} + which sets up a Geth node for testing purposes.{' '} + + Ganache support is a work in progress. + Understand and use{' '} web3-provider-engine - . + + . @@ -89,15 +97,17 @@ const Profiler: React.StatelessComponent<{}> = () => ( 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 SolCompilerArtifactAdapter for use with{' '} + + . Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace 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. + + . You can also write your own and support any artifact format.

diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index 1fa159461..8b2ec8373 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -37,16 +37,24 @@ const Trace: React.StatelessComponent<{}> = () => ( Use{' '} - - ganache-cli + + Geth {' '} - as a backing node. + as a backing node. We recommend using our{' '} + + Devnet Docker container + {' '} + which sets up a Geth node for testing purposes.{' '} + + Ganache support is a work in progress. + Understand and use{' '} web3-provider-engine - . + + . @@ -59,15 +67,17 @@ const Trace: React.StatelessComponent<{}> = () => ( 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 SolCompilerArtifactAdapter for use with{' '} + + . Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace 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. + + . You can also write your own and support any artifact format.

-- cgit From 56b8fd2074bc38dee26661d719fad3e88580ef54 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 12:55:14 +0100 Subject: Add fonts --- packages/dev-tools-pages/.gitignore | 4 +--- packages/dev-tools-pages/assets/fonts/.gitkeep | 0 .../assets/fonts/MaisonNeue-Bold-subset.woff2 | Bin 0 -> 11248 bytes .../assets/fonts/MaisonNeue-Book-subset.woff2 | Bin 0 -> 11232 bytes 4 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 packages/dev-tools-pages/assets/fonts/.gitkeep create mode 100644 packages/dev-tools-pages/assets/fonts/MaisonNeue-Bold-subset.woff2 create mode 100644 packages/dev-tools-pages/assets/fonts/MaisonNeue-Book-subset.woff2 (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore index 557b82311..d70ebaa1d 100644 --- a/packages/dev-tools-pages/.gitignore +++ b/packages/dev-tools-pages/.gitignore @@ -1,3 +1 @@ -public -assets/fonts/*.woff -assets/fonts/*.woff2 \ No newline at end of file +public \ No newline at end of file diff --git a/packages/dev-tools-pages/assets/fonts/.gitkeep b/packages/dev-tools-pages/assets/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/dev-tools-pages/assets/fonts/MaisonNeue-Bold-subset.woff2 b/packages/dev-tools-pages/assets/fonts/MaisonNeue-Bold-subset.woff2 new file mode 100644 index 000000000..54424f6fc Binary files /dev/null and b/packages/dev-tools-pages/assets/fonts/MaisonNeue-Bold-subset.woff2 differ diff --git a/packages/dev-tools-pages/assets/fonts/MaisonNeue-Book-subset.woff2 b/packages/dev-tools-pages/assets/fonts/MaisonNeue-Book-subset.woff2 new file mode 100644 index 000000000..8c2dea7ef Binary files /dev/null and b/packages/dev-tools-pages/assets/fonts/MaisonNeue-Book-subset.woff2 differ -- cgit From a873872cc77e53fc849e9b81bb9e8361e776c851 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 13:03:18 +0100 Subject: Open 0x.org on different tab --- packages/dev-tools-pages/ts/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx index 49019910c..4d3a8685c 100644 --- a/packages/dev-tools-pages/ts/components/header.tsx +++ b/packages/dev-tools-pages/ts/components/header.tsx @@ -17,7 +17,7 @@ const Header: React.StatelessComponent<{}> = () => ( {title} - + Built by 0x -- cgit From 737941e8c79376814b25b36737384c176a26fbff Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 13:29:47 +0100 Subject: Add call-to-action docs button at end of instructions again --- .../ts/components/call_to_action.tsx | 61 ++++++++++++++++++++++ packages/dev-tools-pages/ts/pages/compiler.tsx | 4 ++ packages/dev-tools-pages/ts/pages/coverage.tsx | 2 + packages/dev-tools-pages/ts/pages/profiler.tsx | 2 + packages/dev-tools-pages/ts/pages/trace.tsx | 3 ++ 5 files changed, 72 insertions(+) create mode 100644 packages/dev-tools-pages/ts/components/call_to_action.tsx (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/call_to_action.tsx b/packages/dev-tools-pages/ts/components/call_to_action.tsx new file mode 100644 index 000000000..abb92b9d3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/call_to_action.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ContextInterface, ThemeContext } from 'ts/context'; +import { media } from 'ts/variables'; + +import { Button } from './button'; +import { Beta } from './typography'; + +const CallToAction: React.StatelessComponent = ({ children }) => ( + + {({ subtitle, tagline, docLink }: ContextInterface) => ( + + + + + {navigator.userAgent !== 'ReactSnap' ? children : null} + + )} + +); + +const StyledCallToAction = styled.section` + text-align: center; + padding-top: 0; + padding-bottom: 1rem; + padding-left: 2.5rem; + padding-right: 2.5rem; + min-height: min-content; + max-height: 37.5rem; + height: 20vh; + position: relative; +`; + +const CallToActionContainer = styled.div` + margin: 0 auto; + max-width: 590px; +`; + +const Subtitle = styled.h2` + font-size: 3.75rem; + line-height: 1.16; + margin-bottom: 1.5rem; + + ${media.small` + font-size: 2.25rem; + line-height: 1.1; + margin-bottom: 1.375rem; + `}; +`; + +const Tagline = styled(Beta)` + margin-bottom: 2rem; + ${media.small` + margin-bottom: 1.25rem; + `}; +`; + +export { CallToAction }; diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx index 0468fd84f..27bbec831 100644 --- a/packages/dev-tools-pages/ts/pages/compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/compiler.tsx @@ -6,6 +6,7 @@ import { context } from 'ts/context/compiler'; import { Base } from 'ts/components/base'; import { Breakout } from 'ts/components/breakout'; +import { CallToAction } from 'ts/components/call_to_action'; import { Code } from 'ts/components/code'; import { Compiler as CompilerComponent } from 'ts/components/compiler'; import { Content } from 'ts/components/content'; @@ -166,6 +167,9 @@ const Compiler: React.StatelessComponent<{}> = () => ( +
+ +
); diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx index 0e0630a0c..de61a4042 100644 --- a/packages/dev-tools-pages/ts/pages/coverage.tsx +++ b/packages/dev-tools-pages/ts/pages/coverage.tsx @@ -6,6 +6,7 @@ import { context } from 'ts/context/coverage'; import { Base } from 'ts/components/base'; import { Breakout } from 'ts/components/breakout'; +import { CallToAction } from 'ts/components/call_to_action'; import { Code } from 'ts/components/code'; import { Content } from 'ts/components/content'; import { ContentBlock } from 'ts/components/content-block'; @@ -161,6 +162,7 @@ providerEngine.start();`} + ); diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index 96fad3495..4ce69ea7b 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -6,6 +6,7 @@ import { context } from 'ts/context/profiler'; import { Base } from 'ts/components/base'; import { Breakout } from 'ts/components/breakout'; +import { CallToAction } from 'ts/components/call_to_action'; import { Code } from 'ts/components/code'; import { Content } from 'ts/components/content'; import { ContentBlock } from 'ts/components/content-block'; @@ -158,6 +159,7 @@ providerEngine.start();`} + ); diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index 8b2ec8373..465d995b5 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -6,6 +6,7 @@ import { context } from 'ts/context/trace'; import { Base } from 'ts/components/base'; import { Breakout } from 'ts/components/breakout'; +import { CallToAction } from 'ts/components/call_to_action'; import { Code } from 'ts/components/code'; import { Content } from 'ts/components/content'; import { ContentBlock } from 'ts/components/content-block'; @@ -126,8 +127,10 @@ providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}) providerEngine.start();`} +

Stack traces will now be printed whenever your contracts revert!

+ ); -- cgit From d92dc47df83a38c3caba845ae053b39ccffd36b1 Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Thu, 17 Jan 2019 15:44:34 +0100 Subject: Last touches --- packages/dev-tools-pages/ts/pages/coverage.tsx | 2 +- packages/dev-tools-pages/ts/pages/profiler.tsx | 4 ++-- packages/dev-tools-pages/ts/pages/trace.tsx | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx index de61a4042..dc1f66462 100644 --- a/packages/dev-tools-pages/ts/pages/coverage.tsx +++ b/packages/dev-tools-pages/ts/pages/coverage.tsx @@ -128,7 +128,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi {`import { TruffleArtifactAdapter } from '@0x/sol-trace'; const projectRoot = '.'; -const solcVersion = '0.4.24'; +const solcVersion = '0.5.0'; const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`} diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index 4ce69ea7b..4af0dd851 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -125,7 +125,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi {`import { TruffleArtifactAdapter } from '@0x/sol-trace'; const projectRoot = '.'; -const solcVersion = '0.4.24'; +const solcVersion = '0.5.0'; const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`} @@ -146,7 +146,7 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`} {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; -import { ProfilerSubprovider } from '@0x/sol-coverage'; +import { ProfilerSubprovider } from '@0x/sol-profiler'; const defaultFromAddress = "..."; // Some ethereum address with test funds const profilerSubprovider = new ProfilerSubprovider(artifactAdapter, defaultFromAddress); diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index 465d995b5..abfac45dd 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -95,7 +95,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi {`import { TruffleArtifactAdapter } from '@0x/sol-trace'; const projectRoot = '.'; -const solcVersion = '0.4.24'; +const solcVersion = '0.5.0'; const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`} @@ -110,19 +110,19 @@ const artifactAdapter = new YourCustomArtifactsAdapter(...);`}

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

{`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; -import { TraceSubprovider } from '@0x/sol-coverage'; +import { RevertTraceSubprovider } from '@0x/sol-trace'; const defaultFromAddress = "..."; // Some ethereum address with test funds -const traceSubprovider = new TraceSubprovider(artifactAdapter, defaultFromAddress); +const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress); const providerEngine = new ProviderEngine(); -providerEngine.addProvider(traceSubprovider); +providerEngine.addProvider(revertTraceSubprovider); providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})); providerEngine.start();`} -- cgit From fe2f97dabd1511918051161c882c57bcc1d41ac2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 15:58:41 +0100 Subject: Add link to Truffle starter project --- packages/dev-tools-pages/ts/pages/coverage.tsx | 8 ++++++-- packages/dev-tools-pages/ts/pages/profiler.tsx | 8 ++++++-- packages/dev-tools-pages/ts/pages/trace.tsx | 8 ++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/pages/coverage.tsx b/packages/dev-tools-pages/ts/pages/coverage.tsx index dc1f66462..68b55f2a2 100644 --- a/packages/dev-tools-pages/ts/pages/coverage.tsx +++ b/packages/dev-tools-pages/ts/pages/coverage.tsx @@ -110,8 +110,12 @@ const Coverage: React.StatelessComponent<{}> = () => ( and TruffleArtifactAdapter for use with the{' '} Truffle framework - - . You can also write your own and support any artifact format. + {' '} + (Also see our{' '} + + Truffle example project + {' '} + for a complete walk-through). You can also write your own and support any artifact format.

diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx index 4af0dd851..1292d726c 100644 --- a/packages/dev-tools-pages/ts/pages/profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/profiler.tsx @@ -107,8 +107,12 @@ const Profiler: React.StatelessComponent<{}> = () => ( and TruffleArtifactAdapter for use with the{' '} Truffle framework - - . You can also write your own and support any artifact format. + {' '} + (Also see our{' '} + + Truffle example project + {' '} + for a complete walk-through). You can also write your own and support any artifact format.

diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index abfac45dd..aee779ac8 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -77,8 +77,12 @@ const Trace: React.StatelessComponent<{}> = () => ( and TruffleArtifactAdapter for use with the{' '} Truffle framework - - . You can also write your own and support any artifact format. + {' '} + (Also see our{' '} + + Truffle example project + {' '} + for a complete walk-through). You can also write your own and support any artifact format.

-- cgit From e68c5d5517ce82c771a68fb1852dceb9f05150ea Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 17 Jan 2019 16:24:03 +0100 Subject: Enable "copy" button on all code snippets that should be copy-able --- packages/dev-tools-pages/ts/components/call_to_action.tsx | 2 +- packages/dev-tools-pages/ts/components/code.tsx | 1 - packages/dev-tools-pages/ts/pages/compiler.tsx | 6 +++--- packages/dev-tools-pages/ts/pages/coverage.tsx | 10 +++++----- packages/dev-tools-pages/ts/pages/profiler.tsx | 10 +++++----- packages/dev-tools-pages/ts/pages/trace.tsx | 10 +++++----- 6 files changed, 19 insertions(+), 20 deletions(-) (limited to 'packages/dev-tools-pages') diff --git a/packages/dev-tools-pages/ts/components/call_to_action.tsx b/packages/dev-tools-pages/ts/components/call_to_action.tsx index abb92b9d3..bd255cfe1 100644 --- a/packages/dev-tools-pages/ts/components/call_to_action.tsx +++ b/packages/dev-tools-pages/ts/components/call_to_action.tsx @@ -9,7 +9,7 @@ import { Beta } from './typography'; const CallToAction: React.StatelessComponent = ({ children }) => ( - {({ subtitle, tagline, docLink }: ContextInterface) => ( + {({ docLink }: ContextInterface) => (