Integration Guides
Integrate Quub in Any Stack
Comprehensive guides for integrating Quub DeFi platform into your application. From simple wallet connections to advanced protocol integrations.
Quick Start Guides
Get started with Quub in your preferred framework
React Integration
Connect your React app to Quub with hooks and components. Includes wallet connection, transaction handling, and state management.
Next.js Integration
Build server-rendered DeFi apps with Next.js. Server-side data fetching, API routes, and optimized performance.
Vue.js Integration
Integrate Quub into Vue 3 apps with Composition API. Reactive state management and composables for DeFi.
Node.js Integration
Build backend services with Node.js. REST APIs, webhooks, automated trading bots, and scheduled jobs.
Python Integration
Integrate Quub with Python for data analysis, trading algorithms, and automated strategies using pandas and numpy.
Mobile Integration
Build native mobile DeFi apps with React Native, Flutter, or Swift. WalletConnect integration included.
Use Case Guides
Step-by-step guides for common integration scenarios
Wallet Connection
Connect multiple wallet providers to your app
Implement wallet connection with MetaMask, WalletConnect, Coinbase Wallet, and more. Handle multiple chains and account switching.
Token Swap Interface
Build a DEX-style swap interface
Create a token swap UI with price quotes, slippage protection, and transaction confirmation. Includes routing optimization.
Portfolio Tracker
Display user balances and analytics
Build a portfolio dashboard showing token balances, historical performance, and P&L. Real-time updates with WebSocket.
Staking Platform
Full-featured staking interface
Create a staking platform with deposit/withdraw flows, reward calculations, and APY display. Includes smart contract integration.
NFT Marketplace
Build a complete NFT trading platform
Full NFT marketplace with listing, bidding, and buying functionality. IPFS integration for metadata and image storage.
Common Patterns
Best practices and design patterns for Quub integration
Optimistic Updates
Update UI immediately while transactions confirm in background. Provide instant feedback for better UX.
WebSocket Real-time
Subscribe to real-time price updates, transaction status, and blockchain events using WebSocket connections.
Caching Strategy
Implement efficient caching to reduce API calls and improve performance. Use Redis or in-memory cache.
Error Handling
Robust error handling for network failures, rejected transactions, and rate limits. Retry logic and fallbacks.
Multi-chain Support
Handle multiple blockchain networks seamlessly. Switch between chains and manage network-specific logic.
Data Aggregation
Aggregate data from multiple sources and APIs. Build comprehensive dashboards with historical analytics.
Quick Code Examples
Copy and paste code snippets to get started fast
Connect Wallet (React)
import { useQuub, useWallet } from '@quub/react';
function WalletButton() {
const { connect, disconnect, address } = useWallet();
return (
<button onClick={address ? disconnect : connect}>
{address ? `Disconnect ${address}` : "Connect Wallet"}
</button>
);
}Fetch Portfolio (Node.js)
const QuubSDK = require('@quub/node');
const quub = new QuubSDK({ apiKey: process.env.QUUB_API_KEY });
async function getPortfolio(address) {
const portfolio = await quub.portfolio.get(address);
return portfolio;
}Start Integrating Quub
Follow our step-by-step guides to integrate Quub DeFi platform into your application. Get help from our community if you need it.