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.