added contract connection

app/Components/About.tsx

@@ -35,4 +35,3 @@ export default function About() {
     </Box>
   );
 }
-// ...existing code...

app/Components/Contracts/Connections.tsx

@@ -0,0 +1,28 @@
+import { Web3 } from 'web3';
+import clearNetJson from './ClearNet.json';
+
+const clearNetABI = (clearNetJson as any).abi ?? clearNetJson;
+const clearNetAddress = "0xf04cbb756045b276ea962ea98d938a0ed8101f51";
+
+export const getActiveNodes = async (provider: any) => {
+    const web3 = new Web3(provider);
+    const contract = new web3.eth.Contract(clearNetABI, clearNetAddress);
+    const activeNodes = await contract.methods.getActiveNodes().call();
+    return activeNodes;
+}
+
+export async function registerNode(provider: any,account: string) {
+    const web3 = new Web3(provider);
+    const contract = new web3.eth.Contract(clearNetABI, clearNetAddress);
+    const gasPrice = await web3.eth.getGasPrice();
+    const gasLimit = 300000;
+    const tx = await contract.methods.registerNode("57.158.82.48", 51820, 1000000000000000000n).send({
+        from: account,
+        gas: String(gasLimit),
+        gasPrice: String(gasPrice),
+    });
+
+    console.log(tx);
+
+
+}

app/Components/NavBar.tsx

@@ -4,7 +4,6 @@ import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Button from "@mui/material/Button";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import LoginIcon from "@mui/icons-material/Login";
 import { Typography, Menu, MenuItem, IconButton, Avatar, Tooltip } from "@mui/material";
 import useAuth from "~/hooks/useAuth";

package.json

@@ -20,7 +20,8 @@
     "isbot": "^5.1.31",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.9.2"
+    "react-router": "^7.9.2",
+    "web3": "^4.16.0"
   },
   "devDependencies": {
     "@react-router/dev": "^7.9.2",