Frontend SDK Setup Guide
Setup Guide
Setup won't work with Yarn modern. Execute the following steps with Yarn classic (v1).
First Execute the following command:
Navigate to one of our apps folders. For example the alpha app or the nextjs app:
To set up your environment:
Locate the .env.example file within the apps/alpha directory.
Rename .env.example to .env.
Update the fields in the .env file as required. Note that each chain requires a unique
HEDGER_URL
and public RPC.
For a detailed list of all deployed contracts and their corresponding Hedger URLs and deployed addresses for testing, please refer to this table:
Finally, execute the following command:
The development server will start at http://localhost:3000
NOTE: The Alpha and the Next.js application are identical, they just have different UIs.
Configuring the app
User Configuration
Supported chains are declared in the core package's src/constants/chains.ts
:
To add a chain for the user to connect to, you should select one or multiple chains from the supported chain IDs and add it to the ClientChain variable in the nextjs/constants/chains.ts
file.
Configuring the Hedger API
Navigate to the app/constants/chains/hedgers.ts
and add the chain to the HedgerInfo
,here's an example declaration:
The apiUrl
and webSocketUrl
won't change regardless of the chain because frontends listen directly to the Binance API for fetching price data.
Configuring Addresses
To ensure the frontend interacts properly with the deployed contracts, you'll need to update the constants/chains/addresses.ts
file with the appropriate contract addresses for each chain. Additionally, make sure to add any necessary contract ABIs to the /abi
folder.
Configuring Subgraphs
To fetch the balance history or order history of a user we need to determine the appropriate GraphQL subgraph URI based on the network chain ID. Then use the Apollo Client to execute a query to the subgraph. To define these youâll have to navigate to packages/core/src/apollo/client
and modify the balanceHistory.ts
and orderHistory.ts
files to reflect the new chain. For example:
Then add it as a case for the getBalanceHistoryApolloClient
function and the getOrderHistoryApolloClient
functions respectively:
Configuring Muon
Muon is used in our system for verifying the price of an asset and the uPnL of a user. Muon signatures are required by the smart contracts to execute functions related to user positions.
In most scenarios, you will not need to alter the Muon base URLs, however this can be updated from /constants/chains/misc.ts
.
MultiAccount
Frontends support creating and switching between sub-accounts via the MultiAccount
contract.
When a user interacts with the SYMM contracts through a sub-account to send or modify quotes, they'll use the _call
function on the MultiAccount
contract with the account
(the address of the sub-account) and _callData
, a bytes array. This call is forwarded to the sub-account contract through an innerCall
, which then calls the function on the diamond.
Users can select the account they desire from a drop-down menu in the header, allowing users to isolate positions across accounts, since all positions on a single sub-account are in CROSS. Users are required to provide a name as an input parameter when they create a sub-account. The hook useActiveAccountAddress
returns the subaccount address, and the useActiveWagmi
returns the wallet address.
Querying the Hedger
To optimize user experience, facilitate experimentation, and aid users in identifying the most suitable hedger for their needs, SYMMIO provides a suite of off-chain information. This information is primarily classified into two categories: APIs and Web-Sockets.
It's important to emphasize that these APIs aim to reduce user request failures. They are often subject to the hedger's policies. For example, if a hedger doesn't mandate a whitelist, then the related APIs become superfluous.
Many of the API endpoints require a MultiAccount
address as a parameter. This address refers to the address which users will interact with on the frontend for deploying sub-accounts and calling functions related to the opening and closing of positions on the SYMMIO Diamond Contract.
Hedger API
The Hedger API provides a suite of functionalities for users to help users monitor their positions. Querying the API offers valuable insights into the status of positions, total open interest, notional caps, and the capital requirements needed to initiate positions.
Some useful API endpoints are listed below:
[GET] contract-symbols
This endpoint gets the total number of symbols the hedger is offering, and returns important data pertaining to each.
Returns:
count
: The total number of trading symbols available through the hedger.symbols
: An array of objects, each representing a specific trading symbol or contract offered by the hedger. The array includes detailed information about each symbol, as outlined in the fields within each object.name
: The name or description of the trading pair (e.g. BTCUSDT).symbol
: The ticker that identifies the former part of the trading pair (e.g. BTC).asset
: The ticker that identifies the latter part of the trading pair (e.g. USDT).symbol_id
: A unique integer identifier for the symbol within the hedger's system.price_precision
: Refers to the number of decimal places to which the price of an asset can be specified.quantity_precision
: Refers to the number of decimal places to which the quantity of the asset being traded can be specified.is_valid
: A boolean indicating whether the symbol is currently valid for trading.min_acceptable_quote_value
: The minimum quote value (of collateral tokens) accepted for a trade with this symbol.min_acceptable_portion_lf
: The minimum portion that is awarded to the liquidator on liquidation.trading_fee
: The fee rate charged for trading this symbol.max_leverage
: The maximum leverage available for trading.max_notional_value
: The maximum notional value of a position.rfq_allowed
: A boolean indicating whether Request for Quote (RFQ) is allowed.max_funding_rate
: The maximum funding rate allowed.hedger_fee_open
: The hedger fee for opening a position with this symbol.hedger_fee_close
: The hedger fee for closing a position with this symbol.
Output Schema:
[GET] open-interest
This endpoint shows the cumulative OI available to hedgers, encompassing all trading symbols. It also provides information on the used capacity.
Returns:
total_cap
: The total open interest cap.used
: How much is currently in use.
Output Schema:
The getOpenInterest
function for this query can be found in the core package at src/state/hedger/thunks.ts
.
[GET] notional_cap
This endpoint shows the notional cap of a symbol provided by the hedger which represents the value of the outstanding positions that haven't yet been settled for that symbol.
Parameters:
symbolId
: The symbol ID of the pair (eg. forBTCUSDT
, thesymbolId
= 1).
Returns:
total_cap
: The total open interest cap.used
: How much is currently in use.
Output Schema:
[GET] price-range
This endpoint provides the maximum and minimum prices at which partyA
can place a limit order for a specific trading pair, ensuring execution by the hedger.
Parameters:
symbol
: The symbol (e.g. BTCUSDT).
Returns:
min_price
: The minimum price for limit orders.max_price
: The maximum price for limit orders.
Output Schema:
[GET] error_codes
To help understand the meaning of the error codes returned from querying a position state, this API fetches a list of potential error labels and their associated error codes that may arise while interacting with the hedger system. Leaving the error_code
blank returns all error codes.
Parameters:
error_code
: The error code to query.
Returns:
[GET] get_locked_params
These parameters are important because they are used when opening the quote. This method returns important values related to collateral requirements for a specified pair based on the provided parameters.
Parameters:
symbol
: The trading symbol (e.g. BTCUSDT)leverage
: The leverage applied to the position. This will affect the calculation of collateral requirements.
Returns:
cva
: Credit Valuation Adjustment. EitherpartyA
(the user) orpartyB
(the hedger) can get liquidated andcva
is the penalty that the liquidated side should pay to the other.partyAmm
: Maintenance Margin forpartyA
. The amount that is actually behind the position and is considered in liquidation status.lf
: Liquidation Fee. This will be awarded to the Liquidator that liquidates the position.leverage
: The leverage applied to the position.
Output Schema:
[GET] get_market_info
This endpoint retrieves market information for various whitelisted trading pairs, it requires the deployed MultiAccount
contract as an endpoint parameter.
api/get_market_info/
Returns:
price
: The current price of the symbol.price_change_percent
: The percentage change in price over the last 24 hours.trade_volume
: The total trading volume in USD for the last 24 hours.notional_cap
: The notional cap of the symbol.
Output Schema:
This query is used in the core package at src/state/hedger/thunks.ts
. It's used mostly for displaying data on the Market Information page.
[GET] partyA_upnl
This endpoint returns the unrealized profits and losses for a partyA
/partyA_upnl/{address}
Parameters:
address
: the sub-account address to query.
Returns:
The current uPnl for the user as a float.
[GET] get_balance_info
This API method retrieves balance information for a specified address and multi-account address. It returns detailed financial data for both parties involved, which is crucial for managing and analyzing account balances and associated parameters.
Endpoint
api/get_balance_info/${address}/${multi_account_address}
Parameters
address
: The sub-account addressmulti_account_address
: The multi-account address.
Returns
party_a: Information for party A (the user).
upnl
: Unrealized Profit and Loss .notional
: Notional value .timestamp
: Timestamp of the data.available_balance
: Available balance.allocated_balance
: Allocated balance.cva
: Credit Valuation Adjustment.lf
: Liquidation Fee.party_a_mm
: Maintenance Margin for party A.party_b_mm
: Maintenance Margin for party B.pending_cva
: Pending Credit Valuation Adjustment.pending_lf
: Pending Liquidation Fee.pending_party_a_mm
: Pending Maintenance Margin for party A.pending_party_b_mm
: Pending Maintenance Margin for party B.address
: Address of party A.
party_b: Information for party B (the counterparty).
upnl
: Unrealized Profit and Loss.notional
: Notional value.timestamp
: Timestamp of the data .available_balance
: Available balance.allocated_balance
: Allocated balance.cva
: Credit Valuation Adjustment.lf
: Liquidation Fee.party_a_mm
: Maintenance Margin for party A.party_b_mm
: Maintenance Margin for party B.pending_cva
: Pending Credit Valuation Adjustment .pending_lf
: Pending Liquidation Fee.pending_party_a_mm
: Pending Maintenance Margin for party Apending_party_b_mm
: Pending Maintenance Margin for party B.address
: Address of party B.
[GET] get_funding_info
This API method retrieves funding information for various trading pairs. It returns details about the next funding time and the funding rates for both short and long positions for each specified trading pair.
api/get_funding_info/
Parameters
This endpoint does not require any parameters to be passed in the URL.
Returns
The response contains funding information for multiple trading pairs. Each trading pair includes the following details:
next_funding_time
: The timestamp of the next funding time.next_funding_rate_short
: The next funding rate for short positions.next_funding_rate_long
: The next funding rate for long positions.
Output Schema:
[POST] position-state
This endpoint returns information regarding the state of a position, indicating if there has been any internal issue with the quote processing by returning an action_status
. It is useful for discerning any errors associated with a specific trading position.
Endpoint:
api/position-state/${start}/${size}
Parameters:
start
andsize
are utilized for pagination.
Payload: The payload for this POST request should be empty.
Returns:
create_time
: Unix timestamp indicating when the position was created.modify_time
: Unix timestamp indicating the last modification time of the position.counterparty_address
: The blockchain address of the counterparty involved in the position (this will bepartyA
)filled_amount_close
: The filled amount for closing the position, ornull
if the position has not been closed.action_status
: Indicates the success or failure status of the action, such assuccess
for successful processing.error_code
: An error code if there was an issue with processing, otherwisenull
.state_type
: The type of state the position is in.id
: A unique identifier for the position.quote_id
: The identifier for the associated quote.filled_amount_open
: The filled amount for opening the position.last_seen_action
: Describes the last action taken on the position.failure_type
: Describes the type of failure if the action was not successful, otherwisenull
.order_type
: Numeric code representing the type of order.
Output Schema:
This API is useful for displaying notifications related to a user's positions. It's applied in the getNotifications
function in the core package's src/state/notifications/thunks.ts
\
Websockets
You can use the various hedger WebSockets to stream real-time data from the hedger, ensuring that the frontend displays the most up-to-date information. Below are the most commonly used websockets:
Funding Rate WebSocket
api/ws/funding-rate-ws
Streams real-time data on the funding rates for various trading symbols.
Parameters:
string[]
- An array of symbol names for which funding rate updates are requested (e.g.,["BTCUSDT", "ETHUSDT", "XRPUSDT"]
).
Returns:
next_funding_time
: The timestamp for when the next funding rate update will occur.next_funding_rate_short
: The funding rate applied to short positions.next_funding_rate_long
: The funding rate applied to long positions.
Output Schema
The getFundingRate
function for this implements this Websocket and can be found in the core package at src/state/hedger/thunks.ts
.
Unrealized PnL WebSocket
api/ws/upnl-ws
Streams real-time data on the profit and losses of a user (This may be deprecated soon).
Parameters:
string
Address of the sub-account.
Returns:
upnl
: Unrealized profit and loss for the account's current open positions.notional
: The total notional value of the account's open positions.timestamp
: The current timestamp.available_balance
:(allocated_balance + unpl - (cva + lf))
allocated_balance
: The balance allocated to the sub account.cva
: Represents the penalty the liquidated entity must pay to the other party.lf
: Liquidation Fee. This will be awarded to the Liquidator that liquidates the position.party_a_mm
: Maintenance Margin ofpartyA
. The amount that is actually behind the position and is considered in liquidation status.party_b_mm
: Maintenance Margin ofpartyB
. The amount that is actually behind the position and is considered in liquidation status.pending_cva
: The pendingcva
pending_lf
: The pendinglf
pending_party_a_mm
: The pendingmm
forpartyA
pending_party_b_mm
: The pendingmm
forpartyB
Output Schema:
This query is implemented in the AccountUpdater
function in src/state/user/AllAccountsUpdater.tsx
.
Notification WebSocket (Position State)
api/ws/position-state-ws3
This WebSocket streams real-time data on the state of trading positions. It ensures that the frontend can display the most current information regarding the state of various trading positions.
Parameters:
address[]
: An array of counterparty addresses for which position state updates are requested.
Returns:
id
: Identifier for the position state event.create_time
: The timestamp when the position was created.modify_time
: The timestamp when the position was last modified.quote_id
: An identifier for the associated quote.counterparty_address
: The address of the counterparty involved in the position.filled_amount_open
: The amount filled for an open.filled_amount_close
: The amount filled for a ckise.last_seen_action
: The last action observed on the position.action_status
: The status of the last action (e.g., success, failure).failure_type
: The type of failure if the action was unsuccessful.error_code
: The error code if applicable.order_type
: The type of order associated with the position.state_type
: The state type of the position (e.g., alert).version
: The version of the position state data.
Output Schema:
Input Parameter:
Last updated