make sure to change terra station to testnet
nvm use 14
npm install
npm start
Frontend app to buy & sell tokens using Astroport's LBP contracts.
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.
- 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.
- 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
- 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 insrc/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
andsrc/report_exception.js
.
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.
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:
- Update
REACT_APP_DEFAULT_NETWORK
instaging_ci_cd.yml
tomainnet
for your production workflow. - Configure the
NETLIFY_AUTH_TOKEN
andNETLIFY_SITE_ID
Github Actions secrets. - Configure the
SENTRY_DSN
Github Actions secret if using Sentry.
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
node
v14.npm
v6.
If you have nvm
installed, it should select the correct version for you based on the .nvmrc
.
$ npm install
- The mainnet and testnet networks are configured in
src/config/networks.js
, but you can configure additional networks, or override those networks entirely, insrc/config/environments/development.js
. Seedevelopment.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 tomainnet
. You can override this to a network that you specify insrc/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 insrc/config/environments/development.js
, and setREACT_APP_DEFAULT_NETWORK
tolocalterra
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.
$ 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.
$ npm test
Launches the test runner in the interactive watch mode.
$ 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.
- Add historical pricing plot
This repo is under a MIT license.