DEFYN – A DEFI PORTFOLIO MANAGER

A PROJECT REPORT

Submitted by

AATHI ABHISHEK T

AKASH PERUMAL GB

AKSHAY KUMAR G

GANESH KARUPPASAMY R

In partial fulfilment for the award of the degree

of

BACHELOR OF ENGINEERING

in

COMPUTER SCIENCE AND ENGINEERING

PSNA COLLEGE OF ENGINEERING AND TECHNOLOGY,

DINDIGUL - 624622

ANNA UNIVERSITY: CHENNAI - 600 025

JUNE 2022
 BONAFIDE CERTIFICATE

Certified that this project report “DEFYN – A DEFI PORTFOLIO MANAGER”

is the bonafide work of “AATHI ABHISHEK T (921318104002), AKASH

PERUMAL GB (921318104005), AKSHAY KUMAR G (921318104007),

GANESH KARUPPASAMY R (921318104042)” who carried out the project

work under my supervision.

SIGNATURE SIGNATURE

Dr. D. SHANTHI, M.E., Ph.D., Dr. D. SURESH M.E., Ph.D.,

HEAD OF THE DEPARTMENT SUPERVISOR

Professor Professor

Department of CSE Department of CSE

PSNA CET PSNA CET

Dindigul – 624 622. Dindigul – 624 622.

Submitted for the project viva-voce examination held on ……………... 2022

INTERNAL EXAMINER EXTERNAL EXAMINER

ii
 ACKNOWLEDGEMENT

With warm hearts and immense pleasure, we thank the Almighty for his grace
and blessings which drove me to the successful completion of the project. We would
like to express our gratitude towards our parents for their kind cooperation and
encouragement which helped me in completion of this project.

We take this opportunity to express our sincere thanks to the respected

Chairperson Tmt.K.Dhanalakshmi Ammal, who is the guiding light for all the
activities in my college. We would like to express our deep gratitude to our
ProChairman Rtn. MPHF R.S.K.Raguraam, D.A.E M.Com for their continuous
support towards the development of the students.

We would like to thank our Principal Dr.D.Vasudevan., M.E., Ph.D. for

being a beacon in guiding every one of us and infusing us the strength and
enthusiasm to work over successfully.

We express our sincere thanks and heartfelt gratitude to Dr.D.Shanthi, M.E.,

Ph.D., Professor and Head, Department of Computer Science and Engineering for
her valuable suggestions and continuous encouragement in the completion of the
project work.

This project would not have been possible without the motivation and
guidance of our project coordinator and project guide Dr. D. SURESH M.E, Ph.D.,
Professor, Department of Computer Science and Engineering.

iii
 ABSTRACT

DeFi is short for “decentralized finance,” is a financial application which is

highly secured. Decentralized Finance (DeFi) for transferring and managing crypto
assets similar to managing fiat assets at present i.e., bank accounts. It gives us
exposure to the global markets and alternatives to the currency we use or banking
options. DeFi is connected with blockchain, which is decentralized, immutable, and
that enables all computers (or nodes) on a network to hold a copy of the history of
transactions. DeFi helps us to control and visibility over your money. There is no
single entity that has control over, or can alter, that ledger of transactions. It also
replaces the bankers and brokers that are enforcing laws against money laundering,
creating an unknown economic environment that the regulators would have to
traverse and DeFi can address many of the flaws in the existing financial systems,
including giving the unbanked access to the financial system. DeFi is distinct as a
result of it expands the utilization of blockchain from easy price transfer to complex
financial use cases. DeFi products open up financial services to anyone which
requires internet connection and they're largely owned and maintained by their users
all over the world. So far billions of dollars’ worth of crypto has flowed through
DeFi applications and it's expanding day by day. DeFi will be the future which will
replace all kinds of transactions.

iv
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT iv

LIST OF FIGURES viii

LIST OF ABBREVIATION ix

1 INTRODUCTION 11

1.1 OVERVIEW OF DEFI 11

1.2 INTRODUCTION 11

1.2.1 TYPES OF TOKENS 12

1.2.2 APPLICATION OF DEFI 13

2 LITERATURE SURVEY 14

2.1 LITERATURE SURVEY 14

2.1.1 THE DECENTRALIZED FINANCE CRISIS 14

2.1.2 FINANCIAL TECHNOLOGY PROTOCOL:

A REVIEW 15

2.1.3 DECENTRALIZED FINANCE (DEFI): THE

FUTURE OF FINANCE AND DEFI APPLICATION 15

FOR ETHEREUM BLOCKCHAIN BASED

FINANCE MARKET

3 PROBLEM DESCRIPTION 17
3.1 EXISTING SYSTEM 17

3.2 PROPOSED SYSTEM 18

3.3 PROBLEM DEFINITION 18

v
 3.4 SOLUTION ADAPTED 19

4 SYSTEM SPECIFICATION 20

4.1 SYSTEM REQUIREMENTS 20

4.1.1 HARDWARE REQUIREMENTS 20

4.1.2 SOFTWARE REQUIREMENTS 20

5 SYSTEM DESIGN 21

5.1 UML DIAGRAMS 21

5.1.1 USE CASE DIAGRAM 21

5.1.2 ACTIVITY DIAGRAM 22

5.1.3 SEQUENCE DIAGRAM 23

5.1.4 LOW LEVEL DIAGRAM 24

5.1.5 HIGH LEVEL DIAGRAM 25

5.1.6 DATABASE DESIGN 26

6 SYSTEM IMPLEMENTATION AND TESTING 27

6.1 MODULE DESCRIPTION 27

6.1.1 DESIGNING UI 27

6.1.2 AUTHENTICATION 27

6.1.3 CONTACT CREATION 27

6.1.4 DASHBOARD 28

6.1.5 TRANSFER 28

6.1.6 HISTORY OF TRANSACTION 28

6.2 OVERALL FUNCTIONING OF WEB APPLICATION 28

vi
 6.2.1 ANGULAR 28

6.2.2 PRODUCTIVITY 29
6.2.3 FULL STACK DEVELOPMENT 30

6.2.4 ANGULAR APPLICATIONS 30

6.2.5 COMPONENTS 35

6.2.6 MODULES 35

6.2.7 ROUTING 36

6.2.8 DEPENDENCY INJECTION 37

6.2.9 THE THREE PILLARS OF ANGULAR 38

6.3 MORALIS 38

6.3.1 DATABASE 39

6.3.2 MORALIS SDK 39

6.4 METAMASK WALLET 39

6.4.1 HISTORY 40

6.4.2 CREATING A WALLET 40

6.5 SENDGRID 42

6.6 MONGODB 42

6.6.1 HISTORY 42

6.6.2 AD-HOC QUERIES 43

6.6.3 INDEXING 43

6.6.4 REPLICATION 43

6.6.5 LOAD BALANCING 43

6.6.6 FILE STORAGE 44

vii
 6.6.7 CAPPED COLLECTIONS 44

6.6.8 TRANSACTIONS 44

6.7 SYSTEM TESTING 45

6.8 UNIT TESTING 46

6.9 VALIDATION TESTING 46

7 CONCLUSION AND FUTURE ENHANCEMENTS 48

7.1 CONCLUSION 48

7.2 FUTURE ENHANCEMENTS 48

REFERENCES 49

APPENDIX: A SAMPLE CODE 50

APPENDIX: B SNAPSHOT 62

viii
 LIST OF FIGURES

Figure No Description Page No

5.1 Use case Diagram 21

5.2 Activity Diagram 22

5.3 Sequence Diagram 23

5.4 Low Level Diagram 24

5.5 High Level Diagram 25

5.6 Database Design 26

6.1 Meta Mask 40

6.2 Password Creation 41

6.3 Recovery Phrase 41

6.4 Unit Testing 46

6.5 Validation Testing 47

6.6 Validation Testing 47

7.1 Dashboard 62

7.2 Contact creation 62

7.3 Request sent 63

