This is the PrimeDAO web interface enabling interaction with PrimeDAO liquidity pool contracts.
This project is bootstrapped by aurelia-cli.
It is written mostly in Typescript, HTML and SCSS, and is bundled using Webpack.
For more information about bundling, go to https://aurelia.io/docs/cli/webpack
Install dependencies with the following command:
npm ci
There are several ways to build and run the application. Each of the following build commands will output to the dist folder. After building, run following to launch the result in the browser:
npm run start
npm run build
(This is the production build.)
npm run build-kovan
npm run build-dev
npm run build-dev-mainnet
Each of the following commands will serve up a site that will support Hot Module Reload (HMR). You can then use your favorate debugger to launch the app at http://localhost:3300.
npm run serve-dev
npm run serve-dev-mainnet
Prime Pool relies on solidity contract addresses and ABIs that it obtains from the contracts package. In the case that any of these contracts change, you may clone the contracts package in a folder sibling to this one, and run a script to pull the required information from the contracts package into this one, by running the following:
npm run fetchContracts
Prime Pool refers to a list of pools that it will display to its users, looking at runtime for this list in the master branch of this repository at /src/poolConfigurations/pools.json.
Notes on a few of the pool entries:
| Property | Description |
|---|---|
| description | Appears on the All Pools page. Plain text only. |
| story | Appears on the "Overview" tab of the [*] Pool page. You can use HTML, and divs may have the classes para and header. |
| icon | Appears on the All Pools and [*] Pool page. Must be SVG. Use single quotes, not double. |
| addresses | Address of the ConfigurableRightsPool |
| preview | If true, the pool will appear only as an unclickable button on the All Pools page |
Various code dependencies include:
- ethplorer.io, at api.ethplorer.io, for token information
- coingecko, at api.coingecko.com/api/v3/coins, for token information
- the Balancer subgraph, at api.thegraph.com/subgraphs/name/balancer-labs/balancer, for pool information
- the PrimeDAO API, at api.primedao.io/circulatingSupply, for the total supply of PRIME
- d3 for the pool donut graph
- lightweight-charts for the pool marketcap sparkline graph
- Web3Modal for selecting wallet providers
- ethers.js for interacting with ethereum and wallet providers
- Rivet for the mainnet provider
Run npm run lint and confirm that lint succeeds before git commits.
You can run npm run lint.fix to have lint automatically fix all fixable errors.
Run npm run test.
To run in watch mode, npm run test --watch.
To run the Webpack Bundle Analyzer, do npm run analyze (production build).
Make sure you have in your environment (or in a .env file) the following:
IPFS_DEPLOY_PINATA__SECRET_API_KEY=
IPFS_DEPLOY_PINATA__API_KEY=
RIVET_ID=
INFURA_ID=
ETHPLORER_KEY=
ETHERSCAN_KEY=
To deploy the dApp to IPFS you must first create your build in the dist folder using one of the build commands above.
Then the fastest way to deploy the site on ipfs is using Pinata. Pinata will automatically deploy the code to IPFS, generating a hash of the code, and the "pin" the hash so that it remains in a cache and doesn't eventually fall out of easy sight of the cloud of IPFS nodes.
Make sure you added your Pinata IPFS_DEPLOY_PINATA__API_KEY and IPFS_DEPLOY_PINATA__SECRET_API_KEY in a .env file.
Install IPFS: https://docs.ipfs.io/install/ipfs-desktop/
Then run:
ipfs daemon
And in another shell:
npm run ipfs-deploy
Note that this command has shown you the hash that has been pinned in IPFS, and which you will need to associate with an ENS URI like primepool.eth.link. You'll also find the hash in Pinata.
You can also use the Pinata website to upload the dist folder directly from your computer.
Or you can directly upload to ipfs using the following command, but note this won't pin the hash. Note you still have to have ipfs daemon running.
ipfs add dist -r dist
Having deployed and pinned the hash in IPFS, you can associate it with a URI like primepool.eth.link using https://app.ens.domains/.
You have to be a controller of the ENS domain. On the domain's details page, add or edit the content record so it looks something like this:
To verify that the code you are building is the same as what you see stored in IPFS, you can compute the hash of the code and compare it to the hash stored in IPFS.
To calculate the ipfs hash you will need the environment variables that were used for the original build.
Next run npm ci to install fresh dependencies.
Then run npm run build to generate a clean build.
Now with the build at your disposal you can calculate the hash of the folder by running ipfs add dist -r -n dist.
(Install IPFS from here: https://docs.ipfs.io/install/ipfs-desktop/)