feat: implement Fan component for following creators and registering as a fan

Author: Armolas

packages/nextjs/components/Fan.tsx

@@ -0,0 +1,237 @@
+import { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Input } from "./ui/input";
+import { Heart, HeartHandshake } from "lucide-react";
+import { isAddress } from "viem";
+import { useAccount } from "wagmi";
+import { useRegisterFan } from "~~/hooks/useRegisterFan";
+import { checkFollowStatus } from "~~/lib/eik";
+import { followCreator } from "~~/lib/follow";
+import { notification } from "~~/utils/scaffold-eth";
+
+export const Fan = () => {
+  const { address } = useAccount();
+  const [creatorAddress, setCreatorAddress] = useState("");
+  const [fanLabel, setFanLabel] = useState("");
+  const [registeredENS, setRegisteredENS] = useState<string | null>(null);
+  const [isCheckingFollow] = useState(false);
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [followStatus, setFollowStatus] = useState<boolean | null>(null);
+  const { registerFan, isPending } = useRegisterFan();
+
+  // Check initial follow status when creator address changes
+  useEffect(() => {
+    const checkInitialFollowStatus = async () => {
+      if (address && creatorAddress.trim()) {
+        const follows = await checkFollowStatus(address, creatorAddress.trim());
+        setFollowStatus(follows);
+      } else {
+        setFollowStatus(null);
+      }
+    };
+
+    checkInitialFollowStatus();
+  }, [address, creatorAddress]);
+
+  const handleFollow = async () => {
+    if (!address || !creatorAddress.trim()) {
+      notification.error("Please connect wallet and enter creator address");
+      return;
+    }
+
+    try {
+      setIsFollowing(true);
+      const result = await followCreator(creatorAddress.trim(), address);
+
+      if (result.success) {
+        notification.success("Successfully followed creator! You can now register as a fan.");
+        setFollowStatus(true);
+      } else {
+        notification.error(result.error || "Failed to follow creator");
+      }
+    } catch (error) {
+      console.error("Follow error:", error);
+      notification.error("Failed to follow creator");
+    } finally {
+      setIsFollowing(false);
+    }
+  };
+
+  // const checkFollow = async (creator: string, fan: string): Promise<boolean> => {
+  //   try {
+  //     setIsCheckingFollow(true);
+  //     const follows = await checkFollowStatus(fan, creator);
+  //     return follows;
+  //   } catch (error) {
+  //     console.error("Error checking follow status:", error);
+  //     // For demo purposes, return false if API fails (strict mode)
+  //     notification.warning("Could not verify follow status from EIK API");
+  //     return false;
+  //   } finally {
+  //     setIsCheckingFollow(false);
+  //   }
+  // };
+
+  const handleRegister = async () => {
+    if (!address) {
+      notification.error("Please connect your wallet first");
+      return;
+    }
+
+    if (!creatorAddress.trim()) {
+      notification.error("Please enter creator's address");
+      return;
+    }
+
+    const trimmedAddress = creatorAddress.trim();
+    const isValidAddress = isAddress(trimmedAddress);
+    const isENSName = trimmedAddress.endsWith(".eth");
+
+    if (!isValidAddress && !isENSName) {
+      notification.error("Please enter a valid Ethereum address or ENS name");
+      return;
+    }
+
+    if (!fanLabel.trim()) {
+      notification.error("Please enter your fan label");
+      return;
+    }
+
+    try {
+      // Check follow status using real EIK API
+      // const follows = await checkFollow(trimmedAddress, address);
+
+      // if (!follows) {
+      //   notification.error("You must follow this creator before registering as a fan. Use the 'Follow Creator' button below!");
+      //   return;
+      // }
+
+      // Generate a deterministic creator node hash from creator address
+      // In a real implementation, you'd query the contract to find the actual creator node
+      // const creatorNodeHash = keccak256(toBytes(trimmedAddress.toLowerCase()));
+
+      const result = await registerFan(trimmedAddress, fanLabel.trim());
+
+      if (result) {
+        const ensName = `${fanLabel.trim()}.${trimmedAddress.toLowerCase()}`;
+        setRegisteredENS(ensName);
+        notification.success(`Fan registration successful! Your ENS: ${ensName}`);
+        setCreatorAddress("");
+        setFanLabel("");
+      }
+    } catch (error: any) {
+      console.error("Fan registration failed:", error);
+      notification.error(error?.message || "Fan registration failed");
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader className="text-center">
+        <CardTitle>Register as Fan</CardTitle>
+        <CardDescription>Get your fan.creator.fantoken.eth subdomain</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {registeredENS ? (
+          <div className="text-center space-y-4">
+            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <p className="text-blue-800 dark:text-blue-200 font-medium">🎉 Fan Registration Successful!</p>
+              <p className="text-blue-700 dark:text-blue-300 text-sm mt-1">
+                Your ENS: <strong>{registeredENS}</strong>
+              </p>
+            </div>
+            <Button variant="outline" onClick={() => setRegisteredENS(null)} className="w-full">
+              Register for Another Creator
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
+              <label htmlFor="creator-address" className="text-sm font-medium">
+                Creator&apos;s Address or ENS
+              </label>
+              <Input
+                id="creator-address"
+                placeholder="0x... or creator.eth"
+                value={creatorAddress}
+                onChange={e => setCreatorAddress(e.target.value)}
+                disabled={isPending || isCheckingFollow}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="fan-label" className="text-sm font-medium">
+                Your Fan Label
+              </label>
+              <Input
+                id="fan-label"
+                placeholder="e.g. alice, bob123"
+                value={fanLabel}
+                onChange={e => setFanLabel(e.target.value)}
+                disabled={isPending || isCheckingFollow}
+              />
+              <p className="text-xs text-muted-foreground">
+                This will create: {fanLabel || "your-label"}.{creatorAddress || "creator.fantoken.eth"}
+              </p>
+            </div>
+
+            <Button
+              onClick={handleRegister}
+              disabled={isPending || isCheckingFollow || !address || !creatorAddress.trim() || !fanLabel.trim()}
+              className="w-full"
+            >
+              {isPending ? "Registering..." : isCheckingFollow ? "Checking Follow Status..." : "Register as Fan"}
+            </Button>
+
+            {!address && (
+              <p className="text-sm text-muted-foreground text-center">Please connect your wallet to register</p>
+            )}
+
+            {/* Follow Status & Button */}
+            {creatorAddress.trim() && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-center space-x-2 p-3 rounded-lg bg-muted/50">
+                  {followStatus === true ? (
+                    <>
+                      <HeartHandshake className="w-5 h-5 text-green-600" />
+                      <span className="text-sm text-green-600 font-medium">Following this creator</span>
+                    </>
+                  ) : followStatus === false ? (
+                    <>
+                      <Heart className="w-5 h-5 text-muted-foreground" />
+                      <span className="text-sm text-muted-foreground">Not following this creator</span>
+                    </>
+                  ) : (
+                    <span className="text-sm text-muted-foreground">Checking follow status...</span>
+                  )}
+                </div>
+
+                {followStatus === false && (
+                  <Button onClick={handleFollow} disabled={isFollowing} variant="outline" className="w-full">
+                    {isFollowing ? (
+                      <>
+                        <Heart className="w-4 h-4 mr-2 animate-pulse" />
+                        Following...
+                      </>
+                    ) : (
+                      <>
+                        <HeartHandshake className="w-4 h-4 mr-2" />
+                        Follow Creator
+                      </>
+                    )}
+                  </Button>
+                )}
+              </div>
+            )}
+
+            <div className="text-xs text-muted-foreground text-center space-y-1">
+              <p>⚠️ You must be following this creator to register</p>
+              <p>Follow status verified via EIK (Ethereum Identity Kit)</p>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};