DEX

Within these short series we are going to showcase how easy it is to build a DEX on top of Injective. There is an open-sourced DEX which everyone can reference and use to build on top of Injective. For those who want to start from scratch, this is the right place to start.

The series will include:

• Setting up the API clients and environment,
• Connecting to the Chain and the Indexer API,
• Connect to a user wallet and get their address,
• Fetching Spot and Derivative markets and their orderbooks,
• Placing market orders on both spot and a derivative market,
• View all positions for an Injective address.

Setup

First, configure your desired UI framework. You can find more details on the configuration here.

To get started with the dex, we need to setup the API clients and the environment. To build our DEX we are going to query data from both the Injective Chain and the Indexer API. In this example, we are going to use the existing Testnet environment.

Let’s first setup some of the classes we need to query the data.

// filename: Services.ts
import {
  ChainGrpcBankApi,
} from "@injectivelabs/sdk-ts/client/chain";
import { getNetworkEndpoints, Network } from "@injectivelabs/networks";
import {
  IndexerGrpcSpotApi,
  IndexerGrpcDerivativesApi,
} from "@injectivelabs/sdk-ts/client/indexer";
import { 
  IndexerGrpcSpotStreamV2,
  IndexerGrpcDerivativesStreamV2
} from "@injectivelabs/sdk-ts/client/indexer";

// Getting the pre-defined endpoints for the Testnet environment
// (using TestnetK8s here because we want to use the Kubernetes infra)
export const NETWORK = Network.Testnet;
export const ENDPOINTS = getNetworkEndpoints(NETWORK);

export const chainBankApi = new ChainGrpcBankApi(ENDPOINTS.grpc);
export const indexerSpotApi = new IndexerGrpcSpotApi(ENDPOINTS.indexer);
export const indexerDerivativesApi = new IndexerGrpcDerivativesApi(
  ENDPOINTS.indexer
);

export const indexerSpotStream = new IndexerGrpcSpotStreamV2(
  ENDPOINTS.indexer
);
export const indexerDerivativeStream = new IndexerGrpcDerivativesStreamV2(
  ENDPOINTS.indexer
);

Then, we also need to setup a wallet connection to allow the user to connect to our DEX and start signing transactions. To make this happen we are going to use our @injectivelabs/wallet-strategy package which allows users to connect with a various of different wallet providers and use them to sign transactions on Injective.

// filename: Wallet.ts
import { Wallet } from "@injectivelabs/wallet-base";
import { ChainId, EvmChainId } from "@injectivelabs/ts-types";
import { WalletStrategy } from "@injectivelabs/wallet-strategy";

const chainId = ChainId.Testnet; // The Injective Chain chainId
const evmChainId = EvmChainId.Sepolia; // The EVM Chain ID

export const evmRpcEndpoint = `https://eth-sepolia.g.alchemy.com/v2/${process.env.APP_EVM_RPC_KEY}`;

export const walletStrategy = new WalletStrategy({
  chainId,
  evmOptions: {
    rpcUrl: evmRpcEndpoint,
    evmChainId,
  },
});

If we don’t want to use Ethereum native wallets, just omit the evmOptions within the WalletStrategy constructor.

Finally, to do the whole transaction flow (prepare + sign + broadcast) on Injective we are going to use the MsgBroadcaster class.

// filename: MsgBroadcaster.ts
import { Wallet } from "@injectivelabs/wallet-base";
import { MetamaskStrategy } from "@injectivelabs/wallet-evm";
import { BaseWalletStrategy, MsgBroadcaster } from "@injectivelabs/wallet-core";

const strategyArgs: WalletStrategyArguments = {}; /** define the args */
const strategyEthArgs: ConcreteEthereumWalletStrategyArgs =
  {}; /** if the wallet is an Ethereum wallet */
const strategies = {
  [Wallet.Metamask]: new MetamaskStrategy(strategyEthArgs),
};

export const walletStrategy = new BaseWalletStrategy({
  ...strategyArgs,
  strategies,
});

const broadcasterArgs: MsgBroadcasterOptions =
  {}; /** define the broadcaster args */
