mixFetch

ℹ️

Right now Gateways are not required to run a Secure Websocket (WSS) listener, so only a subset of nodes running in Gateway mode have configured their nodes to do so.

For the moment you have to select a Gateway that has WSS enabled from this list (opens in a new tab).

You can also find WSS-enabled nodes by querying the gateways/described endpoint on the Nym API and filtering for wss_port, either via the Swagger webpage (opens in a new tab) or with curl:

curl -X 'GET' \
'https://validator.nymtech.net/api/v1/gateways/described' \
-H 'accept: application/json'

URL

mixFetchExample.tsx

import React, { useState } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
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: SetupMixFetchOps = {
  preferredGateway: '6Gb7ftQdKveMjPyrxDXeAtfYAX7Zg5mVZHtnRC5MmZ1B', // with WSS
  preferredNetworkRequester:
    '8rRGWy54oC8drFL9DepMegBt2DLrsqQwCoHMXt9nsnTo.2XjCPVbb4FpQ9hNRcXwb9mTzEAVVk1zf1tcch3wdtNEA@6Gb7ftQdKveMjPyrxDXeAtfYAX7Zg5mVZHtnRC5MmZ1B',
  mixFetchOverride: {
    requestTimeoutMs: 60_000,
  },
  forceTls: true, // force WSS
  extra: {},
};
 
export const MixFetch = () => {
  const [url, setUrl] = useState<string>(defaultUrl);
  const [html, setHtml] = useState<string>();
  const [busy, setBusy] = useState<boolean>(false);
 
  const handleFetch = async () => {
    try {
      setBusy(true);
      setHtml(undefined);
      const response = await mixFetch(url, args, mixFetchOptions);
      console.log(response);
      const resHtml = await response.text();
      setHtml(resHtml);
    } catch (err) {
      console.log(err);
    } finally {
      setBusy(false);
    }
  };
 
  return (
    <div style={{ marginTop: '1rem' }}>
      <Stack direction="row">
        <TextField
          disabled={busy}
          fullWidth
          label="URL"
          type="text"
          variant="outlined"
          defaultValue={defaultUrl}
          onChange={(e) => setUrl(e.target.value)}
        />
        <Button variant="outlined" disabled={busy} sx={{ marginLeft: '1rem' }} onClick={handleFetch}>
          Fetch
        </Button>
      </Stack>
 
      {busy && (
        <Box mt={4}>
          <CircularProgress />
        </Box>
      )}
      {html && (
        <>
          <Box mt={4}>
            <strong>Response</strong>
          </Box>
          <Paper sx={{ p: 2, mt: 1 }} elevation={4}>
            <Typography fontFamily="monospace" fontSize="small">
              {html}
            </Typography>
          </Paper>
        </>
      )}
    </div>
  );
};

4. Cosmos Kit 2. Send traffic over the mixnet