diff --git a/docs/intro.md b/docs/intro.md index a6a39f1e9..d33238758 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -17,31 +17,34 @@ keywords: description: Get an overview of the available Deriv API code examples and languages, and how to use it to create your trading app. --- +```mdx-code-block +import Link from '@docusaurus/Link'; import RenderOfficialContents from '@site/src/components/RenderOfficialContents'; +``` Our Documentation is divided in several sections: @@ -51,13 +54,13 @@ Our Documentation is divided in several sections: - Have a look at the Core concepts pages and take your + Have a look at the Core concepts pages and take your time to read through it. These concepts will help you get familiar with our WebSocket server api and how to use it more efficiently. They are not related to any of our frameworks or libraries. - When you read through the Core concepts page, you can + When you read through the Core concepts page, you can start choosing your implementation approach based on the language, framework or library you want to use in your application. @@ -65,7 +68,7 @@ Our Documentation is divided in several sections:

Code Examples

If you want to know how you can implement our API within your code, then we suggest to have a look -at our Code examples. These code examples come in +at our Code examples. These code examples come in `CodeSandboxes`. This allows you to easily fork the code examples and experiment with them for personal use. For now we only have JavaScript code examples, but, we plan to add more examples that are created with different languages, frameworks and libraries in the near future. @@ -76,7 +79,7 @@ that are created with different languages, frameworks and libraries in the near When using our code examples, we also suggest to have a look at our{' '} - Languages section. Here, we describe in detail how you + Languages section. Here, we describe in detail how you can setup your personal project properly to make use of our API. This will surely come helpful when you try to integrate some of our code examples in your own project. @@ -88,7 +91,7 @@ that are created with different languages, frameworks and libraries in the near If you want to know for example how you can `monetize your application` or how to create a `secure way for users to log in` to your application, then we provide a handful of{' '} - Guides that can assist you with that. + Guides that can assist you with that. @@ -98,5 +101,5 @@ that are created with different languages, frameworks and libraries in the near If you want to know more about the essentials that are needed to setup your own application, then have a look at the{' '} - Setting up a Deriv application section. + Setting up a Deriv application section. diff --git a/docs/setting-up-a-deriv-application.md b/docs/setting-up-a-deriv-application.md index 711c5b271..bb18e5479 100644 --- a/docs/setting-up-a-deriv-application.md +++ b/docs/setting-up-a-deriv-application.md @@ -14,11 +14,15 @@ keywords: description: A step-by-step guide on creating your Deriv API token and building your trading application with the help of our trading API. Learn more. --- +```mdx-code-block +import Link from '@docusaurus/Link'; +``` + #### Deriv account -If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the new_account_virtual API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account. +If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the new_account_virtual API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account. -To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using new_account_real or new_account_maltainvest API calls. +To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using new_account_real or new_account_maltainvest API calls. :::caution To create Deriv applications, you'll need an API token with the Admin scope for the account you wish to use for your application. @@ -34,7 +38,7 @@ To create a new API token, follow these steps: 2. Provide a name for your token 3. Click **Create** -Alternatively, you can create an API token via the api_token API call. +Alternatively, you can create an API token via the api_token API call. :::caution You need a token with the `Admin` scope to create an application. diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index d6ae56222..905bc894b 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -17,6 +17,7 @@ display: flex; flex-direction: row; gap: rem(9.6); + max-width: 1264px; } .FooterLogo { @@ -31,7 +32,6 @@ .Section1 { display: flex; flex-direction: column; - width: 120px; height: 100px; margin-bottom: rem(4.8); } @@ -112,7 +112,6 @@ border: 1px solid #ddd; padding: 16px; border-radius: rem(2.4); - width: 320px !important; } .EmailButton { @@ -137,6 +136,7 @@ @media (max-width: 1090px) { .FooterSection { gap: rem(1.8); + max-width: 1030px; } } diff --git a/src/features/Home/ClientLibraries/ClientLibraries.module.scss b/src/features/Home/ClientLibraries/ClientLibraries.module.scss index 3430f52f9..80e4d034d 100644 --- a/src/features/Home/ClientLibraries/ClientLibraries.module.scss +++ b/src/features/Home/ClientLibraries/ClientLibraries.module.scss @@ -67,3 +67,9 @@ } } } + +@media screen and (max-width: 400px) { + .Link { + max-width: 260px; + } +} diff --git a/src/features/Home/ClientLibraries/ClientLibraries.tsx b/src/features/Home/ClientLibraries/ClientLibraries.tsx index 4713d9ec5..b85fee724 100644 --- a/src/features/Home/ClientLibraries/ClientLibraries.tsx +++ b/src/features/Home/ClientLibraries/ClientLibraries.tsx @@ -35,10 +35,12 @@ export const ClientLibraries = () => { target='_blank' > - - +
+ + +
@@ -49,10 +51,12 @@ export const ClientLibraries = () => { target='_blank' > - - +
+ + +
@@ -63,10 +67,12 @@ export const ClientLibraries = () => { target='_blank' > - - +
+ + +
diff --git a/src/hooks/useDynamicImportJSON/index.tsx b/src/hooks/useDynamicImportJSON/index.tsx index d1f5dfa70..c53fe6f13 100644 --- a/src/hooks/useDynamicImportJSON/index.tsx +++ b/src/hooks/useDynamicImportJSON/index.tsx @@ -1,4 +1,5 @@ import { useHistory, useLocation } from '@docusaurus/router'; +import { translate } from '@docusaurus/Translate'; import { TInfo } from '@site/src/types'; import { playground_requests } from '@site/src/utils/playground_requests'; import { useCallback, useEffect, useState } from 'react'; @@ -6,10 +7,10 @@ import { useCallback, useEffect, useState } from 'react'; const useDynamicImportJSON = () => { const [text_data, setTextData] = useState({ request: '', - selected_value: 'Select API Call - Version 3', + selected_value: translate({ message: 'Select API Call - Version 3' }), name: null, }); - const [selected, setSelected] = useState('Select API Call - Version 3'); + const [selected, setSelected] = useState(translate({ message: 'Select API Call - Version 3' })); const [response_info, setResponseInfo] = useState({}); const [request_info, setRequestInfo] = useState({}); const history = useHistory(); diff --git a/src/styles/index.scss b/src/styles/index.scss index a8654477a..b23326657 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -153,6 +153,7 @@ h6 { h1, h2 { font-family: var(--ubuntu-font-family); + hyphens: auto; } html,