7.4 Block option 63

7.5 Friend list 64

7.6 Transaction initiated 64

7.7 Transaction Rejected 65

7.8 Transaction Successful 65

7.9 Status of Transaction 66

ix
 LIST OF ABBREVIATION

ACRONYMS ABBREVIATIONS

OS Operating System

UI User Interface

UML Unified Modelling Language

TS TypeScript

DeFi Decentralized Finance

TXID Transaction ID

ERC Ethereum Request for Comment

DEX Decentralized Exchange

SEC Securities and Exchange Commission

x
 CHAPTER 1

INTRODUCTION

1.1 OVERVIEW OF DECENTRALIZED FINANCE

DeFi (Decentralized Finance), uses cryptocurrency and blockchain technology to

manage financial transactions. DeFi aims to democratize finance by replacing legacy,
centralized institutions with peer-to-peer relationships that can provide a full spectrum of
financial services, from everyday banking, loans and mortgages, to complicated contractual
relationships and asset trading. Today, almost every aspect of banking, lending and trading is
managed by centralized systems, operated by governing bodies and gatekeepers. Regular
consumers need to deal with a raft of financial middlemen to get access to everything from
auto loans and mortgages to trading stocks and bonds. In the U.S., regulatory bodies like the
Federal Reserve and Securities and Exchange Commission (SEC) set the rules for the world of
centralized financial institutions and brokerages, and Congress amends the rules over time. As
a result, there are few paths for consumers to access capital and financial services directly.
They cannot bypass middlemen like banks, exchanges and lenders, who earn a percentage of
every financial and banking transaction as profit. We all have to pay to play.

1.2 INTRODUCTION

DeFi challenges this centralized financial system by disempowering middlemen and

gatekeepers, and empowering everyday people via peer-to-peer exchanges. “Decentralized
finance is an unbundling of traditional finance,” says Rafael Cosman, CEO and co-founder of
Trust Token. “DeFi takes the key elements of the work done by banks, exchanges and
insurers today—like lending, borrowing and trading—and puts it in the hands of regular
people.” Here’s how that might play out. Today, you might put your savings in an online
savings account and earn a 0.50% interest rate on your money. The bank then turns around
and lends that money to another customer at 3% interest and pockets the 2.5% profit. With
DeFi, people lend their savings directly to others, cutting out that 2.5% profit loss and earn
the full 3% return on their money. You might think, “Hey, I already do this when I send my
friends money with PayPal, Venmo or Cash App.” But you don’t. You still have to have a

11
debit card or bank account linked to those apps to send funds, so these peer-to-peer payments
are still reliant on centralized financial middlemen to work. Blockchain and cryptocurrency
are the core technologies that enable decentralized finance. When you make a transaction in
your conventional checking account, it’s recorded in a private ledger—your banking
transaction history—which is owned and managed by a large financial institution. Blockchain
is a decentralized, distributed public ledger where financial transactions are recorded in
computer code. When we say that blockchain is distributed, that means all parties using a
DeFi application have an identical copy of the public ledger, which records each and every
transaction in encrypted code. That secures the system by providing users with anonymity,
plus verification of payments and a record of asset ownership that’s (nearly) impossible to
alter by fraudulent activity. When we say blockchain is decentralized, that means there is no
middleman or gatekeeper managing the system. Transactions are verified and recorded by
parties who use the same blockchain, through a process of solving complex math problems
and adding new blocks of transactions to the chain. Advocates of DeFi assert that the
decentralized blockchain makes financial transactions secure and more transparent than the
private, opaque systems employed in centralized finance.

1.2.1 TYPES OF TOKENS

People heard cryptocurrencies referred to as both “coins” and “tokens” for the first
time. Those terms might seem interchangeable to newcomers, but there’s a clear
distinction between the two, and it lies in the manner in which each is used: Coins,
including Maker Dao’s popular Dai stable coin, which is backed by a surplus of collateral,
serve currency functions, whereas tokens leverage crypto technology to serve a variety of
other user needs across industries.
A categorization system has materialized to explain the different types of cryptocurrencies
and help people navigate the landscape. A complete understanding of crypto begins with
a review of the most prevalent token types:

1. Platform tokens
2. Security tokens
3. Transactional tokens
4. Utility tokens
5. Governance tokens

12
1.2.2 APPLICATION OF DEFI:

There are many different DeFi projects; many of them are developing rapidly. The
amount of invested funds that may be expressed in monetary terms is analyzed within the paper
in order to stress the topicality of the reviewed theme and to organize up to-date information
on the most popular DeFi platforms. The data of DeFi Pulse portal were used in order to
examine the volume of funds invested in every DeFi platform. DeFi Pulse is one of the tools
that help users to make informed investment decisions. Every day DeFi Pulse publishes
information on the total value of the platforms – Total Value Locked (TVL), calculating the
existing protocol Ether (ETH) and ERC-20 balance and multiplying it with the price in USD.
According to DeFi Pulse data, the Total Value Locked in the dApp on 29 October 2020 was
11,288 billion USD and kept growing.

13
 CHAPTER 2

LITERATURE SURVEY
2.1 LITERATURE SURVEY:
DeFyn is a portfolio manager for cryptocurrencies which are discussed as below

2.1.1 The Decentralized Finance Crisis: The Global Financial Crisis of 2008, caused
by the accumulation of excessive financial risk, inspired Satoshi Nakamoto to
create Bitcoin. Now, more than ten years later, Decentralized Finance (DeFi), a
peer-to-peer financial paradigm which leverages blockchain-based smart
contracts to ensure its integrity and security, contains over 702m USD of capital
as of April 15th, 2020. As this ecosystem develops, it is at risk of the very sort
of financial meltdown it is supposed to be preventing. In this paper we explore
how design weaknesses and price fluctuations in DeFi protocols could lead to a
DeFi crisis. We focus on DeFi lending protocols as they currently constitute
most of the DeFi ecosystem with a 76% market share by capital as of April 15th,
2020. First, we demonstrate the feasibility of attacking Maker's governance
design to take full control of the protocol, the largest DeFi protocol by market
share, which would have allowed the theft of 0.5bn USD of collateral and the
minting of an unlimited supply of DAI tokens. In doing so, we present a novel
strategy utilizing so-called flash loans that would have in principle allowed the
execution of the governance attack in just two transactions and without the need
to lock any assets. Approximately two weeks after we disclosed the attack
details, Maker modified the governance parameters mitigating the attack vectors.
Second, we turn to a central component of financial risk in DeFi lending
protocols. Inspired by stress-testing as performed by central banks, we develop
a stress-testing framework for a stylized DeFi lending protocol, focusing our
attention on the impact of a drying-up of liquidity on protocol solvency. Based
on our parameters, we find that with sufficiently illiquidity a lending protocol
with a total debt of 400m USD could become undercollateralized within 19 days.

14
2.1.2 Financial Technology protocol: A Review: DeFi or Decentralized Finance is
a new type of financial application that does not require an intermediary. Banks
or financial institutions. DeFi is built on Blockchain technology that stores DeFi
transaction data or “decentralized finance” and aims to create financial services
that are open to all. The DeFi platform can operate by itself without any control
and is called “Smart Contract.” It is widely used as an infrastructure for
developers. Decentralized Applications (Dapps), which is the purpose of this
research, aims to study the operating system and capabilities of each platform.
The creators of Ethereum, in addition to Vitalik Bulletin, are also other founding
members who co-founded Ethereum, some of them have branched out to create
their own networks, such as Gavin Woord who spun off to create Polkadot
(DOT), or Charles Hoskinson who spun out to create Cardano (ADA), and
Fabian Vogelsteller who spun out to create Lukso (LYXe), etc. All three
networks are proof-of-stake blockchains, unlike Ethereum, which is Proof-of-
Work and Proof-of-Stake system which can do higher processing speed Proof-
of-Work. It saves a lot of energy, and instead of having each computer compete
with each other to solve the equation in exchange for permission to verify
transactions, Proof-of-Stake. The reviewers are randomly selected by the
system with higher processing speeds than Ethereum. These networks are called
third-generation Blockchain Ethereum. It is about to have a major update called
“Ethereum 2.0” that will change the network to Proof-of-Stake including
modifying various systems to make it easier to use for the general public. This
update is expected to take effect in the year 2022.