export const msgBroadcaster = new MsgBroadcaster({
  ...broadcasterArgs,
  walletStrategy,
});

Connect to the user’s wallet

Since we are using the WalletStrategy to handle the connection with the user’s wallet, we can use its methods to handle some use cases like getting the user’s addresses, sign/broadcast a transaction, etc. To find out more about the wallet strategy, you can explore the documentation interface and the method the WalletStrategy offers.

Note: We can switch between the “active” wallet within the WalletStrategy using the setWallet method (which is async and requires await).

// filename: WalletConnection.ts
import {
  WalletException,
  UnspecifiedErrorCode,
  ErrorType,
} from "@injectivelabs/exceptions";
import { Wallet } from "@injectivelabs/wallet-base";
import { walletStrategy } from "./Wallet.ts";

export const getAddresses = async (wallet: Wallet): Promise<string[]> => {
  await walletStrategy.setWallet(wallet);

  const addresses = await walletStrategy.getAddresses();

  if (addresses.length === 0) {
    throw new WalletException(
      new Error("There are no addresses linked in this wallet."),
      {
        code: UnspecifiedErrorCode,
        type: ErrorType.WalletError,
      }
    );
  }

  if (!addresses.every((address) => !!address)) {
    throw new WalletException(
      new Error("There are no addresses linked in this wallet."),
      {
        code: UnspecifiedErrorCode,
        type: ErrorType.WalletError,
      }
    );
  }

  // If we are using Ethereum native wallets the 'addresses' are the hex addresses
  // If we are using Cosmos native wallets the 'addresses' are bech32 injective addresses,
  return addresses;
};

Querying

After the initial setup is done, let’s see how to query (and stream) markets from the IndexerAPI, as well as user’s balances from the chain directly.

// filename: Query.ts
import  { getDefaultSubaccountId, OrderbookWithSequence } from '@injectivelabs/sdk-ts/utils'
import { StreamManagerV2 } from '@injectivelabs/sdk-ts/client/indexer'
import {
  chainBankApi,
  indexerSpotApi,
  indexerSpotStream,
  indexerDerivativesApi,
  indexerDerivativeStream,
} from './Services.ts'

export const fetchDerivativeMarkets = async () => {
  return await indexerDerivativesApi.fetchMarkets()
}

export const fetchPositions = async (injectiveAddress: string) => {
  const subaccountId = getDefaultSubaccountId(injectiveAddress)

  return await indexerDerivativesApi.fetchPositions({ subaccountId })
}

export const fetchSpotMarkets = async () => {
  return await indexerSpotApi.fetchMarkets()
}

export const fetchBankBalances = async (injectiveAddress: string) => {
  return await chainBankApi.fetchBalances(injectiveAddress)
}

export const streamDerivativeMarketOrderbook = (marketId: string) => {
  const streamManager = new StreamManagerV2({
    id: 'derivative-orderbook',
    streamFactory: () => indexerDerivativeStream.streamOrderbookV2({
      marketIds: [marketId],
      callback: (response) => {
        streamManager.emit('data', response)
      }
    }),
    onData: (orderbookUpdate) => {
      console.log(orderbookUpdate)
    },
    retryConfig: { enabled: true }
  })

  streamManager.start()
  
  return streamManager
}

export const streamSpotMarketOrderbook = (marketId: string) => {
  const streamManager = new StreamManagerV2({
    id: 'spot-orderbook',
    streamFactory: () => indexerSpotStream.streamOrderbookV2({
      marketIds: [marketId],
      callback: (response) => {
        streamManager.emit('data', response)
      }
    }),
    onData: (orderbookUpdate) => {
      console.log(orderbookUpdate)
    },
    retryConfig: { enabled: true }
  })

  streamManager.start()
  
  return streamManager
}

Once we have these functions we can call them anywhere in our application (usually the centralized state management services like Pinia in Nuxt, or Context providers in React, etc).

Transactions

Finally, let’s make some transactions. For this example, we are going to:

1. Send assets from one address to another,
2. Make a spot limit order,
3. Make a derivative market order.

