diff --git a/docs/DCA Bot/README.mdx b/docs/DCA Bot/README.mdx
index 22a16ef1..85eac796 100644
--- a/docs/DCA Bot/README.mdx
+++ b/docs/DCA Bot/README.mdx
@@ -1,3 +1,4 @@
+import Endpoint from '@site/src/components/Endpoint'
# DCA Bot
@@ -24,4 +25,21 @@
The process starts with configuring a DCA Bot, where all trading conditions, such as base and safety orders, take profit, and stop loss, are set. The bot automatically creates and manages deals based on the configured strategy.
+## Endpoints list
+
\ No newline at end of file
diff --git a/src/components/Endpoint/Endpoint.module.css b/src/components/Endpoint/Endpoint.module.css
index 5df8f574..5aaead3b 100644
--- a/src/components/Endpoint/Endpoint.module.css
+++ b/src/components/Endpoint/Endpoint.module.css
@@ -11,7 +11,8 @@
}
.container {
- display: flex;
+ display: grid;
+ grid-template-columns: auto 1fr;
align-items: center;
padding: 8px 6px;
min-width: 400px;
@@ -25,6 +26,18 @@
line-height: 1.5;
}
+.endpointsListContainer {
+ min-width: auto;
+ padding-right: 14px;
+ gap: 4px;
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
.permissions {
display: flex;
flex-direction: column;
diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx
index 219eef4e..2252da46 100644
--- a/src/components/Endpoint/Endpoint.tsx
+++ b/src/components/Endpoint/Endpoint.tsx
@@ -5,13 +5,15 @@ import styles from './Endpoint.module.css'
import { Tooltip } from '@site/src/components/Tooltip'
type Props = {
- url: string
+ url?: string
method?: Method
permissions?: ReactNode
+ endpointsList?: Props[]
}
-export function Endpoint({ url, method, permissions }: Props) {
+export function Endpoint({ url, method, permissions, endpointsList }: Props) {
const [copied, setCopied] = useState(false)
+ let endpointContent: ReactNode
const handleOpenChange = (open: boolean) => {
if (!open) {
@@ -19,24 +21,45 @@ export function Endpoint({ url, method, permissions }: Props) {
}
}
- const handleCopy = () => {
+ const handleCopy = (url: string) => {
navigator.clipboard.writeText(url).then(() => {
setCopied(true)
})
}
- return (
-
-
+ if (endpointsList) {
+ endpointContent = endpointsList.map(endpoint =>
+ <>
+ {endpoint.method ?
{endpoint.method} : null}
+
+
+ handleCopy(endpoint.url)}>
+ {endpoint.url}
+
+
+ >
+ );
+ } else {
+ endpointContent =
+ <>
{method ?
{method} : null}
-
+ handleCopy(url)}>
{url}
+ >
+ }
+
+ return (
+
+
+ {endpointContent}
{permissions}
diff --git a/src/components/Endpoint/Method.module.css b/src/components/Endpoint/Method.module.css
index 0ede7346..180b67eb 100644
--- a/src/components/Endpoint/Method.module.css
+++ b/src/components/Endpoint/Method.module.css
@@ -19,6 +19,14 @@
color: white;
}
+.text {
+ color: var(--accent);
+}
+
+.right {
+ justify-content: end;
+}
+
.put {
--accent: #ff9800;
}
diff --git a/src/components/Endpoint/Method.tsx b/src/components/Endpoint/Method.tsx
index 401efb07..29f2624f 100644
--- a/src/components/Endpoint/Method.tsx
+++ b/src/components/Endpoint/Method.tsx
@@ -8,6 +8,7 @@ type Props = {
children: string
variant?: 'filled' | 'text'
size?: 'medium'
+ align?: 'center' | 'right'
}
const colors: Record
= {
@@ -23,6 +24,7 @@ export function Method({
children,
variant = 'filled',
size = 'medium',
+ align = 'center'
}: Props) {
if (typeof children !== 'string' || !(children.toUpperCase() in colors)) {
return null
@@ -36,7 +38,9 @@ export function Method({
styles.container,
colors[color],
variant === 'filled' && styles.filled,
- size === 'medium' && styles.medium
+ variant === 'text' && styles.text,
+ size === 'medium' && styles.medium,
+ align === 'right' && styles.right
)}>
{color}