2.1.3 Decentralized Finance (DEFI) The Future of Finance and DeFi Application
for Ethereum Blockchain based Finance Market: This article examined how
transactions that are stored in the digital ledgers are recorded in the Blockchain.
It stores all the valuable data about the user's transactions. Results show that
Blockchain has made the financial sector to great peak and got a good reputation
among the people who thought it would not work well. By the use of
cryptocurrency in the blockchain technology, the Ethereum market has more
rise into the second-largest cryptocurrency platform in 2021. Furthermore, a key
aspect of the user's gain on share markets as investments when its value goes
peak. Due to a dilemma, in decentralized financial [Defi], Many of the users felt

15
insecure while joining into the network. But after the use of transactions in the
blockchain, through serial investigational factor study, the recently grow scale
was adapt to involve seven main characteristics of team-development
intervention (i.e., Decentralization, immutability, transparency, persistency,
auditability, security, and privacy). Many of the organizations came forward to
implement blockchain technologies in the Ethereum platform to do the
decentralized financial [Defi] exchanges. In this article, the theoretical and
practical implications of building an application for financially exchanging
bitcoins (Crypto-coins) by using the compound protocol. This protocol makes
our application highly secured and confidential in exchanging the Crypto-coins
by following the rules.

16
 CHAPTER 3

PROBLEM DESCRIPTION

The motive of the project is to develop a dApp - DeFi (Decentralized Finance) for
transferring, receiving, managing crypto assets. As crypto is going to be the future of currency
we need a system which is similar to existing bank.

3.1 EXISTING SYSTEM:

1. DeBank is a dashboard for tracking your DeFi portfolio, with data and analytics
for decentralized lending protocols, stable coins, margin trading platforms and DEXes.
Different from the previous wallets in blockchain ecology, this “wallet” was designed only in
favor of helping users to track and manage their DeFi assets. In the future, DeBank will be
found in both centralized and decentralized wallets.

The first version of DeBank mainly launched two core functions:

• Asset Management
• Data Analytics

About the Integration:

Moonbeam and Moon River are now both live on DeBank. Moon river had initially launched
in the 1st batch of 5 supported protocols Solar beam, Sushi Swap, Huckleberry, Auto farm, and
Beefy Finance. Moonbeam also went live with the first batch of supported protocols including
Solarbeam.io, Zen link, and Stella Swap

2. Zerion is the ultimate DeFi investment interface, allowing you to discover every
asset on the market, trade at the best rates and manage your entire DeFi portfolio from one
place. Zerion tracks over 50 protocols, making it easy to find your tokens spread across multiple
DeFi platforms and Ethereum addresses. Zerion Wallet is a non-custodial wallet for crypto that
gives you access to a broad range of opportunities across DeFi and NFTs. With Zerion Wallet
you can easily lend out your cryptocurrency and generate a yield. You can also provide liquidity
and earn trading fees.

17
3.2 PROPOSED SYSTEM:

• There are certain DeFi portfolio managers available in the market but the problem is
that most of the users from web 2.0 find it difficult to understand those apps. So we are
trying to make a smooth transition from web 2.0 to web 3.0 thus makes this platform
easy to understand.

• Wallet spoof proof is a key feature to protect accounts by avoiding connection from
other users. (One wallet for one user).

• There is analytical page (dashboard) which is easy to understand the transaction

diagrammatically and contains every key details.

• We can log in by use of email authentication to download a transaction and no need of

wallet authentication

• We can able to see the status of the transactions on live.

• This welcomes more people to understand and thus promotes the use of dApps.

3.3 PROBLEM DEFINITION:

● “Change is constant” and it’s obvious. We had barter system which turned into
monetary system with time, which later evolved into digital currencies like CBDC -
[Central Bank Digital Currency], decentralized assets like Bitcoin, Ether, Matic and
the list goes on.

● We have internet banking, mobile banking to manage our money and transactions but
we only have prominent apps to transfer decentralized digital assets and not for
managing them. Certain apps are in the market which are not user friendly for rookies.

● So, with our app we try to make users a smooth transition from web 2.0 to web 3.0.

18
3.4 SOLUTION ADAPTED:

The main motive is the user can see the transaction history in detailed by knowing the
sender and receivers name using our (DeFyn) DeFi portfolio manager which is easy to
understand for the new users. So that the user can easily access our DeFi portfolio manager
(DeFyn). The transaction details can be diagrammatically represented in a dashboard for
understanding easily.

19
 CHAPTER 4

SYSTEM SPECIFICATION

SYSTEM REQUIREMENTS:

The hardware and software requirements for the proposed system are presented as
follow

4.1 Hardware Requirements (Minimum)

• Processor : i3 processor and above.

• RAM : 4 GB and above
• Storage : 3 GB or more (Browser and misc.)
• Internet Bandwidth : At least 5 Mbps

4.2 Software Requirements

• Front End : Angular TS

• Database : MongoDB
• Platform : Windows, MacOS and Linux
• Back End : Moralis
• Operating System : Any OS with latest browser
• Extensions : Meta Mask web extension. (Software Private Wallet).
• Mobile app : Meta Mask for Android / iOS (Latest version)
• Authentication service : SendGrid (verification and password reset link)

20
 CHAPTER 5

SYSTEM DESIGN

5.1 UML DIAGRAMS:

A UML diagram is a diagram based on the UML (Unified Modeling Language) with
the purpose of visually representing a system along with its main actors, roles, actions, artifacts
or classes, in order to better understand, alter, maintain, or document information about the
system.

5.1.1 USECASE DIAGRAM:

Use-case diagrams describe the high-level functions and scope of a system. These
diagrams also identify the interactions between the system and its actors fig 5.1.

Figure 5.1 Use Case Diagram

The use cases and actors in use-case diagrams describe what the system does and how the
actors use it, but not how the system operates internally.

21
5.1.2 Activity Diagram
An activity diagram is a behavioral diagram i.e., it depicts the behavior of a system.
An activity diagram portrays the control flow from a start point to a finish point showing the
various decision paths that exist while the activity is being executed fig 5.2.

Figure 5.2 Activity Diagram

22
5.1.3 Sequence Diagram

A sequence diagram is a type of interaction diagram because it describes how—and in

what order—a group of objects works together fig 5.3.

Figure 5.3 Sequence Diagram

These diagrams are used by software developers and business professionals to understand
requirements for a new system or to document an existing process.

23
5.1.4 Low Level Diagram

Low-level design (LLD) is a component-level design process that follows a step-by-

step refinement process fig5.4

Figure 5.4 Low Level Diagram

This process can be used for designing data structures, required software architecture, source
code and ultimately, performance algorithms. Overall, the data organization may be defined
during requirement analysis and then refined during data design work. Post-build, each
component is specified in detail.

24
5.1.5 High Level Diagram

High-level design (HLD) explains the architecture that would be used to develop a
system. The architecture diagram provides an overview of an entire system, identifying the main
components that would be developed for the product and their interfaces fig 5.5.

Figure 5.5 High Level Diagram

25
5.1.6 DATABASE DESIGN:

Database design is the organization of data according to a database model. The

designer determines what data must be stored and how the data elements interrelate. With this
information, they can begin to fit the data to the database model. Database management system
manages the data accordingly fig 5.6.

Figure 5.6 Database Design

26
 CHAPTER 6
SYSTEM IMPLEMENTATION AND TESTING
Systems implementation is the process of: defining how the information system
should be built (i.e., physical system design), ensuring that the information system is
operational and used, ensuring that the information system meets quality standard (i.e.,
quality assurance).

