From 31d07fdac80a2a546646b1eb232fa7dd6319ce83 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 19 Nov 2018 17:27:00 +0100 Subject: rename all files and directories to lowercase --- packages/dev-tools-pages/ts/pages/trace.tsx | 116 ++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 packages/dev-tools-pages/ts/pages/trace.tsx (limited to 'packages/dev-tools-pages/ts/pages/trace.tsx') diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx new file mode 100644 index 000000000..23cbe98be --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -0,0 +1,116 @@ +import * as React from 'react'; +import { hydrate, render } from 'react-dom'; +import * as Loadable from 'react-loadable'; + +import { context } from 'ts/context/trace'; + +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/ContentBlock'; +import { Hero } from 'ts/components/Hero'; +import { InlineCode } from 'ts/components/InlineCode'; +import { List, ListItem } from 'ts/components/List'; +import { TabBlock, Tabs } from 'ts/components/Tabs'; +import { Trace as TraceComponent } from 'ts/components/Trace'; + +const Animation = Loadable({ + loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'), + loading: () =>
, + delay: 1000, + render(loadable: { Animation: any }): React.ReactNode { + const Component = loadable.Animation; + return ; + }, +}); + +const Trace: React.StatelessComponent<{}> = () => ( + + + + + + + + + + + Use ganache-cli as a backing node. + + + Understand and use web3-provider-engine. + + + + + + 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 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); +} -- cgit v1.2.3 From 117726c6d80dd20e8b9409cec23b0c062690b0df Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 19 Nov 2018 17:35:22 +0100 Subject: fix imports after renaming --- packages/dev-tools-pages/ts/pages/trace.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'packages/dev-tools-pages/ts/pages/trace.tsx') diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index 23cbe98be..acb8fb841 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable'; import { context } from 'ts/context/trace'; -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/ContentBlock'; -import { Hero } from 'ts/components/Hero'; -import { InlineCode } from 'ts/components/InlineCode'; -import { List, ListItem } from 'ts/components/List'; -import { TabBlock, Tabs } from 'ts/components/Tabs'; -import { Trace as TraceComponent } from 'ts/components/Trace'; +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 { List, ListItem } from 'ts/components/list'; +import { TabBlock, Tabs } from 'ts/components/tabs'; +import { Trace as TraceComponent } from 'ts/components/trace'; const Animation = Loadable({ - loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'), + loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'), loading: () =>
, delay: 1000, render(loadable: { Animation: any }): React.ReactNode { -- cgit v1.2.3 From 339ec3e8ebac25fe7ee6eb26b89bfc9b9e00db26 Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 20 Nov 2018 15:18:09 +0100 Subject: uniq export names for animations --- packages/dev-tools-pages/ts/pages/trace.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/dev-tools-pages/ts/pages/trace.tsx') diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx index acb8fb841..a25d2eff8 100644 --- a/packages/dev-tools-pages/ts/pages/trace.tsx +++ b/packages/dev-tools-pages/ts/pages/trace.tsx @@ -19,8 +19,8 @@ const Animation = Loadable({ loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'), loading: () =>
, delay: 1000, - render(loadable: { Animation: any }): React.ReactNode { - const Component = loadable.Animation; + render(loadable: { TraceAnimation: any }): React.ReactNode { + const Component = loadable.TraceAnimation; return ; }, }); -- cgit v1.2.3