<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Akshat</title>
    <description>The latest articles on Forem by Akshat (@akshatmishra101).</description>
    <link>https://forem.com/akshatmishra101</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F850608%2Febf2488e-d50f-4637-af7d-2d81a66abaf6.jpeg</url>
      <title>Forem: Akshat</title>
      <link>https://forem.com/akshatmishra101</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/akshatmishra101"/>
    <language>en</language>
    <item>
      <title>Introduction to OpenDAX – A Fast, Secure &amp; Highly-Scalable Open-Source Crypto Exchange Engine</title>
      <dc:creator>Akshat</dc:creator>
      <pubDate>Tue, 17 Jan 2023 05:58:46 +0000</pubDate>
      <link>https://forem.com/openware/introduction-to-opendax-a-fast-secure-highly-scalable-open-source-crypto-exchange-engine-1m4g</link>
      <guid>https://forem.com/openware/introduction-to-opendax-a-fast-secure-highly-scalable-open-source-crypto-exchange-engine-1m4g</guid>
      <description>&lt;p&gt;OpenDAX is a modular platform for building, deploying, and managing crypto exchange services. It is fast, cost-efficient, and has a built-in liquidity solution that can scale to demand. This article aims to understand the OpenDAX platform and learn how it solves problems of the Fintech exchange ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Starting a crypto exchange platform is a difficult &amp;amp; risky business endeavor, primarily due to two reasons. First is the cost required for developing and maintaining the software infrastructure, and second is obtaining the crypto liquidity to make the exchange functional. It only gets more difficult when you realize the crypto exchange landscape is highly-competitive and the major chunk of market share lies with the big exchanges who fight for slivers of user share and liquidity.&lt;/p&gt;

&lt;p&gt;This situation has siloed the entire crypto space and has kept new exchanges or brokers from entering this space. OpenDAX is a unique white-label exchange software built to resolve this problem. It is a self-managed cloud-native solution that cuts down the cost and resources required in building, managing, and bringing liquidity to exchanges. OpenDAX takes care of everything under the hood so that you can focus on the growth of your business.&lt;/p&gt;

&lt;p&gt;Let’s dive deeper to understand how the OpenDAX platform can help you achieve your business goals and what business problems it solves.&lt;/p&gt;

&lt;h2&gt;
  
  
  About OpenDAX &amp;amp; Yellow Network
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.openware.com/product/opendax" rel="noopener noreferrer"&gt;OpenDAX&lt;/a&gt; is a crypto brokerage engine platform you can use to build your cryptocurrency exchange. It includes a self-hosted solution for enterprises, a managed crypto exchange platform on the cloud, and a free solution for developers with complete access to &lt;a href="https://github.com/openware/opendax" rel="noopener noreferrer"&gt;public repositories&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The UI components of OpenDAX are freely available as part of the &lt;a href="https://www.npmjs.com/package/@openware/opendax-web-sdk" rel="noopener noreferrer"&gt;WebSDK&lt;/a&gt; – which can be used to create custom design configurations for the platform. Additionally, most of the OpenDAX stack is highly open-source and is based on technologies like Supabase, Next.js, and React. All these things together make OpenDAX super extensible and customizable (to be covered in later articles).&lt;/p&gt;

&lt;p&gt;OpenDAX is still a product in development, and would soon come with built-in shared liquidity with the support of &lt;a href="https://www.yellow.org/" rel="noopener noreferrer"&gt;Yellow Network&lt;/a&gt;. The Yellow Network is a peer-to-peer mesh overlay that interconnects multiple blockchains through state channels. In doing so, it unlocks the liquidity of isolated networks and provides lightning-fast trading speeds. After the public release of the Yellow Network, brokers would be able to harness this deep cross-chain liquidity on their OpenDAX nodes.&lt;/p&gt;

&lt;p&gt;Together, OpenDAX &amp;amp; Yellow Network will provide a strong self-managed &amp;amp; supportive ecosystem for crypto exchange businesses to work on, so they only have to focus on their business growth and ideas.&lt;/p&gt;

&lt;p&gt;What Makes OpenDAX Special?&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes OpenDAX Special?
&lt;/h2&gt;

&lt;p&gt;OpenDAX abstracts away the complexities of handling &amp;amp; operating a crypto exchange by providing handy and user-friendly tools. Here’s everything that makes OpenDAX special as a crypto brokerage platform.&lt;/p&gt;

&lt;h3&gt;
  
  
  Quick Setup
&lt;/h3&gt;

&lt;p&gt;OpenDAX is available on AWS, GCP, Azure &amp;amp; Digital Ocean as a pre-configured image you can launch in about 15 minutes. The setup requires only the basic knowledge of cloud platforms, while the OpenDAX interactive installation package takes care of the rest.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hybrid Model
&lt;/h3&gt;

&lt;p&gt;OpenDAX is hybrid in design, as it provides the security and transparency of decentralized exchanges with the speed and immense liquidity pools of centralized exchanges. For brokers OpenDAX provides the same easy user-interface as any CEX, while giving users the advantage of the extra security. It is the best of both worlds.&lt;/p&gt;

&lt;h3&gt;
  
  
  State Channels
&lt;/h3&gt;

&lt;p&gt;State Channel is a cutting-edge virtualization method that takes data and processing off-chain to facilitate fast transaction speeds and cross-chain support. This technology allows OpenDAX to fill orders while allowing precise high-frequency trading.&lt;/p&gt;

&lt;h3&gt;
  
  
  Aggregated Liquidity
&lt;/h3&gt;

&lt;p&gt;By becoming a part of the Yellow Network as a broker, you can aggregate deep liquidity for your crypto exchange, saving you from investing any capital in market makers or other solutions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hassle-Free Maintenance
&lt;/h3&gt;

&lt;p&gt;Maintaining cryptocurrency exchanges is difficult as it requires the maintenance of individual blockchain nodes. OpenDAX cloud is a managed solution that takes care of everything under the hood so that you can focus on the business side of things.&lt;/p&gt;

&lt;h3&gt;
  
  
  High-Performance
&lt;/h3&gt;

&lt;p&gt;OpenDAX was designed with performance in mind. Its matching engine can quickly and accurately fills trade orders. OpenDAX Kubernetes pods can also scale with your business as the demand grows.&lt;/p&gt;

&lt;h2&gt;
  
  
  OpenDAX’s Tech Stack
&lt;/h2&gt;

&lt;p&gt;OpenDAXv4’s tech stack is highly modular, and the entire exchange engine is based on the microservice architecture. Individual components are loosely coupled, and there’s no risk of accidentally breaking the software should you try to extend it.&lt;br&gt;
It also means that the system is fault-resistant and self-healing – since microservices don’t rely on each other, and there’s no hard linking.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmvh2u0mc0sdam75lf90.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmvh2u0mc0sdam75lf90.jpeg" alt="OpenDAX follows a microservice architecture" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Customizable Frontend &amp;amp; Backend
&lt;/h3&gt;

&lt;p&gt;The front end consists of the trading UI, wallet management service, and administration interface for low-level control over the exchange. The UI components used by OpenDAX are the same as those present in the WebSDK. These components are coded in React and can easily be customized or extended with other components.&lt;/p&gt;

&lt;p&gt;The backend consists of the Finex trading engine, which performs order matching at lightning speeds, and smart contracts that take care of the user fund deposits and withdrawals. The front end and back end are tied together through &lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Next.js&lt;/a&gt;, a full-stack react framework where you can create your APIs, pages, and endpoints, giving you complete control over the customization of your exchange.&lt;/p&gt;

&lt;p&gt;The benefit of using Next.js over plain React and Node.js is SSR or Server-side rendering. Your exchange is going to perform well, even on low-spec client devices. It also means your exchange would benefit from search engine optimization (SEO) as SSR renders pages in a static-like manner that is friendly to the Google spider bots.&lt;/p&gt;
&lt;h3&gt;
  
  
  Authentication, APIs, and Key Management
&lt;/h3&gt;