The following are the modules identified for our system.

6.1 MODULE DESCRIPTION:

● Designing UI (User Interface)

● Authentication
● Friends - contacts creation, edit, block, delete
● Dashboard
● Transfer
● History of transactions

6.1.1 DESIGNING USER INTERFACE:

This is to design low, mid and high-fidelity wireframes i.e., conceptualizing the final
output by using Figma. Various app screens are designed. We need to create a user interface
which is very easy to understand our DeFi portfolio manager for new users.

6.1.2 AUTHENTICATION:
In this module the user can sign in or sign up to the application by use of registered
email and password. Each user has to sign in to their wallet to perform operations such as
(transaction, history, status) etc. The wallet set up needs the password and private address only
for the first time or when the wallet is set up in the new device.

6.1.3 CONTACT CREATION:

This module the user can send requests to other users which is similar to Instagram,
Facebook friend requests and in return they receive a public address and thus contact gets
created. Here if one user requests address and the other user accepts the request, then both the
parties get their public addresses exchanged.

27
6.1.4 DASHBOARD:

This module shows the analytics section of the app, such as representing data in a graph,
pie charts etc. Data such as number of transactions, expenditure category, most used tokens
and much more.

6.1.5 TRANSFER:

In this module the user can perform operation like transfer (credit or debit) the coins
from one person (sender) to another (receiver) by using their public address, which is already
in the contact/friend list. After the transaction we can able to see status of the transaction i.e.,
whether the transaction is completed or pending. The user needs to select the network before
the transaction.

6.1.6 HISTORY OF TRANSACTION:

This module allows the user to view their past transactions and can also download them
at the same time. Details such as Sender name, receiver name, amount, network, gas fees,
purpose, description etc. are shown here. It is used for the future reference for the user in order
to check for what they spend the coins on.

6.2 OVERALL FUNCTIONING OF WEB APPLICATION:

6.2.1 ANGULAR
Angular is common and popular name of the Angular's version beyond 2+. Angular
is a typescript -based- open-source full-stack web application framework. Instead of scope
and controller, Angular uses hierarchy of components as its primary architectural
characteristic. Angular uses the different expression syntax. It uses “[]” for property binding,
and “()” for event binding. Angular uses of Microsoft's TypeScript language, which provides
Class-based Object-Oriented Programming, Static Typing, Generics etc. which are the
features of a server-side programming language. Angular supports dynamic loading of the
page. With Angular, you're taking advantage of a platform that can scale from single-
developer projects to enterprise-level applications. Angular is designed to make updating as
straightforward as possible, so take advantage of the latest developments with a minimum of
effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million
developers, library authors, and content creators.

28
Angular Features

A list of most important features and benefits of Angular:

Angular supports multiple platforms

Angular is a cross platform language. It supports multiple platforms. You can build
different types of apps by using Angular.

1. Desktop applications: Angular facilitates you to create desktop installed apps on

different types of operating systems i.e., Windows, Mac or Linux by using the same
Angular methods which we use for creating web and native apps.
2. Native applications: You can built native apps by using Angular with strategies from
Cordova, Ionic, or Native Script.
3. Progressive web applications: Progressive web applications are the most common
apps which are built with Angular. Angular provides modern web platform capabilities
to deliver high performance, offline, and zero-step installation apps.

High Speed, Ultimate Performance

Angular is amazingly fast and provides a great performance due to the following reasons:

1. Universal support: Angular can be used as a front-end web development tool for the
programming languages like Node.js, .Net, PHP, Java Struts and Spring and other
servers for near-instant rendering in just HTML and CSS. It also optimizes the website
for better SEO.
2. Code splitting: Angular apps are fast and loads quickly with the new Component
Router, which delivers automatic code-splitting so users only load code required to
render the view they request.
3. Code generation: Angular makes your templates in highly optimized code for today
JavaScript virtual machines which gives the benefits of hand-written code.

6.2.2 PRODUCTIVITY

Angular provides a better productivity due to its simple and powerful template syntax,
command line tools and popular editors and IDEs.

29
 1. Powerful templates: Angular provides simple and powerful template syntax to create
UI view quickly.
2. IDEs: Angular provides intelligent code completion, instant errors, and other feedback
in popular editors and IDEs.
3. Angular CLI: Angular CLI provides command line tools start building fast, add
components and tests, and then instantly deploy.

6.2.3 FULL STACK DEVELOPMENT

Angular is a complete framework of JavaScript. It provides Testing, animation and

Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB
(MEAN).

1. Testing: Angular provides Karma and Jasmine for unit testing. By using it, you can
check your broken things every time you save. Karma is a JavaScript test runner tool
created by Angular team. Jasmine is the testing framework form unit testing in Angular
apps, and Karma provides helpful tools that make it easier to us to call our Jasmine tests
whilst we are writing code.
2. Animation Support: Angular facilitates you to create high-performance, complex
choreographies and animation timelines with very little code through Angular's
intuitive API.
3. Accessibility: In Angular, you can create accessible applications with ARIA-enabled
components, developer guides, and built-in ally test infrastructure.

6.2.4 ANGULAR APPLICATION:

This section explains the core ideas behind Angular. Understanding these ideas can help
you design and build your applications more effectively.

History and different versions of Angular

The first version of Angular was Angular1.0 (also known as AngularJS) which was
released in 2010. But here, we are talking about Angular so; let's see history and different
versions of Angular.

30
Angular2

Angular 2.0 was first introduced in October 2014. It was a complete rewrite of Angular
so, the drastic changes in the 2.0 version created controversy among developers. On April 30,
2015, the Angular developers announced that Angular 2 moved from Alpha to Developer
Preview and then Beta version was released in December 2015. Its first version was published
in May 2016 and the final version was released on September 14, 2016.

Angular4

Angular 4 version was announced on 13 December 2016. The developers skipped the
version 3 due to some confusion. Its final version was released on 23 March 2017.

This version has some additional features:

o This version introduced Http Client, a smaller, easier to use, and more powerful library
for making HTTP Requests.
o It provides new router life cycle events for Guards and Resolvers. Four new events:
Guards Check Start, Guards Check End, Resolve Start, Resolve End join the existing
set of life cycle event such as Navigation Start.
o It provides the support of conditionally disable animations.

Angular5

This version was released on 1 Nov, 2017. It provided some improvements to support
for progressive web apps, also provides improvements related to Material Design.

Angular6

This version was released on 4 may, 2018. It was a major release which provides some
features like: ng update, ng adds, Angular Elements, Angular Material + CDK Components,
Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable
Providers, Animations Performance Improvements, and RxJS v6.

31
Angular 7

The latest version of Angular is Angular 7. It was released on October 18, 2018. It consists
of many extensive features:

o Updates regarding Application Performance

o Angular Material & CDK
o Virtual Scrolling
o Improved Accessibility of Selects
o Supports Content Projection using web standard for custom elements
o Dependency updates regarding TypeScript 3.1, RxJS 6.3, Node 10.

Version 8

Angular 8 was released on May 28, 2019. Featuring Differential loading for all application
code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy
as an opt-in preview. Angular Ivy opt-in preview includes:

• Generated code that is easier to read and debug at runtime

• Faster re-build time
• Improved payload size
• Improved template type checking
• Backwards compatibility

Version 9

Angular 9 was released on February 6, 2020. Version 9 moves all applications to use the Ivy
compiler and runtime by default. Angular has been updated to work with TypeScript 3.6 and
3.7. In addition to hundreds of bug fixes, the Ivy compiler and runtime offers numerous
advantages:

• Smaller bundle sizes

• Faster testing
• Better debugging
• Improved CSS class and style binding
• Improved type checking

32
 • Improved build errors
• Improved build times, enabling AOT on by default
• Improved Internationalization

Version 10

Angular 10 was released on June 24, 2020.

• New Date Range Picker (Material UI library)

