Prepared By: Aaron Kopplin, Brad Samack, Josh Hubbard, Myren Mitchell

Abstract

Metallic is an intuitive payment platform, that allows users to easily make cryptocurrency payments to their friends based on their Metallic usernames, rather than using long and unwieldy cryptocurrency addresses. Metallic hides the technical details of making cryptocurrency payments, and offers a smooth platform where users can find their friends profiles, and start sending, receiving or requesting payments in seconds - without having to learn how to manage a cryptocurrency wallet, or understand how cryptocurrency payments work under the hood.

The implementation of Metallic is best suited for a mobile application, which would reach the largest audience, while preserving the best user experience. We built Metallic using React Native, which supports both Android and iOS platforms. Each metallic account comes with a secure randomly generated ethereum wallet which can easily accept ethereum deposits. Security is an important concern, so account security is achieved through Firebase user authentication and wallet security is achieved by storing the wallets on the end devices rather than in the cloud.

Introduction

Cryptocurrency is a rapidly growing form of digital payment that opens the door for anyone to immediately make a payment to anyone else in the world at nearly no cost. It represents the end of the era of central banks, and the beginning of the era of uncensorable, distributed, peer to peer commerce.

Though cryptocurrency aims to be an open platform, it still has its shortcomings in that getting started in crypto has a daunting, if not overwhelming, learning curve. It remains nearly inaccessible to those without a technical background, or those not willing or unable to invest time into learning a new way of doing commerce.

Cryptocurrency transactions happen between public addresses that are usually roughly thirty character outputs of cryptographic hash functions that look something like this: “35hK24tcLEWcgNA4JxpvbkNkoAcDGqQPsP”. To gain mainstream adoption, cryptocurrency needs platforms that make it simple and enjoyable to use, and prevent the user from getting sidetracked or lost in understanding the technical details.

To solve these problems, we have developed a mobile application available on both iOS and Android platforms called Metallic. Metallic allows users to easily manage and send their cryptocurrency without getting overwhelmed by public addresses, private keys, and complicated price charts. On Metallic, you can create a profile which displays your name, username and profile image. To find your friends, just tap on the search icon and type in their name or username. Click on their profile and you can easily add them as a contact for future reference, or begin sending and receiving payments from them.

Metallic

Ethers JS

Ethers JS is a javascript library that connects to an ethereum blockchain data provider, and contains functions for creating and managing ethereum wallets. Ethers JS has useful functions for Ethereum wallets like random wallet generation, wallet recovery from either a private key or mnemonic phrase, creating and signing transactions and connecting to data providers. Metallic uses Ethers JS because it can be integrated into react native projects, unlike other ethereum blockchain libraries.

Ropsten

Ropsten is an Ethereum Test network that Metallic uses to mimic using real cryptocurrency. Ropsten has a public blockchain with an unlimited supply of ether, which is freely available from faucets online like https://faucet.ropsten.be/. Developers can paste their metallic addresses into the faucet and receive test ether at no cost. Ropsten acts nearly identically to the real Ethereum blockchain, and all of the same code can be used to send payments on the real blockchain. The only thing that changes in production code is the provider connection.

Infura

Infura is an Ethereum Blockchain Data provider that Metallic uses to connect to the Ropsten test network. Metallic connects to infura through an HTTP connection and can send transactions to the blockchain and read data from the blockchain like the current gas price or the balance at a particular address.

Figure 1: Ethereum Blockchain Communication

React Native

Metallic was written in Javascript using the React Native platform for cross platform compatibility. React native supports both Ethers JS and Firebase.

Expo

Expo is a mobile app and development tool that can boot react native apps from source code onto a development device. We used Expo during development to quickly test code. After making changes to the source code, expo can reload part of the app at run time.

Firebase

Firebase is Google’s scalable cloud database and user management system. Metallic uses Firebase to create user accounts and authenticate users when they log into the app. User account data is associated with each user account, and can be retrieved using the unique identifier associated with each user account. Data is stored on Firebase within collections of documents. This data is then queried, so that we can display it to the user. See Figure XX for a demonstration of how we retrieved a user’s contacts through a query.

Figure 2: Example query to firebase in code.

Repository Organization and Management

All code for the project is hosted on a public Github repository. Apart from a few javascript files in the main project directory all of the code is contained within the “src” directory. Here we have multiple subdirectories for the app:

• Ethereum: for housing all the javascript files for work on the Ethereum blockchain.
• Firebase: is for configuring our database and function calls to that database.
• Screens: makes up the app itself. All individual screen code and functionality is contained here.

For uploading content to the github we utilized a multitude of branches for separating our work and focusing work on specific features (See Figure XX). This allowed us to each use our own working versions of the app without worry of someone breaking it with code they pushed. It also made it easier for each other to test each other's code and see the changes made on their end because everything was separate so the specific changes were easy to notice.

Figure 3: list of Github branches Local and Remote

