Compare commits

..

1 Commits

Author SHA1 Message Date
Verticool 9dcc6860f4 telegram fullscreen /viewContent 2025-03-21 13:28:16 +06:00
46 changed files with 845 additions and 7275 deletions

View File

@ -1,31 +0,0 @@
FROM node:20-alpine AS build
WORKDIR /app
# Install deps first
COPY package.json package-lock.json* yarn.lock* ./
RUN if [ -f package-lock.json ]; then npm ci; \
elif [ -f yarn.lock ]; then yarn install --frozen-lockfile; \
else npm install; fi
# Copy sources
COPY . .
# Build-time env vars for Vite
ARG VITE_SENTRY_DSN
ARG VITE_API_BASE_URL
ARG VITE_API_BASE_STORAGE_URL
ENV VITE_SENTRY_DSN=${VITE_SENTRY_DSN}
ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
ENV VITE_API_BASE_STORAGE_URL=${VITE_API_BASE_STORAGE_URL}
RUN npm run build
FROM nginx:alpine AS runtime
COPY --from=build /app/dist /usr/share/nginx/html
# Minimal SPA-friendly Nginx config
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

View File

@ -2,16 +2,6 @@
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
## Environment variables
Copy `.env.example` to `.env` (or provide the same variables through your deployment system) and adjust the URLs if needed. All frontend traffic (админка, загрузка, просмотр) завязан на `VITE_API_BASE_URL`, поэтому указывайте полный путь до `/api/v1` нужной ноды.
```
VITE_API_BASE_URL=https://my-public-node-103.projscale.dev/api/v1
```
При таком значении фронт автоматически отправляет tus-запросы на `https://my-public-node-103.projscale.dev/tus/files`, а прогрессивные загрузки (обложки, метаданные) — на `https://my-public-node-103.projscale.dev/api/v1.5/storage`.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

View File

@ -1,23 +0,0 @@
server {
listen 80;
server_name _;
# Increase limits for large uploads if needed
client_max_body_size 10G;
client_body_timeout 300s;
client_header_timeout 300s;
# Access logs with request id
access_log /var/log/nginx/access.log main;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
# Propagate a request id to clients; backend (API) can echo as session id
add_header X-Request-Id $request_id always;
add_header X-Content-Type-Options nosniff always;
add_header Referrer-Policy no-referrer-when-downgrade always;
}
}

