teddywilson / juicehouse

🧃 juicebox.money

juicebox.money

Built with 🏗 scaffold-eth

For a visual overview of how the mechanism works, see the Fluid Dynamics file on Figma

---

Run local

Serve the app locally and use with a local blockchain.

In packages/app, Create .env from .example.env, add required REACT_APP_INFURA_ID.

yarn install

start 👷Hardhat local blockchain:

yarn chain

in a second terminal window, deploy contract to local blockchain:

yarn deploy-local

in a third terminal window, start the app and open http://localhost:3000 to view it

yarn start

🔑 Create wallets links to your app with yarn wallet (empty) or yarn fundedwallet --amount <eth-amount> (pre-loaded with ETH) and navigate to generated url (http://localhost:3000/pk#\)

Note: yarn fundedwallet will fail if your local deployer account has a 0 balance. To fund it, first:

• Get account address on local chain using yarn account
• Run yarn send --from 1 --to <deployer-address> --amount 10 to send 10 ETH to deployer account from first auto-generated hardhat account wallet

🔧 Configure 👷HardHat by editing hardhat.config.js in packages/hardhat

✨ The HardHat network provides stack traces and console.log debugging for our contracts ✨

Run yarn account to create a local deployer wallet private key. To send ETH to generated wallet on a local chain, run # yarn send --from <address or account index> --to <receiver address> --amount <ETH amount>

---

Deploying contracts

Contracts are located in packages/hardhat/contracts.

Each time contracts are deployed, artifacts are copied to:

• packages/app/src/contracts where they're used by the frontend
• packages/subgraph/abis where they're used to generate Graph templates

The frontend connects to whichever chain its provider (i.e. Metamask) is using to, and reads the corresponding contract artifacts for that chain. Connecting to a chain that juicebox contracts have not been deployed to will cause the app to fail.

deploy to local chain

yarn deploy-local

deploy public chain ropsten

yarn deploy-rinkeby

yarn deploy-kovan

yarn deploy-mainnet

Frontend .env

Create new packages/app/.env, reference packages/app/.example.env

REACT_APP_INFURA_ID=
REACT_APP_INFURA_NETWORK= # defaults to localhost in development mode

REACT_APP_INFURA_ID: Your Infura key. REACT_APP_INFURA_NETWORK: Network name (kovan, rinkeby, mainnet, localhost). REACT_APP_PINATA_PINNER_KEY: Your Pinata key. REACT_APP_PINATA_PINNER_SECRET: Your Pinata secret.

🔏 Web3 Providers:

The frontend has three different providers that provide different levels of access to different chains:

readProvider: used to read from contracts on network of injected provider (.env file points you at testnet or mainnet)

signingProvider: your personal MetaMask, WalletConnect via Argent, or other injected wallet (generates burner-provider on page load). Used to sign transactions.

---

Deploying frontend

Frontend deployment is managed automatically through Fleek.

kovan.juicebox.money and rinkeby.juicebox.money deploy automatically from prod-fleek.

Automatic deployment does not:

• deploy contracts
• ship subgraph updates

Suggested deployment flow:

If only shipping frontend changes:

1. Merge latest into main
2. Rebase main into prod-fleek

If contracts or subgraphs have changed:

1. Merge latest into main
2. Rebase main into prod-fleek locally
3. Deploy contracts & ship subgraph updates for all networks
4. Push prod-fleek

Graph

juicebox uses the Graph to query contract events from the frontend. Event handlers and mappings are defined in packages/subgraph/src.

Running locally

Install Docker.

1. Make sure local chain is running.
2. In a new terminal window: yarn graph-run-node to start Docker Graph node.

• Node is ready when terminal output reads:

  INFO Starting GraphQL WebSocket server at: ws://localhost:8001, component: SubscriptionServer

3. In another terminal window: yarn graph-create-local to create subgraph and add to local node. (Only needs to be run once per local graph node. yarn graph-remove-local to remove the subgraph.)
4. yarn graph-ship-local while the node is running to ship changes to subgraph template, mappings, and schema defined in packages/subgraph/src.

Deploying to public networks

Make sure contracts for the intended network have been deployed:

• Abi artifacts exist in packages/subgraph/abis/<network>
• Config file packages/subgraph/config/<network>.json exists

Then deploy subgraph:

Rinkeby: yarn graph-ship-rinkeby

Kovan: yarn graph-ship-kovan

Theme

The app uses the SemanticTheme pattern defined in src/models/semantic-theme, which allows mapping style properties to any number of enumerated ThemeOptions. These properties are defined in src/constants/theme. Theme styles can be accessed via ThemeContext defined in src/contexts/themeContext and instantiated in src/hooks/JuiceTheme, or via CSS root variables.

The app also relies on (antd)[https://ant-design.gitee.io/] components. To make Antd compatible with SemanticTheme, overrides are defined in src/styles/antd-overrides.

---

Contracts

Tests

Run the Mocha tests:

$ yarn test

Security

While the code was written with an attention for quality and with extensive test coverage, you shouldn't assume that this library is completely safe to use. The contracts have not yet been audited by a security researcher. If you discover any security issues, please report them in a DM on Discord.

Acknowledgements

Juicebox is made possible by Ethereum, and a few libraries made by inspiring developers and teams:

• OpenZeppelin Contracts
• Austin Griffith's Scaffold ETH
• Paul Razvan Berg's DS Math
• Chainlink's price oracles