diff --git a/custom_theme/docs.html b/custom_theme/docs.html index 7f5a86467..cdd3c00b9 100644 --- a/custom_theme/docs.html +++ b/custom_theme/docs.html @@ -1,166 +1,158 @@ {% extends "main.html" %} -{% block tabs %} - {{ super() }} - - - + .card-img-top { + display: inline-block; + margin: 0 0.5em 0 0; + width: 2.5rem; + max-height: 2.5rem; + } +
-

Documentation

-

Learn how to use the full Truffle Suite with Ethereum, Quorum, Hyperledger EVM, and other EVM-based chains

- -
+

+ The Truffle Suite has everything you need to develop smart contracts for + Ethereum and other EVM-compatible chains: a CLI tool to build, test, and + deploy smart contracts; a Dashboard to inspect and debug transactions; and a + simulator to test your ideas quickly and work with forked networks. +

-
+
-
Truffle LogoTRUFFLE
+
+ Truffle LogoTRUFFLE +
-

SMART CONTRACTS MADE SWEETER Compile, test, debug and deploy with the most popular smart contract development tool.

+

+ SMART CONTRACTS MADE SWEETER Compile, test, debug + and deploy with the most popular smart contract development tool. +

- +
-
Ganache LogoGanache
+
+ Truffle LogoDashboard +
-

ONE CLICK BLOCKCHAIN Fast, easy, local development blockchain in UI and CLI flavors. Introspection of contract data and events.

+

+ INSIGHTFUL DEVELOPMENT A platform for dapp + developers to get insights about smart contracts and their + transactions. +

- -
+ +
-
Drizzle Logodrizzle
+
+ Ganache LogoGanache +
-

FRESH CHAIN-DATA FOR FRONT-ENDS Standards-compliant wallet connection, account and contract state management. Turn-key React component library.

+

+ ONE CLICK BLOCKCHAIN Fast, easy, local + development blockchain in UI and CLI flavors. Introspection of + contract data and events. +

- -
- + + -
- -
-
-
Ethereum LogoEthereum
-
-
- -
- -
- -
-
-
Quroum LogoQuorum
-
-
- -
- -
- -
-
-
Tezos LogoTezos
-
-
- -
- -
- -
-
-
Fabric LogoHyperledger Fabric (EVM)
-
-
- -
- -
- -
-
-
Corda LogoCorda
-
-
- -
- -
- -
+ +
-
- Filecoin LogoFilecoin +
+ Truffle for VSCode LogoTRUFFLE for VSCode
+
+

+ DAPP DEVELOPMENT SIMPLIFIED Truffle for VSCode + simplifies how you create, connect to, build and deploy smart + contracts on an EVM-based blockchain. +

