```ts copy filename="MixnodeContractQueryExample.ts"
import { useEffect, useState } from "react";
import { contracts } from "@nymproject/contract-clients";
import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
import { settings } from "./client";
import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";

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 getMixnodes = async () => {
    const client = await getClient();
    const { nodes } = await client.getMixNodesDetailed({});
    setMixnodes(nodes);
  };

  useEffect(() => {
    getMixnodes();
  }, []);

  if (!mixnodes) {
    return (
      <Box sx={{ display: "flex" }}>
        <CircularProgress />
      </Box>
    );
  }

  return (
    <div style={{ marginTop: "1rem" }}>
      {mixnodes?.length &&
        mixnodes.map((mixnode: any) => (
          <Box className="codeBox" key={mixnode.bond_information.mix_id}>
            <span
              style={{ marginRight: "1rem" }}
            >{`id: ${mixnode.bond_information.mix_id}`}</span>
            <span>{`owner: ${mixnode.bond_information.owner}`}</span>
          </Box>
        ))}
    </div>
  );
};
```