universal-vault-router-sdk

v1.0.0

Published

2 months ago

Universal Vault Router SDK - Intelligent vault routing and yield optimization for DeFi

0High
0Medium
0Low

lalitcap23

defi vault yield optimization ethereum sdk react typescript vaultpay universal-vault-router

Universal Vault Router SDK

Complete SDK + UI package for integrating VaultPay's Universal Vault Router into merchant applications. Get the exact same features and UI as VaultPay platform with intelligent vault routing, yield optimization, and automated rebalancing.

🚀 Features

Core SDK Features

Intelligent Vault Routing: Automatically find and switch to highest-yielding vaults
Auto-Deposit: Smart deposit with automatic vault selection
Auto-Rebalancing: Continuously optimize positions for maximum yield
Portfolio Management: Track and manage all vault positions
Quick Optimization: One-click yield optimization for existing positions
Real-time Analytics: Comprehensive earnings and performance tracking

Complete UI Dashboard

Drop-in Dashboard: Complete dashboard replacement identical to VaultPay
Individual Components: Use specific components (charts, positions, actions)
Full Theming System: Complete branding and white-label customization
Responsive Design: Works perfectly on desktop and mobile
Real-time Updates: Live data updates and status tracking

White-Label & Customization

Complete Branding: Your logo, colors, and domain
Theme System: 4 built-in themes + unlimited custom themes
Feature Toggles: Enable/disable specific features
Custom Styling: CSS customization and custom components

📦 Installation

npm install @vaultpay/universal-vault-router
# or
yarn add @vaultpay/universal-vault-router

🔧 Quick Start

1. Basic Setup

import { 
  UniversalVaultRouter, 
  VaultRouterProvider,
  VaultDashboard 
} from '@vaultpay/universal-vault-router';

// Initialize the router
const router = new UniversalVaultRouter({
  apiKey: 'your-api-key',
  network: 'mainnet',
  userAddress: '0x...'
});

// Wrap your app with the provider
function App() {
  return (
    <VaultRouterProvider 
      config={{
        apiKey: 'your-api-key',
        network: 'mainnet',
        userAddress: '0x...'
      }}
    >
      <VaultDashboard />
    </VaultRouterProvider>
  );
}

2. Complete Dashboard Replacement

Replace your entire vault interface with VaultPay's dashboard:

import { VaultDashboard } from '@vaultpay/universal-vault-router';

function MyVaultApp() {
  return (
    <div className="min-h-screen bg-gray-50">
      <VaultDashboard
        // Complete customization
        customization={{
          brandName: "Your DeFi Platform",
          logo: { url: "/your-logo.png" },
          hidePoweredBy: true,
          customTheme: {
            colors: {
              primary: "#your-brand-color"
            }
          }
        }}
        
        // Feature toggles
        enabledFeatures={{
          earningsChart: true,
          activePositions: true,
          quickActions: true,
          rebalanceOpportunities: true
        }}
      />
    </div>
  );
}

3. Individual Components

Use specific components for targeted functionality:

import { 
  EarningsChart,
  ActivePositions,
  QuickActions,
  useVaultRouter 
} from '@vaultpay/universal-vault-router';

function CustomDashboard() {
  const { router } = useVaultRouter();
  
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <EarningsChart router={router} />
      <ActivePositions router={router} />
      <QuickActions router={router} />
    </div>
  );
}

🎨 Theming & Branding

Built-in Themes

import { AVAILABLE_THEMES, VaultDashboard } from '@vaultpay/universal-vault-router';

<VaultDashboard
  theme={AVAILABLE_THEMES.dark} // or 'professional', 'crypto'
/>

Custom Theme

import { ThemeUtils, VaultDashboard } from '@vaultpay/universal-vault-router';

const customTheme = ThemeUtils.createBrandedTheme({
  primary: '#6366f1',
  secondary: '#8b5cf6',
  background: '#ffffff'
});

<VaultDashboard theme={customTheme} />

Complete White-Label

<VaultDashboard
  customization={{
    // Branding
    brandName: "YourDeFi",
    logo: { url: "/logo.png", width: 120 },
    
    // Hide VaultPay branding
    hidePoweredBy: true,
    hideVaultPayBranding: true,
    
    // Custom theme
    customTheme: {
      colors: {
        primary: "#your-color",
        background: "#your-bg"
      }
    },
    
    // Custom domain & endpoints
    customDomain: "vault.yourdomain.com",
    customApiEndpoint: "https://api.yourdomain.com",
    
    // Support & documentation
    supportEmail: "[email protected]",
    documentationUrl: "https://docs.yourdomain.com"
  }}
