The Debut of The Econia Reference Frontend

The Easiest Way to Access the Premier Onchain Order Book

Econia Labs is pleased to announce the release of the Econia Reference Frontend — an open-sourced frontend that can simply be rebranded and customized to meet the needs of developers leveraging the Econia central limit order book for their next-gen products on Aptos.

For a simplified step-by-step tutorial see the Econia docs here.

All about the Reference Frontend

At the heart of Econia lies the philosophy of permissionless access, empowering users globally to actively participate in the DeFi space. The newly launched Econia Reference Frontend serves as a gateway, making it remarkably simple for developers, both new and seasoned, to fork the repo and seamlessly engage with the Econia protocol. This open-door approach is not just a feature but the fundamental ethos of Econia, promoting accessibility and inclusivity.

The Econia Reference Frontend’s data is proudly powered by Nodeinfra’s testnet DSS.

Forking the Reference Frontend Tutorial

The objective of The Econia Reference Frontend is to streamline the challenges encountered in product development during the initial phases of creating DeFi products. This tutorial is designed to guide developers, whether experienced or novice, through the process from forking on Git to project completion.

In this Tutorial, you will learn how to:

1. Fork The Econia Reference Frontend
2. Run the frontend locally with and without TradingView
3. Deploy the frontend on Vercel

Prerequisites:

1. VSCode, terminal, or your favorite code editor
2. Pnpm installed

Step 1: Go to The Econia Github Repo

You can either clone the repo using git commands, fork to your own github, or download the zip.

Don’t know how to clone a repository? Check out this guide from Github.

Step 2 (Optional): Pull the TradingView submodule

By default the candlestick chart functionality in the Econia reference frontend relies on the closed source TradingView Advanced Charts repository. If you do not have access to the private repository, the candlestick functionality falls back on the open source Lightweight Charts repository.

Note: Skip this part if you want to use the open source version

The TradingView Advanced Charts repository is used as a submodule in the Econia reference frontend, and is used for displaying the candlestick chart of a specific market. It is initialized at src/frontend/public/static.

In essence, adding the TradingView as a submodule is that you are cloning the TradingView repository and build it into static files. Therefore, you need to have the access rights to the TradingView repository.

To get the access rights, you have to contact the TradingView team and wait for approval.

Step 3: Open your copy of econia-frontend in your favorite code editor or in terminal

First check out the architecture of the code. You can see a diagram of components and files for each page and view here:

Step 4: Get your Project Running Locally

• Navigate to the frontend Folder

cd src/frontend

cd means “change directory” to the src/frontend directory

• Install dependencies

pnpm i # pnpm is required

pnpm is a package manager

• Copy .env.example file

cp -R .env.example .env.local

The command is copying the contents of the .env.example file to a file named .env.local. The -R flag indicates a recursive copy, which is typically used when dealing with directories.

If you take a look at the .env files you may note that the environment variable for the REST URL is set to https://aptos-testnet-econia.nodeinfra.com/. This is because Nodeinfra runs a community deployment of the Econia DSS, which provides data feeds for Econia reference frontend data.

• Run the development server

pnpm run dev

Doing so should open http://localhost:3000/ in your browser, where you’ll see the frontend for the project.

Note: Change all design, logos, and branding before publishing. Please reference the Figma to change styling.

Steps to deploy on Vercel

Vercel is a user-friendly cloud platform for frontend development and deployment. It streamlines the deployment process by automating Git-based deployments and serverless functions.

Prerequisites:

1. Github Account
2. Github Access Token

To generate a GITHUB_ACCESS_TOKEN:

1. Go to https://github.com/settings/tokens/new
2. Provide a descriptive note
3. In Expiration selection box, choose No expiration
4. In the Select scopes section, click on repo - Full control of private repositories to select all repository-related options
5. Click Generate token
6. Copy the generated token to your Vercel environment variables and name it GITHUB_ACCESS_TOKEN

Step 1: Log into Vercel

Step 2: Create a Vercel project

Import project — on your screen, click Add New button and select Project to create a new project or shortly clicks Import project to import the Github repository.

The Vercel website displays a list of repositories existing in your Github account.

Now click the Import button on the econia-frontend repository.

Step 3: Configure Project

Project Name: The project name is automatically generated, you can change it as you want.

Framework Preset: As the directory at the above path is a NextJS project then Vercel automatically detects that its Framework Preset is NextJS.

Root Directory: At the Root Directory field, click the Edit button next to it. A modal pops up and tells you to select the directory where your source code is located. Then, you must select the path econia-frontend/src/frontend and click Continue.

Build and Output Settings: Override the Install Command with the following:

Environment Preparation

To deploy on Vercel, you’ll need to set up the following environment variables:

Note: If you do not have access to TradingView submodule then you must set TRY_CLONING_TRADINGVIEW to any value other than “1”.

Environment Variables: Paste all the environment variables in .env.local or .env.example file to the table.

Note: You don’t need to copy and paste each variable at a time, just copy your file and paste into the input field.

Step 4: Deploy your project

Click the Deploy button, wait for several minutes and see the results.

Note: You may see the errors below if you do not have access to the TradingView submodule, but the website will still deploy normally!

Congrats! You will then be taken to the page hosted on vercel!

Change all design, logos, and branding before publishing. Please reference the Figma to change styling.

The release of The Econia Reference Frontend enables users to access, create, and build on top of Econia, users can harness global liquidity from every corner of the world, creating a truly interconnected and borderless financial ecosystem. The combination of permissionless access, powerful APIs and SDKs, and a user-friendly frontend, positions Econia as a trailblazer in the crypto industry, driving innovation and inclusivity in the rapidly evolving landscape of blockchain and finance.