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:

npm install zotto-canary-sdk-react19

or

yarn add zotto-canary-sdk-react19

Quick Start

Here's a minimal example to get you started:

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 (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ZottoProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
          <ZottoDex />
        </ZottoProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

Components

ZottoProvider

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

<ZottoProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
  {/* Your app components */}
</ZottoProvider>

Toast Positioning

Customize toast notification positioning:

<ZottoProvider 
  wagmiConfig={wagmiConfig} 
  queryClient={queryClient}
  toastPosition={{
    desktop: { bottom: 20, right: 20 },
    mobile: { bottom: 10, left: 10, right: 10 }
  }}
>
  {/* Your components */}
</ZottoProvider>

ZottoDex

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

// Full DEX with all features
<ZottoDex />

// DEX without pool creation
<ZottoDex hideCreatePool />

// DEX with custom tab styling
<ZottoDex tabsClassName={{ backgroundColor: '#1a1a1a' }} />

ZottoSwap

A standalone swap component for token exchanges.

Props

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

Usage

// Standard swap component
<ZottoSwap />

// Swap without branding
<ZottoSwap showZottoPowered={false} />

ZottoPools

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

// Basic pools component
<ZottoPools />

// Pools with custom page sizes
<ZottoPools pageSize={{ desktop: 20, mobile: 10 }} />

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

ZottoPoolView

A detailed view component for individual pools.

Usage

<ZottoPoolView poolId="0x..." />

NewPositionPage

A component for creating new liquidity positions.

Usage

<NewPositionPage />

CreatePoolForm

A form component for creating new liquidity pools.

Usage

<CreatePoolForm />

Configuration

Supported Networks

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/

Supported Tokens

The SDK includes built-in support for:

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

Examples

Basic Swap Interface

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

function SwapApp() {
  return (
    <ZottoProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
      <div style={{ maxWidth: '480px', margin: '0 auto', padding: '20px' }}>
        <ZottoSwap />
      </div>
    </ZottoProvider>
  );
}

Pool Management Interface

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

function PoolsApp() {
  return (
    <ZottoProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
      <ZottoPools 
        pageSize={{ desktop: 15, mobile: 8 }}
        onSelectPool={(poolId) => {
          // Handle pool selection
          console.log('Pool selected:', poolId);
        }}
      />
    </ZottoProvider>
  );
}

Complete DEX Application

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

function DexApp() {
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#0f0f0f' }}>
      <ZottoProvider 
        wagmiConfig={wagmiConfig} 
        queryClient={queryClient}
        toastPosition={{
          desktop: { top: 20, right: 20 },
          mobile: { bottom: 20, left: 10, right: 10 }
        }}
      >
        <ZottoDex />
      </ZottoProvider>
    </div>
  );
}

Development

Prerequisites

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

Setup

1. Clone the repository:

git clone https://github.com/zk-automate/zotto-sdk.git
cd zotto-sdk

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build the library:

npm run build

5. Run Storybook:

npm run storybook

Scripts

• 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

Common Issues

1. Module not found errors: Ensure all peer dependencies are installed:

   npm install @tanstack/react-query wagmi viem @apollo/client

2. React version conflicts: This SDK requires React 19. Check your package.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:

   const wagmiConfig = createConfig({
     chains: [neuraTestnet],
     transports: {
       [neuraTestnet.id]: http(),
     },
   });

4. Apollo Client errors: Ensure you're using a compatible version:

   npm install @apollo/client@^3.13.8

Getting Help

• 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

Development Guidelines

• 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