bit-matrix · katsucodes247 · Oct 28, 2023 · Oct 29, 2023 · Oct 29, 2023 · Oct 29, 2023
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Script Wiz ,Online Bitcoin Script Editor" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-XH7VQK0DKJ"></script>
     <script src="hello.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <script>
       var secret = Module;
     </script>
@@ -25,16 +26,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" crossorigin="use-credentials" href="/manifest.json" />
     <title>Script Wiz</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -2,37 +2,41 @@
   "name": "script-wiz-ui",
   "version": "0.1.18",
   "private": false,
+  "type": "module",
+  "engines" : { 
+    "npm" : ">=9.8.0",
+    "node" : ">=20"
+  },
   "dependencies": {
-    "@monaco-editor/react": "^4.4.1",
-    "@noble/secp256k1": "^1.7.1",
+    "@monaco-editor/react": "^4.6.0",
+    "@noble/secp256k1": "^2.0.0",
     "@script-wiz/lib": "^0.1.99",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "axios": "^0.26.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "axios": "^1.6.0",
     "big-integer": "^1.6.51",
     "bn.js": "^5.2.1",
-    "monaco-editor": "^0.33.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-mosaic-component": "^5.0.0",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "monaco-editor": "^0.44.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-mosaic-component": "^6.1.0",
+    "react-router-dom": "^6.16.0",
     "rsuite": "^5.5.0",
     "sass": "^1.49.7",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write './src/**/*.{ts,tsx}'"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -54,7 +58,8 @@
   },
   "devDependencies": {
     "@types/bn.js": "^5.1.1",
-    "@types/react-router-dom": "^5.3.0"
+    "@types/react-router-dom": "^5.3.0",
+    "vite-plugin-node-polyfills": "^0.15.0"
   },
   "homepage": "https://ide.scriptwiz.app"
 }
diff --git a/src/components/Svg/SvgType.ts b/src/components/Svg/SvgType.ts
@@ -1,5 +1,6 @@
 export type SvgType = {
   path: string;
+  children?: React.ReactNode;
   fill?: string;
   bgColor?: string;
   color?: string;

diff --git a/src/index.scss b/src/index.scss
@@ -1,4 +1,4 @@
-@import '~rsuite/dist/rsuite.min.css';
+@import 'rsuite/dist/rsuite.min.css';
 
 body {
   margin: 0;

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -12,16 +12,19 @@ declare global {
   }
 }
 
-ReactDOM.render(
-  <React.StrictMode>
+const domNode = document.getElementById('root')!;
+const root = createRoot(domNode);
+
+// Disabling strict mode to avoid uncaught promise with Monaco: https://github.com/suren-atoyan/monaco-react/issues/440
+root.render(
+  // <React.StrictMode>
     <CustomProvider theme="dark">
       <App />
     </CustomProvider>
-  </React.StrictMode>,
-  document.getElementById('root'),
+  // </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
+// to log results (for example: reportWebVitals(co  nsole.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/pages/EcCalculator/EcCalculator.tsx b/src/pages/EcCalculator/EcCalculator.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Input, InputGroup, Tooltip, Whisper, RadioGroup, Radio, Checkbox } from 'rsuite';
 import CopyIcon from '../../components/Svg/Icons/Copy';
-import { Point } from '@noble/secp256k1';
+import { ProjectivePoint } from '@noble/secp256k1';
 import { ValueType } from 'rsuite/esm/Radio';
 import BN from 'bn.js';
 import { validHex } from '../../utils/helper';
@@ -38,9 +38,9 @@ export const EcCalculator = () => {
 
   const pointMultiplation = () => {
     try {
-      const data = new Point(BigInt('0x' + point1), BigInt('0x' + ecinpY)).multiply(BigInt('0x' + point2));
-      const yAxis = bigInt(data.y.toString(16), 16);
-      // const yAxis = yfromX(data.x.toString(16));
+      const data = new ProjectivePoint(BigInt(point1), BigInt(ecinpY), BigInt(1)).multiply(BigInt(point2));
+      const affinePoint = data.toAffine(); // This is a hypothetical method.
+      const yAxis = bigInt(affinePoint.y.toString(16), 16);
 
       setMulResult({ x: data.x.toString(16), y: yAxis.toString(16), isOdd: yAxis.isOdd() });
     } catch (error) {

diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { ROUTE_PATH } from './ROUTE_PATH';
 import { Helper } from '../pages/Helper/Helper';
 import { Home } from '../pages/Home/Home';
@@ -13,16 +13,16 @@ import { BitCalculator } from '../pages/256BitCalculator/256BitCalculator';
 export const AppRouter = (): JSX.Element => {
   return (
     <Router>
-      <Switch>
-        <Route exact path={ROUTE_PATH.HOME} component={Home} />
-        <Route exact path={ROUTE_PATH.HELPER} component={Helper} />
-        <Route exact path={ROUTE_PATH.SIGNATURE_TOOLS} component={SignatureTools} />
-        <Route exact path={ROUTE_PATH.TAPLEAF_CALCULATOR} component={TapLeafCalculator} />
-        <Route exact path={ROUTE_PATH.MAST_TOOL} component={MastTool} />
-        <Route exact path={ROUTE_PATH.SHA256D} component={Sha256Midstate} />
-        <Route exact path={ROUTE_PATH.EC_CALCULATOR} component={EcCalculator} />
-        <Route exact path={ROUTE_PATH.CALCULATOR} component={BitCalculator} />
-      </Switch>
+      <Routes>
+        <Route path={ROUTE_PATH.HOME} element={<Home />} />
+        <Route path={ROUTE_PATH.HELPER} element={<Helper />} />
+        <Route path={ROUTE_PATH.SIGNATURE_TOOLS} element={<SignatureTools />} />
+        <Route path={ROUTE_PATH.TAPLEAF_CALCULATOR} element={<TapLeafCalculator />} />
+        <Route path={ROUTE_PATH.MAST_TOOL} element={<MastTool />} />
+        <Route path={ROUTE_PATH.SHA256D} element={<Sha256Midstate />} />
+        <Route path={ROUTE_PATH.EC_CALCULATOR} element={<EcCalculator />} />
+        <Route path={ROUTE_PATH.CALCULATOR} element={<BitCalculator />} />
+      </Routes>
     </Router>
   );
 };
diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react(), nodePolyfills()],
+  build: {
+    outDir: 'build',
+  }
+})