Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.crefy.xyz/llms.txt

Use this file to discover all available pages before exploring further.

TypeScript Types

Crefy Connect is fully typed with TypeScript. Here are all the available types and interfaces.

Provider Types

CrefyConnectProviderProps

interface CrefyConnectProviderProps {
  appId: string;
  chain: string;
  loginMethods: string[];
  children: React.ReactNode;
}

Hook Return Types

useCrefy Return Type

interface UseCrefyReturn {
  isAuthenticated: boolean;
  walletInfo: WalletInfo | null;
  user: CrefyUser | null;
  token: string | null;
  appId: string;
  chain: string;
  loginMethods: string[];
  logout: () => void;
}

useSendEth Return Type

interface UseSendEthReturn {
  sendEth: (params: SendEthParams) => Promise<void>;
  loading: boolean;
  error: string | null;
  data: SendEthResponse | null;
}

User Types

CrefyUser

interface CrefyUser {
  userData: {
    email?: string;
    name?: string;
    picture?: string;
    // ... other user data fields
  };
  // ... other user fields
}

WalletInfo

interface WalletInfo {
  walletAddress: string;
  chain: string;
  // ... other wallet fields
}

Transaction Types

SendEthParams

interface SendEthParams {
  to: string;
  value: string; // Amount in ETH as string (e.g., "0.1")
  chain: "sepolia" | "mainnet";
  mode?: "slow" | "standard" | "fast";
}

SendEthResponse

interface SendEthResponse {
  txHash: string;
  // ... other response fields
}

Component Props Types

AuthModalProps

interface AuthModalProps {
  buttonClassName?: string;
  buttonStyle?: React.CSSProperties;
}

Usage Examples

Type-Safe Component Props

import { CrefyConnectProvider } from "crefy-connect";

interface AppProps {
  appId: string;
  chain: "sepolia" | "mainnet";
}

function App({ appId, chain }: AppProps) {
  return (
    <CrefyConnectProvider
      appId={appId}
      chain={chain}
      loginMethods={["google", "wallet", "email"]}
    >
      {/* Your app */}
    </CrefyConnectProvider>
  );
}

Type-Safe Hook Usage

import { useCrefy } from "crefy-connect";

function UserProfile() {
  const { user, walletInfo }: UseCrefyReturn = useCrefy();

  // TypeScript knows the exact shape
  if (user?.userData?.email) {
    console.log(user.userData.email); // ✅ Type-safe
  }

  if (walletInfo?.walletAddress) {
    console.log(walletInfo.walletAddress); // ✅ Type-safe
  }

  return null;
}

Type-Safe Transaction Sending

import { useSendEth } from "crefy-connect";

function SendButton() {
  const { sendEth } = useSendEth();

  const handleSend = async () => {
    // TypeScript enforces correct parameter types
    await sendEth({
      to: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
      value: "0.1", // ✅ Must be string
      chain: "sepolia", // ✅ Must be "sepolia" | "mainnet"
      mode: "fast", // ✅ Optional, must be "slow" | "standard" | "fast"
    });
  };

  return <button onClick={handleSend}>Send</button>;
}

Custom Type Guards

function isAuthenticatedUser(
  user: CrefyUser | null
): user is CrefyUser {
  return user !== null && user.userData !== undefined;
}

// Usage
const { user } = useCrefy();

if (isAuthenticatedUser(user)) {
  // TypeScript now knows user is CrefyUser, not null
  console.log(user.userData.email);
}

Generic Utility Types

// Optional utility type for extending user data
type ExtendedUserData = CrefyUser["userData"] & {
  customField?: string;
};

// Chain type for better type safety
type SupportedChain = "sepolia" | "mainnet";

// Login method type
type LoginMethod = "google" | "email" | "wallet" | "github";
Type Safety: All Crefy Connect APIs are designed with TypeScript first, ensuring compile-time type checking and excellent IDE support with autocomplete.