Astroport Token Sales Frontend

Frontend app to buy & sell tokens using Astroport's LBP contracts.

Getting Started

Teams are expected to customize and host the frontend themselves. This guide will walk you through the steps necessary to configure and deploy the app. If further customization is desired, check out the Development section below.

It is recommended that you fork this repo and then make your changes there.

Important Note: The frontend assumes that one side of the LBP pair is UST. Changes will need to be made to the app to support other assets.

Configuration

• Replace src/assets/images/logo.svg with your own logo
  • You may want/need to tweak the logo's size, or if your logo is not an SVG, change its import. The logo is rendered in the TokenSales component.
• Configure your color scheme in theme.css
• Update src/config/networks.js with:
  • Your mainnet Astroport LBP factory contract address (you are expected to deploy the factory and pair contracts yourself)
  • Your mainnet Astroport LBP pair contract address(es) (these are whitelisted by the frontend to control the asset pairs that are visible on the UI)
  • If you'd like to test the frontend on the testnet first, you could also deploy the necessary contracts to the testnet and update the testnet portion of networks.js with the factory and pair addresses.
• If further UI customization is desired, the CSS entrypoint is src/index.css, and there are also component-specific CSS files in src/components.
  • You also have full access to Tailwind's wonderful suite of utility classes.
  • The app makes extensive use of Tailwind's utility classes for things like spacing, font size, weight, etc., and generally avoids custom styles wherever possible. You can configure Tailwind in tailwind.config.js.
• This app is configured out-of-the-box with Sentry support for error tracking/reporting.
  • If you do not plan on using Sentry, or any other error tracking/reporting service, no action is necessary.
  • If you'd like to use Sentry, you'll need to set the REACT_APP_SENTRY_DSN environment variable at build time (more on this below in the Deployment section).
  • If you'd like to use a different service, you can make the necessary changes in src/index.js and src/report_exception.js.

Deployment

The recommended process is to configure continuous deployment via Github Actions or some other means, but you could also build the project yourself and upload the resulting static site to any web host.

Via Github Actions

If deploying via Github Actions, you can reference .github/workflows/staging_ci_cd.yml as a template.

That workflow will run the test suite and then, if it passes, deploy to Netlify. If you'd like to deploy to Netlify as well, you'll only need to make a few changes:

1. Update REACT_APP_DEFAULT_NETWORK in staging_ci_cd.yml to mainnet for your production workflow.
2. Configure the NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID Github Actions secrets.
3. Configure the SENTRY_DSN Github Actions secret if using Sentry.

Manual Deployment

To build the project, you'll need to set up your local environment by installing node and npm and then all project dependencies as described in the Development section below.

Once your local environment is set up, building the project is as easy as running:

$ npm run build

Or, if using Sentry:

$ REACT_APP_SENTRY_DSN=https://your-sentry-dsn npm run build

That will build everything that you need to host the app in the build folder. Simply upload that to your web host of choice.

Note: The network that's used in the build is pulled from the REACT_APP_DEFAULT_NETWORK environment variable, which defaults to mainnet. If you'd like to generate a build using another network by default (e.g. testnet for a test deployment), you should run something like:

$ REACT_APP_DEFAULT_NETWORK=testnet npm run build

Development

Stack

• React
  • create-react-app, configured via craco
• Tailwind

Requirements

• node v14.
• npm v6.

If you have nvm installed, it should select the correct version for you based on the .nvmrc.

Install dependencies

$ npm install

Configuration

• The mainnet and testnet networks are configured in src/config/networks.js, but you can configure additional networks, or override those networks entirely, in src/config/environments/development.js. See development.js.sample for a template.
• The default network is selected based on the REACT_APP_DEFAULT_NETWORK env variable. By default (in .env), it's set to mainnet. You can override this to a network that you specify in src/config/environments/development.js in a .env.development.local file. See .env.development.local.sample for a template.
• A sensible configuration for local development would be to define a localterra network in src/config/environments/development.js, and set REACT_APP_DEFAULT_NETWORK to localterra in .env.development.local.
• Important Note: You must whitelist any pairs that you want the app to care about in the allowedPairContracts key of each network config.

Running the development server

$ npm start

You can then access the application by going to http://localhost:3000 in your web browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Testing

$ npm test

Launches the test runner in the interactive watch mode.

Building

$ npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

TODO

• Add historical pricing plot

LICENSE

This repo is under a MIT license.