UI Design and Features

The app is divided into four main areas, the Account screen, the Contacts screen, the Search screen, and the Recent Chats screen. Each area represents a major functional component of the app.

Account Screen:

The account screen displays all public account information for both the currently logged in user and, when navigating to another user's account, displays the public information for that user. Public information for accounts includes:

• The name of the owner of the account, like “Bob Smith”
• The username of the account, like “@bobSmith”
• The balance of the account in terms of Ethereum, like “0.15 Eth”
• The score of the account, which is the number of payments sent and received for that account
• The profile image of the account

The balance is public information, because account balances are always publicly viewable for any ethereum address on the blockchain. Displaying the score of the account helps to establish account credibility and reduce spam account influence. Lastly, profile images help users to differentiate between multiple accounts with similar names or usernames.

Additionally, the account screen contains buttons that allow the user to change their profile picture, and to view the QR code that represents their public ethereum address. The QR code is useful, because it is scannable by most wallet apps, and populates the correct address in the receive field when sending cryptocurrency. It is easy to copy and paste the wrong address, or to make a typo when typing the address, which could result in unrecoverable losses of funds. Having a QR code drastically reduces the number of things that can go wrong when sending cryptocurrency.

The account screen allows users to log out of their account by tapping in the upper left corner, as well as to view the details of their account by tapping in the upper right corner. When viewing account details, users can see their email address, public ethereum address, private wallet key, private wallet mnemonic phrase, and their account name and username.

Figure 4: Account Screen and Account Details Screen

Search Screen:

The search screen displays a list of the registered users of the app and allows for one user to search for another user’s account. Three pieces of account information are used when searching for a user: username, full name, and email. This gives the user the ability to easily find any specific user that they are looking for so that they can interact with said user.

Contacts Screen:

The contacts screen displays a sectioned list of all of the currently logged in user’s contacts. With this, the currently logged in user can quicker navigate to the account screen of someone they are likely to communicate or send payments to, rather than having to do a user search to find and navigate to their account.

Figure 5: Search Screen and Contacts Screen

Recent Chats Screen:

The recent chats screen displays a list of all of the messages you have sent, organized by the recipient of the message. Clicking on an entry will take you to the payments screen, and display all of the messages and payments that have been sent with that user.

Payments Screen:

The Payments Screen displays all of the payments between the currently logged in user and the recipient of those messages. Each message or payment is displayed in a bubble, with the messages that the owner of the account has sent on the right, and the messages that have been received on the left. Each message has a memo, and optionally an ethereum payment amount. Users enter a memo, then optionally can enter an amount of Eth to send, and can confirm the payment by tapping the send button. At the top of the screen is the username and profile picture of the user that is the recipient of the messages. Tapping on their profile image will allow the user to view their account.

Figure 6: Recent Chats Screen Screen and Payments Screen

Areas of Technical Growth

Aaron: I had been working on the initial concept of Metallic extensively during the month prior to this semester. Previously, I had written a basic version of metallic in Python, due to my experience with the language and python gui frameworks. Moving to Javascript was a big leap for my skill set. At the beginning of the semester, I had very little javascript experience. I knew a bit about git, but only had previously used commits, pulling and pushing to repositories. This semester, I learned a lot of git for version control during development. I also became familiar with Javascript and React Native. React native is a framework with a lot of hook methods and particular ways of structuring code that I was not familiar with before. I also learned about Firebase and the nature of asynchronous operations. Lastly, my debugging skills improved because there were many scenarios where the code was behaving in unexpected ways that required a lot of analysis and patience to correct.

Brad: Over the course of the semester I learned a great deal about javascript and github. I had no experience with javascript prior to this and learning the language proved to be simpler in some ways and more difficult in others. At times I would find myself underestimating how to implement something and could get hung up on implementing that one thing for a long time. Github on the other hand I have used in the past, but never to the extent we had done on this project. The amount of time we would branch and merge code helped me experience first hand the benefits of working within your own branch for a feature rather than having everyone work on the Master branch. This project also allowed me to learn about different frameworks and solutions. From React-Native and its use for creating multi-platform applications to Google’s Firebase for a database solution. Both of these helped broaden my knowledge on the tools that are out there to develop something and how they could compare to other tools out there.

Josh: Leading up to this semester, I had never worked with any web or cross platform mobile development, though I do have prior experience with native development for iOS and Android. I had also only sparingly used any type of source control, like GitHub, and no prior experience with working with a database, like Google Firebase.

I had to put in a considerable amount of time learning the basic principles of React Native and javascript standards for cross platform mobile development. I also needed to better familiarize myself with using GitHub, though a lot of my knowledge with using it came from Brad. Learning how to effectively and efficiently communicate our app with the database also required a good amount of research and troubleshooting to accomplish without greatly compromising the overall user experience by keeping the database read/write speed decently quick.

