⚙️
Native Developers
  • Native V1
    • Overview
    • Operations
      • Single-Hop Transaction: Off-chain Pricing
      • Single-Hop Transaction: On-chain Pricing
      • Multi-Hop Transaction
      • L1 Token Swap
      • Creating a Pool
      • Updating a Pool
    • System Components
      • GUI
      • Native Backend
      • Pricer
      • Registry
      • Signer
      • Pool
      • Pool Factory
      • Treasury
      • Router
    • Smart Contracts
      • Core
        • Registry
        • NativePool
        • NativePoolFactory
        • NativeRouter
      • Liquidity Pools
    • Contract Address
    • API References
      • GET /v1/indicative-quote
      • GET /v1/orderbook
      • GET v1/firm-quote
      • GET v1/firm-quote/calldata
    • Guide
      • Get quote for ETH to USDT
      • Execute ETH to USDT swap on Native
    • Routing
  • Market Maker Integration
    • WebSocket Connection
Powered by GitBook
On this page
  • Swap Widget
  • Pool Creation Flow
  • Pool Update Flow
  1. Native V1
  2. System Components

GUI

There are 3 main graphic user interfaces (GUI) for Native:

  1. Swap widget

  2. Pool creation flow

  3. Pool update flow

Swap Widget

The swap widget is where end users will do the actual swap in the dApp's UI. Project teams can choose to use the default swap widget that Native created or create their custom widget using the Native SDK or API. Each project will have their own swap widget; these widgets are differentiated by their API keys.

API: Get wallet balance

Call the token contract directly to get the balance of the selected asset in the connected wallet

API: Get available pairs

Call Native Backend and show token pairs that has a route path between them in the token dropdown

API: Get indicative quote

Call Native Backend for the swap route and the indicative quote

API: Get signed quote

Call Native Backend for the swap route and signed data to run estimateGas() function. An average gas fee recorded in the DB would be used for the gas fee if this estimateGas() function fails for whatever reason. With the estimated gas in native token, there will be another API call to Native Backend for the native token price in USD. The final gas fee will be show in USD.

API: Get firm quote

When user clicks on swap in the widget, this Get firm quote API will be called. An order will be created in Native's database. Native Backend will return the signed data. Frontend will call the Router Contract to do the actual swap. After the transaction, the order will be updated for order tracking.

Pool Creation Flow

The pool creation flow is within the Native Admin Portal when user clicks on "New Pool".

API: Get tokens

Call for all token metadata from Native Backend and show a list of available tokens to select in the "Select Token"

API: Get recommended pricing model

Call the Native Backend for the recommend pricing model for the given trading pair

API: Create Pool

Call Native Backend to generate a new unique signer for the new pool. The Pool Factory contract will be contacted in a multicall to create and update the new pool on chain. After the on-chain pool is created, a pool with the same settings is also created in Native's database. The data is stored both on-chain and off-chain because it is faster and cheaper to access data off-chain.

Pool Update Flow

The pool update flow is within the Native Admin Portal when user clicks on "Settings" within a particular pool.

API: Update pool

When the "Update" button is pressed, the Pool contract will be contacted to update the pair configs on-chain. After the on-chain update is successful, the same settings will be updated in Native's database

PreviousSystem ComponentsNextNative Backend

Last updated 2 years ago