• Warnings about CommonJS imports
• Optional Stricter Settings
• Keeping Up to Date with the Ecosystem
• New Default Browser Configuration
• Deprecations and Removals

Version 11

Angular 11 was released on November 11, 2020

Version 12

Angular 12 was released on May 12, 2021

Deprecated support for IE11

Version 13

Angular 13 was released on November 04, 2021

Version 14

Angular 14 was released on June 02, 2022

Future releases

Since v9, the Angular team has moved all new applications to use the Ivy compiler and runtime.
They will be working on Ivy to improve output bundle sizes and development speeds.

Each version is expected to be backward-compatible with the prior release. The Angular
development team has pledged to do twice-a-year upgrades.

Angular CLI makes a number of tasks trouble-free.

33
Angular Libraries

Angular libraries are built as a solution of general problems such as presenting a unified user
interface, presenting data, and allowing data entry. Developers can create general solutions for
particular domains that can be adapted for re-use in different apps. These solutions can be built
as Angular libraries and these libraries can be published and shared as npm packages.

An Angular library is an angular project but it is different from the Angular app in the terms
that it cannot run on its own. It is imported and used in the app.

Usage of Angular libraries

o Angular libraries extend Angular's base functionalities. For example, if you want to add
reactive forms to an app, add the library package using ng add @angular/forms, then
import the Reactive Forms Module from the @angular/forms library in your application
code.
o Angular Material is an example of a large, general-purpose library that provides
sophisticated, reusable, and adaptable UI components.

Angular 7 Architecture

• Angular 7 is a platform and framework which is used to create client applications in

HTML and TypeScript. Angular 7 is written in TypeScript.
• Angular 7 implements core and optional functionality as a set of TypeScript libraries
which you import in your app.
• Ng Modules are the basic building blocks of an Angular 7 application. They provide a
compilation context for components. An Angular 7 app is defined by a set of Ng
Modules and Ng Modules collect related code into functional sets.

An Angular 7 app always has at least a root module which enables bootstrapping, and typically
has many other feature modules.

o Components define views, which are the sets of screen elements that are chosen and
modified according to your program logic and data by Angular 7.

34
 o Components use services, which provide specific functionality not directly related to
views. Service providers can be injected into components as dependencies, making your
code modular, reusable, and efficient.

6.2.5 COMPONENTS:

Components and services both are simply classes with decorators that mark their types
and provide metadata which guide Angular to do things.

Every Angular application always has at least one component known as root component that
connects a page hierarchy with page DOM. Each component defines a class that contains
application data and logic, and is associated with an HTML template that defines a view to be
displayed in a target environment.

Metadata of Component class:

o The metadata for a component class associates it with a template that defines a view. A
template combines ordinary HTML with Angular directives and binding markup that
allow Angular to modify the HTML before rendering it for display.
o The metadata for a service class provides the information Angular needs to make it
available to components through dependency injection (DI).

6.2.6 MODULES:

Angular 7 Ng Modules are different from other JavaScript modules. Every Angular 7
app has a root module known as App Module. It provides the bootstrap mechanism that
launches the application.

Generally, every Angular 7 app contains many functional modules.

Some important features of Angular 7 Modules:

o Angular 7 Ng Modules import the functionalities form other Ng Modules just like other
JavaScript modules.
o Ng Modules allow their own functionality to be exported and used by other Ng
Modules. For example, if you want to use the router service in your app, you can import
the Router Ng Module.

35
Template, Directives and Data Binding:

In Angular 7, a template is used to combine HTML with Angular Markup and modify
HTML elements before displaying them. Template directives provide program logic, and
binding markup connects your application data and the DOM.

There are two types of data binding:

o Event Binding: Event binding is used to bind events to your app and respond to user
input in the target environment by updating your application data. Read more about
event binding
o Property Binding: Property binding is used to pass data from component class and
facilitates you to interpolate values that are computed from your application data into
the HTML. Read more about property binding

Services and Dependency Injection:

In Angular 7, developers create a service class for data or logic that isn't associated with
a specific view, and they want to share across components.

Dependency Injection (DI) is used to make your component classes lean and efficient.
DI doesn't fetch data from the server, validate user input, or log directly to the console; it simply
renders such tasks to services.

6.2.7 ROUTING:

In Angular 7, Router is an Ng Module which provides a service that facilitates

developers to define a navigation path among the different application states and view
hierarchies in their app.

It works in the same way as a browser's navigation works. i.e.:

o Enter a URL in the address bar and the browser will navigate to that corresponding
page.
o Click the link on a page and the browser will navigate to a new page.

36
 o Click the browser's back or forward buttons and the browser will navigate backward or
forward according to your seen history pages.

WORKING OF ROUTER:

The router maps URL-like paths to views instead of pages. Whenever a user performs an
action, such as clicking a link that would load a new page in the browser, the router intercepts
the browser's behavior, and shows or hides view hierarchies.

• If the router finds that the current application state requires particular functionality, and
the module that defines it hasn't been loaded, the router can lazy-load the module on
demand.
• The router interprets a link URL according to your app's view navigation rules and data
state. You can navigate to new views when the user clicks a button or selects from a
drop box, or in response to some other stimulus from any source. The router logs
activity in the browser's history, so the back and forward buttons work as well.
• To define navigation rules, you associate navigation paths with your components. A
path uses a URL-like syntax that integrates your program data, in much the same way
that template syntax integrates your views with your program data. You can then apply
program logic to choose which views to show or to hide, in response to user input and
your own access rules.

6.2.8 DEPENDENCY INJECTION:

Dependency injection lets you declare the dependencies of your TypeScript classes
without taking care of their instantiation. Instead, Angular handles the instantiation for you.
This design pattern lets you write more testable and flexible code. Even though understanding
dependency injection is not critical to start using Angular, we strongly recommend it as a best
practice and many aspects of Angular take advantage of it to some degree. To illustrate how
dependency injection works, consider the following example. The first file, defines a Logger
class. This class contains a write count function that logs a number to the console.

37
6.2.9 THE THREE PILLARS OF ANGULAR:

Before jumping into Angular, let’s familiarize ourselves with the libraries that are
used by the framework. In order to do that, take a look at the dependencies in
the package.json file in their GitHub repository.

• TypeScript is a superset of JavaScript providing type safety for your application.

It is also really helpful for someone who has an object -oriented programming
background – like me – because it extends JavaScript’s functional approach with
abstraction, encapsulation and inheritance. Angular itself is written using
TypeScript.
• RxJS is a library for reactive programming using Observables, which represent
an asynchronous stream of data which we can subscribe to. The library offers
built-in operators to observe, transform and filter streams or even combines
multiple together to create more powerful dataflows at once. Angular handles all
pieces of information as an observable stream from routing parameters to HTTP
responses.
• Observable has its formal specification by TC39 which is currently in Stage 1
proposal for Ecma Script, meaning that it might even land in the JavaScript
language itself.
• Zone.js is an execution context for asynchronous operations. It monkeys patches
the standard APIs such as DOM event listeners and XML Http Request to run
them in a “zone”. Zone is a construct that provides hooks on the asynchronous
operations so we are able to get notification of their states, cancel tasks, handle
errors or extend execution with additional operations.

• TypeScript is a primary language for Angular application development. It is a superset

of JavaScript with design-time support for type safety and tooling.

• Browsers can't execute TypeScript directly. Typescript must be "transpiled" into

JavaScript using the tsc compiler, which requires some configuration.

6.3 MORALIS:

Moralis provides the full-stack workflow for building high performance dapps. Fully
compatible with your favorite web3 tools and services. Automatically syncing the balances of
38
your users into the database, allowing you to set up on-chain alerts, watch smart contract events,
build indexes, and so much more. All features are accessed through an easy-to-use SDK. All
features Moralis provides are cross-chain by default. Moralis is the fastest way to build and
deploy dApps on Ethereum, BSC, Polygon, Solana, and Elrond (more coming). All Moralis
dApps are cross-chain by default. Building on Moralis ensures that your dApp is future-proof.
Even if new blockchains are invented, your dApp will instantly work on any chain.

