feat: add Xray JSON template and localization support

kastov · kastov · commit 899528cb1385 · 2025-03-09T04:19:26.000+03:00
- Introduce Xray JSON template route and sidebar menu item
- Add localization for Xray JSON template description in English, Farsi, and Russian
- Update backend contract to version 0.3.6
- Modify simple metrics to use bytes utility without prefix
- Add Xray JSON template description widget
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@mantine/nprogress": "^7.17.1",
     "@monaco-editor/react": "^4.7.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "0.3.4",
+    "@remnawave/backend-contract": "0.3.6",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.31.0",
diff --git a/public/locales/en/remnawave.json b/public/locales/en/remnawave.json
@@ -396,5 +396,12 @@
             "password-too-short": "Minimum 24 characters",
             "register-description": "Create a super-admin account to get started"
         }
+    },
+    "xray-json-template-description": {
+        "widget": {
+            "importing-json-subscription": "Importing JSON subscription",
+            "description-line-1": "To use this subscription, just add",
+            "description-line-2": "at the end of your subscription link. Make sure you're using one of the supported apps listed in the table below. Otherwise, subscription will work as usual for requsted client. (e.g. Base64, Mihomo)"
+        }
     }
 }
diff --git a/public/locales/fa/remnawave.json b/public/locales/fa/remnawave.json
@@ -396,5 +396,12 @@
             "password-too-short": "حداقل 24 کاراکتر",
             "register-description": "برای شروع یک اکانت سوپرادمین ایجاد کنید"
         }
+    },
+    "xray-json-template-description": {
+        "widget": {
+            "description-line-1": "برای استفاده از این اشتراک ، فقط اضافه کنید",
+            "description-line-2": "در انتهای لینک اشتراک خود. \nاطمینان حاصل کنید که از یکی از برنامه های پشتیبانی شده ذکر شده در جدول زیر استفاده می کنید.",
+            "importing-json-subscription": "وارد کردن اشتراک JSON"
+        }
     }
-}
+}
diff --git a/public/locales/ru/remnawave.json b/public/locales/ru/remnawave.json
@@ -396,5 +396,12 @@
             "sign-up": "Зарегистрироваться",
             "username": "Имя пользователя"
         }
+    },
+    "xray-json-template-description": {
+        "widget": {
+            "description-line-1": "Чтобы использовать эту подписку, просто добавьте",
+            "description-line-2": "в конец вашей ссылки на подписку. \nУбедитесь, что вы используете одно из поддерживаемых приложений, перечисленных в таблице ниже. \nИначе подписка будет работать как обычно для запрошенного клиента. (например, Base64, Mihomo)",
+            "importing-json-subscription": "Импорт JSON подписки"
+        }
     }
 }
