{{ ... }}

Apollo Client data-fetching layer for @dexpal-analytics/pair-screener. Provides a complete plug-and-play solution with GraphQL queries, context providers, real-time price updates, and query-level filtering for restricted pairs and assets.

Features

• 🔌 Plug-and-Play: Complete data fetching solution
• 📡 Real-time Updates: Asset price polling with configurable intervals
• 🎯 GraphQL Queries: Pre-built queries for DEXes and trading pairs
• 🔄 Context Provider: Easy state management with React Context
• 🪝 Custom Hooks: useDexpal and useAssetPrices
• 📦 TypeScript: Full type safety

Installation

npm install @dexpal-analytics/pair-screener-apollo @dexpal-analytics/pair-screener @dexpal-analytics/ui
{{ ... }}
# or
yarn add @dexpal-analytics/pair-screener-apollo @dexpal-analytics/pair-screener @dexpal-analytics/ui

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@apollo/client": "^3.13.0",
  "graphql": "^16.10.0",
  "graphql-tag": "^2.12.0"
}

With Restricted Pairs/Assets Filtering

import { PairScreener } from '@dexpal-analytics/pair-screener';
import { DexpalProvider, useDexpal } from '@dexpal-analytics/pair-screener-apollo';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

// 1. Create Apollo Client with default endpoint
const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || 'https://gql.dexpal.ai/v1/graphql',
  cache: new InMemoryCache(),
});

// 2. Wrap with providers
const restrictedPairs = ['BTC', 'ETH/USDT']; // Pairs to exclude from query
const restrictedAssets = ['Bitcoin', 'BTC', 'USDT']; // Assets to exclude from query

function App() {
  return (
    <ApolloProvider client={client}>
      <DexpalProvider restrictedPairs={restrictedPairs} restrictedAssets={restrictedAssets}>
        <PairScreenerPage />
      </DexpalProvider>
    </ApolloProvider>
  );
}

// 3. Use the PairScreener with context
function PairScreenerPage() {
  return <PairScreener useDexpalContext={useDexpal} />;
}

API Reference

DexpalProvider

Provides DEX and trading pair data to child components.

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

<DexpalProvider>
  <YourApp />
</DexpalProvider>;

With Custom GraphQL Endpoint

<DexpalProvider graphqlEndpoint="https://gql.dexpal.ai/v1/graphql">
  <YourApp />
</DexpalProvider>

useDexpal Hook

Access DEX and pair data from the context.

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

function MyComponent() {
  const {
    dexList, // Array of DEX data
    loadingDexList, // Loading state for DEXes
    dexListError, // Error state for DEXes
    dexPairs, // Array of trading pairs
    loadingDexPairs, // Loading state for pairs
    dexPairsError, // Error state for pairs
    lastUpdated, // Timestamp of last data refresh
    refreshData, // Manual refresh function
  } = useDexpal();

  return <div>{loadingDexPairs ? 'Loading...' : `${dexPairs.length} pairs`}</div>;
}

useAssetPrices Hook

Real-time asset price polling.

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

function PriceDisplay({ assetIds }: { assetIds: string[] }) {
  const {
    assetPrices, // Map<string, AssetPrice>
    getAssetPrice, // (assetId: string) => AssetPrice | undefined
    loading,
    error,
    refetchPrices,
  } = useAssetPrices({
    assetIds,
    enabled: true,
    pollingInterval: 6000, // 6 seconds
  });

  const price = getAssetPrice(assetIds[0]);
  return <div>${price?.market_price}</div>;
}

GraphQL Queries

GET_DEXES

Fetches all DEX information.

query GetDexes {
  dexes(order_by: { name: asc }) {
    id
    name
    logo
    description
    # ... more fields
  }
}

GET_PAIRS

Fetches all trading pairs with historical data.

query GetPairs($startTime: timestamptz!, $endTime: timestamptz!) {
  pair_stats(order_by: { trading_volume_24h: desc_nulls_last }) {
    id
    base
    target
    asset { ... }
    dex { ... }
    # ... more fields
  }
}

Environment Variables

Set your GraphQL endpoint (optional - will use default if not provided):

NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://gql.dexpal.ai/v1/graphql

Advanced Usage

Custom Polling Interval

<DexpalProvider pollingInterval={10000}>
  <YourApp />
</DexpalProvider>

Manual Data Refresh

function RefreshButton() {
  const { refreshData, loadingDexPairs } = useDexpal();

  return (
    <button onClick={refreshData} disabled={loadingDexPairs}>
      Refresh Data
    </button>
  );
}

Conditional Price Updates

const { assetPrices } = useAssetPrices({
  assetIds: selectedAssetIds,
  enabled: isVisible && !isPaused, // Only poll when needed
  pollingInterval: 5000,
});

TypeScript

All types are re-exported from @dexpal-analytics/pair-screener:

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

Error Handling

function MyComponent() {
  const { dexPairs, dexPairsError, loadingDexPairs } = useDexpal();

  if (dexPairsError) {
    return <div>Error loading pairs: {dexPairsError.message}</div>;
  }

  if (loadingDexPairs) {
    return <div>Loading...</div>;
  }

  return <PairScreener data={dexPairs} />;
}