Exploring the Potential of Decentralized Currency for E-Commerce: Case Study of an E-Commerce Website Using Decentralized Currency

– The purpose of this project is to develop Crypto Market, an innovative online shopping site that accepts Ethereum payments using Web3 technologies. The approach included using ReactJS for front-end development, integrating WalletConnect and MetaMask for secure purchases, and using the PostgreSQL database with the Django Rest framework for efficient data management. The goal was to create an easy-to-learn interface that would appeal to a wide range of users. The main results of the project were the successful integration of WalletConnect and MetaMask, which allow users to securely transfer Ethereum from their personal wallets to the site’s pool wallet with minimal transaction fees. The integration of CoinGecko has increased transparency for customers by showing them the real-time dollar equivalent of the Ethereum price on product pages. Additionally, the existence of a membership system enabled user registration and facilitated store opening requests, providing access to a dedicated panel for product management for approved vendors. Important results from this research show that Web3 technologies offer a secure shopping experience using Ethereum. WalletConnect and MetaMask integration provided a reliable environment for transactions, minimizing the risk of failed or incorrect payments. The successful adoption of cryptocurrency as a payment method in the context of online shopping highlights the potential of decentralized finance in traditional e-commerce applications. In summary, the Crypto Market project demonstrates the advantages and feasibility of incorporating cryptocurrency payments into online shopping sites. With this research, it has been revealed that cryptocurrencies should be more involved in commercial transactions and that they are a system that can be easily integrated.

In this article, the general structure of the "Crypto Market" shopping site developed with web3.0 support will be explained. Applications used for the frontend, backend, and Web 3.0 will be mentioned.
The web application developed under the name "Crypto Market" is a project that has many similarities with today's shopping sites but is fundamentally different. It aims to provide users with a similar experience thanks to the simplicity of the user interface. Unlike the shopping sites we use today, the Crypto Market application uses crypto money. With the increasing use of blockchain by people, it allows cryptocurrencies to be used in noninvestment areas as well. For this reason, it has prepared the environment for the development of a shopping site that works with Ethereum, which is the most stable in terms of value among cryptocurrencies. It is a web application that aims to be innovative in its field, as there is no shopping site using decentralized currency in this environment. It provides users with a shopping environment with minimal information.
With the rapid rise of blockchain technology, people's investment habits are changing. With this change, traditional investment methods lose their place to crypto money and NFT. With the development of Web3.0 [11] technology, payment methods with crypto money are increasingly coming to the fore. The Crypto Market web application, developed to provide users with a new shopping experience, brings a more innovative perspective to user payment methods. In this article, while talking about the project developed with Django, Rest Framework, ReactJs, and PostgreSQL used in web2.0 application development, we will take a closer look at the libraries and approaches used by the shopping site for web3.0 [12].
E-commerce sites used today make their users pay with traditional methods. These methods are based on the fact that users shop with their bank accounts or credit cards. The shopping site, which was established on the basis of crypto money payment methods, takes the shopping habits of users to a new dimension thanks to Web3.0 technology. We aim to use crypto currency as a payment method, as it is an investment tool whose use is increasing day by day.
In the project, users can use their crypto wallets by connecting them to the website, thanks to the possibilities provided by the WalletConnect library. WalletConnect has the most used wallet applications. With applications such as MetaMask, it allows users to shop through the web application. In this way, users can buy the product they want with a wallet application they are already familiar with. Thanks to WalletConnect and the wallet applications in it, users can shop in a safer environment.
React, or ReactJS, is one of the most popular libraries used for website development. In the project, a simple and user-friendly product was presented to the users by using the MaterialUI (MUI) component library together with React. The Django Rest Framework is a Python-based web framework. Django and Django Rest provide great benefits for both the user and the developer, thanks to their faster response times and documentation [13]. I chose a reliable and open-source database system for the data archive in the project. In this database, I keep only the necessary data of the users, the product-vendor data, and the necessary crypto transfer archive.

A. ReactJs
ReactJs is used for the front part of the project. While there are many reasons why React is preferred, the documentation they provide to developers is the biggest reason. It has a large number of open-source libraries to make a web application with a user-friendly and modern interface [2].
React allows components on a page to be written separately and then combined. Each piece that appears on the page can be written as a component, ensuring that each piece of the project is unique or used in other parts of the project. Therefore, the complexity of the code is reduced, leading to a reduction of unnecessary code in the project. Components can be written as functions or classes. Both styles of components were used in the Crypto Market project, and different styles were written during the development of the project, allowing different styles to approach their lifecycle. These choices played an important role in determining how the components would work after the page was opened.
Information such as user information, product information, sales records, and the admin panel to be displayed in the web application are shown to the user using the Axios library. The Axios library is one of the most popular Javascript libraries. It is used to send HTTP requests and has several advantages. It automatically detects and shows the developers the necessary errors for debugging (error codes: 404, 500). In addition to working on modern browser compatibility, it is also successful in legacy compatibility. It has the ability to automatically parse JSON responses. It has the feature of processing binary data, such as images and files. Custom response transformers can also be defined by developers. MaterialUI is used to provide a more modern look in the Crypto Market web application. MaterialUI is a component library. It contains content such as a large number of buttons, tables, cards, and warning texts that can be customized according to the intended use. MUI tables and tabs are used in the admin panel. The required information in the shopkeeper panel is displayed to the user in the same MUI tables. By using different tabs on a single page, a simple view is provided for the user to access many tables without changing the page. Once MaterialUI is included in the project, we can browse all its content from MaterialUI's website. Having so many options prevents websites published using MUI from looking like clones of each other. In addition to MaterialUI, product slides have been added so that users can access many products from the home page. In this way, many different types of products can be shown to users on the homepage of the site. The ether library provides the providers needed to connect to the ethereum network. It is a required Javascript library for accessing the Ethereum network and interacting with smart contracts within the project. Within the Crypto Market application, the crypto wallet can be connected to the site with the help of the mentioned libraries, and the desired products can be purchased with the help of an interface.

