# Build a RSVP App

This guide walks you through building a simple Event RSVP interface using React + Wagmi + ATFi SDK.

## Prerequisites

* React project set up (`npm create vite@latest`)
* `wagmi` and `viem` installed.

## Step 1: Initialize SDK Hook

Create `hooks/useATFi.ts`:

```typescript
// hooks/useATFiSDK.ts
import { usePublicClient, useWalletClient } from 'wagmi';
import { ATFiSDK } from 'atfi';
import { useMemo } from 'react';

export function useATFiSDK() {
  const publicClient = usePublicClient();
  const { data: walletClient } = useWalletClient();

  const sdk = useMemo(() => {
    if (publicClient && walletClient) {
      return new ATFiSDK(publicClient, walletClient);
    }
    return null;
  }, [publicClient, walletClient]);

  return sdk;
}
```

## Step 2: Create the RSVP Button

```tsx
import { useState } from 'react';
import { useATFiSDK } from './hooks/useATFiSDK';

export function RSVPButton({ vaultAddress }: { vaultAddress: `0x${string}` }) {
  const sdk = useATFiSDK();
  const [status, setStatus] = useState('Idle');

  const handleRSVP = async () => {
    if (!sdk) return;
    setStatus('Checking...');
    
    try {
      const action = await sdk.register({ vaultAddress });
      
      setStatus('Confirm in Wallet...');
      await action.execute({
        onApproving: () => setStatus('Approving Token...'),
        onSubmitting: () => setStatus('Staking...'),
        onSubmitted: () => setStatus('Transaction Sent!'),
      });
      
      setStatus('Success! You are registered.');
    } catch (e) {
      console.error(e);
      setStatus('Failed');
    }
  };

  return <button onClick={handleRSVP}>{status === 'Idle' ? 'RSVP Now' : status}</button>;
}
```