-
- {% endblock %} @@ -168,6 +160,4 @@
-{% block footer %} - {% include "partials/footer.html" %} -{% endblock %} +{% block footer %} {% include "partials/footer.html" %} {% endblock %} diff --git a/src/assets/stylesheets/extra.css b/src/assets/stylesheets/extra.css index 617781996..3ee384ce8 100644 --- a/src/assets/stylesheets/extra.css +++ b/src/assets/stylesheets/extra.css @@ -1,45 +1,46 @@ -@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap"); html { scroll-behavior: auto; } -.md-typeset :is(.admonition,details) { +.md-typeset :is(.admonition, details) { border-color: var(--mint); } -.md-typeset :is(.admonition-title,summary) { +.md-typeset :is(.admonition-title, summary) { border-color: var(--mint); background-color: var(--md-primary-fg-color); } -.md-typeset :is(.admonition-title,summary):before { +.md-typeset :is(.admonition-title, summary):before { background-color: var(--mint); } :root { - --milk: #F6F5EF; + --milk: #f6f5ef; /* mint, but transparent*/ --transparent-mint: #3fe0c533; - --dark-mint: #0C5A4E; - --cream: #F2EDE7; + --dark-mint: #0c5a4e; + --cream: #f2ede7; --foil: #6d6d6d; --light-chocolate: #5e464d; - --dark-chocolate: #33262A; + --dark-chocolate: #33262a; --mint: #3fe0c5; --ganache: #e4a663; --drizzle: #e911bd; - --md-accent-fg-color: var(--dark-mint); - --md-primary-fg-color: var(--milk); + --md-accent-fg-color: var(--dark-mint); + --md-primary-fg-color: var(--milk); --md-default-fg-color--light: var(--dark-chocolate); --md-primary-fg-color--light: var(--light-chocolate); - --md-default-fg-color--lightest: var(--light-chocolate); - --md-primary-fg-color--dark: var(--light-chocolate); - --md-primary-bg-color: var(--dark-chocolate); + --md-default-fg-color--lightest: var(--light-chocolate); + --md-primary-fg-color--dark: var(--light-chocolate); + --md-primary-bg-color: var(--dark-chocolate); --md-accent-fg-color--transparent: var(--transparent-mint); --md-typeset-a-color: var(--dark-chocolate); @@ -47,26 +48,28 @@ html { --bs-body-bg: var(--cream); --bs-dark: var(--dark-chocolate); --bs-body-font-size: 0.8rem; - --bs-dark-rgb: 51,38,42; + --bs-dark-rgb: 51, 38, 42; } [data-md-color-scheme="chocolatey"] { - --md-primary-fg-color: var(--light-chocolate); + --md-primary-fg-color: var(--light-chocolate); --md-primary-fg-color--light: var(--cream); --md-default-fg-color--light: var(--foil); - --md-default-fg-color--lightest: var(--milk); - --md-primary-fg-color--dark: var(--foil); - --md-primary-bg-color: var(--milk); + --md-default-fg-color--lightest: var(--milk); + --md-primary-fg-color--dark: var(--foil); + --md-primary-bg-color: var(--milk); --md-typeset-a-color: var(--cream); --bs-body-color: var(--milk); --bs-body-bg: var(--dark-chocolate); --bs-dark: var(--dark-chocolate); - --bs-dark-rgb: 51,38,42; + --bs-dark-rgb: 51, 38, 42; } -a, .md-typeset a, .md-typeset .alert a { +a, +.md-typeset a, +.md-typeset .alert a { /* it would be nice if we could use one of our primary brand colors (truffle, ganache, drizzle), or even the "light-chocolate" color, but these are all too lights against our cream background. So we underline @@ -75,7 +78,9 @@ a, .md-typeset a, .md-typeset .alert a { text-decoration: underline; color: var(--md-accent-fg-color); } -a.link-card, nav a, .footer-naviation a { +a.link-card, +nav a, +.footer-naviation a { /* the footer links are obviously links, so we don't need the underline signal */ text-decoration: none; } @@ -87,24 +92,24 @@ a.link-card, nav a, .footer-naviation a { } @media screen and (max-width: 76.1875em) { - [data-md-toggle=drawer]:not(:checked)~.md-container .md-sidebar--primary { + [data-md-toggle="drawer"]:not(:checked) ~ .md-container .md-sidebar--primary { display: none; } - [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary { + [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary { display: block; } /* make the nav keyboard navigatable. without this hidden parts of the nav drawer are focusable, but invisible. */ - .md-nav__toggle~.md-nav{ + .md-nav__toggle ~ .md-nav { visibility: hidden; } - .md-nav__toggle:checked~.md-nav{ + .md-nav__toggle:checked ~ .md-nav { visibility: visible; - } + } } /* hide the close navigation link*/ -.md-nav__toggle:not(:checked)~.close-sidebar-link { +.md-nav__toggle:not(:checked) ~ .close-sidebar-link { display: none; } .close-sidebar-link { @@ -117,7 +122,8 @@ a.link-card, nav a, .footer-naviation a { .md-banner { text-align: center; } -.md-banner a:hover, .md-banner a:focus { +.md-banner a:hover, +.md-banner a:focus { color: var(--mint); } .md-header__button { @@ -134,7 +140,7 @@ a.link-card, nav a, .footer-naviation a { .md-announce__inner a { color: var(--cream); } -.md-social{ +.md-social { text-align: left; margin-left: 1.25em; } @@ -155,8 +161,7 @@ pre { @media screen and (max-width: 76.1875em) { .md-nav--primary .md-nav__title, - .md-nav--primary .md-nav__title~.md-nav__list - { + .md-nav--primary .md-nav__title ~ .md-nav__list { background-color: var(--bs-body-bg); } @@ -171,8 +176,9 @@ pre { } } -.md-nav__link, .md-nav__item .md-nav__link--active, -.md-nav--primary .md-nav__item--active>.md-nav__link { +.md-nav__link, +.md-nav__item .md-nav__link--active, +.md-nav--primary .md-nav__item--active > .md-nav__link { color: var(--md-primary-fg-color--light); } .md-nav--primary .md-nav__link { @@ -184,9 +190,10 @@ pre { /* material overrides */ -.md-ellipsis, .md-nav__title { +.md-ellipsis, +.md-nav__title { text-transform: uppercase; - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; font-weight: 400 !important; } @@ -194,7 +201,7 @@ pre { font-weight: 400; } -[dir=ltr] .md-header__title { +[dir="ltr"] .md-header__title { margin-left: 0rem; } @@ -209,17 +216,17 @@ pre { .mdx-hero__content { margin: 2rem 0; text-align: center; - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; } .md-tabs__link { - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; text-transform: uppercase; /* ensure there is enough contrast to improve legibility */ - opacity: .85; - color:var(--md-primary-fg-color--light); + opacity: 0.85; + color: var(--md-primary-fg-color--light); } -.md-tabs__link--active{ +.md-tabs__link--active { opacity: 1; } @@ -242,11 +249,13 @@ pre { color: var(--md-primary-fg-color--light); } -.md-search-result__item, .md-search-result__meta, .md-search-result__link { +.md-search-result__item, +.md-search-result__meta, +.md-search-result__link { background-color: var(--bs-body-bg); color: var(--md-primary-fg-color--light); } -.md-search-result__more summary:is(:focus,:hover), +.md-search-result__more summary:is(:focus, :hover), .md-search-result__link:hover { color: var(--md-primary-bg-color); } @@ -262,7 +271,7 @@ pre { .md-search__input::placeholder { /* make sure contrast is high enough */ - color: #2B2B2B; + color: #2b2b2b; } .md-search__form:focus-within { @@ -270,7 +279,8 @@ pre { } @media screen and (min-width: 60em) { - .md-search__form:hover, .md-search__input { + .md-search__form:hover, + .md-search__input { color: var(--md-primary-fg-color--dark); } .md-search__input:hover:not(:focus) { @@ -279,23 +289,23 @@ pre { clickable elements with no discernible end make for a bad experience. without this line the background of the input form matches the background of the page. */ - background-color: rgba(0,0,0,.1) !important; + background-color: rgba(0, 0, 0, 0.1) !important; } .md-search__input:hover::-webkit-input-placeholder { - color: var(--md-primary-bg-color); + color: var(--md-primary-bg-color); } /* Firefox < 19 */ .md-search__input:hover:-moz-placeholder { - color: var(--md-primary-bg-color); - } + color: var(--md-primary-bg-color); + } /* Firefox > 19 */ .md-search__input:hover::-moz-placeholder { - color: var(--md-primary-bg-color); - } + color: var(--md-primary-bg-color); + } /* Internet Explorer 10 */ .md-search__input:hover:-ms-input-placeholder { - color: var(--md-primary-bg-color); - } + color: var(--md-primary-bg-color); + } } .md-footer { @@ -327,33 +337,42 @@ a.link-card:hover { } .text-ganache { - font-family: 'Grand Hotel', serif; + font-family: "Grand Hotel", serif; text-transform: none; } .text-truffle { - font-family: 'Roboto Mono', monospace; + font-family: "Roboto Mono", monospace; font-weight: 600; - letter-spacing: .125em; + letter-spacing: 0.125em; text-transform: uppercase; } +.text-truffle-dashboard { + font-family: "Pacifico", cursive; + font-weight: 400; +} + +.text-truffle-dashboard span { + display: inline-block; + transform: translateY(0.125em); +} + .text-drizzle { - font-family: 'Varela Round', sans-serif; + font-family: "Varela Round", sans-serif; text-transform: lowercase; } .drizzle-z-skew-1 { display: inline-block; - transform: skewY(-20deg) translateX(.06em); + transform: skewY(-20deg) translateX(0.06em); } .drizzle-z-skew-2 { display: inline-block; - transform: skewY(-20deg) translate(-.06em, .26em); + transform: skewY(-20deg) translate(-0.06em, 0.26em); } - .bd-milk-chocolate { background-color: var(--light-chocolate); color: var(--milk); @@ -381,26 +400,26 @@ a.link-card:is(:hover, :focus, :focus-visible) { } a.link-card:is(:hover, :focus, :focus-visible) > .card { outline: 2px solid var(--mint); - box-shadow:0 0 5px rgba(0,0,0,.2); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .btn { - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; text-transform: uppercase; /* separate buttons to ensure click targets are easy to hit */ - margin-right:.25em; - transition: all .1 ease-in-out; + margin-right: 0.25em; + transition: all 0.1 ease-in-out; /* make sure buttons aren't on top of each other if they wrap. this can happen on the home page buttons on small screens */ - margin-bottom: .5em; + margin-bottom: 0.5em; } .btn:hover { /* a darker version of dark-chocolate to increase contrast against the drizzle pink for better accessibility */ - color: #1A1416; + color: #1a1416; filter: brightness(110%); - box-shadow: 0 3px 3px rgba(0,0,0,.2); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } .btn-truffle { @@ -408,14 +427,14 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { background-color: var(--mint); border-color: var(--mint); } -.btn:focus{ - box-shadow: 0 0 0 .25rem var(--mint); +.btn:focus { + box-shadow: 0 0 0 0.25rem var(--mint); } .btn-truffle:focus { - box-shadow: 0 0 0 .25rem var(--drizzle); + box-shadow: 0 0 0 0.25rem var(--drizzle); } .btn-drizzle:focus { - box-shadow: 0 0 0 .25rem var(--ganache); + box-shadow: 0 0 0 0.25rem var(--ganache); } .btn-ganache { @@ -426,9 +445,9 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { .btn-drizzle { /* a darker version of dark-chocolate to increase contrast against the drizzle pink for better accessibility */ - color: #1A1416; + color: #1a1416; background-color: var(--drizzle); - border-color: var(--drizzle);; + border-color: var(--drizzle); } .alert-info { @@ -448,7 +467,7 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { .md-typeset .alert-warning a { color: var(--dark-chocolate); /* increase contrast against the alter-warning background */ - filter:brightness(.9); + filter: brightness(0.9); } .alert-danger { @@ -467,7 +486,8 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { .hs-form label .hs-form-required { color: #d80b0b; } -.hs-form input[type="text"], .hs-form input[type="email"] { +.hs-form input[type="text"], +.hs-form input[type="email"] { display: block; width: 100%; padding: 0.375rem 0.75rem; @@ -482,7 +502,8 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin-bottom: 1rem; } -.hs-form input[type="text"]:focus, .hs-form input[type="email"]:focus { +.hs-form input[type="text"]:focus, +.hs-form input[type="email"]:focus { color: #495057; background-color: #fff; border-color: #3fe0c5; @@ -500,7 +521,7 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { vertical-align: middle; user-select: none; border: none; - font-family: 'Oswald', sans-serif; + font-family: "Oswald", sans-serif; text-transform: uppercase; padding: 0.375rem 0.75rem; font-size: 1rem; @@ -510,7 +531,7 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { } .hs-form input[type="submit"]:hover { filter: brightness(110%); - box-shadow: 0 3px 3px rgba(0,0,0,.2); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } .hs-form input[type="submit"]:focus { outline: solid 2px var(--drizzle); @@ -522,10 +543,10 @@ a.link-card:is(:hover, :focus, :focus-visible) > .card { margin-top: -1rem; color: #d80b0b; position: absolute; - font-size: .8em; + font-size: 0.8em; } -.hjs-form ul.hs_error_rollup.hs-error-msgs{ - position:relative; +.hjs-form ul.hs_error_rollup.hs-error-msgs { + position: relative; } footer .hs-form label { margin-bottom: 0.25rem; @@ -547,7 +568,8 @@ footer .hs-form ul.hs-error-msgs { list-style-type: none; padding-left: 0; } -.md-typeset ul li.hs-form-booleancheckbox, .md-typeset ul.inputs-list { +.md-typeset ul li.hs-form-booleancheckbox, +.md-typeset ul.inputs-list { margin-left: 0; } .hs-form-booleancheckbox-display { @@ -556,9 +578,10 @@ footer .hs-form ul.hs-error-msgs { @media screen and (max-width: 767.98px) { .hs-form-inline .hs-form .hs-form-field { display: block; - } + } } -.hs-form-docs input[type="text"], .hs-form-docs input[type="email"] { +.hs-form-docs input[type="text"], +.hs-form-docs input[type="email"] { background-color: #f8f5f0; color: #495057; } @@ -577,7 +600,7 @@ footer .hs-form ul.hs-error-msgs { .truffle-feature-row img { max-height: 260px; margin-bottom: 2rem; - } + } } /* custom */ @@ -623,7 +646,17 @@ footer .hs-form ul.hs-error-msgs { @media screen and (max-width: 76.1875em) { /* show the nav section when elemtn within nav is focused */ .md-nav:focus-within { - opacity:1; + opacity: 1; transform: translateX(0); } } + +/* Docs */ + +.docs-row-cards [class^="col-md-"] { + margin-bottom: 1rem; +} + +.docs-row-cards .card { + height: 100%; +} diff --git a/src/docs/.pages b/src/docs/.pages index c4a66b191..450cdbf6f 100644 --- a/src/docs/.pages +++ b/src/docs/.pages @@ -1,7 +1,7 @@ nav: - - All Docs: index.md - - truffle - - ganache - - drizzle - - Truffle for VSCode: vscode-ext - - tezos \ No newline at end of file + - All Docs: index.md + - truffle + - Truffle Dashboard: truffle-dashboard + - ganache + - drizzle + - Truffle for VSCode: vscode-ext diff --git a/src/docs/truffle-dashboard/.pages b/src/docs/truffle-dashboard/.pages new file mode 100644 index 000000000..681000f28 --- /dev/null +++ b/src/docs/truffle-dashboard/.pages @@ -0,0 +1,4 @@ +nav: + - What is Truffle Dashboard?: index.md + - Quickstart: quickstart.md + - Debugger: truffle-dashboard-debugger.md diff --git a/src/docs/truffle-dashboard/index.md b/src/docs/truffle-dashboard/index.md new file mode 100644 index 000000000..f23500128 --- /dev/null +++ b/src/docs/truffle-dashboard/index.md @@ -0,0 +1,16 @@ +--- +title: What is Truffle Dashboard? +--- + +Truffle Dashboard Logo + +# What is Truffle Dashboard? + +Truffle Dashboard is a platform for smart contract developers to safely execute and get insights about their transactions. It supports both Truffle and Hardhat. Truffle Dashboard to provides an easy way to use your existing MetaMask wallet for your deployments and for other transactions that you need to send from a command line context. + +Today it has 2 main features: + +- **Transaction Inspection and Signing**: By using Dashboard as your provider during development, transactions sent via a CLI (Truffle or Hardhat), tests, and/or dapp frontend will be intercepted for inspection and signing with MetaMask. Inspection includes the decoded function name, supplied parameters, and the ability to debug the transaction before execution. Because the Truffle Dashboard connects directly to MetaMask it is also possible to use it in combination with hardware wallets like Ledger or Trezor. + [Get started with Truffle Dashboard »](/docs/truffle-dashboard/quickstart) +- **Transaction Debugging**: Step through the execution of a transaction to diagnose errors and check for potential exploits. Dashboard’s GUI debugger is easier to use than a CLI debugger and is conveniently integrated into the transaction signing workflow--just click the Debug button on an awaiting confirmation. Truffle’s debugger supports older versions of Solidity and better decoding than competing debuggers. + [Learn more about debugging transactions with Truffle Dashboard »](/docs/truffle-dashboard/truffle-dashboard-debugger) diff --git a/src/docs/truffle-dashboard/quickstart.md b/src/docs/truffle-dashboard/quickstart.md new file mode 100644 index 000000000..c76802c1e --- /dev/null +++ b/src/docs/truffle-dashboard/quickstart.md @@ -0,0 +1,124 @@ +--- +title: Truffle Dashboard quickstart +layout: docs.hbs +--- + +# Truffle Dashboard quickstart + +## Installation + +### As part of Truffle CLI + +Truffle Dashboard comes with Truffle CLI, so if you have a global Truffle CLI installation, you can run `truffle dashboard` in the console to start a dashboard instance. If you plan to use Truffle Dashboard with Hardhat, you'll probably want to use the npx approach unless you know you want to use Truffle CLI. Otherwise, [here are the installation instructions for Truffle CLI](/docs/truffle/how-to/install/). + +### Standalone with npx + +To run Truffle Dashboard without having to formally install Truffle CLI, you can run `npx truffle dashboard` and dependency installation will be handled for you. + +Note: Currently this approach still installs Truffle CLI in the background. We're working to remove dependencies on Truffle CLI, so in the future this command will get progressively lighter. + +## Starting a dashboard + +To start a Truffle Dashboard, you need to run the `truffle dashboard` command (or `npx truffle dashboard`) in a separate terminal window. + +``` +> truffle dashboard [--port ] [--host ] [--verbose] + +Truffle Dashboard running at http://localhost:24012 +DashboardProvider RPC endpoint running at http://localhost:24012/rpc +``` + +By default, the command above starts a dashboard at `http://localhost:24012` and opens the dashboard in a new tab in your default browser. The Dashboard then prompts you to connect your wallet and confirm that you're connected to the right network. **You should double check your connected network at this point, since switching to a different network during a deployment can have unintended consequences.** + +![Connect your wallet to the Truffle Dashboard](/img/docs/truffle-dashboard/quickstart/connect-wallet.png) + +![Confirm your connected network](/img/docs/truffle-dashboard/quickstart/confirm-network.png) + +Truffle Dashboard can be used with Truffle or Hardhat. Please select a framework below for installation and configuration instructions. + +- [Truffle](#usage-with-truffle) +- [Hardhat](#usage-with-hardhat) + +## Usage with Truffle + +### Connection + +To make connecting to the Truffle Dashboard easy, Truffle includes a built in network named "dashboard". This built in network automatically uses the port and host specified in the dashboard configuration or falls back to the default `http://localhost:24012`. This built in network can be used with all your deployments or scripts. + +``` +truffle migrate --network dashboard +truffle console --network dashboard +``` + +From there, every Ethereum RPC request will be forwarded from Truffle to the Truffle Dashboard, where the user can inspect the RPC requests and process them with MetaMask. + +![Truffle Dashboard Transaction](/img/docs/truffle-dashboard/quickstart/signature-request.png) + +### Configuration + +Any additional network options or overrides can be provided by adding a network called "dashboard" to your `truffle-config.js` file and providing network options like you would a regular network. + +```js +module.exports = { + // ... rest of truffle config + + networks: { + // ... rest of network config + + dashboard: { + networkCheckTimeout: 120000, + } + } + + dashboard: { + // ... dashboard host/port config + } +}; +``` + +The port and host can be configured through command line options, or by configuring them inside your `truffle-config.js`. + +```js +module.exports = { + // ... rest of truffle config + + dashboard: { + port: 24012, + } + + networks: { + // ... network configurations, including the network named 'dashboard' + } +} +``` + +## Usage with Hardhat + +To make the Truffle Dashboard accessible to everyone, we developed it to be agnostic about the tools +you're using. You can use the Truffle Dashboard with non-Truffle tools such as Hardhat. + +### Configuration + +When using the Truffle Dashboard with Hardhat, you need to create a network configuration inside your `hardhat.config.js` file that specifies the Truffle Dashboard's RPC URL. + +```js +module.exports = { + // ... rest of hardhat config + + networks: { + // ... rest of network config + + "truffle-dashboard": { + url: "http://localhost:24012/rpc", + }, + }, +}; +``` + +### Connection + +Once you've added Truffle Dashboard as a network in your `hardhat.config.js`, it can be used with any Hardhat task or tools like hardhat-deploy. + +``` +hardhat deploy --network truffle-dashboard +``` diff --git a/src/docs/truffle-dashboard/truffle-dashboard-debugger.md b/src/docs/truffle-dashboard/truffle-dashboard-debugger.md new file mode 100644 index 000000000..c553e8043 --- /dev/null +++ b/src/docs/truffle-dashboard/truffle-dashboard-debugger.md @@ -0,0 +1,74 @@ +--- +title: Truffle Dashboard Debugger +layout: docs.hbs +--- + +# Truffle Dashboard: Debugger + +Truffle’s debugger is best-in-class thanks to its codec handling vague types, ability to deal with malformed data, and supporter for older Soldiity versions. The primary method of accessing Truffle's debugger up to now has been via the CLI, but now you can enjoy a point-and-click debugging experience with Truffle Dashboard. Some developers prefer a GUI debugger as it’s easier to navigate with context and keeps things like variables and the stack close at hand. + +The debugger can be initialized 2 ways: [from the signature confirmation screen](#debugging-from-a-signature-confirmation) or [by providing a transaction hash on the debugger screen](#debugging-from-a-transaction-hash). Both scenarios will result in simulating the transaction on Ganache (forked from the relevant network, if applicable) and debugging the subsequent result. + +