6.3.1 DATABASE:

Here is where all of your data will be stored. For example, when a user signs in to your
dApp using crypto wallet authentication, that wallet address will automatically be saved to your
database together with any data you have configured, such as token balances, historical
transactions, or events. You can then use this data instantaneously in your dApp frontend. You
can read more under the sections: Moralis Server Database and User Authentication.

6.3.2 MORALIS SDK:

Moralis' SDK is how we tie all of this together. Our JavaScript SDK is how your dApp
interacts with your Moralis Server. Using the SDK, you can authenticate users, either through
username and password or through a crypto wallet like Meta Mask You can also use the SDK
to get and set user data to fetch balances, NFTs, events, or transactions.

6.4 METAMASK WALLET:

Meta Mask is a browser plugin that serves as an Ethereum wallet, and is installed like
any other browser plugin. Once it's installed, it allows users to store Ether and other ERC-20
tokens, enabling them to transact with any Ethereum address. By connecting Meta Mask to
Ethereum-based dapps, users can spend their coins in games, stake tokens in gambling
applications, and trade them on decentralized exchanges (DEXs). It also provides users with
an entry point into the emerging world of decentralized finance, or DeFi, providing a way to
access DeFi apps such as Compound and Pool Together (fig 6.1).

39
 Figure 6.1 Meta Mask

6.4.1 HISTORY:
Meta Mask was created by ConsenSys in 2016. Prior to 2019, Meta Mask had only been
available as a desktop browser extension for Google Chrome and Firefox browsers. Given the
popularity of Meta Mask among cryptocurrency users, and its lack of an official mobile app
for several years, instances of malicious software posing as Meta Mask became problematic
for Google in regulating its Chrome Web Store and Google Play platforms. In one instance,
Google Play unintentionally removed Meta Mask’s official beta app before reverting the
decision a week later on January 1, 2020. Starting in 2019, Meta Mask began releasing mobile
app versions for closed beta testing, followed by their official public release for iOS and
Android in September 2020. In October 2020, Meta Mask Swaps, a built-in DEX aggregation
service was added to the desktop extension. The product became available on mobile devices
in March 2021.

6.4.2 HOW TO CREATE A WALLET:

To use Meta Mask, you will need either Chrome, a Chromium-based browser such as
Brave, or Firefox.

40
• Pick a password on the next step. This needs to be at least 8 characters long. We
recommend using a completely unique password that hasn’t been used anywhere
else, and one that contains a mixture of upper- and lower-case letters, symbols, and
numbers (fig 6.2)

Figure 6.2 Password creation

• Meta Mask will then present you with your 12-word backup phrase. You’ll need to
write this phrase down carefully, with the words recorded in the same order displayed
on your screen. This phrase will be needed to recover your wallet should you ever
lose access to your computer, and should be kept stored somewhere safe. Anybody
who has access to your 12-word backup phrase will have access to the funds in your
Meta Mask wallet, so keep it private (fig 6.3)

Figure 6.3 Recovery Phase

41
 • Confirm your backup phrase on the next screen by entering the words in the same
order saved previously. Click ‘Confirm’ once done.
• You have now almost completed the Meta Mask setup process. Just click ‘All Done’
on the final page, and you will be automatically logged in to Meta Mask.

6.5 SENDGRID:
SendGrid (also known as Twilio SendGrid) is a Denver, Colorado-based customer
communication platform for transactional and marketing email. The company was founded by
Isaac Saldana, Jose Lopez, and Tim Jenkins in 2009, and incubated through the Techstars
accelerator program. As of 2017, SendGrid has raised over $81 million and has offices in
Denver, Colorado; Boulder, Colorado; Irvine, California; Redwood City, California; and
London. The company went public with a debut in the New York Stock Exchange on
November 16, 2017. Twilio acquired SendGrid in February 2019. SendGrid provides a cloud-
based service that assists businesses with email delivery. The service manages various types of
email including shipping notifications, friend requests, sign-up confirmations, and email
newsletters. It also handles Internet service provider (ISP) monitoring, domain keys, sender
policy framework (SPF), and feedback loops. Additionally, the company provides link
tracking, open rate reporting. It also allows companies to track email opens, unsubscribes,
bounces, and spam reports. Beginning in 2012, the company integrated SMS, voice, and push
notification abilities to its service through a partnership with Twilio. SendGrid offers a
freemium version and a Lite Plan (pay-as-you-go), as well as three expanded levels of service:
Essentials, Pro, and Premier. SendGrid’s clients include Uber, Twilio, Foursquare, Pandora,
and Airbnb.
6.6 MONGODB:
It is an open source-available cross-platform document-oriented database program.
Classified as a NoSQL database program, MongoDB uses JSON-like documents with
optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server
Side Public License (SSPL) which is deemed non-free by several distributions.

6.6.1 HISTORY:

10gen software company began developing MongoDB in 2007 as a component of a

planned platform as a service product. In 2009, the company shifted to an open-source

42
development model, with the company offering commercial support and other services. In
2013, 10gen changed its name to MongoDB Inc. On October 20, 2017, MongoDB became a
publicly traded company, listed on NASDAQ as MDB with an IPO price of $24 per share.
MongoDB is a global company with US headquarters in New York City and International
headquarters in Dublin. On October 30, 2019, MongoDB teamed up with Alibaba Cloud, who
will offer its customers a MongoDB-as-a-service solution. Customers can use the managed
offering from BABA's global data centers.

6.6.2 AD-HOC QUERIES:

MongoDB supports field, range query, and regular-expression searches. Queries can
return specific fields of documents and also include user-defined JavaScript functions. Queries
can also be configured to return a random sample of results of a given size.

6.6.3 INDEXING:

Fields in a MongoDB document can be indexed with primary and secondary indices or
index.

6.6.4 REPLICATION:

MongoDB provides high availability with replica sets. A replica set consists of two or
more copies of the data. Each replica-set member may act in the role of primary or secondary
replica at any time. All writes and reads are done on the primary replica by default. Secondary
replicas maintain a copy of the data of the primary using built-in replication. When a primary
replica fails, the replica set automatically conducts an election process to determine which
secondary should become the primary. Secondaries can optionally serve read operations, but
that data is only eventually consistent by default.

If the replicated MongoDB deployment only has a single secondary member, a

separate daemon called an arbiter must be added to the set. It has a single responsibility, which
is to resolve the election of the new primary. As a consequence, an idealized distributed
MongoDB deployment requires at least three separate servers, even in the case of just one
primary and one secondary.

6.6.5 LOAD BALANCING:

MongoDB scales horizontally using sharding. The user chooses a shard key, which
determines how the data in a collection will be distributed. The data is split into ranges (based

43
on the shard key) and distributed across multiple shards. (A shard is a master with one or more
replicas.) Alternatively, the shard key can be hashed to map to a shard – enabling an even data
distribution.

MongoDB can run over multiple servers, balancing the load or duplicating data to keep the
system up and running in case of hardware failure.

6.6.6 FILE STORAGE:

MongoDB can be used as a file system, called GridFS, with load balancing and data
replication features over multiple machines for storing files. This function, called grid file
system, is included with MongoDB drivers. MongoDB exposes functions for file manipulation
and content to developers. GridFS can be accessed using mongo files utility or plugins
for Nginx and lighttpd. GridFS divides a file into parts, or chunks, and stores each of those
chunks as a separate document. MongoDB provides three ways to perform aggregation: the
aggregation pipeline, the map-reduce function, and single-purpose aggregation methods. Map-
reduce can be used for batch processing of data and aggregation operations. But according to
MongoDB's documentation, the Aggregation Pipeline provides better performance for most
aggregation operations. The aggregation framework enables users to obtain the kind of results
for which the SQL GROUP BY clause is used. Aggregation operators can be strung together
to form a pipeline – analogous to Unix pipes. The aggregation framework includes the $lookup
operator which can join documents from multiple collections, as well as statistical operators
such as standard deviation.Server-side JavaScript execution JavaScript can be used in queries,
aggregation functions (such as MapReduce), and sent directly to the database to be executed.

