Architecture & Design

dApp Overview

Elements of the dApp architecture

dApp Interface

GitHub - pangolindex/interface: Frontend for accessing the Pangolin DexGitHub

We have linked our deployment to our branches, specifically dev and master. This means that anytime a deployment occurs on the dev branch, a deployment will automatically trigger to deploy the updates to https://dev.pangolin.exchange/ and for master it will deploy to https://app.pangolin.exchange/.

Components

GitHub - pangolindex/components: Ui Kit for PangolinGitHub

Pangolin's UI was originally a Uniswap V2 fork. As we've progressed on our multi-chain journey, it has become apparent that Uniswap's codebase was never designed to take into account a multi-chain paradigm. As part of the migration to our new UI, we've moved all our new multi-chain components into a separate repository that will allow us to decouple from the original Uniswap code incrementally.

We are firm believers in modular architecture and as such any widget you can see on Pangolin's new UI is available as a component. For example, Honeycomb allows any project to import Pangolin's customizable swap widget into their website.

Another common use case is supporting a Multi-VM-Wallet via your application. Now all you need to do is import Pangolin's wallet component.

SDK

GitHub - pangolindex/sdk: Development tools for the Pangolin ecosystemGitHub

Key thing to take note of here is the Chain interface. This interface will define each chain Pangolin is live on as well as the key contract addresses. The Interface repository will then use a specific version of the SDK in the package.json which will then dynamically display the chains that are live.

Note: We may move this data to our Directus Headless CMS in the future.

Directus Headless CMS

Directus: Open Data Platform for Headless Content Management

We use Directus for our headless CMS and deployed the following data end points:

Data Structure	URL
News
Knowledge Base
Tokens

Data Structure

URL

News

Knowledge Base

Tokens

Our token lists will eventually come directly from the API.

Contracts

exchange-contracts/contracts at main · pangolindex/exchange-contractsGitHub

Also refer to our chain-specific Contracts for Avalanche, Flare, Hedera, NEAR, and Songbird.

External APIs

We currently use the following external APIs:

Coingecko API - https://www.coingecko.com/en/api → provide historical prices data on our portfolio component
DeBank API - https://open.debank.com/ → to show your portfolio balances