Examples
2. Mixnet Client

Mixnet Client

As you know by now, in order to send or receive messages over the mixnet, you'll need to use the SDK Client (opens in a new tab), which will allow you to create apps that can use the Nym Mixnet and Coconut credentials.

This client is message based - it can only send a one-way message to another client's address.

Replying can be done in two ways:

  • reveal the sender's address to the recipient (as part of the payload)
  • use a SURB (single use reply block) that allows the recipient to reply to the sender without compromising the identity of either party
Imports

Import the SDK's Mixnet Client as well as the payload in your app:

import { createNymMixnetClient, NymMixnetClient, Payload } from "@nymproject/sdk-full-fat";
Example: using the SDK's Mixnet Client to send and receive messages over the Nym Mixnet
ℹ️

For this example, we will be using the full-fat version of the ESM SDK. If you'd like to use the unbundled ESM one, make sure your bundler configuration copies the WebAssembly (WASM) and web worker files to the output bundle.

import { useEffect, useState } from "react";
import {
  createNymMixnetClient,
  NymMixnetClient,
  Payload,
} from "@nymproject/sdk-full-fat";
 
const nymApiUrl = "https://validator.nymtech.net/api";
 
export const Traffic = () => {
  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 nym = await createNymMixnetClient();
    setNym(nym);
 
    // start the client and connect to a gateway
    await nym?.client.start({
      clientId: crypto.randomUUID(),
      nymApiUrl,
    });
 
    // check when is connected and set the self address
    nym?.events.subscribeToConnected((e) => {
      const { address } = e.args;
      setSelfAddress(address);
    });
 
    // show whether the client is ready or not
    nym?.events.subscribeToLoaded((e) => {
      console.log("Client ready: ", e.args);
    });
 
    // show message payload content when received
    nym?.events.subscribeToTextMessageReceivedEvent((e) => {
      console.log(e.args.payload);
      setReceivedMessage(e.args.payload);
    });
  };
 
  const send = () => nym.client.send({ payload, recipient });
 
  useEffect(() => {
    init();
  }, []);
 
  if (!nym) return <div>waiting for the mixnet client...</div>;
 
  if (!selfAddress) return <div>connecting...</div>;
 
  return (
    <div>
      <h1>Send messages through the 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>
  );
};
1. Nym Smart Contracts3. mixFetch