6.6.7 CAPPED COLLECTIONS:

MongoDB supports fixed-size collections called capped collections. This type of

collection maintains insertion order and, once the specified size has been reached, behaves
like a circular queue.

6.6.8 TRANSACTIONS:

MongoDB claims to support multi-document ACID transactions since the 4.0 release
in June 2018. This claim was found to not be true as MongoDB violates snapshot isolation.

44
6.7 SYSTEM TESTING:

System Testing is an important stage in any system development life cycle. Testing is
a process of executing a program with the intention of finding errors. The importance of
software testing and its implications with respect to software quality cannot be
overemphasized. Software testing is a critical element of software quality assurance and
represents the ultimate review of specification, design and coding. A good test case is one that
has a high probability of finding a yet undiscovered error. The purpose of testing is to discover
errors. Testing is the process of trying to discover every conceivable fault or weakness in a
work product. It provides a way to check the functionality of components, sub-assemblies,
assemblies and/or a finished product It is the process of exercising software with the intent of
ensuring that the Software system meets its requirements and user expectations and does not
fail in an unacceptable manner. There are various types of tests. Each test type addresses a
specific testing requirement. Testing is the set of activities that can be planned in advance and
conducted systematically. Different test conditions should be thoroughly checked and the bugs
detected should be fixed. The testing strategies formed by the user are performed to prove that
the software is free and clear from errors. To do this, there are many ways of testing the
system’s reliability, completeness and maintainability. The important phase of software
development is concerned with translating the design specification into the error-free source
code. Testing is carried out to ensure that the system does not fail, that it meets the specification
and it satisfies the user. The system testing was carried out in System Testing is an important
stage where the system developed is tested with duplicate or original data. It is a process of
executing a program with the intent of finding an error. It is a critical process that can consume
fifty percent of the development time.

The following are the attributes of good test:

• A good test is not redundant.

• A good test should be "best of breed".

• A good test should be neither simple nor too complex.

45
6.8 UNIT TESTING:

In the unit testing the analyst tests the program making up a system. The software units
in a system are the modules and routines that are assembled and integrated to perform a specific
function. In a large system, many modules on different levels are needed (fig 6.4)

Figure 6.4 Unit Testing

Unit testing can be performed from the bottom up starting with the smallest and lowest
level modules and proceeding one at a time. For each module in a bottom-up testing, a short
program executes the module and provides the needed data.

6.9 VALIDATION TESTING:

Validation testing can be defined in many ways, but a simple definition is that can be
reasonably expected by the customer. After validation test has been conducted, one of two
possible conditions exists.

• The functions or performance characteristics confirm to specification and are accepted.

• A deviation from specification is uncovered and a deficiency list is created.

Proposed system under consideration has been tested by using

validation testing and found to be working satisfactorily. For example, in this project validation
testing is performed against module. This module is tested with the following valid and invalid
inputs for the field id (fig 6.5)

46
 Figure 6.5 Validation Testing

Figure 6.5.1 Validation Testing

47
 CHAPTER 7

CONCLUSION AND FUTURE ENHANCEMENTS

7.1 CONCLUSION

DeFyn is a portfolio tracker in which users can track their DeFi assets, invest in smart
vaults with compounding yields, and use the decentralized exchange aggregator to trade tokens.
It is a powerful portfolio manager, convenient to all DeFi users, and free to use; users can see
DeFi investments from multiple chains on a single page. The platform aims to mend the gap
between the variety of services offered by DeFi platforms and their unavailability in one place,
by being a one-stop DeFi hub that is a multichain portfolio manager, an automated yield
farming, and a DEX token. It aims to provide a broad and consolidated view of the assets
invested in different DeFi projects in EVM-based blockchains like BNB Chain, Fantom,
Polygon, and/or Ethereum in order to improve the experience of DeFi users. The platform
emphasizes simplicity and is ideal for individuals seeking a simple but powerful DeFi hub with
a real-time portfolio tracker across multiple chains.

7.2 FUTURE ENHANCEMENTS:

In the near future, algorithms and decentralized computer programs will determine
how value is created, exchanged, transferred, and turned into financial instruments and
derivatives. The financial industry, which has traditionally taken this role, will transform as
this technology—dubbed DeFi—replaces legacy financial infrastructure and leads to an age of
‘integrated value exchange.’

“All sources of value will be tokenized so that value can flow freely across
geographies and industries,” explains Tarsi. “People from traditional finance are often skeptical
about DeFi because it's just about tokens. But this misses the point. Tokens can be used to
represent anything—real estate, social clout, employment, community membership.”

48
REFERENCES:

1. Lewis Gudgeon, Daniel Perez, Dominik Harz, Benjamin Livshits, Arthur

Gervais The Decentralized Financial Crisis 28 July 2020
https://ieeexplore.ieee.org/document/9150192
2. Chaminade Busayatananphon, Ekkarat BoonChieng Financial Technology DeFi
Protocol: A Review 2022 Joint International Conference on Digital Arts, Media and
Technology with ECTI Northern Section Conference on Electrical, Electronics,
Computer and Telecommunications Engineering (ECTI DAMT &
NCON) https://ieeexplore.ieee.org/document/9720373
3. B. Sriman, S. Ganesh Kumar Decentralized finance (DeFi): The Future of Finance and
Defi Application for Ethereum blockchain based Finance Market 15 April
2022 https://ieeexplore.ieee.org/document/9752657

4. A.V. Bogucharskov, I.E. Pokamestov, Karine Adamova and Zh.N. Tropina,

"Adoption of Blockchain Technology in Trade Finance Process", Journal of
Reviews on Global Economics, vol. 7, pp. 510-515, Nov 2018.

49
Appendix A: SAMPLE CODE

<!--navigation-->

<section class="smart-scroll">

<div class="container-fluid">

<div class="row">

<div class="w-100">

<nav class="navbar navbar-expand-md navbar-dark">

<a class="navbar-brand heading-black" href="#">

DeFyn

</a>

<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-

toggle="collapse"

data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-

expanded="false"

aria-label="Toggle navigation">

<span data-feather="grid"></span>

</button>

<div class="collapse navbar-collapse" id="navbarCollapse">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link page-scroll" href="#features">Features</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#faq">FAQ</a>

</li>

<li class="nav-item">

50
 <a class="nav-link page-scroll" href="#blog">Contact</a>

</li>

</ul>

</div>

<a class="btn btn-primary d-inline-flex flex-row align-items-center"

target="_blank" style="font-weight: 600;" routerLink="/signin">

<em data-feather="layout" width="18" height="18" class="mr-2"></em>

Launch App

</a>

<!-- <button class="btn btn-primary d-inline-flex flex-row align-items-center"

formtarget="_blank" routerLink="/signin">

Launch app

<em class="ml-2" data-feather="arrow-right"></em>

"nav-link page-scroll d-flex flex-row align-items-center text-primary"

</button> -->

</nav>

</div>

</div>

</div>

</section>

<!--hero header-->

<section class="py-7 py-md-0 bg-hero" id="home">

<div class="container">

<div class="row vh-md-100">

<div class="col-md-8 col-sm-10 col-12 mx-auto my-auto text-center">

<h1 class="heading-black text-capitalize">Wanna manage your DeFi Portfolio

?</h1>

51
 <p class="lead py-3"> DeFyn is a platform that helps people to manage DeFi
portfolio in minutes. Sign up for free.</p>

<button class="btn btn-primary d-inline-flex flex-row align-items-center"

routerLink="/signup/connect">

Get started now

<em class="ml-2" data-feather="arrow-right"></em>

</button>

</div>

</div>

</div>

</section>

<!-- features section -->

