> ## 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

> Complete TypeScript type definitions for Crefy Connect

# TypeScript Types

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

## Provider Types

### CrefyConnectProviderProps

```typescript theme={null}
interface CrefyConnectProviderProps {
  appId: string;
  chain: string;
  loginMethods: string[];
  children: React.ReactNode;
}
```

## Hook Return Types

### useCrefy Return Type

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

### useSendEth Return Type

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

## User Types

### CrefyUser

```typescript theme={null}
interface CrefyUser {
  userData: {
    email?: string;
    name?: string;
    picture?: string;
    // ... other user data fields
  };
  // ... other user fields
}
```

### WalletInfo

```typescript theme={null}
interface WalletInfo {
  walletAddress: string;
  chain: string;
  // ... other wallet fields
}
```

## Transaction Types

### SendEthParams

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

### SendEthResponse

```typescript theme={null}
interface SendEthResponse {
  txHash: string;
  // ... other response fields
}
```

## Component Props Types

### AuthModalProps

```typescript theme={null}
interface AuthModalProps {
  buttonClassName?: string;
  buttonStyle?: React.CSSProperties;
}
```

## Usage Examples

### Type-Safe Component Props

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
// 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";
```

<Note>
  **Type Safety**: All Crefy Connect APIs are designed with TypeScript first, ensuring compile-time type checking and excellent IDE support with autocomplete.
</Note>