Rcalculator is a tool created to help users easily calculate their mining power based on the NFT crypto project RPLANET, they can also check to the current value of all the elements
Before this was created, there was no easy way to calculate your earnings per daily, weekly and monthly, so I created this handy tool to do all the work for you!
The world of Non fungible tokens or NFTs is becoming increasingly popular by the day, inface they're the hottest topic in the crypto world right now! As a follower of the RPLANET project, I found it very tedious to have to manually calculate my earnings, that's where Rcalculator comes in.
Rcalculator was created for the NFT game RPLANET with the aim of delivering a simplified tool that will calculate and display how much AEHTER per hour users are mining and convert it into other currencies such as WAX & USDT. Rcalculator has been created to also provide a list of all the elements but with an added feature, this being the elemental tool automatically calculated the price of each individual element and converts the price in AETHER to WAX & USDT so users can easily see how much the converted price costs.
- Give users an easy-to-use calculation tool for their AETHER mining power
- Help users keep track of their crypto earnings
- Help users easily see the price of elements in other currency formats
- As a user I want the main purpose of the site to be clear so that I immediately know what the is intended for upon entering
- As a user I want the website to be responsive so that I can use other devices and have no issues
- As a user I want to be able to navigate around the website with ease so that I can view content/manipulate content
- As a user I want to be able to see my mining power earnings in detail
- As a user I want to be able to search and filter elements
- As a user I want to be able to see a live price feed of the currencies
- User story:
As a user I want the main purpose of the site to be clear so that I immediately know what the is intended for upon entering
Implementation:
A splash screen was added to the website to introduce users to the features/tools the website has to offer
Media:
- User story:
As a user I want the website to be responsive so that I can use other devices and have no issues
Implementation:
The website was designed for all devices with multiple browser support in mind
Media:
- User story:
As a user I want to be able to navigate around the website with ease so that I can view content/manipulate content
Implementation:
The website is a single page design, this means the user will not be redirected to multiple pages within the website therefore increasing user usability and response time
- User story:
As a user I want to be able to see my mining power earnings in detail
Implementation:
The mining power tool was created to give users a easy and fast way to see how much their mining power is earning them per day/week/month. With this comes a converted version of the AETHER returned, showing the user how much it's worth in WAX & USDT
Media:
- User story:
As a user I want to be able to search and filter elements
Implementation:
The elemental tool was created to give users a easy way to see the price of all of the elements RPLANET has to offer and converts the price of the cost from AETHER to WAX which then displays it's USDT cost
Media:
- User story:
As a user I want to be able to see a live price feed of the currencies
Implementation:
The live price of AETHER and WAX is updated every 10 seconds. This price is used in the algorithm of both the mining power tool and the elemental tool used in this project
Media:
The main background colour is a gradient of the following colours (HEX) #38393d, #252736, #333336
The main website text is the colour “wheat”
All custom heading text is a deep shade of red #861142
The main title/headings on this web application use a custom google font called 'Righteous' font while the rest of the websites content uses the 'Roboto' font.
The AEHTER image was taken from RPLANET
The WAX & USDT images were taken from Google
The custom tool icons for the mining power & elements were made by my graphics designer 'GNARLY'
 |
 |
 |