+ We highly recommend adding an Etherscan API Key to speed up debugger initialization. The debugger will need to fetch and compile any contracts not included in your project, which requires a number of API calls. Supplying an Etherscan API key allows us to do this far faster thanks to higher rate limits. +

+ +## Adding an Etherscan API Key + +Navigate to the debugger screen using the sidebar link. You’ll be prompted to add an Etherscan API key if you haven’t already. We’ll store this key in your browser’s local storage. + +![Add your Etherscan key to Truffle Dashboard when prompted on the Debugger screen](/img/docs/truffle-dashboard/truffle-dashboard-debugger/add-etherscan-key.png) + +## Deleting and Changing an Etherscan API Key + +If you’ve already provided a key, you may have rotated it or wish to use a different one. To change the API key, first delete your existing key, then add the new one. + +![Remove your Etherscan key from Truffle Dashboard when prompted on the Debugger screen to add a new one](/img/docs/truffle-dashboard/truffle-dashboard-debugger/delete-etherscan-key.png) + +## Debugging from a Signature Confirmation + +When a transaction appears in Truffle Dashboard for signature confirmation, you’ll see a Simulate button to the right of the other options on the card. Clicking this button will launch the debugger for this transaction. + +![Debug a transaction from the Signature Confirmation screen by clicking the Debug button on a card](/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-button.png) + +## Debugging from a Transaction Hash + +You can paste any arbitrary transaction hash into the debugger rather than using the signature confirmation cards. Paste the desired transaction hash into the input at the upper-right of the debugger screen and click the debug button or press enter to start the debugger session. Note that the Debug button will be disabled until a valid transaction hash is provided. + +![Debug a transaction using its hash by pasting the hash into the text input on the Debugger screen](/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-hash.png) + +## The Debugger UI + +The debugger UI is composed of a top menu and 4 panels. + +![The Dashboard Debugger interface](/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-interface.png) + +The top menu contains 6 buttons in addition to the transaction hash input: + +- **Continue (Until Next Breakpoint)**: If a breakpoint is set, this continues execution until the next breakpoint is reached or the last line is executed. Note this will be inactive until you set a breakpoint. +- **Step Next**: Steps to the next logical statement or expression in the source code. For example, evaluating sub expressions will need to occur first before the virtual machine can evaluate the full expression. Use this command if you'd like to analyze each logical item the virtual machine evaluates. +- **Step Over**: Steps over the current line, relative to the position of the statement or expression currently being evaluated in the Solidity source file. Use this command if you don't want to step into a function call or contract creation on the current line, or if you'd like to quickly jump to a specific point in the source file. +- **Step Into**: Steps into the function call or contract creation currently being evaluated. Use this command to jump into the function and quickly start debugging the code that exists there. +- **Step Out**: Steps out of the currently running function. Use this command to quickly get back to the calling function, or end execution of the transaction if this was the entry point of the transaction. +- **Reset**: Reset the debugger to the beginning of the transaction. Note this will be inactive until you step in some way. + +There are 4 panels: + +- **Code**: Contains the smart contract code we’re stepping through. Each contract involved in this transaction is displayed in a tab. If we’re unable to get the source code of a contract, we can still debug the transaction, but that particular contract will be opaque and you’ll see an “Unknown Contract” tab noting this. +- **Variables**: Contains the current variables and their values. +- **Breakpoints**: Contains the breakpoints you’ve set. See [Managing Breakpoints](#managing-breakpoints) for more information. +- **Stack**: Contains the callstack at the current point of execution. + +## Managing Breakpoints + +### Setting a Breakpoint + +To set a breakpoint, click the space to the left of a line number. You’ll see a red dot appear in that space and an entry added to the Breakpoints panel. + +### Jumping to a Breakpoint + +To jump to the contract and line containing a particular breakpoint, click the text containing the contract name and line number in the breakpoints panel. + +### Removing a Breakpoint + +To remove a breakpoint, click the red dot for the breakpoint you’d like to remove. You can also click the red dot next to the breakpoint in the breakpoints panel. diff --git a/src/docs/truffle/.pages b/src/docs/truffle/.pages index 5f6c4d06b..5a8b76de1 100644 --- a/src/docs/truffle/.pages +++ b/src/docs/truffle/.pages @@ -4,5 +4,5 @@ nav: - How to: how-to - Concepts: concepts - Reference: reference - - Tutorials: /guides + - Tutorials: guides - Support: contact-the-developers.md diff --git a/src/docs/truffle/how-to/.pages b/src/docs/truffle/how-to/.pages index 8ef1e0e87..3e359cdf8 100644 --- a/src/docs/truffle/how-to/.pages +++ b/src/docs/truffle/how-to/.pages @@ -4,11 +4,10 @@ nav: - Compile a project: compile-contracts.md - Integrate with MetaMask: truffle-with-metamask.md - Work with contracts: contracts - - Use Truffle Dashboard: use-the-truffle-dashboard.md - Debug and test: debug-test - Use NPM package manager: package-management-via-npm.md - Use the build pipeline: use-the-build-pipeline.md - Preserve content: preserve-files-and-content-to-storage-platforms.md - Write external scripts: write-external-scripts.md - Configure a distributed ledger: distributed-ledger-support - - Create a Truffle Box: create-a-truffle-box.md \ No newline at end of file + - Create a Truffle Box: create-a-truffle-box.md diff --git a/src/docs/truffle/how-to/use-the-truffle-dashboard.md b/src/docs/truffle/how-to/use-the-truffle-dashboard.md deleted file mode 100644 index 6980ea358..000000000 --- a/src/docs/truffle/how-to/use-the-truffle-dashboard.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Use Truffle Dashboard -layout: docs.hbs ---- -# Use Truffle Dashboard - -When deploying your smart contracts you need to specify an Ethereum account that has enough funds to cover the transaction fees of the deployment. A popular method of doing this is copy-pasting your mnemonic phrase to a gitignored `.env` file so that it can be used for, e.g., the `@truffle/hdwallet-provider`. However, it is generally a bad practice to copy-paste your keys, especially since we have wallets like MetaMask that can send transactions for us. - -We developed the Truffle Dashboard to provide an easy way to use your existing MetaMask wallet for your deployments and for other transactions that you need to send from a command line context. Because the Truffle Dashboard connects directly to MetaMask it is also possible to use it in combination with hardware wallets like Ledger or Trezor. - -## Starting a dashboard - -To start a Truffle Dashboard, you need to run the `truffle dashboard` command in a separate terminal window. - -``` -> truffle dashboard [--port ] [--host ] [--verbose] - -Truffle Dashboard running at http://localhost:24012 -DashboardProvider RPC endpoint running at http://localhost:24012/rpc -``` - -By default, the command above starts a dashboard at `http://localhost:24012` and opens the dashboard in a new tab in your default browser. The Dashboard then prompts you to connect your wallet and confirm that you're connected to the right network. **You should double check your connected network at this point, since switching to a different network during a deployment can have unintended consequences.** - -![Connect your wallet to the Truffle Dashboard](/img/docs/truffle/using-the-truffle-dashboard/truffle-dashboard-connect.png) - -![Confirm your connected network](/img/docs/truffle/using-the-truffle-dashboard/truffle-dashboard-confirm.png) - -The port and host can be configured through command line options, or by configuring them inside your `truffle-config.js`. - -```js -module.exports = { - // ... rest of truffle config - - dashboard: { - port: 24012, - } - - networks: { - // ... network configurations, including the network named 'dashboard' - } -} -``` - - -## Connecting to the dashboard - -To make connecting to the Truffle Dashboard easy, Truffle includes a built in network named "dashboard". This built in network automatically uses the port and host specified in the dashboard configuration or falls back to the default `http://localhost:24012`. This built in network can be used with all your deployments or scripts. - -``` -truffle migrate --network dashboard -truffle console --network dashboard -``` - -From there, every Ethereum RPC request will be forwarded from Truffle to the Truffle Dashboard, where the user can inspect the RPC requests and process them with MetaMask. - -![Truffle Dashboard Transaction](/img/docs/truffle/using-the-truffle-dashboard/truffle-dashboard-transaction.png) - -Any additional network options or overrides can be provided by adding a network called "dashboard" to your `truffle-config.js` file and providing network options like you would a regular network. - -```js -module.exports = { - // ... rest of truffle config - - networks: { - // ... rest of network config - - dashboard: { - networkCheckTimeout: 120000, - } - } - - dashboard: { - // ... dashboard host/port config - } -}; -``` - - -## Decode requests - -Truffle Dashboard supports decoding requests for certain RPC calls, allowing you to view a more human-friendly -representation of the messaging between your computer and the Ethereum network. - -

