Zotto SDK React 19


Welcome to the Zotto SDK React 19! This library provides a comprehensive set of DeFi components for building decentralized exchange interfaces with ease. Built specifically for the Neura blockchain ecosystem, it offers ready-to-use components for swapping, liquidity pools, position management, and more.

Table of Contents

- Installation
- Quick Start
- Components
- ZottoProvider
- ZottoDex
- ZottoSwap
- ZottoPools
- ZottoPoolView
- NewPositionPage
- CreatePoolForm
- Configuration
- Examples
- Development
- Troubleshooting
- Contributing
- License

Installation

Install the library using npm or yarn:

``bash
npm install zotto-canary-sdk-react19
`

or

`bash
yarn add zotto-canary-sdk-react19
`

Quick Start

Here's a minimal example to get you started:

`tsx
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { defineChain, http } from 'viem';
import { createConfig, WagmiProvider } from 'wagmi';
import { ZottoProvider, ZottoDex } from 'zotto-canary-sdk-react19';

// Create a QueryClient instance
const queryClient = new QueryClient();

// Define the Neura testnet chain
const neuraTestnet = defineChain({
id: 267,
name: 'Neura Testnet',
network: 'neura-testnet',
nativeCurrency: { name: 'ANKR', symbol: 'ANKR', decimals: 18 },
rpcUrls: {
default: {
http: ['https://testnet.rpc.neuraprotocol.io'],
},
},
blockExplorers: {
default: {
name: 'Neura Explorer',
url: 'https://testnet-blockscout.infra.neuraprotocol.io/',
},
},
testnet: true,
});

// Create Wagmi config
const wagmiConfig = createConfig({
chains: [neuraTestnet],
connectors: [], // Add your preferred connectors here
transports: {
[neuraTestnet.id]: http(),
},
});

function App() {
return (







);
}

export default App;
`

Components

$3

The ZottoProvider is the root component that provides context and configuration for all other Zotto components.

#### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| wagmiConfig | Config | Yes | Wagmi configuration object |
| queryClient | QueryClient | Yes | TanStack Query client instance |
| chain | "NEURA_TESTNET" | No | Specific chain configuration |
| toastPosition | ToastPosition | No | Custom positioning for toast notifications |
| children | ReactNode | Yes | Child components |

#### Usage

`tsx

{/ Your app components /}

`

#### Toast Positioning

Customize toast notification positioning:

`tsx
wagmiConfig={wagmiConfig}
queryClient={queryClient}
toastPosition={{
desktop: { bottom: 20, right: 20 },
mobile: { bottom: 10, left: 10, right: 10 }
}}
>
{/ Your components /}

`

$3

A complete DEX interface that includes swap functionality and pool management.

#### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| hideCreatePool | boolean | No | Hide the create pool functionality |
| tabsClassName | CSSProperties | No | Custom styling for tabs |

#### Usage

`tsx
// Full DEX with all features


// DEX without pool creation


// DEX with custom tab styling

`

$3

A standalone swap component for token exchanges.

#### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| showZottoPowered | boolean | No | true | Show "Powered by Zotto" branding |

#### Usage

`tsx
// Standard swap component


// Swap without branding

`

$3

A component for displaying and managing liquidity pools.

#### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| hideCreatePool | boolean | No | Hide pool creation functionality |
| onSelectPool | (poolId: Address) => void | No | Callback when a pool is selected |
| search | { onCreatePool: () => void } | No | Search configuration |
| pageSize | { desktop: number, mobile: number } | No | Custom page sizes for different screen sizes |

#### Usage

`tsx
// Basic pools component


// Pools with custom page sizes


// Pools with selection handler
onSelectPool={(poolId) => console.log('Selected pool:', poolId)}
search={{ onCreatePool: () => console.log('Create pool clicked') }}
/>
`

$3

A detailed view component for individual pools.

#### Usage

`tsx

`

$3

A component for creating new liquidity positions.

#### Usage

`tsx

`

$3

A form component for creating new liquidity pools.

#### Usage

`tsx

`

Configuration

$3

Currently, the SDK supports:

- Neura Testnet (Chain ID: 267)
- Native Currency: ANKR
- RPC: https://testnet.rpc.neuraprotocol.io
- Explorer: https://testnet-blockscout.infra.neuraprotocol.io/

$3

The SDK includes built-in support for:

- Stablecoins: ztUSD
- Popular Tokens: ETHn, tWETH, tUSDC, USN

Examples

$3

`tsx
import { ZottoProvider, ZottoSwap } from 'zotto-canary-sdk-react19';

function SwapApp() {
return (





);
}
`

$3

`tsx
import { ZottoProvider, ZottoPools } from 'zotto-canary-sdk-react19';

function PoolsApp() {
return (

pageSize={{ desktop: 15, mobile: 8 }}
onSelectPool={(poolId) => {
// Handle pool selection
console.log('Pool selected:', poolId);
}}
/>

);
}
`

$3

`tsx
import { ZottoProvider, ZottoDex } from 'zotto-canary-sdk-react19';

function DexApp() {
return (



);
}
`

Development

$3

- Node.js 18+
- npm or yarn
- React 19+

$3

1. Clone the repository:
`bash
git clone https://github.com/zk-automate/zotto-sdk.git
cd zotto-sdk
`

2. Install dependencies:
`bash
npm install
`

3. Start development server:
`bash
npm run dev
`

4. Build the library:
`bash
npm run build
`

5. Run Storybook:
`bash
npm run storybook
`

$3

- npm run dev - Start development server
- npm run build - Build the library
- npm run lint - Run ESLint
- npm run storybook - Start Storybook development server
- npm run build-storybook - Build Storybook for production

Troubleshooting

$3

1. Module not found errors: Ensure all peer dependencies are installed:
`bash
npm install @tanstack/react-query wagmi viem @apollo/client
`

2. React version conflicts: This SDK requires React 19. Check your package.json:
`json
{
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
}
}
`

3. Wagmi configuration issues: Make sure your Wagmi config includes the Neura testnet chain:
`tsx
const wagmiConfig = createConfig({
chains: [neuraTestnet],
transports: {
[neuraTestnet.id]: http(),
},
});
`

4. Apollo Client errors: Ensure you're using a compatible version:
`bash
npm install @apollo/client@^3.13.8
`

$3

- Check the issues for known problems
- Visit Zotto.io for additional documentation
- Join our community discussions

Contributing

We welcome contributions! Please read our contributing guidelines before submitting PRs.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

$3

- Follow the existing code style
- Add tests for new features
- Update documentation as needed
- Ensure all CI checks pass

License

This project is licensed under the MIT License.

---

Built with ❤️ by the Zotto team

For more information, visit Zotto.io