SSR Fixes

Добавили динамический импорт Telegram Web App SDK с помощью import(), чтобы он загружался только на клиенте
Добавили состояние загрузки и компонент Spinner для лучшего UX
Исправили типы в компонентах:
Используем IShopItem вместо собственного интерфейса ShopItem
Создали тип SafeUser, который исключает свойства mongoose Document из типа пользователя
Добавили безопасную проверку на наличие пользователя в данных Telegram WebApp

.next/app-build-manifest.json

@@ -9,11 +9,6 @@
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
       "static/chunks/app/page.js"
-    ],
-    "/not-found": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/not-found.js"
     ]
   }
 }

.next/server/app-paths-manifest.json

@@ -1,4 +1,3 @@
 {
-  "/not-found": "app/not-found.js",
   "/page": "app/page.js"
 }

.next/server/vendor-chunks/next.js

@@ -1528,28 +1528,6 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));
 
 /***/ }),
 
-/***/ "(rsc)/./node_modules/next/dist/client/components/not-found.js":
-/*!***************************************************************!*\
-  !*** ./node_modules/next/dist/client/components/not-found.js ***!
-  \***************************************************************/
-/***/ ((module, exports) => {
-
-"use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));\n0 && (0);\nfunction _export(target, all) {\n    for(var name in all)Object.defineProperty(target, name, {\n        enumerable: true,\n        get: all[name]\n    });\n}\n_export(exports, {\n    notFound: function() {\n        return notFound;\n    },\n    isNotFoundError: function() {\n        return isNotFoundError;\n    }\n});\nconst NOT_FOUND_ERROR_CODE = \"NEXT_NOT_FOUND\";\nfunction notFound() {\n    // eslint-disable-next-line no-throw-literal\n    const error = new Error(NOT_FOUND_ERROR_CODE);\n    error.digest = NOT_FOUND_ERROR_CODE;\n    throw error;\n}\nfunction isNotFoundError(error) {\n    return (error == null ? void 0 : error.digest) === NOT_FOUND_ERROR_CODE;\n}\nif ((typeof exports.default === \"function\" || typeof exports.default === \"object\" && exports.default !== null) && typeof exports.default.__esModule === \"undefined\") {\n    Object.defineProperty(exports.default, \"__esModule\", {\n        value: true\n    });\n    Object.assign(exports.default, exports);\n    module.exports = exports.default;\n} //# sourceMappingURL=not-found.js.map\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHJzYykvLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L2NsaWVudC9jb21wb25lbnRzL25vdC1mb3VuZC5qcyIsIm1hcHBpbmdzIjoiQUFBYTtBQUNiQSw4Q0FBNkM7SUFDekNHLE9BQU87QUFDWCxDQUFDLEVBQUM7QUFDRixLQUFNQyxDQUFBQSxDQUdOO0FBQ0EsU0FBU0csUUFBUUMsTUFBTSxFQUFFQyxHQUFHO0lBQ3hCLElBQUksSUFBSUMsUUFBUUQsSUFBSVQsT0FBT0MsY0FBYyxDQUFDTyxRQUFRRSxNQUFNO1FBQ3BEQyxZQUFZO1FBQ1pDLEtBQUtILEdBQUcsQ0FBQ0MsS0FBSztJQUNsQjtBQUNKO0FBQ0FILFFBQVFMLFNBQVM7SUFDYkcsVUFBVTtRQUNOLE9BQU9BO0lBQ1g7SUFDQUMsaUJBQWlCO1FBQ2IsT0FBT0E7SUFDWDtBQUNKO0FBQ0EsTUFBTU8sdUJBQXVCO0FBQzdCLFNBQVNSO0lBQ0wsNENBQTRDO0lBQzVDLE1BQU1TLFFBQVEsSUFBSUMsTUFBTUY7SUFDeEJDLE1BQU1FLE1BQU0sR0FBR0g7SUFDZixNQUFNQztBQUNWO0FBQ0EsU0FBU1IsZ0JBQWdCUSxLQUFLO0lBQzFCLE9BQU8sQ0FBQ0EsU0FBUyxPQUFPLEtBQUssSUFBSUEsTUFBTUUsTUFBTSxNQUFNSDtBQUN2RDtBQUVBLElBQUksQ0FBQyxPQUFPWCxRQUFRZSxPQUFPLEtBQUssY0FBZSxPQUFPZixRQUFRZSxPQUFPLEtBQUssWUFBWWYsUUFBUWUsT0FBTyxLQUFLLElBQUksS0FBTSxPQUFPZixRQUFRZSxPQUFPLENBQUNDLFVBQVUsS0FBSyxhQUFhO0lBQ3JLbEIsT0FBT0MsY0FBYyxDQUFDQyxRQUFRZSxPQUFPLEVBQUUsY0FBYztRQUFFZCxPQUFPO0lBQUs7SUFDbkVILE9BQU9tQixNQUFNLENBQUNqQixRQUFRZSxPQUFPLEVBQUVmO0lBQy9CRSxPQUFPRixPQUFPLEdBQUdBLFFBQVFlLE9BQU87QUFDbEMsRUFFQSxxQ0FBcUMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYW1wZmlyZS1pZC8uL25vZGVfbW9kdWxlcy9uZXh0L2Rpc3QvY2xpZW50L2NvbXBvbmVudHMvbm90LWZvdW5kLmpzPzQyMDMiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHtcbiAgICB2YWx1ZTogdHJ1ZVxufSk7XG4wICYmIChtb2R1bGUuZXhwb3J0cyA9IHtcbiAgICBub3RGb3VuZDogbnVsbCxcbiAgICBpc05vdEZvdW5kRXJyb3I6IG51bGxcbn0pO1xuZnVuY3Rpb24gX2V4cG9ydCh0YXJnZXQsIGFsbCkge1xuICAgIGZvcih2YXIgbmFtZSBpbiBhbGwpT2JqZWN0LmRlZmluZVByb3BlcnR5KHRhcmdldCwgbmFtZSwge1xuICAgICAgICBlbnVtZXJhYmxlOiB0cnVlLFxuICAgICAgICBnZXQ6IGFsbFtuYW1lXVxuICAgIH0pO1xufVxuX2V4cG9ydChleHBvcnRzLCB7XG4gICAgbm90Rm91bmQ6IGZ1bmN0aW9uKCkge1xuICAgICAgICByZXR1cm4gbm90Rm91bmQ7XG4gICAgfSxcbiAgICBpc05vdEZvdW5kRXJyb3I6IGZ1bmN0aW9uKCkge1xuICAgICAgICByZXR1cm4gaXNOb3RGb3VuZEVycm9yO1xuICAgIH1cbn0pO1xuY29uc3QgTk9UX0ZPVU5EX0VSUk9SX0NPREUgPSBcIk5FWFRfTk9UX0ZPVU5EXCI7XG5mdW5jdGlvbiBub3RGb3VuZCgpIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tdGhyb3ctbGl0ZXJhbFxuICAgIGNvbnN0IGVycm9yID0gbmV3IEVycm9yKE5PVF9GT1VORF9FUlJPUl9DT0RFKTtcbiAgICBlcnJvci5kaWdlc3QgPSBOT1RfRk9VTkRfRVJST1JfQ09ERTtcbiAgICB0aHJvdyBlcnJvcjtcbn1cbmZ1bmN0aW9uIGlzTm90Rm91bmRFcnJvcihlcnJvcikge1xuICAgIHJldHVybiAoZXJyb3IgPT0gbnVsbCA/IHZvaWQgMCA6IGVycm9yLmRpZ2VzdCkgPT09IE5PVF9GT1VORF9FUlJPUl9DT0RFO1xufVxuXG5pZiAoKHR5cGVvZiBleHBvcnRzLmRlZmF1bHQgPT09ICdmdW5jdGlvbicgfHwgKHR5cGVvZiBleHBvcnRzLmRlZmF1bHQgPT09ICdvYmplY3QnICYmIGV4cG9ydHMuZGVmYXVsdCAhPT0gbnVsbCkpICYmIHR5cGVvZiBleHBvcnRzLmRlZmF1bHQuX19lc01vZHVsZSA9PT0gJ3VuZGVmaW5lZCcpIHtcbiAgT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMuZGVmYXVsdCwgJ19fZXNNb2R1bGUnLCB7IHZhbHVlOiB0cnVlIH0pO1xuICBPYmplY3QuYXNzaWduKGV4cG9ydHMuZGVmYXVsdCwgZXhwb3J0cyk7XG4gIG1vZHVsZS5leHBvcnRzID0gZXhwb3J0cy5kZWZhdWx0O1xufVxuXG4vLyMgc291cmNlTWFwcGluZ1VSTD1ub3QtZm91bmQuanMubWFwIl0sIm5hbWVzIjpbIk9iamVjdCIsImRlZmluZVByb3BlcnR5IiwiZXhwb3J0cyIsInZhbHVlIiwibW9kdWxlIiwibm90Rm91bmQiLCJpc05vdEZvdW5kRXJyb3IiLCJfZXhwb3J0IiwidGFyZ2V0IiwiYWxsIiwibmFtZSIsImVudW1lcmFibGUiLCJnZXQiLCJOT1RfRk9VTkRfRVJST1JfQ09ERSIsImVycm9yIiwiRXJyb3IiLCJkaWdlc3QiLCJkZWZhdWx0IiwiX19lc01vZHVsZSIsImFzc2lnbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///(rsc)/./node_modules/next/dist/client/components/not-found.js\n");
-
-/***/ }),
-
-/***/ "(rsc)/./node_modules/next/dist/client/components/parallel-route-default.js":
-/*!****************************************************************************!*\
-  !*** ./node_modules/next/dist/client/components/parallel-route-default.js ***!
-  \****************************************************************************/
-/***/ ((module, exports, __webpack_require__) => {
-
-"use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));\nObject.defineProperty(exports, \"default\", ({\n    enumerable: true,\n    get: function() {\n        return NoopParallelRouteDefault;\n    }\n}));\nconst _notfound = __webpack_require__(/*! ./not-found */ \"(rsc)/./node_modules/next/dist/client/components/not-found.js\");\nfunction NoopParallelRouteDefault() {\n    (0, _notfound.notFound)();\n}\nif ((typeof exports.default === \"function\" || typeof exports.default === \"object\" && exports.default !== null) && typeof exports.default.__esModule === \"undefined\") {\n    Object.defineProperty(exports.default, \"__esModule\", {\n        value: true\n    });\n    Object.assign(exports.default, exports);\n    module.exports = exports.default;\n} //# sourceMappingURL=parallel-route-default.js.map\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHJzYykvLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L2NsaWVudC9jb21wb25lbnRzL3BhcmFsbGVsLXJvdXRlLWRlZmF1bHQuanMiLCJtYXBwaW5ncyI6IkFBQWE7QUFDYkEsOENBQTZDO0lBQ3pDRyxPQUFPO0FBQ1gsQ0FBQyxFQUFDO0FBQ0ZILDJDQUEwQztJQUN0Q0ksWUFBWTtJQUNaQyxLQUFLO1FBQ0QsT0FBT0M7SUFDWDtBQUNKLENBQUMsRUFBQztBQUNGLE1BQU1DLFlBQVlDLG1CQUFPQSxDQUFDLGtGQUFhO0FBQ3ZDLFNBQVNGO0lBQ0osSUFBR0MsVUFBVUUsUUFBUTtBQUMxQjtBQUVBLElBQUksQ0FBQyxPQUFPUCxRQUFRUSxPQUFPLEtBQUssY0FBZSxPQUFPUixRQUFRUSxPQUFPLEtBQUssWUFBWVIsUUFBUVEsT0FBTyxLQUFLLElBQUksS0FBTSxPQUFPUixRQUFRUSxPQUFPLENBQUNDLFVBQVUsS0FBSyxhQUFhO0lBQ3JLWCxPQUFPQyxjQUFjLENBQUNDLFFBQVFRLE9BQU8sRUFBRSxjQUFjO1FBQUVQLE9BQU87SUFBSztJQUNuRUgsT0FBT1ksTUFBTSxDQUFDVixRQUFRUSxPQUFPLEVBQUVSO0lBQy9CVyxPQUFPWCxPQUFPLEdBQUdBLFFBQVFRLE9BQU87QUFDbEMsRUFFQSxrREFBa0QiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYW1wZmlyZS1pZC8uL25vZGVfbW9kdWxlcy9uZXh0L2Rpc3QvY2xpZW50L2NvbXBvbmVudHMvcGFyYWxsZWwtcm91dGUtZGVmYXVsdC5qcz84ZTdiIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7XG4gICAgdmFsdWU6IHRydWVcbn0pO1xuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiZGVmYXVsdFwiLCB7XG4gICAgZW51bWVyYWJsZTogdHJ1ZSxcbiAgICBnZXQ6IGZ1bmN0aW9uKCkge1xuICAgICAgICByZXR1cm4gTm9vcFBhcmFsbGVsUm91dGVEZWZhdWx0O1xuICAgIH1cbn0pO1xuY29uc3QgX25vdGZvdW5kID0gcmVxdWlyZShcIi4vbm90LWZvdW5kXCIpO1xuZnVuY3Rpb24gTm9vcFBhcmFsbGVsUm91dGVEZWZhdWx0KCkge1xuICAgICgwLCBfbm90Zm91bmQubm90Rm91bmQpKCk7XG59XG5cbmlmICgodHlwZW9mIGV4cG9ydHMuZGVmYXVsdCA9PT0gJ2Z1bmN0aW9uJyB8fCAodHlwZW9mIGV4cG9ydHMuZGVmYXVsdCA9PT0gJ29iamVjdCcgJiYgZXhwb3J0cy5kZWZhdWx0ICE9PSBudWxsKSkgJiYgdHlwZW9mIGV4cG9ydHMuZGVmYXVsdC5fX2VzTW9kdWxlID09PSAndW5kZWZpbmVkJykge1xuICBPYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cy5kZWZhdWx0LCAnX19lc01vZHVsZScsIHsgdmFsdWU6IHRydWUgfSk7XG4gIE9iamVjdC5hc3NpZ24oZXhwb3J0cy5kZWZhdWx0LCBleHBvcnRzKTtcbiAgbW9kdWxlLmV4cG9ydHMgPSBleHBvcnRzLmRlZmF1bHQ7XG59XG5cbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXBhcmFsbGVsLXJvdXRlLWRlZmF1bHQuanMubWFwIl0sIm5hbWVzIjpbIk9iamVjdCIsImRlZmluZVByb3BlcnR5IiwiZXhwb3J0cyIsInZhbHVlIiwiZW51bWVyYWJsZSIsImdldCIsIk5vb3BQYXJhbGxlbFJvdXRlRGVmYXVsdCIsIl9ub3Rmb3VuZCIsInJlcXVpcmUiLCJub3RGb3VuZCIsImRlZmF1bHQiLCJfX2VzTW9kdWxlIiwiYXNzaWduIiwibW9kdWxlIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///(rsc)/./node_modules/next/dist/client/components/parallel-route-default.js\n");
-
-/***/ }),
-
 /***/ "(rsc)/./node_modules/next/dist/client/components/render-from-template-context.js":
 /*!**********************************************************************************!*\
   !*** ./node_modules/next/dist/client/components/render-from-template-context.js ***!

.next/server/webpack-runtime.js

@@ -125,7 +125,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("cfd8e4c67685064f")
+/******/ 		__webpack_require__.h = () => ("69d6dcb2b0908b14")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */

