<img src="https://miro.medium.com/v2/resize:fit:1400/1*zAHOnqm67c_gAPFeK9_uwg.jpeg" />Building real privacy into your applications just got a lot easier with the latest version of the <a href="https://sdk.nymtech.net/" rel="noopener noreferrer nofollow">Nym TypeScript SDK</a>.<h2 id="header-0">TypeScript SDK for in-browser webapps</h2>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: <a href="https://medium.com/&#64;nymspanish/ahora-es-muy-f%C3%A1cil-desarrollar-aplicaciones-web-con-nym-0786e499bb37" rel="noopener noreferrer nofollow">Español</a> // <a href="https://medium.com/&#64;nym_ru/%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D1%82%D1%8C-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D0%B1%D0%B0%D0%B7%D0%B5-nym-%D1%81%D1%82%D0%B0%D0%BB%D0%BE-%D0%BD%D0%B5%D0%B2%D0%B5%D1%80%D0%BE%D1%8F%D1%82%D0%BD%D0%BE-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE-bbae089f4d47" rel="noopener noreferrer nofollow">Русский</a> // <a href="https://medium.com/&#64;NYM_Indonesia/menjadi-sangat-mudah-untuk-mengembangkan-aplikasi-web-yang-didukung-nym-4eaa86f7a800" rel="noopener noreferrer nofollow">Bahasa Indonesia</a> // <a href="https://note.com/koko_crypto/n/nd565c9b7706d" rel="noopener noreferrer nofollow">日本</a>In a nutshell, individuals using the SDK will be able to perform the following entirely in-browser:<ul><li>Query and execute methods on the smart contracts that run the Nym mixnet</li></ul>The <a href="https://blog.nymtech.net/nym-is-not-a-blockchain-but-it-is-powered-by-one-4bb16ef16587" rel="noopener noreferrer nofollow">Nyx blockchain</a> 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 <a href="https://nymtech.net/docs/nyx/smart-contracts.html" rel="noopener noreferrer nofollow">Nym Mixnet smart contract clients</a>, builders will be able to query contract states or execute methods when providing a signing key.<ul><li>Send and receive traffic over the Nym mixnet</li></ul>The <a href="https://nymtech.net/docs/architecture/network-overview.html" rel="noopener noreferrer nofollow">Nym mixnet</a> 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 <a href="https://cypherpunks.ca/~iang/pubs/Sphinx_Oakland09.pdf" rel="noopener noreferrer nofollow">Sphinx packet</a> traffic so that it cannot be determined who is communicating with whom.<ul><li>Use mixFetch — it’s just like the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="noopener noreferrer nofollow">fetch</a> API, but via the mixnet</li></ul>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 <a href="https://nymtech.net/developers/quickstart/socks-proxy.html" rel="noopener noreferrer nofollow">SOCKS5</a> <a href="https://nymtech.net/docs/nodes/network-requester.html" rel="noopener noreferrer nofollow">Network Requester</a>.<ul><li>Use CosmosKit to run Cosmos-based components via Nym infrastructure</li><li>Create and spend <a href="https://nymtech.net/about/zk-nyms" rel="noopener noreferrer nofollow">zk-nyms</a> — the anonymous credentials system based on the <a href="https://nymtech.net/docs/coconut.html" rel="noopener noreferrer nofollow">Coconut</a> cryptographic signature scheme.</li></ul>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.<h2 id="header-1">SDK and package variant overview</h2>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 <a href="https://sdk.nymtech.net/overview" rel="noopener noreferrer nofollow">this page</a> along with specific details regarding each.<h2 id="header-2">Great! What do I need for an out-of-the-box, quick start?</h2>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 <a href="https://vitejs.dev/" rel="noopener noreferrer nofollow">Vite</a> 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 <a href="https://sdk.nymtech.net/bundling/webpack" rel="noopener noreferrer nofollow">here</a>.<h2 id="header-3">Step-by-step tutorials</h2>You can find step-by-step tutorials in the <a href="https://sdk.nymtech.net/examples/mix-fetch" rel="noopener noreferrer nofollow">“Examples” section</a>, which are basic guides for how to use each SDK client in isolated environments.<h2 id="header-4">Example: sending traffic over the Nym mixnet using the TypeScript SDK</h2>To send or receive messages over the mixnet, you’ll need to use the <a href="https://www.npmjs.com/package/&#64;nymproject/sdk" rel="noopener noreferrer nofollow">SDK Client</a>, which will allow you to create apps that can use the Nym mixnet and zk-nyms credentials.More details about the clients can be <a href="https://sdk.nymtech.net/guides/mixnet" rel="noopener noreferrer nofollow">found here</a>.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 <a href="https://sdk.nymtech.net/playground/mixfetch" rel="noopener noreferrer nofollow">developer live playground</a> specifically tailored for Nym’s documentation environment, using Nextra.Environment set-upCreate, cd into your directory and set up your environment:npm create vite&#64;latestSelect ‘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 &lt;app_name&gt;npm i npm run devInstallationInstall all the required packages:npm i &#64;nymproject/sdk-full-fatImportsImport from the module:import { createNymMixnetClient, NymMixnetClient, Payload } from &#34;&#64;nymproject/sdk-full-fat&#34;;Build your appBy pasting the below example code, you should be able to send and receive messages through the mixnet with an unstyled mixnet app template.import &#34;./App.css&#34;;import { useEffect, useState } from &#34;react&#34;;import { createNymMixnetClient, NymMixnetClient, Payload,} from &#34;&#64;nymproject/sdk-full-fat&#34;; const nymApiUrl &#61; &#34;https://validator.nymtech.net/api&#34;; export function MixnetClient() { const [nym, setNym] &#61; useState&lt;NymMixnetClient&gt;(); const [selfAddress, setSelfAddress] &#61; useState&lt;string&gt;(); const [recipient, setRecipient] &#61; useState&lt;string&gt;(); const [payload, setPayload] &#61; useState&lt;Payload&gt;(); const [receivedMessage, setReceivedMessage] &#61; useState&lt;string&gt;(); const init &#61; async () &#61;&gt; { const client &#61; 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) &#61;&gt; { const { address } &#61; e.args; setSelfAddress(address); }); // Show whether the client is ready or not client?.events.subscribeToLoaded((e) &#61;&gt; { console.log(&#34;Client ready: &#34;, e.args); }); // Show message payload content when received client?.events.subscribeToTextMessageReceivedEvent((e) &#61;&gt; { console.log(e.args.payload); setReceivedMessage(e.args.payload); }); }; const stop &#61; async () &#61;&gt; { await nym?.client.stop(); }; const send &#61; () &#61;&gt; { if (!nym || !payload || !recipient) return nym.client.send({ payload, recipient }); } useEffect(() &#61;&gt; { init(); return () &#61;&gt; { stop(); }; }, []); if (!nym) return &lt;div&gt;Waiting for the mixnet client...&lt;/div&gt;; if (!selfAddress) return &lt;div&gt;Connecting...&lt;/div&gt;; return ( &lt;div&gt; &lt;h1&gt;Send messages through the Nym mixnet&lt;/h1&gt; &lt;p style&#61;{{ border: &#34;1px solid black&#34; }}&gt; My self address is: {selfAddress ? selfAddress : &#34;loading&#34;} &lt;/p&gt; &lt;div style&#61;{{ border: &#34;1px solid black&#34; }}&gt; &lt;label&gt;Recipient Address: &lt;/label&gt; &lt;input type&#61;&#34;text&#34; onChange&#61;{(e) &#61;&gt; setRecipient(e.target.value)} &gt;&lt;/input&gt; &lt;input type&#61;&#34;text&#34; onChange&#61;{(e) &#61;&gt; setPayload({ message: e.target.value, mimeType: &#34;text/plain&#34; }) } &gt;&lt;/input&gt; &lt;button onClick&#61;{() &#61;&gt; send()}&gt;Send&lt;/button&gt; &lt;/div&gt; &lt;p&gt;Received message: {receivedMessage}&lt;/p&gt; &lt;/div&gt; );}; export default function App () { return ( &lt;&gt; &lt;MixnetClient/&gt; &lt;/&gt; )}And that’s it — there you have it!As part of <a href="https://blog.nymtech.net/nym-shipyard-level-3-unlocks-today-with-chelsea-mannings-masterclass-eee6eaf90bc0" rel="noopener noreferrer nofollow">Nym Shipyard Level 3</a>, 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’ —<a href="https://github.com/nymtech/nym/issues/new?title&#61;Feedback&#43;for&#43;%E2%80%9CWelcome&#43;to&#43;the&#43;TS&#43;SDK&#43;FAQ%21%E2%80%9D&amp;labels&#61;feedback" rel="noopener noreferrer nofollow"> and do share your feedback via Github</a>, social media, and community channels.Join the Nym Community<a href="https://discord.com/invite/nym" rel="noopener noreferrer nofollow">Discord</a> //<a href="https://t.me/nymtech" rel="noopener noreferrer nofollow"> Telegram</a> //<a href="https://matrix.to/#/%23dev:nymtech.chat" rel="noopener noreferrer nofollow"> Element</a> //<a href="https://twitter.com/nymproject" rel="noopener noreferrer nofollow"> Twitter</a>Privacy loves company<a href="https://t.me/nymchan" rel="noopener noreferrer nofollow">English</a> //<a href="https://t.me/nymchina" rel="noopener noreferrer nofollow"> 中文</a> //<a href="https://t.me/NYM_Russian" rel="noopener noreferrer nofollow"> Русский</a> //<a href="https://t.me/NYM_turkey" rel="noopener noreferrer nofollow"> Türkçe</a> //<a href="https://t.me/nymtechvn" rel="noopener noreferrer nofollow"> Tiếng Việt</a> //<a href="https://t.me/nymjapanese" rel="noopener noreferrer nofollow"> 日本</a> //<a href="https://t.me/nymfrench" rel="noopener noreferrer nofollow"> Française</a> //<a href="https://t.me/NYMSPANISH" rel="noopener noreferrer nofollow"> Español</a> //<a href="https://t.me/nymportuguese" rel="noopener noreferrer nofollow"> Português</a> // <a href="https://t.me/nymkorea" rel="noopener noreferrer nofollow">한국인</a>

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

Table of Contents

NymProject

Other articles published on Nov 14, 2023

Shiba Inu (SHIB) Price Prediction: Can it Hit $0.00001 This Week?

Shiba Inu Holders Warned as Exciting SHIB Developments Unfold

Cryptocurrency Exchange Faces Money Laundering Investigation

Cryptocurrency Accounting Jobs - Building Careers in Web3

Three Main Crypto Whale Attractions – Microsoft AI Discovers Why: Binance (BNB), Everlodge (ELDG)...

BlackRock’s XRP ETF Filing, Everything You Need To Know

Join our free newsletter for daily crypto updates!