# @xyo-network/tool-dapper-react
> An automated smart contract web viewer. Run on any ABI folder
Latest version **0.3.5** (published 2019-04-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install @xyo-network/tool-dapper-react
pnpm add @xyo-network/tool-dapper-react
yarn add @xyo-network/tool-dapper-react
bun add @xyo-network/tool-dapper-react
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 0.3.5 |
| Published | 2019-04-08 |
| First published | 2018-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 327.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Kevin Weiler |
| Maintainers | carterharrison, justinffortier, klivin, phillorenzo, rphansen91, xyo |
| Keywords | xyo, dapploy, xyo-nodejs |
## Links
- npm: https://www.npmjs.com/package/@xyo-network/tool-dapper-react
- Repository: https://github.com/XYOracleNetwork/tool-dapper-react
- Homepage: https://dapper.layerone.co/
- Issues: https://github.com/XYOracleNetwork/tool-dapper-react/issues
- npm.io page: https://npm.io/package/@xyo-network/tool-dapper-react
## Dependencies (30)
- [s3](https://npm.io/package/s3.md) ^4.4.0
- [bs58](https://npm.io/package/bs58.md) ^4.0.1
- [cors](https://npm.io/package/cors.md) ^2.8.5
- [web3](https://npm.io/package/web3.md) ^1.0.0-beta.46
- [react](https://npm.io/package/react.md) ^16.8.1
- [glamor](https://npm.io/package/glamor.md) ^2.20.40
- [portis](https://npm.io/package/portis.md) ^1.3.4
- [history](https://npm.io/package/history.md) ^4.7.2
- [glamorous](https://npm.io/package/glamorous.md) ^5.0.0
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.1
- [untildify](https://npm.io/package/untildify.md) ^3.0.3
- [json-loader](https://npm.io/package/json-loader.md) ^0.5.7
- [bignumber.js](https://npm.io/package/bignumber.js.md) ^8.0.2
- [concurrently](https://npm.io/package/concurrently.md) ^4.0.1
- [configparser](https://npm.io/package/configparser.md) ^0.2.6
- [react-cookie](https://npm.io/package/react-cookie.md) ^3.0.8
- [react-hanger](https://npm.io/package/react-hanger.md) ^1.1.2
- [file-selector](https://npm.io/package/file-selector.md) ^0.1.6
- [react-scripts](https://npm.io/package/react-scripts.md) ^2.1.5
- [ethereumjs-abi](https://npm.io/package/ethereumjs-abi.md) ^0.6.6
- [react-dropdown](https://npm.io/package/react-dropdown.md) ^1.6.4
- [react-dropzone](https://npm.io/package/react-dropzone.md) ^10.1.3
- [ipfs-http-client](https://npm.io/package/ipfs-http-client.md) ^30.1.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.0.0
- [typeface-pt-sans](https://npm.io/package/typeface-pt-sans.md) ^0.0.72
- [perfect-scrollbar](https://npm.io/package/perfect-scrollbar.md) ^1.4.0
- [react-perf-devtool](https://npm.io/package/react-perf-devtool.md) ^3.1.8
- [react-progress-button](https://npm.io/package/react-progress-button.md) ^5.1.0
- [eslint-config-standard-react](https://npm.io/package/eslint-config-standard-react.md) ^7.0.2
## Recent versions
- 0.3.5 (latest) — 2019-04-08
- 0.3.4 — 2019-04-06
- 0.3.3 — 2019-03-15
- 0.3.2 — 2019-03-12
- 0.3.1 — 2019-03-11
- 0.3.0 — 2019-02-22
- 0.2.9 — 2018-12-10
- 0.2.5 — 2018-11-07
- 0.2.4 — 2018-10-30
- 0.2.3 — 2018-10-18
## README
"Simulate your Smart Contracts"
[logo]: https://cdn.xy.company/img/brand/XY_Logo_GitHub.png
[![logo]](https://xy.company)
---
[](https://greenkeeper.io/)
[](https://david-dm.org/xyoraclenetwork/tool-dapper-react) [](https://david-dm.org/xyoraclenetwork/tool-dapper-react) [](https://bettercodehub.com/results/XYOracleNetwork/tool-dapper-react)
[](https://travis-ci.com/XYOracleNetwork/tool-dapper-react)
Check out Dapper, live at https://dapper.layerone.co to start playing with your smart contracts.
# Pt. I. - Let's Get Dapper
1. When in doubt, `yarn` it out in the project directory:
```
yarn
```
2. Run dapper
```
yarn start
```
# Pt. II - Dapploy Some Contracts locally
We need to deploy some smart contracts
1. Use [Dapploy](https://github.com/XYOracleNetwork/tool-dappdeployer-node) and create your first standalone smart contact project:
```
./dapploy init
./dapploy -P
```
**or** Use [Truffle](https://truffleframework.com) to deploy your smart contracts to any Ethereum blockchain, and note the folder of your ABI, usually in `/build/contracts`
# Pt. III - View Local Contracts
1. If you don't already have it, [download and install Ganache from their site](https://truffleframework.com/ganache)
2. Same with [MetaMask from their site](https://metamask.io/)
3. Configure Ganache on 8545:
- Open Ganache
- Click the Gear Icon thingy ( ⚙️ ) to open `Preferences...`.
Make sure that port is set to 8545.
- Click "Save and Restart" in the top-right of Ganache
4. Configure Metamask network to `localhost`
- Sign into Metamask and change Network on Metamask to localhost 8545
5. Add ganache account to metamask
- In your Ganache UI, you'll see a list of ~10 addresses. Click the key icon (🔑) next to one of 'em. And then COPY the "Private Key"
6. Start dapper. This should open up `localhost:3000` in a chrome browser.
```
yarn start
```
You should see the Dapper UI with no smart contracts loaded.
# Pt. III. - Play with your Smart Contracts
1. In Dapper UI, go to the settings cog and select `Local Path` and enter `/build/contracts` (Priject dir from Pt. II)
2. Tap `Save` and you should be able to see the FungibleToken in the dropdown and play with it!
3. Select `name()` function and you should see the name, "Fun Token" displayed.
---
_Source: https://npm.io/package/@xyo-network/tool-dapper-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._