import { CrefyConnectProvider, AuthModal } from "crefy-connect";

function App() {
  return (
    <CrefyConnectProvider
      appId="<YOUR_CREFY_ID>"
      chain="sepolia"
      loginMethods={["google", "wallet", "email"]}
    >
      <AuthModal />
    </CrefyConnectProvider>
  );
}

import { useCrefy, AuthModal } from "crefy-connect";

function LoginExample() {
  const { isAuthenticated, user } = useCrefy();

  return (
    <div>
      {!isAuthenticated ? (
        <div>
          <h1>Welcome! Please log in.</h1>
          <AuthModal />
        </div>
      ) : (
        <div>
          <h1>Welcome, {user?.userData?.email}!</h1>
          <p>You are successfully authenticated.</p>
        </div>
      )}
    </div>
  );
}

import { useCrefy } from "crefy-connect";

function LogoutButton() {
  const { logout, isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return null;
  }

  return (
    <button onClick={logout} style={{ padding: "10px 20px" }}>
      Logout
    </button>
  );
}

import { useCrefy } from "crefy-connect";

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

  if (!isAuthenticated) {
    return <p>Please log in to view your profile.</p>;
  }

  return (
    <div>
      <h2>Profile</h2>
      {user?.userData?.picture && (
        <img src={user.userData.picture} alt="Profile" />
      )}
      <p>Email: {user?.userData?.email}</p>
      <p>Name: {user?.userData?.name}</p>
      {walletInfo && (
        <div>
          <p>Wallet Address: {walletInfo.walletAddress}</p>
          <p>Chain: {walletInfo.chain}</p>
        </div>
      )}
    </div>
  );
}

import { useSendEth } from "crefy-connect";
import { useState } from "react";

function SendEthForm() {
  const { sendEth, loading, error, data } = useSendEth();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      await sendEth({
        to: recipient,
        value: amount,
        chain: "sepolia",
        mode: "fast",
      });
      // Reset form on success
      setRecipient("");
      setAmount("");
    } catch (err) {
      console.error("Transaction failed:", err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Amount (ETH)"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? "Sending..." : "Send ETH"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
      {data && (
        <p>
          Transaction sent! Hash:{" "}
          <a
            href={`https://sepolia.etherscan.io/tx/${data.txHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {data.txHash}
          </a>
        </p>
      )}
    </form>
  );
}

import { useSendEth } from "crefy-connect";
import { useState } from "react";

function SpeedSelector() {
  const { sendEth, loading } = useSendEth();
  const [mode, setMode] = useState<"slow" | "standard" | "fast">("standard");
  const [recipient, setRecipient] = useState("");

  const handleSend = async () => {
    await sendEth({
      to: recipient,
      value: "0.1",
      chain: "sepolia",
      mode: mode,
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <select
        value={mode}
        onChange={(e) =>
          setMode(e.target.value as "slow" | "standard" | "fast")
        }
      >
        <option value="slow">Slow (Lower fee)</option>
        <option value="standard">Standard</option>
        <option value="fast">Fast (Higher fee)</option>
      </select>
      <button onClick={handleSend} disabled={loading}>
        Send with {mode} mode
      </button>
    </div>
  );
}

import { useCrefy, AuthModal, useSendEth } from "crefy-connect";
import { useState } from "react";

function Dashboard() {
  const { isAuthenticated, user, walletInfo, logout } = useCrefy();
  const { sendEth, loading, error, data } = useSendEth();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Welcome to My Dashboard</h1>
        <AuthModal />
      </div>
    );
  }

  const handleSend = async () => {
    await sendEth({
      to: recipient,
      value: amount,
      chain: "sepolia",
    });
  };

  return (
    <div>
      <header>
        <h1>Dashboard</h1>
        <p>Welcome, {user?.userData?.email}</p>
        <button onClick={logout}>Logout</button>
      </header>

      <section>
        <h2>Wallet Info</h2>
        <p>Address: {walletInfo?.walletAddress}</p>
        <p>Chain: {walletInfo?.chain}</p>
      </section>

      <section>
        <h2>Send ETH</h2>
        <input
          type="text"
          placeholder="Recipient"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          type="text"
          placeholder="Amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <button onClick={handleSend} disabled={loading}>
          {loading ? "Sending..." : "Send"}
        </button>
        {error && <p style={{ color: "red" }}>{error}</p>}
        {data && <p>Tx Hash: {data.txHash}</p>}
      </section>
    </div>
  );
}

import { useCrefy, AuthModal } from "crefy-connect";

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return (
      <div>
        <h2>Authentication Required</h2>
        <p>Please log in to access this page.</p>
        <AuthModal />
      </div>
    );
  }

  return <>{children}</>;
}

// Usage
function App() {
  return (
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  );
}

import { AuthModal } from "crefy-connect";

function CustomAuthButton() {
  return (
    <AuthModal
      buttonClassName="custom-connect-btn"
      buttonStyle={{
        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        color: "white",
        border: "none",
        borderRadius: "12px",
        padding: "12px 24px",
        fontSize: "16px",
        fontWeight: "600",
        cursor: "pointer",
      }}
    />
  );
}