<section class="pt-6 pb-7" id="features">

<div class="container">

<div class="row">

<div class="col-md-6 mx-auto text-center">

<h2 class="heading-black">DeFyn offers everything you need.</h2>

</div>

</div>

<div class="row mt-5">

<div class="col-md-10 mx-auto">

<div class="row feature-boxes">

<div class="col-md-6 box">

<div class="icon-box box-primary">

<div class="icon-box-inner">

<img src="assets/img/shield.png" class="img-fluid"/>

</div>

52
 </div>

<h5> Wallet spoof proof</h5>

<p class="text-muted">One cannot use the wallet of other exisitng users or

wallets that aren't approved by themself.</p>

</div>

<div class="col-md-6 box">

<div class="icon-box box-success">

<div class="icon-box-inner">

<img src="assets/img/easy.png" class="img-fluid"/>

</div>

</div>

<h5>Get your data with ease </h5>

<p class="text-muted">Every data is available to download which is fetched

straight from the mainnet.</p>

</div>

<div class="col-md-6 box">

<div class="icon-box box-danger">

<div class="icon-box-inner">

<img src="assets/img/analytics.png" class="img-fluid"/>

</div>

</div>

<h5> Analytics dashboard </h5>

<p class="text-muted">Dashboard gives insights on your various expenses

based on category.</p>

</div>

<div class="col-md-6 box">

<div class="icon-box box-info">

<div class="icon-box-inner">

53
 <img src="assets/img/globe.png" class="img-fluid"/>

</div>

</div>

<h5>Available globally</h5>

<p class="text-muted">As DeFy is a dApp built using Moralis there's no

downtime.</p>

</div>

</div>

</div>

</div>

<div class="row mt-6">

<div class="col-md-12 mr-auto text-center">

<h2>DeFy is more than just a portfolio manager.</h2>

<p class="mb-5">DeFy can also be used to transfer crypto currencies to other

addresses from your wallet, manage list of beneficiaries and much more.</p>

</div>

</div>

<div class="row mt-2">

<div class="col-md-4">

<div class="slick-about">

<!-- <img src="img/blog-1.jpg" class="img-fluid rounded d-block mx-auto"

alt="Work 1"/> -->

</div>

</div>

<div class="col-md-4">

<div class="slick-about">

<!-- <img src="img/blog-2.jpg" class="img-fluid rounded d-block mx-auto"

alt="Work 2"/> -->
54
 </div>

</div>

<div class="col-md-4">

<div class="slick-about">

<!-- <img src="img/blog-3.jpg" class="img-fluid rounded d-block mx-auto"

alt="Work 3"/> -->

</div>

</div>

</div>

</div>

</section>

<!--faq section-->

<section class="py-7" id="faq">

<div class="container">

<div class="row">

<div class="col-md-6 mx-auto text-center">

<h2>Frequently asked questions</h2>

<p class="text-muted lead">Answers to most common questions.</p>

</div>

</div>

<div class="row mt-5">

<div class="col-md-10 mx-auto">

<div class="row">

<div class="col-md-6 mb-5">

55
 <h6>Can I try it for free?</h6>

<p class="text-muted"> Yes. The app is absolutely free of cost <b>:)</b></p>

</div>

<div class="col-md-6 mb-5">

<h6>Do you have hidden fees?</h6>

<p class="text-muted"> No. We don't charge any hidden fees but you have to
pay the gas fee just as a reward to the network.</p>

</div>

<div class="col-md-6 mb-5">

<h6>What are the payment methods you support?</h6>

<p class="text-muted">We currently support ETH, MATIC, AVAX</p>

</div>

<div class="col-md-6 mb-5">

<h6>How often do you release updates?</h6>

<p class="text-muted">We work forward to keep the app to the latest version
with features.</p>

</div>

<div class="col-md-6 mb-5">

<h6>What is your refund policy?</h6>

<p class="text-muted">We don't have such option. The transaction made in the
blockchain network is irreversible so do it with caution.</p>

</div>

<div class="col-md-6 mb-5">

<h6>How can I contact you?</h6>

<p class="text-muted">To reach out us please see the contact section.</p>

</div>

</div>

</div>

56
 </div>

<div class="row mt-4">

<div class="col-md-6 mx-auto text-center">

<h5 class="mb-4">Have questions?</h5>

<a href="#" class="btn btn-primary">Contact us</a>

</div>

</div>

</div>

</section>

<!--news section-->

<section class="py-7 bg-dark section-angle top-left bottom-left" id="blog">

<div class="container">

<div class="row">

<div class="col-md-6 mx-auto text-center">

<h2 class="heading-black">About us</h2>

<p class="text-muted lead">{{""}}</p>

</div>

</div>

<div class="row mt-5">

<div class="col-md-4">

<div class="card">

<a href="#">

<!-- <img class="card-img-top img-raised" src="img/blog-1.jpg" alt="Blog 1">

-->

</a>

<div class="card-body">

<a href="#" class="card-title mb-2"><h5>Akash Perumal</h5></a>

57
 <p class="text-muted small-xl mb-2">22|Crypto</p>

<p class="card-text">{{"about us"}}</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<a href="#">

<!-- <img class="card-img-top img-raised" src="img/blog-2.jpg" alt="Blog 2">

-->

</a>

<div class="card-body">

<a href="#" class="card-title mb-2"><h5>Ganesh KP</h5></a>

<p class="text-muted small-xl mb-2">Code</p>

<p class="card-text">{{"about us"}}</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<a href="#">

<!-- <img class="card-img-top img-raised" src="img/blog-2.jpg" alt="Blog 2">

-->

</a>

<div class="card-body">

<a href="#" class="card-title mb-2"><h5>Aathi Abhishek</h5></a>

<p class="text-muted small-xl mb-2">21</p>

<p class="card-text">{{"about us"}}</p>

58
 </div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<a href="#">

<!-- <img class="card-img-top img-raised" src="img/blog-2.jpg" alt="Blog 2">

-->

</a>

<div class="card-body">

<a href="#" class="card-title mb-2"><h5>Akshay Kumar</h5></a>

<p class="text-muted small-xl mb-2">Code</p>

<p class="card-text">{{"about us"}}</p>

</div>

</div>

</div>

</div>

<div class="row mt-6">

<div class="col-md-6 mx-auto text-center">

<a href="#" class="btn btn-primary float"><i class="fa-solid fa-angles-up fa-

2x"></i></a>

</div>

</div>

</div>

</section>

<!--footer-->

59
<footer class="py-6" id="footer">

<div class="container">

<div class="row">

<div class="col-sm-12 mr-auto">

<h5>About DEFYN</h5>

<p class="text-muted">DeFyn was started as an initiative to help people to manage

their defi portfolio just like using an expense tracker </p>

<ul class="list-inline social social-sm">

<li class="list-inline-item">

<a href=""><i class="fa fa-facebook"></i></a>

</li>

<li class="list-inline-item">

<a href=""><i class="fa fa-twitter"></i></a>

</li>

<li class="list-inline-item">

<a href=""><i class="fa fa-google-plus"></i></a>

</li>

<li class="list-inline-item">

<a href=""><i class="fa fa-dribbble"></i></a>

</li>

</ul>

</div>

</div>

<div class="row mt-5">

<div class="col-12 text-muted text-center small-xl">

&copy; 2022 DEFYN - All Rights Reserved

</div>
60
 </div>

</div>

</footer>

<!--scroll to top-->

<div class="scroll-top">

<i class="fa fa-angle-up" aria-hidden="true"></i>

</div>

61
Appendix B: SNAP SHOT

Figure 7.1 Dashboard

Figure 7.2 Contact creation

62
Figure 7.3 Request sent

Figure 7.4 Block option

63
Figure 7.5 Friend list

Figure 7.6 Transaction initiated

64
Figure 7.7 Transaction Rejected

Figure 7.8 Transaction Successful

65
Figure 7.9 Status of Transaction

66
67