.next/static/chunks/webpack.js

@@ -163,7 +163,7 @@
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = function(chunkId) {
 /******/ 			// return url for filenames based on template
-/******/ 			return undefined;
+/******/ 			return "static/chunks/" + chunkId + ".js";
 /******/ 		};
 /******/ 	}();
 /******/ 	
@@ -192,7 +192,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "b7c219527d1d4385"; }
+/******/ 		__webpack_require__.h = function() { return "a64780ece6dd8f61"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

.next/static/webpack/2587a51349249c58.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["app/page","webpack"],"r":[],"m":[]}

.next/static/webpack/b7c219527d1d4385.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["app/page","webpack"],"r":["app/not-found"],"m":["(app-pages-browser)/./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=D%3A%5Cdev%5CTelegram%5CCampFireID%5Cnode_modules%5Cnext%5Cdist%5Cclient%5Ccomponents%5Cnot-found-error.js&page=%2Fnot-found!","(app-pages-browser)/./node_modules/next/dist/client/components/not-found-error.js"]}

.next/static/webpack/d8b7c52af685fb68.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["app/page","webpack"],"r":[],"m":[]}

.next/static/webpack/webpack.2587a51349249c58.hot-update.js

@@ -0,0 +1,18 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ !function() {
+/******/ 	__webpack_require__.h = function() { return "d8b7c52af685fb68"; }
+/******/ }();
+/******/ 
+/******/ }
+);

