Architecture & Design

dApp Overview

Elements of the dApp architecture

dApp Interface

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

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

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

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

Data StructureURL

Newsโ€‹

Knowledge Base

Tokens

Our token lists will eventually come directly from the API.

Contracts

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

External APIs

We currently use the following external APIs:

  1. โ€‹Coingecko API - https://www.coingecko.com/en/api โ†’ provide historical prices data on our portfolio componentโ€‹

  2. DeBank API - https://open.debank.com/ โ†’ to show your portfolio balancesโ€‹

Gelato Limit Orders

We use Gelato in the backend to feature limit orders through Pangolin's swap widget.

Subgraph

Subgraph schema for querying Pangolin Exchange's contracts

Last updated