@dexpal-analytics/pair-screener

Pure UI components for displaying and filtering DeFi perpetual trading pairs. Built with TypeScript, TanStack Table, and Tailwind CSS.

⚠️ This is a pure UI library with NO data fetching. For a plug-and-play solution with Apollo Client integration, use @dexpal-analytics/pair-screener-apollo.

Features

• 🎯 Two View Modes: Individual pairs table or grouped assets view
• 🔍 Advanced Filtering: Filter by exchange, network, asset type, and search
• 📱 Responsive Design: Mobile and desktop layouts
• 🎨 Customizable: Built on @dexpal-analytics/ui component library
• ⚡ High Performance: Optimized rendering and pagination
• 📦 TypeScript: Full type safety
• 🚀 Framework Agnostic: Works with any React setup
• 🪶 Zero Dependencies: No Apollo, GraphQL, or Next.js required

Installation

npm install @dexpal-analytics/pair-screener @dexpal-analytics/ui
# or
yarn add @dexpal-analytics/pair-screener @dexpal-analytics/ui

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@tanstack/react-table": "^8.15.0",
  "lucide-react": ">=0.300.0"
}

Usage

Basic Usage (Controlled)

You provide the data and loading state:

import { PairScreener } from '@dexpal-analytics/pair-screener';

function App() {
  const { data, loading, error } = useFetchPairs(); // Your data fetching logic

  return <PairScreener data={data} isLoading={loading} error={error} />;
}

With Context

Use your own context for data management:

import { PairScreener } from '@dexpal-analytics/pair-screener';
import { useMyDataContext } from './my-context';

function PairScreenerPage() {
  return <PairScreener useDexpalContext={useMyDataContext} />;
}

Pre-filter by Exchange

<PairScreener
  data={data}
  isLoading={loading}
  dex="Hyperliquid" // Pre-select specific exchange
/>

Standalone Components

Use individual table components directly:

import { IndividualPairsTable, GroupedAssetsTable } from '@dexpal-analytics/pair-screener';

<IndividualPairsTable
  data={filteredPairs}
  originalData={allPairs}
  isLoading={false}
  pageIndex={0}
  setPageIndex={setPage}
  sorting={sorting}
  setSorting={setSorting}
/>;

API Reference

PairScreener Props

| Prop | Type | Default | Description | | --------------------- | ------------------- | ----------- | ------------------------------------------- | | data | DexPair[] | undefined | Array of trading pair data | | isLoading | boolean | false | Loading state | | error | Error \| null | null | Error state | | useDexpalContext | () => ContextData | undefined | Context hook for data | | dex | string | undefined | Pre-filter by exchange name | | disableExpandedView | boolean | false | Disable expanded view in GroupedAssetsTable |

Data Structure

DexPair Type

interface DexPair {
  id: string;
  base: string;
  target: string;
  asset: Asset;
  dex: Dex;
  index_price: number;
  percentage_change_24h: number;
  open_interest: number;
  trading_volume_24h: number;
  funding_rate: number;
  max_leverage: number | null;
  trade_url: string;
  is_new: boolean;
  hide_pair: boolean;
}

See full type definitions in the package exports.

Utilities

Table Cell Formatters

import {
  singleIconCell,
  pairCell,
  assetCell,
  marketPriceCell,
  tradingVolumeCell,
  openInterestCell,
  fundingRateCell,
  maxLeverageCell,
  tradeLinkCell,
} from '@dexpal-analytics/pair-screener';

Styling

The component uses Tailwind CSS. Ensure Tailwind is configured:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@dexpal-analytics/**/*.{js,ts,jsx,tsx}'],
  // ... rest of config
};

Need Data Fetching?

For a complete plug-and-play solution with Apollo Client integration, use:

npm install @dexpal-analytics/pair-screener-apollo

See @dexpal-analytics/pair-screener-apollo for details.

TypeScript Support

Full TypeScript definitions included:

import type {
  DexPair,
  GroupedAsset,
  Asset,
  Dex,
  ExchangeFilter,
} from '@dexpal-analytics/pair-screener';

Browser Support

• Chrome/Edge (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)

License

MIT

Repository

https://github.com/dexpal/dexpal-launch