@emblemvault/migratefun-react

React hooks and components for integrating Migrate.fun project data into your application.

Installation

npm install @emblemvault/migratefun-react

Quick Start

import { MigrateFunProvider, useProjects } from '@emblemvault/migratefun-react';

function App() {
  return (
    <MigrateFunProvider config={{ defaultNetwork: 'mainnet' }}>
      <ProjectList />
    </MigrateFunProvider>
  );
}

function ProjectList() {
  const { projects, isLoading } = useProjects();

  if (isLoading) return <div>Loading...</div>;

  return (
    <ul>
      {projects.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Features

• SessionStorage caching - Projects cached for 5 minutes, survives page navigation
• Request deduplication - Concurrent requests return the same promise
• TypeScript - Full type definitions included
• Flexible - Works with or without the provider

Provider

Wrap your app with MigrateFunProvider to enable shared caching and network state.

<MigrateFunProvider config={{
  defaultNetwork: 'mainnet',  // 'mainnet' | 'devnet'
  baseUrl: 'https://emblemvault.dev'  // API base URL (default: 'https://emblemvault.dev')
}}>
  <App />
</MigrateFunProvider>

Context Hooks

// Requires provider - throws if used outside
const { network, setNetwork, projects, refetchProjects } = useMigrateFun();

// Works without provider - returns defaults
const { network, baseUrl } = useMigrateFunOptional();

Hooks

useProjects

Fetch all migrate.fun projects. Data is cached in the provider context.

const { projects, count, isLoading, error, cached, refetch } = useProjects({
  network: 'mainnet',  // optional
  live: false,         // force live fetch
  enabled: true,       // auto-fetch on mount
});

// Force refresh
refetch({ live: true });

useProject

Fetch a single project with full metadata including token info and images.

const { project, isLoading, error, refetch } = useProject('121', {
  network: 'mainnet',
  enabled: true,
});

// project.projectName, project.oldTokenMeta, project.newTokenMeta, etc.

useProjectSelect

Convenience hook for dropdown/select components.

const { options, isLoading } = useProjectSelect({ network: 'mainnet' });

// options = [{ value: '121', label: 'ProjectName' }, ...]

useMintInfo

Fetch token mint details including decimals, program, and supply.

const { mintInfo, isLoading } = useMintInfo('121');

// mintInfo.oldToken.decimals, mintInfo.newToken.supplyFormatted, etc.

usePoolInfo

Fetch liquidity pool information.

const { poolInfo, isLoading } = usePoolInfo('121');

// poolInfo.sourcePool.poolType, poolInfo.quoteToken.mint, etc.

Components

ProjectSelect

Ready-to-use dropdown component.

import { ProjectSelect } from '@emblemvault/migratefun-react';

<ProjectSelect
  value={projectId}
  onChange={setProjectId}
  network="mainnet"
  placeholder="Select a project..."
  className="your-styles"
/>

TypeScript

All types are exported:

import type {
  Network,
  Project,
  ProjectSummary,
  TokenMetadata,
  MintInfo,
  PoolInfoResponse,
  // ... and more
} from '@emblemvault/migratefun-react';

Using Without Provider

Hooks work without a provider but won't share cached data:

import { useProjects, useProject } from '@emblemvault/migratefun-react';

function StandaloneComponent() {
  const { projects } = useProjects({ network: 'mainnet' });
  const { project } = useProject('121', { network: 'mainnet' });
  // Each hook manages its own state
}

API Documentation

Full API documentation available at emblemvault.dev/migrate-fun/sdk

License

MIT