SDK & Integration

CK App is built with the LI.FI SDK for cross-chain swap and bridge aggregation.

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router) + TypeScript
Styling	Tailwind CSS 4
Web3	wagmi v2 + viem + RainbowKit
Aggregation	LI.FI SDK
State	Zustand + TanStack Query

Integration Guide

1. Install Dependencies

npm install @lifi/sdk @lifi/types wagmi viem @tanstack/react-query

2. Configure LI.FI

import { createConfig, EVM } from '@lifi/sdk';

createConfig({
  integrator: 'your-app-name', // Register at li.fi
  providers: [EVM()],          // Required for balance fetching
});

3. Fetch a Quote

import { getQuote } from '@lifi/sdk';

const quote = await getQuote({
  fromChain: 1,
  toChain: 1,
  fromToken: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
  toToken: '0x0000000000000000000000000000000000000000',       // ETH
  fromAmount: '1000000000', // 1000 USDC (6 decimals)
  fromAddress: walletAddress,
});

4. Execute the Transaction

// The quote includes ready-to-sign transaction data
const tx = quote.transactionRequest;

const hash = await sendTransactionAsync({
  to: tx.to,
  data: tx.data,
  value: tx.value ? BigInt(tx.value) : undefined,
  gas: tx.gasLimit ? BigInt(tx.gasLimit) : undefined,
});

Key Concepts

Quote vs Route

Quote (getQuote) — Single best route with transactionRequest included. Best for simple swap/bridge.
Routes (getRoutes) — Multiple route options for user selection. Use when you want to show alternatives.

Supported Protocols

Through LI.FI, CK App accesses:

DEXs: Uniswap, SushiSwap, Curve, Balancer, PancakeSwap, TraderJoe, 1inch, 0x, and more

Bridges: Stargate, Hop, Across, Connext, Celer, Multichain, Optimism Bridge, Arbitrum Bridge, and more

Error Handling

try {
  const quote = await getQuote(params);
  if (!quote.transactionRequest) {
    // No route found — show error to user
  }
} catch (error) {
  // API error — network issue, invalid params, etc.
}

React Hooks Pattern

CK App wraps LI.FI calls in TanStack Query hooks for caching and auto-refresh:

import { useQuery } from '@tanstack/react-query';
import { getQuote } from '@lifi/sdk';

export function useQuote(params) {
  return useQuery({
    queryKey: ['quote', params],
    queryFn: () => getQuote(params),
    staleTime: 20_000,        // Quotes refresh every 20s
    refetchInterval: 30_000,  // Auto-refetch for live rates
  });
}

Source Code

CK App is open source. See the repository structure:

src/
├── lib/lifi/client.ts    — LI.FI SDK wrapper functions
├── hooks/                — React hooks for chains, tokens, quotes, balances
├── components/ui/        — Token selector, chain selector, transaction modal
├── app/swap/             — Swap page
├── app/bridge/           — Bridge page
└── app/wallet/           — Wallet management

SDK & Integration

On this page