injectivelabs / injective-helix-demo

Decentralized Derivatives Trading. Any Market. Anytime. Anywhere.

🌟 Injective Helix

Helix | The Premier Decentralized Spot and Derivatives Exchange

Get a taste of the UI

✨ Features

• Modern and intuitive design
• Trade with ease and flexibility
• Latest development and security practices
• Awesome to use!

---

📚 Getting Started

1. Clone the repository

$ git clone [email protected]:InjectiveLabs/injective-dex.git
$ cd injective-dex
$ yarn

2. Duplicate the .env.example to .env and fill in the values
3. Compile the app locally

$ yarn dev

📖 Documentation

The injective-helix is built using Nuxt and TailwindCSS and its powered by the injective-ts monorepo.

You can always boot the dex locally on your own laptop without having to set up a relayer. You can use the public network in your VITE_NETWORK .env configuration variable and run the yarn run dev command. You can find all of the available networks (i.e - predefined set of endpoints) here. Using these endpoints (from the public) network gives the 40% of the trading fees to the community spend pool.

Deployment

The injective-helix uses AWS for deployment. There is a CD pipeline set in the .github/workflow/mainnet.yml file. Deployment to AWS is done to a S3 bucket which is served through Cloudfront to the end user. Using yarn generate we are generating static html pages that are served through cloud front.

More details about how to deploy a Nuxt project can be found on their docs.

Migration to Nuxt3

We've migrated the injective-helix repo to Nuxt3 in January, 2023. To make the migration on your fork, there are couple of simple steps that you have to do:

1. Pull the latest codebase from the injective-dex repo, master branch,
2. Resolve merge conflicts on your fork,
3. Install the dependencies yarn install
4. Clean up left overs from the previous deployments yarn clean-up && rm -rf dist
5. Update your .env file and add VITE_ prefix to all of the .env variables,
6. Run the dex yarn dev

---

⛑ Support

Reach out to us at one of the following places!

• Website at injective.com
• Website at injectivelabs.org
• Twitter at @Injective
• Twitter at @InjectiveLabs
• Discord at Injective Discord
• Telegram at Injective Telegram
• Telegram at Helix Telegram

---

🔓 License

