added logo

app/Components/Metamask/DiscoverWalletProviders.tsx

@@ -1,50 +1,126 @@
-import { useState, type SetStateAction } from 'react';
+// ...existing code...
-import { useSyncProviders } from './useSyncProviders';
+import React, { useState } from "react";
-import useAuth from '~/hooks/useAuth';
+import { useSyncProviders } from "./useSyncProviders";
-// code from https://metamask.io/news/how-to-implement-eip-6963-support-in-your-web3-dapp
+import useAuth from "~/hooks/useAuth";
+import type { EIP6963ProviderDetail } from "./EthereumProviderTypes";
+import {
+  Box,
+  Grid,
+  Card,
+  CardContent,
+  Avatar,
+  Typography,
+  Button,
+  Stack,
+  CircularProgress,
+  Alert,
+} from "@mui/material";
 
-import type {
+const shortAddress = (addr: string) =>
-  EIP6963ProviderDetail
+  addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-6)}` : addr;
-} from "./EthereumProviderTypes";
 
-export const DiscoverWalletProviders = () => {
+export const DiscoverWalletProviders: React.FC = () => {
   const providers = useSyncProviders();
   const { auth, setAuth } = useAuth();
+  const [loadingUuid, setLoadingUuid] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   const handleConnect = async (providerWithInfo: EIP6963ProviderDetail) => {
-    const accounts = await providerWithInfo.provider.request({ method: 'eth_requestAccounts' }).catch(console.error);
+    setError(null);
+    setLoadingUuid(providerWithInfo.info.uuid);
+    try {
+      const accounts = await providerWithInfo.provider.request({
+        method: "eth_requestAccounts",
+      });
 
-    if (Array.isArray(accounts) && accounts.length > 0 && accounts[0]) {
+      if (Array.isArray(accounts) && accounts.length > 0 && typeof accounts[0] === "string") {
-      setAuth({providerWithInfo: providerWithInfo, accounts: accounts});
+        setAuth({ providerWithInfo, accounts });
+      } else {
+        setError("No accounts returned from wallet.");
+      }
+    } catch (err: any) {
+      console.error(err);
+      setError(err?.message ?? String(err));
+    } finally {
+      setLoadingUuid(null);
     }
   };
 
   return (
-    <>
+    <Box>
-      <h2>Wallets Detected:</h2>
+      <Typography variant="h6" gutterBottom>
-      <div>
+        Wallets Detected
-        {providers.length > 0 ? (
+      </Typography>
-          providers.map((provider) => {
+
-            return (
+      {error && (
-              <button key={provider.info.uuid} onClick={() => handleConnect(provider)}>
+        <Alert severity="error" sx={{ mb: 2 }}>
-                <img src={provider.info.icon} alt={provider.info.name} />
+          {error}
-                <div>{provider.info.name}</div>
+        </Alert>
-              </button>
+      )}
-            );
+
-          })
+      {providers.length === 0 ? (
+        <Alert severity="info">There are no announced providers.</Alert>
       ) : (
-          <div>There are no announced providers.</div>
+        <Grid container spacing={2}>
+          {providers.map((p) => (
+            <Grid size={{ xs: 12, sm: 6, md: 4 }} key={p.info.uuid}>
+              <Card variant="outlined">
+                <CardContent>
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <Avatar src={p.info.icon} alt={p.info.name} />
+                    <Box sx={{ flex: 1 }}>
+                      <Typography variant="subtitle1">{p.info.name}</Typography>
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="contained"
+                        onClick={() => handleConnect(p)}
+                        disabled={!!loadingUuid}
+                        startIcon={loadingUuid === p.info.uuid ? <CircularProgress size={18} /> : null}
+                        aria-label={`Connect to ${p.info.name}`}
+                      >
+                        {loadingUuid === p.info.uuid ? "Connecting" : "Connect"}
+                      </Button>
+                    </Box>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
       )}
-      </div>
+
-      <hr />
+      <Box sx={{ mt: 3 }}>
-      <h2>{auth.accounts.length > 0 ? 'Wallet Selected' : 'No Wallet Selected'}</h2>
+        <Typography variant="h6" gutterBottom>
-      {auth.accounts.length > 0 && (
+          {auth?.accounts?.length > 0 ? "Wallet Selected" : "No Wallet Selected"}
-        <div>
+        </Typography>
-          <img src={auth.providerWithInfo!.info.icon} alt={auth.providerWithInfo!.info.name} />
+
-          <div>{auth.providerWithInfo!.info.name}</div>
+        {auth?.accounts?.length > 0 && auth.providerWithInfo && (
-          <div>({auth.accounts[0]})</div>
+          <Card variant="outlined">
-        </div>
+            <CardContent>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Avatar src={auth.providerWithInfo.info.icon} alt={auth.providerWithInfo.info.name} />
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant="subtitle1">{auth.providerWithInfo.info.name}</Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    {shortAddress(auth.accounts[0])}
+                  </Typography>
+                </Box>
+                <Button
+                  variant="outlined"
+                  onClick={() => setAuth({ providerWithInfo: { ...auth.providerWithInfo }, accounts: [] })}
+                  aria-label="Disconnect wallet"
+                >
+                  Disconnect
+                </Button>
+              </Stack>
+            </CardContent>
+          </Card>
         )}
-    </>
+      </Box>
+    </Box>
   );
 };
+
+export default DiscoverWalletProviders;
+// ...existing code...

app/Components/Metamask/NewDiscover.tsx

@@ -1,126 +0,0 @@
-// ...existing code...
-import React, { useState } from "react";
-import { useSyncProviders } from "./useSyncProviders";
-import useAuth from "~/hooks/useAuth";
-import type { EIP6963ProviderDetail } from "./EthereumProviderTypes";
-import {
-  Box,
-  Grid,
-  Card,
-  CardContent,
-  Avatar,
-  Typography,
-  Button,
-  Stack,
-  CircularProgress,
-  Alert,
-} from "@mui/material";
-
-const shortAddress = (addr: string) =>
-  addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-6)}` : addr;
-
-export const DiscoverWalletProviders: React.FC = () => {
-  const providers = useSyncProviders();
-  const { auth, setAuth } = useAuth();
-  const [loadingUuid, setLoadingUuid] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleConnect = async (providerWithInfo: EIP6963ProviderDetail) => {
-    setError(null);
-    setLoadingUuid(providerWithInfo.info.uuid);
-    try {
-      const accounts = await providerWithInfo.provider.request({
-        method: "eth_requestAccounts",
-      });
-
-      if (Array.isArray(accounts) && accounts.length > 0 && typeof accounts[0] === "string") {
-        setAuth({ providerWithInfo, accounts });
-      } else {
-        setError("No accounts returned from wallet.");
-      }
-    } catch (err: any) {
-      console.error(err);
-      setError(err?.message ?? String(err));
-    } finally {
-      setLoadingUuid(null);
-    }
-  };
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        Wallets Detected
-      </Typography>
-
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-
-      {providers.length === 0 ? (
-        <Alert severity="info">There are no announced providers.</Alert>
-      ) : (
-        <Grid container spacing={2}>
-          {providers.map((p) => (
-            <Grid size={{ xs: 12, sm: 6, md: 4 }} key={p.info.uuid}>
-              <Card variant="outlined">
-                <CardContent>
-                  <Stack direction="row" spacing={2} alignItems="center">
-                    <Avatar src={p.info.icon} alt={p.info.name} />
-                    <Box sx={{ flex: 1 }}>
-                      <Typography variant="subtitle1">{p.info.name}</Typography>
-                    </Box>
-                    <Box>
-                      <Button
-                        variant="contained"
-                        onClick={() => handleConnect(p)}
-                        disabled={!!loadingUuid}
-                        startIcon={loadingUuid === p.info.uuid ? <CircularProgress size={18} /> : null}
-                        aria-label={`Connect to ${p.info.name}`}
-                      >
-                        {loadingUuid === p.info.uuid ? "Connecting" : "Connect"}
-                      </Button>
-                    </Box>
-                  </Stack>
-                </CardContent>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      )}
-
-      <Box sx={{ mt: 3 }}>
-        <Typography variant="h6" gutterBottom>
-          {auth?.accounts?.length > 0 ? "Wallet Selected" : "No Wallet Selected"}
-        </Typography>
-
-        {auth?.accounts?.length > 0 && auth.providerWithInfo && (
-          <Card variant="outlined">
-            <CardContent>
-              <Stack direction="row" spacing={2} alignItems="center">
-                <Avatar src={auth.providerWithInfo.info.icon} alt={auth.providerWithInfo.info.name} />
-                <Box sx={{ flex: 1 }}>
-                  <Typography variant="subtitle1">{auth.providerWithInfo.info.name}</Typography>
-                  <Typography variant="body2" color="text.secondary">
-                    {shortAddress(auth.accounts[0])}
-                  </Typography>
-                </Box>
-                <Button
-                  variant="outlined"
-                  onClick={() => setAuth({ providerWithInfo: { ...auth.providerWithInfo }, accounts: [] })}
-                  aria-label="Disconnect wallet"
-                >
-                  Disconnect
-                </Button>
-              </Stack>
-            </CardContent>
-          </Card>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-export default DiscoverWalletProviders;
-// ...existing code...

app/Components/ServerList.tsx

@@ -36,7 +36,6 @@ function NodeItem({node}: {node: Node}) {
     }
 
     const disconnect = ({ip}: {ip: string}) => {
-        // TODO check code
         setRatingOpen(true);
     }
 
@@ -51,12 +50,12 @@ function NodeItem({node}: {node: Node}) {
         }
         setSubmittingRating(true);
         try {
-            // await axios.post('http://' + node.ip + ":8080/rate", {
+            await axios.post('http://' + node.ip + ":8080/rate", {
-            //     rating: ratingValue,
+                rating: ratingValue,
-            // }, {
+            }, {
-            //     headers: { "Content-Type": "application/json" }
+                headers: { "Content-Type": "application/json" }
-            // });
+            });
-            // console.log('Rating submitted');
+            console.log('Rating submitted');
         } catch (err) {
             console.error('Failed to submit rating', err);
         } finally {

app/routes/home.tsx

@@ -3,8 +3,8 @@ import type { Route } from "./+types/home";
 
 export function meta({}: Route.MetaArgs) {
   return [
-    { title: "New React Router App" },
+    { title: "CLEARNET" },
-    { name: "description", content: "Welcome to React Router!" },
+    { name: "description", content: "Welcome to CLEARNET!" },
   ];
 }
 

app/routes/wallets.tsx

@@ -1,10 +1,8 @@
 import { DiscoverWalletProviders } from "~/Components/Metamask/DiscoverWalletProviders";
-import NewDiscover from "~/Components/Metamask/NewDiscover";
 
 
 export default function Wallets() {
   return(
-    // <DiscoverWalletProviders />
+    <DiscoverWalletProviders />
-    <NewDiscover />
   );
 }