npm create vite@latest

cd <app_name>
npm i
npm run dev

npm i @nymproject/sdk-full-fat

import { createNymMixnetClient, NymMixnetClient, Payload } from "@nymproject/sdk-full-fat";

import "./App.css";
import { useEffect, useState } from "react";
import {
createNymMixnetClient,
NymMixnetClient,
Payload,
} from "@nymproject/sdk-full-fat";

const nymApiUrl = "https://validator.nymtech.net/api";

export function MixnetClient() {
const [nym, setNym] = useState<NymMixnetClient>();
const [selfAddress, setSelfAddress] = useState<string>();
const [recipient, setRecipient] = useState<string>();
const [payload, setPayload] = useState<Payload>();
const [receivedMessage, setReceivedMessage] = useState<string>();

const init = async () => {
const client = await createNymMixnetClient();
setNym(client);

// Start the client and connect to a gateway
await client?.client.start({
clientId: crypto.randomUUID(),
nymApiUrl,
forceTls: true, // force WSS
});

// Check when is connected and set the self address
client?.events.subscribeToConnected((e) => {
const { address } = e.args;
setSelfAddress(address);
});

// Show whether the client is ready or not
client?.events.subscribeToLoaded((e) => {
console.log("Client ready: ", e.args);
});

// Show message payload content when received
client?.events.subscribeToTextMessageReceivedEvent((e) => {
console.log(e.args.payload);
setReceivedMessage(e.args.payload);
});
};


const stop = async () => {
await nym?.client.stop();
};

const send = () => {
if (!nym || !payload || !recipient) return
nym.client.send({ payload, recipient });
}

useEffect(() => {
init();
return () => {
stop();
};
}, []);

if (!nym) return <div>Waiting for the mixnet client...</div>;

if (!selfAddress) return <div>Connecting...</div>;


return (
<div>
<h1>Send messages through the Nym mixnet</h1>
<p style={{ border: "1px solid black" }}>
My self address is: {selfAddress ? selfAddress : "loading"}
</p>
<div style={{ border: "1px solid black" }}>
<label>Recipient Address: </label>
<input
type="text"
onChange={(e) => setRecipient(e.target.value)}
></input>
<input
type="text"
onChange={(e) =>
setPayload({ message: e.target.value, mimeType: "text/plain" })
}
></input>
<button onClick={() => send()}>Send</button>
</div>
<p>Received message: {receivedMessage}</p>
</div>
);
};

export default function App () {
return (
<>
<MixnetClient/>
</>
)
}