// filename: Transactions.ts
import { toChainFormat } from '@injectivelabs/utils'
import {
  MsgSend,
  MsgCreateSpotLimitOrder,
  MsgCreateDerivativeMarketOrder,
} from '@injectivelabs/sdk-ts/core/modules'
import {
  spotPriceToChainPriceToFixed,
  spotQuantityToChainQuantityToFixed,
  derivativePriceToChainPriceToFixed,
  derivativeQuantityToChainQuantityToFixed,
  derivativeMarginToChainMarginToFixed,
  getDefaultSubaccountId
} from '@injectivelabs/sdk-ts/utils'

// used to send assets from one address to another
export const makeMsgSend = ({
  sender,
  recipient,
  amount,
  denom
}: {
  sender: string,
  recipient: string,
  amount: string, // human readable amount
  denom: string
}) => {
  const amount = {
    denom,
    amount: toChainFormat(amount, /** denom's decimals */).toFixed()
  }

  return MsgSend.fromJSON({
    amount,
    srcInjectiveAddress: sender,
    dstInjectiveAddress: recipient,
  })
}

// used to create a spot limit order
export const makeMsgCreateSpotLimitOrder = ({
  price, // human readable number
  quantity, // human readable number
  orderType, // OrderType enum
  injectiveAddress,
}) => {
  const subaccountId = getDefaultSubaccountId(injectiveAddress)
  const market = {
    marketId: '0x...',
    baseDecimals: 18,
    quoteDecimals: 6,
    minPriceTickSize: '', /* fetched from the chain */
    minQuantityTickSize: '', /* fetched from the chain */
    priceTensMultiplier: '', /** can be fetched from getSpotMarketTensMultiplier */
    quantityTensMultiplier: '', /** can be fetched from getSpotMarketTensMultiplier */
  }

  return MsgCreateSpotLimitOrder.fromJSON({
    subaccountId,
    injectiveAddress,
    orderType: orderType,
    price: spotPriceToChainPriceToFixed({
      value: price,
      tensMultiplier: market.priceTensMultiplier,
      baseDecimals: market.baseDecimals,
      quoteDecimals: market.quoteDecimals
    }),
    quantity: spotQuantityToChainQuantityToFixed({
      value: quantity,
      tensMultiplier: market.quantityTensMultiplier,
      baseDecimals: market.baseDecimals
    }),
    marketId: market.marketId,
    feeRecipient: injectiveAddress,
  })
}

// used to create a derivative market order
export const makeMsgCreateDerivativeMarketOrder = ({
  price, // human readable number
  margin, // human readable number
  quantity, // human readable number
  orderType, // OrderType enum
  injectiveAddress,
}) => {
  const subaccountId = getDefaultSubaccountId(injectiveAddress)
  const market = {
    marketId: '0x...',
    baseDecimals: 18,
    quoteDecimals: 6,
    minPriceTickSize: '', /* fetched from the chain */
    minQuantityTickSize: '', /* fetched from the chain */
    priceTensMultiplier: '', /** can be fetched from getDerivativeMarketTensMultiplier */
    quantityTensMultiplier: '', /** can be fetched from getDerivativeMarketTensMultiplier */
  }

  return MsgCreateDerivativeMarketOrder.fromJSON({
    orderType: orderType,
    triggerPrice: '0',
    injectiveAddress,
    price: derivativePriceToChainPriceToFixed({
      value: price,
      tensMultiplier: market.priceTensMultiplier,
      quoteDecimals: market.quoteDecimals
    }),
    quantity: derivativeQuantityToChainQuantityToFixed({
      value: quantity,
      tensMultiplier: market.quantityTensMultiplier,
    }),
    margin: derivativeMarginToChainMarginToFixed({
      value: margin,
      quoteDecimals: market.quoteDecimals,
      tensMultiplier: market.priceTensMultiplier,
    }),
    marketId: market.marketId,
    feeRecipient: injectiveAddress,
    subaccountId: subaccountId
  })

}

After we have the Messages, you can use the msgBroadcaster client to broadcast these transactions:

const response = await msgBroadcaster.broadcast({
  msgs: /** the message here */,
  injectiveAddress: signersInjectiveAddress,
})

console.log(response)

Final Thoughts

What’s left for you is to build a nice UI around the business logic explained above :)