Skip to main content

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.