diff --git a/src/app/layouts/dashboard/sidebar/menu-sections.ts b/src/app/layouts/dashboard/sidebar/menu-sections.ts
@@ -75,6 +75,10 @@ export const useMenuSections = (): MenuItem[] => {
                     href: ROUTES.DASHBOARD.NODES,
                     icon: PiBracketsCurly,
                     dropdownItems: [
+                        {
+                            name: 'Xray JSON',
+                            href: ROUTES.DASHBOARD.TEMPLATES.XRAY_JSON
+                        },
                         {
                             name: 'Mihomo',
                             href: ROUTES.DASHBOARD.TEMPLATES.MIHOMO
diff --git a/src/app/router/router.tsx b/src/app/router/router.tsx
@@ -96,6 +96,16 @@ const router = createBrowserRouter(
                         }
                         path={ROUTES.DASHBOARD.TEMPLATES.SINGBOX_LEGACY}
                     />
+                    <Route
+                        element={
+                            <TemplateBasePageConnector
+                                language="json"
+                                templateType={SUBSCRIPTION_TEMPLATE_TYPE.XRAY_JSON}
+                                title="Xray JSON"
+                            />
+                        }
+                        path={ROUTES.DASHBOARD.TEMPLATES.XRAY_JSON}
+                    />
                 </Route>
 
                 <Route element={<NotFoundPageComponent />} path="*" />
diff --git a/src/pages/dashboard/home/components/metrics/simple-metrics.tsx b/src/pages/dashboard/home/components/metrics/simple-metrics.tsx
@@ -3,7 +3,7 @@ import { GetStatsCommand } from '@remnawave/backend-contract'
 import { TFunction } from 'i18next'
 import dayjs from 'dayjs'
 
-import { prettyBytesUtil } from '@shared/utils/bytes'
+import { prettyBytesUtil, prettyBytesUtilWithoutPrefix } from '@shared/utils/bytes'
 
 export const getSimpleMetrics = (
     systemInfo: GetStatsCommand.Response['response'],
@@ -16,7 +16,7 @@ export const getSimpleMetrics = (
 
     return [
         {
-            value: prettyBytesUtil(Number(users.totalTrafficBytes)) ?? 0,
+            value: prettyBytesUtilWithoutPrefix(Number(users.totalTrafficBytes)) ?? 0,
             icon: PiChartBarDuotone,
             title: t('simple-metrics.total-traffic'),
             color: 'green'
diff --git a/src/pages/dashboard/templates/ui/components/template-base-page.component.tsx b/src/pages/dashboard/templates/ui/components/template-base-page.component.tsx
@@ -1,6 +1,5 @@
 import { TSubscriptionTemplateType } from '@remnawave/backend-contract'
 import { useTranslation } from 'react-i18next'
-import { Divider } from '@mantine/core'
 
 import { SubscriptionTemplateEditorWidget } from '@widgets/dashboard/templates/subscription-template-editor'
 import { ROUTES } from '@shared/constants'
@@ -37,7 +36,6 @@ export const TemplateBasePageComponent = (props: Props) => {
                 templateJson={templateJson}
                 templateType={templateType}
             />
-            <Divider mb="md" mt="md" size="md" />
         </Page>
     )
 }
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
@@ -14,6 +14,7 @@ export const ROUTES = {
         NODES_STATS: '/dashboard/stats/nodes',
         API_TOKENS: '/dashboard/api-tokens',
         TEMPLATES: {
+            XRAY_JSON: '/dashboard/templates/xray-json',
             MIHOMO: '/dashboard/templates/mihomo',
             SINGBOX_LEGACY: '/dashboard/templates/sg-legacy',
             SINGBOX: '/dashboard/templates/singbox',
diff --git a/src/shared/utils/bytes/pretty-bytes/pretty-bytes.util.ts b/src/shared/utils/bytes/pretty-bytes/pretty-bytes.util.ts
@@ -32,3 +32,19 @@ export function prettyBytesUtil(
 
     return String(res.size)
 }
+
+export function prettyBytesUtilWithoutPrefix(
+    bytesInput: number | string | undefined,
+    returnZero: boolean = false
+): string | undefined {
+    if (!bytesInput) {
+        return returnZero ? '0' : undefined
+    }
+    if (typeof bytesInput === 'string') {
+        bytesInput = Number(bytesInput)
+    }
+
+    const res = xbytes.parseBytes(bytesInput, { sticky: true, iec: true })
+
+    return String(res.size)
+}
diff --git a/src/widgets/dashboard/templates/subscription-template-editor/subscription-template-editor.widget.tsx b/src/widgets/dashboard/templates/subscription-template-editor/subscription-template-editor.widget.tsx
@@ -1,13 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { SUBSCRIPTION_TEMPLATE_TYPE } from '@remnawave/backend-contract'
 import Editor, { Monaco } from '@monaco-editor/react'
-import { useTranslation } from 'react-i18next'
-import { Box, Paper } from '@mantine/core'
+import { Box, Divider, Paper } from '@mantine/core'
 import 'monaco-yaml/yaml.worker.js'
+import { useTranslation } from 'react-i18next'
 import { useRef } from 'react'
 
 import { TemplateEditorActionsFeature } from '@features/dashboard/subscription-templates/template-editor-actions'
 import { monacoTheme } from '@shared/constants/monaco-theme/monaco-theme'
 
+import { XrayJsonTemplateDescriptionWidget } from './xray-json-template-description.widget'
 import { configureMonaco } from './utils/setup-template-monaco'
 import styles from './SubscriptionTemplateEditor.module.css'
 import { Props } from './interfaces'
@@ -41,6 +43,11 @@ export function SubscriptionTemplateEditorWidget(props: Props) {
 
     return (
         <Box>
+            {templateType === SUBSCRIPTION_TEMPLATE_TYPE.XRAY_JSON && (
+                <XrayJsonTemplateDescriptionWidget />
+            )}
+            <Divider mb="md" mt="md" size="md" />
+
             <Paper
                 mb="md"
                 p={0}
diff --git a/src/widgets/dashboard/templates/subscription-template-editor/xray-json-template-description.widget.tsx b/src/widgets/dashboard/templates/subscription-template-editor/xray-json-template-description.widget.tsx
@@ -0,0 +1,49 @@
+import { Accordion, Code, Table } from '@mantine/core'
+import { useTranslation } from 'react-i18next'
+import { PiInfoDuotone } from 'react-icons/pi'
+
+export const XrayJsonTemplateDescriptionWidget = () => {
+    const { t } = useTranslation()
+
+    const supportedClients = [
+        { name: 'v2rayNG', minVersion: '1.8.29' },
+        { name: 'V2rayN', minVersion: '6.40' },
+        { name: 'Streisand', minVersion: 'Any' },
+        { name: 'Happ', minVersion: 'Any' },
+        { name: 'V2Box', minVersion: 'Any' },
+        { name: 'ktor-client', minVersion: 'Any' }
+    ]
+
+    const rows = supportedClients.map((element) => (
+        <Table.Tr key={element.name}>
+            <Table.Td>{element.name}</Table.Td>
+            <Table.Td>{element.minVersion}</Table.Td>
+        </Table.Tr>
+    ))
+
+    return (
+        <Accordion variant="separated">
+            <Accordion.Item value="importing-json-subscription">
+                <Accordion.Control
+                    icon={<PiInfoDuotone color="var(--mantine-color-red-6)" size={20} />}
+                >
+                    {t('xray-json-template-description.widget.importing-json-subscription')}
+                </Accordion.Control>
+                <Accordion.Panel>
+                    {t('xray-json-template-description.widget.description-line-1')}{' '}
+                    <Code>/json</Code>{' '}
+                    {t('xray-json-template-description.widget.description-line-2')}
+                    <Table highlightOnHover>
+                        <Table.Thead>
+                            <Table.Tr>
+                                <Table.Th>Client</Table.Th>
+                                <Table.Th>Min. Version</Table.Th>
+                            </Table.Tr>
+                        </Table.Thead>
+                        <Table.Tbody>{rows}</Table.Tbody>
+                    </Table>
+                </Accordion.Panel>
+            </Accordion.Item>
+        </Accordion>
+    )
+}

Original file line number	Diff line number	Diff line change
`@@ -396,5 +396,12 @@`
`396`	`396`	`"password-too-short": "Minimum 24 characters",`
`397`	`397`	`"register-description": "Create a super-admin account to get started"`
`398`	`398`	`}`
	`399`	`+ },`
	`400`	`+ "xray-json-template-description": {`
	`401`	`+ "widget": {`
	`402`	`+ "importing-json-subscription": "Importing JSON subscription",`
	`403`	`+ "description-line-1": "To use this subscription, just add",`
	`404`	`+ "description-line-2": "at the end of your subscription link. Make sure you're using one of the supported apps listed in the table below. Otherwise, subscription will work as usual for requsted client. (e.g. Base64, Mihomo)"`
	`405`	`+ }`
`399`	`406`	`}`
`400`	`407`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`import { TSubscriptionTemplateType } from '@remnawave/backend-contract'`
`2`	`2`	`import { useTranslation } from 'react-i18next'`
`3`		`-import { Divider } from '@mantine/core'`
`4`	`3`
`5`	`4`	`import { SubscriptionTemplateEditorWidget } from '@widgets/dashboard/templates/subscription-template-editor'`
`6`	`5`	`import { ROUTES } from '@shared/constants'`
`@@ -37,7 +36,6 @@ export const TemplateBasePageComponent = (props: Props) => {`
`37`	`36`	`templateJson={templateJson}`
`38`	`37`	`templateType={templateType}`
`39`	`38`	`/>`
`40`		`- <Divider mb="md" mt="md" size="md" />`
`41`	`39`	`</Page>`
`42`	`40`	`)`
`43`	`41`	`}`