aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/pages
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-25 19:19:56 +0800
committerGitHub <noreply@github.com>2018-10-25 19:19:56 +0800
commit43e55a963bef2a2e4740ce27d456927b020b71f2 (patch)
tree742e684d5f3275e2bcbf5288c8718def845582cd /packages/dev-tools-pages/ts/pages
parent9cf055c1596d8abce854fea8f4e209573d6df7c8 (diff)
downloaddexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar.gz
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar.bz2
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar.lz
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar.xz
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.tar.zst
dexon-sol-tools-43e55a963bef2a2e4740ce27d456927b020b71f2.zip
Feature/syntaxhighlighting (#9)
* wip code highlighting of lines * Implements gutter component * WIP: Profiler with gutter * cleaned up highlight code * Removes before content for gutter styling * Styles gutter * Add correct Profiler code content * Adds color variable for gutter gray * refactor code component width gutter and diffing
Diffstat (limited to 'packages/dev-tools-pages/ts/pages')
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx30
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx25
2 files changed, 39 insertions, 16 deletions
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 01966537c..197ff174d 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,19 +22,25 @@ function Cov() {
coverage.
</IntroLead>
<IntroAside>
- <Code language="js.diff">
+ <Code
+ language="javascript"
+ diff
+ gutterLength={2}
+ gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+ >
{`+function executeTransaction(uint transactionId)
- public
-+notExecuted(transactionId)
-+pastTimeLock(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)
-
++ 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
}
}`}
</Code>
@@ -69,7 +75,7 @@ else {
<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
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ac88bd933..462789a16 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -9,18 +9,35 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
function Profiler() {
return (
<Base context={context}>
- <Intro title="ra">
- <p>
+ <Intro title="Headline">
+ <IntroLead>
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.
- </p>
+ </IntroLead>
+ <IntroAside>
+ <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
+ {`+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);
+}`}
+ </Code>
+ </IntroAside>
</Intro>
<Content>
<ContentBlock main title="Get started" />