DOCSEARCHbyAlgolia
Submit Docs

Uniswap Interface

repository·main·Indexed 26 days ago

https://github.com/uniswap/interface

Public front-end interfaces for Uniswap Labs, including the Web App, Mobile Wallet, and Browser Extension. This repository serves as the consumer-facing layer for the Uniswap decentralized exchange protocol, providing documentation for local development, E2E testing with Playwright, and mobile environment configuration for iOS and Android.

Tokens
74.2K
Snippets
132
Records
582
Agent score
87%

What's inside uniswap-interface

  1. Overview of Telemetry and Trace components

    main

    The project uses Amplitude as the logging library, primarily implemented via the Trace component.

    • Automatic Impressions: All screens in the navigation stack automatically log impressions via onStateChange because a <Trace> element is pre-configured for them.
    • Manual Trace Requirements: Components that are not part of the high-level navigation stack—such as Modals, Banners, or specific tabs like the NFT Tab or Tokens Tab—require explicit <Trace> elements to log impressions.

  3. Overview of Swap Transaction Components

    main
    The packages/uniswap/src/features/transactions/swap/components directory serves as the centralized repository for reusable UI components, React hooks, and utilities used in swap transaction flows. This architecture ensures consistency across web, mobile, and browser extension platforms by providing a single source of truth for swap-related logic and presentation.

  4. Overview of Uniswap Shared Packages

    main
    The uniswap/interface repository contains several shared packages designed to be used across different Uniswap applications. These packages are categorized by their functional scope: cross-functional features, UI components, wallet logic, data fetching, and general utilities.

  5. Overview of @universe/cryptography

    main
    The @universe/cryptography package provides centralized, security-approved cryptography primitives, utilities, and helpers. It is designed to ensure that all clients use consistent, safe implementations of algorithms (such as Random Number Generators and hash functions) approved by the Uniswap Security team. It also abstracts environment-specific implementations (e.g., webcrypto vs nodecrypto) so that consuming packages do not need to manage environment detection.

  6. Use @universe/config for shared configuration management

    main

    The @universe/config package provides a standardized way to manage configuration across the Uniswap monorepo (web, mobile, and extension).

    It provides:

    • BaseConfigValues and BaseConfigSchema: Shared configuration fields such as API keys, feature flags, and URL overrides used by all applications.
    • parseConfig(): A function that validates configuration values against a Zod schema and automatically extends the base configuration with app-specific fields.
    • Common Zod schemas: Reusable validation schemas like boolFromString, boolIfDefined, boolFromOne, and optionalString.

    To implement configuration in a new app, create a config.ts file that defines your app-specific fields and calls parseConfig() to merge them with the base configuration.

  7. Understand the repository directory structure

    main

    The repository is organized into three main top-level directories:

    • apps/: Contains the source code for each standalone application.
    • config/: Contains shared infrastructure packages and configurations.
    • packages/: Contains shared code packages for UI, shared functionality, and shared utilities.

  8. Use @universe/config-cli to manage application configurations

    main
    @universe/config-cli is a command-line interface used to authenticate against Okta and fetch application configurations from the backend Config Service. It is designed to replace manual management of .env files, 1Password vaults, and various secret managers by centralizing configuration sourcing.

  10. Use @universe/encoding for byte and base64 conversions

    main
    @universe/encoding provides centralized utilities for converting between bytes, base64, and base64url. Use this package instead of hand-rolling btoa/atob wrappers to ensure consistent handling of padding edge cases across your application.

  11. Features of the iOS Build Interactive Tool

    main

    The tool provides an interactive interface for the following build tasks:

    • Target Selection: Choose between simulator or physical device builds.
    • Configuration Selection: Select between Debug or Release configurations.
    • Scheme Selection: Pick from available app schemes such as Uniswap, Dev, Beta, or Production.
    • Auto-detection: Automatically detects available simulators and connected devices.
    • Metro Management: Handles the Metro bundler.
    • Maintenance: Provides options for cleaning builds and resetting caches.

  12. Identify runtime environment and platform with @universe/environment

    main

    The @universe/environment package is used to detect the current runtime environment (e.g., dev, staging, production, unit test, E2E test) and the current platform (e.g., web, mobile, extension, iOS, Android).

    Platform Detection

    Platform constants are exported as boolean values that are evaluated once at module load. They are not functions. The package uses platform-split files (.web.ts and .native.ts) to ensure bundlers only include the relevant implementation for the target platform.

    Environment Detection

    Environment helpers wrap configuration fields with platform-specific logic. For example, when running in a Chrome extension, environment checks may involve Chrome runtime IDs, whereas on the web, they rely on getConfig().nodeEnv from the @universe/config package.