added logo
This commit is contained in:
parent
595050d6df
commit
eb8acd263e
@ -1,50 +1,126 @@
|
||||
import { useState, type SetStateAction } from 'react';
|
||||
import { useSyncProviders } from './useSyncProviders';
|
||||
import useAuth from '~/hooks/useAuth';
|
||||
// code from https://metamask.io/news/how-to-implement-eip-6963-support-in-your-web3-dapp
|
||||
// ...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";
|
||||
|
||||
import type {
|
||||
EIP6963ProviderDetail
|
||||
} from "./EthereumProviderTypes";
|
||||
const shortAddress = (addr: string) =>
|
||||
addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-6)}` : addr;
|
||||
|
||||
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]) {
|
||||
setAuth({providerWithInfo: providerWithInfo, accounts: accounts});
|
||||
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 (
|
||||
<>
|
||||
<h2>Wallets Detected:</h2>
|
||||
<div>
|
||||
{providers.length > 0 ? (
|
||||
providers.map((provider) => {
|
||||
return (
|
||||
<button key={provider.info.uuid} onClick={() => handleConnect(provider)}>
|
||||
<img src={provider.info.icon} alt={provider.info.name} />
|
||||
<div>{provider.info.name}</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div>There are no announced providers.</div>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
<h2>{auth.accounts.length > 0 ? 'Wallet Selected' : 'No Wallet Selected'}</h2>
|
||||
{auth.accounts.length > 0 && (
|
||||
<div>
|
||||
<img src={auth.providerWithInfo!.info.icon} alt={auth.providerWithInfo!.info.name} />
|
||||
<div>{auth.providerWithInfo!.info.name}</div>
|
||||
<div>({auth.accounts[0]})</div>
|
||||
</div>
|
||||
<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...
|
||||
@ -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...
|
||||
@ -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", {
|
||||
// rating: ratingValue,
|
||||
// }, {
|
||||
// headers: { "Content-Type": "application/json" }
|
||||
// });
|
||||
// console.log('Rating submitted');
|
||||
await axios.post('http://' + node.ip + ":8080/rate", {
|
||||
rating: ratingValue,
|
||||
}, {
|
||||
headers: { "Content-Type": "application/json" }
|
||||
});
|
||||
console.log('Rating submitted');
|
||||
} catch (err) {
|
||||
console.error('Failed to submit rating', err);
|
||||
} finally {
|
||||
|
||||
@ -3,8 +3,8 @@ import type { Route } from "./+types/home";
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: "New React Router App" },
|
||||
{ name: "description", content: "Welcome to React Router!" },
|
||||
{ title: "CLEARNET" },
|
||||
{ name: "description", content: "Welcome to CLEARNET!" },
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import { DiscoverWalletProviders } from "~/Components/Metamask/DiscoverWalletProviders";
|
||||
import NewDiscover from "~/Components/Metamask/NewDiscover";
|
||||
|
||||
|
||||
export default function Wallets() {
|
||||
return(
|
||||
// <DiscoverWalletProviders />
|
||||
<NewDiscover />
|
||||
<DiscoverWalletProviders />
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in New Issue
Block a user