diff --git a/.env b/.env index 7d219b7..2d6d54d 100644 --- 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 index dd366f3..ad5df63 100644 --- 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 index e28d46d..1167cbc 100644 --- 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 index f9e6dea..7b38183 100644 --- 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 new file mode 100644 index 0000000..2d0aa63 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + NeoFS Panel + + + + + + + + + + + + + + + + +
+ + + diff --git a/package.json b/package.json index 1d587ef..05b36e9 100644 --- a/package.json +++ b/package.json @@ -3,29 +3,23 @@ "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%", @@ -33,12 +27,13 @@ "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 deleted file mode 100644 index d8f7efc..0000000 --- a/public/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - NeoFS Panel - - - - - - - - - - - - - - - - - -
- - - diff --git a/src/App.css b/src/App.css index df84fc2..1e20ffa 100644 --- 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,7 +180,7 @@ ul { border-left: 0.4em solid transparent; } -#containers .notification>h1.active::after { +#containers .notification>.title.active::after { display: none; } @@ -188,7 +188,7 @@ ul { 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; } diff --git a/src/App.js b/src/App.jsx similarity index 96% rename from src/App.js rename to src/App.jsx index 934f151..7adb63e 100644 --- a/src/App.js +++ b/src/App.jsx @@ -16,7 +16,7 @@ import { Tag, Notification, } from 'react-bulma-components'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; +import copy from 'copy-to-clipboard'; import Home from './Home'; import Profile from './Profile'; import Getobject from './Getobject'; @@ -44,15 +44,15 @@ export const App = () => { const wcSdk = useWalletConnect(); const dapi = window.OneGate ? new BaseDapi(window.OneGate) : null; let [neolineN3, setNeolineN3] = useState(null); - const [activeNet] = useState(process.env.REACT_APP_NETWORK ? capitalizeFirstLetter(process.env.REACT_APP_NETWORK) : 'Mainnet'); + const [activeNet] = useState(import.meta.env.VITE_NETWORK ? capitalizeFirstLetter(import.meta.env.VITE_NETWORK) : 'Mainnet'); const [NeoFSContract] = useState({ gasToken: '0xd2a4cff31913016155e38e474a2c06d08be276cf', - account: process.env.REACT_APP_NEOFS_ACCOUNT ? process.env.REACT_APP_NEOFS_ACCOUNT : 'NNxVrKjLsRkWsmGgmuNXLcMswtxTGaNQLk', - scriptHash: Neon.create.account(process.env.REACT_APP_NEOFS_ACCOUNT).scriptHash, + account: import.meta.env.VITE_NEOFS_ACCOUNT ? import.meta.env.VITE_NEOFS_ACCOUNT : 'NNxVrKjLsRkWsmGgmuNXLcMswtxTGaNQLk', + scriptHash: Neon.create.account(import.meta.env.VITE_NEOFS_ACCOUNT).scriptHash, }); const [params] = useState({ - rest_gw: process.env.REACT_APP_RESTGW ? process.env.REACT_APP_RESTGW : 'https://rest.t5.fs.neo.org/v1', + rest_gw: import.meta.env.VITE_RESTGW ? import.meta.env.VITE_RESTGW : 'https://rest.t5.fs.neo.org/v1', }); const [objectLinkLifetime, setObjectLinkLifetime] = useState(new Date().toLocaleDateString("sv")); @@ -796,24 +796,22 @@ export const App = () => { {modal.text.indexOf('0x') !== -1 && ( <> Transaction id: - { + onClick={() => { + copy(modal.text); setCopy(true); setTimeout(() => { setCopy(false); }, 700); }} > -
- {modal.text} - {isCopied && ( -
Copied!
- )} -
- + {modal.text} + {isCopied && ( +
Copied!
+ )} +
{ rel="noopener noreferrer" >
Connection URL Copy and paste the connection URL into the Add connection page in your wallet - { + onClick={() => { + copy(modal.text); setCopy(true); setTimeout(() => { setCopy(false); }, 700); }} > -
- {modal.text} - {isCopied && ( -
Copied!
- )} -
- + {modal.text} + {isCopied && ( +
Copied!
+ )} + )} @@ -921,7 +918,7 @@ export const App = () => { rel="noopener noreferrer" target="_blank" > - @@ -932,7 +929,7 @@ export const App = () => { rel="noopener noreferrer" target="_blank" > - @@ -943,7 +940,7 @@ export const App = () => { rel="noopener noreferrer" target="_blank" > - @@ -954,7 +951,7 @@ export const App = () => { rel="noopener noreferrer" target="_blank" > - @@ -996,6 +993,7 @@ export const App = () => { /> ) : ( )} - + )} @@ -1679,6 +1700,7 @@ export const App = () => {
{!isLoadingForm && ( )}
{activePanel === 'objects' && (