&lt;p&gt;For secure key management, OpenDAX comes integrated with &lt;a href="https://cloud.hashicorp.com/products/vault" rel="noopener noreferrer"&gt;Vault&lt;/a&gt; – an industry standard for securing keys and other secrets. &lt;a href="https://github.com/supabase/gotrue" rel="noopener noreferrer"&gt;GoTrue&lt;/a&gt; is used to authenticate all APIs, while &lt;a href="https://konghq.com/" rel="noopener noreferrer"&gt;Kong&lt;/a&gt; serves as a gateway and helps in scaling those APIs.&lt;/p&gt;

&lt;p&gt;OpenDAX also comes integrated with &lt;a href="https://supabase.com/" rel="noopener noreferrer"&gt;Supabase&lt;/a&gt; – an open-source Firebase alternative. It is a BaaS (backend as a service) tool that helps you create and manage your software's APIs.&lt;/p&gt;
&lt;h3&gt;
  
  
  Maintenance &amp;amp; Scaling Infrastructure
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.docker.com/" rel="noopener noreferrer"&gt;Docker&lt;/a&gt; is a DevOps containerization service that separates your code from the infrastructure it depends on. Docker is often coupled with &lt;a href="https://kubernetes.io/" rel="noopener noreferrer"&gt;Kubernetes&lt;/a&gt;, which helps you rapidly deploy, scale and manage your containers. Together, they administer rapid software delivery and take care of its scaling.&lt;/p&gt;

&lt;p&gt;OpenDAX comes pre-configured with these tools, and they take care of the scaling as the demand for your software grows. It also means you can create production-grade workflows for your development team if you plan to extend the software stack.&lt;/p&gt;
&lt;h3&gt;
  
  
  Cloud Native
&lt;/h3&gt;

&lt;p&gt;Hosting an exchange on bare-metal servers is cost and resource-intensive, so OpenDAX has been developed as a cloud-native solution. OpenDAX is available as a free image on AWS, Azure, and GCP, and you are only required to pay as you use the hosting. It also means you don't have to worry about scaling, downtimes, or other security threats, as these cloud services take care of protection and reliability.&lt;/p&gt;

&lt;p&gt;If you want to try the installation immediately, check out the step-by-step video guide for the OpenDAX v4 mainnet installation: &lt;/p&gt;


&lt;div&gt;
  &lt;iframe src="https://loom.com/embed/a86701c5141044b89258c6e17a596302"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Key Benefits of OpenDAX
&lt;/h2&gt;

&lt;p&gt;The crypto exchange ecosystem is plagued with many technical problems that have made launching and operating crypto exchanges difficult. OpenDAX aims to resolve these issues.&lt;/p&gt;

&lt;p&gt;If you like it visual, here’s an OpenDAX v4 video webinar by Openware CEO &amp;amp; Founder Louis Bellet: &lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/buQ42PNqxVc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  KYC &amp;amp; AML Compliant
&lt;/h3&gt;

&lt;p&gt;Even now, compliance remains a huge problem in the crypto exchange space. And although KYC and AML solutions exist, standards vary across countries. OpenDAX comes with a KYC integration protocol using which you can easily use a KYC supplier service with your exchange.&lt;/p&gt;

&lt;p&gt;You can also customize these solutions to suit your own needs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cutting Down Business Costs
&lt;/h3&gt;

&lt;p&gt;Because of the other benefits of OpenDAX in infrastructure, development, security, and liquidity, it can massively cut down the cost required to launch and operate a cryptocurrency exchange business. That includes minimizing OPEX &amp;amp; CAPEX costs, making OpenDAX stand out from other similar solutions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Perfect For Businesses of All Sizes
&lt;/h3&gt;

&lt;p&gt;Whether your exchange is operating globally or is serving a small area, OpenDAX can scale to serve audiences of all sizes. OpenDAX can be operated by small and large teams, making it easier to start a crypto exchange business.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;This article sums up the OpenDAX crypto exchange platform and its technical and business benefits. If you have any doubts or queries regarding the engine, feel free to reach out to the extensive &lt;a href="https://t.me/peatio" rel="noopener noreferrer"&gt;OpenDAX community&lt;/a&gt;. In the upcoming articles, we will explain how you can deploy, manage and extend an OpenDAXv4 mainnet instance on the cloud of your choice.&lt;/p&gt;

&lt;p&gt;Feel free to experiment with the installation, ask your questions to the community, and let’s build the Web3 Internet of Finance together!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>ui</category>
      <category>webdev</category>
      <category>ux</category>
    </item>
    <item>
      <title>Developer’s Guide To Web3 Security</title>
      <dc:creator>Akshat</dc:creator>
      <pubDate>Thu, 03 Nov 2022 11:50:28 +0000</pubDate>
      <link>https://forem.com/openware/developers-guide-to-web3-security-5hic</link>
      <guid>https://forem.com/openware/developers-guide-to-web3-security-5hic</guid>
      <description>&lt;h2&gt;
  
  
  Learn About The Industry’s Best Practices, Security Roles, And How To Approach Web3 Security As a Developer
&lt;/h2&gt;

&lt;p&gt;Web3 has finally entered the mainstream consumer space; and its effect is undeniably strong. Even the big tech realizes this, as it has started &lt;a href="https://bigthink.com/the-present/google-amazon-others-entering-blockchain/" rel="noopener noreferrer"&gt;building the supporting infrastructure&lt;/a&gt;. This moment also marks a major shift in the tech landscape as we transition from the company owned Web2, to the user-owned Web3 model. &lt;/p&gt;

&lt;p&gt;But as with any new technology, Web3 comes with a whole new set of challenges, and security remains a big issue. According to &lt;a href="https://www.certik.com/resources/blog/7fuXtbfo4CXEXcwy5Pqijp-hack3d-the-web3-security-quarterly-report-q2-2022" rel="noopener noreferrer"&gt;Certik&lt;/a&gt;– a leading Web3 security firm, DeFi has lost more than $2 billion in the first two quarters of 2022 alone, which just goes to show how bad the situation is.&lt;/p&gt;

&lt;p&gt;Cyber attacks have become increasingly common and there has been a parallel surge in demand for security professionals in the industry. Since Web3 is still in its nascency, this presents itself as a perfect opportunity for people who are looking to get a headstart in this space.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Secure is Web3?
&lt;/h2&gt;

&lt;p&gt;Security in Web3 revolves around two central ideas, decentralization and strong encryption. These features are native to the blockchain technology, which is a self-protecting database that resists mutation due to its design. But unlike traditional databases, a blockchain has several layers of protection. &lt;/p&gt;

&lt;p&gt;Every piece of data on a blockchain is a transaction, and to verify its authenticity a blockchain uses a &lt;strong&gt;‘Consensus Mechanism’&lt;/strong&gt;. This algorithm requires all the miner nodes on a blockchain to reach a common ground for a transaction before it can get recorded. Additionally, every transaction is asymmetrically encrypted, and its ownership can be justified. &lt;/p&gt;

&lt;p&gt;The security of a blockchain is established on one simple fact; that the computing power required to create fake transactions has to be greater than the combined processing power of all participating miner nodes. As the blockchain gets bigger and computers naturally get faster, the cost of brute-force or data corruption attacks on a blockchain becomes impossibly high.&lt;/p&gt;

&lt;p&gt;But even with this security, Web3 systems are still constantly at the receiving end of cyber attacks. So much so, that it has painted an overall grim picture for some people in the community. And this raises the question, is Web3 really more secure than Web2? The short answer is Yes.&lt;/p&gt;

&lt;p&gt;The reasoning behind this is quite simple; as most of the security breaches that we see in the blockchain world today (with the exception of some) are not related to the functioning of the blockchains themselves. These attacks mostly occur on application layer, or from newer technologies built around the blockchain that facilitate cross-chain communication.&lt;/p&gt;

&lt;h2&gt;
  
  
  Web3 Security Vectors
&lt;/h2&gt;

&lt;p&gt;The list of attack vectors in Web3 is long and constantly growing; and for the sake of this article, we’ll limit the scope to only those pathways which depend upon the functioning of Decentralized Applications&lt;/p&gt;

