Files
nym/documentation/docs/components/mixnodes.tsx
T

81 lines
2.4 KiB
TypeScript

import React, { useState } from 'react';
import { contracts } from '@nymproject/contract-clients';
import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import { TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import { settings } from './client';
const getClient = async () => {
const cosmWasmClient = await SigningCosmWasmClient.connect(settings.url);
const client = new contracts.Mixnet.MixnetQueryClient(cosmWasmClient, settings.mixnetContractAddress);
return client;
};
export const Mixnodes = () => {
const [mixnodes, setMixnodes] = useState<any>();
const [busy, setBusy] = useState<boolean>(false);
const getMixnodes = async () => {
setBusy(true);
const client = await getClient();
const { nodes } = await client.getMixNodesDetailed({});
setMixnodes(nodes);
setBusy(false);
};
if (busy) {
return (
<Box pt={4}>
<Stack direction="row" spacing={2} alignItems="center">
<CircularProgress />
<Typography>Loading...</Typography>
</Stack>
</Box>
);
}
if (!mixnodes) {
return (
<Box pt={4}>
<Button variant="outlined" onClick={getMixnodes}>
Query for mixnodes
</Button>
</Box>
);
}
return (
<Box pt={4}>
{mixnodes?.length && (
<Table size="small">
<TableHead>
<TableRow>
<TableCell>MixId</TableCell>
<TableCell>Owner Account</TableCell>
<TableCell>Layer</TableCell>
<TableCell>Bonded at Block Height</TableCell>
</TableRow>
</TableHead>
<TableBody>
{mixnodes.map((mixnode: any) => (
<TableRow key={mixnode.bond_information.mix_id}>
<TableCell>{mixnode.bond_information.mix_id}</TableCell>
<TableCell>{mixnode.bond_information.owner}</TableCell>
<TableCell>{mixnode.bond_information.layer}</TableCell>
<TableCell>{mixnode.bond_information.bonding_height}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</Box>
);
};