I have also gained a good amount of experience with the agile development process and better experience with developing within a group and effectively communicating and coordinating with each other.

Myren: Before starting work on this project, I have never worked with a cross-platform application. The first few weeks had a steep learning curve with understanding React Native and Firebase, but once I was familiar with the tools progress continued smoothly. While learning how to use the platforms, there was a lot of trial and error to see what methods worked best for the project. I spent a lot of my time working with Firebase Storage to learn how to allow users to upload photos to our database, and then learn how to display those pictures in the app. This was a great experience to learn how to work on a project from the initial design to full development on a team. By having to quickly pick up on new development tools, I am confident in my ability to understand and use unfamiliar platforms quickly. I also feel extremely comfortable working with Github and I feel like I have a better understanding of the software development process as a whole.

Software Engineering Code of Ethics and Professional Practice

Principle 1: PUBLIC

1.01. Accept full responsibility for their own work.

Every member of the team was responsible for their individual code contributions to the project.

1.03. Approve software only if they have a well-founded belief that it is safe, meets specifications, passes appropriate tests, and does not diminish quality of life, diminish privacy or harm the environment. The ultimate effect of the work should be to the public good.

Team members only contributed work that they believed to be for the benefit and good of the future product user.

Principle 3: PRODUCT

3.02. Ensure proper and achievable goals and objectives for any project on which they work or propose.

When setting goals for individual sprints, all team members worked together to create manageable goals for each other to work towards.

3.10. Ensure adequate testing, debugging, and review of software and related documents on which they work.

All team members were responsible for properly debugging and testing their code before merging it into the working code.

3.13. Be careful to use only accurate data derived by ethical and lawful means, and use it only in ways properly authorized.

All data stored from this program is given with the full consent of the user.

3.14. Maintain the integrity of data, being sensitive to outdated or flawed occurrences.

The program strives to keep the database as up-to-date as possible.

Principle 4: JUDGEMENT

4.04. Not engage in deceptive financial practices such as bribery, double billing, or other improper financial practices.

Our project does not take any money from our users and all transactions between users are exclusive to those two users.

Principle 6: PROFESSION

6.06. Obey all laws governing their work, unless, in exceptional circumstances, such compliance is inconsistent with the public interest.

The team took current laws into account and created a project that complies with the law.

6.07. Be accurate in stating the characteristics of software on which they work, avoiding not only false claims but also claims that might reasonably be supposed to be speculative, vacuous, deceptive, misleading, or doubtful.

When presenting information on our project, the team strives to present an accurate representation of the program's capabilities.

6.08. Take responsibility for detecting, correcting, and reporting errors in software and associated documents on which they work.

While the time was developing our project, any errors that we found while testing our code was added to our github repository list of issues. When we had finished our goals for a sprint and had extra time, we would work our way through the list and correct as many errors as we could.

Principle 7: COLLEAGUES

7.03. Credit fully the work of others and refrain from taking undue credit.

Every member of the team was acknowledged for their individual contributions to the project. This is documented in individual commits to the github repository and is documented in our project journals.

7.04. Review the work of others in an objective, candid, and properly-documented way.

Team members tested and looked over each other’s contributions to the project to ensure proper progress was being made.

Principle 8: SELF

8.01. Further their knowledge of developments in the analysis, specification, design, development, maintenance and testing of software and related documents, together with the management of the development process.

This project allowed all of the members to improve on their application design skills, gain knowledge of React Native, and develop testing strategies during the course of the project’s development.

8.05. Improve their knowledge of relevant standards and the law governing the software and related documents on which they work.

While developing our project, the team strived to make our project match standards already found in the public through other currency transfer applications.

Teamwork Reflection

For this project, communication was key to making progress during the sprints. We met two to four times each week on discord, regularly staying on the call for more than two hours. Our real time collaboration was highly effective when we were working together on a particular task. Often, one member of the team would be working on a feature, and if they were stuck another team member could quickly suggest alternative solutions.

We split up much of the work, with areas of focus including each of the main screens of the app, blockchain code, user interface improvements, and database code. This proved to be an effective framework, especially when working on cross functional items, like integrating multiple screens or systems within the app because each team member knew their area of focus well.

Conclusion

Metallic leverages several technologies to create a user experience that gives users confidence when sending and receiving cryptocurrency payments. Thanks to React Native, metallic is cross platform by default and can be deployed to the majority of mobile devices in the world. Additionally, only an internet connection and some cryptocurrency is required to interact with the blockchain and every other account on metallic. Once an account is created on Metallic, users will find it incredibly easy to manage their wallet and interact with other wallet owners. Firebase cloud database makes accounts secure by managing all user account authentication as well as account data, like usernames, emails, passwords, and public addresses. Lastly, metallic ensures cryptocurrency wallet security by storing sensitive information only on the end device. Users can easily back up their wallet by recording their mnemonic phrase, which can be used to recover funds in the event of a lost account or device.