User interfaces of the platform
In this document, you can find screens of user interfaces with a description of their functionality.
The main menu (upper-left corner) in the guest mode consists of
Trade buttons and a selector for a language of the platform's interfaces. By default, the language set to English. To login into the account, a user needs to go to the main menu and click the
Log In button.
The main menu for the authorized user consist of the next elements:
Profileis a button that redirects to a user profile page.
Tradeis a button that redirects to a trading page.
Walletsis a button that redirects to a page with user's funds.
Ordersis a button that redirects to a page with user's orders.
Historyis a button that redirects to a page with deposits, withdrawals and trading history.
- Language selector is a drop-down menu with a list of supported languages.
Logoutis a button that ends a session and logout the user from the platform.
In the next chapters, we will look in details on the elements of different pages and describe the functionality of the platform.
1. Login in & Sign up
Authorization window has two tabs:
SIGN IN and
SIGN UP. User can switch between login and signup forms clicking the corresponding tab.
Sign In form description:
- Email: is a field for email. A user needs to enter the email that he used to create an account on the platform. The platform does email validation.
- Password: is a field for password. A user needs to enter the password from his account.
SIGN IN button sends a login request to the platform.
Forgot your password? is a text button that brings up a form for a password reset.
If a user has enabled two-factor authentication, the platform brings up a form for 2FA code after a user-entered
To reset a forgotten password a user needs to perform the next actions:
Forgot your password?button.
FORGOT YOUR PASSWORDwindow appears.
- In the
FORGOT YOUR PASSWORDwindow user needs to enter an email that connected with his account.
- When a user entered the email he needs to click the
After receiving the request to reset the password the platform sends a letter with a reset password link to a user email.
A reset password link that a user receives on his email redirect him to the platform page and brings up the
RESET PASSWORD window. To reset the old password a user needs:
- to enter a new password in the
- to reenter the new password in the
- to click the
SENDbutton. If processing was successful, the platform updates the user's password. After that, a user can log in with a new password.
If a user wants to create account he needs to use the
SIGN UP form. In
SIGN UP form user needs to enter email, create a password and provide referral code (optionally).
Sign Up form description:
- Email: is a field where user needs to enter his email.
- Password: is a field where a user needs to enter a strong password that meets all requirements. Password must be at least 8 characters with one uppercase letter and one number. Entered password goes throw entropy check, also system do dictionary check to prevent the use of common passwords.
- Confirm password: is a field where a user needs to enter the same password.
- Referral Code: is a field for code from the referral program. Registered users can provide their referral codes for users that are going to registrate on the platform.
- Terms of Service: is a Terms of Service checkbox. If a user checked the checkbox it means that he agrees with Terms of Service provided by the platform.
After filling the form, a user needs to click
Sign up to send a registration request. If the request was successful, the platform creates an account and the user can log in using his credentials.
The profile menu consists of three windows:
My API Keys and
Account activity. Account window contains profile information and tools to manage the account.
Description of the
On the left side of the account window, shows an
UIDof a user.
UIDis a unique identifier on a user on the platform.
The next is a
Passwordfield with the button
CHANGE. Clicking the
CHANGEbutton brings up a modal window using. To change a password, a user needs to type an old password in the
Old Passwordfiled and a new password in
Confirm Passwordfields. After that, a user needs to press the
CHANGEbutton to apply password changes.
Two-factor authenticationfield shows a 2FA status and provide the ability to enable and disable 2FA. When a user clicks the switch button, the platform brings up a form with instructions. A user needs to follow instructions, fill the data and submit the form to enable 2FA.
If a user wants to disable 2FA, he needs to click the 2FA switch button. The platform brings up a window where a user needs to submit 2FA code to disable 2FA.
Referral linkis a link that a user can copy and share to affiliate new users to the platform. When an affiliate follows the referral link, the platform opens up the
Sign upform with pre-filled referral code.
Profile verificationis a list of steps that a user needs to pass to get corresponding permissions. By default, a user has to pass three steps to get all permission. The number of steps and permission on each of them can be customized before the deployment.
- Step 1 - is a step where a user needs to verify his phone number. First, a user needs to enter phone number than the platform sends SMS with verification code. Second, a user needs to submit a verification code to verify the phone number.
- Step 2 - is a step where a user needs to provide his personal information:
Date of birth.
- Level 3 - is a step where a user needs to provide a document that proofs his identity. As a proof of identity, a user can upload a photo of a passport or an identity card. Submitted documents require manual verification from the admin side.
Description of the
My API Keys window:
My API Keys is a window for API keys management. To be able to create and manage API keys, a user needs to enable 2FA.
To create a new API key a user needs to click the
Create new button, then pops up a window for 2FA code in which a user needs to enter 2FA code.
After that, a window with a new API key appears. A user needs to copy the
Access key, the
Secret key and to click the
CONFIRM button. The
Secret keyshows only once. If a user forgot or lost
Secret key, he can delete that API key and generate a new one.
The new API key appears in the
My API Keys window where a user can manage that API key. To disable an API key a user needs to click the switch button than a user needs to enter 2FA code. To delete an API key a user needs to click the
X button than a user needs to enter 2FA code.
Description of the
Account activity window:
Account activity is a window that contains information about a resent action of a user on the platform.
Field name description:
- Date: shows the date of an activity.
- Action: shows the action type performed by a user.
- Result: shows the result of an action. The result can be
- Address IP: shows the IP address of a user computer from which the action was performed.
The trading page contains components that are essential for trading. A user can customize the size and position of components of all components on the trading page.
The chart shows a graphical representation of an asset price for a certain time frame. The platform uses the TradingView chart component.
The TradingView chart is customizable and provides the next functionality to a user:
- to draw using drawing toolbar;
- to change chart timeframe and to zoom it using scroll;
- to change chart representation (Bars, Candles, Hollow Candles, Heikin Ashi, Line, Area, Baseline);
- to do chart comparison of different markets;
- to add multiple indicators to market chart;
- to undo or redo chart editing;
- to take instant snapshots. The user can save snapshot locally or share a snapshot link;
- to save chart layout;
- to change chart properties;
- to open chart in fullscreen mode.
The order book shows detailed information about orders that are waiting for fulfilment. This component resizable and can be in one of two modes: vertical and horizontal. The order book consists of
Sell orders separated by the last market price. If the order book set in the vertical mode
Sell orders located in the upper part of the order book and
Buy orders located in the lower part of the order book. If the order book set in the horizontal mode
Sell orders located on the right part of the order book and
Buy orders located on the left part of the order book. The order book consists of three columns:
Price column in the order book shows price levels of orders. If the order book in the vertical mode
Buy orders with the highest price and
Sell orders with the lowest price located next to the field of the last market price.
Amount column shows the quantity of base currency that a user wants to sell or buy at the certain price level.
Total column shows the cumulative amount of a base currency placed in the orders at a certain price level. The
Total column shows the market depth. Alongside with the
Total column, the order book has a graphical representation of the market depth in the way of coloured horizontal bars.
Below, you can find examples of the order book in vertical and horizontal mode.
A user can use the
order book to prefill the
order form with a price and an amount. A user can fill the
order form with a certain price by clicking the price field of a certain order in the
order book. A user can fill the
order form with a certain price and a certain amount by to clicking the amount field of a certain order in the
order book. Also, a user can fill the
order form with a certain price and a certain amount (that represent liquidity at a certain price level) by clicking the total field of a certain order in the
The Market depth window shows a grid with buy and sells orders at a certain price level. Market depth has two sides the left side shows Bids (coloured green) and the right side shows Asks (coloured red). On hovers pops up a window with detailed information on liquidity level of a certain price level.
The markets window shows trading pairs that are supported by the platform. Header part of the markets window contains tabs. The
All tabs show all market pairs. The rest tabs represent market pair of a certain quote currency. The table part of the market window has
- Market: shows market pairs that are supported by the platform.
- Last Price: shows the price of the last trade of a certain market pair.
- Volume: shows a cumulative trading volume of a certain pair for the last 24 hours (showed in a quote currency).
- Change: shows a change of a price in the certain market pair for the last 24 hours.
The search field allows searching for a certain market pair or a ticker.
The open orders window shows information about active orders. That window contains open orders that are related to the chosen market pair. The open window table has the next column:
- Time: shows date and time of order creation.
- Price (a quote currency): shows a price at which a user wants to buy or sell an asset.
- Amount (base currency): shows an amount that a user wants to sell or to buy.
- Value (a quote currency): shows order an approximated value of an order in a quote currency.
- Field: shows the execution percentage of an order.
X button allows cancellation of the user's open order.
4. Wallet page
?????????????????????NEED TO UPDATE BENEFICIARY INFO.
Wallet page has a list of available wallets and provide functionality for deposit and withdrawal. This page consist of two blocks. The left side block shows wallets. Wallet element contains a logo, a tiker, a full name of a currency, available balance and locked balance. The right side menu contains ‘Deposit’ and ‘Withdraw’ buttons.
When ‘Deposit’ button active right side menu shows balances, deposit address and deposit history. To make a deposit user can scan QR or can press ‘COPY’ button to copy deposit address. ‘Deposit History’ is a table with recent deposits. Deposit record contains date of deposit, status of deposit and deposited amount. Deposits with confirmation number lower than ‘Min Confirmation’ has status ‘pending’.
When ‘Withdraw’ button activate right side menu shows balances, fields for withdrawal address, withdrawal amount, 2FA code, withdraw button and withdrawal history. To be able to withdraw user needs to have a certain KYC level and need to enable 2FA. To create withdrawal request user needs to incerte his withdrawal address, amount that he wants to withdraw and 2FA code after that user has to press ‘WITHDRAW’ button. On the left side of ‘WITHDRAW’ button user can see a withdrawal fee and an amount that he will get on his wallet. ‘Withdrawal History’ is a table of a recent withdrawals. Withdrawal record contains date of withdrawal request, status of withdrawal request and withdrawal amount. Unprocessed withdrawal requests has status ‘pending’.
When a user press ‘WITHDRAW’ button a confirmation window appears. To confirm a withdrawal request a user needs to click on ‘WITHDRAW’ button if the a user wants to cancel withdrawal request he needs to press ‘CANCEL’ button.
Orders page represent user’s orders information. Page has two tabs: ‘Open’ and ‘All’. When ‘Open’ tab is active system shows open orders. When ‘All’ tab is active page shows the history of all orders. A user can cancel all open orders by clicking ‘Stop all’ button.
Field name description:
- Date: shows the time and date of order creation/last update;
- Order type: shows type of an open order;
- Pair: shows a market of an open order;
- Price: shows an order price;
- Amount: shows an amount that was placed in the order;
- Executed: shows an order amount that was executed (base currency equivalent);
- Remaining: shows an order amount to be executed (base currency equivalent);
- Cost remaining: shows remaining cost of the order to be executed (quote currency equivalent);
- Status: shows an order status. The ‘Open’ tab contains only orders with ‘Open’ status, the ‘All’ tab contains orders with statuses ‘Open’, ‘Stopped’, ‘Executed’.
- ‘X’ is a cancel button. A user is able to cancel an ‘Open’ order by clicking this button.
History page contains all historical data that related to a user account finance movement. This page has three tabs: ‘Deposit History’, ‘Withdraw History’ and ‘Trade History’.
‘Deposit history’ tab
Field name description:
- txID: shows a hash of a deposit transaction on a blockchain;
- Date: shows a date of a deposit;
- Currency: shows a ticker of deposited currency;
- Amount: shows deposited amount;
- Status: shows a deposit status. A deposit can have ‘Submitted’, ‘Accepted’, ‘Collected’, ‘Skipped’ or ‘Rejected’.
Withdrawal history tab
That tab contains all withdrawal history of a user.
Field name description:
- Address: shows a user withdrawal address;
- Date: shows a date of a withdrawal request;
- Currency: shows a currency ticker of a withdrawal request;
- Amount: shows withdrawal amount;
- ???????????????????????? DO WE HAVE IT IN 2.3 Fee: shows a fee that will be charged in case of successful withdrawal transaction;
- Status: shows a withdrawal request status. A withdrawal request can have multiple statuses:
- - Submitted status shows that exchange received a new withdrawal request for a user;
- Accepted status means that request was successfully received by the exchange and need further processing by the admin. This state assigns to withdraw requests that exceed some of the withdrawal limits;
- Processing status assigns to withdrawal requests that are preparing by exchange to be sent to a blockchain node;
- Confirming status assigns to withdrawal transaction that was written into a block on a blockchain but is waiting for 'Min Confirmations' number;
- Failed status assigns to withdrawal transaction that met some errors during the withdrawal request processing;
- Succeed status assigns to withdrawal requests that were successfully recorded on a blockchain and reached 'Min Confirmations' number;
- Rejected status means that withdrawal request was rejected by the admin. Admin has to reject withdrawal requests that breaking the exchange rules. For example, if the withdraw request exceeds a limit, then the administrator has to reject this request.
Trade history tab
That tab contains all trades history of a user.
Field name description:
- Date: shows time of a trade.
- Side: shows direction of a trade.
- Market: shows a market of a trade.
- Price: shows a price of an order execution.
- Amount: shows an amount (a base currency) that was exchanged in a trade.
- Funds: shows an amount (a quote currency) that was exchanged in a trade.