/>

🔌 SDK Usage

Smart Vault Operations

import { useAutoDeposit, useBestVault } from '@vaultpay/universal-vault-router';

function SmartDeposit() {
  const { autoDeposit, depositing } = useAutoDeposit(router);
  const { bestVault } = useBestVault(router, 'USDC', '1000', 'balanced');
  
  const handleDeposit = async () => {
    const result = await autoDeposit('USDC', '1000', {
      strategy: 'balanced',
      autoRebalance: true
    });
    console.log('Deposited to:', result.vault.name);
  };
  
  return (
    <div>
      <p>Best vault: {bestVault?.name} ({bestVault?.apy.toFixed(2)}% APY)</p>
      <button onClick={handleDeposit} disabled={depositing}>
        {depositing ? 'Depositing...' : 'Smart Deposit'}
      </button>
    </div>
  );
}

Portfolio Management

import { useVaultPortfolio, useRebalanceOpportunities } from '@vaultpay/universal-vault-router';

function Portfolio() {
  const { portfolio, loading } = useVaultPortfolio(router);
  const { opportunities } = useRebalanceOpportunities(router);
  
  if (loading) return <div>Loading portfolio...</div>;
  
  return (
    <div>
      <h2>Your Portfolio</h2>
      <p>Total Value: {portfolio?.totalValue}</p>
      <p>Total Earnings: {portfolio?.totalEarnings}</p>
      <p>Average APY: {portfolio?.averageApy.toFixed(2)}%</p>
      
      {opportunities.length > 0 && (
        <div>
          <h3>Rebalance Opportunities</h3>
          <p>{opportunities.length} ways to increase yield</p>
        </div>
      )}
    </div>
  );
}

Auto-Rebalancing

import { useAutoRebalance } from '@vaultpay/universal-vault-router';

function AutoRebalanceControl() {
  const { enabled, enableAutoRebalance, disableAutoRebalance } = useAutoRebalance(router);
  
  const handleToggle = async () => {
    if (enabled) {
      await disableAutoRebalance();
    } else {
      await enableAutoRebalance({
        frequency: 'weekly',
        minYieldDifference: 0.5 // 0.5% minimum improvement
      });
    }
  };
  
  return (
    <button onClick={handleToggle}>
      {enabled ? 'Disable' : 'Enable'} Auto-Rebalance
    </button>
  );
}

📊 Available Components

Dashboard Components

VaultDashboard: Complete dashboard replacement
EarningsChart: Interactive earnings chart with multiple timeframes
ActivePositions: Portfolio positions management
QuickActions: Fast deposit, optimize, and rebalance actions
RebalanceOpportunities: Real-time yield optimization suggestions

Utility Components

ConnectionStatus: Router connection status indicator
LoadingWrapper: Loading states for async operations
VaultRouterErrorBoundary: Error handling wrapper

🎣 Available Hooks

Data Hooks

useVaultPortfolio: Portfolio data and positions
useYieldData: Yield and earnings data
useVaultOptions: Available vault options for a token
useBestVault: Best vault recommendation
useRebalanceOpportunities: Rebalance suggestions
useVaultAnalytics: Performance analytics

Action Hooks

useAutoDeposit: Smart deposit functionality
useAutoRebalance: Auto-rebalancing control
useQuickActions: Quick optimization actions

⚙️ Configuration

Router Configuration

interface UniversalVaultRouterConfig {
  apiKey: string;
  network: 'mainnet' | 'sepolia' | 'arbitrum' | 'polygon';
  userAddress?: string;
  rpcUrl?: string;
  enableAnalytics?: boolean;
  enableNotifications?: boolean;
  defaultStrategy?: 'conservative' | 'balanced' | 'aggressive';
}

Theme Configuration

interface VaultRouterTheme {
  name: string;
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    text: string;
    success: string;
    warning: string;
    error: string;
    // ... more colors
  };
  fonts: {
    primary: string;
    mono: string;
    sizes: { xs: string; sm: string; base: string; /* ... */ };
    weights: { normal: number; medium: number; /* ... */ };
  };
  // ... spacing, borderRadius, shadows, breakpoints
}

🏗️ Architecture

Pattern 1: Complete Dashboard Replacement