From 35b4cf7ba759cb29fd29198784f1156de557bbb4 Mon Sep 17 00:00:00 2001 From: Ivan Bredykhin Date: Tue, 11 Feb 2025 00:37:30 +0200 Subject: [PATCH] BOST-30 feat: added Informer component; changed links color --- docs/Account/2. Add exchange account.mdx | 7 +- .../General information/4. Get an API key.mdx | 12 ++-- .../10. Required balances for launch.mdx | 5 +- docs/Grid Bot/5. Get profit details.mdx | 7 +- src/components/Informer/Informer.module.css | 64 +++++++++++++++++++ src/components/Informer/Informer.tsx | 44 +++++++++++++ src/css/custom.css | 1 + src/icons/IconAttentionCircle.tsx | 26 ++++++++ src/icons/IconCheck.tsx | 16 +++++ src/icons/IconInfo.tsx | 26 ++++++++ src/icons/index.tsx | 3 + 11 files changed, 197 insertions(+), 14 deletions(-) create mode 100644 src/components/Informer/Informer.module.css create mode 100644 src/components/Informer/Informer.tsx create mode 100644 src/icons/IconAttentionCircle.tsx create mode 100644 src/icons/IconCheck.tsx create mode 100644 src/icons/IconInfo.tsx create mode 100644 src/icons/index.tsx diff --git a/docs/Account/2. Add exchange account.mdx b/docs/Account/2. Add exchange account.mdx index 42127975..40753cb2 100644 --- a/docs/Account/2. Add exchange account.mdx +++ b/docs/Account/2. Add exchange account.mdx @@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam'; import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll'; import * as StickyLayout from '@site/src/components/StickyLayout'; import * as ResponseTabs from '@site/src/components/ResponseTabs'; +import { Informer } from '@site/src/components/Informer/Informer' -Please note that connections using manually created API keys are available only to Expert plan subscribers and exclusively for Binance sub-accounts. - + + Please note that connections using manually created API keys are available only to Expert plan subscribers and exclusively for Binance sub-accounts. + diff --git a/docs/General information/4. Get an API key.mdx b/docs/General information/4. Get an API key.mdx index c16c5bc8..600407ad 100644 --- a/docs/General information/4. Get an API key.mdx +++ b/docs/General information/4. Get an API key.mdx @@ -1,3 +1,5 @@ +import { Informer } from '@site/src/components/Informer/Informer' + ## Ways to generate API Key We offer two ways to generate API Key: @@ -15,15 +17,13 @@ To create and manage an API Key, [sign in](https://app.3commas.io/en/auth/login) On the page, click the **New API access token** button and select the method for generating the API Key. Then, complete the form fields. If you select Self-generated, you need to provide an RSA Private Key. - - -
+ For instructions on how to generate an RSA Private Key, refer to the article How to create an RSA Key pair -
+ Select the appropriate permissions for the API Key and create your API Key. -
+ After creating an API Key, store the information securely. -
+ diff --git a/docs/Grid Bot/10. Required balances for launch.mdx b/docs/Grid Bot/10. Required balances for launch.mdx index d3db9a22..e4d1139a 100644 --- a/docs/Grid Bot/10. Required balances for launch.mdx +++ b/docs/Grid Bot/10. Required balances for launch.mdx @@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam'; import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll'; import * as StickyLayout from '@site/src/components/StickyLayout' import * as ResponseTabs from '@site/src/components/ResponseTabs' +import { Informer } from '@site/src/components/Informer/Informer' + This endpoint works only for the spot exchange. - + diff --git a/docs/Grid Bot/5. Get profit details.mdx b/docs/Grid Bot/5. Get profit details.mdx index dda1d9fd..6fba9e40 100644 --- a/docs/Grid Bot/5. Get profit details.mdx +++ b/docs/Grid Bot/5. Get profit details.mdx @@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam'; import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll'; import * as StickyLayout from '@site/src/components/StickyLayout' import * as ResponseTabs from '@site/src/components/ResponseTabs' +import { Informer } from '@site/src/components/Informer/Informer' - + + If the **from** and **to** values are not set, the response will include all records ordered in descending (`[DESC]`) order by ID parameter. + diff --git a/src/components/Informer/Informer.module.css b/src/components/Informer/Informer.module.css new file mode 100644 index 00000000..c2c36184 --- /dev/null +++ b/src/components/Informer/Informer.module.css @@ -0,0 +1,64 @@ +.root { + box-sizing: border-box; + padding: 16px; + display: flex; + border-radius: 8px; + gap: 4px 8px; + align-items: flex-start; + padding: 16px; + margin: 20px 0; +} + +.info { + background-color: rgb(230, 239, 249); +} + +.info .iconBlock { + color: rgb(30, 114, 210); +} + +.warning { + background-color: rgb(255, 243, 214); +} + +.warning .iconBlock { + color: rgb(255, 155, 26); +} + +.danger { + background-color: rgb(251, 239, 240); +} + +.danger .iconBlock { + color: rgb(231, 89, 106); +} + +.accent { + background-color: rgb(234, 245, 245); +} + +.accent .iconBlock { + color: rgb(19, 168, 161); +} + +.container { + display: contents; +} + +.content { + display: flex; + gap: inherit; + align-items: flex-start; + flex: 1; + flex-direction: column; + font-size: 14px; + line-height: 20px; +} + +.iconBlock { + display: flex; +} + +.content p:last-child { + margin-bottom: 0; +} diff --git a/src/components/Informer/Informer.tsx b/src/components/Informer/Informer.tsx new file mode 100644 index 00000000..4486a727 --- /dev/null +++ b/src/components/Informer/Informer.tsx @@ -0,0 +1,44 @@ +import { ReactNode } from 'react' +import styles from './Informer.module.css' +import clsx from 'clsx' +import { IconAttentionCircle, IconInfo, IconCheck } from "../../icons"; + + +export type TInformerVariantTypes = 'info' | 'warning' | 'danger' | 'accent' + +type Props = { + variant?: TInformerVariantTypes, + children: ReactNode +} + +const variants: Record = { + info: styles.info, + warning: styles.warning, + danger: styles.danger, + accent: styles.accent +} + +const mapVariantToIcon: Record = { + info: , + danger: , + warning: , + accent: , +}; + +export function Informer({ variant = 'info', children }: Props) { + return ( +
+
+
+ {mapVariantToIcon[variant as keyof typeof mapVariantToIcon]} +
+
+ {children} +
+
+
+ ) +} diff --git a/src/css/custom.css b/src/css/custom.css index a2f786f2..a34871df 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -20,6 +20,7 @@ --ifm-col-width: 0px !important; --ifm-table-cell-padding: 0.5rem; --ifm-list-left-padding: 1rem; + --ifm-link-color: #13a8a1; @media (min-width: 997px) { --ifm-global-spacing: 1.5rem; diff --git a/src/icons/IconAttentionCircle.tsx b/src/icons/IconAttentionCircle.tsx new file mode 100644 index 00000000..a43d186f --- /dev/null +++ b/src/icons/IconAttentionCircle.tsx @@ -0,0 +1,26 @@ +export const IconAttentionCircle = () => ( + + + + + + + +); diff --git a/src/icons/IconCheck.tsx b/src/icons/IconCheck.tsx new file mode 100644 index 00000000..9089f9c1 --- /dev/null +++ b/src/icons/IconCheck.tsx @@ -0,0 +1,16 @@ +export const IconCheck = () => ( + + + +); diff --git a/src/icons/IconInfo.tsx b/src/icons/IconInfo.tsx new file mode 100644 index 00000000..9e25ea44 --- /dev/null +++ b/src/icons/IconInfo.tsx @@ -0,0 +1,26 @@ +export const IconInfo = () => ( + + + + + + + +); diff --git a/src/icons/index.tsx b/src/icons/index.tsx new file mode 100644 index 00000000..e966c039 --- /dev/null +++ b/src/icons/index.tsx @@ -0,0 +1,3 @@ +export { IconAttentionCircle } from "./IconAttentionCircle"; +export { IconCheck } from "./IconCheck"; +export { IconInfo } from "./IconInfo";