@naviprotocol/swap

Internal swap wrapper with dapp-kit integration for NAVI Protocol projects.

Installation

pnpm add @naviprotocol/swap

Usage

Basic Usage with dapp-kit

import { SwapProviderWithDappKit, SwapCard } from '@naviprotocol/swap';
import { QueryClientProvider } from '@tanstack/react-query';
import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';

function SwapPage() {
  return (
    <QueryClientProvider client={queryClient}>
      <SuiClientProvider networks={networkConfig}>
        <WalletProvider>
          <SwapProviderWithDappKit
            config={{ apiHost: 'https://api.naviprotocol.io' }}
          >
            <SwapCard />
          </SwapProviderWithDappKit>
        </WalletProvider>
      </SuiClientProvider>
    </QueryClientProvider>
  );
}

Sidebar Usage

import { SwapSidebarClient } from '@naviprotocol/swap';

// Initialize
const client = SwapSidebarClient.getInstance({
  theme: 'dark',
  suiClient: suiClient,
  onSignTransaction: async (tx) => {
    // Sign transaction
    return { signature: '...', bytes: '...' };
  },
  config: { apiHost: 'https://api.naviprotocol.io' },
});

// Show sidebar
client.show('0x2::sui::SUI', '0x5d87c5447b476053c3fa1f8b0122c1b8b8e5c5c5', userAddress);

// Hide sidebar
client.hide();

Features

• Automatic dapp-kit integration
• Sidebar component for global swap panel
• Event-driven API
• Full swap functionality