Fix examples code

2023-09-19 14:00:11 +02:00
parent 7d3e2f9870
commit 611a945a3b
4 changed files with 67 additions and 78 deletions
@@ -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:
+
+<Callout type="info" emoji="ℹ️">
+    Again, for this example, we will be using the `full-fat` version of the ESM SDK.
+</Callout>

 ```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 (
+    <>
+      <button onClick={() => { get() }}>Get</button>
+    </>
+  )
+}

-...
+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 (
+    <>
+      <button onClick={() => { post() }}>Post</button>
+    </>
+  )
+}

-// 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 (
+    <>
+    <HttpGET/>
+    <HttpPOST/>
+    </>
+  )
+}
 ```

 Sounds great, are there any catches? Well, there are a few (for now):
@@ -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<NymMixnetClient>();
  const [selfAddress, setSelfAddress] = useState<string>();
  const [recipient, setRecipient] = useState<string>();
@@ -101,6 +107,4 @@ export const Traffic = () => {
    </div>
  );
 };
-
-
 ```
@@ -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: <ENTER MIXNET CONTACT ADDRESS HERE>,
-    mnemonic: '<ENTER MNEMONIC HERE>,
-    address: <ENTER NYM ADDRESS HERE>
+    mixnetContractAddress: '<ENTER MIXNET CONTACT ADDRESS HERE>',
+    mnemonic: '<ENTER MNEMONIC HERE>',
+    address: '<ENTER NYM ADDRESS HERE>'
 };

 export const settings = mySettings;
@@ -337,6 +291,4 @@ export default function Exec() {
    </div>
  );
 }
-
 ```
-
@@ -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.

 <Callout type="info" emoji="ℹ️">
-    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.
 </Callout>

 #### 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
 ```