Merge pull request #4118 from nymtech/feature/ts-sdk-fixes

Feature/ts sdk fixes

sdk/typescript/docs/code-examples/mixfetch-example-code.mdx

@@ -8,16 +8,21 @@ import Box from '@mui/material/Box';
 import { mixFetch } from '@nymproject/mix-fetch-full-fat';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
+import type { SetupMixFetchOps } from '@nymproject/mix-fetch';
 
 const defaultUrl = 'https://nymtech.net/favicon.svg';
 const args = { mode: 'unsafe-ignore-cors' };
-const mixFetchOptions = {
-  preferredGateway: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM',
+
+
+const mixFetchOptions: SetupMixFetchOps = {
+  preferredGateway: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM', // with WSS
   preferredNetworkRequester:
     'GiRjFWrMxt58pEMuusm4yT3RxoMD1MMPrR9M2N4VWRJP.3CNZBPq4vg7v7qozjGjdPMXcvDmkbWPCgbGCjQVw9n6Z@2xU4CBE6QiiYt6EyBXSALwxkNvM7gqJfjHXaMkjiFmYW',
   mixFetchOverride: {
     requestTimeoutMs: 60_000,
   },
+  forceTls: true, // force WSS
+  extra: {},
 };
 
 export const MixFetch = () => {
@@ -77,4 +82,5 @@ export const MixFetch = () => {
     </div>
   );
 };
+
 ```

sdk/typescript/docs/code-examples/traffic-example-code.mdx

@@ -25,6 +25,7 @@ export const Traffic = () => {
     await client?.client.start({
       clientId: crypto.randomUUID(),
       nymApiUrl,
+      forceTls: true, // force WSS
     });
 
     client?.events.subscribeToConnected((e) => {

sdk/typescript/docs/pages/examples/mix-fetch.mdx

@@ -29,18 +29,6 @@ Read [this article](https://blog.nymtech.net/mixfetch-like-the-fetch-api-but-via
 // For mainnet
 import type { SetupMixFetchOps } from '@nymproject/mix-fetch';
 
-const extra = {
-  hiddenGateways: [
-    {
-      owner: 'n1kymvkx6vsq7pvn6hfurkpg06h3j4gxj4em7tlg',
-      host: 'gateway1.nymtech.net',
-      explicitIp: '213.219.38.119',
-      identityKey: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM',
-      sphinxKey: 'CYcrjoJ8GT7Dp54zViUyyRUfegeRCyPifWQZHRgMZrfX',
-    },
-  ],
-};
-
 const mixFetchOptions: SetupMixFetchOps = {
   preferredGateway: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM', // with WSS
   preferredNetworkRequester:
@@ -49,7 +37,7 @@ const mixFetchOptions: SetupMixFetchOps = {
     requestTimeoutMs: 60_000,
   },
   forceTls: true, // force WSS
-  extra, // manually set the gateway details for WSS so certificates will work for hostname
+  extra: {}, 
 };
 ```
 
@@ -84,10 +72,6 @@ import { mixFetch } from "@nymproject/mix-fetch-full-fat";
 
 ##### Example: using the `mixFetch` client:
 
-<Callout type="info" emoji="ℹ️">
-    Again, for this example, we will be using the `full-fat` version of the ESM SDK. 
-</Callout>
-
 `Get` and `Post` outputs will be observable from your console. 
 
 ```ts
@@ -95,18 +79,6 @@ import "./App.css";
 import { mixFetch, SetupMixFetchOps } from '@nymproject/mix-fetch-full-fat';
 import React from 'react';
 
-const extra = {
-  hiddenGateways: [
-    {
-      owner: 'n1kymvkx6vsq7pvn6hfurkpg06h3j4gxj4em7tlg',
-      host: 'gateway1.nymtech.net',
-      explicitIp: '213.219.38.119',
-      identityKey: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM',
-      sphinxKey: 'CYcrjoJ8GT7Dp54zViUyyRUfegeRCyPifWQZHRgMZrfX',
-    },
-  ],
-};
-
 const mixFetchOptions: SetupMixFetchOps = {
   preferredGateway: 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM', // with WSS
   preferredNetworkRequester:
@@ -115,7 +87,7 @@ const mixFetchOptions: SetupMixFetchOps = {
     requestTimeoutMs: 60_000,
   },
   forceTls: true, // force WSS
-  extra
+  extra: {},
 };
 
 

sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx

@@ -9,7 +9,7 @@ Lists of the different available clients and methods from the `Contract Clients`
 | Client name             | Functionality| Methods list |
 | :-------------:         | :----------: | :----------: |
 | Coconut Bandwidth Client| Manages the depositing and release of funds. Tracks double spending.             | [Coconut Bandwidth](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/CoconutBandwidth.client.ts) |
-| Coconut DKG Client      | Allows signers partcipating in issuing Coconut credentials to derive keys to be used.             | [Coconut DKG](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/CoconutDkg.client.ts) |
+| Coconut DKG Client      | Allows signers participating in issuing Coconut credentials to derive keys to be used.             | [Coconut DKG](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/CoconutDkg.client.ts) |
 | Cw3FlexMultisig Client  | Used by the Coconut APIs to issue credentials. [This](https://github.com/CosmWasm/cw-plus/tree/main/contracts/cw3-flex-multisig) is a multisig contract that is backed by the cw4 (group) contract, which independently maintains the voter set.             | [Cw3Flex Multisig](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/Cw3FlexMultisig.client.ts) |
 | Cw4Group Client         | Used by the Coconut APIs to issue credentials. [Cw4 Group](https://github.com/CosmWasm/cw-plus/tree/main/contracts/cw4-group) stores a set of members along with an admin, and allows the admin to update the state.              | [Cw4Group](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/Cw4Group.client.ts) |
 | Mixnet Client           | Manages the network topology of the mixnet, tracking delegations and rewards.           | [Mixnet](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/Mixnet.client.ts) |
@@ -18,11 +18,6 @@ Lists of the different available clients and methods from the `Contract Clients`
 | Vesting Client          |     Manages NYM token vesting functionality.         | [Vesting](https://github.com/nymtech/nym/blob/develop/sdk/typescript/codegen/contract-clients/src/Vesting.client.ts) |
 
 
-Depending on your app or project's architecture, this could be any of the ESM or CJS versions of the `Contract Clients`.
-<Callout type="info" emoji="ℹ️">
-    This and the following examples will use the ESbuild bundler.
-    If you'd like to use another one, we will document different bundlers and polyfills in the [bundling](https://sdk.nymtech.net/bundling) page.
-</Callout>
 
 ##### Environment Setup
 Begin by creating a directory and configuring your application environment:

sdk/typescript/docs/pages/playground/traffic.mdx

@@ -4,9 +4,6 @@ import { Traffic } from '../../components/traffic';
 import Box from '@mui/material/Box';
 import FormattedTrafficExampleCode from '../../code-examples/traffic-example-code.mdx';
 
-<Callout type="info" emoji="⚠️">
-    Currently, due to SSL-related issues, the mixnet client is functional exclusively in local development environments. Unless you clone this repository or create your own build, you may encounter limitations when attempting to test this example.
-</Callout>
 
 Use this tool to experiment with the mixnet: send and receive messages!