From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 16 Nov 2018 11:05:30 +0100 Subject: fix linting + code syntax for statless components --- packages/dev-tools-pages/ts/pages/Profiler.tsx | 181 +++++++++++++------------ 1 file changed, 94 insertions(+), 87 deletions(-) (limited to 'packages/dev-tools-pages/ts/pages/Profiler.tsx') diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx index 87cc90b23..4e833e0d0 100644 --- a/packages/dev-tools-pages/ts/pages/Profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -1,46 +1,55 @@ import * as React from 'react'; -import { render, hydrate } from 'react-dom'; +import { hydrate, render } from 'react-dom'; import * as Loadable from 'react-loadable'; -import context from 'ts/context/profiler'; -import Base from 'ts/components/Base'; -import Content from 'ts/components/Content'; -import ContentBlock from 'ts/components/ContentBlock'; -import Breakout from 'ts/components/Breakout'; -import { Tabs, TabBlock } from 'ts/components/Tabs'; -import Code from 'ts/components/Code'; -import InlineCode from 'ts/components/InlineCode'; +import { context } from 'ts/context/profiler'; + +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 { Intro, IntroAside, IntroLead } from 'ts/components/Intro'; import { List, ListItem } from 'ts/components/List'; -import { Intro, IntroLead, IntroAside } from 'ts/components/Intro'; -import Hero from 'ts/components/Hero'; +import { TabBlock, Tabs } from 'ts/components/Tabs'; const Animation = Loadable({ loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'), loading: () =>
, delay: 1000, + render(loadable: { Animation: any }): React.ReactNode { + const Component = loadable.Animation; + return ; + }, }); -function Profiler() { - return ( - - - - - - -

- 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 { +const Profiler: React.StatelessComponent<{}> = () => ( + + + + + + +

+ 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; ++ balanceOf[msg.sender] += msg.value; + Deposit(msg.sender, msg.value); } -function withdraw(uint wad) public { @@ -49,70 +58,69 @@ function Profiler() { - msg.sender.transfer(wad); - Withdrawal(msg.sender, wad); }`} - - - - - - - - - Use ganache-cli as a backing node. - - - Understand and use web3-provider-engine. - - - - - - npm install @0x/sol-trace --save - + + + + + + + + + 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. -

+

+ 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'; + + + + {`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'; + + + + + {`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'; + + + + + {`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. -

+ + + +

+ 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 { ProviderEngine, RpcSubprovider } from 'web3-provider-engine'; import { RevertTraceSubprovider } from '@0x/sol-cov'; const defaultFromAddress = "..."; // Some ethereum address with test funds @@ -122,13 +130,12 @@ const providerEngine = new ProviderEngine(); providerEngine.addProvider(revertTraceSubprovider); providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'})); providerEngine.start();`} - - - - - - ); -} + + + + + +); const root = document.getElementById('app'); -- cgit v1.2.3