.next/static/webpack/webpack.b7c219527d1d4385.hot-update.js

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ !function() {
+/******/ 	// This function allow to reference async chunks
+/******/ 	__webpack_require__.u = function(chunkId) {
+/******/ 		// return url for filenames based on template
+/******/ 		return "static/chunks/" + chunkId + ".js";
+/******/ 	};
+/******/ }();
+/******/ 
+/******/ /* webpack/runtime/getFullHash */
+/******/ !function() {
+/******/ 	__webpack_require__.h = function() { return "2587a51349249c58"; }
+/******/ }();
+/******/ 
+/******/ }
+);

.next/static/webpack/webpack.d8b7c52af685fb68.hot-update.js

@@ -0,0 +1,18 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ !function() {
+/******/ 	__webpack_require__.h = function() { return "a64780ece6dd8f61"; }
+/******/ }();
+/******/ 
+/******/ }
+);

app/components/MainApp.tsx

@@ -1,24 +1,29 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Container, Tabs, TabList, TabPanels, Tab, TabPanel, useToast } from '@chakra-ui/react';
+import { Container, Tabs, TabList, TabPanels, Tab, TabPanel, useToast, Spinner, Center } from '@chakra-ui/react';
 import { UserProfile } from './UserProfile';
 import { Shop } from './Shop';
 import { TransferBalance } from './TransferBalance';
 import * as api from '../utils/api';
