$ show sushi-labs/sushiswap
SushiSwap 2.0 is a multi-chain decentralized exchange (DEX) frontend built as a monorepo (pnpm, Turborepo) with Next.js App Router, React, and a shared UI library. It provides swap (simple, limit, DCA, TWAP), cross-chain swap (via LI.FI and Near Intents), perpetual futures (Hyperliquid-based), liquidity pools (V2/V3/Blade/Steer vaults), a token launchpad, staking (xSUSHI), and a developer portal (Zitadel auth, team management, API keys). The codebase supports EVM, SVM (Solana), Stellar, and Aptos chains, with namespace-aware wallet providers (Wagmi, Privy, Stellar Wallets Kit) and unified data fetching via TanStack Query and a custom GraphQL client. The architecture is heavily componentized, with reusable patterns like the Checker system (guards for connect/network/amounts), Provider composition (balance, price, trade state), and a design system in packages/ui. Testing includes Vitest unit tests and Playwright e2e with Anvil forks. The repo is actively maintained but carries moderate technical drift due to multi-chain duplication, hardcoded external API endpoints, and deprecated features (Blade pools, Arbitrum Nova minimization).
The LLM identified 5 files worth highlighting for reuse:
Implements a reusable 'Checker' component that gates child rendering based on wallet connection state. It accepts a onCheck callback and conditionally renders the children only when the wallet is connected. This pattern is used throughout the app for Connect, Network, Amounts, and custom checks, and can be extracted as a standalone UI guard component for any web3 application.
A Checker variant that validates the user has sufficient balance of a specific token and amount before enabling the child action. It combines wallet connection check, network check, and balance comparison into a single composable guard. This pattern is reusable for any DeFi application requiring spend limits.
A generic pagination helper for subgraph GraphQL queries that automatically handles cursor-based pagination (using id_gt). It accepts a query and variables, fetches all pages until fewer than max results are returned, and merges them. This utility is framework-agnostic and can be reused in any TypeScript project that queries subgraphs or other GraphQL APIs with pagination.
A feature-rich data table component built on TanStack Table with built-in virtual scrolling, pagination, sorting, column visibility, and responsive mobile card views. It supports custom cell renderers, toolbar actions, and skeleton loading. This component is self-contained (imports only from packages/ui) and can be extracted for any React project needing a high-performance data table.
A React context provider that manages token balances across EVM, SVM, and Stellar chains with a unified interface. It uses TanStack Query for caching, supports per-chain balance fetching, and provides hooks like useBalance, useBalances, useRefetchBalances. The provider is designed to be lazy-loaded and can be reused in any multi-chain dApp.