import { Callout } from 'nextra/components'
import { TableContainer, Table, TableBody, TableCell, TableRow, Paper } from '@mui/material'
import { NPMLink } from '../../../components/npm';

## SDK overview
The Typescript SDK allows developers to start building browser-based Nym-based applications quickly, by simply importing the SDK modules into their code via NPM as they would any other Typescript library.

Currently developers can use different packages from the Typescript SDK to run the following entirely in browser:

<TableContainer component={Paper}>
    <Table>
        <TableBody>
            <TableRow>
                <TableCell>
                **Nym Smart Contracts**
                </TableCell>
                <TableCell>
                Create a simple query or query and execute methods on the smart contracts that run the Nym Mixnet
                </TableCell>
                <TableCell>
                    <NPMLink packageName={'@nymproject/contract-clients'} kind={'esm'}/>
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell>
                    **Mixnet Client**
                </TableCell>
                <TableCell>
                    Send & receive text and binary traffic over the Nym Mixnet
                </TableCell>
                <TableCell>
                    <NPMLink packageName={'@nymproject/sdk'} kind={'esm'}/><br/>
                    <NPMLink packageName={'@nymproject/sdk-full-fat'} kind={'esm'} preBundled/><br/>
                    <NPMLink packageName={'@nymproject/sdk-commonjs'} kind={'cjs'}/><br/>
                    <NPMLink packageName={'@nymproject/sdk-full-fat-commonjs'} kind={'cjs'} preBundled/>
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell>
                    **mixFetch**
                </TableCell>
                <TableCell>
                    A drop-in replacement for [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
                    that sends HTTP requests over the Nym Mixnet
                </TableCell>
                <TableCell>
                    <NPMLink packageName={'@nymproject/mix-fetch'} kind={'esm'}/><br/>
                    <NPMLink packageName={'@nymproject/mix-fetch-full-fat'} kind={'esm'} preBundled/><br/>
                    <NPMLink packageName={'@nymproject/mix-fetch-commonjs'} kind={'cjs'}/><br/>
                    <NPMLink packageName={'@nymproject/mix-fetch-full-fat-commonjs'} kind={'cjs'} preBundled/>
                </TableCell>
            </TableRow>
        </TableBody>
    </Table>
</TableContainer>

## Which package should I use?

All packages come in four different variations:
- **ESM**: For new projects with current tooling. These packages use the ECMAScript Modules (ESM) system. You may need to [configure your bundler](./bundling/bundling) to handle the packages WASM and web worker components;
- **ESM full-fat**: These ESM packages are pre-bundled and include inline WebAssembly and web worker code;
- **CommonJS**: For older projects that still use CommonJS. All WebAssembly (WASM) and web workers in the package need to be [bundled](./bundling/bundling) to work correctly;
- **CommonJS full-fat**: These packages are already pre-bundled and should work in your project without additional configuration;

<Callout type="warning" emoji="🥛">
    All `*-full-fat` variants have large bundle sizes because they include all WASM and web-workers as inline Base64 strings. If you care about your app's bundle size, then use the ESM variant.
</Callout>

<Callout type="info" emoji="⚠️">
  As the Typescript SDK and associated modules are still a work in progress, note that the inline WASM and web worker versions are likely to have issues if the web site / app / extension has a strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
</Callout>
