nspcc-dev · roman-khimov · Mar 24, 2025 · Mar 20, 2025
diff --git a/.env b/.env
@@ -1,9 +1,9 @@
 # production project ID, can only be used by panel.fs.neo.org
-REACT_APP_WC_PROJECT_ID=8e39af16af0819871be6f2da61a3a038
+VITE_WC_PROJECT_ID=8e39af16af0819871be6f2da61a3a038
 
-REACT_APP_URL=https://panel.fs.neo.org/
-REACT_APP_RESTGW=https://rest.fs.neo.org/v1
+VITE_URL=https://panel.fs.neo.org/
+VITE_RESTGW=https://rest.fs.neo.org/v1
 
 # Mainnet NeoFS contract
-REACT_APP_NETWORK=mainnet
-REACT_APP_NEOFS_ACCOUNT=NNxVrKjLsRkWsmGgmuNXLcMswtxTGaNQLk
+VITE_NETWORK=mainnet
+VITE_NEOFS_ACCOUNT=NNxVrKjLsRkWsmGgmuNXLcMswtxTGaNQLk
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v2
 

diff --git a/Makefile b/Makefile
@@ -14,20 +14,22 @@ $(SITE_DIR):
 	docker run \
 	-v $$(pwd)/src:/usr/src/app/src \
 	-v $$(pwd)/public:/usr/src/app/public \
+	-v $$(pwd)/index.html:/usr/src/app/index.html \
+	-v $$(pwd)/vite.config.mjs:/usr/src/app/vite.config.mjs \
 	-v $$(pwd)/package.json:/usr/src/app/package.json \
 	-v $$(pwd)/.env:/usr/src/app/.env \
 	-v $$(pwd)/$(SITE_DIR):/usr/src/app/$(SITE_DIR) \
 	-e CURRENT_UID=$(CURRENT_UID) \
-	-w /usr/src/app node:14-alpine \
-	sh -c 'npm install && REACT_APP_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
+	-w /usr/src/app node:18-alpine \
+	sh -c 'apk add --no-cache python3 make g++ && npm install && VITE_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
 
 .PHONY: start
 start:
 	docker run \
 	-p $(PORT):3000 \
 	-v `pwd`:/usr/src/app \
-	-w /usr/src/app node:14-alpine \
-	sh -c 'npm install --silent && npm run build && npm install -g serve && serve -s $(SITE_DIR) -p 3000'
+	-w /usr/src/app node:18-alpine \
+	sh -c 'apk add --no-cache python3 make g++ && npm install --silent && npm run build && npm install -g serve && serve -s $(SITE_DIR) -p 3000'
 
 .PHONY: release
 release: $(SITE_DIR)

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ framework under the hood and includes:
 
 - docker
 - make
-- node (`14+`)
+- node (`18+`)
 
 # Quick Start
 
@@ -37,13 +37,13 @@ $ git clone https://github.com/nspcc-dev/panel-fs-neo-org.git
 
 Set variables in `.env` file
 
