English
中文
日本語
한국어
русский
Türkçe
Français
Português
Español

v4 Deep Dive: Front End

Product
Product
Front End Banner
Product
Product

v4 Web Front End Deep Dive

As we approach the release of v4 mainnet open-source software, we want to provide a peek into what the dYdX team is building. We covered the v4 system architecture at a high level in a prior post here. This post dives into how the dYdX v4 open-source chain software’s (“dYdX Chain”) front end will work.

Given that v4 is still under development, please note that what is presented below is subject to change.

What Does the Web Front End Do?

The web front end provides an intuitive and performant UI/UX for traders who do not wish to interact with v4 programmatically. The web front end application will interact with the Indexer via APIs/websockets to fetch and display both on-chain and off-chain information (e.g., orderbook, account balances, etc.). Orders will be placed directly to validators.

dYdX is building three open-source front ends: a web app, an iOS app, and an Android app. We are also building Typescript and Python SDKs for power users/institutions. This post will primarily focus on the web app.

Deploying a Web Front End

dYdX will open source all front end codebases and associated deployment scripts. This will allow for anyone to easily deploy the dYdX front end via their own domain/hosting solution. 

While only one deployment of the front end is needed for clients to use the web app, having multiple deployments will make v4 more decentralized. This is a key distinction from past versions of the protocol, and one we are particularly excited about; decentralized hosting will enable access to the v4 trading experience via multiple domains.

Codebase

All of the web and mobile codebases will be hosted in open source GitHub repos. The web app is written in Typescript using React, while the Android and iOS apps are written in Kotlin and Swift, respectively. Business logic for the front end applications are shared across all platforms using packages written with Kotlin Multiplatform.

Deployment Script & Deployer Responsibilities

The front end deployment will leverage the following technologies and services:

  • IPFS - p2p file sharing protocol for distributed file sharing/storage

  • web3.storage - IPFS pinning service

  • Cloudflare - IPFS gateway and DNS resolution 

Any third party wishing to deploy and host a front end (“deployer”) will be able to do so by cloning the codebase from the Github repo, and running the deployment script. The deployment script will:

  1. Send and pin files to IPFS using web3.storage

  2. Retrieve the IPFS hash

  3. Update the DNS record of the domain name to the latest IPFS hash directly in Cloudflare (to ensure the latest content from IPFS is being pulled)

Content stored on IPFS will be accessible using the IPFS hash via any browser with native IPFS support (e.g., Brave or Opera), through a public IPFS gateway such as https://dweb.link or https://w3s.link/.

The deployment script is being built in a way to make hosting and updating the front end as easy as possible for deployers. The responsibilities of a deployer will include:

  • Acquiring and owning web domain

  • Meeting deployment prerequisites:

    • Installing Node.js 16 and npm locally

    • Setting up web3.storage account

    • Setting up Cloudflare account 

  • Initial deployment of front end

    • Download of front end codebase and deployment script from dYdX Github

    • Running deployment script to pin the files to IPFS and update the IPFS hash

  • Updating front end

    • Following the dYdX Github repos to get codebase updates

    • Running the deployment script when new codebase updates are available to pin the updated files to IPFS and update the IPFS hash

  • Setup of ancillary accounts 

About dYdX and Terms

Here at dYdX, our mission is to democratize access to financial opportunity. We believe that v4 software will represent notable progress in service of that mission. The events in the global economy that have transpired over the last year have only reinforced the need for open, transparent, and permissionless financial products. We’re excited for v4 software to better meet those needs.

If building the future of a decentralized exchange and open finance is something you’re interested in, check out what it’s like to work at dYdX and our open roles!

To ask additional questions, join the discussion on Discord, participate in the dYdX community, or follow us on Twitter. We’re excited to continue building the dYdX Chain and will continue to release updates over the coming months.

Terms and Conditions: This post is subject to the dYdX Terms of Use.  The dYdX interface and products are not available to persons or entities who reside in, are located in, are incorporated in, or have registered offices in the United States or Canada ("Blocked Persons"), or other Restricted Persons (as defined in the dYdX Terms of Use).  dYdX products and services are not intended for, and should not be used by, Blocked Persons or Restricted Persons. Terms of Use specific to v4 software can be found here.