From 611a945a3bcffca00a4311c6e5a94ca762d9b33d Mon Sep 17 00:00:00 2001 From: Lorexia Date: Tue, 19 Sep 2023 14:00:11 +0200 Subject: [PATCH] Fix examples code --- .../docs/pages/guides/mix-fetch.mdx | 61 ++++++++++++++---- sdk/typescript/docs/pages/guides/mixnet.mdx | 10 ++- .../docs/pages/guides/nym-smart-contracts.mdx | 64 +++---------------- sdk/typescript/docs/pages/installation.mdx | 10 +-- 4 files changed, 67 insertions(+), 78 deletions(-) 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 ```