update mixfetch example

2023-09-30 23:28:58 +02:00
parent d569bf6b09
commit 502acd5b20
2 changed files with 111 additions and 63 deletions
@@ -4,70 +4,7 @@ import { Callout } from 'nextra/components'

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

-##### Set-up your environment
-Create your directory and set-up your app environment:
-```bash
-npm create vite@latest
-```
-
-##### Installation
-Install the required package:
-```bash
-npm install @nymproject/mix-fetch-full-fat
-```
-
 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-full-fat';
-import React from 'react';
-
-export function HttpGET() {
-  const [html, setHtml] = React.useState<string>('')
-    async function get () {
-      const response = await mixFetch('https://nymtech.net')
-      const text = await response.text()
-      console.log('response was', text)
-      setHtml(html)
-    }
-
-  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>
-    </>
-  )
-}
-
-export default function App() {
-  return (
-    <>
-    <HttpGET/>
-    <HttpPOST/>
-    </>
-  )
-}
-```
-
 Sounds great, are there any catches? Well, there are a few (for now):

 1. Currently, the operators of Network Requesters that make the final request at the egress part of the Nym Mixnet to
@@ -117,3 +54,111 @@ const mixFetchOptions: SetupMixFetchOps = {
  extra, // manually set the gateway details for WSS so certificates will work for hostname
 };
 ```
+
+##### Set-up your environment
+
+Create your directory and set-up your app environment:
+```bash
+npm create vite@latest
+```
+Select `React` and later `Typescript` as you go to your environment set-up if you want your app to work off the bat following this tutorial. 
+Then, 
+```bash
+cd <app_name>
+npm i 
+npm run dev
+```
+
+##### Installation
+Install the required package:
+```bash
+npm install @nymproject/mix-fetch-full-fat
+```
+
+##### Imports
+In the `src` folder, open the `App.tsx` file and delete all the code.
+
+Import the client in your app:
+````js
+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>
+
+```ts
+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:
+    'GiRjFWrMxt58pEMuusm4yT3RxoMD1MMPrR9M2N4VWRJP.3CNZBPq4vg7v7qozjGjdPMXcvDmkbWPCgbGCjQVw9n6Z@2xU4CBE6QiiYt6EyBXSALwxkNvM7gqJfjHXaMkjiFmYW',
+  mixFetchOverride: {
+    requestTimeoutMs: 60_000,
+  },
+  forceTls: true, // force WSS
+  extra
+};
+
+
+export function HttpGET() {
+  const [html, setHtml] = React.useState('')
+    async function get () {
+      const response = await mixFetch('https://nymtech.net', { mode: 'unsafe-ignore-cors' }, mixFetchOptions)
+      const text = await response.text()
+      console.log('response was', text)
+      setHtml(html)
+    }
+
+  return (
+    <>
+      <button onClick={() => { get() }}>Get</button>
+    </>
+  )
+}
+
+export function HttpPOST() {
+    async function post () {
+      const apiResponse = await mixFetch('https://api.example.com', {
+        method: 'POST',
+        mode: 'unsafe-ignore-cors',
+        body: JSON.stringify({ foo: 'bar' }),
+        headers: { [`Content-Type`]: 'application/json', Authorization: `Bearer ${process.env.AUTH_TOKEN}` }
+      }, mixFetchOptions)
+      console.log(apiResponse)
+    }
+  return (
+    <>
+      <button onClick={() => { post() }}>Post</button>
+    </>
+  )
+}
+
+export default function App() {
+  return (
+    <>
+    <HttpGET/>
+    <HttpPOST/>
+    </>
+  )
+}
+
+```
+
@@ -39,6 +39,7 @@ import { createNymMixnetClient, NymMixnetClient, Payload } from "@nymproject/sdk
 ````

 ##### Example: using the SDK's Mixnet Client to send and receive messages over the Nym Mixnet
+By pasting the below code example, you should be able to send and receive messages through the mixnet through an unstyled mixnet app template!
 <Callout type="info" emoji="ℹ️">
    For this example, we will be using the `full-fat` version of the ESM SDK. If you'd like to use the unbundled ESM one, make sure your [bundler configuration](../../bundling) copies the WebAssembly (WASM) and web worker files to the output bundle.
 </Callout>
@@ -125,3 +126,5 @@ export default function Traffic() {
  );
 };
 ```
+
+