|---|---|---|
| AETHER | WAX | USDT |
- AETHER
- WAX
- WAX (WAXP) is a purpose-built blockchain that is designed to make e-commerce transactions faster, simpler and safer for every party involved. You can see a live price feed of this currency over at Coingekko
- USDT
- USDT is a stablecoin (stable-value cryptocurrency) that mirrors the price of the U.S. dollar, issued by a Hong Kong-based company Tether. The token’s peg to the USD is achieved via maintaining a sum of dollars in reserves that is equal to the number of USDT in circulation. You can see a live price feed of this currency over at Coingekko
-
Live price feed
- A live price feed of both currencies used in throughout the web application, this displays both the AEHTER & WAX live prices updated every 10 seconds. The live price of Aether is taken from Alcor Exchange using the Alcor API. The live price of Wax is taken from the Coingekko using the Coingekko API
-
Tool selection
- A feature to allow users to easily change from the mining power calculator tool, to the elements tool
-
Mining tool
- A feature to allow users to calculate their AETHER, WAX, USD earnings which follows an algorithm based on the live prices
-
Elements tool
- A feature to allow users to search any existing element found on RPLANET and see the cost of that element from AETHER > WAX > USD
- WAX Sign-in
- Allows users to login directly to their WAX account to pull their data automatically
- Tool Automation
- Retrieve data from user account and base tool algorithms on user data
-
- This project uses the Alcor API to gather the live price of the AETHER currency used in this project.
-
- This project uses the Coingekko API to gather the live price of the WAX & USDT currencies used in this project.
-
- This project uses custom written CSS to style the Website.
-
- Google fonts are used throughout the project to import the Inter and Bevan fonts.
-
- GitHub is the hosting site used to store the source code for the Website.
-
- Canva design was used in order to create the website logo.
-
- Git is used as version control software to commit and push code to the GitHub repository where the source code is stored.
-
- Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.
-
- This was used to create wireframes for 'The Skeleton Plane' stage of UX design.
| Test | Title | Process | Result |
|---|---|---|---|
| T1 | Splash screen | The splash screen was first tested to ensure suitability and accuracy so that it responded well to all devices (mobile/tablet/desktop). Secondly the exit button was verified to ensure it takes the user to the homepage | Working as expected |
| T2 | Live API data | To test the live API data was working correctly any changes are monitored and reflected in the live price feed. This is expected to update every 10 seconds. |  |
| T3 | Tool selection buttons | The tool selectors were tested by switching between both tools multiples times to see if it would cause any damage or interference, after testing the tool selectors they proved sustainably effective. |  |
| T4 | Live API data (Error/offline) | To test the Live API data the API was purposely disconnected so the results were observable. In this case it will display "Offline" in the live price section to let the user know the servers are down and the tool cannot be used for this period. |  |
| T5 | Tool 1 - Mining power | The mining tool was tested by storing various data types into the input field. When a letter or a special character is inputted into the field the results return nothing as expected. |  |
| T6 | Tool 2 - Elemental | To test the Elemental tool various letter inputs were altered to observe if they matched the elements within the database, subsequently an analysation of this test clearly represented no errors within this process. |  |
| T7 | Responsive design | To test the websites stability and ensuring it covers responsive design, the respective browser developer tools were used on the following browsers: Firefox, Chrome, IE & Safari and enabled the device viewer to allow change in the viewport. All browsers work well with all native devices (mobile/tablet/desktop) |
| Error | Title | Analysis |
|---|---|---|
| E1 | Broken exit button | Upon pressing the 'Got it!' button the Splash screen wouldn't dissapear and would stay in view, to fix this issue some Javascript logic was added, this was to add a 'hidden' class to the parent element that will add a CSS property ('Display: none') when the user clicks on the exit button, I did this by adding an event listener on the exit button |
| E2 | Server flooding | The function that handles the API calls had a interval of 5 seconds, this meant every user that visits Rcalculator makes a call to the server endpoint every 5 seconds, this in turn flooded the endpoint and blocked our services. To fix this problem the interval was changed to 30 seconds |
| E3 | DOM overlapping | When adding the elemental tool to the project there was an issue with displaying & hiding the main content areas. When toggling between each tool the content would overlap one another, to fix this issue I seperated each of the tools into their own containers and added event listeners onto the buttons to hide the opposite tool to the DOM |
| E4 | Search filter not working | The elemental tool's search filter wasn't working correctly. It would break when the user input field was deleted and didn't display anything to the DOM. To fix this issue I used an online source found on Stack overflow and re-wrote the functionality that controls the search filter |
|
- HTML
-
No errors were returned when passing the index.html file through the official W3C validator
-
- CSS
-
All of the following files were passed through the official Jigsaw validator
-
-
Click on the green 'code' button on the GamesDirect repository
-
Select one of two options 'Download as ZIP', 'Open with GitHub Desktop'
If 'Download as ZIP' has been chosen, follow the steps below:
-
Once the folder has been downloaded, un-ZIP the folder using a third-party application like WinZip, WinRAR
-
Open the unzipped folder into your IDE (integrated development environment)
-
For VSCode users, you can download the 'Live server' plugin and launch the project using a local server
-
For users using any other IDE you will need to find out how to launch this project on the respective IDE
-
Open your IDE of choice then open its terminal window (CLI) and locate the projects directory
-
Use the 'git clone' command in the terminal followed by the copied git URL
-
A clone of the project will be created locally on your machine.
This site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
- The live link can be found here
-
Search filter functionality taken from Stack overflow
-
Currency images taken from Google
-
The flex box CSS properties were used from Stack overflow
-
My mentor Spencer Baribell for his guidance throughout the project
-
Mr Bim (Slack community member) helped write some of the algorithm logic in this project
-
Gnarly (Close friend) helped with tool icon designs used in this project