/juice-interface

🧃 An app for using the JBX protocol.

Primary LanguageTypeScriptMIT LicenseMIT

juice-interface

Juicebox frontend application.

Suggest a feature

Have an idea or suggestion? Create a feature request or mention it in the Discord.

Report a bug

Notice something broken? Create a bug report.

Development

Installation

  1. Create a fork of this repository.

  2. Clone your fork and navigate to the root directory.

  3. Install project dependencies.

    yarn install

  4. Create a .env file in the root directory which mirrors the .example.env file. Learn how to define each field in the .env file in Setup.

Setup

juicebox-interface relies on a number of services for development. Create an account for each of the following services:

The following sections describe how to set up each service for local development.

Infura

Juicebox uses Infura to connect to an Ethereum network (mainnet, or one of the testnets).

Take the following steps to create an Infura project for local development:

  1. Select Create New Project to begin creating a new Infura project.
  2. Select the Ethereum option from the Product dropdown.
  3. Enter a Name (for example, juicebox-local).
  4. Select Create to create the project.

Next, copy the following fields into your .env file:

  • Project ID. In the .env file, copy the Project ID into the REACT_APP_INFURA_ID variable.
  • Endpoint. This is the Ethereum network that will be used for testing. If you don't know which endpoint to use, select mainnet. In the .env file, copy the network name (e.g. 'mainnet', not the url) into the REACT_APP_INFURA_NETWORK variable.

Piñata

Juicebox uses Piñata to store project metadata. Juicebox projects set a name, description, logo, and other details when creating the project. These details are saved on IPFS as a JSON file using Piñata, and the CID gets stored on-chain with the Juicebox project.

Take the following steps to set up Piñata for local development:

  1. Create a Piñata API key (learn more).
    • Enable the Admin toggle in the Admin field.
  2. Copy the following fields into your .env file:
    • API Key. In the .env file, copy the API Key into the REACT_APP_PINATA_PINNER_KEY variable.
    • API Secret. In the .env file, copy the API Secret into the REACT_APP_PINATA_PINNER_SECRET variable.

Blocknative

Juicebox uses Blocknative to onboard users by enabling wallet selection, connection, wallet checks, and real-time state updates.

Take the following steps to set up Blocknative for local development:

  1. Create a Blocknative API key (learn more).
    • Enable the Admin toggle in the Admin field.
  2. Copy the API key into the REACT_APP_BLOCKNATIVE_API_KEY variable of the .env file.

Usage

  1. Start the app.

    yarn start

Contributing

If you'd like to contribute code or translations to the repository, check out CONTRIBUTING.md

Web3 Providers

The frontend has two 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 wallet, connected to via Blocknative.

Deployment

Frontend application(s) are deployed automatically on pushes to main using Fleek.

Theme

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

The app also relies on antd React components. We override some Antd styles to make Antd compatible with SemanticTheme. These overrides are defined in the src/styles/antd-overrides/ directory.