diff --git a/sdk/typescript/docs/pages/guides/mix-fetch.mdx b/sdk/typescript/docs/pages/guides/mix-fetch.mdx
index 6cdeaae7c0..e6c9b448c0 100644
--- a/sdk/typescript/docs/pages/guides/mix-fetch.mdx
+++ b/sdk/typescript/docs/pages/guides/mix-fetch.mdx
@@ -1,30 +1,63 @@
+import { Callout } from 'nextra/components'
+
# `mixFetch`
An easy way to secure parts or all of your web app is to replace calls to [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) with `mixFetch`:
```
-npm install @nymproject/mix-fetch
+npm install @nymproject/mix-fetch-full-fat
```
-And then:
+Mixfetch works the same as vanilla `fetch` as it's a proxied wrapper around the original function:
+
+
+ Again, for this example, we will be using the `full-fat` version of the ESM SDK.
+
```ts
-import { mixFetch } from '@nymproject/mix-fetch';
+import { mixFetch } from '@nymproject/mix-fetch-full-fat';
+import React from 'react';
-...
+export function HttpGET() {
+ const [html, setHtml] = React.useState('')
+ async function get () {
+ const response = await mixFetch('https://nymtech.net')
+ const text = await response.text()
+ console.log('response was', text)
+ setHtml(html)
+ }
-// HTTP GET
-const response = await mixFetch('https://nymtech.net');
-const html = await response.text();
+ return (
+ <>
+
+
+ )
+}
-...
+export function HttpPOST() {
+ async function post () {
+ const apiResponse = await mixFetch('https://api.example.com', {
+ method: 'POST',
+ body: JSON.stringify({ foo: 'bar' }),
+ headers: { [`Content-Type`]: 'application/json', Authorization: `Bearer ${import.meta.env.VITE_AUTH_TOKEN}` }
+ })
+ console.log(apiResponse)
+ }
+ return (
+ <>
+
+
+ )
+}
-// HTTP POST
-const apiResponse = await mixFetch('https://api.example.com', {
- method: 'POST',
- body: JSON.stringify({ foo: 'bar' }),
- headers: { [`Content-Type`]: 'application/json', Authorization: `Bearer ${AUTH_TOKEN}` }
-});
+export default function App() {
+ return (
+ <>
+
+
+
+ )
+}
```
Sounds great, are there any catches? Well, there are a few (for now):
diff --git a/sdk/typescript/docs/pages/guides/mixnet.mdx b/sdk/typescript/docs/pages/guides/mixnet.mdx
index 4e3f6025ad..63f95b6581 100644
--- a/sdk/typescript/docs/pages/guides/mixnet.mdx
+++ b/sdk/typescript/docs/pages/guides/mixnet.mdx
@@ -10,6 +10,12 @@ 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
+##### Set-up your environment
+Create your directory and set-up your app environment:
+```bash
+npm create vite@latest
+```
+
##### Imports
Import the SDK's Mixnet Client as well as the payload in your app:
````js
@@ -32,7 +38,7 @@ import {
const nymApiUrl = "https://validator.nymtech.net/api";
-export const Traffic = () => {
+export default function Traffic() {
const [nym, setNym] = useState();
const [selfAddress, setSelfAddress] = useState();
const [recipient, setRecipient] = useState();
@@ -101,6 +107,4 @@ export const Traffic = () => {
);
};
-
-
```
diff --git a/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx b/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx
index b0fcbc472f..d31b017ff4 100644
--- a/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx
+++ b/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx
@@ -21,15 +21,16 @@ Lists of the diffent available clients and methods from the `Contract Clients` c
Depending on your app or project's architecture, this could be any of the ESM or CJS versions of the `Contract Clients`.
##### Set-up your environment
+
Create your directory and set-up your app environment:
-```
-npx create-react-app my-app
+```bash
+npm create vite@latest
```
##### Installation
Install the package and its dependencies from Cosmos Stargate:
-```
-npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing
+```bash
+npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing --save
```
## Query clients
@@ -40,53 +41,6 @@ import { contracts } from '@nymproject/contract-clients';
import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
````
-##### Polyfills
-
-You will need to install:
-
-`npm install --save url fs assert crypto-browserify stream-http https-browserify os-browserify buffer stream-browserify process react-app-rewired`
-
-and create a `config-overrides.js`file:
-```js
-const webpack = require('webpack');
-module.exports = function override(config, env) {
- config.resolve.fallback = {
- url: require.resolve('url'),
- fs: require.resolve('fs'),
- assert: require.resolve('assert'),
- crypto: require.resolve('crypto-browserify'),
- http: require.resolve('stream-http'),
- https: require.resolve('https-browserify'),
- os: require.resolve('os-browserify/browser'),
- buffer: require.resolve('buffer'),
- stream: require.resolve('stream-browserify'),
- };
- config.plugins.push(
- new webpack.ProvidePlugin({
- process: 'process/browser',
- Buffer: ['buffer', 'Buffer'],
- }),
- );
-
- return config;
-}
-```
-Update your `package.json` file:
-```json
-"scripts": {
- "start": "react-app-rewired start",
- "build": "react-app-rewired build",
- "test": "react-app-rewired test",
- "eject": "react-scripts eject" // don't change the eject
- },
- ```
-
-
-
-
-
-
-
##### Example: using the Mixnet smart contract client to query
In this example, we will use the `MixnetQueryClient`from the `Contract Clients` to simply query the contract and return a list of Mixnodes.
@@ -158,9 +112,9 @@ Note that for the `settings.ts` file, we have used the following structure:
export const mySettings = {
url: "wss://rpc.nymtech.net:443",
- mixnetContractAddress: ,
- mnemonic: ',
- address:
+ mixnetContractAddress: '',
+ mnemonic: '',
+ address: ''
};
export const settings = mySettings;
@@ -337,6 +291,4 @@ export default function Exec() {
);
}
-
```
-
diff --git a/sdk/typescript/docs/pages/installation.mdx b/sdk/typescript/docs/pages/installation.mdx
index 37b2a8883a..1ef32dc172 100644
--- a/sdk/typescript/docs/pages/installation.mdx
+++ b/sdk/typescript/docs/pages/installation.mdx
@@ -5,14 +5,14 @@ import { Callout } from 'nextra/components'
The Typescript SDK's different modules allow developers to start building browser-based applications quickly, by simply importing the SDK module of their choice - depending on the component from the Nym architecture they want to use - into their code via NPM as they would any other Typescript library.
- SDK modules come in four different flavours (ESM, CJS and full-fat for ESM and CJS).
- This documentation only shows instructions and examples for the unbundled ESM variant.
+ Other than the `Contract Clients`, SDK modules come in four different flavours (ESM, CJS and full-fat for ESM and CJS).
+ This documentation focuses on examples using the `full-fat` versions.
#### Install all
```
-npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @nymproject/sdk @nymproject/mix-fetch --save
+npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @nymproject/sdk-full-fat @nymproject/mix-fetch-full-fat --save
```
## Nym Smart Contracts
@@ -46,7 +46,7 @@ In order to send or receive traffic over the mixnet, you'll need to use the [`Mi
First install the package and its dependencies:
```
-npm install @nymproject/sdk --save
+npm install @nymproject/sdk-full-fat --save
```
## MixFetch
@@ -59,7 +59,7 @@ In order to fetch data through mixFetch you'll need to use the [`MixFetch packag
First install the package and its dependencies:
```
-npm install @nymproject/mix-fetch --save
+npm install @nymproject/mix-fetch-full-fat --save
```