B. Django and Rest Framework
Using a modern and powerful framework provides speed and reliability [1]. That's why the powerful and new Django Rest Framework is one of the most popular frameworks for web application development.
Django is a web framework based on the Python programming language. Django makes it easy to develop fast and secure web applications [6]. There are important features that Django uses. At the beginning of these features are database management, user authorization, and URL forwarding. In this section, we will examine in more detail how these substances are used within the project.
Django provides model-based database management [7]. Required relationships are defined in models in Django. For example, the relationship of a product with a category and its relationship with a dealer are defined in the model. The fact that the model definitions are visually understandable helps the developers understand and optimize them more easily.
In user authorization processes, Django has an important place in the management of user session methods. There are processes such as user registration and user login in the Crypto Market web application. Registration includes information such as where the product purchased by the user will be delivered, who the courier company will contact, and the store memberships opened for the store page. Users also have different roles. There are user types with different roles, such as admin, store manager, and member. Admins can access all content and view all purchases in one panel, while store owners can access product add-edit and remove pages. Due to the requirement to become a member for purchases, only members can access such transactions.
Url redirects allow incoming requests to be directed to the defined view functions. In this project, url routing was used to perform operations such as purchasing products, viewing products, and editing products. View functions are the requestresponsive functions of the Django web application. In ReactJs, we define what the requests sent by the Axios library will do in Django within these functions. Within functions, requests are processed and a response is returned.
Serializers are used to model the Django Rest Framework in a more convenient format, like JSON. In order for the data held in the PostgreSql [9] database of the Crypto Market project to be displayed to the user on the front end, it must be transmitted to ReactJs in a suitable format. Therefore, all data displayed in the web application is the information returned by the serializer feature that DRF provides. In addition to the model information in the serializers, if there are models connected to each other, such as foreign keys, manyto-many relations, etc., appropriate definitions should be made here.

C. WalletConnect and MetaMask
Blockchain technology and cryptocurrencies are becoming more popular. People are turning the money they earn into investment vehicles with decentralized cryptocurrencies. Therefore, there was a need for a technology that could reliably process transactions such as transfer transactions and storing assets. The WalletConnect API and MetaMask include the necessary technologies to solve all these needs. With WalletConnect, the Crypto Market web application allows members to purchase products and send them to the accounts of the sellers after the necessary transactions are completed from the pool account.
WalletConnect enables users to connect to the store page of their Ethereum wallet by establishing a secure connection. Connecting a wallet to WalletConnect allows users to shop in an environment they trust. Users can complete the purchase process without sharing their wallet information with the shopping site. WalletConnect also offers various possibilities for users to link their wallets. There are different entry systems, such as QR code scanning or entering from a mobile device or browser.
MetaMask is a wallet application that allows users to access the Ethereum network. While WalletConnect is an app to access wallets, MetaMask is the wallet itself. The MetaMask wallet, which is selectively connected to WalletConnect, is the primary source for purchases [3]. MetaMask is the first choice in the Crypto Market project, as it is a wallet that cares about user security.

Fig. 3 MetaMask
Ethereum is one of the most used and popular systems in the cryptocurrency ecosystem [5]. Besides being a cryptocurrency, Ethereum is, more importantly, a blockchain platform. Since the Ethereum cryptocurrency is considered one of the most stable crypto money sources, it has been accepted as the main currency in the project. It is important to choose a stable cryptocurrency in order to avoid user and seller vulnerabilities [4].
The WalletConnect API and MetaMask play an important role in the use of web3.0 technologies in the Crypto Market web application. These tools have an important position in the market, and their use on the website is an important step for the project to be global.

III. RESULTS
This project covers the development processes of a Web 3.0 shopping site called Crypto Market. Powerful and reliable technologies such as React, Django, the Rest Framework, and PostgreSQL are used in the project. In addition, various libraries were used for Web 3.0 integration. For Web3.0 integration, users have access to their crypto wallets by integrating the WalletConnect API. An Ethereum-based payment system has been implemented and interacts with smart contracts. WalletConnect has provided users with greater transaction capacity and a secure service.
The transaction speed of the project was closely monitored, and one of the priority targets was for users to perform transactions in the fastest way possible. Tests were made for the most optimized functions for fast data processing in Django, Rest Framework, and PostgreSql [8].

IV. DISCUSSION
Various difficulties were experienced in the integration of the technologies used in the project with each other. The WalletConnect API is not compatible with some libraries that provide core features in React. There are various package incompatibilities with the latest updated React version. However, with various library version changes, these difficulties were overcome, and the project was able to run smoothly.
Various arrangements have been made for users to have a smooth shopping experience. At the beginning of these arrangements, WalletConnect continues the shopping process in a pop-up window instead of being embedded in the site. It has been observed that it is more important for users to use an interface they already know while shopping than the WalletConnect functions embedded in the site.

V. CONCLUSION
In the project, a comprehensive process for the development of the Crypto Market shopping site was discussed, and the project is ready for successful publication. The use of strong technologies accepted in the industry is important for the future of the project. Among the features of the project are basic features such as listing products, adding products, creating users, and purchasing products using a crypto wallet. The speed of the project, which was built on these foundations, and its adoption of a different understanding of payment are the most important features that distinguish it from its competitors in the sector.
As a result, it has made it possible to provide the best shopping experience with the facilities provided by the most modern technologies and a user-friendly interface model. Thanks to the WalletConnect API, it provides the most reliable and fastest experience to users by using the benefits of web3.0 technology [10].