-import WebApp from '@twa-dev/sdk';
 import { IUser } from '../../backend/models/User';
 import { IShopItem } from '../../backend/models/ShopItem';
 
+type SafeUser = Omit<IUser, keyof Document>;
+
 export function MainApp() {
-  const [user, setUser] = useState<IUser | null>(null);
+  const [user, setUser] = useState<SafeUser | null>(null);
   const [shopItems, setShopItems] = useState<IShopItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
 
   useEffect(() => {
     const initApp = async () => {
       try {
-        // Получаем данные из Telegram WebApp
+        setIsLoading(true);
+        // Динамически импортируем SDK только на клиенте
+        const WebApp = (await import('@twa-dev/sdk')).default;
+        
         const initData = WebApp.initData;
         if (!initData) {
           throw new Error('Приложение должно быть открыто в Telegram');
@@ -42,6 +47,8 @@ export function MainApp() {
           duration: 5000,
           isClosable: true,
         });
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -90,8 +97,16 @@ export function MainApp() {
     }
   };
 
+  if (isLoading) {
+    return (
+      <Center h="100vh">
+        <Spinner size="xl" />
+      </Center>
+    );
+  }
+
   if (!user) {
-    return null; // или компонент загрузки
+    return null;
   }
 
   return (

app/components/Shop.tsx

@@ -11,14 +11,10 @@ import {
   useToast,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { InventoryItem } from '../types/user';
+import { IShopItem } from '../../backend/models/ShopItem';
-
-interface ShopItem extends InventoryItem {
-  price: number;
-}
 
 interface ShopProps {
-  items: ShopItem[];
+  items: IShopItem[];
   userBalance: number;
   onPurchase: (itemId: string) => Promise<void>;
 }
@@ -28,7 +24,7 @@ export const Shop: React.FC<ShopProps> = ({ items, userBalance, onPurchase }) =>
   const bgColor = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
 
-  const handlePurchase = async (item: ShopItem) => {
+  const handlePurchase = async (item: IShopItem) => {
     if (userBalance < item.price) {
       toast({
         title: 'Недостаточно средств',