-- `REACT_APP_WC_PROJECT_ID` - WalletConnect project id (Can be obtained on WalletConnect website,
+- `VITE_WC_PROJECT_ID` - WalletConnect project id (Can be obtained on WalletConnect website,
   see https://cloud.walletconnect.com/app)
-- `REACT_APP_URL` - Web application url
-- `REACT_APP_RESTGW` - [NeoFS REST Gateway](https://github.com/nspcc-dev/neofs-rest-gw), which we use to manage
+- `VITE_URL` - Web application url
+- `VITE_RESTGW` - [NeoFS REST Gateway](https://github.com/nspcc-dev/neofs-rest-gw), which we use to manage
   containers and object in neofs (control path)
-- `REACT_APP_NETWORK` - Network of the Neo (might be `mainnet`, `testnet`)
-- `REACT_APP_NEOFS_ACCOUNT` - Neo3 address of the NeoFS contract
+- `VITE_NETWORK` - Network of the Neo (might be `mainnet`, `testnet`)
+- `VITE_NEOFS_ACCOUNT` - Neo3 address of the NeoFS contract
 
 Run next commands from project's root:
 
@@ -66,7 +66,7 @@ You can easily run the node locally in a docker container using [@nspcc-dev/neof
 You need to update the parameters in the `.env` file to make it work:
 
 ```env
-REACT_APP_RESTGW=http://localhost:8090/v1
+VITE_RESTGW=http://localhost:8090/v1
 ```
 
 # Make instructions

diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>NeoFS Panel</title>
+    <meta charset='utf-8'>
+    <link rel="icon" href="/img/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="title" content="NeoFS Panel">
+    <meta name="description" content="NeoFS Panel">
+    <meta property="og:url" content="https://panel.fs.neo.org/">
+    <meta property="og:title" content="NeoFS Panel">
+    <meta property="og:description" content="NeoFS Panel">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/img/cover.png">
+    <meta name="keywords" content="NeoFS,Neo,Blockchain,智能经济,区块链">
+    <meta name="theme-color" content="#ffffff" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://verify.walletconnect.com/; script-src 'self'; connect-src 'self' http://127.0.0.1:60004 ws://127.0.0.1:60004 https://dapi.o3.app:60003 https://rest.t5.fs.neo.org https://rest.fs.neo.org wss://relay.walletconnect.com; style-src 'unsafe-inline' 'self'; font-src 'self'; img-src 'self';">
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,42 +3,37 @@
   "version": "0.6.0",
   "private": true,
   "dependencies": {
-    "@cityofzion/neon-js": "^5.5.1",
-    "@cityofzion/wallet-connect-sdk-react": "^3.2.0",
+    "@cityofzion/neon-js": "^5.7.0",
+    "@cityofzion/wallet-connect-sdk-react": "^3.3.5",
     "@neongd/neo-dapi": "^1.2.2",
     "bulma": "^0.9.4",
+    "copy-to-clipboard": "^3.3.3",
     "neo3-dapi": "^1.0.1",
-    "react": "^17.0.2",
+    "react": "^19.0.0",
     "react-bulma-components": "^4.1.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
-    "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.21.3"
+    "react-dom": "^19.0.0",
+    "react-qr-code": "^2.0.15",
+    "react-router-dom": "^6.10.0"
   },
   "scripts": {
-    "start": "REACT_APP_VERSION=$(make version) GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false BUILD_PATH='./panel.fs.neo.org' react-scripts build",
-    "test": "jest --updateSnapshot",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "dev": "VITE_VERSION=$(make version) vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
-    "@testing-library/react": "^12.1.5",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
-    "react-scripts": "^5.0.1"
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-transform-import-meta": "^2.3.2",
+    "jsdom": "^26.0.0",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.9"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.css b/src/App.css
@@ -165,7 +165,7 @@ ul {
     color: #003;
 }
 
-#containers .notification>h1::after {
+#containers .notification>.title::after {
     display: inline-block;
     position: absolute;
     right: 0;
@@ -180,15 +180,15 @@ ul {
     border-left: 0.4em solid transparent;
 }
 
-#containers .notification>h1.active::after {
+#containers .notification>.title.active::after {
     display: none;
 }
 
 #containers .tile.is-parent>.notification {
     padding: 0;
 }
 
-#containers .tile.is-parent>.notification>h1 {
+#containers .tile.is-parent>.notification>.title {
     padding: 1.25rem 1.5rem 1.25rem;
 }
 
@@ -792,7 +792,7 @@ label.panel-block:hover {
         padding: 1rem;
     }
 
-    #containers .tile.is-parent>.notification>h1 {
+    #containers .tile.is-parent>.notification>.title {
         padding: 0.75rem 1rem 0.75rem;
     }
 
@@ -806,7 +806,7 @@ label.panel-block:hover {
         margin-bottom: 0.25rem;
     }
 
-    #containers .notification>h1::after {
+    #containers .notification>.title::after {
         margin: 18px;
     }