Build a New Front-end Interface

Developing a new font-end website or mobile app for HollaEx based exchange is quite straightforward. As a front-end developer you need to understand how the API and websocket work and utilize those in your application.

Each exchange has a unique API Endpoint. For the HollaEx Pro exchange this URL is https://api.hollaex.com/v2 and you can access the health endpoint on https://api.hollaex.com/v2/health

Most exchanges use the following format for the API and Websocket endpoints. If your exchange url is for example myexchange.com the format to access it would be:

API: https://myexchange.com/api

Websocket: wss://myexchange.com/stream

Currently HollaEx Kit is on v2 so you need to add /v2 to the end of your API URL.

All HollaEx based exchanges also have an API explorer available on /explorer. So https://myexchange.com/api/explorer where you can find the list of all endpoints available.

User onboarding

To start the development of your front-end application you need to start from the user onboarding so here we cover Signup and Login flow:

To signup a new user you can simply use:

POST /signup with the body template below:

{
  "email": "string",
  "password": "string",
  "referral": "referralcode"
}

email and password are self explanatory. referral is optional for when the user is signing up with another users referral code.

The response should be 200 if its successful which means the user is registered. In this case user will receive a URL in his email and the URL includes a code that is used to verify the users email.

This code is valid for 5 minutes and to resend this code user should send a request to GET /verify with the users email and resend set to true. So for example:

GET /verify?email=[e-mail]&resend=true

The email by default links to the exchange domain URL and has the code in it which is used to verify the email by sending

POST /verify

Body:

{
  "email": "[e-mail]",
  "verification_code": "the code in the email URL",
  "referral": "referralcode"
  "long_term": true
}

Once that is done the users email is confirmed and the user can now login.

In order to login the front-end should send the following request:

POST /login

{
  "email": "string",
  "password": "string",
  "otp_code": "string",
  "long_term": true
}

email and password are again self explanatory. otp_code is required when the user has an OTP activated. If you do not send the otp_code the error response from the server indicates that which means in your UI flow you can ask for the otp_code to send that again in case you don't know whether user has OTP activated or not. The response would in that case be:

"message": "Invalid OTP Code"

long_term is a boolean to indicate whether the token should be issue for a longer period or not. If its set to false the token is issue for 7 days and if its set to true it would be valid for 90 days.

If all is correct you receive a JWT token which is valid for either 7 days or 90 days and it should be used for authorization. You would need to store this token in your application on the front-end for example in your localstorage on a browser to utilize for other API requests.

After the user is successfully logged in you would want to redirect the user to his dashboard and use the following endpoint:

Authentication

GET /user

This endpoint requires you to send Authorization header along with the token you receive from the login endpoint. You also need to add the word "Bearer" before the token. So the header in the request would be:

"Authorization": "Bearer your_jwt_token_from_login"

Now you are able to get the users data, his wallets as well as his balance.

Websocket

While APIs give you a very comprehensive access, certain features would need to be automatically updated on your interface for example when a user receives a deposit or when a users order gets filled or when his balance gets updated. So instead of the front-end making constants API calls to update this information you can use the websocket to get the updates.

After login you can make a request using:

wss://myexchange.com/stream?authorization=Bearer your_jwt_token_from_login

You can then send the following message which means you are interested to receive the following updates:

{"op":"subscribe","args":["trade","wallet","order","deposit","usertrade"]}

To keep the websocket open you would want to send the following message as a heartbeat to indicate that your channel is active otherwise the server might drop the websocket channel due to inactivity.

{"op":"ping"}

For other use cases and services please refer to the API explorer on your exchange URL and simply change api.hollaex.com to your exchange URL in the following example: https://api.hollaex.com/api/explorer

Logout

GET /logout along with the Authorization header would logout the users session and you can redirect the user back to the login page.

The official HollaEx Kit is written in ReactJS and the source code is available on https://github.com/hollaex/hollaex-kit/tree/master/web

Since the project is very big and has many components for a simple example you can use this front-end sample using nextjs https://github.com/hollaex/frontend-sample