React

Getting started

This package provides binding for omniston-sdk to the React ecosystem. Using this package, you can access all Omniston methods as hooks powered by TanStack react query (out-of-box loading states, retries, error handling, and match more)

You can find all supported methods in our docs or take a look onto our demo app that use NextJs and omniston-sdk-react package

Installation

via NPM

npm install @ston-fi/omniston-sdk-react

via YARN

yarn add @ston-fi/omniston-sdk-react

via PNPM

pnpm install @ston-fi/omniston-sdk-react

Wrap you app in Omniston provider

You can pass custom queryClient if you want to apply shared behaviour to all of the queries

import { OmnistonProvider } from "@ston-fi/omniston-sdk-react";

const App = () => (
  <OmnistonProvider
    apiUrl="wss://omni-ws.ston.fi"
  >
    {children}
  </OmnistonProvider>
);

The provider takes the following parameters:

Name	Type	Description
client	ApiClient | undefined	Optional. Provide this if you want to override the default API client. By default, this will be an ApiClient using ReconnectingTransport
apiUrl	URL | string	Omniston WebSocket API URL.

Get list of supported assets

import { useAssetList } from "@ston-fi/omniston-sdk-react";

const {
  isLoading,
  error,
  data: assetList,
  ...restQuery
} = useAssetList();

An AssetsResponse has the following properties:

Name	Type	Description
assets	AssetInfo[]	List of supported assets

An AssetInfo has the following properties:

Name	Type	Description
address	Address	Address of smart contract
tags	string[]	Asset tags
symbol	string	Asset symbol
name	string	Displayable name
image_url	string	URL to asset image
decimals	number	Number of decimal places used to represent fractional amounts of an asset
metadata	Record<string, unknown>	Additional metadata, excluding above fields

An Address has the following properties:

Name	Type	Description
blockchain	Blockchain	Blockchain type (e.g. "TON")
address	string	Address of smart contract

Send a quote request

Send a request for quote to swap an asset to another asset.

import { useRfq } from "@ston-fi/omniston-sdk-react";

const {
  isLoading,
  error,
  data: quote,
  ...restQuery
} = useRfq({
    settlementMethods: [SettlementMethod.SETTLEMENT_METHOD_SWAP],
    askAssetAddress: {
      blockchain: Blockchain.TON,
      address: "EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO", // STON
    },
    offerAssetAddress: {
      blockchain: Blockchain.TON,
      address: "EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs", // USDT
    },
    amount: {
      offerUnits: "1000000", // 1 USDT
    },
});

A QuoteRequest has the following properties:

Name	Type	Description
settlementMethods	SettlementMethod[]	Supported methods of swap settlement
askAssetAddress	Address	Blockchain-specific address of ask asset
offerAssetAddress	string	Blockchain-specific address of offer asset
amount	{ offerUnits: string } | { askUnits: string }	Either the amount of offer asset or ask asset
amount.offerUnits	string	The amount of offer asset the trader wants to pay, including all fees, in base asset units
amount.askUnits	string	The amount of ask asset the trader wants to get after all fees, in base asset units
referrerAddress	Address | undefined	The address of referrer that will receive the fees
referrerFeeBps	number | undefined	The amount of fees required by the referrer in basis points (1/10000 or 0.01%)

The server returns Observable<Quote | null>, which is a stream of quotes. Learn more about Observable types in the official RxJS documentation.

A Quote has the following properties:

Name	Type	Description
quoteId	string	ID of the quote generated by the platform
resolverId	string	ID of the resolver
resolverName	string	Name of the resolver
offerAssetAddress	Address	Blockchain-specific address of offer asset
askAssetAddress	Address	Blockchain-specific address of ask asset
offerUnits	string	The amount of offer asset the trader must pay, including all fees
askUnits	string	The amount of ask asset the trader will get after all fees
quoteTimestamp	number	The timestamp (UTC seconds) of Quote sent by resolver
referrerAddress	Address | undefined	The address of referrer that will receive the fees
referrerFeeUnits	string	The amount of fees that the referrer will get (in units of offerAssetAddress)
protocolFeeUnits	string	The amount of fees charged by the protocol (in units of offerAssetAddress).
params	object | undefined	Various parameters specific to the settlement method. See the source code for more details.

Build a transaction

Now that we have a quote, we should request a server to build a transaction to initiate the trade that the user can verify and sign.

import { useOmniston } from "@ston-fi/omniston-sdk-react";

const omniston = useOmniston();

const tx = await omniston.buildTransfer({
  quote,
  sourceAddress: {
    blockchain: Blockchain.TON,
    address: "", // sender wallet address on `offerBlockchain`
  },
  destinationAddress: {
    blockchain: Blockchain.TON,
    address: "", // receiver wallet address on `askBlockchain`
  },
  maxSlippageBps: 100, // 1%
});

const messages = tx.transaction!.ton!.messages;

The buildTransfer method takes a TransactionRequest object as a parameter, having the following properties:

Name	Type	Description
quote	Quote	The valid quote received from Omniston.requestForQuote
sourceAddress	Address	The address on offerBlockchain that will send initial transaction to start the trade
destinationAddress	Address	The address on askBlockchain that will receive result of the trade
maxSlippageBps	number	Max price slippage in basis points (1/10000 or 0.01%)

Sign the transaction

You can found the instruction on how to send transaction using the @tonconnect/ui-react package here.

import { useTonConnectUI } from "@tonconnect/ui-react";

const [tonConnect] = useTonConnectUI();

await tonConnect.sendTransaction({
  validUntil: Date.now() + 1000000,
  messages: messages.map((message) => ({
    address: message.targetAddress,
    amount: message.sendAmount,
    payload: message.payload,
  })),
});

Listen for trade status updates

After the user has signed and initiated the transaction, we can track the trade status.

import { useTrackTrade } from "@ston-fi/omniston-sdk-react";
import { useTonAddress } from "@tonconnect/ui-react";

const walletAddress = useTonAddress();

const {
  isLoading,
  error,
  data: status,
  ...restQuery
} = useTrackTrade({
  quoteId: quote.quoteId,
    traderWalletAddress: {
    blockchain: Blockchain.TON,
    address: walletAddress
  },
});

The trackTrade method has the following parameters:

Name	Type	Description
quoteId	string	ID of the quote received from Omniston.requestFromQuote
traderWalletAddress	Address	The address of trader's wallet that initiated transaction

It returns Observable<TrackTradeStatus>. For the different trade status values, see the source code. We are interested in the trade result enum which can be read from status.tradeSettled?.result? field. The enum has the following values:

Name	Description
TRADE_RESULT_FULLY_FILLED	The trade has been completed and fully filled.
TRADE_RESULT_PARTIALLY_FILLED	The trade has been partially filled. Something went wrong.
TRADE_RESULT_ABORTED	The trade has been aborted.
TRADE_RESULT_UNKNOWN
UNRECOGNIZED