Alkemi Earn | User Interface

Web3 User Interface for Alkemi EARN

EARN UI

This project was bootstrapped with Create React App.

Stack

This application make active usage of

• create-react-app that packs many utilities

• redux for state management

• react-router v4 for routing

• connected-react-router to connect router to redux state

• material-ui v1 as main visual component library

• react-toastify toast notifications container

• drizzle for web3 integration

• onboard-bnc for web3 wallet provider

Start application

Requirements

• docker>=19.03.8

• node>=13.12.0

• npm>=6.14.5

Install application

If not yet done, clone project locally and install node dependencies

git clone <project-url> && cd <project-folder>
npm install # install node dependencies locally

Start application

npm run dev # start application in dev mode (.env.dev config)

npm start # start application in mainnet mode (.env config)

npm run local # start application in mainnet mode with local api server (.env.local config)

Contributing guidelines

Refer to contributing guidelines

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the 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. See the section about running tests for more information.

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. Your app is ready to be deployed!

See the section about deployment for more information.

npm run distribute:prep

Prepared the app for being distributed via npm package. This command compiles the project using babel and outputs the compiled files in the dist folder.

See the section Publishing a NPM Package on Github for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: Code Splitting

Analyzing the Bundle Size

This section has moved here: Analyzing Bundle Size

Making a Progressive Web App

This section has moved here:Making a Progressive Web App

Advanced Configuration

This section has moved here: Advanced Configuration

Deployment

This section has moved here: Deployment

Publishing a NPM Package on Github

Setup

IMPORTANT: you must have a .npmrc file configured with your personal access token in the root folder (the same folder where package.json is located)

From the repo's root folder, you can run the command below to create a .npmrc file using the sample template:

cp .npmrc.example .npmrc

After running the command above, your newly created .npmrc file content should look like:

//npm.pkg.github.com/:_authToken={YOUR_GITHUB_ACCESS_TOKEN}
@project-alkemi:registry=https://npm.pkg.github.com

Replace {YOUR_GITHUB_ACCESS_TOKEN} by your github token. Remember to remove the curly brackets "{ }". You can generate your github token in Developer settings. Make sure you check the options write:packages and read:packages.

Publishing a New Package Version

Before publishing a new package, make sure your repo is clean (all code is committed or stashed). Then, use the following commands to publish a new package to Github:

npm version {version-option}
git push --follow-tags
npm run distribute:prep
npm publish

NOTE: In the command npm version {version-option}, make sure you replace {version-option} by the desired version option. The most typical ones are major, minor, patch, but any supported option can be used.

For more details, see npm version docs.

npm run build fails to minify

This section has moved here: run build fails to minify

Issues

If you come across an issue with Alkemi Protocol contracts, do a search in the Issues tab of this repo to make sure it hasn't been reported before. Follow these steps to help us prevent duplicate issues and unnecessary notifications going to the many people watching this repo:

• If the issue you found has been reported and is still open, and the details match your issue, give a "thumbs up" to the relevant posts in the issue thread to signal that you have the same issue. No further action is required on your part.

• If the issue you found has been reported and is still open, but the issue is missing some details, you can add a comment to the issue thread describing the additional details.

• If the issue you found has been reported but has been closed, you can comment on the closed issue thread and ask to have the issue reopened because you are still experiencing the issue. Alternatively, you can open a new issue, reference the closed issue by number or link, and state that you are still experiencing the issue. Provide any additional details in your post so we can better understand the issue and how to fix it.

Author

👤 Alkemi

• Website: alkemi.network

• Twitter: @AlkemiOfficial

• Github: @project-alkemi

📝 License

Copyright © 2020 Alkemi Network.