Copyright © 2021 - 2022 Injective Labs Inc. (https://injectivelabs.org/)

Originally released by Injective Labs Inc. under:
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

 

_{Powering the future of decentralized finance.}

injective-helix-demo's Issues

Quote Currency Input as Amount

Allow the user to also input the amount in the quote currency i.e. USDT with a drop-down list.

Calculator Modal for P&L - Liquidation

Add Calculator Modal for P&L - Liquidation

1. PNL
Choose Long or Short
Choose Leverage
Add Entry Price & Exit Price
Add Contract Quantity

2.Liquidation
Choose Long or Short
Choose Leverage
Add Entry Price
Add Contract Quantity
Add Margin

Incorrect "Please decrease leverage"

Can't place a 1x sell derivative limit order with a price even slightly below the mark price

Metamask ChainID error - cannot place trade

UI Request: Display full token name on the home page list

Small pet peeve but can we write out the full name of the token somewhere? For example for YFI, we probably should write Yearn Finance somewhere on the YFI/USDT page.

Example from Binance:

TradingView aggregations not working

Clicking on different time toggles does nothing. As a result, I can only see the cosmic space-time continuum via the chart now.

amount can't be smaller than 0.001 doesn't make sense

1. When the token price is high, the amount can't less than 0.001 doesn't make sense.
2. The buy button should be disabled
3. pop up a warning would be appropriate when an order is not sent to injectived

https://www.loom.com/share/edaa4ef0e6f94f7fa2c3e0a1be675dc9

MarkPrice Threshold Check

Inability to place orders due to insufficient margin.

Orders fail to be executed due to a mark price threshold check. The hypothesis is that the mark price variable takes a while to reflect the orderbook price.

Buy Order

Sell Order

Can't place an order with price smaller than 0.1

Especially price band limit does not exist.

Automatic filled amount - 0.0

When I enter 0.0 in the amount field it's filled automatically to the minimum - 0.01. I might want to buy 0.02 or 0.09. For example 0.05 BTC would cost approximately 1.5k which is a likely scenario so I have to delete the minimum filled amount and put the one I want.

Position fields require a refresh to update

When I take a position I must refresh the page to see the updated PnL, Leverage, Notional Size etc.

Applied Indicators Disappear on Refresh

All the applied indicators disappear after a refresh, is there a way to save the settings of a particular address?

Orders Disappear from the Trade History Tab

Users report that trades from the trade history tab appear and disappear every few minutes.

Two decimal places for leverage

Traders should be able to place trades with e.g. 1.23x leverage and not just 1.2x leverage.

automatically change Invalid number into integer

deposit and withdraw funds between the main account and subaccount are OK.

Automatical change an invalid number to an integer can be lethal to traders.

Say I want to sell 0.111 BTC, at a price a lot lower than the market price. but I missed the .. 0111 will be changed automatically to 111 which is smaller than the amount of BTC in my account. This will be a huge loss.

Ledger - Unable to Deposit Assets

The user is logged in with a Ledger natively but gets this error message when trying to deposit funds.

Last trade prices from 24 hr market summary, orderbook and price chart are all different

Traders will be confused by those three different last trade prices.

Log out user upon changing wallet

Log out the user when changing the wallet from MetaMask, if user signs on the DEX with wallet Y and then changes to wallet X while being connected, he can't sign txs.

This works as intended on the Equinox Staking dashboard - users are automatically logged out when they change wallets.

Trader's Portfolio

Make a portfolio page that will allow the trader to:

• See his trade and order history,
• See his open orders in all markets,
• See his open positions in all markets

[Market] Minimum price increments for orderbook aggregation

Add support for order book aggregation based on minimum price increments.

Max Slippage

Allow the user to set the maximally tolerated slippage

Implement Metrics for every API call

Including all GET requests + all Prepare/Broadcast tx requests

Market Dropdown Menu - Last Traded Price

The Last Traded Price field in the market dropdown menu does not reflect the last traded price, it seems to reflect the first trade that took place in a given market.

Subaccount Withdrawals

Add support for withdrawing from a subaccount to the Injective Chain in the deposit modal.

Decimals in Amount - BTC/USDT

The BTC/USDT derivative market allows only for 2 decimals (i.e. 0.10) in the amount input whereas every other spot/derivate market allows for 3 decimals (i.e. 0.111).

"Add Margin" button to positions

Traders need to have the ability to increase margin in their positions in order to prevent liquidation. The FE should add a button (probably somewhere next to the position) to allow them to deposit more margin.

The Msg type is:

type MsgIncreasePositionMargin struct {
	Sender                  string 
	SourceSubaccountId      string 
	DestinationSubaccountId string 
	MarketId                string 
	// amount defines the amount of margin to add to the position
	Amount sdk.Dec
}

where SourceSubaccountId is the subaccount providing the funds, DestinationSubaccountId is the subaccountID owning the position and MarketId is the marketID of the position.

Add css styling to the scrollbars

Ability to fill the amount with all the available liquidity in the orderbook

When users click on an order in the book, the input amount is filled with the exact amount of that order. Wouldn't it be better if we filled the amount with all the orders below? That would prove invaluable for someone who wants to market buy as much as possible and eat up all the liquidity so by clicking in the top order they would see how much they can buy instantly.

Round down deposit amount

Address has 10000000220.214872 USDT but FE tries to withdraw 10000000220.2149 USDT upon clicking MAX, thus resulting in an error

Allow for user-input leverage amount

The slider doesn't allow the user to specify the actual exact desired leverage amount. We should allow the user to type in the desired leverage amount.

Not sure where on the UI we should include this and how.

@achilleas-kal could you do some research and advise on where/how we should add this?

React Error in Transfers & Deposits

Occasionally the UI returns read property "reset" and "address" errors when users deposit and set allowance respectively.

Mobile UI - Ability to Lock the Dynamic Elements on the FE

Mobile experience is non-intuitive since scrolling up or down moves the objects unintentionally. We must add a "lock" button so that the elements stay static.

Add order history panel

Account Sequence Mismatch - Unable to Place Orders

I can't place orders on the DEX at all.

All UI timestamps must at least include seconds

open order panel
history trade panel
trades panel

Get rid of extra decimals on PRICE CHART

We need to correctly format the decimals of the price chart using mini price increments too? too many trailing zeros. FE needs to access to tickSize from markets in order for chronos side to render the tradable prices on chart properly.

The tickSize (i.e price decimals) should be returned in the config for the symbol (https://staking-api.injective.network:4444/api/chronos/v1/spot/symbols?symbol=inj%2Fpeggy0x69efCB62D98f4a6ff5a0b0CFaa4AAbB122e85e08)
pricescale: 1000000 and volume_precision: 6

Necessary Information Icon

The last traded price on the homepage has an unnecessary "i" icon. Let's remove this.

Refresh Needed to Display Positions

Occasionally I need to refresh the page to see the order I placed, this happen completely randomly I just follow the simple flow of executing a market order so there are no exact steps to replicate.

The below order was placed and didn't show for a few minutes, it showed only when I refreshed.

Price Surpasses Bankruptcy Price - Unable to Close Order

Last Traded Price - Cannot Place Trades

The Last Traded Price resets every few seconds and becomes 0. Moreover, when that happens, users cannot place trades when they use leverage (anything > 1). The Last Traded Price field becomes positive a few seconds afterwards and I can place trades until it becomes 0 again.

Wrong calculation of the amount for using % of your balance in the order

Currently clicking on "MAX" or any of the percentages doesn't correct the amount correctly.

The implementation we are using right now https://github.com/InjectiveLabs/injective-dex/blob/2d830ccc6e58546b95460b0d8cacb4c339fb8ecb/app/services/derivatives.ts#L573 and https://github.com/InjectiveLabs/injective-dex/blob/2d830ccc6e58546b95460b0d8cacb4c339fb8ecb/app/services/spot.ts#L409 was ported from our previous DEX which was using the average weighted price to calculate the amount, but now we have the worst price + slippage introduced, which makes the calculation wrong.

Withdraw Button - Labeled as Deposit

The button to withdraw is labeled as deposit

Fee Delegation

Fee Delegation must be activated properly from the backend.

Refresh Needed to Show Balances - Deposits & Transfers

When users transfer funds to the Injective Chain or deposit to the subaccount, they must refresh the page to reflect balances. Can we show the funds as soon as they reach without refreshing?

"Cancel All" orders

Add a "Cancel All" button on the orders panel that cancels all orders from the current market.

Fill Button for Limit Orders

Add a Fill box for Limit Orders similar to Max which will fill the Price field with the last orderbook price. This will come handy for users who want to buy or sell an asset as soon as possible but would ideally like to set a limit order to avoid high slippage.

Batch Order cancellation for spot and derivatives

The UI should allow the trader to cancel all of his open orders in a given market on the trading page. Eventually on the portfolio page, we should add a button allowing the trader to cancel all his open orders across all markets.

The new Msg types to batch cancel orders are MsgBatchCancelDerivativeOrders and MsgBatchCancelSpotOrders which are defined as follows:

// MsgBatchCancelDerivativeOrders defines the Msg/CancelDerivativeOrders response type.
type MsgBatchCancelDerivativeOrders struct {
	Sender string      
	Data   []OrderData 
}

and

// MsgBatchCancelSpotOrders defines the Msg/BatchCancelSpotOrders response type.
type MsgBatchCancelSpotOrders struct {
	Sender string      
	Data   []OrderData 
}

where the OrderData is defined as:

type OrderData struct {
	MarketId     string 
	SubaccountId string 
	OrderHash    string 
}

Positions Close Partially

Occasionally positions close partially, this could be a non-issue if there's no counterparty to take over the rest of the position.

Open position before closure

Open position after closure

Subaccount balance not updated upon order execution

Executed a market sell for 100 BNB. The subaccount balance has not been updated and I try to execute a market sell for 300 BNB, the FE allows me to input 300 BNB in the field and I can also see that I have 357 available BNB, upon executing the order I get an error message.

Upon refreshing only, the amount is updated.

Amount Calculation Error Over Certain Amounts

1700 INJ cost me 13k

2000 INJ cost me 14m