&lt;h2&gt;
  
  
  Smart Contract Vulnerabilities
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzr2ajo7a90msblniias4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzr2ajo7a90msblniias4.jpg" alt="Smart Contract Vulnerabilities"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Although Web3 has been around for a while now, the ecosystem for writing smart contracts is immature. Writing blockchain apps requires a deep understanding of smart contract programming languages, and an in-depth knowledge of blockchain networks. And due to the absence of a mature ecosystem, developing enterprise-grade blockchain apps is quite difficult. &lt;/p&gt;

&lt;p&gt;The EVM is still experimental in nature, and bugs are easier to induce than they are to detect. A good example of this would be the re-entrancy attack which only takes the programmers to incorrectly structure the sequence of operation for the vulnerability to take effect. &lt;a href="https://swcregistry.io/" rel="noopener noreferrer"&gt;SWC registry&lt;/a&gt; records some of the most common vulnerabilities which we’ll cover in a little detail later.&lt;/p&gt;

&lt;p&gt;Programming vulnerabilities are the leading security concern even today. Smart Contracts ideally need to go through several stages of security audits, before they are considered ready for production.&lt;/p&gt;

&lt;h2&gt;
  
  
  DeFi Semantics
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7tus3tdremg5728z4n2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7tus3tdremg5728z4n2.jpg" alt="Semantics Based Attacks Are Hard To Detect"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Web3 provides a native ecosystem for finance as cryptocurrencies are embedded right into its framework. However, this has also created problems for developers and businesses as now attackers have an easier, and more direct access to it. Additionally, the functioning of a DApp is directly dependent upon the liquidity of the environment; which, as of today, is quite poor. &lt;/p&gt;

&lt;p&gt;This allows more sophisticated, semantic-based attacks to occur. One of the simplest forms of this attack is market manipulation in DEXs to create artificial pumps and dumps. Attackers can make use of features of DeFi like lending, borrowing, flash-loans and combine them together in ways to attack the entire system.&lt;/p&gt;

&lt;p&gt;The price oracle manipulation attack also comes under this category, where attackers use the weakness of on-chain oracles to manipulate prices either through flash-loans or borrows. This is now used to artificially increase the prices which leads to liquidations and a steep fall in the price of the token.&lt;/p&gt;

&lt;p&gt;Compared to smart contract weakness based attacks, these are harder to detect. And to fully understand and assess risk, businesses need to hire experts who understand the high-level semantics of a DeFi application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Blockchain Trilemma
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl0y1d4n8m49mb7oqvzq2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl0y1d4n8m49mb7oqvzq2.jpg" alt="Blockchain Trilemma"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Unlike the other two weaknesses, Blockchain Trilemma is related to the weakness of blockchain and its surrounding technologies. And it refers to the notion that blockchain systems cannot simultaneously be highly scalable, secure and decentralized. Until recent innovations, this has more or less held true especially in the case of Layer–1 networks. &lt;/p&gt;

&lt;p&gt;The idea originates from the CAP theorem, which was formulated in the 1980s. And according to the theorem, amongst security, scalability and decentralization; a distributed system can only provide two of the features at once. Blockchain being a distributed system, follows this theorem.&lt;/p&gt;

&lt;p&gt;Centralization of resources improves speed, but it also puts all responsibility on a single entity which reduces security. On the other hand, decentralization improves security, but slows down a network considerably. Most of the high TPS Layer–1 networks still suffer from this problem. The trilemma is further proven right in the case of CEXs and DEXs, where each have their benefits over the other.&lt;/p&gt;

&lt;p&gt;However, recent innovations in the blockchain space have created a pathway for Layer–1 networks to scale while keeping their decentralization and security intact. Layer–2 scaling solutions like state-channels, sidechains and nested chains have been able to greatly improve the scalability of Layer–1 networks without harming their security.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ensuring Security in An Unstable Environment
&lt;/h2&gt;

&lt;p&gt;Web3 gets attacked often because it is still in its elementary phase, and these attacks are more like growing pains. Opposed to Web2 applications, which follow the conventional client-server architecture, the rules and frameworks concerning the security of Web3 apps, are still under development.&lt;/p&gt;

&lt;p&gt;Moreover, since there’s no formal Web3 consortium or a central standards organization, a lot of development around the security of Web3 applications is scattered and distributed amongst several independent organizations. As such, securing Web3 applications currently is more challenging than Web2. &lt;/p&gt;

&lt;p&gt;Even some of the most popular products like Binance, Uniswap, tornado, and Harmony face regular attacks. While ensuring complete security in this environment is unrealistic, we can get close to it by following simple rules; Given below are the steps you can take as a developer to secure your Decentralized Apps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Following The Design Standards
&lt;/h2&gt;

&lt;p&gt;Web3 companies have different solutions for a single problem, and a lot of them are new, and largely untested in real world environments. This is bad from a security standpoint and puts the business and its customers at risk.&lt;/p&gt;

&lt;p&gt;However the risk can be reduced significantly by adhering to the coding standards, and following some rules. Colloquially speaking, design pattern is a general reusable solution to a given problem; whose security is well established.&lt;/p&gt;

&lt;p&gt;When it comes to writing smart contracts, there are design patterns which deal with different aspects of a DeFi application such as, optimizing gas costs, safely handling transactions and securely managing storage. Smart Contract developers can make use of the SWC registry as their go-to handbook for writing coherent, and secure code. We’ve discussed a few of those below.&lt;/p&gt;

&lt;h3&gt;
  
  
  Withdrawal Pattern
&lt;/h3&gt;

&lt;p&gt;Handling transactions is one of the most trivial but sensitive tasks, and there are several ways to do it. Solidity provides send, transfer and call functions for transferring ether through a smart contract.&lt;/p&gt;

&lt;p&gt;Although all three of these functions are secure and can be used for making transfers, in practice, there are certain quirks about making transactions. We’ll use the smart contract below (taken from &lt;a href="https://docs.soliditylang.org/en/v0.8.15/common-patterns.html#withdrawal-from-contracts" rel="noopener noreferrer"&gt;Solidity Docs&lt;/a&gt;) to serve our example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pragma solidity ^0.8.4;

