It’s just become insanely easy to develop Nym-powered webapps

Latest Nym TypeScript SDK launches, bringing unprecedented traffic pattern protection to ordinary app developers

Building real privacy into your applications just got a lot easier with the latest version of the Nym TypeScript SDK.

TypeScript SDK for in-browser webapps

Aimed at any builders, library maintainers, operators or privacy enthusiasts, the TypeScript SDK allows projects to leverage the Nym stack into their own infrastructure — such as the mixnet, contract client, mixFetch, or zk-nym anonymous credentials.

Languages: Español // Русский // Bahasa Indonesia // 日本

In a nutshell, individuals using the SDK will be able to perform the following entirely in-browser:

• Query and execute methods on the smart contracts that run the Nym mixnet

The Nyx blockchain is a general-purpose CosmWasm-enabled smart contract platform, and the home of the smart contracts which keep track of the Nym mixnet, amongst others.

Using the Nym Mixnet smart contract clients, builders will be able to query contract states or execute methods when providing a signing key.

• Send and receive traffic over the Nym mixnet

The Nym mixnet provides very strong security guarantees against network-level surveillance. It wraps into packets and mixes together IP traffic from many users inside the mixnet. It encrypts and mixes Sphinx packet traffic so that it cannot be determined who is communicating with whom.

• Use mixFetch — it’s just like the fetch API, but via the mixnet

MixFetch is a drop-in replacement for the fetch API, used to send HTTP requests over the Nym mixnet. It does this by grabbing the same arguments as ‘vanilla’ fetch, then constructing a SOCKS5 request which is made to the destination host on the internet via a SOCKS5 Network Requester.

• Use CosmosKit to run Cosmos-based components via Nym infrastructure
• Create and spend zk-nyms — the anonymous credentials system based on the Coconut cryptographic signature scheme.

This is currently a work in progress, and will soon be added and documented. It lets application programmers concerned with resource access control to think and code in a new way. And most importantly, zk-nyms allows builders to be paid anonymously.

SDK and package variant overview

While the Nym smart contracts only come in the ESM version, the mixnet client and mixFetch are both available in four variants: ESM, CommonJS, unbundled, and pre-bundled (full-fat).

You can find a detailed description of the type of package you should use on this page along with specific details regarding each.

Great! What do I need for an out-of-the-box, quick start?

The SDK is still a work in progress and the documentation will evolve in the weeks to come.

However, at this stage, builders are recommended to use Vite as a bundler, in order to use the full-fat versions of the different clients.

Documentation on other bundlers, such as Webpack, can be found here.

Step-by-step tutorials

You can find step-by-step tutorials in the “Examples” section, which are basic guides for how to use each SDK client in isolated environments.

Example: sending traffic over the Nym mixnet using the TypeScript SDK

To send or receive messages over the mixnet, you’ll need to use the SDK Client, which will allow you to create apps that can use the Nym mixnet and zk-nyms credentials.

More details about the clients can be found here.

Below is a tutorial for creating a raw version of a basic messaging application to send traffic over the Nym mixnet using Vite, TS and React.

Alternatively, you can test this app directly in the developer live playground specifically tailored for Nym’s documentation environment, using Nextra.

Environment set-up

Create, cd into your directory and set up your environment:

npm create vite@latest

Select ‘React’ and later ‘TypeScript’ as you go to your environment setup if you want your app to work off the bat following this tutorial.

Then run:

cd \(app\_name)\
npm i\
npm run dev

Installation

Install all the required packages:

npm i @nymproject/sdk-full-fat

Imports

Import from the module:

Build your app

By pasting the below example code, you should be able to send and receive messages through the mixnet with an unstyled mixnet app template.

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/)
(/)
)
}

And that’s it — there you have it!

---

As part of Nym Shipyard Level 3, participants on the Developer track will be taking place in a hackathon using the TypeScript SDK.

Developers: please experiment with the SDK! See which of your applications you can ‘Nymify’ — and do share your feedback via Github, social media, and community channels.

Join the Nym Community

Discord // Telegram // Element // Twitter

Privacy loves company

English // 中文 // Русский // Türkçe // Tiếng Việt // 日本 // Française // Español // Português // 한국인