In response to the financial crisis of 2008, Satoshi Nakamoto released the Bitcoin whitepaper outlining the first decentralised public ledger technology to hit the world stage. The network has stood strong to this day and inspired 1000s of projects build on Satoshi's vision of a decentralised world. We now have a robust ecosystem of smart contract, NFT and decentralised financed platforms. Pandora's box has been opened and there is no turning back.
One of the main benefits of cryptocurrencies is the public availability of the blockchain data. Up until now, corporations have protected vast silos of data in order to monetize it & increase their stranglehold on the market. Public blockchains granted developers the ability to compete with larger corporations by providing value to the user & not by monetizing siloed data.
Even though cryptocurrencies have been around for more than a decade, adoption rates are still relatively low with plenty of room to grow. I believe this slow adoption is due to the perceived complexity of the technology and the addition responsibility placed on the user to secure their funds.
My goal for my Code Institute Milestone Project 3: Data Centric is to simplify the Ethereum experience for users by allowing them to view their blockchain transaction data in a more intuitive way.
Hashboard is a web application that allows users to search any public Ethereum address and view that account's transactions. These transactions can then be prioritised, giving the user the ability to add a text note. I have provided five sample Ethereum addresses below to aid the assessment team in the examination of this milestone project. Please note that any Ethereum public address can be used with this application.
0x150F2F6860904dc4227d6f70d8b07a4853E3835a 0x4863d57806d7872De6DaD21e5C6F95D6E00a8Ac6 0xC762514665e8B6CA63DD762BB44012E4347a352E 0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2 0xBE0eB53F46cd790Cd13851d5EFf43D12404d33E8
Ethereum is the second largest cryptocurrency by market cap and currently has the largest developer community. It was the world's first programmable blockchain, which has inspired thousands of developers to deploy their own smart contracts. As it is based on distributed ledger technology (DLT), all transaction data & balances are publicly available.
This cryptocurrency dashboard project will be reading transactions from the Ethereum blockchain and storing them within our backend. Etherscan is the leading blockchain API which allows you to view transactions, smart contracts, user accounts & on-chain metrics. After using Etherscan for the past 4 years, I have seen that very few improvements have been made to the UX. New features get added without a redesign of the site causing the complexity to stack. I believe that design a new, cleaner way to display this transactional data is the key to onboarding new users and taking smart contract platforms to the next level of adoption.
This section will outline potential features which I would like to implement in future.
Currently, there is approximately a 5-second wait between the time the user completes the search form within search.html. Unfortunately there is no feedback to the user while they wait and this may cause problems with more impatient users.
With the current design of the application, a loading bar could not be added in simply. This is a feature I would have loved to implement if given more time to work on the project.
The proposed feature would be implemented by limiting the number of API calls/DB writes that the user is able to preform to a free trial. The customer would have to subscribe to the premium tier for a monthly fee in order to increase the number of API calls/DB writes.
This proposal would enable the application to detect the public address on a Metamask wallet contained in the browser. Hashboard would automatically add the transactions from this address to the database.
The main use case for this software is to be a tool for forensic accounting on the blockchain. Many tools such as this are being developed by government agencies currently. It is my belief that normal people should be able to have access to similar tools.
My original idea was to introduce new people to the cryptocurrency ecosystem by creating a user-friendly interface to allow users to view their transactions in a more intuitive way. This will allow users to view their blockchain transactions with more clarity & reduce some of the anxiety that new user will face when starting out in crypto. This application doesn't just limit you to viewing your own transactions, the user will be able to search any transaction on the Ethereum chain and save it to their dashboard. With this feature, users can track Ethereum whales & the movement of funds within important smart contracts. Many forensic accounting techniques can be preformed using this web application.
The target audience for this application reflects people within the age group of your average cryptocurrency user (16-35).
- To be provided with blockchain data in a format that is easy to navigate and understand.
- To use public blockchain data in order to track funds moving through the ecosystem.
- The ability to prioritise specific transactions.
- To be able to add small pieces of text to priority transactions.
- To update text related to priority transactions.
- Creating a clean data layout with any unnecessary information removed.
- Allowing the user to search transactions from any public Ethereum address.
- Giving the user the ability to favourite priority transactions.
- The user is then able to add important text information related to that transaction.
- This information can be edited if it becomes outdated.
- Once a user is finished needing to view these transactions, their favourites list can be reset.
- The ability to store large volumes of transactional data without the risk of this data being removed from the system.
- Unlimited access to API request & database CRUD operations.
This section will outline goals set out by application creator both in relation to how they would like to develop as a software engineer & their financial goals as regards to the website.
- Due to this project being my first Python web application, my main goal was to learn as much as possible about Python web development.
- In the future, I would like to work as smart contract developer. This project, even though it doesn't use any smart contract, is a great project to have in my portfolio.
- To provide an application which is a useful tool to the crypto community.
- The application should also keep the user coming back regularly due to the necessity of the product.
- Use the application's traffic to sell advertising.
- (Future Feature) Create a premium tier account for heavy users.
Limit the user to a set number of blockchain searches & favourite transactions. This will incentivise active users to upgrade to the premium tier.
Premium tier users will have unlimited access to search and adding favourite transactions.
-
As a user of this web application I want:
- A clean and enjoyable UX, everything should be where I want it.
- Fonts that are legible but something a bit different to the norm.
- Little to no load times when the website first starts or has to complete a process.
-
As somebody looking to advertise on this website I would like:
- Content that is family friendly and not provocative, so our brand doesn't become tarnished.
- Heavy user traffic in order to get our brand in front of as many eyeballs as possible.
- Fast load times to ensure impatient users don't leave the site.
I really enjoy this favicon which was sourced from Favicon.cc
For this project, I decided to use the Materialize framework which is build on the principles of material design. After completing the project using this new framework, I can safely say that I prefer it more than Bootstrap which I have used on my previous 2 milestone projects. It appears to provide more feedback to the user when they are navigating throughout the web application while remaining responsive on most devices.
All icons for this application have been sourced from Google Fonts collected from the Material Icons library. As the designer of the web application, the selection of the icons must be done in line with other successful applications.
After searching a public Ethereum address, its transactions will then be added to your hashboard. The next step is for the user to prioritise certain transactions which they deem important. The heart icon has been used for nearly a decade now in order to represent important items within a list.
Once the user has added their priority transactions to their favourite list, a text note may have been added. The edit icon is what allows the user to change the note stored in relation to their transaction. I have chosen the pen icon from Material Icons as it has been used by previous developers when interacting with text-based components.
Finally, once the user has no more need to prioritise a specific transaction, there needs to be a way in order for the user to be able to clean up their favourite list. There could only be one realistic choice for this icon as it has been used so predominantly in software design. I decided to use the rubbish bin icon due to its intuitive nature.
There has only been one font chosen for this project due to the nature of the application. I wanted to keep the application as minimal as possible. Only having one font, reduces complexity in the eye of the user leading to a more streamlined experience.
The font chosen was taken from Google Fonts. I chose this font as it was extremely legible & simple while still remaining fun and playful.
The colour palate was chosen to emulate the design choices of the Ethereum foundation. Since it's inception, Ethereum's colour theme has always been different hues of blue.
This is the specific colour chosen within the Materialize framework for the navbar as it lends itself nicely to the Ethereum colour scheme.
The colour of the buttons throughout the site is unchanged as it is the primary button colour for the Materialize framework. During the design process, I noticed that this shade of blue complemented the teal hue of the navbar.
This section will outline the key elements within this application giving descriptions on the purpose of each element.
Modals have been used several times throughout the application in order to confirm if a user would like to proceed with an irreversible process. This is considered best-practice in web development as the user could easily push a button by mistake and trigger a process which cannot be undone.
As the majority of the web application is simply styled in order to create that sleek minimal look, modal design is where I have allowed for some more adventurous styling. As you can see in the example above, once a modal is activated, a shadow effect is applied across the screen behind the modal. A secondary teal shadow has been added to the border of the modal to give it a 3D-like appearance.
For the desktop view, a data table was used to represent the Ethereum transaction data. Data tables allow more information to be displayed to the user without causing confusion. In order to aid this property, as much of the non-critical data has been removed.
From the beginning of the design of the application, I knew that a separate view would be needed to display transaction information to mobile/tablet users. A data table in this context wouldn't be able to sufficiently show all data fields to the user in a satisfying manner.
In order to counteract this, a gallery style view was created for mobile/tablet users. Each transaction is represented by a slide within a larger gallery. Users swipe from left to right in order to access different transactions. I believe this is a design which many mobile users are familiar with due to the rise of social media applications such as Instagram.
Within this application there are 2 levels of error handling:
-
Flash Messages notifies the user when:
- Normal processes have occurred such as transactions being added or removed.
- An incorrect password provided upon login.
- An email address has already been used upon signup.
- If the length of the Ethereum public address provided is incorrect.
-
Exceptions are displayed to the user when:
- If the database query fails.
- A user tries to access certain parts of the application without proper credentials.
- The API response is incorrect or times out.
In order to communicate information to the user, an alert system was needed. Flask has a built-in messaging library known as flash, which we can use to send important information to the frontend. Along with passing data, we can also categorise these messages into pre-defined groups such as "error" & "info". This allows us to change the styling of the HTML element displaying the alert depending on the category of the message.
During the development of this application, I decided to create a generic exception handler instead of creating specific exception handler for each type of exception. This way all possible Python subclasses of exception are covered. The user can then read the description of the exception in order to evaluate what went wrong.
Other low level exceptions such as client-side errors (4xx) or server-side errors (5xx) will also be handled, describing to the user which error occurred. The user will also have an option to either return to their homepage or the login page depending on their credentials.
Lottie provides lightweight animation hosting which provides significantly smaller footprint than conventional animations.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
The blockchain search tools is the key component to the entire Hashboard application. Here, the users can add transactions related to any address within the public Ethereum ecosystem. During the Ethereum API decision-making process, there was 1 clear winner Etherscan. Etherscan is the leading blockchain explorer and has been around since Ethereum's inception.
Once transactions have been added from a specific Ethereum address we can then start to provide additional value which Etherscan itself doesn't provide. Users have the ability to prioritise specific transactions and additionally they can save important information which is related to that transaction.
Once the user has decided to prioritise a transaction, the user is given a text area where they can input information such as a description of the transaction or detailing the name belonging to the Ethereum public address. This feature could be used in order to do forensic accounting on the blockchain.
This section will outline the technologies & processes used in the design & implementation of this application.
For this project, the frontend framework I decided to use was Materialize. In my previous 2 milestone projects, I chose Bootstrap for the frontend, but I can now safely say that I much prefer the look of Materialize. As it is based on the principles of material design, all elements just seem that little bit sharper and current.
For the backend on this application, MongoDB was chosen to implement the noSQL database as outlined in the assessment handbook.
MongoDB atlas is a cloud-based database service with a clean frontend client which allows you to see your collections evolve in real time.
One of the main goals of this milestone project was to integrate a database within our application and use it to it's full potential. CRUD in computer programming is an acronym which stands for create, read, update & delete. This covers the 4 main operations of a database. Within this section I will go over how I implemented each of these operations.
This operation is preformed for 2 separate processes. After a user submits the signup form, a record is created & added to the User collection.
A creation operation also occurs for each transaction once the user searches an Ethereum public address within the Transaction collection.
On the hashboard.html page, all transactions being displayed to the user are read from the Transaction collection using the user's id as a foreign key. Read operations also happen when submitting a login form.
Once a user has transactions marked as priority, an edit icon is visible. Here, the information in relation to the transaction can be changed via an update operation on the database. This is the only update operation present within this application.
Once again within the priority transaction list, the user has the ability to remove transaction which causes a delete operation to be executed on the backend. Another delete operation happens if the user wishes to clear non-priority transactions from their hashboard.
The Etherscan Ethereum Developer APIs are provided as a community service and without warranty. Which means, that developers should be mindful in relation to how many calls their application is making. It supports both GET/POST requests and there is a rate limit of 5 calls per sec/IP.
Flask is a web application framework written in Python based on the Werkzeug toolkit & the Jinja2 templating language. During my development of this application is when I noticed the usefulness of flask, getting to experiment with the different flask libraries. Jinja templating also opened a lot of doors for me as a web developer when managing repeated pre-defined data.
This application couldn't be possible without the Etherscan API request function, it is the basis of the entire website. The get_transactions() function within eth.py is in charge of the entire process, making three different API calls. One for standard Ethereum transactions, one for ERC-20 transactions & finally one for NFT transactions based on the ERC-721 standard.
These responses are then converted in json data, added to the database and combined into one consolidated list of transactions. This list can then be displayed to the user.
Due to the nature of the application, no image compression was needed as all design elements are from the Materialize framework. No images were used in the making of this application.
By using the Lottie animation player, we can bring beautiful animations into our application without having to worry about file size and hence performance. I have used a single hosted Lottie animation on the error.html page.
The CSS style rules have been Autoprefixed to maintain uniformity of style rules across all browsers.
As the application began to take shape with all major components in place, the user testing could commence. This was done by reviewing each component line by line to ensure that the code works as intended. If an edit was to be made, the developer made sure to the changes were reflected correctly on the frontend.
Within flask, the abort library allows developers to manually throw Errors in order to test the application for many kinds of errors/exceptions. I was really satisfied using this tool, it saved me a lot of hassle while testing for Exceptions.
Once the application was successfully deployed to Heroku, I used my mobile in order to view how styling looked on an actual device, not just within the browser's developer suite. After editing the styling to prefect the user experience, I tried another device different in both manufacturer and screen size to ensure that the styling remained consistent.
-
This application satisfies the needs of the user by:
- Having a clean UI, based on the principles of material design.
- Ensuring that all text on the website is legible at a quick glance.
- Being designed efficiently, compressing data wherever possible.
-
Advertiser needs are satisfied by this project as:
- The site's content is advertiser-friendly and noncontroversial.
- The web application is designed to maintain users attention by providing value.
- The application is efficiently designed.
-
The needs of a business user are satisfied by this application because:
- Currently there is no set upper limit to the number of API requests that can be made.
Initially when designing the mobile menu, I wanted to use some additional features outlined in the Materialize documentation. The ability to access the mobile menu by swiping the left side of the screen. During testing, it became evident that most modern smartphones use this gesture in order to go back to the last page in the browser.
I have just noticed a bug on the mobile view a few minutes before submission. When the materialize carousel in the mobile view is empty, we get an error: "Cannot read property 'clientWidth' of undefined" After re-reading the Materialize documentation, I cannot see where I am going wrong and I do not have enough time to troubleshoot.
Addendum: I have tried to fix this issue, it sometimes appears that the carousel doesn't populate. Everytime I refresh the page the issue gets resolved, very frustrating. I am writing this with minutes left to go before the submission deadline.
This bug would happen generally the first time that the user would log onto the site. As there would be no current session for the user which would throw an exception.
In order to prevent this, I changed the index route so that it would point to login.html. This way, as the user lands on the site for the first time, they can create their user session and have access to all of their content.
When deploying your application to Heroku, they're are several hurdles which will hinder your site from popping up when you hit that 'open app' button on the Heroku dashboard. It is essential to make sure that your requirements.txt file is up to date with all imported libraries being used within your application.
Setting up the MongoDB backend was not without its troubles. It took several days in order to get it working correctly but with the help of the MongoDB documentation, I was able to configure the environment variables correctly.
During the initial development of the Etherscan API request function it was unclear why we were getting bad responses. It became clear that the letters used within an Ethereum public address are not case-sensitive. A simple change was made to the function, converting an address submitted to the form to automatically convert the address to lowercase.
This section will cover all software dependencies needed to run this application.
The requirements.txt file contains the library names & version numbers in case in future other developers or myself would like to re-deploy this project from its original state.
This library is essential to this application & I believe that it deserves its own section. Web3 will change everything we know about web development within the next decade by pushing decentralisation to the average internet user.
Within this application, I have used Web3 only for one specific function, fromWei(). This function allows for the conversion of Wei to Eth.
This project was developed using Gitpod, committed to git and pushed to Github using the built-in function with Gitpod.
To deploy this page from Github pages from its Github repository, the following steps were taken.
- Log into Github.
- From the list of repositories on the screen, select saoirse-defi/milestone1-bad-arts-1.0.
- From the menu items near the top of the page, select Settings.
- Scroll down to the Github Pages section.
- Under source click the drop-down menu labelled None and select Master Branch.
- On selecting Master Branch, the page is automatically refreshed, the website is now deployed.
At the moment of submitting this milestone project, the default branch is version1.2 which is the latest version.
To clone this project into Gitpod you will need:
- A Github account
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod browser extensions for Chrome
- After installation, restart the browser
- Log into Gitpod with your Gitpod account
- Navigate to the Github project repository
- Click the green 'Gitpod' button in the top right corner of the repository
- This will trigger a new Gitpod workspace to be created from the code in Github where you can work locally
To work on the code within a local IDE such as VScode:
- Follow this link to the Github repository
- Under the repository name, click 'clone' or 'download'
- In the clone with the https section, copy the clone URL for the repository
- In your local IDE, open the terminal
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL copied in step 3
git clone https://www.Github.com/USERNAME/REPOSITORY
- Press enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository can be found here Github.
Follow these steps:
- Create a virtual environment with pipenv and install Flask and Gunicorn
- Create a “Procfile” and write the following code "touch Procfile" in the command line
- Create “runtime.txt” and write the following code "touch runtime.txt" in the command line
- Create a folder named “app” and enter the folder
- Create a python file, “main.py” and enter the sample code below
from flask import Flask app = Flask(name) @app.route("/") def home_view(): return "
- Get back to the previous directory “eflask”.Create a file“wsgi.py” and insert the following code
from app.main import app if name == "main": app.run()
- Run the vitual environment write "pipenv shell" in the command line.
- Initialize an empty repo, add the files in the repo and commit all the changes
- Login to heroku CLI using "heroku login"
- Create a unique name for your Web app, write "heroku create hashboard"
- Push your code from local to the heroku remote using "git push heroku master"
- Create a MongoDB Atlas account here
- Log into your MongoDB Atlas account
- Create a free, shared cluster by selecting your preferred provider, stick to the free tier
- Name your cluster and click create to deploy your cluster
- Add your connection IP address to the IP access list
- Create a new database user for your cluster
- Install PyMongo within your flask application, check version to see if installed correctly
- Provide a connection method & a configured connection string to MongoDB Atlas
- Import MongoClient from PyMongo within flask
- Insert a command within flask that specifies a client is for connecting to your cluster
- Create a new database within your cluster
- Create a new collection for your database
- Create a new document to add to your collection