investment dashboard
Budget: ₹600 – ₹1,500 INR
"Investment Dashboard" for the site bomb.money by cloning their frontend and adding a new page to it.
Overview
We will be making an "Investment Dashboard" for the site bomb.money by cloning their frontend and adding a new page to it.
Investment Dashboard UI:
https://www.figma.com/file/Xz2xy68jh4P3KT2Iyy5o7S/Bomb-Investment-Dashboard?node-id=0%3A1&t=gcg2T4YqyYOHFsHW-0
Codebase: https://dyeus.co/bomb-dashboard-final-task.zip
if the above is showing compilation errors, try: https://dyeus.co/bomb-dashboard-final-task-alt.zip
Repo Usage:
First, download the above and start the project using Yarn
Install and set up Metamask extension on your browser
On localhost:3000 you'll see the bomb-frontend homepage come up.
Note that it contains elements used elsewhere like price of token, total supply of token, etc.
Visit Farm, Boardroom, and Bond pages to see where the values for the other elements in our UI are coming from
With the above, we can see that the task is mainly developing the UI and reusing existing code from the Original Repo to display all data ("read") and run functions upon user interaction ("write") in the new UI design.
Requirements
Build the dashboard on "/dashboard" route
All the read values (e.g. price, supply, daily returns, tvl, etc) must work and show exact values as shown in Original Repo's existing code
Write operations (deposit, withdraw, redeem buttons etc) need to call and run the exact same functions as run on Original Repo's existing code
Be careful to call the correct function from the correct part, don't mix up claim and withdraw of different features
If UI front end development is not your strong suite, it is okay to not match the design 100% (e.g. you can make the design simple without gradients or other difficult elements if it's taking too much time). But we will be testing the functionality for sure, so make sure all functionalities work!
Try to write clean, elegant code with sensible class, function, and variable names that is well-commented.
After cloning, delete the old .git folder and start a new git repo going (as to get a fresh repo history on git without the old commits from cloning). Make sure to commit regularly with sensible commit messages, e.g. 1 feature = 1 commit.
Getting stuck or confused is completely normal ? Don't hesitate to ask any queries that come up on Skype chat!
Error Debugging
If you face an error like "Module parse failed: Identifier directly after number (124:21)", then:
delete node_modules, yarn.lock, package-lock.json
run "yarn cache clean"
install packages using yarn
it should work now
Production Steps:
Netlify deploy will not work directly, it will show a network CORS error. To resolve it, In config.ts set defaultProvider of production equal to that of dev.
Overview
We will be making an "Investment Dashboard" for the site bomb.money by cloning their frontend and adding a new page to it.
Investment Dashboard UI:
https://www.figma.com/file/Xz2xy68jh4P3KT2Iyy5o7S/Bomb-Investment-Dashboard?node-id=0%3A1&t=gcg2T4YqyYOHFsHW-0
Codebase: https://dyeus.co/bomb-dashboard-final-task.zip
if the above is showing compilation errors, try: https://dyeus.co/bomb-dashboard-final-task-alt.zip
Repo Usage:
First, download the above and start the project using Yarn
Install and set up Metamask extension on your browser
On localhost:3000 you'll see the bomb-frontend homepage come up.
Note that it contains elements used elsewhere like price of token, total supply of token, etc.
Visit Farm, Boardroom, and Bond pages to see where the values for the other elements in our UI are coming from
With the above, we can see that the task is mainly developing the UI and reusing existing code from the Original Repo to display all data ("read") and run functions upon user interaction ("write") in the new UI design.
Requirements
Build the dashboard on "/dashboard" route
All the read values (e.g. price, supply, daily returns, tvl, etc) must work and show exact values as shown in Original Repo's existing code
Write operations (deposit, withdraw, redeem buttons etc) need to call and run the exact same functions as run on Original Repo's existing code
Be careful to call the correct function from the correct part, don't mix up claim and withdraw of different features
If UI front end development is not your strong suite, it is okay to not match the design 100% (e.g. you can make the design simple without gradients or other difficult elements if it's taking too much time). But we will be testing the functionality for sure, so make sure all functionalities work!
Try to write clean, elegant code with sensible class, function, and variable names that is well-commented.
After cloning, delete the old .git folder and start a new git repo going (as to get a fresh repo history on git without the old commits from cloning). Make sure to commit regularly with sensible commit messages, e.g. 1 feature = 1 commit.
Getting stuck or confused is completely normal ? Don't hesitate to ask any queries that come up on Skype chat!
Error Debugging
If you face an error like "Module parse failed: Identifier directly after number (124:21)", then:
delete node_modules, yarn.lock, package-lock.json
run "yarn cache clean"
install packages using yarn
it should work now
Production Steps:
Netlify deploy will not work directly, it will show a network CORS error. To resolve it, In config.ts set defaultProvider of production equal to that of dev.