- Information: The decode functionality is available -in Truffle projects for the following methods: eth_sendTransaction, personal_sign, eth_signTypedData_v3, and -eth_signTypedData_v4. We plan to support non-Truffle tooling such as Hardhat in the future. -

- -Each time you run `truffle compile`, Truffle shares information about your contracts with Truffle Dashboard. -Later, when you call a method, Truffle Dashboard consults its repository of this compilation -information, and asks `@truffle/decoder` to translate the request into a human readable format. - -For example, if you have a contract that allows you to mint 5 tokens and send it to a -user (`myaccount.eth` in this example), the low-level form would look something like: - -``` -0xa0e9439c000000000000000000000000627306090abab3a6e1400e9345bc60c78a8bef570000000000000000000000000000000000000000000000000000000000000005 -``` - -Truffle Dashboard can display this in a more human-readable format, for example: - -``` -mint(myaccount.eth, 5) -``` - -## Usage with non-Truffle tooling - -To make the Truffle Dashboard accessible to everyone, we developed it to be agnostic about the tools -you're using. You can use the Truffle Dashboard with non-Truffle tools such as Hardhat. - -

- Information: Truffle Dashboard cannot decode requests -when using tools other than Truffle; we plan to add support for other tools in the future. -

- -When using the Truffle Dashboard with Hardhat, you need to create a network configuration inside your `hardhat.config.js` file that specifies the Truffle Dashboard's RPC URL. - -```js -module.exports = { - // ... rest of hardhat config - - networks: { - // ... rest of network config - - 'truffle-dashboard': { - url: "http://localhost:24012/rpc" - } - }, -}; -``` - -From there, it can be used with any Hardhat task or tools like hardhat-deploy. - -``` -hardhat deploy --network truffle-dashboard -``` diff --git a/src/img/docs/truffle-dashboard/index/truffle-dashboard-logo.svg b/src/img/docs/truffle-dashboard/index/truffle-dashboard-logo.svg new file mode 100644 index 000000000..ab0c91f6b --- /dev/null +++ b/src/img/docs/truffle-dashboard/index/truffle-dashboard-logo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/docs/truffle-dashboard/quickstart/confirm-network.png b/src/img/docs/truffle-dashboard/quickstart/confirm-network.png new file mode 100644 index 000000000..eda12fc6d Binary files /dev/null and b/src/img/docs/truffle-dashboard/quickstart/confirm-network.png differ diff --git a/src/img/docs/truffle-dashboard/quickstart/connect-wallet.png b/src/img/docs/truffle-dashboard/quickstart/connect-wallet.png new file mode 100644 index 000000000..33a2e40f1 Binary files /dev/null and b/src/img/docs/truffle-dashboard/quickstart/connect-wallet.png differ diff --git a/src/img/docs/truffle-dashboard/quickstart/signature-request.png b/src/img/docs/truffle-dashboard/quickstart/signature-request.png new file mode 100644 index 000000000..fc6047cff Binary files /dev/null and b/src/img/docs/truffle-dashboard/quickstart/signature-request.png differ diff --git a/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/add-etherscan-key.png b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/add-etherscan-key.png new file mode 100644 index 000000000..ccd7ee424 Binary files /dev/null and b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/add-etherscan-key.png differ diff --git a/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-button.png b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-button.png new file mode 100644 index 000000000..806ce9533 Binary files /dev/null and b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-button.png differ diff --git a/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-hash.png b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-hash.png new file mode 100644 index 000000000..0aa3baa0e Binary files /dev/null and b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-hash.png differ diff --git a/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-interface.png b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-interface.png new file mode 100644 index 000000000..31e6861da Binary files /dev/null and b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/debug-interface.png differ diff --git a/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/delete-etherscan-key.png b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/delete-etherscan-key.png new file mode 100644 index 000000000..eaa445cdd Binary files /dev/null and b/src/img/docs/truffle-dashboard/truffle-dashboard-debugger/delete-etherscan-key.png differ