contract SendContract {
    address payable public richest;
    uint public mostSent;
    error NotEnoughEther();
    constructor() payable {
        richest = payable(msg.sender);
        mostSent = msg.value;
    }

    function becomeRichest() public payable {
        if (msg.value &amp;lt;= mostSent) revert NotEnoughEther();
        // This line can cause problems (explained below).
        richest.transfer(msg.value);
        richest = payable(msg.sender);
        mostSent = msg.value;
    }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Source : Solidity Docs – &lt;a href="https://docs.soliditylang.org/en/v0.8.15/common-patterns.html#withdrawal-from-contracts" rel="noopener noreferrer"&gt;Withdrawal Pattern (Become The Richest Contract)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The following contract makes a direct transfer to the receiver, and this puts the entire burden of transaction on the sender. Which means, if the transaction fails, it would stop the functioning of our contract, and if any of the other users have their funds in this DApp, they would forever be locked.&lt;/p&gt;

&lt;p&gt;Luckily for us, the fix is quite simple, our goal here is to not bear the responsibility of the transaction.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function becomeRichest() public payable {
        if (msg.value &amp;lt;= mostSent) revert NotEnoughEther();
        pendingWithdrawals[richest] += msg.value;
        richest = msg.sender;
        mostSent = msg.value;
    }

    function withdraw() public {
        uint amount = pendingWithdrawals[msg.sender];
        // Remember to zero the pending refund before
        // sending to prevent re-entrancy attacks
        pendingWithdrawals[msg.sender] = 0;
        payable(msg.sender).transfer(amount);
    }

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As can be seen above, the simplest fix is creating a function which allows the fund receiver to withdraw their amount from a mapping which holds the information of their withdrawal. Withdrawal Pattern provides a safe way to transfer ether so that it does not block the functioning of a smart contract in-case of a failure.&lt;/p&gt;

&lt;h3&gt;
  
  
  Avoiding Re-entrancy
&lt;/h3&gt;

&lt;p&gt;Re-entrancy is a vulnerability that arises from the way we structure code in a smart contract. It works by stopping the execution of a payable function by trapping it inside a recursive call. It can be better understood using the example below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mapping (address =&amp;gt; uint) private userBalances;

function withdrawBalance() public {
    uint amountToWithdraw = userBalances[msg.sender];
    (bool success, ) = msg.sender.call.value(amountToWithdraw)(""); // At this point, the caller's code is executed, and can call withdrawBalance again
    require(success);
    userBalances[msg.sender] = 0;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Source: Consensys.org – Reentrancy&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The withdrawBalance function allows the users to withdraw their funds, however, it updates the user fund allocation after making the transfer. This means a user can drain this contract of all its funds by trapping eth transfer inside a recursive call. And this is done through a fallback function which calls the withdrawBalance method recursively.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yghpgg2bydmoqklnxno.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yghpgg2bydmoqklnxno.jpg" alt="Reentrancy Explained"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This vulnerability can drain a contract of all its funds, and is a classic example of how smart contract programming is different from Web2 development and design. A simple fix would be to update the state variable before the transfer takes place, as in the example we’ve provided below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function withdrawBalance() public {
    uint amountToWithdraw = userBalances[msg.sender];
    userBalances[msg.sender] = 0;
    require(amountToWithdraw &amp;gt; 0);
    msg.sender.call.value(amountToWithdraw)(""); // At this point, the caller's code is executed, and can call withdrawBalance again

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Locking Unlocked or Floating Pragma
&lt;/h3&gt;

&lt;p&gt;Pragma is a compiler directive which tells EVM about the versions of Solidity our smart contract can execute on. Unlocking the pragma means the smart contract is open to execute on untested as well as experimental versions of solidity. And this can introduce fatal bugs to our application.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pragma solidity ^0.8.0;
// Should be written as
pragma solidity 0.8.25;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first line suggests that all the versions of the solidity compiler starting from version 8, can be used for executing this contract. This has been fixed in the third line, where the pragma is locked. At the time of writing this article, Solidity version eight remains the standard. &lt;/p&gt;

&lt;h3&gt;
  
  
  Unencrypted Data on-chain
&lt;/h3&gt;

&lt;p&gt;A common misconception amongst beginner blockchain developers is that the contents of a private marked variable are hidden, however, that’s not the case. Private in the context of blockchains and smart contracts means that the variable is inaccessible to other contracts. &lt;/p&gt;

&lt;p&gt;The data of all the variables of a contract is stored on the blockchain and can be viewed by anyone. Although data storage contracts exist, they’re not generally built for storing sensitive information. And the developers must ensure that any sensitive data stored on a blockchain is encrypted.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preparing For Failure
&lt;/h2&gt;

&lt;p&gt;Blockchain technology is experimental, and it is bound to fail. Even flawlessly written code is susceptible to vulnerabilities and underlying architecture problems – which surface up from time to time. In the world of Web2, such situations would usually be handled through patches or hot-fixes; but since a blockchain works differently, security needs to be implemented by design.&lt;/p&gt;

&lt;p&gt;What this means is that we need to make our smart contracts tolerant of failures. And this is important because a blockchain is an immutable database, and a smart contract that has once been deployed, cannot be deleted. There are three aspects to failure control which a smart contract needs to follow to gracefully deal with such issues.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pausing the contract –&lt;/strong&gt; This works like a circuit breaker for when security has been breached. It freezes the functioning of the application and ensures no further exploitation takes place.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rate limiting –&lt;/strong&gt; As the name suggests, it means limiting the maximum usage of the different metrics in our app. This includes fund withdrawals, cooldown time, and successive withdrawals.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Upgrade path –&lt;/strong&gt; Designing the smart contracts to be upgradable is an absolute must. This also means having an effective upgrade plan and a procedure for introducing improvements or bug-fixes.&lt;/p&gt;

&lt;p&gt;Failure control protocols are built into all apps before they are rolled out for production, and it is a life saver in situations where there is a catastrophic failure or vulnerability in the system. The recent Binance bridge attack and the handling of the situation goes to show how important a failure control procedure can be. &lt;/p&gt;

&lt;p&gt;On October 6th, the Binance bridge was drained for as much as $500 million. These funds were then moved across wallets on the smart chain network to disperse and make it hard to track. Binance prevented any further exploitation of their bridge, firstly by pausing their smart chain network, and then introducing new changes with the fork which solved the previous vulnerabilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Designing Apps on Layer–3 Blockchains
&lt;/h2&gt;

&lt;p&gt;Layer–1 represents the first layer of blockchain and it manages all the essential tasks of the network. Because of the many operations that this tier has to manage, it faces issues regarding scalability. These problems are mitigated through Layer–2 scaling solutions such as state-channels, sidechains and plasma-networks. &lt;/p&gt;

&lt;p&gt;Layer–2 networks work by forming an arrangement which decouples acknowledgement and settlement of data. This boosts the network speed and also introduces interoperability. But despite offering higher speeds Layer–2 networks have failed to gain mainstream popularity, as they do not inherit the liquidity of their parent chains. Good liquidity triumphs over gains in speed and apps continue to be developed on Layer–1 networks.&lt;/p&gt;

&lt;p&gt;Over the years, this has created many problems for businesses. The absence of a mature ecosystem has made the development of blockchains apps complex and expensive. On one end, developers can reap the benefits of high liquidity, and on the other they can make use of high scalability and interoperability to offer smoother user experiences. &lt;/p&gt;

&lt;p&gt;These problems are now solved by Layer–3 networks, which perform the task of connecting, pooling liquidity of Layer–1 &amp;amp; 2 networks. And in doing so, Layer–3 networks get rid of the redundancy that plague blockchain development. Layer–3 acts as an application layer and it simplifies the development of decentralized apps. &lt;/p&gt;

&lt;p&gt;Layer–3 protocols like the &lt;a href="https://www.yellow.org" rel="noopener noreferrer"&gt;Yellow Network&lt;/a&gt; bring the much needed reliability and security to Web3. By providing deep liquidity, high interoperability and scalability, Layer–3 creates an ideal working environment for DApps. Deep liquidity offers protections from price manipulations while the SDK provides a simpler interface for making apps interoperable.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Web3 Security Stack
&lt;/h2&gt;

&lt;p&gt;Security is a broad field and it requires knowledge of a diverse set of skills. Although there are many languages and tools to cover, you can get started using just a few of these. And depending on your goals and area of interest, your tech stack can have different variations of the one we have mentioned here.&lt;/p&gt;

&lt;h2&gt;
  
  
  Blockchain Programming Languages
&lt;/h2&gt;

&lt;p&gt;Based on their use, blockchain programming languages can be divided into two categories. Application programming languages are used for writing smart contracts and developing decentralized apps. Whereas Low-Level languages are used for the development of blockchain networks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Go –&lt;/strong&gt; Imagine C, but with a modern syntax, memory safety, structured typing and garbage collection; well that’s exactly what Go is. Go was developed at Google as a “modern C” . It is used for building fast and reliable modern blockchain systems. &lt;/p&gt;

&lt;p&gt;Go’s low level capabilities allow the developers to have fine-grain hardware control, while its modern syntax and features boost productivity and make long term maintenance of blockchain products easy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rust –&lt;/strong&gt; Rust was developed by the Mozilla corporation to be the modern C++. It is a popular contender to Go for blockchain development as it offers similar features and is in use in major chains such as Solana and PolkaDot. &lt;/p&gt;

&lt;p&gt;But unlike Go, Rust has controllable memory management. Developers can harness this feature to make extremely fast and efficient blockchain systems. Additionally, Rust is also in popular use as a smart contract programming language due to its easy to learn syntax.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Python –&lt;/strong&gt; Unless you’re living under a rock, Python should be no stranger. It is a general purpose programming language with a simple syntax, which has been designed keeping code readability in mind. &lt;/p&gt;

&lt;p&gt;It has tons of libraries and can be used to write smart contracts for blockchains like AlgoRand. It is also heavily used in smart contract vulnerability tools such as Mythril and Slither which we’ve discussed in the coming sections.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript –&lt;/strong&gt; JavaScript is the native language of the internet, and it is here to keep that title. JavaScript offers first class support for blockchain development and has been a direct inspiration for languages like solidity. &lt;/p&gt;

&lt;p&gt;It has a small learning curve and by far the best support for blockchain app development. Together with npm and the NodeJs ecosystem, JavaScript is a powerhouse of tools which you can use to easily bootstrap a blockchain app in seconds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solidity –&lt;/strong&gt; When it comes to writing smart contracts, Solidity is arguably the most popular programming language. It is native to the Ethereum ecosystem and is supported by other major blockchains such as Avalanche and Binance. &lt;/p&gt;

&lt;p&gt;It bears many similarities with the curly-bracket languages like Java and JavaScript and is fairly easy to grasp. Another thing to note, is that amongst all smart contract programming languages, Solidity has the best support and the most mature ecosystem of libraries and frameworks. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vyper –&lt;/strong&gt; Vyper is a relatively new pythonic language which has recently gained traction. It has an easy syntax and its compilation targets the EVM. Vyper was developed to make blockchain programming less complex, and to eliminate the bugs that arise because of the code structures in Solidity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Motoko –&lt;/strong&gt; Although less popular, Motoko is used for application development for the ICP blockchain. The Internet Computer is a blockchain that aims to reform the centralized internet. It is a decentralized cloud computing platform where motoko is used to “model” protocols and apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Yul –&lt;/strong&gt; Yul is an Intermediate EVM based language which was designed to make optimisations on Solidity code. Its primary purpose is to improve the gas experience and produce more efficient target bytecode which executes on the EVM.&lt;/p&gt;

&lt;h2&gt;
  
  
  Security Analysis Tools
&lt;/h2&gt;

&lt;p&gt;Security analysis tools are the swiss army knife in the world of infosec, and are of great help to security engineers and developers alike. Unlike programming languages, these tools have a smaller learning curve and are fairly easy to use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/crytic/slither" rel="noopener noreferrer"&gt;Slither&lt;/a&gt; –&lt;/strong&gt; Developed by Crytic, it is the most popular free tool used for static analysis of solidity code. It’s written completely in python and features a vast array of vulnerability detectors. Slither also has its own API which the developers can use to write custom vulnerability analysers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/ConsenSys/mythril" rel="noopener noreferrer"&gt;Mythril&lt;/a&gt; –&lt;/strong&gt; It is a part of the Mythx tool suite provided by Consensys for enterprises. But unlike Mythx, it is completely free of use. It supports symbolic analysis and SMT solving for smart contracts. Mythril works on bytecode and supports multiple EVM compatible blockchains. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/crytic/echidna" rel="noopener noreferrer"&gt;Echidna&lt;/a&gt; –&lt;/strong&gt; Echidna is another famous tool developed by Crytic. It is written in Haskell and is used for Fuzz-testing Solidity contracts. It runs a series of tests against smart contracts to test their security in real-world scenarios. Echidna is modular in nature and can be extended with custom tests. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/trailofbits/manticore" rel="noopener noreferrer"&gt;Manticore&lt;/a&gt; –&lt;/strong&gt; Manticore is strictly a symbolic execution tool which is used to explore all the possible states a smart contract can reach within the range of its capacity. It also records inputs which lead a contract to a given state in case of errors.&lt;/p&gt;

&lt;p&gt;All these tools are a part of the Ethereum security toolbox, which presents them in a singular docker image. This makes it all the more convenient to set up and work with them collectively rather than installing them as separate packages.&lt;/p&gt;

&lt;h2&gt;
  
  
  Blockchain Development Frameworks
&lt;/h2&gt;

&lt;p&gt;Outside the realm of Web3, blockchain systems have a ton of uses and have been in popular use by the industry for over a decade. Since developing a blockchain system from scratch takes time and is quite expensive, the industry has collaborated and come up with solutions for developing custom blockchains using pre-existing tools and frameworks. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.hyperledger.org/use/fabric" rel="noopener noreferrer"&gt;Hyperledger Fabric&lt;/a&gt;&lt;/strong&gt; – Hosted by the Linux Foundation, Hyperledger Fabric is a permissioned blockchain platform built for the enterprise. It has a modular plug-and-play architecture and is in use by companies such as Walmart and Sony. It offers a ton of pre-built consensus mechanisms and configurations, along with the ability to add custom features on the go.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://ethereum.org/en/" rel="noopener noreferrer"&gt;Ethereum&lt;/a&gt;&lt;/strong&gt; – Ethereum is the world’s first and arguably also the most popular blockchain development framework. It offers the most advanced set of features, and a Turing complete bytecode interpreter called the EVM. Ethereum forms the basis of modern blockchain networks today and has a thriving community.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://eos.io/" rel="noopener noreferrer"&gt;EOSIO&lt;/a&gt;&lt;/strong&gt;– EOSIA is a blockchain development framework that’s been developed to meet high demands. It is a developer-friendly and highly configurable platform which is used for developing high-throughput permissioned blockchain networks. EOSIA uses C++ for smart contracts and has great community support.&lt;/p&gt;

&lt;h2&gt;
  
  
  Web3 Security Roles
&lt;/h2&gt;

&lt;p&gt;Security is about connecting the dots, protecting systems and creating dependable recovery plans. Compared to development, security roles are more serious, and given the current scarcity of talent in Web3, the demand is high. A lot of these roles have overlapping responsibilities and this makes transitioning from one role to another quite easy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Smart Contract Auditor –&lt;/strong&gt;As the name suggests, your job is to analyze smart contracts, detect vulnerabilities and bullet-proof the code before it goes for production. Additionally, some companies might also require you to mentor fellow engineers over the best security practices.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Blockchain Security Engineer –&lt;/strong&gt;As a security engineer your job is to secure the entire end to end blockchain. This includes auditing smart contracts, securing blockchain infrastructure, creating custom security tools as well as conducting in-depth research on the latest attacks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Security Lead –&lt;/strong&gt; Similar to the security engineer role, your job is to secure the entire blockchain infrastructure. But this goes well beyond that, as you are also required to create custom infosec plans, and make important decisions related to the security of the business and its clients.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources To Learn And Practice Web3 Security
&lt;/h2&gt;

&lt;p&gt;Creating a portfolio for security roles is slightly tricky as this area requires a lot of experience, and is usually not very beginner friendly. Luckily for us, there are plenty of resources online where we can practice and testify our skills for free. Moreover, a lot of these platforms offer bug-bounty programs to incentivise learning and boost participation&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.damnvulnerabledefi.xyz/" rel="noopener noreferrer"&gt;Damn Vulnerable DeFi&lt;/a&gt; – It is a hacking war-game where users/participants go through a series of smart contracts (equivalent of levels) with the purpose to either stop their functioning, drain them of funds or cause other anomalies. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://ethernaut.openzeppelin.com/" rel="noopener noreferrer"&gt;Ethernaut&lt;/a&gt; – Similar to Damn Vulnerable DeFi, Ethernaut is a hacking wargame inspired by &lt;a href="https://overthewire.org/wargames/" rel="noopener noreferrer"&gt;overthewire&lt;/a&gt;. It also has a historical catalog of some of the biggest attacks which appear as levels.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://immunefi.com/" rel="noopener noreferrer"&gt;Immunefy&lt;/a&gt; – Backed by Chainlink and Sushiswap, Immunefy is a Web3 bug bounty program founded in 2020. It offers some of the biggest bounties from major Web3 orgs that are updated frequently.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackenproof.com/" rel="noopener noreferrer"&gt;HackenProof&lt;/a&gt; – Hackenproof is Hacken’s bug hunting program. Hacken is a leading name in Web3 security, and just like Immunefy, Hackenproof offers huge bounties and is associated with big orgs like FTX and CoinGecko.&lt;/p&gt;

&lt;p&gt;If you prefer a structured way of learning then there are plenty of DAOs and Web3 cohorts which offer tutored sessions. They also have an active community which will help you along the way at every step.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://buildspace.so/" rel="noopener noreferrer"&gt;Buildspace&lt;/a&gt; – Buildspace is perhaps one of the most famous DAOs. Whether you’re experienced, just starting out or have cool ideas to work on, Buildspace is the perfect place to start with Web3 as quickly as possible.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://learnweb3.io/" rel="noopener noreferrer"&gt;Learn Web3&lt;/a&gt; –  With an active community of over 50k members (and growing), Learn Web3 is the fastest growing DAO. It offers curated learning paths and sponsored tracks to help accelerate your learning.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Thoughts
&lt;/h2&gt;

&lt;p&gt;Security is of paramount importance to every business and in order to become truly disruptive and viable, Web3 needs to become more mature. Ultimately, the success of Web3 is tied to how secure it is. And just like the internet, our requirements have to evolve and adapt to this new decentralized and transparent web.&lt;/p&gt;

&lt;p&gt;Since Web3 is extremely fast paced, to keep ourselves secure we need to stay ahead of the curve. As a security professional, you need an abstract understanding as well as nuts-and-bolts knowledge of the technology at hand. And while there’s no secret sauce to achieving complete security, an appetite for learning definitely helps.&lt;/p&gt;

</description>
      <category>blockchain</category>
      <category>web3</category>
      <category>cybersecurity</category>
      <category>smartcontracts</category>
    </item>
    <item>
      <title>Let’s Customize OpenDAX White Label Crypto Exchange Branding and Landing Page</title>
      <dc:creator>Akshat</dc:creator>
      <pubDate>Sat, 04 Jun 2022 04:26:03 +0000</pubDate>
      <link>https://forem.com/openware/lets-customize-opendax-white-label-crypto-exchange-branding-and-landing-page-5312</link>
      <guid>https://forem.com/openware/lets-customize-opendax-white-label-crypto-exchange-branding-and-landing-page-5312</guid>
      <description>&lt;p&gt;In the &lt;a href="https://dev.to/openware/lets-launch-a-crypto-exchange-brokerage-using-open-source-opendax-with-yellow-network-liquidity-42gb"&gt;previous article&lt;/a&gt;, we discussed the problems that are faced when launching an exchange, and how &lt;a href="https://www.openware.com/product/opendax"&gt;OpenDAX&lt;/a&gt; and &lt;a href="https://www.yellow.org/"&gt;Yellow Network&lt;/a&gt; solve them together. We went as far as generating a Frontend using the OpenDAX NextJs template. Today’s article is about customizing that frontend and taking a closer look at the software.&lt;/p&gt;

&lt;p&gt;Now this article assumes that you’ve been following along to our series. And while we recommend that you do so, feel free to follow along as we walk you through our exchange software. With that out of the way, let’s begin customizing our &lt;a href="https://www.npmjs.com/package/@openware/create-opendax-web-app"&gt;OpenDAX NextJs template&lt;/a&gt; and give it some personality.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exploring Our Exchange
&lt;/h2&gt;

&lt;p&gt;For better clarity, I’ve broken down our exchange’s trading interface into a set of components and labeled them with numbers. Think of them as lego pieces that you can join in different ways to create cool stuff.&lt;/p&gt;

&lt;p&gt;Now If you’ve ever used an exchange, you will find this interface to be very familiar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bvFRzqcs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kowo9fe1l08qvvxmej08.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bvFRzqcs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kowo9fe1l08qvvxmej08.png" alt="Understanding The Interface" width="880" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Sidebar
&lt;/h3&gt;

&lt;p&gt;It has routes for our settings page, the trading interface and a button to connect our wallet. On connecting the wallet, you can also see added options for the order history as well as deposit and withdraw buttons.&lt;/p&gt;

&lt;p&gt;While this component isn’t exactly essential to our exchange, it’s a convenient UI/UX design pattern. We can navigate to any screen from anywhere and this works even better on mobile as we’ll see later.&lt;/p&gt;

&lt;h3&gt;
  
  
  Chart
&lt;/h3&gt;

&lt;p&gt;At the bottom of our screen, we have the trading chart. Our chart is the star of the show, OpenDAX makes use of Trading View’s charting library to provide you with all the good features of trading view without compromise.&lt;/p&gt;

&lt;p&gt;By default, it supports all common chart patterns and indicators; tools like Fibonacci retracement and moving averages are built into it. You can also add your own indicators to this chart.&lt;/p&gt;

&lt;h3&gt;
  
  
  Orderbook
&lt;/h3&gt;

&lt;p&gt;An exchange works by connecting buyers and sellers, and the Orderbook is represents just that. In the orderbook, you can see all the buy and sell orders placed at different amounts for our currency.&lt;/p&gt;

&lt;p&gt;For now though, those are all just mock orders that are populated through the mockserver.&lt;/p&gt;

&lt;h3&gt;
  
  
  Order Creation Panel
&lt;/h3&gt;

&lt;p&gt;Lastly, we have the panel to create orders. Orders direct exchanges when and how to buy an asset for your account based on a given set of conditions.&lt;/p&gt;

&lt;p&gt;Our exchange supports the market and limit orders, in both the buy and sell direction. Market orders execute at the market rate, and the limit orders execute when our currency value reaches the limit price.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connecting The Wallet
&lt;/h2&gt;

&lt;p&gt;To explore the UI even more, we need to connect our wallets. This will give us the options to deposit and withdraw Crypto to our wallet address and several other added features to our exchange.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---K5Rn6CE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p26t5b5k3oh9kfcvs4k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---K5Rn6CE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p26t5b5k3oh9kfcvs4k.png" alt="Connecting The Wallet" width="880" height="471"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since OpenDAX is a Decentralized Exchange, the wallet is non-custodial and to work with it you need to link your existing wallet to the exchange. As of now, it supports Metamask and WalletConnect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Bh_AC46r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j0tiwv8jls1080q53ha.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Bh_AC46r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j0tiwv8jls1080q53ha.png" alt="Sidebar After Connecting The Wallet" width="325" height="918"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On expanding the sidebar, we can now see our wallet’s address as well as an option to deposit and withdraw crypto at the bottom. However, the placeholder for our logo currently sits blank as we haven’t chosen any logo yet.&lt;/p&gt;

&lt;p&gt;It’s time to change that, so let’s head over to our exchange’s settings panel to see all the available customization options.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---0t0M7C4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4tlr1pbmmpdcq19r5xf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---0t0M7C4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4tlr1pbmmpdcq19r5xf.png" alt="Tinkering With The Settings" width="880" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, we have an option to choose our exchange’s languages, currently it supports English and Russian–both of which can be toggled at the settings. We also have an option to toggle dark and light themes followed by customization and the connection type.&lt;/p&gt;

&lt;p&gt;We’ll leave the connection type as it is, and enable customization for our exchange. Now this is where the fun begins, after enabling customization you can see an icon in the shape of a color tray at the bottom-right portion of your screen; this is the menu which will help us in customizing our exchange.&lt;/p&gt;

&lt;h2&gt;
  
  
  Customizing Our Exchange
&lt;/h2&gt;

&lt;p&gt;Currently, our exchange looks quite bland and only has light and dark themes. It also lacks a logo and landing page, all of which are essential to any exchange. On clicking the color tray you can now see the different options to customize your exchange.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DAexBU-j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azi1rcsxwvz5b7qqv9y1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DAexBU-j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azi1rcsxwvz5b7qqv9y1.png" alt="Customizing Our Exchange" width="880" height="435"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Playing With The Color Palette
&lt;/h3&gt;

&lt;p&gt;Let’s begin by changing the colors of our exchange. We’ll set the primary CTA, secondary CTA and Sidebar to #31d35c, #2d314d and #2bb7da hex codes respectively. These are the colors that I’ll be using for our landing page and the logo.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KnACpOiA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axbcyzjwrrkh0o6bkd0l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KnACpOiA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axbcyzjwrrkh0o6bkd0l.png" alt="Changed Colors" width="880" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Adding A Logo
&lt;/h3&gt;

&lt;p&gt;To add a logo, head over to the logo tab in the customization menu and select a logo for the light and dark modes for your exchange. For now, let’s just select a logo for the light mode, make sure your logo is 115x30 pixels in size.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N7OO8oex--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkvtr594xezav288483p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N7OO8oex--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkvtr594xezav288483p.png" alt="Selecting The Logo" width="398" height="947"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After uploading your logo, hit save, and now we have a logo, which you can see in the sidebar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Naming Our Exchange
&lt;/h3&gt;

&lt;p&gt;It’s finally time to name our exchange, let’s head over to the ‘Platform Name’ tab and set up our exchange’s name.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Vcx9wr3B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw58f2fwfn7258avc4ns.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vcx9wr3B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw58f2fwfn7258avc4ns.png" alt="Naming Our Platform" width="880" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And there we have it, with this we’ve finished the basic customization for our exchange. It now has a theme, a logo and a name. But our exchange still lacks a landing page, which takes us to our last and final part.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Up The Landing Page
&lt;/h2&gt;

&lt;p&gt;Our app, by default, redirects to the trading screen and that’s because it lacks a landing page. The developers at &lt;a href="https://www.openware.com/"&gt;OpenWare&lt;/a&gt; have given us full freedom in choosing our own theme and design with control over every visual aspect of our exchange.&lt;/p&gt;

&lt;p&gt;However, to set up our landing page we need to get our hands dirty with a little coding. It’s time to pop-open the hood and configure our landing page internally. To make it easier, I’ve provided the code snippets which you can directly copy and paste into your exchange’s folder to make it look the same.&lt;/p&gt;

&lt;p&gt;The first step is cloning, or downloading the code from my &lt;a href="https://github.com/Akshat-Mishra101/OpenDAX-Landing-Page"&gt;repository&lt;/a&gt;. After unpacking contents of the zip file, you can see we now have the following folders.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nrpdrtWX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntwxryhdud7o3ar6ny4g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nrpdrtWX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntwxryhdud7o3ar6ny4g.png" alt="Contents of The Repo" width="802" height="222"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After unpacking the zip file, copy &lt;strong&gt;&lt;em&gt;index.tsx&lt;/em&gt;&lt;/strong&gt; present in our pages folder, and replace it with the &lt;strong&gt;&lt;em&gt;index.tsx&lt;/em&gt;&lt;/strong&gt; file in our exchange’s pages folder. Next, we need to copy all the* images* present in our &lt;strong&gt;&lt;em&gt;images&lt;/em&gt;&lt;/strong&gt; folder, and paste them into the &lt;strong&gt;&lt;em&gt;images&lt;/em&gt;&lt;/strong&gt; folder located in &lt;strong&gt;&lt;em&gt;public/images&lt;/em&gt;&lt;/strong&gt; of our exchange’s directory.&lt;/p&gt;

&lt;p&gt;The last thing we need to do is to copy the &lt;strong&gt;&lt;em&gt;Landing&lt;/em&gt;&lt;/strong&gt; folder and paste it in the &lt;strong&gt;&lt;em&gt;components&lt;/em&gt;&lt;/strong&gt; folder of our exchange. Remember to save all the files after every change and wait for NextJs to compile the files. After they are compiled, we can goto &lt;strong&gt;localhost:3001&lt;/strong&gt; to check out our exchange’s landing page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BajZwalk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj2hjdec2kya7qcqlm9t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BajZwalk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj2hjdec2kya7qcqlm9t.png" alt="The Landing Page" width="880" height="431"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And there it is, the landing page complete with our logo and the buttons to access our trading panel; you can now click on the different buttons to access all parts of our website.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;We are done with both the setup and customization of our exchange, it is now time to finally connect our frontend to the real OpenDAX backend with liquidity from the &lt;a href="https://yellow.org"&gt;Yellow network&lt;/a&gt;. This is where we’ll deploy our exchange which you can use to perform real trades.&lt;/p&gt;

&lt;p&gt;We’ll also go through our exchange’s source code to see how NextJs works in the background, and understand all the magic that happened in setting up our landing page. See you in the next article where we’ll plug the liquidity from the Yellow Network. And as always, if you have any doubts, feel free to reach out.&lt;/p&gt;

&lt;h2&gt;
  
  
  Learn Web3 &amp;amp; Dive into DeFi with Yellow Network!
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.yellow.com/"&gt;Yellow&lt;/a&gt; powered by &lt;a href="https://www.openware.com/"&gt;Openware&lt;/a&gt; is developing an unprecedented worldwide cross-chain P2P liquidity aggregator &lt;a href="https://www.yellow.org/"&gt;Yellow Network&lt;/a&gt;, designed to &lt;strong&gt;unite the crypto industry&lt;/strong&gt; and provide global remittance services actually helpful to people.&lt;/p&gt;

&lt;p&gt;Are you a &lt;strong&gt;crypto developer&lt;/strong&gt;? Check out the OpenDAX v4 &lt;a href="https://www.openware.com/product/opendax"&gt;white-label cryptocurrency exchange&lt;/a&gt; software stack on &lt;a href="https://github.com/openware/opendax"&gt;GitHub&lt;/a&gt;, designed to launch market-ready crypto exchange brokerage platforms with a built-in liquidity stream.&lt;/p&gt;

&lt;p&gt;Join the &lt;strong&gt;Yellow Community&lt;/strong&gt; and dive into the most product-oriented crypto project of this decade:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Follow &lt;a href="https://twitter.com/Yellow"&gt;Yellow Twitter&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Join &lt;a href="https://t.me/yellow_org"&gt;Yellow Telegram&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Check out &lt;a href="https://discord.com/invite/aJK3z9A2Q2"&gt;Yellow Discord&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Find us on &lt;a href="https://hackernoon.com/u/yellownetwork"&gt;Hacker Noon&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stay tuned as Yellow Network unveils the development, technology, developer tools, crypto brokerage nodes software, and community liquidity mining!&lt;/p&gt;

</description>
      <category>blockchain</category>
      <category>nextjs</category>
      <category>node</category>
      <category>fintech</category>
    </item>
    <item>
      <title>Let's Launch a Crypto Exchange Brokerage Using Open-Source OpenDAX with Yellow Network Liquidity</title>
      <dc:creator>Akshat</dc:creator>
      <pubDate>Fri, 20 May 2022 07:47:22 +0000</pubDate>
      <link>https://forem.com/openware/lets-launch-a-crypto-exchange-brokerage-using-open-source-opendax-with-yellow-network-liquidity-42gb</link>
      <guid>https://forem.com/openware/lets-launch-a-crypto-exchange-brokerage-using-open-source-opendax-with-yellow-network-liquidity-42gb</guid>
      <description>&lt;h2&gt;
  
  
  Build Your Own Crypto Exchange Using OpenDAX
&lt;/h2&gt;

&lt;p&gt;If you’ve ever attempted or at least thought of creating your own crypto exchange, it takes little research to realize that it’s not easy. This is majorly because of two reasons, one is obtaining liquidity, and the other is having an experienced developer team.&lt;/p&gt;

&lt;p&gt;Crypto exchanges are quite scarce, and their tech stack is mostly proprietary. This leaves us with two options, the first is making use of third-party libraries and components, which are often unmaintained, and the other is building your own exchange completely from scratch, which is a daunting task if you ask any developer.&lt;/p&gt;

&lt;p&gt;But an even bigger problem is obtaining liquidity, and with Crypto, it is a “Chicken and the Egg” story. An Exchange is called liquid if it has an ample amount of buyers and sellers, and this means we need users to start with to get liquidity. But to get those initial users, we need liquidity, and this is where we are stuck in an endless loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  Welcome, Yellow Network and OpenDAX
&lt;/h2&gt;

&lt;p&gt;As we discussed earlier, we are dealing with two major problems here, the problem with liquidity and the problem with infrastructure; Yellow Network and OpenDAX solve exactly that. But how?&lt;/p&gt;

&lt;p&gt;To start, &lt;a href="https://www.yellow.org/" rel="noopener noreferrer"&gt;Yellow Network&lt;/a&gt; is a Layer-3 decentralized overlay P2P network, which connects brokers together to form a giant Liquidity pool with shared order books, and solves the problem of getting liquidity to our crypto exchange altogether; other than that, it also brings in ultra-high-speed trading, which the crypto world has never seen before.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.openware.com/product/opendax" rel="noopener noreferrer"&gt;OpenDAX&lt;/a&gt; is short for Open-Source Decentralized Asset Exchange, and it is open-source software with a host of libraries to build literally any crypto trading application, and we will use it to create a Crypto exchange brokerage website. It has a customizable self-hosted platform, several templates, as well as an open-source &lt;a href="https://www.npmjs.com/package/@openware/opendax-web-sdk" rel="noopener noreferrer"&gt;OpenDAX WebSDK&lt;/a&gt;, which you can use to build some crypto projects of your own.&lt;/p&gt;

&lt;p&gt;If all this sounds too good to be true, well, because it is. Yellow Network and OpenDAX together are taking web3 to a whole new level where starting your own Crypto brokerage is easy as cake. Gone are the days when you needed a huge capital and network to start your own exchange.&lt;/p&gt;

&lt;p&gt;So, in short, Yellow Network provides liquidity, and OpenDAX provides the infrastructure. In this series of articles, we’ll learn how to set up our very own Crypto exchange using the OpenDAX platform and connect it with the Yellow Network to obtain liquidity.&lt;/p&gt;

&lt;h2&gt;
  
  
  Before We Begin
&lt;/h2&gt;

&lt;p&gt;To properly follow along with this tutorial, at the least, you need&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;NodeJs on your computer.&lt;/li&gt;
&lt;li&gt;VS Code or an equivalent code editor.&lt;/li&gt;
&lt;li&gt;Basic understanding of JavaScript.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Starting Visual Studio Code
&lt;/h2&gt;

&lt;p&gt;To launch VS Code, select a directory of your choice and open the terminal in that directory. If you’re on Mac, then in the terminal, type ‘code’ and hit enter — this should open up VS Code with the chosen directory.&lt;/p&gt;

&lt;p&gt;But If you’re on a windows system, then press shift and right-click together; this will open up the right-click menu with an ‘Open PowerShell window here’ option. After opening PowerShell, type ‘code .’ and this should launch VS Code for the selected directory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focu57xloiuaxc3d98o35.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focu57xloiuaxc3d98o35.png" alt="Launching Visual Studio Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5nsd1tj8wo9daw34wnqn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5nsd1tj8wo9daw34wnqn.png" alt="Visual Studio Code with the selected directory"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we need to launch the in-built terminal for VS Code, it provides all the features of our regular terminal plus the added convenience as you can launch as many terminals as you want, and you don’t need to switch between windows to write commands anymore.&lt;/p&gt;

&lt;p&gt;To open a terminal in VS Code, go to ‘Terminal’ in the menu bar and click on ‘New Terminal’; this should open up a terminal window at the bottom. From here on, we can start writing our commands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiftnb9cdbejkrnim7bkj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiftnb9cdbejkrnim7bkj.png" alt="Opening VS Code terminal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bootstrapping An OpenDAX Project
&lt;/h2&gt;

&lt;p&gt;OpenDAX is available as separate tools and as a complete SDK. In the following series, we’ll make use of the OpenDAX NextJs template to set up our exchange. It is a Lego-like system and gives you complete freedom of customization.&lt;/p&gt;

&lt;p&gt;To create an OpenDAX NextJs project, type the following command in the VSCode terminal, and hit enter.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npx @openware/create-opendax-web-app@latest&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fggaxuugyfgsqjiji7h7s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fggaxuugyfgsqjiji7h7s.png" alt="Starting the OpenDAX package"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This will execute our package and will set up the template for us. After executing this command, NPM will prompt you for the project template; here, we’ll keep the default option which is typescript. We are also asked for the name of our project; you can name it however you like. For the sake of this tutorial, we’ll call it ‘Crypto_Exchange.’&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp0mtklsz8i8lpq8ig560.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp0mtklsz8i8lpq8ig560.png" alt="The Starter crypto exchange template"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This process takes a while to complete, and by the end, we are left with our project’s folder. And while all these files may seem overwhelming, we don’t have to deal with them all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Starting The MockServer
&lt;/h2&gt;

&lt;p&gt;Our OpenDAX template is just the frontend interface. To actually make it functional, we need to have some sort of backend server to feed the data. That said, the OpenDAX backend is a heavy software and requires time and a lot of resources to set up.&lt;/p&gt;

&lt;p&gt;Luckily for us, though, we have something called a ‘mock-server,’ which, as the name suggests, is an imitation of a real server. It will help populate our exchange with fake data so that we can conveniently work on customizing the front end without having to start a complete platform.&lt;/p&gt;

&lt;p&gt;To start a mockserver, open a new terminal in VSCode for the project directory and type:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm explore @openware/opendax-web-sdk -- npm run mockserver&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj6qg9rawjyeolxg2gfg0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj6qg9rawjyeolxg2gfg0.png" alt="Starting The OpenDAX backend"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This spins up a mock-server at the given addresses. Notice how on the right side of this image, we have two terminals now. We have used the second terminal for spinning up our mockserver, and the first terminal is now going to be used to start the frontend.&lt;/p&gt;

&lt;h2&gt;
  
  
  Starting The OpenDAX Frontend
&lt;/h2&gt;

&lt;p&gt;With our mockserver in place, it is finally time to start our frontend to visualize our app. To start the frontend, switch back to the first terminal and execute the command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cd Crypto_Exchange&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This will change the directory to our project’s directory, where we can finally run the command to start the frontend.&lt;/p&gt;

&lt;p&gt;To start the frontend, enter the command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm run dev&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4xu14papik3r4pdeb16t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4xu14papik3r4pdeb16t.png" alt="Launching the OpenDAX frontend"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It will start the process of spinning up our frontend, which can take a couple of minutes to complete. At the end of this process, we will have our project running at localhost:3001 which we can navigate to see our project live.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsndiehdvs65vejrd6cbk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsndiehdvs65vejrd6cbk.png" alt="The Interface"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And there we have it, a trading interface complete with an orderbook and an extensive chart similar to the Trading View’s chart. Here you can create your own indicator or choose from a library of indicators.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;We’ve come to the end of this tutorial and have successfully set up our exchange’s frontend using the OpenDAX NextJS template, complete with dummy data from a mockserver.&lt;/p&gt;

&lt;p&gt;I will keep going through the OpenDAX software stack. The next few articles will be majorly focused on customizing our frontend, understanding NextJs, and finally connecting it to a real backend to make a complete Crypto brokerage software.&lt;/p&gt;

&lt;p&gt;I hope you enjoyed this tutorial. If you have any questions or have trouble sleeping — feel free to reach out :) See you in the next article where we plug the liquidity from Yellow Network into our new cool crypto exchange!&lt;/p&gt;

&lt;h2&gt;
  
  
  Learn Web3 &amp;amp; Dive into DeFi with Yellow Network!
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.yellow.com/" rel="noopener noreferrer"&gt;Yellow&lt;/a&gt; powered by &lt;a href="https://www.openware.com/" rel="noopener noreferrer"&gt;Openware&lt;/a&gt; is developing an unprecedented worldwide cross-chain P2P liquidity aggregator &lt;a href="https://www.yellow.org/" rel="noopener noreferrer"&gt;Yellow Network&lt;/a&gt;, designed to &lt;strong&gt;unite the crypto industry&lt;/strong&gt; and provide global remittance services actually helpful to people.&lt;/p&gt;

&lt;p&gt;Are you a &lt;strong&gt;crypto developer&lt;/strong&gt;? Check out the OpenDAX v4 &lt;a href="https://www.openware.com/product/opendax" rel="noopener noreferrer"&gt;white-label cryptocurrency exchange&lt;/a&gt; software stack on &lt;a href="https://github.com/openware/opendax" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;, designed to launch market-ready crypto exchange brokerage platforms with a built-in liquidity stream.&lt;/p&gt;

&lt;p&gt;Join the &lt;strong&gt;Yellow Community&lt;/strong&gt; and dive into the most product-oriented crypto project of this decade:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Follow &lt;a href="https://twitter.com/Yellow" rel="noopener noreferrer"&gt;Yellow Twitter&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Join &lt;a href="https://t.me/yellow_org" rel="noopener noreferrer"&gt;Yellow Telegram&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Check out &lt;a href="https://discord.com/invite/aJK3z9A2Q2" rel="noopener noreferrer"&gt;Yellow Discord&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Find us on &lt;a href="https://hackernoon.com/u/yellownetwork" rel="noopener noreferrer"&gt;Hacker Noon&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stay tuned as Yellow Network unveils the development, technology, developer tools, crypto brokerage nodes software, and community liquidity mining!&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>crypto</category>
      <category>node</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
