- API stands for Application Programming Interface - a software that
- allows 2 or more computer programs to communicate with each other.
- These 2 programs are usually referred to as server and client.
-
-
-
- Server
-
- A server contains information required by a client, can grant
- access to this information, and performs actions with it.
-
-
- {" "}
- The server defines how it should be spoken to, what actions it
- will perform, what information it will give, and its format.{" "}
-
-
- {" "}
- All these details are usually determined in an API
- specification. For example, here is the{" "}
-
- API specification for Twitter
-
- .
-
-
-
- Client
-
- {" "}
- A client is a software program that talks to the server to
- either obtain information or ask the server to perform certain
- actions.{" "}
-
-
- {" "}
- Clients can be written in any programming language as long as
- that language can implement the communication standards
- specified by the server.{" "}
-
-
- {" "}
- The communication between a server and a client happens with the
- help of API requests, also known as API calls. The API calls are
- sent from a client to a server and back. The client and server
- can be written in different programming languages.{" "}
-
-
-
-
Here is a representation of how an API works:
-
-
-
-
Client libraries
-
- {" "}
- Client libraries are pre-written pieces of code that can be used to
- send API calls instead of writing codes from scratch.{" "}
-
-
- {" "}
- Using a client library is optional but highly recommended, as it
- makes it much easier and efficient to start working with the API.{" "}
-
-
- {" "}
- For example, configuring the correct protocol to talk to the server
- may require several steps without the client library, but using a
- ready-made code can shorten the process to just one step.{" "}
-
-
- {" "}
- A client library also makes it easier to adapt to API updates. In
- many cases, if the API has a significant update, the client library
- is updated too. The developer of the client that uses API won’t need
- to make any changes to their code and will just need to update the
- version of the client library.{" "}
-
+ API stands for Application Programming Interface - a software that allows 2 or more computer
+ programs to communicate with each other. These 2 programs are usually referred to as server and
+ client.
+
+
+
+ Server
+
+ A server contains information required by a client, can grant access to this
+ information, and performs actions with it.
+
+
+ {' '}
+ The server defines how it should be spoken to, what actions it will perform, what
+ information it will give, and its format.{' '}
+
+
+ {' '}
+ All these details are usually determined in an API specification. For example, here is
+ the{' '}
+
+ API specification for Twitter
+
+ .
+
+
+
+ Client
+
+ {' '}
+ A client is a software program that talks to the server to either obtain information or
+ ask the server to perform certain actions.{' '}
+
+
+ {' '}
+ Clients can be written in any programming language as long as that language can
+ implement the communication standards specified by the server.{' '}
+
+
+ {' '}
+ The communication between a server and a client happens with the help of API requests,
+ also known as API calls. The API calls are sent from a client to a server and back. The
+ client and server can be written in different programming languages.{' '}
+
+
+
+
Here is a representation of how an API works:
+
+
+
+
Client libraries
+
+ {' '}
+ Client libraries are pre-written pieces of code that can be used to send API calls instead of
+ writing codes from scratch.{' '}
+
+
+ {' '}
+ Using a client library is optional but highly recommended, as it makes it much easier and
+ efficient to start working with the API.{' '}
+
+
+ {' '}
+ For example, configuring the correct protocol to talk to the server may require several steps
+ without the client library, but using a ready-made code can shorten the process to just one
+ step.{' '}
+
+
+ {' '}
+ A client library also makes it easier to adapt to API updates. In many cases, if the API has a
+ significant update, the client library is updated too. The developer of the client that uses API
+ won’t need to make any changes to their code and will just need to update the version of the
+ client library.{' '}
+
+
+
+
-
-
-
- );
+ );
}
diff --git a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.jsx b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.jsx
index 1ee1c251..1a8d6160 100644
--- a/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.jsx
+++ b/src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.jsx
@@ -1,180 +1,180 @@
-import styles from "./ApiGuideTable.module.scss";
+import styles from './ApiGuideTable.module.scss';
export default function ApiGuideTable() {
- return (
-
-
-
-
API contract name
-
Category on website
-
Name on website
-
-
-
MULTUP
-
Multiply Up/Multiply Down
-
Multiply Up
-
-
-
MULTDOWN
-
Multiply Up/Multiply Down
-
Multiply Down
-
-
-
UPORDOWN
-
Stays Between/Goes Outside
-
Goes Outside
-
-
-
EXPIRYRANGE
-
Ends Between/Ends Outside
-
Ends Between
-
-
-
ONETOUCH
-
Touch/No Touch
-
Touches
-
-
-
CALLE
-
Rise/Fall Equal
-
Higher
-
-
-
LBHIGHLOW
-
Lookbacks
-
High-Low
-
-
-
ASIAND
-
Asians
-
Asian Down
-
-
-
EXPIRYRANGEE
-
-
-
-
-
DIGITDIFF
-
Digits
-
Digit Differs
-
-
-
DIGITMATCH
-
Digits
-
Digit Matches
-
-
-
DIGITOVER
-
Digits
-
Digit Over
-
-
-
PUTE
-
Rise/Fall Equal
-
Lower
-
-
-
DIGITUNDER
-
Digits
-
Digit Under
-
-
-
NOTOUCH
-
Touch/No Touch
-
Does Not touch
-
-
-
CALL
-
Up/Down
-
Higher
-
-
-
RANGE
-
Stays Between/Goes Outside
-
Stays Between
-
-
-
LBFLOATPUT
-
Lookbacks
-
High-Close
-
-
-
DIGITODD
-
Digits
-
Digit Odd
-
-
-
PUT
-
Up/Down
-
Lower
-
-
-
ASIANU
-
Asians
-
Asian Up
-
-
-
LBFLOATCALL
-
Lookbacks
-
Close-Low
-
-
-
EXPIRYMISSE
-
-
-
-
-
EXPIRYMISS
-
Ends Between/Ends Outside
-
Ends Outside
-
-
-
DIGITEVEN
-
Digits
-
Digit Even
-
-
-
TICKHIGH
-
highlowticks
-
High Tick
-
-
-
TICKLOW
-
highlowticks
-
Low Tick
-
-
-
RESETCALL
-
Reset Call/Reset Put
-
Reset Call
-
-
-
RESETPUT
-
Reset Call/Reset Put
-
Reset Put
-
-
-
CALLSPREAD
-
Call Spread/Put Spread
-
Call Spread
-
-
-
PUTSPREAD
-
Call Spread/Put Spread
-
Put Spread
-
-
-
RUNHIGH
-
Only Ups/Only Downs
-
Only Ups
-
-
-
RUNLOW
-
Only Ups/Only Downs
-
Only Downs
-
-
-
- );
+ return (
+
+
+
+
API contract name
+
Category on website
+
Name on website
+
+
+
MULTUP
+
Multiply Up/Multiply Down
+
Multiply Up
+
+
+
MULTDOWN
+
Multiply Up/Multiply Down
+
Multiply Down
+
+
+
UPORDOWN
+
Stays Between/Goes Outside
+
Goes Outside
+
+
+
EXPIRYRANGE
+
Ends Between/Ends Outside
+
Ends Between
+
+
+
ONETOUCH
+
Touch/No Touch
+
Touches
+
+
+
CALLE
+
Rise/Fall Equal
+
Higher
+
+
+
LBHIGHLOW
+
Lookbacks
+
High-Low
+
+
+
ASIAND
+
Asians
+
Asian Down
+
+
+
EXPIRYRANGEE
+
+
+
+
+
DIGITDIFF
+
Digits
+
Digit Differs
+
+
+
DIGITMATCH
+
Digits
+
Digit Matches
+
+
+
DIGITOVER
+
Digits
+
Digit Over
+
+
+
PUTE
+
Rise/Fall Equal
+
Lower
+
+
+
DIGITUNDER
+
Digits
+
Digit Under
+
+
+
NOTOUCH
+
Touch/No Touch
+
Does Not touch
+
+
+
CALL
+
Up/Down
+
Higher
+
+
+
RANGE
+
Stays Between/Goes Outside
+
Stays Between
+
+
+
LBFLOATPUT
+
Lookbacks
+
High-Close
+
+
+
DIGITODD
+
Digits
+
Digit Odd
+
+
+
PUT
+
Up/Down
+
Lower
+
+
+
ASIANU
+
Asians
+
Asian Up
+
+
+
LBFLOATCALL
+
Lookbacks
+
Close-Low
+
+
+
EXPIRYMISSE
+
+
+
+
+
EXPIRYMISS
+
Ends Between/Ends Outside
+
Ends Outside
+
+
+
DIGITEVEN
+
Digits
+
Digit Even
+
+
+
TICKHIGH
+
highlowticks
+
High Tick
+
+
+
TICKLOW
+
highlowticks
+
Low Tick
+
+
+
RESETCALL
+
Reset Call/Reset Put
+
Reset Call
+
+
+
RESETPUT
+
Reset Call/Reset Put
+
Reset Put
+
+
+
CALLSPREAD
+
Call Spread/Put Spread
+
Call Spread
+
+
+
PUTSPREAD
+
Call Spread/Put Spread
+
Put Spread
+
+
+
RUNHIGH
+
Only Ups/Only Downs
+
Only Ups
+
+
+
RUNLOW
+
Only Ups/Only Downs
+
Only Downs
+
+
+
+ );
}
diff --git a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
index 30f63759..4f624a5f 100644
--- a/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
+++ b/src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx
@@ -1,20 +1,20 @@
-import React from "react"
-import { Link } from "react-router-dom";
-import ApiGuideTable from "../ApiGuideTable/ApiGuideTable";
-import CodeBlockSingleLanguage from "../../../global/CodeBlock/CodeBlockSingleLanguage";
-import styles from "../ApiGuide.module.scss";
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ApiGuideTable from '../ApiGuideTable/ApiGuideTable';
+import CodeBlockSingleLanguage from '../../../global/CodeBlock/CodeBlockSingleLanguage';
+import styles from '../ApiGuide.module.scss';
-import ticksJSON from "../../../../../public/demos/json/ticks.json";
-import nestedJSON from "../../../../../public/demos/json/nested.json";
-import statusJSON from "../../../../../public/demos/json/status.json";
-import schemaJSON from "../../../../../public/demos/json/schema.json";
+import ticksJSON from '../../../../../public/demos/json/ticks.json';
+import nestedJSON from '../../../../../public/demos/json/nested.json';
+import statusJSON from '../../../../../public/demos/json/status.json';
+import schemaJSON from '../../../../../public/demos/json/schema.json';
-import apiPlaygroundImg from "../../../../../img/api-playground.png";
-import showJSONSchemaImg from "../../../../../img/show-json-schema.png";
-import apiTokenPageImg from "../../../../../img/api-token-page.png";
-import readAccessImg from "../../../../../img/read-access.png";
-import howOauthWorksImg from "../../../../../img/how-oauth-works.png";
-import signupImg from "../../../../../img/signup.png";
+import apiPlaygroundImg from '../../../../../img/api-playground.png';
+import showJSONSchemaImg from '../../../../../img/show-json-schema.png';
+import apiTokenPageImg from '../../../../../img/api-token-page.png';
+import readAccessImg from '../../../../../img/read-access.png';
+import howOauthWorksImg from '../../../../../img/how-oauth-works.png';
+import signupImg from '../../../../../img/signup.png';
export const DerivGuideContent = () => {
const tickContent = JSON.stringify(ticksJSON, null, 2);
@@ -24,378 +24,309 @@ export const DerivGuideContent = () => {
return (
-
The Deriv API
-
- What can you do with the Deriv API?
-
-
- The Deriv API allows you to perform nearly all functions of the
- Deriv platforms, since they share the same API. For our CFD
- platforms (Deriv MT5 and Deriv X), the API functionality is only
- available for some account management actions.
-
-
Our API users typically perform the following activities:
-
-
-
- Build websites similar to Deriv but with different features.
-
-
-
-
- Create desktop apps to execute trades for themselves and their
- clients.
-
-
-
-
Explore historical tick information.
-
-
-
Automate services as payment agents.
-
-
-
- How can you earn with Deriv API?
-
-
-
-
- You can earn commission on trades and payments your clients
- perform via the websites and apps you create with Deriv API. Get
- more details about the commission plans{" "}
-
- here
-
- .{" "}
-
-
-
-
- You can also earn from markups on every contract purchased via a
- trading app you created with Deriv API. The markup is defined by
- you and can be up to 5%.
-
-
-
-
Here is an example of how the markup is calculated:
-
+
The Deriv API
+
What can you do with the Deriv API?
+
+ The Deriv API allows you to perform nearly all functions of the Deriv platforms, since they share
+ the same API. For our CFD platforms (Deriv MT5 and Deriv X), the API functionality is only available
+ for some account management actions.
+
+
Our API users typically perform the following activities:
+
+
+
Build websites similar to Deriv but with different features.
+
+
+
Create desktop apps to execute trades for themselves and their clients.
+
+
+
Explore historical tick information.
+
+
+
Automate services as payment agents.
+
+
+
How can you earn with Deriv API?
+
+
+
+ You can earn commission on trades and payments your clients perform via the websites and
+ apps you create with Deriv API. Get more details about the commission plans{' '}
+
+ here
+
+ .{' '}
+
+
+
+
+ You can also earn from markups on every contract purchased via a trading app you created
+ with Deriv API. The markup is defined by you and can be up to 5%.
+
+
+
+
Here is an example of how the markup is calculated:
+
+
+ To get a payout of 2 USD:
+
+
+ Client stake without markup = 1.07 USD
+
+
With the markup (e.g. 2%), a client pays:
+
Client's stake with the markup = Stake + (payout x markup)
+
+ Client's stake with the markup = 1.07 USD + (2 USD x 2%) = 1.11 USD
+
+ Should you run into any difficulties using it or if you need assistance, please contact us via one
+ of our support forums or via email.
+
+
+
+
Technical specifications of the Deriv API
+
+ It is only possible to communicate with the Deriv API using WebSockets; it does not support other
+ protocols. Any data passed to the Deriv API should be in JSON format, while the comprehensive
+ all-in-one client library is available in JavaScript and Python.
+
+
WebSockets
+
+ The WebSockets protocol is an advanced version of the communication channel that is available in all
+ popular programming languages. It allows the server to send information to the client and maintain
+ the connection without the client requesting it every time.
+
+
+ In comparison, APIs using REST over HTTP don't maintain a connection to the client once the server
+ has replied to it.
+
+
+ The WebSockets protocol provides clients with a faster and more efficient way to receive updated
+ information as soon as it becomes available. For example, you can subscribe to account balance
+ updates and the Deriv servers will send the new balance to your client in real time.
+
+
+ A client can also subscribe and receive several types of different information simultaneously over a
+ single connection.
+
+
+ For more information on how to write a client using WebSockets, visit this{' '}
+ guide.
+
+
JSON
+
+ JavaScript Object Notation (JSON) is a data format based on JavaScript. However, it is completely
+ language-independent, and can be used by any modern programming language. JSON has a good balance
+ between being readable by humans and by machines, making it both user-friendly and
+ computer-efficient.
+
+
+ Here is an example of the JSON formatted code, where “ticks” is the name of the attribute and
+ “R_100” is the value of that attribute.
+
+
+
+
+
+
+ Data in JSON can also be nested, so if you wanted to send user information with an address, it could
+ look like:
+
+
+
+
+
+ When you are writing an API client, you will write something like{' '}
+ print address.street_number
+ (depending on the programming language) to print the street number.
+
+
This nesting can have as many levels as required to convey the information.
+
+ For example, when we send information about account status, it requires several levels to print
+ information (print authentication.identity.services.manual) about
+ the manual Identity service status:
+
+
+
+
+
JSON Schemas
+
+ JSON Schema is a defined format for the JSON messages used to describe their structure to Deriv API
+ users. In a nutshell, it’s a standardised way of explaining what a JSON request should look like using
+ JSON itself.
+
+
+ Here is an example of the part of the JSON Schema that is used to tell developers what to send when they
+ request the balance of an account:
+
+
+
+
+
+ You can see that the balance is a required attribute, the value must equal 1, and the account is an
+ optional attribute. But if you choose to send it, it must be a string (word) and has to match the
+ described pattern.
+
+
+ JSON Schemas on Deriv are divided into schemas we accept (request) and schemas we send (response). You
+ can find the detailed JSON schemas for each API call on our API Explorer.
+
+
+
+
+
To see the raw JSON schemas, click on the braces within each call.
+
+
+
+
The JSON Schema also forms the documentation for the API Explorer.
+
Authorisation
+
+ Third-party developers can authorise calls to the API in two different ways: via API token or via
+ OAuth2.
+
+
API token
+
+ An API token is a unique identifier of a client that requests access from a server. It's the simplest
+ way of authorisation.
+
+
+ The Deriv API token has to be generated by a client{' '}
+ here, along with setting the appropriate access
+ level.
+
+
+
+
+
+ The access level for each API token has to match the required access level of each API call, which can
+ be found in the API Explorer as well.
+
+
+ For example, on the screenshot below, you can see that to be able to use the Account Status, a token
+ with read access level must be used.
+
+
+
+
+
+ Following the authorisation of a WebSocket connection, subsequent calls on that connection will be
+ considered user actions.
+
+
+ Please bear in mind that the API token can be used with any app, so both your app and your clients need
+ to keep it secure.
+
+
OAuth2
+
+ OAuth stands for Open Authorisation - a protocol that allows a client access resources hosted on a
+ server on behalf of the user without revealing the credentials.
+
+
+ This type of authorisation allows clients to log in to third-party apps using their Deriv accounts
+ without creating an API token. In this case, the third-party app does not see the user's password or
+ permanent API token, which makes it safer.
+
+
+ The OAuth2 authentication requires more steps to set up, but it is the safest way for developers to
+ share access to their app with their clients.
+
+
+ For more information on OAuth2, visit{' '}
+ this guide.
+
+
Here is the visual representation of how the OAuth authorisation connection works:
+
+
+
+
What do you need to do to use OAuth authorisation for Deriv API?
+
+
+
+ Specify the URL that will be used as the OAuth Redirect URL on the{' '}
+ API registration page in the 'Website
+ URL' field.
+
+
+
+
+ Add a login button on your website or app and direct users to{' '}
+ https://oauth.binary.com/oauth2/authorize?app_id=your_app_id where your_app_id is the ID
+ of your app.
+
+
+
+
+
+
+
+ Once a user signs up, they will be redirected to the URL that you entered as the Redirect URL. This URL
+ will have arguments added to it with the user's session tokens, and will look similar to this:
+
In the parameters of the URL you will see all the accounts and the session token for each account.
+
+
+ Pass these tokens to the Authorize API call in order to perform actions on behalf of the account.
+
+
+
Performing trades via Deriv API
+
+ You can perform a simple contract purchase with a code from our list of examples on the{' '}
+ quick start page.
+
- To get a payout of 2 USD:
+ However, while the simple example will work for most cases, it does not perform any checks to see if the
+ asset is available for purchase or show the potential payout if they proceed with the purchase.
-
- Client stake without markup = 1.07 USD
-
-
With the markup (e.g. 2%), a client pays:
-
Client's stake with the markup = Stake + (payout x markup)
-
- Client's stake with the markup = 1.07 USD + (2 USD x 2%) ={" "}
- 1.11 USD
-
- Should you run into any difficulties using it or if you need
- assistance, please contact us via one of our support forums or via{" "}
- email.
-
-
-
-
- Technical specifications of the Deriv API
-
-
- It is only possible to communicate with the Deriv API using
- WebSockets; it does not support other protocols. Any data passed to
- the Deriv API should be in JSON format, while the comprehensive
- all-in-one client library is available in JavaScript and Python.
-
-
WebSockets
-
- The WebSockets protocol is an advanced version of the communication
- channel that is available in all popular programming languages. It
- allows the server to send information to the client and maintain the
- connection without the client requesting it every time.
-
-
- In comparison, APIs using REST over HTTP don't maintain a connection
- to the client once the server has replied to it.
-
-
- The WebSockets protocol provides clients with a faster and more
- efficient way to receive updated information as soon as it becomes
- available. For example, you can subscribe to account balance updates
- and the Deriv servers will send the new balance to your client in
- real time.
-
-
- A client can also subscribe and receive several types of different
- information simultaneously over a single connection.
-
-
- For more information on how to write a client using WebSockets,
- visit this guide.
-
-
JSON
-
- JavaScript Object Notation (JSON) is a data format based on
- JavaScript. However, it is completely language-independent, and can
- be used by any modern programming language. JSON has a good balance
- between being readable by humans and by machines, making it both
- user-friendly and computer-efficient.
-
-
- Here is an example of the JSON formatted code, where “ticks” is the
- name of the attribute and “R_100” is the value of that attribute.
-
-
-
-
-
-
- Data in JSON can also be nested, so if you wanted to send user
- information with an address, it could look like:
-
-
-
-
-
- When you are writing an API client, you will write something like{" "}
- print address.street_number
- (depending on the programming language) to print the street number.
-
-
- This nesting can have as many levels as required to convey the
- information.
-
-
- For example, when we send information about account status, it
- requires several levels to print information (
-
- print authentication.identity.services.manual
-
- ) about the manual Identity service status:
-
-
-
-
-
JSON Schemas
-
- JSON Schema is a defined format for the JSON messages used to describe
- their structure to Deriv API users. In a nutshell, it’s a standardised
- way of explaining what a JSON request should look like using JSON
- itself.
-
-
- Here is an example of the part of the JSON Schema that is used to tell
- developers what to send when they request the balance of an account:
-
-
-
-
-
- You can see that the balance is a required attribute, the value must
- equal 1, and the account is an optional attribute. But if you choose
- to send it, it must be a string (word) and has to match the described
- pattern.
-
-
- JSON Schemas on Deriv are divided into schemas we accept (request) and
- schemas we send (response). You can find the detailed JSON schemas for
- each API call on our API Explorer.
-
-
-
-
-
- To see the raw JSON schemas, click on the braces within each call.
-
-
-
-
-
- The JSON Schema also forms the documentation for the API Explorer.
-
-
Authorisation
-
- Third-party developers can authorise calls to the API in two different
- ways: via API token or via OAuth2.
-
-
API token
-
- An API token is a unique identifier of a client that requests access
- from a server. It's the simplest way of authorisation.
-
-
- The Deriv API token has to be generated by a client{" "}
- here, along with
- setting the appropriate access level.
-
-
-
-
-
- The access level for each API token has to match the required access
- level of each API call, which can be found in the{" "}
- API Explorer as well.
-
-
- For example, on the screenshot below, you can see that to be able to
- use the Account Status, a token with read access level must be used.
-
-
-
-
-
- Following the authorisation of a WebSocket connection, subsequent
- calls on that connection will be considered user actions.
-
-
- Please bear in mind that the API token can be used with any app, so
- both your app and your clients need to keep it secure.
-
-
OAuth2
-
- OAuth stands for Open Authorisation - a protocol that allows a client
- access resources hosted on a server on behalf of the user without
- revealing the credentials.
-
-
- This type of authorisation allows clients to log in to third-party
- apps using their Deriv accounts without creating an API token. In this
- case, the third-party app does not see the user's password or
- permanent API token, which makes it safer.
-
-
- The OAuth2 authentication requires more steps to set up, but it is the
- safest way for developers to share access to their app with their
- clients.
-
-
- For more information on OAuth2, visit{" "}
- this guide.
-
-
- Here is the visual representation of how the OAuth authorisation
- connection works:
-
-
-
-
-
- What do you need to do to use OAuth authorisation for Deriv API?
-
-
-
- Specify the URL that will be used as the OAuth Redirect URL on the{" "}
-
- API registration
- {" "}
- page in the 'Website URL' field.
+ To receive this additional information, you can perform several steps once you are authorised and before
+ purchasing the contract.
-
-
+
+
+ Call Active Symbols to get the list of active symbols.
+
+ Call Price Proposal to get the current payout level for the
+ contract. Setting "subscribe": 1 gives regular updates.
+
+
+ Call Buy Contract with the ID given in the Price Proposal to open a
+ trade. Note the contract_id from the response. Setting “subscribe” : 1 will send you updates on the
+ contracts status as Proposal Open Contract{' '}
+ responses.
+
+
+ Monitor the “is_sold” attribute of the Proposal Open Contract response to see when the
+ contract is finished. Once the contract is finished, you can check the “status” attribute to
+ see if the contract has been won or lost.
+
+
+
Table mapping
+
Deriv website contract types to API parameter names
- Add a login button on your website or app and direct users to{" "}
-
- https://oauth.binary.com/oauth2/authorize?app_id=your_app_id
- {" "}
- where your_app_id is the ID of your app.
+ If you would like to copy certain contract types from our websites, the following table will describe
+ how the contract type is referred to using the API.
-
-
-
-
-
-
- Once a user signs up, they will be redirected to the URL that you
- entered as the Redirect URL. This URL will have arguments added to it
- with the user's session tokens, and will look similar to this:
-
- In the parameters of the URL you will see all the accounts and the
- session token for each account.
-
-
-
- Pass these tokens to the Authorize API call in order to perform
- actions on behalf of the account.
-
-
-
- Performing trades via Deriv API
-
-
- You can perform a simple contract purchase with a code from our list
- of examples on the quick start page.
-
-
- However, while the simple example will work for most cases, it does
- not perform any checks to see if the asset is available for purchase
- or show the potential payout if they proceed with the purchase.
-
-
- To receive this additional information, you can perform several steps
- once you are authorised and before purchasing the contract.
-
-
-
- Call Active Symbols to get the list of active symbols.
-
- Call Price Proposal to get the current payout level for the
- contract. Setting "subscribe": 1 gives regular updates.
-
-
- Call Buy Contract with the ID given in the Price Proposal to
- open a trade. Note the contract_id from the response. Setting
- “subscribe” : 1 will send you updates on the contracts status as{" "}
- Proposal Open Contract responses.
-
-
- Monitor the “is_sold” attribute of the{" "}
- Proposal Open Contract response to see when the contract is
- finished. Once the contract is finished, you can check the{" "}
- “status” attribute to see if the contract has been won or
- lost.
-
-
-
Table mapping
-
Deriv website contract types to API parameter names
-
- If you would like to copy certain contract types from our websites,
- the following table will describe how the contract type is referred to
- using the API.
-
-
- Paste your API token with the admin scope here.
-
+ Paste your API token with the admin scope here.
@@ -126,8 +124,8 @@ export default function AppRegistrationForm() {
Markup
- You can earn commission by adding a markup to the price of each trade. Enter your
- markup percentage here.
+ You can earn commission by adding a markup to the price of each trade. Enter
+ your markup percentage here.
@@ -173,8 +171,8 @@ export default function AppRegistrationForm() {
OAuth details
- This allows clients to log in to your app using their Deriv accounts without an API
- token.
+ This allows clients to log in to your app using their Deriv accounts without an
+ API token.
@@ -242,9 +240,7 @@ export default function AppRegistrationForm() {
Scope of authorisation
-
- Select the scope for your app:
-
+ Select the scope for your app:
+ );
}
diff --git a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx
index 021cf46a..d7708a46 100644
--- a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx
+++ b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx
@@ -1,41 +1,38 @@
-import { useSelector } from "@xstate/react";
-import { lazy, Suspense } from "react";
-import {
- isRegisterSuccessSelector,
- isUpdateModeSelector,
-} from "../../../../state/selectors";
-import { stateService } from "../../../../state/stateSignal";
+import { useSelector } from '@xstate/react';
+import { lazy, Suspense } from 'react';
+import { isRegisterSuccessSelector, isUpdateModeSelector } from '../../../../state/selectors';
+import { stateService } from '../../../../state/stateSignal';
-const Modal = lazy(() => import("../../../global/Modal/Modal"));
+const Modal = lazy(() => import('../../../global/Modal/Modal'));
export default function RegisterAppDialogSuccess() {
- const isModalOpen = useSelector(stateService, isRegisterSuccessSelector);
- const isUpdateMode = useSelector(stateService, isUpdateModeSelector);
- const description = isUpdateMode
- ? "Your app has been updated successfully."
- : "You have successfully registered your application. You can now start using Deriv API.";
- const primaryButtonText = isUpdateMode ? null : "Manage application";
- if (!isModalOpen) {
- return null;
- }
- const closeModal = () => {
- stateService.send("CLOSE_MODAL");
- };
- return (
- }>
- {
- stateService.send("MANAGE_TOGGLE_TAB");
- }}
- onSecondaryButtonClick={closeModal}
- />
-
- );
+ const isModalOpen = useSelector(stateService, isRegisterSuccessSelector);
+ const isUpdateMode = useSelector(stateService, isUpdateModeSelector);
+ const description = isUpdateMode
+ ? 'Your app has been updated successfully.'
+ : 'You have successfully registered your application. You can now start using Deriv API.';
+ const primaryButtonText = isUpdateMode ? null : 'Manage application';
+ if (!isModalOpen) {
+ return null;
+ }
+ const closeModal = () => {
+ stateService.send('CLOSE_MODAL');
+ };
+ return (
+ }>
+ {
+ stateService.send('MANAGE_TOGGLE_TAB');
+ }}
+ onSecondaryButtonClick={closeModal}
+ />
+
+ );
}
diff --git a/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx b/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
index 8ef8efe3..0dae9682 100644
--- a/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
+++ b/src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx
@@ -1,22 +1,14 @@
-import { send } from "../../../../state/stateSignal";
+import { send } from '../../../../state/stateSignal';
export default function RegisteredAppTabs() {
- return (
-
-
-
-
- );
+ return (
+
+
+
+
+ );
}
diff --git a/src/components/bounty/Bounty/Bounty.jsx b/src/components/bounty/Bounty/Bounty.jsx
index ed48caa1..34656431 100644
--- a/src/components/bounty/Bounty/Bounty.jsx
+++ b/src/components/bounty/Bounty/Bounty.jsx
@@ -1,44 +1,32 @@
-import styles from "./Bounty.module.scss";
-import Button from "../../global/Button/Button";
+import styles from './Bounty.module.scss';
+import Button from '../../global/Button/Button';
export default function BugBounty() {
- return (
-
-
Bug bounty
-
-
- Want to help us enhance our security?
+ return (
+
+
Bug bounty
+
+
Want to help us enhance our security?
+
+ Test our products and services for security vulnerabilities and earn a monetary reward for any
+ verifiable issues that you find, courtesy of our bug bounty programme.
+
- Test our products and services for security vulnerabilities and earn a
- monetary reward for any verifiable issues that you find, courtesy of
- our bug bounty programme.
-
- );
+ );
}
diff --git a/src/components/build-your-app/BuildYourApp/BuildYourApp.tsx b/src/components/build-your-app/BuildYourApp/BuildYourApp.tsx
index c931bb2e..529cbad1 100644
--- a/src/components/build-your-app/BuildYourApp/BuildYourApp.tsx
+++ b/src/components/build-your-app/BuildYourApp/BuildYourApp.tsx
@@ -1,31 +1,57 @@
-import { oauthUrl } from "../../../global-functions/appRegistrationEffects";
+import { oauthUrl } from '../../../global-functions/appRegistrationEffects';
export default function BuildYourApp() {
return (
Build your app
1. Open a Deriv account
-
Sign up for a Deriv account (either a demo or a real account) at no charge.
+
+ Sign up for a Deriv account (either a demo or a real account)
+ at no charge.
+
2. Create an API token
-
To gain access to the Deriv API, you'll need an API token with the Admin scope. We'll use this token to tag your application to your Deriv account.
+
+ To gain access to the Deriv API, you'll need an API token with the Admin scope. We'll use this token
+ to tag your application to your Deriv account.
+
+ Select the Admin scope, enter a name for your token, and click{' '}
+ Create.
+
+
+ Your API token will appear in the list at the bottom of the screen. You'll need it for the next
+ step.
+
3. Register your application
-
You'll get your app ID when you register your application. With this app ID and the API token from the previous step, your application can talk to the Deriv API. Also, whenever you need support, just quote your app ID when talking to our Customer Support team.
+
+ You'll get your app ID when you register your application. With this app ID and the API token from
+ the previous step, your application can talk to the Deriv API. Also, whenever you need support, just
+ quote your app ID when talking to our Customer Support team.
+
Follow these steps to register your application:
-
-
Log in to your Deriv account and complete this form. Remember the API token you created during the previous step? You'll need it in this step.
-
After your application is registered, it will appear in the Manage existing applications tab. You may now delete your API token.
+
+
+ Log in to your Deriv account and{' '}
+ complete this form. Remember the API token you created during
+ the previous step? You'll need it in this step.
+
+
+ After your application is registered, it will appear in the{' '}
+ Manage existing applications tab. You may now delete your API token.
+
- )
+ );
}
diff --git a/src/components/docs/Docs/Docs.jsx b/src/components/docs/Docs/Docs.jsx
index e55f86f5..32c5a573 100644
--- a/src/components/docs/Docs/Docs.jsx
+++ b/src/components/docs/Docs/Docs.jsx
@@ -1,20 +1,20 @@
-import { Outlet } from "react-router-dom";
-import { Suspense } from "react";
-import Sidebar from "./Sidebar/Sidebar";
-import "../../../index.scss";
-import DelayedFallback from "../../global/DelayedFallback/DelayedFallback";
+import { Outlet } from 'react-router-dom';
+import { Suspense } from 'react';
+import Sidebar from './Sidebar/Sidebar';
+import '../../../index.scss';
+import DelayedFallback from '../../global/DelayedFallback/DelayedFallback';
function Docs() {
- return (
-
- );
+ );
};
export default Sidebar;
diff --git a/src/components/faq/Faq/Faq.jsx b/src/components/faq/Faq/Faq.jsx
index c2014dec..8f3dd6ef 100644
--- a/src/components/faq/Faq/Faq.jsx
+++ b/src/components/faq/Faq/Faq.jsx
@@ -1,156 +1,136 @@
-import React from "react";
-import Accordion from "../../global/Accordion/Accordion";
-import AccordionItem from "../../global/Accordion/AccordionItem";
-import styles from "./Faq.module.scss";
-import CodeContent from "../../global/CodeBlock/CodeContent";
+import React from 'react';
+import Accordion from '../../global/Accordion/Accordion';
+import AccordionItem from '../../global/Accordion/AccordionItem';
+import styles from './Faq.module.scss';
+import CodeContent from '../../global/CodeBlock/CodeContent';
const FAQ = () => {
- return (
-
-
-
FAQ
-
-
-
- View our code samples.
- You can use these code snippets in your app to open a connection
- to our WebSocket API service. Explore our
- API explorer for the method calls
- you need for your app.
-
-
-
-
- Simply copy our open-source code and adapt it for your needs.
- Follow these steps to get started:
-
- Sign up as a{" "}
-
- payment agent
- {" "}
- to process local payments for our clients in your country. You
- may automate your payment agent facility using the{" "}
-
- paymentagent_transfer
- {" "}
- API call.
-
-
- If you are prepared to offer higher contract prices than ours,
- you may add a markup percentage when you
- register your app. This is
- a percentage of contract payouts, and it’s added to all contract
- prices in your app. The aggregate markup is paid to you around
- the 15th of every month. Sign up as our affiliate and contact
- your Affiliate Manager to learn more.
-
-
-
-
-
- This means we will treat the value of this property as confidential,
- and will never return it in any API response. It is used for
- passwords and tokens.
-
-
-
-
- Copy trading allows a client (the Copier) to automatically copy
- the trades of another client (the Trader).
-
-
- To allow others to copy your trades, set the ‘allow_copiers’
- setting via the{" "}
- set settings call.
-
-
- The Trader may create a read-only API token and provide it to the
- Copier.
-
-
- Enabling ‘allow_copiers’ will also make the copytrading statistics
- call available. The statistics call provides the information about
- an account. This is so that potential copiers have an idea about
- the trader’s past performance.
-
-
- To start copying, use the{" "}
- copy start call. To stop
- copying, use copy stop.
-
-
-
-
- Use the website status{" "}
- call to check whether the website is online or not.
-
-
-
-
- This JavaScript code opens a WebSocket and makes a subscription
- for server status notifications. When a message is received, it
- sends the website status message, if available:
-
-
+
+
FAQ
+
+
+
+ View our code samples. You can use these code
+ snippets in your app to open a connection to our WebSocket API service. Explore our
+ API explorer for the method calls you need for your app.
+
+
+
+
+ Simply copy our open-source code and adapt it for your needs. Follow these steps to get
+ started:
+
+ Sign up as a payment agent to
+ process local payments for our clients in your country. You may automate your payment
+ agent facility using the{' '}
+
+ paymentagent_transfer
+ {' '}
+ API call.
+
+
+ If you are prepared to offer higher contract prices than ours, you may add a{' '}
+ markup percentage when you
+ register your app. This is a percentage of contract
+ payouts, and it’s added to all contract prices in your app. The aggregate markup is paid
+ to you around the 15th of every month. Sign up as our affiliate and contact your
+ Affiliate Manager to learn more.
+
+
+
+
+
+ This means we will treat the value of this property as confidential, and will never return
+ it in any API response. It is used for passwords and tokens.
+
+
+
+
+ Copy trading allows a client (the Copier) to automatically copy the trades of another client
+ (the Trader).
+
+
+ To allow others to copy your trades, set the ‘allow_copiers’ setting via the{' '}
+ set settings call.
+
+
The Trader may create a read-only API token and provide it to the Copier.
+
+ Enabling ‘allow_copiers’ will also make the copytrading statistics call available. The
+ statistics call provides the information about an account. This is so that potential copiers
+ have an idea about the trader’s past performance.
+
+
+ To start copying, use the copy start call. To stop
+ copying, use copy stop.
+
+
+
+
+ Use the website status call to check whether the
+ website is online or not.
+
+
+
+
+ This JavaScript code opens a WebSocket and makes a subscription for server status
+ notifications. When a message is received, it sends the website status message, if
+ available:
+
- Personalise your trading apps to match your needs. Create
- charts and views the way you like them. Develop your trading
- app using any common programming language and extend your
- trading opportunities.
+ Personalise your trading apps to match your needs. Create charts and views the way you
+ like them. Develop your trading app using any common programming language and extend
+ your trading opportunities.
- Create your own trading apps by taking advantage of the power
- of Deriv's trading services. Share your apps with fellow
- traders or customers, and get a chance to earn more or build
- your own business.
+ Create your own trading apps by taking advantage of the power of Deriv's trading
+ services. Share your apps with fellow traders or customers, and get a chance to earn
+ more or build your own business.
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/homepage/ClientLibraries/ClientLibraries.tsx b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
index 7d8cfda7..b3f93aab 100644
--- a/src/components/homepage/ClientLibraries/ClientLibraries.tsx
+++ b/src/components/homepage/ClientLibraries/ClientLibraries.tsx
@@ -1,22 +1,21 @@
-import styles from "./ClientLibraries.module.scss";
+import styles from './ClientLibraries.module.scss';
export const ClientLibraries = () => {
return (
-
-
+
+
-
Comprehensive all-in-one client library
-
- Simplify your development processes and get your app up and
- running
+
Comprehensive all-in-one client library
+
+ Simplify your development processes and get your app up and running
faster with the client library of your choice.
- Deriv API gives you full access to all the trading
- functionalities of DTrader and allows you to build your own
- comprehensive trading systems and analysis tools.
+ Deriv API gives you full access to all the trading functionalities of DTrader and allows you
+ to build your own comprehensive trading systems and analysis tools.
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/homepage/HeroHeader/HeroHeader.tsx b/src/components/homepage/HeroHeader/HeroHeader.tsx
index 9eaf4e90..5c3e152d 100644
--- a/src/components/homepage/HeroHeader/HeroHeader.tsx
+++ b/src/components/homepage/HeroHeader/HeroHeader.tsx
@@ -1,15 +1,14 @@
-import styles from "./HeroHeader.module.scss";
+import styles from './HeroHeader.module.scss';
export const HeroHeader = () => {
return (
Deriv API
- Use our powerful, flexible, and free API to build a custom trading{" "}
-
+ Use our powerful, flexible, and free API to build a custom trading
platform - for yourself or for your business.
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/homepage/Homepage/Homepage.jsx b/src/components/homepage/Homepage/Homepage.jsx
index ab21cdd8..1d79b93e 100644
--- a/src/components/homepage/Homepage/Homepage.jsx
+++ b/src/components/homepage/Homepage/Homepage.jsx
@@ -1,26 +1,26 @@
-import { HomepageFooter } from "../HomepageFooter/HomepageFooter"
-import { HeroHeader } from "../HeroHeader/HeroHeader";
-import { ClientLibraries } from "../ClientLibraries/ClientLibraries"
-import { HomepageSlider } from "../HomepageSlider/HomepageSlider";
-import { Benefits } from "../Benefits/Benefits";
-import { WaysToEarn } from "../WaysToEarn/WaysToEarn"
-import { GetStarted } from "../GetStarted/GetStarted"
-import { DerivApiFeatures } from "../DerivApiFeatures/DerivApiFeatures"
-import { RenderOfficialDomainContents } from "../../utility/RenderOfficialDomainContents/RenderOfficialDomainContents";
+import { HomepageFooter } from '../HomepageFooter/HomepageFooter';
+import { HeroHeader } from '../HeroHeader/HeroHeader';
+import { ClientLibraries } from '../ClientLibraries/ClientLibraries';
+import { HomepageSlider } from '../HomepageSlider/HomepageSlider';
+import { Benefits } from '../Benefits/Benefits';
+import { WaysToEarn } from '../WaysToEarn/WaysToEarn';
+import { GetStarted } from '../GetStarted/GetStarted';
+import { DerivApiFeatures } from '../DerivApiFeatures/DerivApiFeatures';
+import { RenderOfficialDomainContents } from '../../utility/RenderOfficialDomainContents/RenderOfficialDomainContents';
export default function HomePage() {
- return (
-
{
- Probably the best API for making your business successful in trading derivatives out
- there.
+ Probably the best API for making your business successful in trading derivatives
+ out there.
}
author={
@@ -183,4 +183,4 @@ export const HomepageSlider = () => {
- Register your app with Deriv, and add a percentage markup to
- the contract prices to profit from every purchased contract.
+ Register your app with Deriv, and add a percentage markup to the contract prices to profit
+ from every purchased contract.
- Sign up as an affiliate, build your app, and get commissions
- on trades completed via your app and the affiliate plan you
- select.
+ Sign up as an affiliate, build your app, and get commissions on trades completed via your
+ app and the affiliate plan you select.
- Sign up as a payment agent, build your own custom payment
- website, and use our API to earn commission on every payment
- you process for Deriv’s clients.
+ Sign up as a payment agent, build your own custom payment website, and use our API to earn
+ commission on every payment you process for Deriv’s clients.
The easiest way to understand how Deriv API works is to try our Tick call:
-
-
We'll start with the ticks example because it's a pretty simple block of code to implement. You don't have to log into the Deriv account and get your app authenticated to try it.
-
A tick is a measure of minimum upward or downward movement in the price of a trading commodity. We subscribe to the ticks functionality from the Deriv API websocket, which will return new tick data every second. As an example you could create an interactive tick graph with this data.
The easiest way to understand how Deriv API works is to try our Tick call:
+
+
+ We'll start with the ticks example because it's a pretty simple block of code to implement. You don't have
+ to log into the Deriv account and get your app authenticated to try it.
+
+
+ A tick is a measure of minimum upward or downward movement in the price of a trading commodity. We subscribe
+ to the ticks functionality from the Deriv API websocket, which will return new tick data every second. As an
+ example you could create an interactive tick graph with this data.
+
);
export default QuickStart;
diff --git a/src/components/utility/FeatureFlag/FeatureFlag.jsx b/src/components/utility/FeatureFlag/FeatureFlag.jsx
index 65e713f1..a3d1e996 100644
--- a/src/components/utility/FeatureFlag/FeatureFlag.jsx
+++ b/src/components/utility/FeatureFlag/FeatureFlag.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useUrlParams } from '../../../custom-hooks/useUrlParams';
-export default function FeatureFlag({children, is_feature, feature_name}) {
+export default function FeatureFlag({ children, is_feature, feature_name }) {
const [selected_child, setSelectedChild] = React.useState(0);
const url_params = useUrlParams();
@@ -20,13 +20,9 @@ export default function FeatureFlag({children, is_feature, feature_name}) {
setSelectedChild(0);
}
}
- })
- return (
-
- { children[selected_child] }
-
- )
- }
-
- return
+ });
+ return {children[selected_child]};
+ };
+
+ return ;
}
diff --git a/src/components/utility/FeatureFlag/README.md b/src/components/utility/FeatureFlag/README.md
index 4b6c4186..c0ffa2e8 100644
--- a/src/components/utility/FeatureFlag/README.md
+++ b/src/components/utility/FeatureFlag/README.md
@@ -1,19 +1,20 @@
## Feature flag implementation
+
To use the feature flag wrapper component, do the following:
Example 1: making a new feature component that replaces loose content.
-
-
I am the default content that can be replaced by the new feature.
-
more content...
-
-
+
+
I am the default content that can be replaced by the new feature.
+
more content...
+
+
Example 2: Replacing a single component.
-
-
+
+
Keep in mind, that the new feature should always be the second child in the featureflag wrapper in order for it to work.
@@ -37,4 +38,4 @@ api.deriv.com?MyFeature=on
Another example with multiple features:
api.deriv.com?MyFeature=on&MySecondFeature=off&MyThirdFeature=on
-This way you can toggle multiple features at once.
\ No newline at end of file
+This way you can toggle multiple features at once.
diff --git a/src/components/utility/RenderOfficialDomainContents/RenderOfficialDomainContents.tsx b/src/components/utility/RenderOfficialDomainContents/RenderOfficialDomainContents.tsx
index f08853cf..3e343cff 100644
--- a/src/components/utility/RenderOfficialDomainContents/RenderOfficialDomainContents.tsx
+++ b/src/components/utility/RenderOfficialDomainContents/RenderOfficialDomainContents.tsx
@@ -1,9 +1,9 @@
-import { useSelector } from "@xstate/react";
-import { stateService } from "../../../state/stateSignal";
+import { useSelector } from '@xstate/react';
+import { stateService } from '../../../state/stateSignal';
import { isThirdPartyHostSelector } from '../../../state/selectors';
export const RenderOfficialDomainContents = ({ Component }) => {
const is_third_party_host = useSelector(stateService, isThirdPartyHostSelector);
-
- return is_third_party_host ? <> :
-}
\ No newline at end of file
+
+ return is_third_party_host ? <> : ;
+};
diff --git a/src/components/utility/SandboxIframe/SandboxIframe.jsx b/src/components/utility/SandboxIframe/SandboxIframe.jsx
index de091013..1b082ba8 100644
--- a/src/components/utility/SandboxIframe/SandboxIframe.jsx
+++ b/src/components/utility/SandboxIframe/SandboxIframe.jsx
@@ -12,25 +12,32 @@ export const sandboxes = {
contracts_for_symbol: `${url_base}contracts_for_symbol`,
profit_table: `${url_base}profit_table`,
portfolio: `${url_base}portfolio`,
- keep_alive:`${url_base}keep_alive`,
+ keep_alive: `${url_base}keep_alive`,
proposal_open_contract: `${url_base}open_contracts`,
proposal: `${url_base}proposal`,
- statement: `${url_base}statement`
-}
+ statement: `${url_base}statement`,
+};
export const SandboxIframe = ({ sandbox }) => {
-
- const sandbox_url_attributes = "?autoresize=1&runonclick=1&codemirror=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Findex.js&theme=darkveiw&view=split"
+ const sandbox_url_attributes =
+ '?autoresize=1&runonclick=1&codemirror=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Findex.js&theme=darkveiw&view=split';
return (
-
- ,
- ],
- textFieldset: ["API Token"],
- labelButton: ["Authenticate"],
- titleRegister: ["Register your app"],
+ title: ['App registration'],
+ textFirstPart: ['Authenticate your API token before using it in your app.'],
+ textSecondPart: [''],
+ textFocus: ['Looking for your API token?'],
+ button: [
+
+
Retrieve a list of all currently active symbols (underlying markets upon which contracts are available for trading).
,
- after:
The data contains market and submarket information related to the symbol. In case you want to retrieve active symbols for a specific landing company, you can add landing_company to the request object.
- }
+ before: (
+
+ Retrieve a list of all currently active symbols (underlying markets upon which contracts are
+ available for trading).
+
+ ),
+ after: (
+
+ The data contains market and submarket information related to the symbol. In case you want to
+ retrieve active symbols for a specific landing company, you can add landing_company to the request
+ object.
+
Request the website status. From the API response you will be able to look into general settings like call limits, currencies information, supported languages and much more.
,
- after: null
- }
+ before: (
+
+ Request the website status. From the API response you will be able to look into general settings
+ like call limits, currencies information, supported languages and much more.
+
This example is for getting a contract proposal. You'll be able to get the price, payout and spot value for your contract. To keep this connection alive in case of inactivity timeouts, see the example for Keep alive.
- }
+ after: (
+
+ This example is for getting a contract proposal. You'll be able to get the price, payout and spot
+ value for your contract. To keep this connection alive in case of inactivity timeouts, see the
+ example for Keep alive.
+
In this example you'll see how to keep a connection alive when getting contract proposals via the Deriv API. This example keeps the connection alive by sending a ping every 30 seconds.
,
- after: null
- }
+ before: (
+
+ In this example you'll see how to keep a connection alive when getting contract proposals via the
+ Deriv API. This example keeps the connection alive by sending a ping every 30 seconds.
+
+ ),
+ after: null,
+ },
},
};
// future sandbox route objects can be added and filtered from this sandboxes object.
const sandboxes = {
implement_now: implement_now_sandboxes,
-}
+};
// This function will return an object of selected (path parameter) sandbox page routes
-export const sandboxRoutes = (path) => {
+export const sandboxRoutes = path => {
let sandbox_routes = [];
- const path_converted_to_key = path.replace(/-/g, "_");
+ const path_converted_to_key = path.replace(/-/g, '_');
const sandbox_keys = Object.keys(sandboxes);
- const path_is_sandbox_key = sandbox_keys.includes(path_converted_to_key)
+ const path_is_sandbox_key = sandbox_keys.includes(path_converted_to_key);
const sandbox_entries = Object.entries(sandboxes[path_converted_to_key]);
if (path_is_sandbox_key) {
for (const [key, sandbox] of sandbox_entries) {
- const path_name = key.replace(/_/g, "-") // spaced words in the URL path use hyphens, not underscores.
+ const path_name = key.replace(/_/g, '-'); // spaced words in the URL path use hyphens, not underscores.
// populate array with route objects (array of objects)
- sandbox_routes = [...sandbox_routes, {
- path: path_name,
- label: sandbox?.title,
- element:
- }];
+ ),
+ },
+ ];
}
}
return sandbox_routes;
-}
+};
diff --git a/src/routes-data/sidebar-routes.jsx b/src/routes-data/sidebar-routes.jsx
index 43bd1889..5b9173a6 100644
--- a/src/routes-data/sidebar-routes.jsx
+++ b/src/routes-data/sidebar-routes.jsx
@@ -45,7 +45,7 @@ export const sidebar_routes = [
path: '',
element: ,
},
- ...sandboxRoutes('implement_now')
+ ...sandboxRoutes('implement_now'),
],
},
{
@@ -81,11 +81,11 @@ export const sidebar_routes = [
},
],
},
- ]
+ ],
},
];
-const ImplementDropdown = (props) => {
+const ImplementDropdown = props => {
const location = useLocation();
const split_current_location = location.pathname.split('/');
const last_path = split_current_location[split_current_location.length - 1];
@@ -118,11 +118,13 @@ const ImplementDropdown = (props) => {
{items.label}
- )
+ );
})}
)}
@@ -133,13 +135,13 @@ const ImplementDropdown = (props) => {
function LinkComponent({ route, path }) {
const { pathname } = useLocation();
- const getLastPathString = (split_path_or_pathname) => {
+ const getLastPathString = split_path_or_pathname => {
// if the pathname is for example .../docs/, last item in array will be '', so have to do - 2.
// if pathname is .../docs, the last item in the array will be 'docs'. so, I can do - 1.
return split_path_or_pathname[split_path_or_pathname.length - 1] !== ''
? split_path_or_pathname[split_path_or_pathname.length - 1]
: split_path_or_pathname[split_path_or_pathname.length - 2];
- }
+ };
const path_is_pathname = getLastPathString(pathname.split('/')) === getLastPathString(path.split('/'));
@@ -149,16 +151,13 @@ function LinkComponent({ route, path }) {
{route.children ? (