319
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@sentry/react": "^9.1.0",
"@telegram-apps/sdk": "^3.5.1",
"@ton/core": "^0.59.1",
"@tonconnect/ui-react": "^2.0.2",
"@vkruglikov/react-telegram-web-app": "^2.1.9",
@ -24,7 +25,6 @@
"react-router-dom": "^6.22.2",
"react-tag-input": "^6.10.3",
"tailwind-merge": "^2.2.1",
"tus-js-client": "^4.3.1",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},
@ -1404,6 +1404,113 @@
"react": "^16.14.0 || 17.x || 18.x || 19.x"
}
},
"node_modules/@telegram-apps/bridge": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-2.4.0.tgz",
"integrity": "sha512-Lp/vhspF7okK8zXvSWWirunKXOPE6Gr11o9VBne4VmKG/yHRhEW7Pf07ncPtXLLzI6wW8+VYc3khsHPABJymEw==",
"license": "MIT",
"dependencies": {
"@telegram-apps/signals": "^1.1.1",
"@telegram-apps/toolkit": "^2.0.0",
"@telegram-apps/transformers": "^2.2.0",
"@telegram-apps/types": "^2.0.0",
"better-promises": "^0.4.0",
"error-kid": "^0.0.4",
"mitt": "^3.0.1",
"valibot": "1.0.0-beta.14"
}
},
"node_modules/@telegram-apps/navigation": {
"version": "1.0.13",
"resolved": "https://registry.npmjs.org/@telegram-apps/navigation/-/navigation-1.0.13.tgz",
"integrity": "sha512-TsUueB5LQp77GQHoMa93nq26Uw7GJjrFCPbyseMVU7aBBxAc+8CV2IYytRwcVp5sv/q7ThK5X4JaKn2V1yBHDQ==",
"license": "MIT",
"dependencies": {
"@telegram-apps/bridge": "^1.9.2",
"@telegram-apps/signals": "^1.1.1",
"@telegram-apps/toolkit": "^1.1.1"
}
},
"node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/bridge": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-1.9.2.tgz",
"integrity": "sha512-SJLcNWLXhbbZr9MiqFH/g2ceuitSJKMxUIZysK4zUNyTUNuonrQG80Q/yrO+XiNbKUj8WdDNM86NBARhuyyinQ==",
"license": "MIT",
"dependencies": {
"@telegram-apps/signals": "^1.1.1",
"@telegram-apps/toolkit": "^1.1.1",
"@telegram-apps/transformers": "^1.2.2",
"@telegram-apps/types": "^1.2.1"
}
},
"node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/toolkit": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-1.1.1.tgz",
"integrity": "sha512-+vhKx6ngfvjyTE6Xagl3z1TPVbfx5s7xAkcYzCdHYUo6T60jLIqLgyZMcI1UPoIAMuMu1pHoO+p8QNCj/+tFmw==",
"license": "MIT"
},
"node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/transformers": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-1.2.2.tgz",
"integrity": "sha512-vvMwXckd1D7Ozc0h66PSUwF5QLrRV9HlGJFFeBuUex8QEk5mSPtsJkLiqB8aBbwuFDa91+TUSM/CxqPZO/e9YQ==",
"license": "MIT",
"dependencies": {
"@telegram-apps/toolkit": "^1.1.1",
"@telegram-apps/types": "^1.2.1"
}
},
"node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/types": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@telegram-apps/types/-/types-1.2.1.tgz",
"integrity": "sha512-so4HLh7clur0YyMthi9KVIgWoGpZdXlFOuQjk3+Q5NAvJZ11nAheBSwPlGw/Ko92+zwvrSBE/lQyN2+p17RP+w==",
"license": "MIT"
},
"node_modules/@telegram-apps/sdk": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/@telegram-apps/sdk/-/sdk-3.5.1.tgz",
"integrity": "sha512-m/ynpSozXsqq6Kfb6M9fm8SD6x/+jqvTFT59FuuOBvC+G8eMd0F+fvZdr6Pj0I6IL9M67nrfm92JpTu/aVNEjw==",
"license": "MIT",
"dependencies": {
"@telegram-apps/bridge": "^2.4.0",
"@telegram-apps/navigation": "^1.0.13",
"@telegram-apps/signals": "^1.1.1",
"@telegram-apps/toolkit": "^2.0.0",
"@telegram-apps/transformers": "^2.2.0",
"@telegram-apps/types": "^2.0.0",
"better-promises": "^0.4.0",
"error-kid": "^0.0.4",
"valibot": "1.0.0-beta.14"
}
},
"node_modules/@telegram-apps/signals": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@telegram-apps/signals/-/signals-1.1.1.tgz",
"integrity": "sha512-vz37r8lemGpPzDiBRfqpXYBynzmy3SFnY6zfHsTZABTYYt0b0WQZyU5mFDqqqugGhka78Gy11xmr9csgy4YgGA==",
"license": "MIT"
},
"node_modules/@telegram-apps/toolkit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-2.0.0.tgz",
"integrity": "sha512-1GKTLBNme1Phu/gFvgS9NWPq+LhPfzSIfnwhcF9I/6tCdufrLRcVaSMRiK9R4VDYD6iZUyj+a2l250qWAxxjQQ==",
"license": "MIT"
},
"node_modules/@telegram-apps/transformers": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-2.2.0.tgz",
"integrity": "sha512-wqXXOukhEjZKhzdq5vG1LkxWL11DApbmUKzk+3nA/ki3TLyD3awVTOXbpoNdOwFl2xliIooYcsUOEl4WCyyLGw==",
"license": "MIT",
"dependencies": {
"@telegram-apps/toolkit": "^2.0.0",
"@telegram-apps/types": "^2.0.0",
"valibot": "1.0.0-beta.14"
}
},
"node_modules/@telegram-apps/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@telegram-apps/types/-/types-2.0.0.tgz",
"integrity": "sha512-yF499FJK82a2IDNDAQdrmVH3sgFZl/QFNdVZKgWpgtunIVJ1fres5wi9+4aUBRVIdQwZOZZqB/AOvYYuYXsq3Q==",
"license": "MIT"
},
"node_modules/@ton/core": {
"version": "0.59.1",
"resolved": "https://registry.npmjs.org/@ton/core/-/core-0.59.1.tgz",
@ -2189,6 +2296,15 @@
],
"license": "MIT"
},
"node_modules/better-promises": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/better-promises/-/better-promises-0.4.0.tgz",
"integrity": "sha512-AcKkTUSd4o1vMf41eBbHW1NkY7vrXeNI6etitGdQE54WFXsF2wkfonrKA06Za7lViRNyT/cMvj5z+DScqhYW8A==",
"license": "MIT",
"dependencies": {
"error-kid": "^0.0.4"
}
},
"node_modules/big-integer": {
"version": "1.6.52",
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
@ -2298,12 +2414,6 @@
"ieee754": "^1.2.1"
}
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"license": "MIT"
},
"node_modules/call-bind": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@ -2440,15 +2550,6 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"node_modules/combine-errors": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
"integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
"dependencies": {
"custom-error-instance": "2.1.1",
"lodash.uniqby": "4.5.0"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -2511,12 +2612,6 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/custom-error-instance": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
"integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==",
"license": "ISC"
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -2661,6 +2756,12 @@
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"dev": true
},
"node_modules/error-kid": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/error-kid/-/error-kid-0.0.4.tgz",
"integrity": "sha512-x+yQhY56SorLMnX6kOf+z3JCv2QBurcWEDcIjgxYtVr4fGeCfAtOdZOCyWttkHHDFPtL2PqnaRUmphbmALJd9w==",
"license": "MIT"
},
"node_modules/es-abstract": {
"version": "1.22.5",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz",
@ -3704,12 +3805,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"license": "ISC"
},
"node_modules/graphemer": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@ -4089,18 +4184,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-stream": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
"license": "MIT",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-string": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
@ -4197,12 +4280,6 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/js-base64": {
"version": "3.7.8",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
"integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
"license": "BSD-3-Clause"
},
"node_modules/js-sha3": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
@ -4330,74 +4407,12 @@
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
"license": "MIT"
},
"node_modules/lodash._baseiteratee": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
"integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
"license": "MIT",
"dependencies": {
"lodash._stringtopath": "~4.8.0"
}
},
"node_modules/lodash._basetostring": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
"integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==",
"license": "MIT"
},
"node_modules/lodash._baseuniq": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
"integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
"license": "MIT",
"dependencies": {
"lodash._createset": "~4.0.0",
"lodash._root": "~3.0.0"
}
},
"node_modules/lodash._createset": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
"integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==",
"license": "MIT"
},
"node_modules/lodash._root": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
"integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==",
"license": "MIT"
},
"node_modules/lodash._stringtopath": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
"integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
"license": "MIT",
"dependencies": {
"lodash._basetostring": "~4.12.0"
}
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
"license": "MIT"
},
"node_modules/lodash.uniqby": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
"integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
"license": "MIT",
"dependencies": {
"lodash._baseiteratee": "~4.7.0",
"lodash._baseuniq": "~4.6.0"
}
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -4511,6 +4526,12 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
"license": "MIT"
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -5151,23 +5172,6 @@
"react-is": "^16.13.1"
}
},
"node_modules/proper-lockfile": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
"integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.4",
"retry": "^0.12.0",
"signal-exit": "^3.0.2"
}
},
"node_modules/proper-lockfile/node_modules/signal-exit": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"license": "ISC"
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@ -5182,12 +5186,6 @@
"node": ">=6"
}
},
"node_modules/querystringify": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
"license": "MIT"
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -5462,12 +5460,6 @@
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
"integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"license": "MIT"
},
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -5494,15 +5486,6 @@
"node": ">=4"
}
},
"node_modules/retry": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
"integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
"license": "MIT",
"engines": {
"node": ">= 4"
}
},
"node_modules/reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@ -6176,24 +6159,6 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"dev": true
},
"node_modules/tus-js-client": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-4.3.1.tgz",
"integrity": "sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==",
"license": "MIT",
"dependencies": {
"buffer-from": "^1.1.2",
"combine-errors": "^3.0.3",
"is-stream": "^2.0.0",
"js-base64": "^3.7.2",
"lodash.throttle": "^4.1.1",
"proper-lockfile": "^4.1.2",
"url-parse": "^1.5.7"
},
"engines": {
"node": ">=18"
}
},
"node_modules/tweetnacl": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
@ -6307,7 +6272,7 @@
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"dev": true,
"devOptional": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -6411,16 +6376,6 @@
"punycode": "^2.1.0"
}
},
"node_modules/url-parse": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
"license": "MIT",
"dependencies": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -6435,6 +6390,20 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true
},
"node_modules/valibot": {
"version": "1.0.0-beta.14",
"resolved": "https://registry.npmjs.org/valibot/-/valibot-1.0.0-beta.14.tgz",
"integrity": "sha512-tLyV2rE5QL6U29MFy3xt4AqMrn+/HErcp2ZThASnQvPMwfSozjV1uBGKIGiegtZIGjinJqn0SlBdannf18wENA==",
"license": "MIT",
"peerDependencies": {
"typescript": ">=5"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/vite": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz",

View File

@ -12,6 +12,7 @@
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@sentry/react": "^9.1.0",
"@telegram-apps/sdk": "^3.5.1",
"@ton/core": "^0.59.1",
"@tonconnect/ui-react": "^2.0.2",
"@vkruglikov/react-telegram-web-app": "^2.1.9",
@ -26,7 +27,6 @@
"react-router-dom": "^6.22.2",
"react-tag-input": "^6.10.3",
"tailwind-merge": "^2.2.1",
"tus-js-client": "^4.3.1",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},

View File

@ -7,24 +7,19 @@ import { useExpand, useWebApp } from '@vkruglikov/react-telegram-web-app';
import { Providers } from '~/app/providers';
import { AppRouter } from '~/app/router';
import { Notification } from '~/shared/ui/notification';
import { init } from '@telegram-apps/sdk';
export const App = () => {
const WebApp = useWebApp();
const [, expand] = useExpand();
useEffect(() => {
if (!WebApp) {
return;
}
init();
WebApp.enableClosingConfirmation();
expand();
WebApp.enableClosingConfirmation?.();
if (typeof expand === 'function') {
expand();
}
WebApp.setHeaderColor?.('#1d1d1b');
WebApp.setBackgroundColor?.('#1d1d1b');
}, [WebApp, expand]);
WebApp.setHeaderColor('#1d1d1b');
WebApp.setBackgroundColor('#1d1d1b');
}, []);
return (
<Providers>

View File

@ -14,7 +14,7 @@ export const Providers = ({ children }: ProvidersProps) => {
<WebAppProvider options={{ smoothButtonsTransition: true }}>
<TonConnectUIProvider
manifestUrl={
"https://my-public-node-103.projscale.dev/api/tonconnect-manifest.json"
"https://my-public-node-1.projscale.dev/api/tonconnect-manifest.json"
}
>
<QueryClientProvider client={queryClient}>

View File

@ -2,5 +2,4 @@ export const Routes = {
Root: "/uploadContent",
ViewContent: "/viewContent",
SentryCheck: "/sentryCheck",
Admin: "/admin",
};

View File

@ -3,22 +3,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Routes } from "~/app/router/constants";
import { RootPage } from "~/pages/root";
import { ViewContentPage } from "~/pages/view-content";
import { AdminPage, AdminIndexRedirect } from "~/pages/admin";
import {
AdminOverviewPage,
AdminStoragePage,
AdminUploadsPage,
AdminUsersPage,
AdminEventsPage,
AdminLicensesPage,
AdminStarsPage,
AdminSystemPage,
AdminBlockchainPage,
AdminNodesPage,
AdminStatusPage,
AdminNetworkPage,
AdminNetworkSettingsPage,
} from "~/pages/admin/sections";
import { ProtectedLayout } from "./protected-layout";
const router = createBrowserRouter([
@ -27,8 +11,8 @@ const router = createBrowserRouter([
children: [
{ path: Routes.Root, element: <RootPage /> },
{ path: Routes.ViewContent, element: <ViewContentPage /> },
{
path: Routes.SentryCheck,
{
path: Routes.SentryCheck,
element: (
<div className="flex h-screen items-center justify-center">
<button
@ -45,26 +29,6 @@ const router = createBrowserRouter([
},
],
},
{
path: Routes.Admin,
element: <AdminPage />,
children: [
{ index: true, element: <AdminIndexRedirect /> },
{ path: "overview", element: <AdminOverviewPage /> },
{ path: "storage", element: <AdminStoragePage /> },
{ path: "uploads", element: <AdminUploadsPage /> },
{ path: "events", element: <AdminEventsPage /> },
{ path: "users", element: <AdminUsersPage /> },
{ path: "licenses", element: <AdminLicensesPage /> },
{ path: "stars", element: <AdminStarsPage /> },
{ path: "system", element: <AdminSystemPage /> },
{ path: "blockchain", element: <AdminBlockchainPage /> },
{ path: "nodes", element: <AdminNodesPage /> },
{ path: "status", element: <AdminStatusPage /> },
{ path: "network", element: <AdminNetworkPage /> },
{ path: "network-settings", element: <AdminNetworkSettingsPage /> },
],
},
]);
export const AppRouter = () => {

View File

@ -1,24 +0,0 @@
import type { ReactNode } from "react";
import clsx from "clsx";
type BadgeTone = "neutral" | "success" | "danger" | "warn";
const toneClassMap: Record<BadgeTone, string> = {
neutral: "bg-slate-800 text-slate-200",
success: "bg-emerald-900/70 text-emerald-200",
danger: "bg-rose-900/60 text-rose-100",
warn: "bg-amber-900/60 text-amber-100",
};
export const Badge = ({ children, tone = "neutral" }: { children: ReactNode; tone?: BadgeTone }) => {
return (
<span
className={clsx(
"inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
toneClassMap[tone],
)}
>
{children}
</span>
);
};

View File

@ -1,87 +0,0 @@
import { ReactNode, useCallback } from "react";
import clsx from "clsx";
import { useAdminContext } from "../context";
type CopyButtonProps = {
value: string | number;
className?: string;
"aria-label"?: string;
successMessage?: string;
children?: ReactNode;
};
const copyFallback = (text: string) => {
if (typeof document === "undefined") {
throw new Error("Clipboard API недоступен");
}
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed";
textarea.style.top = "-1000px";
textarea.style.left = "-1000px";
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
document.execCommand("copy");
} finally {
document.body.removeChild(textarea);
}
};
export const CopyButton = ({ value, className, "aria-label": ariaLabel, successMessage, children }: CopyButtonProps) => {
const { pushFlash } = useAdminContext();
const handleCopy = useCallback(async () => {
const text = String(value ?? "");
if (!text) {
return;
}
try {
if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
} else {
copyFallback(text);
}
pushFlash({
type: "success",
message: successMessage ?? "Значение скопировано в буфер обмена",
});
} catch (error) {
pushFlash({
type: "error",
message: error instanceof Error ? `Не удалось скопировать: ${error.message}` : "Не удалось скопировать значение",
});
}
}, [pushFlash, successMessage, value]);
return (
<button
type="button"
className={clsx(
"inline-flex shrink-0 items-center justify-center rounded-md border border-slate-700 bg-slate-900 text-slate-300 transition hover:border-sky-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-sky-500/40",
children ? "h-7 px-3" : "h-7 w-7",
className,
)}
aria-label={ariaLabel ?? "Скопировать значение"}
onClick={handleCopy}
>
{children ?? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
)}
</button>
);
};

View File

@ -1,38 +0,0 @@
import type { ReactNode } from "react";
import clsx from "clsx";
import { CopyButton } from "./CopyButton";
type InfoRowProps = {
label: string;
children: ReactNode;
copyValue?: string | number | null;
copyMessage?: string;
className?: string;
};
export const InfoRow = ({ label, children, copyValue, copyMessage, className }: InfoRowProps) => {
const canCopy = copyValue !== null && copyValue !== undefined && `${copyValue}`.length > 0;
return (
<div
className={clsx(
"flex flex-col gap-1 overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 p-3",
className,
)}
>
<span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
<div className="flex items-start gap-2 text-sm text-slate-100">
<div className="min-w-0 break-words text-left">{children}</div>
{canCopy ? (
<CopyButton
value={copyValue as string | number}
aria-label={`Скопировать значение «${label}»`}
successMessage={copyMessage}
className="mt-0.5"
/>
) : null}
</div>
</div>
);
};

View File

@ -1,49 +0,0 @@
type PaginationControlsProps = {
total: number;
limit: number;
page: number;
onPageChange: (next: number) => void;
};
const numberFormatter = new Intl.NumberFormat("ru-RU");
export const PaginationControls = ({ total, limit, page, onPageChange }: PaginationControlsProps) => {
const safeLimit = Math.max(limit, 1);
const totalPages = Math.max(1, Math.ceil(Math.max(total, 0) / safeLimit));
const clampedPage = Math.min(Math.max(page, 0), totalPages - 1);
const startIndex = total === 0 ? 0 : clampedPage * safeLimit + 1;
const endIndex = total === 0 ? 0 : Math.min(total, (clampedPage + 1) * safeLimit);
const canGoPrev = clampedPage > 0;
const canGoNext = clampedPage + 1 < totalPages;
return (
<div className="flex flex-col gap-2 rounded-xl bg-slate-950/40 px-3 py-2 ring-1 ring-slate-800 sm:flex-row sm:items-center sm:justify-between">
<div className="text-xs text-slate-400">
{total === 0
? "Нет записей"
: `Показаны ${numberFormatter.format(startIndex)}${numberFormatter.format(endIndex)} из ${numberFormatter.format(total)}`}
</div>
<div className="flex items-center gap-3">
<button
type="button"
className="rounded-lg bg-slate-900/60 px-3 py-1 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-600 disabled:ring-slate-800"
onClick={() => onPageChange(Math.max(clampedPage - 1, 0))}
disabled={!canGoPrev}
>
Назад
</button>
<span className="text-xs text-slate-300">
Стр. {numberFormatter.format(clampedPage + 1)} из {numberFormatter.format(totalPages)}
</span>
<button
type="button"
className="rounded-lg bg-slate-900/60 px-3 py-1 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-600 disabled:ring-slate-800"
onClick={() => onPageChange(Math.min(clampedPage + 1, totalPages - 1))}
disabled={!canGoNext}
>
Вперёд
</button>
</div>
</div>
);
};

View File

@ -1,32 +0,0 @@
import type { ReactNode } from "react";
import clsx from "clsx";
type SectionProps = {
id?: string;
title: string;
description?: string;
actions?: ReactNode;
children: ReactNode;
className?: string;
};
export const Section = ({ id, title, description, actions, children, className }: SectionProps) => {
return (
<section
id={id}
className={clsx(
"relative w-full overflow-hidden rounded-2xl bg-slate-900/60 p-6 shadow-inner shadow-black/40 ring-1 ring-slate-800",
className,
)}
>
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<h2 className="text-2xl font-semibold text-slate-100">{title}</h2>
{description ? <p className="mt-1 max-w-3xl break-words text-sm text-slate-400">{description}</p> : null}
</div>
{actions ? <div className="flex h-full shrink-0 flex-wrap items-center gap-3">{actions}</div> : null}
</div>
<div className="space-y-6 text-sm text-slate-200">{children}</div>
</section>
);
};

View File

@ -1,5 +0,0 @@
export * from "./Section";
export * from "./Badge";
export * from "./PaginationControls";
export * from "./InfoRow";
export * from "./CopyButton";

View File

@ -1,42 +0,0 @@
import type { ReactNode } from "react";
export type AdminSectionId =
| "overview"
| "storage"
| "uploads"
| "events"
| "users"
| "licenses"
| "stars"
| "system"
| "blockchain"
| "nodes"
| "status"
| "network"
| "network-settings";
export type AdminSection = {
id: AdminSectionId;
label: string;
description: string;
path: string;
icon?: ReactNode;
};
export const ADMIN_SECTIONS: AdminSection[] = [
{ id: "overview", label: "Обзор", description: "Краткий срез состояния узла, окружения и служб", path: "overview" },
{ id: "storage", label: "Хранилище", description: "Загруженность диска и директории контента", path: "storage" },
{ id: "uploads", label: "Загрузки", description: "Отслеживание статуса загрузок и деривативов", path: "uploads" },
{ id: "events", label: "События", description: "Журнал действий ноды и сети", path: "events" },
{ id: "users", label: "Пользователи", description: "Мониторинг пользователей, кошельков и активности", path: "users" },
{ id: "licenses", label: "Лицензии", description: "Статус лицензий и фильтрация по типам", path: "licenses" },
{ id: "stars", label: "Платежи Stars", description: "Управление счетами и анализ платежей", path: "stars" },
{ id: "system", label: "Система", description: "Настройки окружения и состояние сервисов", path: "system" },
{ id: "blockchain", label: "Блокчейн", description: "История задач и метрики блокчейн-интеграции", path: "blockchain" },
{ id: "nodes", label: "Ноды", description: "Роли, версии и последнее появление узлов", path: "nodes" },
{ id: "status", label: "Статус & лимиты", description: "IPFS, очереди и лимиты синхронизации", path: "status" },
{ id: "network", label: "Состояние сети", description: "Мониторинг децентрализованного слоя и репликаций", path: "network" },
{ id: "network-settings", label: "Сеть → Настройки", description: "Интервалы heartbeat/gossip и бэк-офф", path: "network-settings" },
];
export const DEFAULT_ADMIN_SECTION = ADMIN_SECTIONS[0];

View File

@ -1,13 +0,0 @@
import { createContext, useContext } from "react";
import type { AdminContextValue } from "./types";
export const AdminContext = createContext<AdminContextValue | undefined>(undefined);
export const useAdminContext = () => {
const ctx = useContext(AdminContext);
if (!ctx) {
throw new Error("useAdminContext must be used within <AdminContext.Provider>");
}
return ctx;
};

View File

@ -1,356 +0,0 @@
import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
import { NavLink, Navigate, Outlet, useLocation } from "react-router-dom";
import clsx from "clsx";
import { useQueryClient } from "react-query";
import { Routes } from "~/app/router/constants";
import {
useAdminLogin,
useAdminLogout,
useAdminOverview,
} from "~/shared/services/admin";
import { clearAdminAuth, getAdminAuthSnapshot } from "~/shared/libs/admin-auth";
import { isUnauthorizedError } from "~/shared/services/admin";
import { ADMIN_SECTIONS, DEFAULT_ADMIN_SECTION, type AdminSection } from "./config";
import { AdminContext } from "./context";
import type { AuthState, FlashMessage } from "./types";
const initialAuthState: AuthState = getAdminAuthSnapshot().token ? "checking" : "unauthorized";
const resolveErrorMessage = (error: unknown) => {
if (error && typeof error === "object" && "message" in error && typeof (error as any).message === "string") {
return (error as any).message as string;
}
return "Неизвестная ошибка";
};
const AdminFlash = ({ flash, onClose }: { flash: FlashMessage | null; onClose: () => void }) => {
if (!flash) {
return null;
}
const tone =
flash.type === "success"
? "border-emerald-500/60 bg-emerald-500/15 text-emerald-50"
: flash.type === "error"
? "border-rose-500/60 bg-rose-500/15 text-rose-50"
: "border-sky-500/60 bg-sky-500/15 text-sky-50";
return (
<div className="pointer-events-none fixed inset-x-4 top-4 z-50 flex justify-center sm:inset-x-auto sm:left-auto sm:right-6">
<div
className={clsx(
"pointer-events-auto flex w-full max-w-md items-start gap-4 rounded-2xl border px-5 py-4 text-sm shadow-2xl shadow-black/40 backdrop-blur-md",
tone,
)}
>
<span className="flex-1 break-words">{flash.message}</span>
<button
type="button"
className="text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:text-white"
onClick={onClose}
>
Закрыть
</button>
</div>
</div>
);
};
const AdminLoginForm = ({
token,
onTokenChange,
onSubmit,
isSubmitting,
}: {
token: string;
onTokenChange: (value: string) => void;
onSubmit: () => void;
isSubmitting: boolean;
}) => {
return (
<div className="mx-auto max-w-xl rounded-2xl border border-slate-800 bg-slate-900/60 p-8 shadow-xl shadow-black/50">
<h1 className="text-3xl font-semibold text-slate-100">Админ-панель узла</h1>
<p className="mt-2 text-sm text-slate-400">
Введите секретный токен ADMIN_API_TOKEN, чтобы получить доступ к мониторингу и управлению.
</p>
<form
className="mt-6 space-y-4"
onSubmit={(event) => {
event.preventDefault();
onSubmit();
}}
>
<label className="block text-sm font-medium text-slate-200">
Админ-токен
<input
type="password"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-base text-slate-100 shadow-inner focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/40"
value={token}
onChange={(event) => onTokenChange(event.target.value)}
placeholder="••••••"
autoComplete="off"
/>
</label>
<div className="flex items-center justify-between">
<button
type="submit"
className="inline-flex items-center justify-center rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60 disabled:cursor-not-allowed disabled:bg-slate-700"
disabled={isSubmitting}
>
{isSubmitting ? "Проверяем…" : "Войти"}
</button>
<span className="text-xs text-slate-500">
Cookie max-age {Math.round(172800 / 3600)} ч
</span>
</div>
</form>
</div>
);
};
const MobileNav = ({ sections, currentPath }: { sections: AdminSection[]; currentPath: string }) => (
<select
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-200 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:hidden"
value={currentPath}
onChange={(event) => {
const next = event.target.value;
if (next !== currentPath) {
window.location.assign(next);
}
}}
>
{sections.map((section) => {
const to = `${Routes.Admin}/${section.path}`;
return (
<option key={section.id} value={to}>
{section.label}
</option>
);
})}
</select>
);
const DesktopNav = ({
sections,
currentPath,
}: {
sections: AdminSection[];
currentPath: string;
}) => {
return (
<nav className="hidden w-60 shrink-0 flex-col gap-1 md:flex">
{sections.map((section) => {
const to = `${Routes.Admin}/${section.path}`;
const isActive = currentPath.startsWith(to);
return (
<NavLink
key={section.id}
to={to}
className={clsx(
"rounded-xl px-4 py-3 text-sm font-medium transition",
isActive
? "bg-sky-500/10 text-sky-200 ring-1 ring-sky-500/40"
: "text-slate-300 hover:bg-slate-900/60 hover:text-white",
)}
end
>
<div className="flex flex-col">
<span>{section.label}</span>
<span className="mt-1 text-xs text-slate-500">{section.description}</span>
</div>
</NavLink>
);
})}
</nav>
);
};
const AdminLayoutFrame = ({ children }: { children: ReactNode }) => {
const location = useLocation();
const currentPath = location.pathname;
return (
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
<header className="border-b border-slate-800 bg-slate-950/70 backdrop-blur">
<div className="flex w-full items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
<div>
<h1 className="text-xl font-semibold text-white">MY Admin</h1>
<p className="text-xs text-slate-500">Мониторинг и управление узлом</p>
</div>
<div className="flex items-center gap-3 md:hidden">
<MobileNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
</div>
</div>
</header>
<main className="flex w-full flex-1 flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8 md:flex-row">
<DesktopNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
<div className="w-full max-w-full md:flex-1">
<MobileNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
<div className="mt-4 space-y-6 md:mt-0">
{children}
</div>
</div>
</main>
</div>
);
};
export const AdminShell = () => {
const queryClient = useQueryClient();
const [authState, setAuthState] = useState<AuthState>(initialAuthState);
const [token, setToken] = useState("");
const [flash, setFlash] = useState<FlashMessage | null>(null);
useEffect(() => {
if (!flash) {
return;
}
const timeout = setTimeout(() => setFlash(null), 6000);
return () => clearTimeout(timeout);
}, [flash]);
useEffect(() => {
if (authState === "unauthorized") {
queryClient.removeQueries({
predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === "admin",
});
}
}, [authState, queryClient]);
const pushFlash = useCallback((message: FlashMessage) => {
setFlash(message);
}, []);
const clearFlash = useCallback(() => {
setFlash(null);
}, []);
const handleRequestError = useCallback(
(error: unknown, fallbackMessage: string) => {
if (isUnauthorizedError(error)) {
clearAdminAuth();
setAuthState("unauthorized");
pushFlash({ type: "info", message: "Сессия истекла. Введите админ-токен заново." });
return;
}
const tail = resolveErrorMessage(error);
pushFlash({
type: "error",
message: `${fallbackMessage}: ${tail}`,
});
},
[pushFlash],
);
const invalidateAll = useCallback(async () => {
await queryClient.invalidateQueries({
predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === "admin",
});
}, [queryClient]);
useAdminOverview({
enabled: authState === "checking",
retry: false,
onSuccess: () => {
setAuthState("authorized");
},
onError: (error) => {
handleRequestError(error, "Не удалось проверить админ-сессию");
},
});
const loginMutation = useAdminLogin({
onSuccess: async () => {
setAuthState("authorized");
setToken("");
pushFlash({ type: "success", message: "Админ-сессия активирована" });
await invalidateAll();
},
onError: (error) => {
if (isUnauthorizedError(error)) {
clearAdminAuth();
pushFlash({ type: "error", message: "Неверный токен" });
return;
}
handleRequestError(error, "Ошибка входа");
},
});
const logoutMutation = useAdminLogout({
onSuccess: async () => {
setAuthState("unauthorized");
pushFlash({ type: "info", message: "Сессия завершена" });
await invalidateAll();
},
onError: (error) => {
handleRequestError(error, "Ошибка выхода");
},
});
const contextValue = useMemo(
() => ({
authState,
isAuthorized: authState === "authorized",
pushFlash,
clearFlash,
handleRequestError,
invalidateAll,
}),
[authState, pushFlash, clearFlash, handleRequestError, invalidateAll],
);
return (
<AdminContext.Provider value={contextValue}>
{authState !== "authorized" ? (
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-6 py-10">
<div className="w-full max-w-xl space-y-6">
<AdminLoginForm
token={token}
onTokenChange={setToken}
onSubmit={() => {
if (!token) {
pushFlash({ type: "info", message: "Введите токен" });
return;
}
loginMutation.mutate({ secret: token });
}}
isSubmitting={loginMutation.isLoading}
/>
</div>
</div>
) : (
<AdminLayoutFrame>
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200 ring-1 ring-emerald-500/40">
Авторизован
</span>
<button
type="button"
className="rounded-lg border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-300 transition hover:border-sky-500 hover:text-white"
onClick={() => invalidateAll()}
>
Обновить все данные
</button>
</div>
<button
type="button"
className="rounded-lg bg-rose-600 px-3 py-1 text-xs font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:bg-rose-900/50"
onClick={() => logoutMutation.mutate()}
disabled={logoutMutation.isLoading}
>
Выйти
</button>
</div>
<Outlet />
</AdminLayoutFrame>
)}
<AdminFlash flash={flash} onClose={clearFlash} />
</AdminContext.Provider>
);
};
export const AdminPage = AdminShell;
export const AdminIndexRedirect = () => {
return <Navigate to={`${Routes.Admin}/${DEFAULT_ADMIN_SECTION.path}`} replace />;
};

View File

@ -1,171 +0,0 @@
import { useAdminBlockchain } from "~/shared/services/admin";
import { Section, Badge, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatDate, formatUnknown, numberFormatter } from "../utils/format";
const MetricCard = ({ label, value }: { label: string; value: string }) => {
return (
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{value}</p>
</div>
);
};
export const AdminBlockchainPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const blockchainQuery = useAdminBlockchain({
enabled: isAuthorized,
refetchInterval: 30_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить данные блокчейна"),
});
if (!blockchainQuery.data) {
return blockchainQuery.isLoading ? (
<Section id="blockchain" title="Блокчейн" description="Очередь задач и последние транзакции">
Загрузка
</Section>
) : null;
}
const { counts, recent } = blockchainQuery.data;
return (
<Section
id="blockchain"
title="Блокчейн"
description="Очередь задач и последние транзакции"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => blockchainQuery.refetch()}
disabled={blockchainQuery.isFetching}
>
{blockchainQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{Object.entries(counts).map(([key, value]) => (
<MetricCard key={key} label={key} value={numberFormatter.format(value)} />
))}
</div>
<div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">ID</th>
<th className="px-3 py-3">Назначение</th>
<th className="px-3 py-3">Сумма</th>
<th className="px-3 py-3">Статус</th>
<th className="px-3 py-3">Epoch · Seqno</th>
<th className="px-3 py-3">Hash</th>
<th className="px-3 py-3">Обновлено</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{recent.map((task) => (
<tr key={task.id} className="hover:bg-slate-900/50">
<td className="px-3 py-2">
<div className="flex items-center gap-2">
<span className="font-mono text-xs text-slate-300">{task.id}</span>
<CopyButton
value={task.id}
aria-label="Скопировать ID задачи"
successMessage="ID задачи скопирован"
className="h-6 w-6"
/>
</div>
</td>
<td className="px-3 py-2 break-words">{task.destination || "—"}</td>
<td className="px-3 py-2">{formatUnknown(task.amount)}</td>
<td className="px-3 py-2">
<Badge tone={task.status === "done" ? "success" : task.status === "failed" ? "danger" : "neutral"}>
{task.status}
</Badge>
</td>
<td className="px-3 py-2">
{task.epoch ?? "—"} · {task.seqno ?? "—"}
</td>
<td className="px-3 py-2">
{task.transaction_hash ? (
<div className="flex items-center gap-2">
<span className="break-all font-mono text-xs text-slate-500">{task.transaction_hash}</span>
<CopyButton
value={task.transaction_hash}
aria-label="Скопировать хеш транзакции"
successMessage="Хеш транзакции скопирован"
className="h-6 w-6"
/>
</div>
) : (
<span className="text-xs text-slate-500"></span>
)}
</td>
<td className="px-3 py-2">{formatDate(task.updated)}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="grid gap-3 md:hidden">
{recent.map((task) => (
<div key={`task-card-${task.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span className="font-mono text-xs text-slate-300">{task.id}</span>
<CopyButton
value={task.id}
aria-label="Скопировать ID задачи"
successMessage="ID задачи скопирован"
className="h-6 w-6"
/>
</div>
<Badge tone={task.status === "done" ? "success" : task.status === "failed" ? "danger" : "neutral"}>
{task.status}
</Badge>
</div>
<div className="mt-3 grid gap-2 text-xs text-slate-300">
<div className="flex flex-col gap-1">
<span className="text-slate-500">Назначение</span>
<span className="break-words">{task.destination || "—"}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Сумма</span>
<span>{formatUnknown(task.amount)}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Epoch · Seqno</span>
<span>
{task.epoch ?? "—"} · {task.seqno ?? "—"}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Hash</span>
{task.transaction_hash ? (
<div className="flex items-center gap-2">
<span className="break-all font-mono text-[11px] text-slate-500">{task.transaction_hash}</span>
<CopyButton
value={task.transaction_hash}
aria-label="Скопировать хеш транзакции"
successMessage="Хеш транзакции скопирован"
className="h-6 w-6"
/>
</div>
) : (
<span className="text-slate-500"></span>
)}
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Обновлено</span>
<span>{formatDate(task.updated)}</span>
</div>
</div>
</div>
))}
</div>
</Section>
);
};

View File

@ -1,307 +0,0 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Routes } from "~/app/router/constants";
import { useAdminEvents } from "~/shared/services/admin";
import { Section, PaginationControls, CopyButton, Badge } from "../components";
import { useAdminContext } from "../context";
import { formatDate, numberFormatter } from "../utils/format";
const EVENT_TYPE_LABELS: Record<string, string> = {
content_uploaded: "Загрузка контента",
content_indexed: "Индексация контента",
stars_payment: "Платёж Stars",
node_registered: "Регистрация ноды",
user_role_changed: "Изменение ролей",
};
const EVENT_STATUS_TONES: Record<string, "success" | "warn" | "danger" | "neutral"> = {
local: "neutral",
recorded: "neutral",
processing: "warn",
applied: "success",
failed: "danger",
};
const linkLabels: Record<string, string> = {
admin_uploads: "К загрузкам",
content_view: "Просмотр контента",
admin_stars: "К платежам",
admin_user: "К пользователю",
};
export const AdminEventsPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const [search, setSearch] = useState("");
const [typeFilter, setTypeFilter] = useState<string | null>(null);
const [statusFilter, setStatusFilter] = useState<string | null>(null);
const [originFilter, setOriginFilter] = useState<string | null>(null);
const [page, setPage] = useState(0);
const limit = 50;
const navigate = useNavigate();
const normalizedSearch = search.trim() || null;
useEffect(() => {
setPage(0);
}, [normalizedSearch, typeFilter, statusFilter, originFilter]);
const eventsQuery = useAdminEvents(
{
limit,
offset: page * limit,
search: normalizedSearch || undefined,
type: typeFilter || undefined,
status: statusFilter || undefined,
origin: originFilter || undefined,
},
{
enabled: isAuthorized,
keepPreviousData: true,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить события"),
},
);
const availableFilters = eventsQuery.data?.available_filters ?? {
types: {},
statuses: {},
origins: {},
};
const renderLink = (key: string, url: string | null) => {
if (!url) {
return null;
}
const label = linkLabels[key] ?? key;
if (url.startsWith("http")) {
return (
<a
key={`${key}-${url}`}
href={url}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg border border-sky-500/40 px-3 py-1 text-[11px] font-semibold text-sky-100 transition hover:border-sky-400 hover:text-white"
>
{label}
</a>
);
}
const normalized = url.startsWith("/") ? url.slice(1) : url;
return (
<button
key={`${key}-${url}`}
type="button"
onClick={() => navigate(`${Routes.Admin}/${normalized}`)}
className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
>
{label}
</button>
);
};
const events = eventsQuery.data?.items ?? [];
const total = eventsQuery.data?.total ?? 0;
return (
<Section
id="events"
title="События"
description="Журнал контента, платежей и сетевых операций"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => eventsQuery.refetch()}
disabled={eventsQuery.isFetching}
>
{eventsQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
<p className="text-xs uppercase tracking-wide text-slate-500">Всего событий</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(total)}</p>
<p className="mt-1 text-xs text-slate-500">На странице {numberFormatter.format(events.length)}</p>
</div>
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
<p className="text-xs uppercase tracking-wide text-slate-500">Типы</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.types).length}</p>
<p className="mt-1 text-xs text-slate-500">Фильтр по типу помогает сузить список</p>
</div>
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
<p className="text-xs uppercase tracking-wide text-slate-500">Статусы</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.statuses).length}</p>
<p className="mt-1 text-xs text-slate-500">Например, только требующие действий</p>
</div>
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
<p className="text-xs uppercase tracking-wide text-slate-500">Источники</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.origins).length}</p>
<p className="mt-1 text-xs text-slate-500">Отслеживайте trusted-нод</p>
</div>
</div>
<div className="mt-6 grid gap-3 md:grid-cols-4">
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="UID, CID, invoice, json"
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
<select
value={typeFilter ?? ""}
onChange={(event) => setTypeFilter(event.target.value || null)}
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="">Все типы</option>
{Object.entries(availableFilters.types).map(([type, count]) => (
<option key={`event-type-${type}`} value={type}>
{EVENT_TYPE_LABELS[type] ?? type} {numberFormatter.format(count)}
</option>
))}
</select>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
<select
value={statusFilter ?? ""}
onChange={(event) => setStatusFilter(event.target.value || null)}
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="">Все статусы</option>
{Object.entries(availableFilters.statuses).map(([status, count]) => (
<option key={`event-status-${status}`} value={status}>
{status} {numberFormatter.format(count)}
</option>
))}
</select>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Источник</label>
<select
value={originFilter ?? ""}
onChange={(event) => setOriginFilter(event.target.value || null)}
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="">Все источники</option>
{Object.entries(availableFilters.origins).map(([origin, count]) => (
<option key={`event-origin-${origin}`} value={origin}>
{origin} {numberFormatter.format(count)}
</option>
))}
</select>
</div>
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
onClick={() => {
setSearch("");
setTypeFilter(null);
setStatusFilter(null);
setOriginFilter(null);
}}
>
Сбросить фильтры
</button>
</div>
{eventsQuery.isLoading && !eventsQuery.data ? (
<div className="mt-6 rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
Загружаем события
</div>
) : null}
<div className="mt-6 grid gap-4">
{events.length === 0 ? (
<div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
События не найдены.
</div>
) : (
events.map((event) => {
const typeLabel = EVENT_TYPE_LABELS[event.event_type] ?? event.event_type;
const statusTone = EVENT_STATUS_TONES[event.status] ?? 'neutral';
const statusBadgeTone: "success" | "warn" | "danger" | "neutral" = statusTone;
const linkEntries = Object.entries(event.links ?? {});
return (
<div key={`event-${event.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/50 p-5 shadow-inner shadow-black/40">
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-center gap-2 text-sm text-slate-200">
<span className="font-semibold">#{numberFormatter.format(event.seq)}</span>
<Badge tone="neutral">{typeLabel}</Badge>
<Badge tone={statusBadgeTone}>{event.status}</Badge>
</div>
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span>UID: {event.uid}</span>
<CopyButton
value={event.uid}
aria-label="Скопировать UID"
successMessage="UID скопирован"
className="h-6 w-6"
/>
</div>
</div>
<div className="text-xs text-slate-400 text-right">
<div>Создано: {formatDate(event.created_at)}</div>
<div>Получено: {formatDate(event.received_at)}</div>
<div>Применено: {formatDate(event.applied_at)}</div>
</div>
</div>
<div className="mt-3 grid gap-2 text-xs text-slate-300 md:grid-cols-2">
<div>
<span className="text-slate-500">Источник</span>
<div className="mt-1 flex flex-wrap items-center gap-2 break-all text-[11px] text-slate-300">
<span>{event.origin_public_key ?? "—"}</span>
{event.origin_public_key ? (
<CopyButton
value={event.origin_public_key}
aria-label="Скопировать ключ"
successMessage="Публичный ключ скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<div className="text-[11px] text-slate-500">{event.origin_host ?? "—"}</div>
</div>
<div>
<span className="text-slate-500">Ссылки</span>
{linkEntries.length === 0 ? (
<div className="mt-1 text-[11px] text-slate-500">Нет прямых ссылок</div>
) : (
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs">
{linkEntries.map(([key, url]) => renderLink(key, url))}
</div>
)}
</div>
</div>
<details className="mt-4 rounded-xl border border-slate-800 bg-slate-950/40">
<summary className="cursor-pointer px-4 py-2 text-xs font-semibold text-slate-200">Показать payload</summary>
<pre className="max-h-60 overflow-auto px-4 py-3 text-[11px] leading-relaxed text-slate-200">
{JSON.stringify(event.payload ?? {}, null, 2)}
</pre>
</details>
</div>
);
})
)}
</div>
<div className="mt-6">
<PaginationControls
total={total}
limit={limit}
page={page}
onPageChange={(next) => setPage(next)}
/>
</div>
</Section>
);
};

View File

@ -1,385 +0,0 @@
import { useEffect, useState } from "react";
import { useAdminLicenses } from "~/shared/services/admin";
import { Section, PaginationControls, CopyButton, Badge } from "../components";
import { useAdminContext } from "../context";
import { formatDate, numberFormatter } from "../utils/format";
export const AdminLicensesPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const [search, setSearch] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [typeFilter, setTypeFilter] = useState("all");
const [licenseTypeFilter, setLicenseTypeFilter] = useState("all");
const [page, setPage] = useState(0);
const limit = 50;
const normalizedSearch = search.trim();
const licensesQuery = useAdminLicenses(
{
limit,
offset: page * limit,
search: normalizedSearch || undefined,
status: statusFilter !== "all" ? statusFilter : undefined,
type: typeFilter !== "all" ? typeFilter : undefined,
license_type: licenseTypeFilter !== "all" ? licenseTypeFilter : undefined,
},
{
enabled: isAuthorized,
keepPreviousData: true,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить лицензии"),
},
);
useEffect(() => {
setPage(0);
}, [normalizedSearch, statusFilter, typeFilter, licenseTypeFilter]);
if (licensesQuery.isLoading && !licensesQuery.data) {
return (
<Section id="licenses" title="Лицензии" description="On-chain лицензии и связанные активы">
Загрузка
</Section>
);
}
if (!licensesQuery.data) {
return (
<Section id="licenses" title="Лицензии" description="On-chain лицензии и связанные активы">
<p className="text-sm text-slate-400">Выберите вкладку «Лицензии», чтобы загрузить данные.</p>
</Section>
);
}
const { items, counts, total } = licensesQuery.data;
const statusOptions = Object.keys(counts.status || {});
const typeOptions = Object.keys(counts.type || {});
const kindOptions = Object.keys(counts.license_type || {});
return (
<Section
id="licenses"
title="Лицензии"
description="Привязанные лицензии со сведениями о владельцах и контенте"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => licensesQuery.refetch()}
disabled={licensesQuery.isFetching}
>
{licensesQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div className="flex flex-col gap-2 md:flex-row md:items-end">
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Адрес, владелец, hash"
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-64"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
<select
value={statusFilter}
onChange={(event) => setStatusFilter(event.target.value)}
className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="all">Все</option>
{statusOptions.map((option) => (
<option key={`license-status-${option}`} value={option}>
{option}
</option>
))}
</select>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
<select
value={typeFilter}
onChange={(event) => setTypeFilter(event.target.value)}
className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="all">Все</option>
{typeOptions.map((option) => (
<option key={`license-type-${option}`} value={option}>
{option}
</option>
))}
</select>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">license_type</label>
<select
value={licenseTypeFilter}
onChange={(event) => setLicenseTypeFilter(event.target.value)}
className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="all">Все</option>
{kindOptions.map((option) => (
<option key={`license-kind-${option}`} value={option}>
{option === "unknown" ? "Не указано" : option}
</option>
))}
</select>
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
onClick={() => {
setSearch("");
setStatusFilter("all");
setTypeFilter("all");
setLicenseTypeFilter("all");
}}
>
Сбросить
</button>
</div>
</div>
<div className="mt-4 hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">Лицензия</th>
<th className="px-3 py-3">On-chain</th>
<th className="px-3 py-3">Пользователь</th>
<th className="px-3 py-3">Контент</th>
<th className="px-3 py-3">Дата</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{items.length === 0 ? (
<tr>
<td colSpan={5} className="px-3 py-6 text-center text-sm text-slate-400">
Ничего не найдено.
</td>
</tr>
) : (
items.map((license) => (
<tr key={`license-${license.id}`} className="hover:bg-slate-900/40">
<td className="px-3 py-3 align-top">
<div className="flex flex-wrap items-center gap-2 font-semibold text-slate-100">
<span>#{numberFormatter.format(license.id)}</span>
<CopyButton
value={license.id}
aria-label="Скопировать ID лицензии"
successMessage="ID лицензии скопирован"
className="h-6 w-6"
/>
</div>
<div className="text-xs text-slate-400">{license.type ?? "—"} · {license.status ?? "—"}</div>
<div className="text-[10px] uppercase tracking-wide text-slate-500">
license_type: {license.license_type ?? "—"}
</div>
</td>
<td className="px-3 py-3 align-top">
<div className="flex flex-col gap-1">
{license.onchain_address ? (
<div className="flex items-center gap-2 text-xs">
<a
href={`https://tonviewer.com/${license.onchain_address}`}
target="_blank"
rel="noreferrer"
className="break-all text-sky-300 hover:text-sky-200"
>
{license.onchain_address}
</a>
<CopyButton
value={license.onchain_address}
aria-label="Скопировать on-chain адрес"
successMessage="On-chain адрес скопирован"
className="h-6 w-6"
/>
</div>
) : (
<div className="text-xs text-slate-500"></div>
)}
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
<span className="break-all">
Владелец: {license.owner_address ?? "—"}
</span>
{license.owner_address ? (
<CopyButton
value={license.owner_address}
aria-label="Скопировать адрес владельца"
successMessage="Адрес владельца скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</div>
</td>
<td className="px-3 py-3 align-top">
{license.user ? (
<div className="flex flex-col gap-1 text-xs text-slate-300">
<div className="flex flex-wrap items-center gap-2">
<span>ID {numberFormatter.format(license.user.id)}</span>
<CopyButton
value={license.user.id}
aria-label="Скопировать ID пользователя"
successMessage="ID пользователя скопирован"
className="h-6 w-6"
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<span>TG {numberFormatter.format(license.user.telegram_id)}</span>
<CopyButton
value={license.user.telegram_id}
aria-label="Скопировать Telegram ID"
successMessage="Telegram ID скопирован"
className="h-6 w-6"
/>
</div>
</div>
) : (
<div className="text-xs text-slate-500"></div>
)}
</td>
<td className="px-3 py-3 align-top">
{license.content ? (
<>
<div className="text-xs text-slate-300">{license.content.title}</div>
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
<span className="break-all">{license.content.hash}</span>
{license.content.hash ? (
<CopyButton
value={license.content.hash}
aria-label="Скопировать хеш контента"
successMessage="Хеш контента скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</>
) : (
<div className="text-xs text-slate-500"></div>
)}
</td>
<td className="px-3 py-3 align-top text-xs text-slate-400">
<div>Создано: {formatDate(license.created_at)}</div>
<div>Обновлено: {formatDate(license.updated_at)}</div>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
<div className="mt-4 grid gap-4 md:hidden">
{items.length === 0 ? (
<div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
Ничего не найдено.
</div>
) : (
items.map((license) => (
<div key={`license-card-${license.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
<div className="flex items-start justify-between gap-2">
<div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-100">
<span>#{numberFormatter.format(license.id)}</span>
<CopyButton
value={license.id}
aria-label="Скопировать ID лицензии"
successMessage="ID лицензии скопирован"
className="h-6 w-6"
/>
</div>
<Badge tone={license.status === "active" ? "success" : "neutral"}>
{license.status ?? "—"}
</Badge>
</div>
<div className="mt-2 text-xs text-slate-400">
<span>{license.type ?? "—"}</span> · <span>license_type: {license.license_type ?? "—"}</span>
</div>
<div className="mt-3 space-y-3 text-xs text-slate-300">
<div className="flex flex-col gap-1">
<span className="text-slate-500">On-chain адрес</span>
<div className="flex items-center gap-2">
<span className="break-all text-sky-300">
{license.onchain_address ?? "—"}
</span>
{license.onchain_address ? (
<CopyButton
value={license.onchain_address}
aria-label="Скопировать on-chain адрес"
successMessage="On-chain адрес скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Адрес владельца</span>
<div className="flex items-center gap-2 text-[11px] text-slate-400">
<span className="break-all">{license.owner_address ?? "—"}</span>
{license.owner_address ? (
<CopyButton
value={license.owner_address}
aria-label="Скопировать адрес владельца"
successMessage="Адрес владельца скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</div>
{license.user ? (
<div className="flex flex-wrap items-center gap-2 text-slate-300">
<span>ID {numberFormatter.format(license.user.id)}</span>
<CopyButton
value={license.user.id}
aria-label="Скопировать ID пользователя"
successMessage="ID пользователя скопирован"
className="h-6 w-6"
/>
<span>· TG {numberFormatter.format(license.user.telegram_id)}</span>
<CopyButton
value={license.user.telegram_id}
aria-label="Скопировать Telegram ID"
successMessage="Telegram ID скопирован"
className="h-6 w-6"
/>
</div>
) : null}
{license.content ? (
<div className="flex flex-col gap-1">
<span className="text-slate-500">Контент</span>
<span>{license.content.title}</span>
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
<span className="break-all">{license.content.hash}</span>
{license.content.hash ? (
<CopyButton
value={license.content.hash}
aria-label="Скопировать хеш контента"
successMessage="Хеш контента скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</div>
) : null}
</div>
<div className="mt-3 text-[11px] text-slate-500">
<div>Создано: {formatDate(license.created_at)}</div>
<div>Обновлено: {formatDate(license.updated_at)}</div>
</div>
</div>
))
)}
</div>
<div className="mt-4">
<PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
</div>
</Section>
);
};

View File

@ -1,329 +0,0 @@
import React, { useMemo, useState } from "react";
import { useQuery } from "react-query";
import { request } from "~/shared/libs/request";
const ratioTone = (v: number) => {
if (v >= 0.9) return "text-emerald-400";
if (v >= 0.6) return "text-yellow-400";
return "text-red-400";
};
export const AdminNetworkPage: React.FC = () => {
const [filterText, setFilterText] = useState("");
const [reachabilityFilter, setReachabilityFilter] = useState<"all" | "healthy" | "islands">("all");
const [sortBy, setSortBy] = useState<"leases" | "leaderships" | "reachability">("leases");
const [roleFilter, setRoleFilter] = useState<"all" | "trusted" | "read-only" | "deny">("all");
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(25);
const { data, isLoading, error, refetch } = useQuery(
["admin", "network", page, pageSize],
async () => {
const { data } = await request.get("/admin.network", { params: { page, page_size: pageSize } });
return data as any;
},
{ keepPreviousData: true },
);
const members = data?.members ?? [];
const replication = data?.per_node_replication ?? {};
const summary = data?.summary;
const receipts = data?.receipts ?? [];
const [selectedNode, setSelectedNode] = useState<any | null>(null);
const total = data?.paging?.total ?? (data?.members?.length ?? 0);
const totalPages = Math.max(1, Math.ceil(total / pageSize));
const columns = [
{ key: "node_id", label: "NodeID" },
{ key: "public_host", label: "Публичный адрес" },
{ key: "version", label: "Версия" },
{ key: "role", label: "Роль" },
{ key: "ip", label: "IP" },
{ key: "asn", label: "ASN" },
{ key: "reachability_ratio", label: "Достижимость" },
{ key: "leases", label: "Реплики" },
{ key: "leaderships", label: "Лидерства" },
{ key: "receipts", label: "Квитанции" },
];
const rows = useMemo(() => {
let list = members.map((m: any) => {
const p = replication[m.node_id] ?? { leases_held: 0, leaderships: 0, sample_contents: [] };
return {
...m,
leases: p.leases_held,
leaderships: p.leaderships,
_samples: p.sample_contents,
};
});
// filter by text
if (filterText.trim()) {
const t = filterText.trim().toLowerCase();
list = list.filter((r: any) =>
(r.public_host ?? "").toLowerCase().includes(t) ||
(r.ip ?? "").toLowerCase().includes(t) ||
(r.node_id ?? "").toLowerCase().includes(t)
);
}
// role filter
if (roleFilter !== "all") {
list = list.filter((r: any) => (r.role ?? "read-only") === roleFilter);
}
// reachability filter
if (reachabilityFilter === "healthy") {
list = list.filter((r: any) => r.reachability_ratio >= 0.6);
} else if (reachabilityFilter === "islands") {
list = list.filter((r: any) => r.reachability_ratio < 0.6);
}
// sorting
list.sort((a: any, b: any) => {
if (sortBy === "leases") return b.leases - a.leases;
if (sortBy === "leaderships") return b.leaderships - a.leaderships;
return b.reachability_ratio - a.reachability_ratio;
});
// reset page if filters reduce list
return list;
}, [members, replication, filterText, reachabilityFilter, sortBy, roleFilter]);
const paged = rows; // сервер уже порезал список
if (isLoading) return <div className="p-4">Загрузка сети</div>;
if (error) return <div className="p-4 text-red-400">Ошибка загрузки: {String(error)}</div>;
return (
<div className="flex flex-col gap-6 p-4">
<div className="grid grid-cols-2 md:grid-cols-6 gap-4">
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Оценка размера сети</div>
<div className="text-2xl font-semibold">{summary?.n_estimate ?? 0}</div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Оценка trustedсети</div>
<div className="text-2xl font-semibold">{summary?.n_estimate_trusted ?? 0}</div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Активные (все)</div>
<div className="text-2xl font-semibold">{summary?.active ?? 0}</div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Активные (trusted)</div>
<div className="text-2xl font-semibold">{summary?.active_trusted ?? 0}</div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Острова</div>
<div className="text-2xl font-semibold text-yellow-400">{summary?.islands ?? 0}</div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Конфликты репликаций</div>
<div className="text-sm">Недобор: <span className="text-red-400">{summary?.replication_conflicts.under ?? 0}</span></div>
<div className="text-sm">Перебор: <span className="text-yellow-400">{summary?.replication_conflicts.over ?? 0}</span></div>
</div>
<div className="rounded-lg bg-slate-800/50 p-3">
<div className="text-xs text-slate-400">Gossip/Backoff</div>
<div className="text-sm">Интервал: {summary?.config?.gossip_interval_sec ?? '-'} c</div>
<div className="text-sm">База: {summary?.config?.gossip_backoff_base_sec ?? '-'} c</div>
<div className="text-sm">Потолок: {summary?.config?.gossip_backoff_cap_sec ?? '-' } c</div>
</div>
</div>
<div className="rounded-lg bg-slate-800/50 overflow-hidden">
<div className="px-3 py-2 text-sm text-slate-300 border-b border-slate-700 flex justify-between items-center">
<div className="flex items-center gap-3 flex-wrap">
<div>Узлы сети</div>
<input
className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700 outline-none"
placeholder="Фильтр: host/IP/NodeID"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>
<select
className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
value={roleFilter}
onChange={(e) => setRoleFilter(e.target.value as any)}
>
<option value="all">Любая роль</option>
<option value="trusted">Только trusted</option>
<option value="read-only">Только read-only</option>
<option value="deny">Только deny</option>
</select>
<select
className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
value={reachabilityFilter}
onChange={(e) => setReachabilityFilter(e.target.value as any)}
>
<option value="all">Все</option>
<option value="healthy">Только здоровые</option>
<option value="islands">Только острова</option>
</select>
<select
className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
>
<option value="leases">По репликам</option>
<option value="leaderships">По лидерствам</option>
<option value="reachability">По достижимости</option>
</select>
<select
className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
value={pageSize}
onChange={(e) => { setPage(1); setPageSize(parseInt(e.target.value)); }}
>
<option value={25}>25</option>
<option value={50}>50</option>
<option value={100}>100</option>
</select>
</div>
<button onClick={() => refetch()} className="text-xs px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded">
Обновить
</button>
</div>
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead>
<tr className="bg-slate-900/40">
{columns.map((c) => (
<th key={c.key} className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">{c.label}</th>
))}
</tr>
</thead>
<tbody>
{paged.map((r: any) => (
<tr key={r.node_id} className="hover:bg-slate-900/30 cursor-pointer" onClick={() => setSelectedNode(r)}>
<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.node_id.slice(0, 10)}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.public_host ?? '-'}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.version ?? '-'}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.role}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.ip ?? '-'}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.asn ?? '-'}</td>
<td className={`px-3 py-2 whitespace-nowrap ${ratioTone(r.reachability_ratio)}`}>{(r.reachability_ratio * 100).toFixed(0)}%</td>
<td className="px-3 py-2 whitespace-nowrap">{r.leases}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.leaderships}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.receipts_asn_unique ?? 0}/{r.receipts_total ?? 0}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Pagination controls */}
<div className="px-3 py-2 border-t border-slate-700 flex items-center justify-between text-xs text-slate-400">
<div>Стр. {page} из {totalPages} Всего: {total}</div>
<div className="flex gap-2">
<button className="px-2 py-1 bg-slate-700 rounded disabled:opacity-50" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Назад</button>
<button className="px-2 py-1 bg-slate-700 rounded disabled:opacity-50" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>Вперёд</button>
</div>
</div>
</div>
{/* Reachability receipts table */}
<div className="rounded-lg bg-slate-800/50 overflow-hidden">
<div className="px-3 py-2 text-sm text-slate-300 border-b border-slate-700 flex justify-between items-center">
<div>Квитанции достижимости</div>
<div className="text-xs text-slate-400">{receipts.length} шт.</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead>
<tr className="bg-slate-900/40">
<th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Target</th>
<th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Issuer</th>
<th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">ASN</th>
<th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Статус</th>
</tr>
</thead>
<tbody>
{receipts.map((r: any, i: number) => (
<tr key={`${r.issuer_id}:${r.target_id}:${i}`} className="hover:bg-slate-900/30">
<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.target_id.slice(0, 10)}</td>
<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.issuer_id.slice(0, 10)}</td>
<td className="px-3 py-2 whitespace-nowrap">{r.asn ?? '-'}</td>
<td className="px-3 py-2 whitespace-nowrap">
{r.status === 'valid' && <span className="text-emerald-400">подпись ок</span>}
{r.status === 'bad_signature' && <span className="text-red-400">ошибка подписи</span>}
{r.status === 'unknown_issuer' && <span className="text-yellow-400">неизвестный эмитент</span>}
{r.status === 'mismatch_node_id' && <span className="text-orange-400">node_idpubkey</span>}
{r.status === 'unknown' && <span className="text-slate-400"></span>}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="text-xs text-slate-500">
Подсказка: недобор/перебор репликаций сигнализируют о проблемах с диверсификацией или подсчётом N_estimate.
</div>
{selectedNode && (
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
<div className="bg-slate-900 rounded-lg border border-slate-700 w-[min(92vw,720px)] max-h-[80vh] overflow-auto">
<div className="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
<div className="text-sm text-slate-300">Детали узла</div>
<button className="text-xs px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded" onClick={() => setSelectedNode(null)}>Закрыть</button>
</div>
<div className="p-4 text-sm space-y-2">
<div><span className="text-slate-400">NodeID:</span> <span className="font-mono text-xs">{selectedNode.node_id}</span></div>
<div><span className="text-slate-400">Публичный адрес:</span> {selectedNode.public_host ?? '—'}</div>
<div className="grid grid-cols-2 gap-3">
<div><span className="text-slate-400">Версия:</span> {selectedNode.version ?? '—'}</div>
<div><span className="text-slate-400">Роль:</span> {selectedNode.role}</div>
<div><span className="text-slate-400">IP:</span> {selectedNode.ip ?? '—'}</div>
<div><span className="text-slate-400">ASN:</span> {selectedNode.asn ?? '—'}</div>
<div><span className="text-slate-400">Достижимость:</span> {(selectedNode.reachability_ratio * 100).toFixed(0)}%</div>
<div><span className="text-slate-400">Квитанции:</span> {selectedNode.receipts_asn_unique ?? 0}/{selectedNode.receipts_total ?? 0}</div>
<div><span className="text-slate-400">Реплики:</span> {selectedNode.leases}</div>
<div><span className="text-slate-400">Лидерства:</span> {selectedNode.leaderships}</div>
</div>
<div>
<div className="text-slate-400 mb-1">Примеры контента:</div>
<div className="flex flex-wrap gap-2">
{(selectedNode._samples ?? []).map((c: string) => (
<span key={c} className="px-2 py-1 bg-slate-800 rounded text-xs font-mono">{c.slice(0,10)}</span>
))}
{(!selectedNode._samples || selectedNode._samples.length === 0) && (
<span className="text-slate-500"></span>
)}
</div>
</div>
<div>
<div className="text-slate-400 mb-1">Конфликты:</div>
<div className="max-h-40 overflow-auto border border-slate-800 rounded">
<table className="min-w-full text-xs">
<thead className="bg-slate-900">
<tr>
<th className="px-2 py-1 text-left text-slate-400">Тип</th>
<th className="px-2 py-1 text-left text-slate-400">Время</th>
<th className="px-2 py-1 text-left text-slate-400">Content</th>
</tr>
</thead>
<tbody>
{(selectedNode.conflict_samples ?? []).map((item: any, idx: number) => (
<tr key={idx} className="odd:bg-slate-900/40">
<td className="px-2 py-1 whitespace-nowrap">{item.type}</td>
<td className="px-2 py-1 whitespace-nowrap">{item.ts ? new Date(item.ts * 1000).toLocaleString() : '—'}</td>
<td className="px-2 py-1 font-mono whitespace-nowrap">{(item.content_id || '').slice(0, 10)}</td>
</tr>
))}
{(!selectedNode.conflict_samples || selectedNode.conflict_samples.length === 0) && (
<tr><td colSpan={3} className="px-2 py-2 text-slate-500 text-center">Нет данных</td></tr>
)}
</tbody>
</table>
</div>
</div>
{selectedNode.public_host && (
<div className="pt-2">
<a href={selectedNode.public_host} target="_blank" rel="noreferrer" className="text-emerald-400 hover:underline">Открыть узел</a>
</div>
)}
</div>
</div>
</div>
)}
</div>
);
};
export default AdminNetworkPage;

View File

@ -1,71 +0,0 @@
import { useEffect, useState } from "react";
import { request } from "~/shared/libs/request";
type Config = {
heartbeat_interval: number;
lease_ttl: number;
gossip_interval_sec: number;
gossip_backoff_base_sec: number;
gossip_backoff_cap_sec: number;
};
export const AdminNetworkSettingsPage: React.FC = () => {
const [cfg, setCfg] = useState<Config | null>(null);
const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null);
const load = async () => {
try {
const { data } = await request.get("/admin.network.config");
setCfg(data.config);
} catch (e: any) {
setError(String(e?.message || e));
}
};
useEffect(() => { void load(); }, []);
const update = async () => {
if (!cfg) return;
setSaving(true);
setError(null);
try {
await request.post("/admin.network.config.set", cfg);
await load();
} catch (e: any) {
setError(String(e?.message || e));
} finally {
setSaving(false);
}
};
if (!cfg) return <div className="p-4">Загрузка настроек</div>;
const Field: React.FC<{ label: string; value: number; onChange: (v:number)=>void; tip?: string }> = ({label, value, onChange, tip}) => (
<label className="flex flex-col gap-1">
<span className="text-xs text-slate-400">{label}</span>
<input type="number" className="bg-slate-900/50 px-2 py-1 rounded border border-slate-700" value={value} onChange={(e)=>onChange(parseInt(e.target.value || '0'))} />
{tip && <span className="text-[10px] text-slate-500">{tip}</span>}
</label>
);
return (
<div className="p-4 flex flex-col gap-4">
<div className="text-lg font-semibold">Сеть Настройки</div>
{error && <div className="text-sm text-red-400">Ошибка: {error}</div>}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field label="Интервал heartbeat (сек)" value={cfg.heartbeat_interval} onChange={(v)=>setCfg({...cfg, heartbeat_interval: v})} tip="Период обновления лизов" />
<Field label="TTL лиза (сек)" value={cfg.lease_ttl} onChange={(v)=>setCfg({...cfg, lease_ttl: v})} tip="Время жизни лиза до истечения" />
<Field label="Интервал gossip (сек)" value={cfg.gossip_interval_sec} onChange={(v)=>setCfg({...cfg, gossip_interval_sec: v})} tip="Период рассылки снимка DHT" />
<Field label="Бэк-офф база (сек)" value={cfg.gossip_backoff_base_sec} onChange={(v)=>setCfg({...cfg, gossip_backoff_base_sec: v})} tip="Начальный бэк-офф для неуспешных пиров" />
<Field label="Бэк-офф потолок (сек)" value={cfg.gossip_backoff_cap_sec} onChange={(v)=>setCfg({...cfg, gossip_backoff_cap_sec: v})} tip="Максимальный бэк-офф" />
</div>
<div className="flex gap-2">
<button className="px-3 py-2 bg-emerald-700 hover:bg-emerald-600 rounded disabled:opacity-50" onClick={()=>void update()} disabled={saving}>Сохранить</button>
<button className="px-3 py-2 bg-slate-700 hover:bg-slate-600 rounded" onClick={()=>void load()}>Сбросить</button>
</div>
<div className="text-xs text-slate-500">Примечание: некоторые параметры читаются задачами-демонами при каждом цикле и применяются без перезапуска.</div>
</div>
);
};
export default AdminNetworkSettingsPage;

View File

@ -1,205 +0,0 @@
import { ChangeEvent, useMemo } from "react";
import { useAdminNodeSetRole, useAdminNodes } from "~/shared/services/admin";
import { Section, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatDate, formatUnknown } from "../utils/format";
export const AdminNodesPage = () => {
const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
const nodesQuery = useAdminNodes({
enabled: isAuthorized,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить список нод"),
});
const nodeRoleMutation = useAdminNodeSetRole({
onSuccess: async ({ node }) => {
pushFlash({
type: "success",
message: `Роль узла ${node.public_key ?? node.ip ?? ""} обновлена до ${node.role}`,
});
await nodesQuery.refetch();
},
onError: (error) => handleRequestError(error, "Не удалось обновить роль узла"),
});
const items = nodesQuery.data?.items ?? [];
const handleRoleChange = (publicKey: string | null, host: string | null) => {
return (event: ChangeEvent<HTMLSelectElement>) => {
const role = event.target.value as "trusted" | "read-only" | "deny";
nodeRoleMutation.mutate({
role,
public_key: publicKey ?? undefined,
host: host ?? undefined,
});
};
};
const sortedItems = useMemo(() => {
return [...items].sort((a, b) => {
const aSeen = a.last_seen ? new Date(a.last_seen).getTime() : 0;
const bSeen = b.last_seen ? new Date(b.last_seen).getTime() : 0;
return bSeen - aSeen;
});
}, [items]);
if (!nodesQuery.data) {
return nodesQuery.isLoading ? (
<Section id="nodes" title="Ноды" description="Доверенные и внешние узлы">
Загрузка
</Section>
) : null;
}
return (
<Section id="nodes" title="Ноды" description="Роли, версии и последнее появление">
<div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">IP</th>
<th className="px-3 py-3">Порт</th>
<th className="px-3 py-3">Публичный ключ</th>
<th className="px-3 py-3">Роль</th>
<th className="px-3 py-3">Версия</th>
<th className="px-3 py-3">Последний онлайн</th>
<th className="px-3 py-3">Заметки</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{sortedItems.map((node, index) => (
<tr key={node.public_key ?? node.ip ?? `node-${index}`} className="hover:bg-slate-900/50">
<td className="px-3 py-2">
{node.ip ? (
<div className="flex items-center gap-2 text-sm text-slate-200">
<span className="break-all font-mono text-xs text-slate-300">{node.ip}</span>
<CopyButton
value={node.ip}
aria-label="Скопировать IP-адрес"
successMessage="IP-адрес узла скопирован"
/>
</div>
) : (
<span className="text-xs text-slate-500"></span>
)}
</td>
<td className="px-3 py-2">
{node.port != null ? (
<div className="flex items-center gap-2 text-sm text-slate-200">
<span className="font-mono text-xs text-slate-300">{node.port}</span>
<CopyButton
value={node.port}
aria-label="Скопировать порт"
successMessage="Порт узла скопирован"
/>
</div>
) : (
<span className="text-xs text-slate-500"></span>
)}
</td>
<td className="px-3 py-2">
{node.public_key ? (
<div className="flex items-center gap-2">
<span className="break-all font-mono text-[11px] text-slate-300">{node.public_key}</span>
<CopyButton
value={node.public_key}
aria-label="Скопировать публичный ключ"
successMessage="Публичный ключ узла скопирован"
/>
</div>
) : (
<span className="text-xs text-slate-500"></span>
)}
</td>
<td className="px-3 py-2">
<select
className="rounded-lg border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-100 focus:border-sky-500 focus:outline-none"
value={node.role}
onChange={handleRoleChange(node.public_key, node.ip)}
disabled={nodeRoleMutation.isLoading}
>
<option value="trusted">trusted</option>
<option value="read-only">read-only</option>
<option value="deny">deny</option>
</select>
</td>
<td className="px-3 py-2">{node.version || "—"}</td>
<td className="px-3 py-2">{formatDate(node.last_seen)}</td>
<td className="px-3 py-2 break-words">{formatUnknown(node.notes)}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="grid gap-3 md:hidden">
{sortedItems.map((node, index) => (
<div
key={node.public_key ?? node.ip ?? `node-card-${index}`}
className="rounded-2xl border border-slate-800 bg-slate-950/50 p-4 shadow-inner shadow-black/30"
>
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span className="text-xs uppercase tracking-wide text-slate-500">IP</span>
<span className="font-mono text-xs text-slate-200">{node.ip ?? "—"}</span>
{node.ip ? <CopyButton value={node.ip} aria-label="Скопировать IP-адрес" successMessage="IP-адрес узла скопирован" /> : null}
</div>
<span className="rounded-full bg-slate-900/80 px-3 py-1 text-[11px] uppercase tracking-wide text-slate-300">
{node.role}
</span>
</div>
<div className="mt-3 grid gap-3 text-xs text-slate-300">
<div className="flex flex-wrap items-center gap-2">
<span className="text-slate-500">Порт</span>
<span className="font-mono text-xs text-slate-200">{node.port ?? "—"}</span>
{node.port != null ? (
<CopyButton value={node.port} aria-label="Скопировать порт" successMessage="Порт узла скопирован" />
) : null}
</div>
<div className="flex flex-col gap-2">
<span className="text-slate-500">Публичный ключ</span>
<div className="flex items-center gap-2">
<span className="break-all font-mono text-[11px] text-slate-300">{node.public_key ?? "—"}</span>
{node.public_key ? (
<CopyButton
value={node.public_key}
aria-label="Скопировать публичный ключ"
successMessage="Публичный ключ узла скопирован"
/>
) : null}
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Версия</span>
<span>{node.version || "—"}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Последний онлайн</span>
<span>{formatDate(node.last_seen)}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Заметки</span>
<span className="break-words text-slate-200">{formatUnknown(node.notes)}</span>
</div>
</div>
<div className="mt-3">
<label className="text-xs uppercase tracking-wide text-slate-500">Роль</label>
<select
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-2 py-2 text-xs text-slate-100 focus:border-sky-500 focus:outline-none"
value={node.role}
onChange={handleRoleChange(node.public_key, node.ip)}
disabled={nodeRoleMutation.isLoading}
>
<option value="trusted">trusted</option>
<option value="read-only">read-only</option>
<option value="deny">deny</option>
</select>
</div>
</div>
))}
</div>
</Section>
);
};

View File

@ -1,220 +0,0 @@
import { useMemo } from "react";
import { useAdminOverview } from "~/shared/services/admin";
import { Section, Badge, InfoRow, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatBytes, formatDate, formatUnknown, numberFormatter } from "../utils/format";
export const AdminOverviewPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const overviewQuery = useAdminOverview({
enabled: isAuthorized,
retry: false,
refetchInterval: 60_000,
onError: (error) => {
handleRequestError(error, "Не удалось загрузить обзор");
},
});
const overviewCards = useMemo(() => {
const data = overviewQuery.data;
if (!data) {
return [];
}
const { project, content, node, ipfs, codebase, runtime } = data;
return [
{
label: "Хост",
value: project.host || "локальный",
helper: project.name,
copyValue: project.host ?? null,
successMessage: "Хост скопирован",
},
{
label: "TON Master",
value: node.ton_master,
helper: "Платформа",
copyValue: node.ton_master ?? null,
successMessage: "TON Master скопирован",
},
{
label: "Service Wallet",
value: node.service_wallet,
helper: node.id,
copyValue: node.service_wallet ?? null,
successMessage: "Service wallet скопирован",
},
{
label: "Highload Wallet",
value: node.highload_wallet ?? "—",
helper: "Высоконагрузочный",
copyValue: node.highload_wallet ?? null,
successMessage: "Highload wallet скопирован",
},
{
label: "Контент",
value: `${numberFormatter.format(content.encrypted_total)} зашифр.`,
helper: `${numberFormatter.format(content.derivatives_ready)} деривативов`,
},
{
label: "IPFS Repo",
value: formatBytes(Number((ipfs.repo as Record<string, unknown>)?.RepoSize ?? 0)),
helper: "Размер репозитория",
},
{
label: "Bitswap",
value: numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.Peers ?? 0)),
helper: "Пиры",
},
{
label: "Билд",
value: codebase.commit ?? "n/a",
helper: codebase.branch ?? "",
copyValue: codebase.commit ?? null,
successMessage: "Хеш коммита скопирован",
},
{
label: "Python",
value: runtime.python,
helper: runtime.implementation,
},
];
}, [overviewQuery.data]);
if (!overviewQuery.data) {
return overviewQuery.isLoading ? (
<Section id="overview" title="Обзор" description="Краткий срез состояния узла, окружения и служб">
Загрузка
</Section>
) : null;
}
const { project, services, ton, runtime, ipfs } = overviewQuery.data;
const ipfsIdentity = (ipfs.identity ?? {}) as Record<string, unknown>;
const ipfsBitswap = (ipfs.bitswap ?? {}) as Record<string, unknown>;
const ipfsRepo = (ipfs.repo ?? {}) as Record<string, unknown>;
const ipfsId = ipfsIdentity["ID"];
const ipfsAgent = ipfsIdentity["AgentVersion"];
return (
<Section
id="overview"
title="Обзор"
description="Краткий срез состояния узла, окружения и служб"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => overviewQuery.refetch()}
disabled={overviewQuery.isFetching}
>
{overviewQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{overviewCards.map((card) => (
<div
key={card.label}
className="overflow-hidden rounded-xl bg-slate-950/60 p-4 shadow-inner shadow-black/40 ring-1 ring-slate-800"
>
<div className="flex items-start justify-between gap-2">
<p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
{card.copyValue ? (
<CopyButton
value={card.copyValue}
successMessage={card.successMessage}
aria-label={`Скопировать значение «${card.label}»`}
/>
) : null}
</div>
<p className="mt-2 break-all text-lg font-semibold text-slate-100">{card.value}</p>
{card.helper ? <p className="mt-1 break-words text-xs text-slate-500">{card.helper}</p> : null}
</div>
))}
</div>
<div className="grid gap-6 lg:grid-cols-2">
<div className="space-y-3">
<h3 className="text-lg font-semibold text-slate-100">Проект</h3>
<dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<InfoRow label="Хост" copyValue={project.host ?? null}>
{project.host || "—"}
</InfoRow>
<InfoRow label="Имя">{project.name}</InfoRow>
<InfoRow label="Приватность">{project.privacy}</InfoRow>
<InfoRow label="TON Testnet">{ton.testnet ? "Да" : "Нет"}</InfoRow>
<InfoRow label="TON API Key">{ton.api_key_configured ? "Настроен" : "Нет"}</InfoRow>
<InfoRow label="TON Host" copyValue={ton.host ?? null}>
{ton.host || "—"}
</InfoRow>
</dl>
</div>
<div className="space-y-3">
<h3 className="text-lg font-semibold text-slate-100">Среда выполнения</h3>
<dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<InfoRow label="Python">{runtime.python}</InfoRow>
<InfoRow label="Имплементация">{runtime.implementation}</InfoRow>
<InfoRow label="Платформа">{runtime.platform}</InfoRow>
<InfoRow label="UTC сейчас">{formatDate(runtime.utc_now)}</InfoRow>
</dl>
</div>
</div>
<div className="grid gap-6 lg:grid-cols-2">
<div className="space-y-3">
<h3 className="text-lg font-semibold text-slate-100">IPFS</h3>
<div className="grid gap-3 overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<InfoRow label="ID" copyValue={(ipfsId as string) ?? null}>
{formatUnknown(ipfsId)}
</InfoRow>
<InfoRow label="Agent">{formatUnknown(ipfsAgent)}</InfoRow>
<InfoRow label="Peers">
{numberFormatter.format(Number(ipfsBitswap?.Peers ?? 0))}
</InfoRow>
<InfoRow label="Repo size">
{formatBytes(Number(ipfsRepo?.RepoSize ?? 0))}
</InfoRow>
<InfoRow label="Storage max">
{formatBytes(Number(ipfsRepo?.StorageMax ?? 0))}
</InfoRow>
</div>
</div>
<div className="space-y-3">
<h3 className="text-lg font-semibold text-slate-100">Сервисы</h3>
<ul className="space-y-2">
{services.length === 0 ? (
<li className="text-sm text-slate-400">Нет зарегистрированных сервисов</li>
) : (
services.map((service) => {
const status = service.status ?? "—";
const tone: "success" | "warn" | "danger" | "neutral" = status.includes("working")
? "success"
: status.includes("timeout")
? "danger"
: "neutral";
return (
<li
key={service.name}
className="flex items-center justify-between rounded-lg bg-slate-950/40 px-3 py-2 ring-1 ring-slate-800"
>
<span className="max-w-[50%] break-words text-sm font-medium text-slate-100">{service.name}</span>
<div className="flex items-center gap-3 text-xs text-slate-400">
<span>
{service.last_reported_seconds != null
? `Обновлён ${Math.round(service.last_reported_seconds)} сек назад`
: "Нет данных"}
</span>
<Badge tone={tone}>{status}</Badge>
</div>
</li>
);
})
)}
</ul>
</div>
</div>
</Section>
);
};

View File

@ -1,227 +0,0 @@
import { useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { useAdminStars } from "~/shared/services/admin";
import { Section, PaginationControls, Badge } from "../components";
import { useAdminContext } from "../context";
import { formatDate, formatStars, numberFormatter } from "../utils/format";
export const AdminStarsPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const location = useLocation();
const initialSearch = useMemo(() => {
const params = new URLSearchParams(location.search);
return params.get("search") ?? "";
}, [location.search]);
const [search, setSearch] = useState(initialSearch);
const [paidFilter, setPaidFilter] = useState<"all" | "paid" | "unpaid">("all");
const [typeFilter, setTypeFilter] = useState("all");
const [page, setPage] = useState(0);
const limit = 50;
const normalizedSearch = search.trim();
const starsQuery = useAdminStars(
{
limit,
offset: page * limit,
search: normalizedSearch || undefined,
type: typeFilter !== "all" ? typeFilter : undefined,
paid: paidFilter === "all" ? undefined : paidFilter === "paid",
},
{
enabled: isAuthorized,
keepPreviousData: true,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить платежи"),
},
);
useEffect(() => {
setSearch(initialSearch);
}, [initialSearch]);
useEffect(() => {
setPage(0);
}, [normalizedSearch, paidFilter, typeFilter]);
if (starsQuery.isLoading && !starsQuery.data) {
return (
<Section id="stars" title="Платежи Stars" description="Телеграм Stars счета и связанные пользователи">
Загрузка
</Section>
);
}
if (!starsQuery.data) {
return (
<Section id="stars" title="Платежи Stars" description="Телеграм Stars счета и связанные пользователи">
<p className="text-sm text-slate-400">Выберите вкладку «Платежи Stars», чтобы загрузить данные.</p>
</Section>
);
}
const { items, stats, total } = starsQuery.data;
const typeOptions = Object.keys(stats.by_type || {});
const statCards = [
{ label: "Всего платежей", value: numberFormatter.format(stats.total) },
{ label: "Оплачено", value: `${numberFormatter.format(stats.paid)} · ${formatStars(stats.amount_paid)}` },
{ label: "Неоплачено", value: `${numberFormatter.format(stats.unpaid)} · ${formatStars(stats.amount_unpaid)}` },
];
return (
<Section
id="stars"
title="Платежи Stars"
description="Телеграм Stars счета и связанные пользователи"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => starsQuery.refetch()}
disabled={starsQuery.isFetching}
>
{starsQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid gap-4 md:grid-cols-3">
{statCards.map((card) => (
<div key={card.label} className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
<p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{card.value}</p>
</div>
))}
</div>
<div className="mt-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div className="flex flex-col gap-2 md:flex-row md:items-end">
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="ID, ссылка, контент"
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-64"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
<select
value={paidFilter}
onChange={(event) => setPaidFilter(event.target.value as "all" | "paid" | "unpaid")}
className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="all">Все</option>
<option value="paid">Оплачено</option>
<option value="unpaid">Не оплачено</option>
</select>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
<select
value={typeFilter}
onChange={(event) => setTypeFilter(event.target.value)}
className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
>
<option value="all">Все</option>
{typeOptions.map((option) => (
<option key={`stars-type-${option}`} value={option}>
{option}
</option>
))}
</select>
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
onClick={() => {
setSearch("");
setPaidFilter("all");
setTypeFilter("all");
}}
>
Сбросить
</button>
</div>
</div>
<div className="mt-4 overflow-x-auto">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">Инвойс</th>
<th className="px-3 py-3">Сумма</th>
<th className="px-3 py-3">Пользователь</th>
<th className="px-3 py-3">Контент</th>
<th className="px-3 py-3">Создан</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{items.length === 0 ? (
<tr>
<td colSpan={5} className="px-3 py-6 text-center text-sm text-slate-400">
Платежей не найдено.
</td>
</tr>
) : (
items.map((invoice) => (
<tr key={`stars-${invoice.id}`} className="hover:bg-slate-900/40">
<td className="px-3 py-3 align-top">
<div className="font-semibold text-slate-100">
#{numberFormatter.format(invoice.id)} · {invoice.type ?? "—"}
</div>
<div className="text-xs text-slate-400 break-all">{invoice.external_id}</div>
{invoice.invoice_url ? (
<a
href={invoice.invoice_url}
target="_blank"
rel="noreferrer"
className="text-xs text-sky-300 hover:text-sky-200"
>
Открыть счёт
</a>
) : null}
</td>
<td className="px-3 py-3 align-top">
<div className="font-semibold text-slate-100">{formatStars(invoice.amount)}</div>
<Badge tone={invoice.paid ? "success" : "warn"}>{invoice.status}</Badge>
</td>
<td className="px-3 py-3 align-top">
{invoice.user ? (
<div className="text-xs text-slate-300">
ID {numberFormatter.format(invoice.user.id)} · TG {numberFormatter.format(invoice.user.telegram_id)}
</div>
) : (
<div className="text-xs text-slate-500"></div>
)}
</td>
<td className="px-3 py-3 align-top">
{invoice.content ? (
<>
<div className="text-xs text-slate-300">{invoice.content.title}</div>
<div className="break-all text-[10px] uppercase tracking-wide text-slate-500">
{invoice.content.hash}
</div>
</>
) : (
<div className="text-xs text-slate-500"></div>
)}
</td>
<td className="px-3 py-3 align-top text-xs text-slate-400">{formatDate(invoice.created_at)}</td>
</tr>
))
)}
</tbody>
</table>
</div>
<div className="mt-4">
<PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
</div>
</Section>
);
};

View File

@ -1,251 +0,0 @@
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import {
useAdminCacheCleanup,
useAdminCacheSetLimits,
useAdminStatus,
useAdminSyncSetLimits,
} from "~/shared/services/admin";
import { Section, InfoRow } from "../components";
import { useAdminContext } from "../context";
import { formatBytes, numberFormatter } from "../utils/format";
type CacheLimitsFormValues = {
max_gb: number;
ttl_days: number;
};
type CacheFitFormValues = {
max_gb: number;
};
type SyncLimitsFormValues = {
max_concurrent_pins: number;
disk_low_watermark_pct: number;
};
export const AdminStatusPage = () => {
const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
const statusQuery = useAdminStatus({
enabled: isAuthorized,
refetchInterval: 30_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить статус синхронизации"),
});
const cacheLimitsForm = useForm<CacheLimitsFormValues>({
values: {
max_gb: statusQuery.data?.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
ttl_days: statusQuery.data?.limits.DERIVATIVE_CACHE_TTL_DAYS ?? 0,
},
});
const cacheFitForm = useForm<CacheFitFormValues>({
defaultValues: {
max_gb: statusQuery.data?.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
},
});
const syncLimitsForm = useForm<SyncLimitsFormValues>({
values: {
max_concurrent_pins: statusQuery.data?.limits.SYNC_MAX_CONCURRENT_PINS ?? 4,
disk_low_watermark_pct: statusQuery.data?.limits.SYNC_DISK_LOW_WATERMARK_PCT ?? 90,
},
});
useEffect(() => {
if (!statusQuery.data) {
return;
}
cacheLimitsForm.reset({
max_gb: statusQuery.data.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
ttl_days: statusQuery.data.limits.DERIVATIVE_CACHE_TTL_DAYS ?? 0,
});
cacheFitForm.reset({
max_gb: statusQuery.data.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
});
syncLimitsForm.reset({
max_concurrent_pins: statusQuery.data.limits.SYNC_MAX_CONCURRENT_PINS ?? 4,
disk_low_watermark_pct: statusQuery.data.limits.SYNC_DISK_LOW_WATERMARK_PCT ?? 90,
});
}, [cacheFitForm, cacheLimitsForm, statusQuery.data, syncLimitsForm]);
const cacheLimitsMutation = useAdminCacheSetLimits({
onSuccess: async () => {
pushFlash({ type: "success", message: "Лимиты кэша обновлены" });
await statusQuery.refetch();
},
onError: (error) => handleRequestError(error, "Не удалось сохранить лимиты кэша"),
});
const cacheCleanupMutation = useAdminCacheCleanup({
onSuccess: async (data) => {
const removed = typeof data.removed === "number" ? `Удалено файлов: ${data.removed}` : "";
pushFlash({ type: "success", message: `Очистка кэша выполнена. ${removed}`.trim() });
await statusQuery.refetch();
},
onError: (error) => handleRequestError(error, "Ошибка очистки кэша"),
});
const syncLimitsMutation = useAdminSyncSetLimits({
onSuccess: async () => {
pushFlash({ type: "success", message: "Параметры синхронизации обновлены" });
await statusQuery.refetch();
},
onError: (error) => handleRequestError(error, "Не удалось обновить лимиты синхронизации"),
});
if (!statusQuery.data) {
return statusQuery.isLoading ? (
<Section id="status" title="Статус & лимиты" description="IPFS, пины и лимиты">
Загрузка
</Section>
) : null;
}
const { ipfs, pin_counts, derivatives, convert_backlog } = statusQuery.data;
return (
<Section id="status" title="Статус & лимиты" description="Информация о синхронизации, кэше и лимитах">
<div className="grid gap-6 xl:grid-cols-[1.8fr_1fr]">
<div className="space-y-6">
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">IPFS</h3>
<dl className="mt-3 grid grid-cols-2 gap-3 text-sm">
<InfoRow label="Repo Size">
{formatBytes(Number((ipfs.repo as Record<string, unknown>)?.RepoSize ?? 0))}
</InfoRow>
<InfoRow label="Storage Max">
{formatBytes(Number((ipfs.repo as Record<string, unknown>)?.StorageMax ?? 0))}
</InfoRow>
<InfoRow label="Bitswap Peers">
{numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.Peers ?? 0))}
</InfoRow>
<InfoRow label="Blocks Received">
{numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.BlocksReceived ?? 0))}
</InfoRow>
</dl>
</div>
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Pin-статистика</h3>
<dl className="mt-3 grid grid-cols-2 gap-3 text-sm">
{Object.entries(pin_counts).map(([key, value]) => (
<InfoRow key={key} label={key}>
{numberFormatter.format(value)}
</InfoRow>
))}
<InfoRow label="Backlog деривативов">{numberFormatter.format(convert_backlog)}</InfoRow>
<InfoRow label="Деривативы">{formatBytes(derivatives.total_bytes)}</InfoRow>
</dl>
</div>
</div>
<div className="space-y-6">
<form
className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
onSubmit={cacheLimitsForm.handleSubmit((values) => {
cacheLimitsMutation.mutate(values);
})}
>
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Лимиты кэша</h3>
<div className="mt-3 space-y-3 text-sm">
<label className="block">
<span className="text-xs uppercase text-slate-400">Максимум, GB</span>
<input
type="number"
step="0.1"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
{...cacheLimitsForm.register("max_gb", { valueAsNumber: true })}
/>
</label>
<label className="block">
<span className="text-xs uppercase text-slate-400">TTL, дней</span>
<input
type="number"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
{...cacheLimitsForm.register("ttl_days", { valueAsNumber: true })}
/>
</label>
</div>
<button
type="submit"
className="mt-4 w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-700"
disabled={cacheLimitsMutation.isLoading}
>
{cacheLimitsMutation.isLoading ? "Сохраняем…" : "Сохранить"}
</button>
</form>
<form
className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
onSubmit={cacheFitForm.handleSubmit((values) => {
cacheCleanupMutation.mutate({ mode: "fit", max_gb: values.max_gb });
})}
>
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Очистка по размеру</h3>
<label className="mt-3 block text-sm">
<span className="text-xs uppercase text-slate-400">Целевой размер, GB</span>
<input
type="number"
step="0.1"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
{...cacheFitForm.register("max_gb", { valueAsNumber: true })}
/>
</label>
<div className="mt-4 flex flex-col gap-2">
<button
type="submit"
className="w-full rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500 disabled:cursor-not-allowed disabled:bg-slate-700"
disabled={cacheCleanupMutation.isLoading}
>
{cacheCleanupMutation.isLoading ? "Очищаем…" : "Очистить до размера"}
</button>
<button
type="button"
onClick={() => cacheCleanupMutation.mutate({ mode: "ttl" })}
className="w-full rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-slate-700"
disabled={cacheCleanupMutation.isLoading}
>
Очистить по TTL
</button>
</div>
</form>
<form
className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
onSubmit={syncLimitsForm.handleSubmit((values) => {
syncLimitsMutation.mutate(values);
})}
>
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Sync лимиты</h3>
<div className="mt-3 space-y-3 text-sm">
<label className="block">
<span className="text-xs uppercase text-slate-400">Одновременные пины</span>
<input
type="number"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
{...syncLimitsForm.register("max_concurrent_pins", { valueAsNumber: true })}
/>
</label>
<label className="block">
<span className="text-xs uppercase text-slate-400">Нижний предел диска, %</span>
<input
type="number"
className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
{...syncLimitsForm.register("disk_low_watermark_pct", { valueAsNumber: true })}
/>
</label>
</div>
<button
type="submit"
className="mt-4 w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-700"
disabled={syncLimitsMutation.isLoading}
>
{syncLimitsMutation.isLoading ? "Сохраняем…" : "Сохранить"}
</button>
</form>
</div>
</div>
</Section>
);
};

View File

@ -1,121 +0,0 @@
import { useAdminStorage } from "~/shared/services/admin";
import { Section, Badge, InfoRow, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatBytes, numberFormatter } from "../utils/format";
export const AdminStoragePage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const storageQuery = useAdminStorage({
enabled: isAuthorized,
refetchInterval: 60_000,
onError: (error) => {
handleRequestError(error, "Не удалось загрузить данные хранилища");
},
});
if (storageQuery.isLoading && !storageQuery.data) {
return (
<Section id="storage" title="Хранилище" description="Пути, размеры и деривативы">
Загрузка
</Section>
);
}
if (!storageQuery.data) {
return null;
}
const { directories, disk, derivatives } = storageQuery.data;
return (
<Section id="storage" title="Хранилище" description="Пути на диске, использование и кэш деривативов">
<div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">Путь</th>
<th className="px-3 py-3">Файлов</th>
<th className="px-3 py-3">Размер</th>
<th className="px-3 py-3">Состояние</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{directories.map((dir) => (
<tr key={dir.path} className="hover:bg-slate-900/50">
<td className="px-3 py-2">
<div className="flex items-center gap-2">
<span className="break-all font-mono text-xs text-slate-300">{dir.path}</span>
<CopyButton
value={dir.path}
aria-label="Скопировать путь"
successMessage="Путь скопирован"
className="h-6 w-6"
/>
</div>
</td>
<td className="px-3 py-2">{numberFormatter.format(dir.file_count)}</td>
<td className="px-3 py-2">{formatBytes(dir.size_bytes)}</td>
<td className="px-3 py-2">
<Badge tone={dir.exists ? "success" : "danger"}>{dir.exists ? "OK" : "Нет"}</Badge>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="grid gap-3 md:hidden">
{directories.map((dir) => (
<div key={`dir-card-${dir.path}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span className="break-all font-mono text-[11px] text-slate-200">{dir.path}</span>
<CopyButton
value={dir.path}
aria-label="Скопировать путь"
successMessage="Путь скопирован"
className="h-6 w-6"
/>
</div>
<Badge tone={dir.exists ? "success" : "danger"}>{dir.exists ? "OK" : "Нет"}</Badge>
</div>
<div className="mt-3 grid grid-cols-2 gap-3 text-xs text-slate-300">
<div>
<span className="text-slate-500">Файлов</span>
<div>{numberFormatter.format(dir.file_count)}</div>
</div>
<div>
<span className="text-slate-500">Размер</span>
<div>{formatBytes(dir.size_bytes)}</div>
</div>
</div>
</div>
))}
</div>
{disk ? (
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Снимок диска</h3>
<div className="mt-2 grid grid-cols-2 gap-3 text-sm">
<InfoRow label="Путь" copyValue={disk.path}>
{disk.path}
</InfoRow>
<InfoRow label="Свободно">{formatBytes(disk.free_bytes)}</InfoRow>
<InfoRow label="Занято">{formatBytes(disk.used_bytes)}</InfoRow>
<InfoRow label="Всего">{formatBytes(disk.total_bytes)}</InfoRow>
<InfoRow label="Загруженность">{disk.percent_used != null ? `${disk.percent_used}%` : "—"}</InfoRow>
</div>
</div>
) : null}
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Деривативы</h3>
<div className="mt-2 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
<InfoRow label="Готово">{numberFormatter.format(derivatives.ready)}</InfoRow>
<InfoRow label="В обработке">{numberFormatter.format(derivatives.processing)}</InfoRow>
<InfoRow label="Ожидает">{numberFormatter.format(derivatives.pending)}</InfoRow>
<InfoRow label="С ошибкой">{numberFormatter.format(derivatives.failed)}</InfoRow>
<InfoRow label="Суммарно">{formatBytes(derivatives.total_bytes)}</InfoRow>
</div>
</div>
</Section>
);
};

View File

@ -1,136 +0,0 @@
import { useAdminSystem } from "~/shared/services/admin";
import { Section, InfoRow, Badge, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatDate, formatUnknown, numberFormatter } from "../utils/format";
export const AdminSystemPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const systemQuery = useAdminSystem({
enabled: isAuthorized,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить системную информацию"),
});
if (!systemQuery.data) {
return systemQuery.isLoading ? (
<Section id="system" title="Система" description="Переменные окружения и конфиг">
Загрузка
</Section>
) : null;
}
const { env, service_config, services, blockchain_tasks, latest_index_items, telegram_bots } = systemQuery.data;
const bots = telegram_bots ?? [];
return (
<Section id="system" title="Система" description="Ключевые переменные и внутренние конфиги">
<div className="grid gap-6 lg:grid-cols-2">
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Окружение</h3>
<dl className="mt-3 space-y-2">
{Object.entries(env).map(([key, value]) => (
<InfoRow key={key} label={key}>
{formatUnknown(value)}
</InfoRow>
))}
</dl>
</div>
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Telegram-боты</h3>
{bots.length === 0 ? (
<p className="mt-3 text-xs text-slate-500">Боты не настроены.</p>
) : (
<ul className="mt-3 space-y-3 text-sm text-slate-200">
{bots.map((bot) => (
<li
key={`${bot.role}-${bot.username}`}
className="flex flex-col gap-2 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-3"
>
<div className="flex flex-wrap items-center gap-3">
<Badge tone="neutral">{bot.role}</Badge>
<span className="font-semibold">@{bot.username}</span>
<CopyButton
value={bot.username}
aria-label="Скопировать username бота"
successMessage="Username скопирован"
className="h-6 w-6"
/>
</div>
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
<span>t.me/{bot.username}</span>
<a
href={bot.url}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg border border-sky-500/40 px-3 py-1 text-[11px] font-semibold text-sky-200 transition hover:border-sky-400 hover:text-white"
>
Открыть бота
</a>
</div>
</li>
))}
</ul>
)}
</div>
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Задачи блокчейна</h3>
<dl className="mt-3 grid grid-cols-2 gap-3">
{Object.entries(blockchain_tasks).map(([key, value]) => (
<InfoRow key={key} label={key}>
{numberFormatter.format(value)}
</InfoRow>
))}
</dl>
<h4 className="mt-4 text-xs uppercase tracking-wide text-slate-500">Последние индексы</h4>
<ul className="mt-2 space-y-2">
{latest_index_items.length === 0 ? (
<li className="text-xs text-slate-500">Список пуст</li>
) : (
latest_index_items.map((item) => (
<li key={item.encrypted_cid || item.updated_at} className="rounded-lg bg-slate-900/60 px-3 py-2 text-xs">
<div className="font-mono text-slate-200">{item.encrypted_cid ?? "—"}</div>
<div className="text-slate-500">{formatDate(item.updated_at)}</div>
</li>
))
)}
</ul>
</div>
</div>
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">ServiceConfig</h3>
<div className="mt-3 overflow-x-auto">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">Ключ</th>
<th className="px-3 py-3">Значение</th>
<th className="px-3 py-3">RAW</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{service_config.map((item) => (
<tr key={item.key}>
<td className="px-3 py-2 font-mono text-xs text-slate-300">{item.key}</td>
<td className="px-3 py-2">{formatUnknown(item.value)}</td>
<td className="px-3 py-2 font-mono text-xs text-slate-500">{formatUnknown(item.raw)}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Сервисы</h3>
<ul className="mt-2 space-y-2">
{services.map((service) => (
<li key={service.name} className="flex items-center justify-between rounded-lg bg-slate-900/40 px-3 py-2">
<span className="text-sm text-slate-200">{service.name}</span>
<Badge tone={service.status?.includes("working") ? "success" : "neutral"}>{service.status ?? "—"}</Badge>
</li>
))}
</ul>
</div>
</Section>
);
};

View File

@ -1,706 +0,0 @@
import { useEffect, useMemo, useState } from "react";
import clsx from "clsx";
import { useLocation } from "react-router-dom";
import {
useAdminUploads,
type AdminUploadsContent,
type AdminUploadsContentFlags,
} from "~/shared/services/admin";
import { Section, Badge, InfoRow, CopyButton } from "../components";
import { useAdminContext } from "../context";
import { formatBytes, formatDate, numberFormatter } from "../utils/format";
type UploadCategory = "issues" | "processing" | "ready" | "unindexed";
type UploadFilter = "all" | UploadCategory;
type UploadDecoration = {
item: AdminUploadsContent;
categories: Set<UploadCategory>;
searchText: string;
hasIssue: boolean;
isReady: boolean;
isProcessing: boolean;
isUnindexed: boolean;
flags: AdminUploadsContentFlags | null;
};
const numberCompact = new Intl.NumberFormat("ru-RU", { notation: "compact" });
const computeFlags = (item: AdminUploadsContent): AdminUploadsContentFlags => {
const normalize = (value: string | null | undefined) => (value ?? "").toLowerCase();
const uploadState = normalize(item.status.upload_state);
const conversionState = normalize(item.status.conversion_state);
const ipfsState = normalize(item.status.ipfs_state);
const pinState = normalize(item.ipfs?.pin_state);
const derivativeStates = item.derivatives.map((derivative) => normalize(derivative.status));
const statusValues = [uploadState, conversionState, ipfsState, pinState, ...derivativeStates];
const hasIssue =
statusValues.some((value) => value.includes("fail") || value.includes("error") || value.includes("timeout")) ||
item.upload_history.some((event) => Boolean(event.error)) ||
item.derivatives.some((derivative) => Boolean(derivative.error)) ||
Boolean(item.ipfs?.pin_error);
const isOnchainIndexed = item.status.onchain?.indexed ?? false;
const isUnindexed = !isOnchainIndexed;
const conversionDone =
conversionState.includes("converted") ||
conversionState.includes("ready") ||
derivativeStates.some((state) => state.includes("ready") || state.includes("converted") || state.includes("complete"));
const ipfsDone =
ipfsState.includes("pinned") ||
ipfsState.includes("ready") ||
pinState.includes("pinned") ||
pinState.includes("ready");
const isReady = !hasIssue && conversionDone && ipfsDone && isOnchainIndexed;
const hasProcessingKeywords =
uploadState.includes("pending") ||
uploadState.includes("process") ||
uploadState.includes("queue") ||
uploadState.includes("upload") ||
conversionState.includes("pending") ||
conversionState.includes("process") ||
conversionState.includes("queue") ||
conversionState.includes("convert") ||
ipfsState.includes("pin") ||
ipfsState.includes("sync") ||
pinState.includes("pin") ||
pinState.includes("sync") ||
derivativeStates.some((state) => state.includes("pending") || state.includes("process") || state.includes("queue"));
const isProcessingCandidate = !isReady && !hasIssue && hasProcessingKeywords;
const isProcessing = isProcessingCandidate || (!isReady && !hasIssue && !isProcessingCandidate);
return {
issues: hasIssue,
processing: isProcessing,
ready: isReady,
unindexed: isUnindexed,
};
};
const classifyUpload = (item: AdminUploadsContent): UploadDecoration => {
const flags = item.flags ?? computeFlags(item);
const categories = new Set<UploadCategory>();
if (flags.issues) {
categories.add("issues");
}
if (flags.processing) {
categories.add("processing");
}
if (flags.ready) {
categories.add("ready");
}
if (flags.unindexed) {
categories.add("unindexed");
}
if (categories.size === 0) {
if (!(item.status.onchain?.indexed ?? false)) {
categories.add("unindexed");
}
categories.add("processing");
}
const searchParts: Array<string | number | null | undefined> = [
item.title,
item.description,
item.encrypted_cid,
item.metadata_cid,
item.content_hash,
item.status.onchain?.item_address,
item.stored?.owner_address,
];
if (item.stored?.user) {
const user = item.stored.user;
searchParts.push(user.id, user.telegram_id, user.username, user.first_name, user.last_name);
}
item.distribution?.nodes?.forEach((node) => {
searchParts.push(node.host, node.public_host, node.content.encrypted_cid);
});
const searchText = searchParts
.filter((value) => value !== null && value !== undefined && `${value}`.length > 0)
.map((value) => `${value}`.toLowerCase())
.join(" ");
return {
item,
categories,
searchText,
hasIssue: Boolean(flags.issues),
isReady: Boolean(flags.ready),
isProcessing: Boolean(flags.processing),
isUnindexed: Boolean(flags.unindexed),
flags: item.flags ?? flags,
};
};
const getProblemMessages = (item: AdminUploadsContent): string[] => {
const messages: string[] = [];
for (let index = item.upload_history.length - 1; index >= 0; index -= 1) {
const event = item.upload_history[index];
if (event.error) {
messages.push(`Загрузка: ${event.error}`);
break;
}
}
const derivativeError = item.derivatives.find((derivative) => Boolean(derivative.error));
if (derivativeError?.error) {
messages.push(`Дериватив ${derivativeError.kind}: ${derivativeError.error}`);
}
if (item.ipfs?.pin_error) {
messages.push(`IPFS: ${item.ipfs.pin_error}`);
}
const conversionState = item.status.conversion_state;
if (!messages.length && conversionState && conversionState.toLowerCase().includes("fail")) {
messages.push(`Конверсия: ${conversionState}`);
}
const uploadState = item.status.upload_state;
if (!messages.length && uploadState && uploadState.toLowerCase().includes("fail")) {
messages.push(`Загрузка: ${uploadState}`);
}
return messages;
};
const UploadCard = ({ decoration }: { decoration: UploadDecoration }) => {
const { item, flags } = decoration;
const problemMessages = decoration.hasIssue ? getProblemMessages(item) : [];
const derivativeDownloads = item.links.download_derivatives ?? [];
const distributionNodes = item.distribution?.nodes ?? [];
return (
<div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950/40 p-5 shadow-inner shadow-black/40">
<div className="flex flex-wrap items-start justify-between gap-3">
<div>
<h3 className="text-lg font-semibold text-slate-100">{item.title || "Без названия"}</h3>
<p className="text-xs text-slate-400">{item.description || "Описание не задано"}</p>
<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500">
{flags?.ready ? <Badge tone="success">готово</Badge> : null}
{flags?.issues ? <Badge tone="danger">проблемы</Badge> : null}
{flags?.processing ? <Badge tone="warn">в обработке</Badge> : null}
{flags?.unindexed ? <Badge tone="neutral">без индекса</Badge> : null}
</div>
</div>
<div className="flex flex-col items-end gap-1 text-xs text-slate-400">
<span>{formatDate(item.created_at)}</span>
<span>{formatDate(item.updated_at)}</span>
{item.size.plain ? <span>{formatBytes(item.size.plain)}</span> : null}
</div>
</div>
<div className="mt-4 grid gap-4 lg:grid-cols-[1.3fr_1fr]">
<div className="space-y-4">
<div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">On-chain</h4>
<div className="mt-2 grid gap-2 text-xs text-slate-300 sm:grid-cols-2">
<InfoRow label="Encrypted CID" copyValue={item.encrypted_cid}>
<span className="break-all font-mono">{item.encrypted_cid}</span>
</InfoRow>
<InfoRow label="Metadata CID" copyValue={item.metadata_cid ?? null}>
<span className="break-all font-mono">{item.metadata_cid ?? "—"}</span>
</InfoRow>
<InfoRow label="Content hash" copyValue={item.content_hash ?? null}>
<span className="break-all font-mono">{item.content_hash ?? "—"}</span>
</InfoRow>
<InfoRow label="On-chain индекс">
{item.status.onchain?.indexed ? (
<span className="inline-flex items-center gap-2">
<Badge tone="success">indexed</Badge>
{item.status.onchain?.onchain_index ?? "—"}
</span>
) : (
<Badge tone="warn">не опубликовано</Badge>
)}
</InfoRow>
<InfoRow label="On-chain адрес" copyValue={item.status.onchain?.item_address ?? null}>
<span className="break-all font-mono text-xs">{item.status.onchain?.item_address ?? "—"}</span>
</InfoRow>
</div>
</div>
<div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Статусы</h4>
<div className="mt-2 grid gap-3 text-xs text-slate-300 md:grid-cols-2">
<div>
<p className="font-semibold text-slate-200">Загрузка</p>
<p>{item.status.upload_state ?? "—"}</p>
</div>
<div>
<p className="font-semibold text-slate-200">Конверсия</p>
<p>{item.status.conversion_state ?? "—"}</p>
</div>
<div>
<p className="font-semibold text-slate-200">IPFS</p>
<p>{item.status.ipfs_state ?? "—"}</p>
</div>
</div>
</div>
{distributionNodes.length > 0 ? (
<div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Синхронизация</h4>
<ul className="mt-3 space-y-3 text-xs text-slate-300">
{distributionNodes.map((node) => {
const nodeTitle = node.is_local ? "Эта нода" : node.public_host ?? node.host ?? "Неизвестная нода";
const sizeLabel = node.content.size_bytes ? formatBytes(node.content.size_bytes) : null;
const updatedLabel = node.content.updated_at ? formatDate(node.content.updated_at) : null;
const lastSeenLabel = node.last_seen ? formatDate(node.last_seen) : null;
return (
<li key={`${item.encrypted_cid}-${node.node_id ?? "local"}`} className="rounded-lg border border-slate-800 bg-slate-950/50 p-3">
<div className="flex flex-wrap items-start justify-between gap-2">
<div className="space-y-1">
<div className="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-wide text-slate-400">
<span className="font-semibold text-slate-200">{nodeTitle}</span>
<Badge tone={node.is_local ? "success" : "neutral"}>{node.is_local ? "локально" : "удаленно"}</Badge>
{node.role ? <Badge tone="neutral">{node.role}</Badge> : null}
</div>
<div className="space-y-1 text-[11px] text-slate-400">
{sizeLabel ? <p>Размер: {sizeLabel}</p> : null}
{updatedLabel ? <p>Обновлено: {updatedLabel}</p> : null}
{lastSeenLabel && !node.is_local ? <p>Нода активна: {lastSeenLabel}</p> : null}
{node.version ? <p>Версия: {node.version}</p> : null}
</div>
</div>
<div className="flex flex-wrap items-center gap-2">
{node.links.web_view ? (
<a
href={node.links.web_view}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg border border-emerald-500/40 px-3 py-1 text-[11px] font-semibold text-emerald-200 transition hover:border-emerald-400 hover:text-emerald-100"
>
Web
</a>
) : null}
{node.links.api_view ? (
<>
<a
href={node.links.api_view}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg border border-indigo-500/40 px-3 py-1 text-[11px] font-semibold text-indigo-200 transition hover:border-indigo-400 hover:text-indigo-100"
>
API
</a>
<CopyButton
className="border border-indigo-500/40 text-indigo-200 hover:border-indigo-400 hover:text-indigo-100"
value={node.links.api_view}
>
копировать API
</CopyButton>
</>
) : null}
{node.links.gateway_view ? (
<a
href={node.links.gateway_view}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg border border-amber-500/40 px-3 py-1 text-[11px] font-semibold text-amber-200 transition hover:border-amber-400 hover:text-amber-100"
>
Gateway
</a>
) : null}
</div>
</div>
</li>
);
})}
</ul>
</div>
) : null}
<div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">История загрузки</h4>
<ul className="mt-2 space-y-2 text-xs text-slate-300">
{item.upload_history.map((event) => (
<li key={`${item.encrypted_cid}-${event.filename}-${event.state}`} className="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2">
<div className="flex flex-wrap items-center justify-between gap-2">
<span className="font-semibold text-slate-200">{event.state}</span>
<span className="text-[11px] text-slate-500">{formatDate(event.at)}</span>
</div>
{event.error ? <p className="mt-1 text-rose-300">{event.error}</p> : null}
{event.filename ? <p className="mt-1 text-slate-400">{event.filename}</p> : null}
</li>
))}
</ul>
</div>
{problemMessages.length > 0 ? (
<div className="rounded-xl border border-rose-500/40 bg-rose-500/10 p-4 text-xs text-rose-100">
<h4 className="font-semibold uppercase tracking-wide">Проблемы</h4>
<ul className="mt-2 space-y-1">
{problemMessages.map((message, index) => (
<li key={`${item.encrypted_cid}-issue-${index}`}>{message}</li>
))}
</ul>
</div>
) : null}
</div>
<div className="space-y-4">
<div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Деривативы</h4>
<ul className="mt-2 space-y-2 text-xs text-slate-300">
{item.derivatives.map((derivative) => (
<li key={`${item.encrypted_cid}-${derivative.kind}`} className="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2">
<div className="flex items-center justify-between">
<span className="font-semibold text-slate-200">{derivative.kind}</span>
<Badge tone={derivative.status === "ready" ? "success" : derivative.status === "failed" ? "danger" : "warn"}>
{derivative.status}
</Badge>
</div>
<div className="mt-1 space-y-1 text-[11px] text-slate-400">
<div>Размер: {formatBytes(derivative.size_bytes)}</div>
<div>Попытки: {derivative.attempts}</div>
<div>Создан: {formatDate(derivative.created_at)}</div>
<div>Обновлён: {formatDate(derivative.updated_at)}</div>
{derivative.error ? <div className="text-rose-300">{derivative.error}</div> : null}
{derivative.download_url ? (
<a
href={derivative.download_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center text-sky-300 hover:text-sky-200"
>
Скачать
</a>
) : null}
</div>
</li>
))}
</ul>
</div>
<div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">IPFS</h4>
{item.ipfs ? (
<div className="mt-2 text-xs text-slate-300">
<div>Статус: {item.ipfs.pin_state ?? "—"}</div>
<div>Ошибка: {item.ipfs.pin_error ?? "—"}</div>
<div>Fetched: {formatBytes(item.ipfs.bytes_fetched)}</div>
<div>Total: {formatBytes(item.ipfs.bytes_total)}</div>
<div className="text-slate-500">{formatDate(item.ipfs.updated_at)}</div>
</div>
) : (
<p className="mt-2 text-xs text-slate-500">Нет информации.</p>
)}
</div>
<div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Хранение</h4>
{item.stored ? (
<div className="mt-2 space-y-1 text-xs text-slate-300">
<div className="flex flex-wrap items-center gap-2">
<span className="font-semibold text-slate-200">ID:</span>
<span className="break-all font-mono">{item.stored.stored_id ?? "—"}</span>
{item.stored.stored_id ? (
<CopyButton
value={item.stored.stored_id}
aria-label="Скопировать ID хранения"
successMessage="ID хранения скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<div className="flex flex-wrap items-center gap-2">
<span className="font-semibold text-slate-200">Владелец:</span>
<span className="break-all font-mono text-[11px] text-slate-300">{item.stored.owner_address ?? "—"}</span>
{item.stored.owner_address ? (
<CopyButton
value={item.stored.owner_address}
aria-label="Скопировать адрес владельца хранения"
successMessage="Адрес владельца скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<div>Тип: {item.stored.type ?? "—"}</div>
{item.stored.user ? (
<div className="flex flex-wrap items-center gap-2 text-slate-400">
<span>Пользователь #{item.stored.user.id}</span>
<CopyButton
value={item.stored.user.id}
aria-label="Скопировать ID пользователя"
successMessage="ID пользователя скопирован"
className="h-6 w-6"
/>
<span>· TG {item.stored.user.telegram_id}</span>
<CopyButton
value={item.stored.user.telegram_id}
aria-label="Скопировать Telegram ID"
successMessage="Telegram ID скопирован"
className="h-6 w-6"
/>
</div>
) : null}
{item.stored.download_url ? (
<a
href={item.stored.download_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-2 text-xs font-semibold text-sky-300 hover:text-sky-200"
>
Скачать оригинал
</a>
) : null}
</div>
) : (
<p className="mt-2 text-xs text-slate-500">В хранилище не найден.</p>
)}
</div>
{derivativeDownloads.length > 0 ? (
<div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Прямые ссылки</h4>
<ul className="mt-2 space-y-1 text-xs text-slate-300">
{derivativeDownloads.map((entry) => (
<li key={`${item.encrypted_cid}-link-${entry.kind}`}>
<a href={entry.url} target="_blank" rel="noreferrer" className="text-sky-300 hover:text-sky-200">
{entry.kind} · {entry.size_bytes ? formatBytes(entry.size_bytes) : "размер неизвестен"}
</a>
</li>
))}
</ul>
</div>
) : null}
</div>
</div>
</div>
);
};
export const AdminUploadsPage = () => {
const { isAuthorized, handleRequestError } = useAdminContext();
const location = useLocation();
const [uploadsFilter, setUploadsFilter] = useState<UploadFilter>("all");
const initialUploadsSearch = useMemo(() => {
const params = new URLSearchParams(location.search);
return params.get("search") ?? "";
}, [location.search]);
const [uploadsSearch, setUploadsSearch] = useState(initialUploadsSearch);
useEffect(() => {
setUploadsSearch(initialUploadsSearch);
}, [initialUploadsSearch]);
const normalizedUploadsSearch = uploadsSearch.trim();
const hasUploadsSearch = normalizedUploadsSearch.length > 0;
const isUploadsFilterActive = uploadsFilter !== "all";
const uploadsScanLimit = isUploadsFilterActive || hasUploadsSearch ? 200 : 100;
const uploadsQuery = useAdminUploads(
{
filter: isUploadsFilterActive ? uploadsFilter : undefined,
search: hasUploadsSearch ? normalizedUploadsSearch : undefined,
limit: 40,
scan: uploadsScanLimit,
},
{
enabled: isAuthorized,
keepPreviousData: true,
refetchInterval: 30_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить список загрузок"),
},
);
const uploadContents = uploadsQuery.data?.contents ?? [];
const decoratedContents = useMemo(() => uploadContents.map((item) => classifyUpload(item)), [uploadContents]);
if (uploadsQuery.isLoading && !uploadsQuery.data) {
return (
<Section id="uploads" title="Загрузки" description="Мониторинг загрузок и конвертации">
Загрузка
</Section>
);
}
if (!uploadsQuery.data) {
return null;
}
const { states, total, recent, matching_total: matchingTotalRaw, category_totals: categoryTotalsRaw } = uploadsQuery.data;
const categoryTotals = categoryTotalsRaw ?? {};
const categoryCounts: Record<UploadCategory, number> = {
issues: categoryTotals.issues ?? 0,
processing: categoryTotals.processing ?? 0,
ready: categoryTotals.ready ?? 0,
unindexed: categoryTotals.unindexed ?? 0,
};
const searchNeedle = normalizedUploadsSearch.toLowerCase();
const filteredEntries = decoratedContents.filter((entry) => {
if (uploadsFilter !== "all" && !entry.categories.has(uploadsFilter)) {
return false;
}
if (searchNeedle && !entry.searchText.includes(searchNeedle)) {
return false;
}
return true;
});
const filteredContents = filteredEntries.map((entry) => entry.item);
const totalMatches = typeof matchingTotalRaw === "number" ? matchingTotalRaw : filteredEntries.length;
const filtersActive = isUploadsFilterActive || hasUploadsSearch;
const noMatches = totalMatches === 0;
const issueEntries = filteredEntries.filter((entry) => entry.categories.has("issues")).slice(0, 3);
const filterOptions: Array<{ id: UploadFilter; label: string; count: number }> = [
{ id: "all", label: "Все", count: totalMatches },
{ id: "issues", label: "Ошибки", count: categoryCounts.issues },
{ id: "processing", label: "В обработке", count: categoryCounts.processing },
{ id: "ready", label: "Готово", count: categoryCounts.ready },
{ id: "unindexed", label: "Без on-chain", count: categoryCounts.unindexed },
];
const handleResetFilters = () => {
setUploadsFilter("all");
setUploadsSearch("");
};
return (
<Section
id="uploads"
title="Загрузки"
description="Полная картина обработки контента: цепочка загрузки, конверсия, IPFS и публикация"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => uploadsQuery.refetch()}
disabled={uploadsQuery.isFetching}
>
{uploadsQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{Object.entries(states ?? {}).map(([key, value]) => (
<div key={key} className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<p className="text-xs uppercase tracking-wide text-slate-500">{key}</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(value)}</p>
</div>
))}
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<p className="text-xs uppercase tracking-wide text-slate-500">Всего</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(total)}</p>
<p className="mt-1 text-xs text-slate-500">Отфильтровано: {numberFormatter.format(filteredContents.length)}</p>
</div>
<div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
<p className="text-xs uppercase tracking-wide text-slate-500">Активные задачи</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{numberCompact.format(categoryCounts.processing)}</p>
<p className="mt-1 text-xs text-slate-500">{numberFormatter.format(categoryCounts.issues)} с ошибками</p>
</div>
</div>
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="flex flex-wrap items-center gap-2">
{filterOptions.map((option) => {
const isActive = option.id === uploadsFilter;
return (
<button
key={`upload-filter-${option.id}`}
type="button"
onClick={() => setUploadsFilter(option.id)}
className={clsx(
"inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold transition",
isActive
? "border-sky-500 bg-sky-500/20 text-sky-100 shadow-inner shadow-sky-500/20"
: "border-slate-700 text-slate-300 hover:border-slate-500 hover:text-slate-100",
)}
>
{option.label}
<span className="rounded-full bg-slate-900/60 px-2 py-0.5 text-[10px] font-semibold tracking-wide text-slate-300">
{numberFormatter.format(option.count)}
</span>
</button>
);
})}
{filtersActive ? (
<button
type="button"
onClick={handleResetFilters}
className="inline-flex items-center rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-300 transition hover:border-slate-500 hover:text-slate-100"
>
Сбросить
</button>
) : null}
</div>
<div className="relative w-full md:w-72">
<input
type="search"
value={uploadsSearch}
onChange={(event) => setUploadsSearch(event.target.value)}
placeholder="Название, CID, пользователь…"
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
/>
</div>
</div>
{issueEntries.length > 0 ? (
<div className="rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-xs text-amber-100">
<h3 className="text-sm font-semibold text-amber-50">Последние проблемы</h3>
<ul className="mt-2 space-y-1">
{issueEntries.map((entry) => (
<li key={`issue-${entry.item.encrypted_cid}`} className="flex items-center justify-between gap-2">
<span className="truncate text-sm text-amber-50">{entry.item.title || entry.item.encrypted_cid}</span>
<span className="text-[11px] text-amber-200">{formatDate(entry.item.updated_at)}</span>
</li>
))}
</ul>
</div>
) : null}
{noMatches ? (
<div className="rounded-xl border border-slate-800 bg-slate-950/40 p-6 text-sm text-slate-400">
Под подходящие условия не найдено загрузок.
</div>
) : (
<div className="grid gap-5">
{filteredEntries.map((entry) => (
<UploadCard key={entry.item.encrypted_cid} decoration={entry} />
))}
</div>
)}
<div className="rounded-xl bg-slate-950/40 p-4 ring-1 ring-slate-800">
<h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Последние события</h3>
<div className="mt-2 overflow-x-auto">
<table className="min-w-full divide-y divide-slate-800 text-left text-xs">
<thead className="bg-slate-950/70 text-[11px] uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-2">ID</th>
<th className="px-3 py-2">Файл</th>
<th className="px-3 py-2">Размер</th>
<th className="px-3 py-2">Состояние</th>
<th className="px-3 py-2">CID</th>
<th className="px-3 py-2">Ошибка</th>
<th className="px-3 py-2">Обновлено</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{recent.map((task) => (
<tr key={task.id} className="hover:bg-slate-900/50">
<td className="px-3 py-2 font-mono text-[10px] text-slate-400">{task.id}</td>
<td className="px-3 py-2">{task.filename ?? "—"}</td>
<td className="px-3 py-2">{formatBytes(task.size_bytes)}</td>
<td className="px-3 py-2">
<Badge tone={task.state === "done" ? "success" : task.state === "failed" ? "danger" : "warn"}>
{task.state}
</Badge>
</td>
<td className="px-3 py-2 font-mono text-[10px] text-slate-500">{task.encrypted_cid ?? "—"}</td>
<td className="px-3 py-2 text-rose-200">{task.error ?? "—"}</td>
<td className="px-3 py-2 text-slate-400">{formatDate(task.updated_at)}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</Section>
);
};

View File

@ -1,406 +0,0 @@
import { useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { useAdminUsers, useAdminSetUserAdmin } from "~/shared/services/admin";
import { Section, PaginationControls, CopyButton, Badge } from "../components";
import { useAdminContext } from "../context";
import { formatDate, formatStars, numberFormatter } from "../utils/format";
export const AdminUsersPage = () => {
const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
const location = useLocation();
const initialSearchValue = useMemo(() => {
const params = new URLSearchParams(location.search);
return params.get("search") ?? "";
}, [location.search]);
const [search, setSearch] = useState(initialSearchValue);
const [page, setPage] = useState(0);
const [pendingUserId, setPendingUserId] = useState<number | null>(null);
const limit = 50;
const normalizedSearch = search.trim();
const usersQuery = useAdminUsers(
{
limit,
offset: page * limit,
search: normalizedSearch || undefined,
},
{
enabled: isAuthorized,
keepPreviousData: true,
refetchInterval: 60_000,
onError: (error) => handleRequestError(error, "Не удалось загрузить пользователей"),
},
);
const setUserAdmin = useAdminSetUserAdmin({
onMutate: ({ user_id }) => {
setPendingUserId(user_id);
},
onSuccess: ({ user }) => {
pushFlash({
type: "success",
message: user.is_admin ? "Пользователь назначен администратором" : "Права администратора сняты",
});
void usersQuery.refetch();
},
onError: (error) => {
handleRequestError(error, "Не удалось обновить права администратора");
},
onSettled: () => {
setPendingUserId(null);
},
});
const handleToggleAdmin = (userId: number, nextValue: boolean) => {
setUserAdmin.mutate({ user_id: userId, is_admin: nextValue });
};
useEffect(() => {
setSearch(initialSearchValue);
}, [initialSearchValue]);
useEffect(() => {
setPage(0);
}, [normalizedSearch]);
if (usersQuery.isLoading && !usersQuery.data) {
return (
<Section id="users" title="Пользователи" description="Мониторинг пользователей, кошельков и активности">
Загрузка
</Section>
);
}
if (!usersQuery.data) {
return (
<Section id="users" title="Пользователи" description="Мониторинг пользователей, кошельков и активности">
<p className="text-sm text-slate-400">Выберите вкладку «Пользователи», чтобы загрузить данные.</p>
</Section>
);
}
const { items, summary, total } = usersQuery.data;
const summaryCards = [
{
label: "Всего пользователей",
value: numberFormatter.format(total),
helper: `На странице: ${numberFormatter.format(summary.users_returned)}`,
},
{
label: "Администраторы",
value: numberFormatter.format(summary.admins_total ?? 0),
helper: summary.admins_total ? "Имеют доступ к /admin" : "Назначьте администраторов",
},
{
label: "Кошельки (активные/всего)",
value: `${numberFormatter.format(summary.wallets_active)} / ${numberFormatter.format(summary.wallets_total)}`,
},
{
label: "Оплачено Stars",
value: formatStars(summary.stars_amount_paid),
helper: `${numberFormatter.format(summary.stars_paid)} платежей`,
},
{
label: "Неоплачено",
value: formatStars(summary.stars_amount_unpaid),
helper: `${numberFormatter.format(summary.stars_unpaid)} счетов`,
},
];
return (
<Section
id="users"
title="Пользователи"
description="Просмотр учетных записей, кошельков и активности"
actions={
<button
type="button"
className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
onClick={() => usersQuery.refetch()}
disabled={usersQuery.isFetching}
>
{usersQuery.isFetching ? "Обновляем…" : "Обновить"}
</button>
}
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{summaryCards.map((card) => (
<div
key={card.label}
className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40"
>
<p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
<p className="mt-2 text-lg font-semibold text-slate-100">{card.value}</p>
{card.helper ? <p className="mt-1 text-xs text-slate-500">{card.helper}</p> : null}
</div>
))}
</div>
<div className="mt-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="ID, Telegram, username, адрес"
className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-72"
/>
</div>
<div className="flex items-center gap-2">
<button
type="button"
className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
onClick={() => setSearch("")}
>
Сбросить
</button>
</div>
</div>
<div className="mt-4 hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
<table className="min-w-full divide-y divide-slate-800 text-left text-sm">
<thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
<tr>
<th className="px-3 py-3">Пользователь</th>
<th className="px-3 py-3">Кошельки</th>
<th className="px-3 py-3">Stars</th>
<th className="px-3 py-3">Лицензии</th>
<th className="px-3 py-3">Активность</th>
<th className="px-3 py-3">Дата</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-900/60">
{items.length === 0 ? (
<tr>
<td colSpan={6} className="px-3 py-6 text-center text-sm text-slate-400">
Нет пользователей, удовлетворяющих условиям.
</td>
</tr>
) : (
items.map((user) => (
<tr key={`admin-user-${user.id}`} className="hover:bg-slate-900/40">
<td className="px-3 py-3 align-top">
<div className="font-semibold text-slate-100">{user.username ? `@${user.username}` : "Без username"}</div>
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span>ID {numberFormatter.format(user.id)}</span>
<CopyButton
value={user.id}
aria-label="Скопировать ID пользователя"
successMessage="ID пользователя скопирован"
className="h-6 w-6"
/>
<span>· TG {numberFormatter.format(user.telegram_id)}</span>
<CopyButton
value={user.telegram_id}
aria-label="Скопировать Telegram ID"
successMessage="Telegram ID скопирован"
className="h-6 w-6"
/>
</div>
{user.first_name || user.last_name ? (
<div className="text-xs text-slate-500">
{(user.first_name ?? "")} {(user.last_name ?? "")}
</div>
) : null}
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
<Badge tone={user.is_admin ? "success" : "neutral"}>
{user.is_admin ? "Администратор" : "Пользователь"}
</Badge>
<button
type="button"
onClick={() => handleToggleAdmin(user.id, !user.is_admin)}
className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
disabled={setUserAdmin.isLoading}
>
{pendingUserId === user.id && setUserAdmin.isLoading
? "Сохраняем…"
: user.is_admin
? "Снять права"
: "Назначить админом"}
</button>
</div>
</td>
<td className="px-3 py-3 align-top">
<div className="text-xs text-slate-400">
Активных {numberFormatter.format(user.wallets.active_count)} / всего{" "}
{numberFormatter.format(user.wallets.total_count)}
</div>
<div className="mt-1 flex flex-wrap items-center gap-2 break-all text-xs text-slate-300">
<span className="break-all">{user.wallets.primary_address ?? "—"}</span>
{user.wallets.primary_address ? (
<CopyButton
value={user.wallets.primary_address}
aria-label="Скопировать адрес кошелька"
successMessage="Адрес кошелька скопирован"
className="h-6 w-6"
/>
) : null}
</div>
</td>
<td className="px-3 py-3 align-top">
<div className="font-semibold text-slate-100">{formatStars(user.stars.amount_total)}</div>
<div className="text-xs text-slate-400">Оплачено: {formatStars(user.stars.amount_paid)}</div>
<div className="text-xs text-slate-400">Неоплачено: {formatStars(user.stars.amount_unpaid)}</div>
</td>
<td className="px-3 py-3 align-top">
<div className="text-xs text-slate-300">Всего {numberFormatter.format(user.licenses.total)}</div>
<div className="text-xs text-slate-300">Активных {numberFormatter.format(user.licenses.active)}</div>
</td>
<td className="px-3 py-3 align-top">
{user.ip_activity.last ? (
<div className="flex flex-col gap-1 text-xs text-slate-300">
<div className="flex flex-wrap items-center gap-2">
<span className="break-all">{user.ip_activity.last.ip ?? "—"}</span>
{user.ip_activity.last.ip ? (
<CopyButton
value={user.ip_activity.last.ip}
aria-label="Скопировать IP-адрес"
successMessage="IP-адрес скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<span>{formatDate(user.ip_activity.last.seen_at)}</span>
</div>
) : (
<div className="text-xs text-slate-500">Нет данных</div>
)}
</td>
<td className="px-3 py-3 align-top text-xs text-slate-400">
<div>Создан: {formatDate(user.created_at)}</div>
<div>Последний вход: {formatDate(user.last_use)}</div>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
<div className="mt-4 grid gap-4 md:hidden">
{items.length === 0 ? (
<div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
Нет пользователей, удовлетворяющих условиям.
</div>
) : (
items.map((user) => (
<div key={`user-card-${user.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/50 p-4 shadow-inner shadow-black/30">
<div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-100">
<span>{user.username ? `@${user.username}` : "Без username"}</span>
<CopyButton
value={user.id}
aria-label="Скопировать ID пользователя"
successMessage="ID пользователя скопирован"
className="h-6 w-6"
/>
<CopyButton
value={user.telegram_id}
aria-label="Скопировать Telegram ID"
successMessage="Telegram ID скопирован"
className="h-6 w-6"
/>
</div>
{user.first_name || user.last_name ? (
<div className="mt-1 text-xs text-slate-400">
{(user.first_name ?? "")} {(user.last_name ?? "")}
</div>
) : null}
<div className="mt-3 grid gap-3 text-xs text-slate-300">
<div className="flex flex-col gap-1">
<span className="text-slate-500">ID · Telegram</span>
<div className="flex flex-wrap items-center gap-2">
<span>ID {numberFormatter.format(user.id)}</span>
<span>· TG {numberFormatter.format(user.telegram_id)}</span>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Кошельки</span>
<div className="flex flex-wrap items-center gap-2 text-slate-300">
<span>
Активных {numberFormatter.format(user.wallets.active_count)} / всего{" "}
{numberFormatter.format(user.wallets.total_count)}
</span>
{user.wallets.primary_address ? (
<CopyButton
value={user.wallets.primary_address}
aria-label="Скопировать адрес кошелька"
successMessage="Адрес кошелька скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<span className="break-all text-[11px] text-slate-400">{user.wallets.primary_address ?? "—"}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Stars</span>
<div className="flex flex-col">
<span className="font-semibold text-slate-100">{formatStars(user.stars.amount_total)}</span>
<span>Оплачено: {formatStars(user.stars.amount_paid)}</span>
<span>Неоплачено: {formatStars(user.stars.amount_unpaid)}</span>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Лицензии</span>
<span>
Всего {numberFormatter.format(user.licenses.total)} · Активных{" "}
{numberFormatter.format(user.licenses.active)}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Роль</span>
<div className="flex flex-wrap items-center gap-2">
<Badge tone={user.is_admin ? "success" : "neutral"}>
{user.is_admin ? "Администратор" : "Пользователь"}
</Badge>
<button
type="button"
onClick={() => handleToggleAdmin(user.id, !user.is_admin)}
className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
disabled={setUserAdmin.isLoading}
>
{pendingUserId === user.id && setUserAdmin.isLoading
? "Сохраняем…"
: user.is_admin
? "Снять права"
: "Назначить админом"}
</button>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-slate-500">Последняя активность</span>
{user.ip_activity.last ? (
<div className="flex flex-col gap-1">
<div className="flex flex-wrap items-center gap-2">
<span className="break-all">{user.ip_activity.last.ip ?? "—"}</span>
{user.ip_activity.last.ip ? (
<CopyButton
value={user.ip_activity.last.ip}
aria-label="Скопировать IP-адрес"
successMessage="IP-адрес скопирован"
className="h-6 w-6"
/>
) : null}
</div>
<span className="text-slate-400">{formatDate(user.ip_activity.last.seen_at)}</span>
</div>
) : (
<span className="text-slate-500">Нет данных</span>
)}
</div>
</div>
<div className="mt-3 text-[11px] text-slate-500">
<div>Создан: {formatDate(user.created_at)}</div>
<div>Последний вход: {formatDate(user.last_use)}</div>
</div>
</div>
))
)}
</div>
<div className="mt-4">
<PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
</div>
</Section>
);
};

View File

@ -1,13 +0,0 @@
export { AdminOverviewPage } from "./Overview";
export { AdminStoragePage } from "./Storage";
export { AdminUploadsPage } from "./Uploads";
export { AdminEventsPage } from "./Events";
export { AdminUsersPage } from "./Users";
export { AdminLicensesPage } from "./Licenses";
export { AdminStarsPage } from "./Stars";
export { AdminSystemPage } from "./System";
export { AdminBlockchainPage } from "./Blockchain";
export { AdminNodesPage } from "./Nodes";
export { AdminStatusPage } from "./Status";
export { AdminNetworkPage } from "./Network";
export { AdminNetworkSettingsPage } from "./NetworkSettings";

View File

@ -1,15 +0,0 @@
export type FlashMessage = {
type: "success" | "error" | "info";
message: string;
};
export type AuthState = "checking" | "authorized" | "unauthorized";
export type AdminContextValue = {
authState: AuthState;
isAuthorized: boolean;
pushFlash: (message: FlashMessage) => void;
clearFlash: () => void;
handleRequestError: (error: unknown, fallbackMessage: string) => void;
invalidateAll: () => Promise<void>;
};

View File

@ -1,62 +0,0 @@
const numberFormatter = new Intl.NumberFormat("ru-RU");
const dateTimeFormatter = new Intl.DateTimeFormat("ru-RU", {
dateStyle: "short",
timeStyle: "medium",
});
export const formatBytes = (input?: number | null) => {
if (!input) {
return "0 B";
}
const units = ["B", "KB", "MB", "GB", "TB", "PB"] as const;
let value = input;
let unitIndex = 0;
while (value >= 1024 && unitIndex < units.length - 1) {
value /= 1024;
unitIndex += 1;
}
const precision = value >= 10 || value < 0.1 ? 0 : 1;
return `${value.toFixed(precision)} ${units[unitIndex]}`;
};
export const formatStars = (input?: number | null) => {
const value = Number(input ?? 0);
return `${numberFormatter.format(value)}`;
};
export const formatDate = (iso?: string | null) => {
if (!iso) {
return "—";
}
const date = new Date(iso);
if (Number.isNaN(date.getTime())) {
return iso;
}
return dateTimeFormatter.format(date);
};
export const formatUnknown = (value: unknown): string => {
if (value === null || value === undefined) {
return "—";
}
if (typeof value === "string") {
return value || "—";
}
if (typeof value === "number" || typeof value === "bigint") {
return numberFormatter.format(Number(value));
}
if (typeof value === "boolean") {
return value ? "Да" : "Нет";
}
if (value instanceof Date) {
return formatDate(value.toISOString());
}
try {
return JSON.stringify(value);
} catch (error) {
return String(value);
}
};
export { numberFormatter, dateTimeFormatter };

View File

@ -8,7 +8,7 @@ import ReactPlayer from "react-player/lazy";
import { Button } from "~/shared/ui/button";
import { useRootStore } from "~/shared/stores/root";
import { FormLabel } from "~/shared/ui/form-label";
import { useLegacyUploadFile, useTusUpload } from "~/shared/services/file";
import { useUploadFile } from "~/shared/services/file";
import { Progress } from "~/shared/ui/progress";
import { useCreateNewContent } from "~/shared/services/content";
import { BackButton } from "~/shared/ui/back-button";
@ -31,8 +31,8 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
const [isCoverExpanded, setCoverExpanded] = useState(false);
const uploadCover = useLegacyUploadFile();
const uploadFile = useTusUpload();
const uploadCover = useUploadFile();
const uploadFile = useUploadFile();
const createContent = useCreateNewContent();
@ -42,85 +42,28 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
setIsErrorUploadModal(false);
uploadFile.resetUploadError();
uploadCover.resetUploadError();
console.info("[App2Client][Presubmit] Пользователь закрыл модалку ошибок загрузки");
};
useEffect(() => {
if (uploadFile.uploadError || uploadCover.uploadError) {
console.error("[App2Client][Presubmit] Обнаружены ошибки загрузки", {
fileError: uploadFile.uploadError,
coverError: uploadCover.uploadError,
});
setIsErrorUploadModal(true);
}
}, [uploadFile.uploadError, uploadCover.uploadError]);
const handleSubmit = async () => {
try {
console.info("[App2Client][Presubmit] Начинаем отправку контента", {
name: rootStore.name,
author: rootStore.author,
fileName: rootStore.file?.name,
fileSize: rootStore.file?.size,
fileType: rootStore.file?.type,
allowCover: rootStore.allowCover,
hasCover: Boolean(rootStore.cover),
allowDownload: rootStore.allowDwnld,
hashtags: rootStore.hashtags,
royaltyCount: rootStore.royalty.length,
allowResale: rootStore.allowResale,
});
let coverUploadResult = { content_id_v1: "" };
console.info("[App2Client][Presubmit] Загружаем основной файл через tus");
const fileUploadResult = await uploadFile.mutateAsync({
file: rootStore.file as File,
metadata: {
title: rootStore.name,
description: "",
content_type: rootStore.file?.type || "application/octet-stream",
preview_start_ms: 0,
preview_duration_ms: 30000,
downloadable: rootStore.allowDwnld ? "1" : "0",
},
});
if (!fileUploadResult.encryptedCid) {
throw new Error("Tus upload did not return encrypted cid");
}
console.info("[App2Client][Presubmit] Основной файл загружен", {
encryptedCid: fileUploadResult.encryptedCid,
uploadId: fileUploadResult.uploadId,
state: fileUploadResult.state,
sizeBytes: fileUploadResult.sizeBytes,
});
const fileUploadResult = await uploadFile.mutateAsync(
rootStore.file as File,
);
if (rootStore.allowCover && rootStore.cover) {
console.info("[App2Client][Presubmit] Начинаем загрузку обложки", {
fileName: rootStore.cover.name,
fileSize: rootStore.cover.size,
fileType: rootStore.cover.type,
});
coverUploadResult = await uploadCover.mutateAsync(
rootStore.cover as File,
);
console.info("[App2Client][Presubmit] Обложка загружена", {
contentIdV1: coverUploadResult.content_id_v1,
});
} else {
console.info("[App2Client][Presubmit] Обложка не загружается", {
allowCover: rootStore.allowCover,
hasCoverFile: Boolean(rootStore.cover),
});
}
console.info("[App2Client][Presubmit] Отправляем метаданные контента", {
downloadable: rootStore.allowDwnld,
coverIncluded: Boolean(coverUploadResult.content_id_v1),
});
const createContentResponse = await createContent.mutateAsync({
title: rootStore.name,
@ -133,7 +76,7 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
// следует отметить что вы должны еще откомментровать AuthorsStep в RootPage
// authors: rootStore.authors,
downloadable: rootStore.allowDwnld,
content: fileUploadResult.encryptedCid,
content: fileUploadResult.content_id_v1,
image: coverUploadResult.content_id_v1,
price: String(rootStore.price * 10 ** 9),
hashtags: rootStore.hashtags,
@ -157,10 +100,6 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
if (createContentResponse.data) {
if (createContentResponse.data.address != "free") {
console.info("[App2Client][Presubmit] Отправляем транзакцию через TonConnect", {
address: createContentResponse.data.address,
amount: createContentResponse.data.amount,
});
const transactionResponse = await tonConnectUI.sendTransaction({
validUntil: Math.floor(Date.now() / 1000) + 120,
messages: [
@ -172,29 +111,19 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
],
});
if (transactionResponse.boc) {
console.info("[App2Client][Presubmit] Транзакция успешно отправлена", {
bocLength: transactionResponse.boc.length,
});
WebApp.close();
} else {
console.error("Transaction failed:", transactionResponse);
console.error("[App2Client][Presubmit] Транзакция не отправлена", {
response: transactionResponse,
});
}
}
}
console.info("[App2Client][Presubmit] Завершаем процесс и закрываем WebApp");
WebApp.close();
// @ts-expect-error Type issues
} catch (error: never) {
console.error("An error occurred during the submission process:", error);
console.error("[App2Client][Presubmit] Ошибка во время отправки", {
error,
});
if (error?.status === 400) {
alert(

View File

@ -1,17 +1,16 @@
import ReactPlayer from 'react-player/lazy';
import { useTonConnectUI } from '@tonconnect/ui-react';
import { useWebApp } from '@vkruglikov/react-telegram-web-app';
import { Button } from '~/shared/ui/button';
import { usePurchaseContent, useViewContent } from '~/shared/services/content';
import { fromNanoTON } from '~/shared/utils';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { AudioPlayer } from '~/shared/ui/audio-player';
import { useAuth } from '~/shared/services/auth';
import { CongratsModal } from './components/congrats-modal';
import { ErrorModal } from './components/error-modal';
import { resolveStartPayload } from '~/shared/utils/start-payload';
import { useRootStore } from '~/shared/stores/root';
import { useTgFullscreen } from '~/shared/hooks/use-tgfullscreen';
type InvoiceStatus = 'paid' | 'failed' | 'cancelled' | 'pending';
// Add type for invoice event
@ -22,118 +21,63 @@ interface InvoiceEvent {
export const ViewContentPage = () => {
const WebApp = useWebApp();
const { contentId } = resolveStartPayload();
const { addNotification } = useRootStore();
const { data: content, refetch: refetchContent } = useViewContent(
contentId
WebApp.initDataUnsafe?.start_param
);
const { mutateAsync: purchaseContent } = usePurchaseContent();
const [tonConnectUI] = useTonConnectUI();
const { isFullscreen, toggleFullscreen } = useTgFullscreen();
const auth = useAuth();
const [isCongratsModal, setIsCongratsModal] = useState(false);
const [isErrorModal, setIsErrorModal] = useState(false);
const statusState = content?.data?.status?.state ?? "uploaded";
const conversionState = content?.data?.conversion?.state;
const uploadState = content?.data?.upload?.state;
const statusMessage = useMemo(() => {
switch (statusState) {
case "processing":
return "Контент обрабатывается";
case "failed":
return "Ошибка обработки";
case "ready":
return null;
default:
return "Файл загружен";
}
}, [statusState]);
const haveLicense = useMemo(() => (
content?.data?.have_licenses?.includes('listen') ||
content?.data?.have_licenses?.includes('resale')
), [content]);
const contentMime = content?.data?.content_mime ?? null;
const contentKind = content?.data?.display_options?.content_kind ?? null;
const mediaUrl = content?.data?.display_options?.content_url ?? null;
const isAudio = contentKind === 'audio' || Boolean(content?.data?.content_type?.startsWith('audio'));
const isVideo = contentKind === 'video' || Boolean(content?.data?.content_type?.startsWith('video'));
const isBinary = contentKind === 'binary' || (!isAudio && !isVideo);
const hasInlinePlayer = Boolean(mediaUrl) && (isAudio || isVideo);
const binaryDownloadReady = Boolean(mediaUrl) && isBinary;
const isReadyState = statusState === "ready";
const previewAvailable = Boolean(content?.data?.display_options?.has_preview);
const coverImage = content?.data?.display_options?.metadata?.image ?? null;
const metadataName = content?.data?.display_options?.metadata?.name;
const contentTitle = metadataName || content?.data?.encrypted?.title || 'Контент';
const processingDetails = useMemo(() => {
if (!statusMessage) {
return null;
}
return {
conversion: conversionState,
upload: uploadState,
};
}, [conversionState, statusMessage, uploadState]);
const canDownload = Boolean(mediaUrl) && haveLicense && ((content?.data?.downloadable ?? false) || isBinary);
const binaryAwaitingAccess = isBinary && !binaryDownloadReady;
const isFailed = statusState === "failed";
const handleBuyContentTON = useCallback(async () => {
if (!contentId) {
console.error('No content identifier available for purchase');
return;
}
try {
// Если не подключен, начинаем процесс подключения через auth
if (!tonConnectUI.connected) {
console.log('DEBUG: Wallet not connected, using auth flow first');
// Helper function to wait for wallet connection
const waitForConnection = async (timeoutMs = 30000, intervalMs = 500) => {
const startTime = Date.now();
// Вызываем auth.mutateAsync() до открытия модального окна
// Это настроит параметры подключения с TonProof
try {
await auth.mutateAsync();
// Проверяем, установилось ли подключение после auth
if (!tonConnectUI.connected) {
console.log('DEBUG: Auth did not establish connection, returning');
return;
while (Date.now() - startTime < timeoutMs) {
if (tonConnectUI.connected) {
addNotification('Кошелек подключен', 'success');
return true;
}
await new Promise((resolve) => setTimeout(resolve, intervalMs));
}
addNotification('Время ожидания подключения кошелька истекло', 'warning');
return false; // Timed out
};
console.log('DEBUG: Connection and authentication successful');
} catch (error) {
console.log('Ошибка подключения кошелька', 'danger');
console.error('DEBUG: Auth failed during connection:', error);
// If not connected, start connection process
if (!tonConnectUI.connected) {
console.log('DEBUG: Wallet not connected, opening modal');
// Open connection modal
await tonConnectUI.openModal();
// Wait for connection
const connected = await waitForConnection();
if (!connected) {
console.log('DEBUG: Connection timed out or was cancelled');
return;
}
console.log('DEBUG: Connection successful, authenticating');
await auth.mutateAsync();
} else {
// Если уже подключены, просто аутентифицируемся
console.log('DEBUG: Already connected, authenticating');
// Already connected, just authenticate
await auth.mutateAsync();
}
// Проверка наличия TonProof
if (
tonConnectUI.wallet?.connectItems?.tonProof &&
!('error' in tonConnectUI.wallet.connectItems.tonProof)
) {
console.log(
'DEBUG: TonProof available:',
tonConnectUI.wallet.connectItems.tonProof
);
} else {
console.warn('DEBUG: TonProof not available after connection');
}
// Теперь продолжаем с покупкой
// Proceed with purchase
console.log('DEBUG: Proceeding with purchase');
const contentResponse = await purchaseContent({
content_address: contentId,
content_address: WebApp.initDataUnsafe?.start_param,
license_type: 'resale',
});
@ -160,7 +104,7 @@ export const ViewContentPage = () => {
setIsErrorModal(true);
console.error('Error handling Ton Connect subscription:', error);
}
}, [auth, contentId, purchaseContent, refetchContent, tonConnectUI]);
}, [auth, purchaseContent, refetchContent, tonConnectUI, WebApp.initDataUnsafe?.start_param]);
const handleBuyContentStars = useCallback(async () => {
try {
@ -202,34 +146,21 @@ export const ViewContentPage = () => {
}
}, [content, refetchContent]);
const hadLicenseRef = useRef<boolean>(haveLicense);
const haveLicense = useMemo(() => {
document.title = content?.data?.display_options?.metadata?.name;
return (
content?.data?.have_licenses?.includes('listen') ||
content?.data?.have_licenses?.includes('resale')
);
}, [content]);
useEffect(() => {
if (haveLicense && !hadLicenseRef.current) {
hadLicenseRef.current = true;
void refetchContent();
} else if (!haveLicense) {
hadLicenseRef.current = false;
}
}, [haveLicense, refetchContent]);
useEffect(() => {
if (contentTitle) {
document.title = contentTitle;
}
}, [contentTitle]);
useEffect(() => {
if (!contentId) {
return () => undefined;
}
const interval = setInterval(() => {
void refetchContent();
}, 5000);
return () => clearInterval(interval);
}, [contentId, refetchContent]);
}, []);
const handleConfirmCongrats = () => {
setIsCongratsModal(!isCongratsModal);
@ -242,15 +173,11 @@ export const ViewContentPage = () => {
const handleDwnldContent = async () => {
try {
const fileUrl = content?.data?.display_options?.content_url;
if (!fileUrl) {
return;
}
const fileName = content?.data?.display_options?.metadata?.name || 'content';
const rawExt = content?.data?.content_ext ?? 'bin';
const normalizedExt = rawExt.replace(/^\.+/, '');
const fileFormat = content?.data?.content_ext || '.raw';
await WebApp.downloadFile({
url: fileUrl,
file_name: `${fileName}.${normalizedExt}`,
file_name: fileName + '.' + fileFormat,
});
} catch (error) {
console.error('Error downloading content:', error);
@ -258,151 +185,123 @@ export const ViewContentPage = () => {
};
return (
<main className={'min-h-screen flex w-full flex-col gap-[40px] px-4 '}>
<main className={'min-h-screen flex w-full flex-col gap-[50px] px-4 '}>
{isCongratsModal && <CongratsModal onConfirm={handleConfirmCongrats} />}
{isErrorModal && <ErrorModal onConfirm={handleErrorModal} />}
{coverImage && (
<div className="mt-[30px] flex w-full justify-center">
<div className="relative aspect-square w-full max-w-[320px] rounded-3xl border border-slate-900/60 bg-transparent">
<div className="absolute inset-0 flex items-center justify-center overflow-hidden">
<img
alt={'content cover'}
className={'max-h-full max-w-full object-contain'}
src={coverImage}
loading="lazy"
/>
</div>
</div>
</div>
)}
{isReadyState ? (
<>
{hasInlinePlayer && (
isAudio ? (
<AudioPlayer src={mediaUrl ?? ''} />
) : (
<ReactPlayer
playsinline={true}
controls={true}
width="100%"
config={{
file: {
attributes: {
playsInline: true,
autoPlay: true,
poster: content?.data?.display_options?.metadata?.image || undefined,
},
},
}}
url={mediaUrl ?? ''}
light={coverImage || undefined}
/>
)
)}
{binaryDownloadReady && (
<div className="rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-5 shadow-inner shadow-black/20">
<h2 className="text-base font-semibold text-slate-100">Файл готов к скачиванию</h2>
<p className="mt-2 text-sm text-slate-300">
{contentMime ? `Тип файла: ${contentMime}` : 'Скачайте оригинальные данные на устройство.'}
</p>
</div>
)}
<section className={'flex flex-col'}>
<h1 className={'text-[20px] font-bold'}>{metadataName}</h1>
<p className={'mt-2 text-[12px]'}>
{content?.data?.display_options?.metadata?.description}
</p>
</section>
{binaryAwaitingAccess && (
<div className="rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-5 text-sm text-slate-300">
<h2 className="text-base font-semibold text-slate-100">Предпросмотр недоступен</h2>
<p className="mt-2">
Этот файл нельзя открыть в браузере. Получите доступ, чтобы скачать оригинал на устройство.
</p>
{!previewAvailable && (
<p className="mt-2 text-xs text-slate-500">
Предпросмотр не формируется для бинарных данных.
</p>
)}
</div>
)}
<div className="mt-auto pb-2">
{canDownload && (
<Button
onClick={() => handleDwnldContent()}
className={'h-[48px] mb-4'}
label={`Скачать ${isBinary ? 'файл' : 'контент'}`}
/>
)}
{!haveLicense && (
<div className="flex gap-4 pb-2 flex-nowrap overflow-hidden">
<Button
onClick={handleBuyContentTON}
className={'mb-4 h-[48px] px-2 flex-1 min-w-0 w-auto truncate'}
label={`Купить за ${fromNanoTON(content?.data?.encrypted?.license?.resale?.price)} ТОН`}
includeArrows={content?.data?.invoice ? false : true}
/>
{content?.data?.invoice && (
<Button
onClick={handleBuyContentStars}
className={'mb-4 h-[48px] px-2 flex-1 min-w-0 w-auto truncate'}
label={`Купить за ${content?.data?.invoice?.amount} ⭐️`}
/>
)}
</div>
)}
<Button
onClick={() => {
WebApp.openTelegramLink(`https://t.me/MY_UploaderRobot`);
}}
className={'h-[48px] bg-darkred'}
label={`Загрузить свой контент`}
<div
className={`${isFullscreen ? 'left-[50%] translate-x-[-50%] fixed top-11 lg:top-2' : 'left-4 absolute top-2'} z-50`}
>
<button
onClick={toggleFullscreen}
className="bg-primary bg-opacity-80 w-8 h-8 flex items-center justify-center rounded-full text-white"
>
<svg
width="20"
height="20"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 6V2H6M8 2H12V6M12 8V12H8M6 12H2V8"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
{tonConnectUI.connected && (
</svg>
</button>
</div>
<div className="mt-[50px]">
{content?.data?.content_type.startsWith('audio') &&
content?.data?.display_options?.metadata?.image && (
<div className={'mt-[30px] h-[314px] w-full'}>
<img
alt={'content_image'}
className={'h-full w-full object-cover object-center'}
src={content?.data?.display_options?.metadata?.image}
/>
</div>
)}
{content?.data?.content_type.startsWith('audio') ? (
<AudioPlayer src={content?.data?.display_options?.content_url} />
) : (
<div className="w-full video-container">
<ReactPlayer
playsinline={true}
controls={true}
width="100%"
height="auto"
className="react-player"
allowFullScreen={true}
url={content?.data?.display_options?.content_url}
config={{
file: {
attributes: {
playsInline: true,
autoPlay: true,
poster:
content?.data?.display_options?.metadata?.image ||
undefined,
},
},
}}
/>
</div>
)}
</div>
<section className={'flex flex-col'}>
<h1 className={'text-[20px] font-bold'}>
{content?.data?.display_options?.metadata?.name}
</h1>
{/*<h2>Russian</h2>*/}
{/*<h2>2022</h2>*/}
<p className={'mt-2 text-[12px]'}>
{content?.data?.display_options?.metadata?.description}
</p>
</section>
<div className="mt-auto pb-2">
{content?.data?.downloadable && (
<Button
onClick={() => handleDwnldContent()}
className={'h-[48px] mb-4'}
label={`Скачать контент`}
/>
)}
{!haveLicense && (
<div className="flex flex-row gap-4">
<Button
onClick={handleBuyContentTON}
className={'mb-4 h-[48px] px-2'}
label={`Купить за ${fromNanoTON(content?.data?.encrypted?.license?.resale?.price)} ТОН`}
includeArrows={content?.data?.invoice ? false : true}
/>
{content?.data?.invoice && (
<Button
onClick={() => {
tonConnectUI.disconnect();
}}
className={'h-[48px] bg-darkred mt-4'}
label={`Отключить кошелек`}
onClick={handleBuyContentStars}
className={'mb-4 h-[48px] px-2'}
label={`Купить за ${content?.data?.invoice?.amount} ⭐️`}
/>
)}
</div>
</>
) : (
<div className="flex flex-1 flex-col items-center justify-center py-16">
<div className="max-w-md rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-8 text-center shadow-lg shadow-black/30">
<h1 className="text-lg font-semibold text-slate-100">
{isFailed ? 'Не удалось подготовить контент' : 'Контент скоро будет здесь'}
</h1>
<p className="mt-3 text-sm text-slate-300">
{isFailed
? 'При обработке файла произошла ошибка. Попробуйте обновить страницу или повторно загрузить контент.'
: 'Мы уже обрабатываем загруженный файл и обновим страницу автоматически, как только появится доступ к полному контенту.'}
</p>
{statusMessage && (
<p className="mt-4 text-[12px] text-slate-500">
Текущее состояние: {statusMessage}
</p>
)}
{processingDetails?.conversion && (
<p className="mt-2 text-[12px] text-slate-500">
Статус конвертера: {processingDetails.conversion}
</p>
)}
{processingDetails?.upload && (
<p className="mt-2 text-[12px] text-slate-500">
Загрузка: {processingDetails.upload}
</p>
)}
</div>
</div>
)}
)}
<Button
onClick={() => {
WebApp.openTelegramLink(`https://t.me/MY_UploaderRobot`);
}}
className={'h-[48px] bg-darkred'}
label={`Загрузить свой контент`}
/>
{tonConnectUI.connected && (
<Button
onClick={() => {
tonConnectUI.disconnect();
}}
className={'h-[48px] bg-darkred mt-4'}
label={`Отключить кошелек`}
/>
)}
</div>
</main>
);
};

View File

@ -0,0 +1,87 @@
import { useState, useCallback, useEffect } from 'react';
import { useWebApp } from '@vkruglikov/react-telegram-web-app';
import { viewport } from '@telegram-apps/sdk';
/**
* Hook for managing Telegram WebApp fullscreen state
* @returns {Object} Object containing isFullscreen state and toggleFullscreen function
*/
export const useTgFullscreen = () => {
const WebApp = useWebApp();
const [isFullscreen, setIsFullscreen] = useState(false);
// Initialize viewport once on mount
useEffect(() => {
// Mount viewport if available
if (viewport.mount.isAvailable() && !viewport.isMounted()) {
viewport.mount();
}
// Check current fullscreen state
if (viewport.isFullscreen && typeof viewport.isFullscreen === 'function') {
setIsFullscreen(viewport.isFullscreen());
}
// Use the WebApp event system for tracking changes
const handleViewportChanged = () => {
if (WebApp.isExpanded) {
setIsFullscreen(true);
}
};
try {
WebApp.onEvent('viewportChanged', handleViewportChanged);
} catch (error) {
console.warn('Could not add viewportChanged event listener:', error);
}
return () => {
try {
WebApp.offEvent('viewportChanged', handleViewportChanged);
} catch (error) {
console.warn('Could not remove viewportChanged event listener:', error);
}
};
}, [WebApp]);
const toggleFullscreen = useCallback(async () => {
try {
if (!isFullscreen) {
// Try to enter fullscreen
if (viewport.requestFullscreen && viewport.requestFullscreen.isAvailable()) {
await viewport.requestFullscreen();
setIsFullscreen(true);
} else if (viewport.expand && viewport.expand.isAvailable()) {
viewport.expand();
setIsFullscreen(true);
} else {
WebApp.expand();
setIsFullscreen(true);
}
} else {
// Try to exit fullscreen
if (viewport.exitFullscreen && viewport.exitFullscreen.isAvailable()) {
await viewport.exitFullscreen();
setIsFullscreen(false);
} else {
setIsFullscreen(false);
}
}
} catch (error) {
console.error('Error toggling fullscreen:', error);
if (!isFullscreen) {
try {
WebApp.expand();
setIsFullscreen(true);
} catch {
console.error('All fullscreen methods failed');
}
} else {
setIsFullscreen(false);
}
}
}, [WebApp, isFullscreen]);
return { isFullscreen, toggleFullscreen };
};

View File

@ -1,97 +0,0 @@
const TOKEN_STORAGE_KEY = '__admin_panel_token__';
const HEADER_STORAGE_KEY = '__admin_panel_header__';
const COOKIE_STORAGE_KEY = '__admin_panel_cookie__';
const DEFAULT_HEADER_NAME = 'X-Admin-Token';
const DEFAULT_COOKIE_NAME = 'admin_session';
const DEFAULT_MAX_AGE = 172800; // 48h
const isBrowser = typeof window !== 'undefined';
export type AdminAuthSnapshot = {
token: string | null;
headerName: string;
cookieName: string;
maxAge: number;
};
export const getAdminAuthSnapshot = (): AdminAuthSnapshot => {
if (!isBrowser) {
return {
token: null,
headerName: DEFAULT_HEADER_NAME,
cookieName: DEFAULT_COOKIE_NAME,
maxAge: DEFAULT_MAX_AGE,
};
}
const token = window.localStorage.getItem(TOKEN_STORAGE_KEY);
const headerName = window.localStorage.getItem(HEADER_STORAGE_KEY) || DEFAULT_HEADER_NAME;
const cookieName = window.localStorage.getItem(COOKIE_STORAGE_KEY) || DEFAULT_COOKIE_NAME;
return {
token,
headerName,
cookieName,
maxAge: DEFAULT_MAX_AGE,
};
};
export const persistAdminAuth = ({
token,
headerName,
cookieName,
maxAge,
}: {
token: string;
headerName?: string | null;
cookieName?: string | null;
maxAge?: number | null;
}) => {
if (!isBrowser) {
return;
}
window.localStorage.setItem(TOKEN_STORAGE_KEY, token);
if (headerName) {
window.localStorage.setItem(HEADER_STORAGE_KEY, headerName);
}
if (cookieName) {
window.localStorage.setItem(COOKIE_STORAGE_KEY, cookieName);
}
// Best effort: mirror cookie locally to support same-origin deployments.
const targetCookieName = cookieName || DEFAULT_COOKIE_NAME;
const cookieParts = [
`${targetCookieName}=${encodeURIComponent(token)}`,
'Path=/',
`Max-Age=${maxAge ?? DEFAULT_MAX_AGE}`,
'SameSite=Lax',
];
if (window.location.protocol === 'https:') {
cookieParts.push('Secure');
}
document.cookie = cookieParts.join('; ');
};
export const clearAdminAuth = () => {
if (!isBrowser) {
return;
}
const snapshot = getAdminAuthSnapshot();
window.localStorage.removeItem(TOKEN_STORAGE_KEY);
window.localStorage.removeItem(HEADER_STORAGE_KEY);
window.localStorage.removeItem(COOKIE_STORAGE_KEY);
if (snapshot.cookieName) {
const cookieParts = [
`${snapshot.cookieName}=`,
'Path=/',
'Max-Age=0',
'SameSite=Lax',
];
if (window.location.protocol === 'https:') {
cookieParts.push('Secure');
}
document.cookie = cookieParts.join('; ');
}
};

View File

@ -1,67 +1,17 @@
import axios, { InternalAxiosRequestConfig } from 'axios';
import axios from 'axios';
import { getAdminAuthSnapshot } from '~/shared/libs/admin-auth';
export const APP_API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const API_BASE_PATH = '/api/v1';
export const request = axios.create({
baseURL: APP_API_BASE_URL,
});
const isBrowser = typeof window !== 'undefined';
request.interceptors.request.use((config) => {
const auth_v1_token = localStorage.getItem('auth_v1_token');
const readStorage = (key: string) => {
if (!isBrowser) {
return null;
}
try {
return window.localStorage.getItem(key);
} catch (error) {
console.error('Failed to access localStorage', error);
return null;
}
};
type RequestConfig = InternalAxiosRequestConfig;
const resolveDefaultBaseUrl = () => {
const envBase = (import.meta.env.VITE_API_BASE_URL ?? '').trim();
if (envBase) {
return envBase.replace(/\/$/, '');
}
if (isBrowser) {
return `${window.location.origin.replace(/\/$/, '')}${API_BASE_PATH}`;
}
return API_BASE_PATH;
};
const DEFAULT_API_BASE_URL = resolveDefaultBaseUrl();
export const request = axios.create({ withCredentials: true });
request.interceptors.request.use((config: RequestConfig) => {
config.headers = config.headers ?? {};
const headers = config.headers as Record<string, any>;
const authToken = readStorage('auth_v1_token');
if (authToken && !headers.Authorization) {
headers.Authorization = authToken;
}
const urlPath = config.url ?? '';
if (urlPath.startsWith('/admin')) {
const { token, headerName } = getAdminAuthSnapshot();
if (token) {
const headerKey = headerName || 'X-Admin-Token';
if (!headers[headerKey]) {
headers[headerKey] = token;
}
}
}
if (!config.baseURL) {
config.baseURL = DEFAULT_API_BASE_URL;
if (auth_v1_token) {
config.headers.Authorization = auth_v1_token;
}
return config;
});
request.interceptors.response.use((response) => response);

File diff suppressed because it is too large Load Diff

View File

@ -1,11 +1,11 @@
import { useRef } from 'react';
import { useRef, useEffect } from 'react';
import { useTonConnectUI } from '@tonconnect/ui-react';
import { useMutation } from 'react-query';
import { request } from '~/shared/libs';
import { useWebApp } from '@vkruglikov/react-telegram-web-app';
import { appendReferral } from '~/shared/utils/start-payload';
const sessionStorageKey = 'auth_v1_token';
const tonProofStorageKey = 'stored_ton_proof';
const payloadTTLMS = 1000 * 60 * 20;
export const useAuth = () => {
@ -13,6 +13,25 @@ export const useAuth = () => {
const [tonConnectUI] = useTonConnectUI();
const interval = useRef<ReturnType<typeof setInterval> | undefined>();
// Store ton_proof when it becomes available
useEffect(() => {
if (
tonConnectUI.wallet?.connectItems?.tonProof &&
!('error' in tonConnectUI.wallet.connectItems.tonProof) &&
tonConnectUI.wallet.account
) {
console.log('DEBUG: Storing ton_proof for future use');
localStorage.setItem(
tonProofStorageKey,
JSON.stringify({
timestamp: Date.now(),
account: tonConnectUI.wallet.account,
proof: tonConnectUI.wallet.connectItems.tonProof.proof,
})
);
}
}, [tonConnectUI.wallet?.connectItems?.tonProof, tonConnectUI.wallet?.account]);
const makeAuthRequest = async (params: {
twa_data: string;
ton_proof?: {
@ -28,7 +47,7 @@ export const useAuth = () => {
ton_balance: string;
};
auth_v1_token: string;
}>('/auth.twa', appendReferral(params));
}>('/auth.twa', params);
if (res?.data?.auth_v1_token) {
localStorage.setItem(sessionStorageKey, res.data.auth_v1_token);
@ -42,6 +61,11 @@ export const useAuth = () => {
}
return res;
} catch (error) {
// If we were using ton_proof and it failed, clear stored proof
if (params.ton_proof) {
console.log('DEBUG: Auth with proof failed, clearing stored proof');
localStorage.removeItem(tonProofStorageKey);
}
throw error;
}
};
@ -52,14 +76,15 @@ export const useAuth = () => {
return res;
} catch (error: any) {
// Check for 404 error (wallet not found or invalid)
if (error.response?.status === 404) {
console.log('DEBUG: Wallet selection failed with 404, disconnecting');
await tonConnectUI.disconnect();
localStorage.removeItem(sessionStorageKey);
}
throw error;
if (error.response?.status === 404) {
console.log('DEBUG: Wallet selection failed with 404, disconnecting');
await tonConnectUI.disconnect();
localStorage.removeItem(sessionStorageKey);
localStorage.removeItem(tonProofStorageKey);
}
};
throw error;
}
};
// Helper to prepare the connection parameters with proof requirements
const prepareConnectParams = async () => {
@ -70,9 +95,9 @@ export const useAuth = () => {
try {
// Get the payload/token from backend
const value = await request.post<{ auth_v1_token: string }>('/auth.twa', appendReferral({
const value = await request.post<{ auth_v1_token: string }>('/auth.twa', {
twa_data: WebApp.initData,
}));
});
if (value?.data?.auth_v1_token) {
console.log('DEBUG: Got token for connect params');
@ -104,26 +129,6 @@ export const useAuth = () => {
return true;
};
// Helper для ожидания подключения с таймаутом
const waitForConnection = async (timeoutMs = 30000, checkIntervalMs = 500) => {
console.log('DEBUG: Waiting for wallet connection');
const startTime = Date.now();
while (Date.now() - startTime < timeoutMs) {
if (tonConnectUI.connected) {
console.log('DEBUG: Connection detected');
// Даем дополнительное время для инициализации connectItems
await new Promise((resolve) => setTimeout(resolve, 1000));
return true;
}
// Проверяем статус каждые checkIntervalMs
await new Promise((resolve) => setTimeout(resolve, checkIntervalMs));
}
console.log('DEBUG: Connection wait timed out');
return false;
};
return useMutation(['auth'], async () => {
clearInterval(interval.current);
let authResult;
@ -145,34 +150,13 @@ export const useAuth = () => {
// Start periodic refresh of the payload
interval.current = setInterval(prepareConnectParams, payloadTTLMS);
// Open the modal and wait for connection
try {
console.log('DEBUG: Opening wallet connect modal');
tonConnectUI.openModal();
// Open the modal - this will not resolve until connection or cancellation
await tonConnectUI.openModal();
// Ждем подключения кошелька
const connected = await waitForConnection();
if (!connected || !tonConnectUI.connected) {
console.log('DEBUG: Connection cancelled or failed after waiting');
throw new Error('Wallet connection cancelled or failed');
}
// Даем дополнительное время для полной инициализации wallet
if (!tonConnectUI.wallet || !tonConnectUI.wallet.connectItems) {
console.log('DEBUG: Wallet object not fully initialized, waiting...');
await new Promise((resolve) => setTimeout(resolve, 1500));
}
console.log('DEBUG: Connection successful, wallet details:', {
connected: tonConnectUI.connected,
hasWallet: !!tonConnectUI.wallet,
hasConnectItems: !!tonConnectUI.wallet?.connectItems,
hasTonProof: !!tonConnectUI.wallet?.connectItems?.tonProof,
});
} catch (error) {
console.error('DEBUG: Error during wallet connection:', error);
throw new Error('Wallet connection process failed');
// Check if connection was successful
if (!tonConnectUI.connected) {
console.log('DEBUG: Connection cancelled or failed');
throw new Error('Wallet connection cancelled or failed');
}
// Check if we have a proof after connection
@ -204,13 +188,93 @@ export const useAuth = () => {
});
}
} else {
// Case 2: Already connected
// Case 2: Already connected - try to use stored proof first
console.log('DEBUG: Already connected');
// TonConnect proofs are meant for initial wallet binding; reusing old proofs
// commonly fails server-side (replay/unknown payload). Use TWA auth without proof.
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
// Check if we have a valid stored proof
const storedProofData = localStorage.getItem(tonProofStorageKey);
if (storedProofData) {
try {
const proofData = JSON.parse(storedProofData);
// Check if the proof matches current wallet and is not too old
if (tonConnectUI.wallet?.account?.address === proofData.account.address) {
console.log('DEBUG: Using stored proof');
// Try auth with stored proof but ignore errors
try {
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
ton_proof: {
account: proofData.account,
ton_proof: proofData.proof,
},
});
// If successful, remove stored proof as it's been used
localStorage.removeItem(tonProofStorageKey);
} catch (error) {
console.log(
'DEBUG: Auth with stored proof failed, proceeding without it'
);
// Fall back to auth without proof
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
}
} else {
console.log('DEBUG: Stored proof address mismatch');
localStorage.removeItem(tonProofStorageKey);
// Auth without proof
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
}
} catch (error) {
console.error('DEBUG: Error parsing stored proof:', error);
localStorage.removeItem(tonProofStorageKey);
// Auth without proof
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
}
} else {
// No stored proof, check if we have a live proof
if (
tonConnectUI.wallet?.connectItems?.tonProof &&
!('error' in tonConnectUI.wallet.connectItems.tonProof)
) {
console.log('DEBUG: Using live proof from wallet');
try {
// Try auth with the live proof
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
ton_proof: {
account: tonConnectUI.wallet.account,
ton_proof: tonConnectUI.wallet.connectItems.tonProof.proof,
},
});
} catch (error) {
console.log(
'DEBUG: Auth with live proof failed, proceeding without it'
);
// Fall back to auth without proof
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
}
} else {
// Connected without proof - already authenticated
console.log('DEBUG: Connected without proof, proceeding without it');
authResult = await makeAuthRequest({
twa_data: WebApp.initData,
});
}
}
}
// Always try to select wallet after auth (this validates the connection)
@ -226,6 +290,7 @@ export const useAuth = () => {
console.log('DEBUG: Connection validation failed, disconnecting');
await tonConnectUI.disconnect();
localStorage.removeItem(sessionStorageKey);
localStorage.removeItem(tonProofStorageKey);
throw new Error('Connection validation failed');
}
} catch (error) {

View File

@ -1,7 +1,6 @@
import { useMutation } from "react-query";
import { request } from "~/shared/libs";
import { useWebApp } from "@vkruglikov/react-telegram-web-app";
import { appendReferral } from "~/shared/utils/start-payload";
const sessionStorageKey = "auth_v1_token";
@ -11,9 +10,9 @@ export const useAuthTwa = () => {
const makeAuthRequest = async () => {
const res = await request.post<{
auth_v1_token: string;
}>("/auth.twa", appendReferral({
}>("/auth.twa", {
twa_data: WebApp.initData,
}));
});
if (res?.data?.auth_v1_token) {
localStorage.setItem(sessionStorageKey, res.data.auth_v1_token);
@ -24,4 +23,4 @@ export const useAuthTwa = () => {
};
return useMutation(["auth"], makeAuthRequest);
};
};

View File

@ -3,15 +3,6 @@ import { useMutation, useQuery } from "react-query";
import { request } from "~/shared/libs";
import { Royalty } from "~/shared/stores/root";
const VIEW_CONTENT_NODE_ORIGINS = [
"https://my-public-node-103.projscale.dev",
"https://my-public-node-7.projscale.dev",
"https://my-public-node-9.projscale.dev",
"https://my-public-node-10.projscale.dev",
"http://localhost:3000",
] as const;
const VIEW_CONTENT_API_PATH = "/api/v1";
type UseCreateNewContentPayload = {
title: string;
content: string;
@ -29,44 +20,16 @@ type UseCreateNewContentPayload = {
export const useCreateNewContent = () => {
return useMutation(
["create-new-content"],
async (payload: UseCreateNewContentPayload) => {
console.info("[App2Client][Content] Отправляем контент на создание", {
title: payload.title,
hasImage: Boolean(payload.image),
contentCid: payload.content,
hashtags: payload.hashtags,
authorsCount: payload.authors.length,
royaltyCount: payload.royaltyParams.length,
downloadable: payload.downloadable,
allowResale: payload.allowResale,
(payload: UseCreateNewContentPayload) => {
return request.post<{
address: string;
amount: string;
payload: string;
}>("/blockchain.sendNewContentMessage", payload, {
headers: {
Authorization: localStorage.getItem('auth_v1_token') ?? ""
}
});
try {
const response = await request.post<{
address: string;
amount: string;
payload: string;
}>("/blockchain.sendNewContentMessage", payload, {
headers: {
Authorization: localStorage.getItem('auth_v1_token') ?? ""
}
});
console.info("[App2Client][Content] Сервер вернул данные для транзакции", {
title: payload.title,
hasAddress: Boolean(response.data.address),
amount: response.data.amount,
payloadLength: response.data.payload?.length ?? 0,
});
return response;
} catch (error) {
console.error("[App2Client][Content] Ошибка при создании контента", {
title: payload.title,
error,
});
throw error;
}
},
);
};
@ -82,42 +45,14 @@ export const useCreateNewContent = () => {
// );
// };
export const useViewContent = (contentId: string | null | undefined) => {
return useQuery(
["view", "content", contentId],
async () => {
if (!contentId) {
throw new Error("contentId is required");
export const useViewContent = (contentId: string) => {
return useQuery(["view", "content", contentId], () => {
return request.get(`/content.view/${contentId}`, {
headers: {
Authorization: localStorage.getItem('auth_v1_token') ?? ""
}
let lastError: unknown = null;
for (const origin of VIEW_CONTENT_NODE_ORIGINS) {
const baseURL = `${origin.replace(/\/$/, "")}${VIEW_CONTENT_API_PATH}`;
try {
const response = await request.get(`/content.view/${contentId}`, {
baseURL,
});
if (origin !== VIEW_CONTENT_NODE_ORIGINS[0]) {
console.info("[App2Client][ContentView] Используем резервную ноду", {
origin,
});
}
return response;
} catch (error) {
lastError = error;
console.warn("[App2Client][ContentView] Нода недоступна", {
origin,
error,
});
}
}
throw lastError ?? new Error("All content nodes are unreachable");
},
{
enabled: Boolean(contentId),
}
);
});
});
};
export const usePurchaseContent = () => {

View File

@ -1,722 +1,201 @@
import { useMutation } from "react-query";
import { useRef, useState } from "react";
import { Upload } from "tus-js-client";
import { useState } from "react";
import { request } from "~/shared/libs";
const resolveApiBaseUrl = () => {
const envBase = (import.meta.env.VITE_API_BASE_URL ?? "").trim();
if (envBase) {
return envBase.replace(/\/$/, "");
}
if (typeof window !== "undefined") {
return `${window.location.origin.replace(/\/$/, "")}/api/v1`;
}
return "/api/v1";
};
const DEFAULT_API_BASE_URL = resolveApiBaseUrl();
const resolveUploadEndpoints = () => {
try {
const apiUrl = new URL(DEFAULT_API_BASE_URL);
const origin = apiUrl.origin.replace(/\/$/, "");
return {
storage: `${origin}/api/v1.5/storage`,
tus: `${origin}/tus/files`,
};
} catch (error) {
if (typeof window !== "undefined") {
const origin = window.location.origin.replace(/\/$/, "");
return {
storage: `${origin}/api/v1.5/storage`,
tus: `${origin}/tus/files`,
};
}
console.warn("[App2Client][Upload] Cannot derive upload endpoints from VITE_API_BASE_URL", {
error,
});
return {
storage: '/api/v1.5/storage',
tus: '/tus/files',
};
}
};
const { storage: STORAGE_API_URL, tus: TUS_ENDPOINT } = resolveUploadEndpoints();
const STORAGE_API_URL = import.meta.env.VITE_API_BASE_STORAGE_URL;
const MAX_CHUNK_SIZE = 80 * 1024 * 1024; // 80 MB
const TUS_STATUS_POLL_INTERVAL_MS = 2000;
const TUS_STATUS_POLL_TIMEOUT_MS = 5 * 60 * 1000;
const sleep = (ms: number) => new Promise<void>((resolve) => {
setTimeout(resolve, ms);
});
const normalizeError = (error: unknown, fallbackMessage: string) => {
if (error instanceof Error) {
return error;
}
if (typeof error === "string") {
return new Error(error);
}
if (error && typeof error === "object" && "message" in error) {
const message = (error as { message?: unknown }).message;
if (typeof message === "string") {
return new Error(message);
}
}
return new Error(fallbackMessage);
};
const sanitizeMetadataKey = (key: string) => {
return key.replace(/[^A-Za-z0-9_.-]/g, "_");
};
const normalizeMetadata = (
metadata?: Record<string, string | number | boolean | undefined>,
) => {
if (!metadata) {
return {} as Record<string, string>;
}
return Object.entries(metadata).reduce((acc, [rawKey, rawValue]) => {
if (rawValue === undefined || rawValue === null) {
return acc;
}
const key = sanitizeMetadataKey(rawKey);
if (!key) {
return acc;
}
acc[key] = String(rawValue);
return acc;
}, {} as Record<string, string>);
};
const extractUploadId = (uploadUrl: string) => {
try {
const url = new URL(uploadUrl);
const parts = url.pathname.split("/").filter(Boolean);
const uploadId = parts[parts.length - 1];
if (!uploadId) {
throw new Error("Empty upload id");
}
return uploadId;
} catch (error) {
const normalized = uploadUrl.split("/").filter(Boolean);
const uploadId = normalized[normalized.length - 1];
if (!uploadId) {
throw new Error("Unable to extract upload id from tus Location");
}
return uploadId;
}
};
type UploadSessionState = "uploading" | "processing" | "pinned" | "failed";
type UploadStatusResponse = {
id: string;
state: UploadSessionState;
encrypted_cid?: string | null;
size_bytes?: number | null;
error?: string | null;
};
const pollUploadStatus = async (
uploadId: string,
signal?: AbortSignal,
): Promise<UploadStatusResponse> => {
const startedAt = Date.now();
let attempt = 0;
console.info("[App2Client][TusUpload] Запускаем polling статуса", {
uploadId,
intervalMs: TUS_STATUS_POLL_INTERVAL_MS,
timeoutMs: TUS_STATUS_POLL_TIMEOUT_MS,
});
while (true) {
attempt += 1;
if (signal?.aborted) {
throw new DOMException("Tus status polling aborted", "AbortError");
}
try {
const { data } = await request.get<UploadStatusResponse>(
`/upload.status/${uploadId}`,
{
headers: { "Cache-Control": "no-store" },
},
);
console.info("[App2Client][TusUpload] Получен статус tus", {
uploadId,
attempt,
state: data.state,
hasEncryptedCid: Boolean(data.encrypted_cid),
});
if (data.state === "failed") {
throw new Error(data.error || "Tus upload failed on server");
}
if (data.state === "pinned" && data.encrypted_cid) {
console.info("[App2Client][TusUpload] Статус tus завершен", {
uploadId,
state: data.state,
encryptedCid: data.encrypted_cid,
sizeBytes: data.size_bytes,
attempts: attempt,
durationMs: Date.now() - startedAt,
});
return data;
}
} catch (error) {
const maybeAxios = error as { response?: { status?: number } };
if (maybeAxios?.response?.status === 404) {
// Hook has not recorded the upload session yet; continue polling.
console.info("[App2Client][TusUpload] Статус tus еще не готов (404)", {
uploadId,
attempt,
});
} else if (error instanceof DOMException && error.name === "AbortError") {
console.warn("[App2Client][TusUpload] Поллинг tus прерван", {
uploadId,
attempt,
});
throw error;
} else {
console.error("[App2Client][TusUpload] Ошибка во время polling", {
uploadId,
attempt,
error,
});
throw normalizeError(error, "Tus status polling failed");
}
}
if (Date.now() - startedAt > TUS_STATUS_POLL_TIMEOUT_MS) {
console.error("[App2Client][TusUpload] Поллинг tus превысил таймаут", {
uploadId,
attempts: attempt,
durationMs: Date.now() - startedAt,
});
throw new Error("Timed out waiting for tus upload finalization");
}
await sleep(TUS_STATUS_POLL_INTERVAL_MS);
}
};
type TusUploadArgs = {
file: File;
metadata?: Record<string, string | number | boolean | undefined>;
signal?: AbortSignal;
};
type TusUploadResult = {
kind: "tus";
uploadId: string;
encryptedCid: string;
sizeBytes?: number;
state: UploadSessionState;
};
export const useTusUpload = () => {
export const useUploadFile = () => {
const [uploadProgress, setUploadProgress] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const [uploadError, setUploadError] = useState<Error | null>(null);
const activeUploadRef = useRef<Upload | null>(null);
const lastLoggedProgressRef = useRef(-10);
const mutation = useMutation<TusUploadResult, Error, TusUploadArgs>(
["upload-file", "tus"],
async ({ file, metadata, signal }) => {
if (!file) {
throw new Error("File is required for tus upload");
}
setIsUploading(true);
setUploadProgress(0);
setUploadError(null);
let lastError: Error | null = null;
try {
if (!TUS_ENDPOINT) {
throw new Error("Tus endpoint is not configured");
}
const result = await new Promise<TusUploadResult>((resolve, reject) => {
const token = localStorage.getItem("auth_v1_token") ?? "";
const normalizedMeta = normalizeMetadata(metadata);
const headers: Record<string, string> = { "Cache-Control": "no-store" };
if (token) {
headers.Authorization = token;
}
console.info("[App2Client][TusUpload] Начинаем загрузку", {
fileName: file.name,
fileSize: file.size,
fileType: file.type,
metadata: normalizedMeta,
});
const upload = new Upload(file, {
endpoint: TUS_ENDPOINT,
metadata: {
filename: file.name,
content_type: file.type || "application/octet-stream",
...normalizedMeta,
},
headers,
retryDelays: [0, 1000, 3000, 5000],
removeFingerprintOnSuccess: true,
uploadDataDuringCreation: true,
onError: (err) => {
const normalized = normalizeError(err, "Tus upload failed");
lastError = normalized;
setUploadError(normalized);
setIsUploading(false);
setUploadProgress(0);
activeUploadRef.current = null;
reject(normalized);
},
onProgress: (bytesUploaded, bytesTotal) => {
const percent = bytesTotal
? Math.floor((bytesUploaded / bytesTotal) * 100)
: 0;
setUploadProgress(Math.min(99, Math.max(0, percent)));
if (percent >= lastLoggedProgressRef.current + 5 || percent === 100) {
lastLoggedProgressRef.current = percent;
console.info("[App2Client][TusUpload] Прогресс загрузки", {
fileName: file.name,
bytesUploaded,
bytesTotal,
percent,
});
}
},
onSuccess: () => {
(async () => {
try {
setUploadProgress(99);
const uploadUrl = upload.url;
if (!uploadUrl) {
throw new Error("Tus upload finished without Location header");
}
const uploadId = extractUploadId(uploadUrl);
console.info("[App2Client][TusUpload] Загрузка завершена на tus, начинаем финализацию", {
fileName: file.name,
uploadId,
});
const status = await pollUploadStatus(uploadId, signal);
const encryptedCid = status.encrypted_cid;
if (!encryptedCid) {
throw new Error("Tus upload finalized without encrypted CID");
}
setUploadProgress(100);
setIsUploading(false);
activeUploadRef.current = null;
console.info("[App2Client][TusUpload] Финализация tus завершена", {
fileName: file.name,
uploadId,
encryptedCid,
finalState: status.state,
sizeBytes: status.size_bytes,
});
resolve({
kind: "tus",
uploadId,
encryptedCid,
sizeBytes: status.size_bytes ?? undefined,
state: status.state,
});
} catch (statusError) {
const normalized = normalizeError(
statusError,
"Failed to finalize tus upload",
);
lastError = normalized;
console.error("[App2Client][TusUpload] Ошибка финализации tus", {
fileName: file.name,
error: normalized,
});
setUploadError(normalized);
setIsUploading(false);
activeUploadRef.current = null;
reject(normalized);
}
})();
},
});
activeUploadRef.current = upload;
lastLoggedProgressRef.current = 0;
console.info("[App2Client][TusUpload] Запрашиваем предыдущие загрузки для возобновления", {
fileName: file.name,
});
if (signal) {
signal.addEventListener(
"abort",
() => {
upload.abort();
const abortError = new DOMException(
"Tus upload aborted",
"AbortError",
);
console.warn("[App2Client][TusUpload] Загрузка прервана внешним сигналом", {
fileName: file.name,
});
lastError = abortError;
setUploadError(abortError);
setIsUploading(false);
activeUploadRef.current = null;
reject(abortError);
},
{ once: true },
);
}
upload
.findPreviousUploads()
.then((previousUploads) => {
console.info("[App2Client][TusUpload] Результат поиска предыдущих загрузок", {
fileName: file.name,
count: previousUploads.length,
});
if (previousUploads.length > 0) {
upload.resumeFromPreviousUpload(previousUploads[0]);
console.info("[App2Client][TusUpload] Возобновляем загрузку", {
fileName: file.name,
});
}
upload.start();
console.info("[App2Client][TusUpload] Стартуем загрузку", {
fileName: file.name,
chunkSize: upload.options.chunkSize,
});
})
.catch((resumeError) => {
const normalized = normalizeError(
resumeError,
"Failed to resume tus upload",
);
lastError = normalized;
console.error("[App2Client][TusUpload] Не удалось возобновить загрузку", {
fileName: file.name,
error: normalized,
});
setUploadError(normalized);
setIsUploading(false);
activeUploadRef.current = null;
reject(normalized);
});
});
return result;
} catch (error) {
const normalized = normalizeError(error, "Tus upload failed");
if (!lastError) {
lastError = normalized;
console.error("[App2Client][TusUpload] Ошибка во время загрузки", {
fileName: file.name,
error: normalized,
});
setUploadError(normalized);
}
setIsUploading(false);
throw normalized;
} finally {
activeUploadRef.current = null;
setIsUploading(false);
console.info("[App2Client][TusUpload] Завершили работу загрузчика", {
fileName: file?.name,
hasError: Boolean(lastError),
});
}
},
);
const resetUploadError = () => setUploadError(null);
const abortUpload = () => {
if (activeUploadRef.current) {
activeUploadRef.current.abort();
activeUploadRef.current = null;
setIsUploading(false);
setUploadProgress(0);
console.warn("[App2Client][TusUpload] Принудительно остановили загрузку", {
reason: "manual",
});
}
};
return {
...mutation,
uploadProgress,
isUploading,
uploadError,
resetUploadError,
abortUpload,
};
};
export const useLegacyUploadFile = () => {
const [uploadProgress, setUploadProgress] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const [uploadError, setUploadError] = useState<Error | null>(null);
const lastLoggedProgressRef = useRef(-10);
const mutation = useMutation(["upload-file", "legacy"], async (file: File) => {
const mutation = useMutation(["upload-file"], async (file: File) => {
console.log(`Начинаем загрузку файла: ${file.name} (${file.size} байт)`);
setIsUploading(true);
setUploadProgress(0);
setUploadError(null);
lastLoggedProgressRef.current = 0;
let lastError: Error | null = null;
console.info("[App2Client][LegacyUpload] Начинаем загрузку", {
fileName: file.name,
fileSize: file.size,
fileType: file.type,
isChunked: file.size > MAX_CHUNK_SIZE,
});
setUploadError(null); // Сбрасываем ошибку перед началом новой загрузки
try {
// Для маленьких файлов используем обычную загрузку, но с теми же заголовками
if (file.size <= MAX_CHUNK_SIZE) {
console.log("Используем обычную загрузку (файл <= MAX_CHUNK_SIZE)");
// Подготавливаем заголовки - такие же, как для чанковой загрузки
const headers: Record<string, string> = {
"X-File-Name": btoa(unescape(encodeURIComponent(file.name))),
"X-Chunk-Start": "0",
"X-File-Name": btoa(unescape(encodeURIComponent(file.name))), // Имя файла в base64
"X-Chunk-Start": "0", // Начинаем с позиции 0
"Content-Type": file.type || "application/octet-stream",
"X-Last-Chunk": "1",
"X-Last-Chunk": "1" // Это единственный и последний чанк
};
const authToken = localStorage.getItem("auth_v1_token");
// Добавляем заголовок авторизации
const authToken = localStorage.getItem('auth_v1_token');
if (authToken) {
headers.Authorization = authToken;
headers["Authorization"] = authToken;
}
const response = await request.post<{
upload_id?: string;
content_sha256?: string;
content_id?: string;
content_id_v1?: string;
content_url?: string;
}>("", file, {
baseURL: STORAGE_API_URL,
headers,
onUploadProgress: (progressEvent) => {
const total = progressEvent?.total ?? file.size;
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / total,
);
setUploadProgress(Math.min(99, percentCompleted));
if (
percentCompleted >= lastLoggedProgressRef.current + 5 ||
percentCompleted === 100
) {
lastLoggedProgressRef.current = percentCompleted;
console.info("[App2Client][LegacyUpload] Прогресс загрузки", {
fileName: file.name,
percent: percentCompleted,
loaded: progressEvent.loaded,
total,
});
}
},
});
setUploadProgress(100);
console.info("[App2Client][LegacyUpload] Загрузка завершена", {
fileName: file.name,
response: {
hasContentId: Boolean(
response.data.content_id_v1 || response.data.content_id,
),
hasSha256: Boolean(response.data.content_sha256),
uploadId: response.data.upload_id,
},
});
return {
content_sha256: response.data.content_sha256 || "",
content_id_v1:
response.data.content_id_v1 || response.data.content_id || "",
content_url: response.data.content_url || "",
};
}
let offset = 0;
let uploadId: string | null = null;
while (offset < file.size) {
const chunkEnd = Math.min(offset + MAX_CHUNK_SIZE, file.size);
const chunk = file.slice(offset, chunkEnd);
const isLastChunk = chunkEnd === file.size;
const headers: Record<string, string> = {
"X-File-Name": btoa(unescape(encodeURIComponent(file.name))),
"X-Chunk-Start": offset.toString(),
"Content-Type": file.type || "application/octet-stream",
};
if (isLastChunk) {
headers["X-Last-Chunk"] = "1";
}
const authToken = localStorage.getItem("auth_v1_token");
if (authToken) {
headers.Authorization = authToken;
}
if (uploadId) {
headers["X-Upload-ID"] = uploadId;
}
console.info("[App2Client][LegacyUpload] Отправляем chunk", {
fileName: file.name,
chunkStart: offset,
chunkEnd,
chunkSize: chunk.size,
isLastChunk,
uploadId,
});
const response = await request.post<{
upload_id?: string;
current_size?: number;
content_id?: string;
content_sha256?: string;
content_id_v1?: string;
content_url?: string;
}>("", chunk, {
baseURL: STORAGE_API_URL,
headers,
onUploadProgress: (progressEvent) => {
const overallProgress = offset + progressEvent.loaded;
const percentCompleted = Math.round(
(overallProgress / file.size) * 100,
);
setUploadProgress(Math.min(99, percentCompleted));
if (
percentCompleted >= lastLoggedProgressRef.current + 5 ||
percentCompleted === 100
) {
lastLoggedProgressRef.current = percentCompleted;
console.info("[App2Client][LegacyUpload] Прогресс загрузки", {
fileName: file.name,
percent: percentCompleted,
loaded: overallProgress,
total: file.size,
});
}
},
});
if (!uploadId && response.data.upload_id) {
uploadId = response.data.upload_id;
console.info("[App2Client][LegacyUpload] Получили upload_id", {
fileName: file.name,
uploadId,
console.log("Заголовки запроса:", headers);
try {
const response = await request.post<{
upload_id?: string;
content_sha256?: string;
content_id?: string;
content_id_v1?: string;
content_url?: string;
}>("", file, { // Отправляем файл напрямую вместо FormData
baseURL: STORAGE_API_URL,
headers,
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / (progressEvent?.total as number || file.size)
);
setUploadProgress(Math.min(99, percentCompleted));
},
});
}
if (response.data.content_id) {
console.log("Ответ на обычную загрузку:", response.data);
setUploadProgress(100);
console.info("[App2Client][LegacyUpload] Сервер вернул итоговые данные", {
fileName: file.name,
uploadId,
hasContentId: Boolean(
response.data.content_id_v1 || response.data.content_id,
),
hasSha256: Boolean(response.data.content_sha256),
});
return {
content_sha256: response.data.content_sha256 || "",
content_id_v1:
response.data.content_id_v1 || response.data.content_id || "",
content_url: response.data.content_url || "",
content_id_v1: response.data.content_id_v1 || response.data.content_id || "",
content_url: response.data.content_url || ""
};
}
if (response.data.current_size !== undefined) {
offset = response.data.current_size;
console.info("[App2Client][LegacyUpload] Продолжаем загрузку", {
fileName: file.name,
nextOffset: offset,
});
} else {
const error = new Error("Missing current_size in response");
setUploadError(error);
lastError = error;
console.error("[App2Client][LegacyUpload] Сервер не вернул current_size", {
fileName: file.name,
response,
});
} catch (error) {
console.error("Ошибка при обычной загрузке:", error);
setUploadError(error instanceof Error ? error : new Error('Ошибка при загрузке файла'));
throw error;
}
}
const error = new Error(
"All chunks uploaded but server did not return content_id",
);
// Для больших файлов используем чанковую загрузку
console.log("Используем чанкированную загрузку (файл > MAX_CHUNK_SIZE)");
let offset = 0;
let uploadId: string | null = null;
let chunkNumber = 0;
// Загружаем файл по чанкам
while (offset < file.size) {
chunkNumber++;
const chunkEnd = Math.min(offset + MAX_CHUNK_SIZE, file.size);
const chunk = file.slice(offset, chunkEnd);
console.log(`Загрузка чанка #${chunkNumber} начиная с байта ${offset}`);
// Определяем, является ли текущий чанк последним
const isLastChunk = chunkEnd === file.size;
// Подготавливаем заголовки
const headers: Record<string, string> = {
"X-File-Name": btoa(unescape(encodeURIComponent(file.name))), // Имя файла в base64
"X-Chunk-Start": offset.toString(),
"Content-Type": file.type || "application/octet-stream"
};
// Добавляем маркер последнего чанка, если это последний чанк
if (isLastChunk) {
headers["X-Last-Chunk"] = "1";
}
// Добавляем заголовок авторизации
const authToken = localStorage.getItem('auth_v1_token');
if (authToken) {
headers["Authorization"] = authToken;
}
// Если есть uploadId, добавляем его в заголовки
if (uploadId) {
headers["X-Upload-ID"] = uploadId;
}
console.log("Заголовки запроса:", headers);
try {
const response = await request.post<{
upload_id?: string;
current_size?: number;
content_id?: string;
content_sha256?: string;
content_id_v1?: string;
content_url?: string;
}>("", chunk, {
baseURL: STORAGE_API_URL,
headers,
onUploadProgress: (progressEvent) => {
// Прогресс загрузки текущего чанка
const overallProgress = offset + progressEvent.loaded;
const percentCompleted = Math.round((overallProgress / file.size) * 100);
setUploadProgress(Math.min(99, percentCompleted));
},
});
console.log(`Ответ на чанк #${chunkNumber}:`, response.data);
// Сохраняем uploadId из первого ответа, если не установлен
if (!uploadId && response.data.upload_id) {
uploadId = response.data.upload_id;
console.log("Получен upload_id:", uploadId);
}
// Проверка на наличие content_id
if (response.data.content_id) {
console.log("Загрузка завершена. ID файла:", response.data.content_id);
setUploadProgress(100);
return {
content_sha256: response.data.content_sha256 || "",
content_id_v1: response.data.content_id_v1 || response.data.content_id || "",
content_url: response.data.content_url || ""
};
}
// Обновляем смещение на основе ответа сервера
if (response.data.current_size !== undefined) {
offset = response.data.current_size;
console.log(`Сервер сообщает current_size: ${offset}`);
} else {
console.warn("Неожиданный ответ от сервера, отсутствует current_size");
const error = new Error("Missing current_size in response");
setUploadError(error);
throw error;
}
} catch (error: any) {
console.error(`Ошибка при загрузке чанка #${chunkNumber}:`, error);
if (error.response) {
console.error("Ответ сервера:", error.response.status, error.response.data);
}
setUploadError(error instanceof Error ? error : new Error(`Ошибка при загрузке чанка #${chunkNumber}`));
throw error;
}
}
const error = new Error("Ошибка загрузки файла: все чанки загружены, но content_id не получен");
console.error(error.message);
setUploadError(error);
lastError = error;
console.error("[App2Client][LegacyUpload] Все чанки отправлены, но content_id отсутствует", {
fileName: file.name,
});
throw error;
} catch (error) {
const normalized = normalizeError(
error,
"Unknown error during legacy upload",
);
setUploadError(normalized);
} catch (error: any) {
console.error("Ошибка при загрузке:", error);
if (error.response) {
console.error("Ответ сервера:", error.response.status, error.response.data);
}
setUploadError(error instanceof Error ? error : new Error("Неизвестная ошибка при загрузке"));
setIsUploading(false);
lastError = normalized;
console.error("[App2Client][LegacyUpload] Ошибка во время загрузки", {
fileName: file.name,
error: normalized,
});
throw normalized;
throw error;
} finally {
setIsUploading(false);
console.info("[App2Client][LegacyUpload] Завершили работу загрузчика", {
fileName: file.name,
hasError: Boolean(lastError),
});
}
});
// Сбросить ошибку
const resetUploadError = () => setUploadError(null);
return {
...mutation,
uploadProgress,
isUploading,
return {
...mutation,
uploadProgress,
isUploading,
uploadError,
resetUploadError,
resetUploadError
};
};
export { useTusUpload as useUploadFile };
export type { TusUploadArgs, TusUploadResult, UploadSessionState };
};

View File

@ -1,85 +0,0 @@
export const START_PARAM_SEPARATOR = '!';
const REF_STORAGE_KEY = 'ref_id';
type StartPayload = {
contentId: string | null;
referralId: string | null;
};
const safeSessionStorage = (): Storage | null => {
if (typeof window === 'undefined') {
return null;
}
try {
return window.sessionStorage;
} catch (error) {
return null;
}
};
export const resolveStartPayload = (): StartPayload => {
if (typeof window === 'undefined') {
return { contentId: null, referralId: null };
}
const searchParams = new URLSearchParams(window.location.search);
const telegramApp = (window as any)?.Telegram?.WebApp;
const rawStartParam = telegramApp?.initDataUnsafe?.start_param ?? null;
let contentId: string | null = null;
let referralId: string | null = null;
const parsePayload = (payload: string | null) => {
if (!payload) {
return;
}
const [contentPart, refPart] = payload.split(START_PARAM_SEPARATOR, 2);
if (contentPart) {
contentId = contentPart;
}
if (refPart) {
referralId = refPart;
}
};
parsePayload(rawStartParam);
if (!contentId) {
const queryContent =
searchParams.get('content') ||
searchParams.get('cid') ||
searchParams.get('start_param');
if (queryContent) {
contentId = queryContent;
}
}
if (!referralId) {
const queryRef = searchParams.get('ref') || searchParams.get('ref_id');
if (queryRef) {
referralId = queryRef;
}
}
const storage = safeSessionStorage();
if (storage) {
if (referralId) {
storage.setItem(REF_STORAGE_KEY, referralId);
} else {
const stored = storage.getItem(REF_STORAGE_KEY);
if (stored) {
referralId = stored;
}
}
}
return { contentId, referralId };
};
export const appendReferral = <T extends Record<string, unknown>>(payload: T): T => {
const { referralId } = resolveStartPayload();
if (referralId && !payload.ref_id) {
return { ...payload, ref_id: referralId } as T;
}
return payload;
};

264
yarn.lock
View File

@ -225,10 +225,10 @@
"@babel/helper-validator-identifier" "^7.22.20"
to-fast-properties "^2.0.0"
"@esbuild/linux-x64@0.19.12":
"@esbuild/win32-x64@0.19.12":
version "0.19.12"
resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz"
integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz"
integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
version "4.4.0"
@ -381,15 +381,10 @@
resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz"
integrity sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==
"@rollup/rollup-linux-x64-gnu@4.12.0":
"@rollup/rollup-win32-x64-msvc@4.12.0":
version "4.12.0"
resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz"
integrity sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==
"@rollup/rollup-linux-x64-musl@4.12.0":
version "4.12.0"
resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz"
integrity sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==
resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz"
integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==
"@sentry-internal/browser-utils@9.1.0":
version "9.1.0"
@ -446,6 +441,96 @@
"@sentry/core" "9.1.0"
hoist-non-react-statics "^3.3.2"
"@telegram-apps/bridge@^1.9.2":
version "1.9.2"
resolved "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-1.9.2.tgz"
integrity sha512-SJLcNWLXhbbZr9MiqFH/g2ceuitSJKMxUIZysK4zUNyTUNuonrQG80Q/yrO+XiNbKUj8WdDNM86NBARhuyyinQ==
dependencies:
"@telegram-apps/signals" "^1.1.1"
"@telegram-apps/toolkit" "^1.1.1"
"@telegram-apps/transformers" "^1.2.2"
"@telegram-apps/types" "^1.2.1"
"@telegram-apps/bridge@^2.4.0":
version "2.4.0"
resolved "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-2.4.0.tgz"
integrity sha512-Lp/vhspF7okK8zXvSWWirunKXOPE6Gr11o9VBne4VmKG/yHRhEW7Pf07ncPtXLLzI6wW8+VYc3khsHPABJymEw==
dependencies:
"@telegram-apps/signals" "^1.1.1"
"@telegram-apps/toolkit" "^2.0.0"
"@telegram-apps/transformers" "^2.2.0"
"@telegram-apps/types" "^2.0.0"
better-promises "^0.4.0"
error-kid "^0.0.4"
mitt "^3.0.1"
valibot "1.0.0-beta.14"
"@telegram-apps/navigation@^1.0.13":
version "1.0.13"
resolved "https://registry.npmjs.org/@telegram-apps/navigation/-/navigation-1.0.13.tgz"
integrity sha512-TsUueB5LQp77GQHoMa93nq26Uw7GJjrFCPbyseMVU7aBBxAc+8CV2IYytRwcVp5sv/q7ThK5X4JaKn2V1yBHDQ==
dependencies:
"@telegram-apps/bridge" "^1.9.2"
"@telegram-apps/signals" "^1.1.1"
"@telegram-apps/toolkit" "^1.1.1"
"@telegram-apps/sdk@^3.5.1":
version "3.5.1"
resolved "https://registry.npmjs.org/@telegram-apps/sdk/-/sdk-3.5.1.tgz"
integrity sha512-m/ynpSozXsqq6Kfb6M9fm8SD6x/+jqvTFT59FuuOBvC+G8eMd0F+fvZdr6Pj0I6IL9M67nrfm92JpTu/aVNEjw==
dependencies:
"@telegram-apps/bridge" "^2.4.0"
"@telegram-apps/navigation" "^1.0.13"
"@telegram-apps/signals" "^1.1.1"
"@telegram-apps/toolkit" "^2.0.0"
"@telegram-apps/transformers" "^2.2.0"
"@telegram-apps/types" "^2.0.0"
better-promises "^0.4.0"
error-kid "^0.0.4"
valibot "1.0.0-beta.14"
"@telegram-apps/signals@^1.1.1":
version "1.1.1"
resolved "https://registry.npmjs.org/@telegram-apps/signals/-/signals-1.1.1.tgz"
integrity sha512-vz37r8lemGpPzDiBRfqpXYBynzmy3SFnY6zfHsTZABTYYt0b0WQZyU5mFDqqqugGhka78Gy11xmr9csgy4YgGA==
"@telegram-apps/toolkit@^1.1.1":
version "1.1.1"
resolved "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-1.1.1.tgz"
integrity sha512-+vhKx6ngfvjyTE6Xagl3z1TPVbfx5s7xAkcYzCdHYUo6T60jLIqLgyZMcI1UPoIAMuMu1pHoO+p8QNCj/+tFmw==
"@telegram-apps/toolkit@^2.0.0":
version "2.0.0"
resolved "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-2.0.0.tgz"
integrity sha512-1GKTLBNme1Phu/gFvgS9NWPq+LhPfzSIfnwhcF9I/6tCdufrLRcVaSMRiK9R4VDYD6iZUyj+a2l250qWAxxjQQ==
"@telegram-apps/transformers@^1.2.2":
version "1.2.2"
resolved "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-1.2.2.tgz"
integrity sha512-vvMwXckd1D7Ozc0h66PSUwF5QLrRV9HlGJFFeBuUex8QEk5mSPtsJkLiqB8aBbwuFDa91+TUSM/CxqPZO/e9YQ==
dependencies:
"@telegram-apps/toolkit" "^1.1.1"
"@telegram-apps/types" "^1.2.1"
"@telegram-apps/transformers@^2.2.0":
version "2.2.0"
resolved "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-2.2.0.tgz"
integrity sha512-wqXXOukhEjZKhzdq5vG1LkxWL11DApbmUKzk+3nA/ki3TLyD3awVTOXbpoNdOwFl2xliIooYcsUOEl4WCyyLGw==
dependencies:
"@telegram-apps/toolkit" "^2.0.0"
"@telegram-apps/types" "^2.0.0"
valibot "1.0.0-beta.14"
"@telegram-apps/types@^1.2.1":
version "1.2.1"
resolved "https://registry.npmjs.org/@telegram-apps/types/-/types-1.2.1.tgz"
integrity sha512-so4HLh7clur0YyMthi9KVIgWoGpZdXlFOuQjk3+Q5NAvJZ11nAheBSwPlGw/Ko92+zwvrSBE/lQyN2+p17RP+w==
"@telegram-apps/types@^2.0.0":
version "2.0.0"
resolved "https://registry.npmjs.org/@telegram-apps/types/-/types-2.0.0.tgz"
integrity sha512-yF499FJK82a2IDNDAQdrmVH3sgFZl/QFNdVZKgWpgtunIVJ1fres5wi9+4aUBRVIdQwZOZZqB/AOvYYuYXsq3Q==
"@ton/core@^0.59.1":
version "0.59.1"
resolved "https://registry.npmjs.org/@ton/core/-/core-0.59.1.tgz"
@ -925,6 +1010,13 @@ base64-js@^1.3.1:
resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
better-promises@^0.4.0:
version "0.4.0"
resolved "https://registry.npmjs.org/better-promises/-/better-promises-0.4.0.tgz"
integrity sha512-AcKkTUSd4o1vMf41eBbHW1NkY7vrXeNI6etitGdQE54WFXsF2wkfonrKA06Za7lViRNyT/cMvj5z+DScqhYW8A==
dependencies:
error-kid "^0.0.4"
big-integer@^1.6.16:
version "1.6.52"
resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz"
@ -981,11 +1073,6 @@ browserslist@^4.22.2, browserslist@^4.23.0, "browserslist@>= 4.21.0":
node-releases "^2.0.14"
update-browserslist-db "^1.0.13"
buffer-from@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
buffer@^6.0.3:
version "6.0.3"
resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
@ -1091,14 +1178,6 @@ color-name@1.1.3:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
combine-errors@^3.0.3:
version "3.0.3"
resolved "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz"
integrity sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==
dependencies:
custom-error-instance "2.1.1"
lodash.uniqby "4.5.0"
combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@ -1140,11 +1219,6 @@ csstype@^3.0.2, csstype@^3.1.1:
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
custom-error-instance@2.1.1:
version "2.1.1"
resolved "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz"
integrity sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==
debug@^3.2.7:
version "3.2.7"
resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@ -1257,6 +1331,11 @@ emoji-regex@^9.2.2:
resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
error-kid@^0.0.4:
version "0.0.4"
resolved "https://registry.npmjs.org/error-kid/-/error-kid-0.0.4.tgz"
integrity sha512-x+yQhY56SorLMnX6kOf+z3JCv2QBurcWEDcIjgxYtVr4fGeCfAtOdZOCyWttkHHDFPtL2PqnaRUmphbmALJd9w==
es-abstract@^1.22.1, es-abstract@^1.22.3:
version "1.22.5"
resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz"
@ -1792,11 +1871,6 @@ gopd@^1.0.1:
dependencies:
get-intrinsic "^1.1.3"
graceful-fs@^4.2.4:
version "4.2.11"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
graphemer@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
@ -2003,11 +2077,6 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
dependencies:
call-bind "^1.0.7"
is-stream@^2.0.0:
version "2.0.1"
resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
is-string@^1.0.5, is-string@^1.0.7:
version "1.0.7"
resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
@ -2060,11 +2129,6 @@ jiti@^1.19.1:
resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
js-base64@^3.7.2:
version "3.7.8"
resolved "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz"
integrity sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==
js-sha3@0.8.0:
version "0.8.0"
resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz"
@ -2166,61 +2230,11 @@ lodash-es@^4.17.21:
resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash._baseiteratee@~4.7.0:
version "4.7.0"
resolved "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz"
integrity sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==
dependencies:
lodash._stringtopath "~4.8.0"
lodash._basetostring@~4.12.0:
version "4.12.0"
resolved "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz"
integrity sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==
lodash._baseuniq@~4.6.0:
version "4.6.0"
resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz"
integrity sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==
dependencies:
lodash._createset "~4.0.0"
lodash._root "~3.0.0"
lodash._createset@~4.0.0:
version "4.0.3"
resolved "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz"
integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==
lodash._root@~3.0.0:
version "3.0.1"
resolved "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz"
integrity sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==
lodash._stringtopath@~4.8.0:
version "4.8.0"
resolved "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz"
integrity sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==
dependencies:
lodash._basetostring "~4.12.0"
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash.uniqby@4.5.0:
version "4.5.0"
resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz"
integrity sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==
dependencies:
lodash._baseiteratee "~4.7.0"
lodash._baseuniq "~4.6.0"
loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@ -2328,6 +2342,11 @@ minimist@^1.2.0, minimist@^1.2.6:
resolved "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz"
integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
mitt@^3.0.1:
version "3.0.1"
resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
ms@^2.1.1, ms@2.1.2:
version "2.1.2"
resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@ -2627,15 +2646,6 @@ prop-types@^15.7.2:
object-assign "^4.1.1"
react-is "^16.13.1"
proper-lockfile@^4.1.2:
version "4.1.2"
resolved "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz"
integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
dependencies:
graceful-fs "^4.2.4"
retry "^0.12.0"
signal-exit "^3.0.2"
proxy-from-env@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
@ -2646,11 +2656,6 @@ punycode@^2.1.0:
resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
querystringify@^2.1.1:
version "2.2.0"
resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
queue-microtask@^1.2.2:
version "1.2.3"
resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@ -2794,11 +2799,6 @@ remove-accents@0.5.0:
resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz"
integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
requires-port@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
resolve-from@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@ -2813,11 +2813,6 @@ resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
path-parse "^1.0.7"
supports-preserve-symlinks-flag "^1.0.0"
retry@^0.12.0:
version "0.12.0"
resolved "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz"
integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
reusify@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@ -2941,11 +2936,6 @@ side-channel@^1.0.4:
get-intrinsic "^1.2.4"
object-inspect "^1.13.1"
signal-exit@^3.0.2:
version "3.0.7"
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
signal-exit@^4.0.1:
version "4.1.0"
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
@ -3192,19 +3182,6 @@ tslib@^2.6.2:
resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
tus-js-client@^4.3.1:
version "4.3.1"
resolved "https://registry.npmjs.org/tus-js-client/-/tus-js-client-4.3.1.tgz"
integrity sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==
dependencies:
buffer-from "^1.1.2"
combine-errors "^3.0.3"
is-stream "^2.0.0"
js-base64 "^3.7.2"
lodash.throttle "^4.1.1"
proper-lockfile "^4.1.2"
url-parse "^1.5.7"
tweetnacl-util@^0.15.1:
version "0.15.1"
resolved "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz"
@ -3271,7 +3248,7 @@ typed-array-length@^1.0.5:
is-typed-array "^1.1.13"
possible-typed-array-names "^1.0.0"
typescript@^5.0.0, typescript@^5.2.2, typescript@>=4.2.0:
typescript@^5.0.0, typescript@^5.2.2, typescript@>=4.2.0, typescript@>=5:
version "5.3.3"
resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz"
integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
@ -3319,14 +3296,6 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
url-parse@^1.5.7:
version "1.5.10"
resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz"
integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
dependencies:
querystringify "^2.1.1"
requires-port "^1.0.0"
use-sync-external-store@1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
@ -3337,6 +3306,11 @@ util-deprecate@^1.0.2:
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
valibot@1.0.0-beta.14:
version "1.0.0-beta.14"
resolved "https://registry.npmjs.org/valibot/-/valibot-1.0.0-beta.14.tgz"
integrity sha512-tLyV2rE5QL6U29MFy3xt4AqMrn+/HErcp2ZThASnQvPMwfSozjV1uBGKIGiegtZIGjinJqn0SlBdannf18wENA==
vite-tsconfig-paths@^4.3.1:
version "4.3.1"
resolved "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.1.tgz"