diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx index d5fd1ebe..67ce62b9 100644 --- a/src/components/CommentSection.tsx +++ b/src/components/CommentSection.tsx @@ -3,8 +3,8 @@ import { useState, useCallback } from "react"; import { useAccount, useSignMessage } from "wagmi"; import { useQuery, useQueryClient } from "@tanstack/react-query"; -import { truncateAddress } from "../../lib/utils"; import { ConnectWallet } from "./ConnectWallet"; +import { FarcasterAvatar } from "./FarcasterAvatar"; interface Comment { id: number; @@ -182,7 +182,7 @@ export function CommentSection({
- {truncateAddress(c.commenter_address)} + {relativeTime(c.created_at)} diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx index d234777e..2cf3e891 100644 --- a/src/components/ConnectWallet.tsx +++ b/src/components/ConnectWallet.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"; import { useAccount, useConnect, useDisconnect } from "wagmi"; import { isFarcasterMiniApp } from "../../lib/farcaster-connector"; import { truncateAddress } from "../../lib/utils"; +import { useConnectedIdentity } from "../hooks/useConnectedIdentity"; export function ConnectWallet() { const { address, isConnected } = useAccount(); @@ -11,6 +12,7 @@ export function ConnectWallet() { const { disconnect } = useDisconnect(); const autoConnectAttempted = useRef(false); const [inMiniApp, setInMiniApp] = useState(false); + const { profile } = useConnectedIdentity(); // Detect Farcaster mini app context once on mount useEffect(() => { @@ -36,8 +38,18 @@ export function ConnectWallet() { if (isConnected && address) { return (
- - {truncateAddress(address)} + + {profile?.pfpUrl && ( + // eslint-disable-next-line @next/next/no-img-element + + )} + {profile ? `@${profile.username}` : truncateAddress(address)}