diff --git a/src/components/chat/MessageInput.tsx b/src/components/chat/MessageInput.tsx index 43e6625b..d937792b 100644 --- a/src/components/chat/MessageInput.tsx +++ b/src/components/chat/MessageInput.tsx @@ -17,11 +17,12 @@ export function MessageInput() { const [showGifPicker, setShowGifPicker] = useState(false); const { login, address, isAuthenticated } = useAuth(); const room = useRoomStore((state) => state.room); - const version = useRoomStore((state) => state.version); // Subscribe to version changes + const version = useRoomStore((state) => state.version); const { hasAccess, isLoading: checkingAccess } = useTokenGate( room?.token_address || null, room?.required_tokens || 0, - address + address, + room?.token_network || 'base' ); const addMessage = useMessagesStore((state) => state.addMessage); const emojiButtonRef = useRef(null); @@ -94,7 +95,8 @@ export function MessageInput() { return
Checking access...
; } - if (!hasAccess && room?.token_address) { + // Only show the token gate warning if the user is authenticated and doesn't have access + if (!hasAccess && room?.token_address && isAuthenticated) { return (
Must hold {room.required_tokens} of token {room.token_address} to join chat diff --git a/src/components/room/RoomHeader.tsx b/src/components/room/RoomHeader.tsx index b2424139..c0e481ed 100644 --- a/src/components/room/RoomHeader.tsx +++ b/src/components/room/RoomHeader.tsx @@ -46,6 +46,7 @@ export function RoomHeader({ room }: RoomHeaderProps) { setShowTokenGateModal(true)} /> diff --git a/src/components/room/TokenGateInfo.tsx b/src/components/room/TokenGateInfo.tsx index bd5754f7..fd27fa0d 100644 --- a/src/components/room/TokenGateInfo.tsx +++ b/src/components/room/TokenGateInfo.tsx @@ -3,31 +3,35 @@ import { useTokenSymbol } from '../../lib/hooks/useTokenSymbol'; import { useTokenGate } from '../../lib/hooks/useTokenGate'; import { useAuth } from '../../components/auth/useAuth'; import { useRoomStore } from '../../lib/store/room'; +import { SUPPORTED_NETWORKS, type SupportedNetwork } from '../../lib/config'; import { useEffect } from 'react'; type TokenGateInfoProps = { tokenAddress: string | null; requiredTokens: number; + network?: SupportedNetwork; isOwner: boolean; onManageGate?: () => void; }; export function TokenGateInfo({ tokenAddress: initialTokenAddress, - requiredTokens: initialRequiredTokens, + requiredTokens: initialRequiredTokens, + network: initialNetwork = 'base', isOwner, onManageGate }: TokenGateInfoProps) { const { address } = useAuth(); const room = useRoomStore(state => state.room); - const version = useRoomStore(state => state.version); // Subscribe to version changes + const version = useRoomStore(state => state.version); // Use room store values, falling back to props const tokenAddress = room?.token_address ?? initialTokenAddress; const requiredTokens = room?.required_tokens ?? initialRequiredTokens; + const network = (room?.token_network ?? initialNetwork) as SupportedNetwork; - const { symbol, isLoading } = useTokenSymbol(tokenAddress); - const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address); + const { symbol, isLoading } = useTokenSymbol(tokenAddress, network); + const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address, network); // Debug logging useEffect(() => { @@ -35,9 +39,10 @@ export function TokenGateInfo({ version, tokenAddress, requiredTokens, + network, roomState: room }); - }, [version, tokenAddress, requiredTokens, room]); + }, [version, tokenAddress, requiredTokens, network, room]); if (!tokenAddress) { if (isOwner && onManageGate) { @@ -53,8 +58,12 @@ export function TokenGateInfo({ return null; } - const baseScanUrl = `https://basescan.org/token/${tokenAddress}`; + const explorerUrl = network === 'polygon' + ? `https://polygonscan.com/token/${tokenAddress}` + : `https://basescan.org/token/${tokenAddress}`; + const tokenDisplay = isLoading ? '...' : symbol || 'tokens'; + const networkDisplay = SUPPORTED_NETWORKS[network].name; return (
@@ -65,13 +74,15 @@ export function TokenGateInfo({ Required: {requiredTokens}{' '} {tokenDisplay} + {' '}on{' '} + {networkDisplay} {isOwner && onManageGate && (
{tokenAddress && ( -
- - setRequiredTokens(Number(e.target.value))} - min="0" - className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" - /> -
+ <> +
+ + +
+ +
+ + setRequiredTokens(Number(e.target.value))} + min="0" + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" + /> +
+ )} {error && ( -

{error}

+
+ +

{error}

+
)}
diff --git a/src/components/room/TokenGateTooltip.tsx b/src/components/room/TokenGateTooltip.tsx index 5f0a82d1..d25c76ad 100644 --- a/src/components/room/TokenGateTooltip.tsx +++ b/src/components/room/TokenGateTooltip.tsx @@ -4,23 +4,26 @@ import { useTokenSymbol } from '../../lib/hooks/useTokenSymbol'; import { useTokenGate } from '../../lib/hooks/useTokenGate'; import { useAuth } from '../../components/auth/useAuth'; import { useRoomStore } from '../../lib/store/room'; +import { SUPPORTED_NETWORKS, type SupportedNetwork } from '../../lib/config'; type TokenGateTooltipProps = { tokenAddress: string | null; requiredTokens: number; + network?: SupportedNetwork; isOwner: boolean; onManageGate?: () => void; }; export function TokenGateTooltip({ tokenAddress: initialTokenAddress, - requiredTokens: initialRequiredTokens, + requiredTokens: initialRequiredTokens, + network: initialNetwork = 'base', isOwner, onManageGate }: TokenGateTooltipProps) { const { address } = useAuth(); const room = useRoomStore(state => state.room); - const version = useRoomStore(state => state.version); // Subscribe to version changes + const version = useRoomStore(state => state.version); const [showTooltip, setShowTooltip] = useState(false); const tooltipRef = useRef(null); const timeoutRef = useRef(); @@ -28,9 +31,10 @@ export function TokenGateTooltip({ // Use room store values, falling back to props const tokenAddress = room?.token_address ?? initialTokenAddress; const requiredTokens = room?.required_tokens ?? initialRequiredTokens; + const network = (room?.token_network ?? initialNetwork) as SupportedNetwork; - const { symbol, isLoading } = useTokenSymbol(tokenAddress); - const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address); + const { symbol, isLoading } = useTokenSymbol(tokenAddress, network); + const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address, network); // Debug logging useEffect(() => { @@ -38,9 +42,10 @@ export function TokenGateTooltip({ version, tokenAddress, requiredTokens, + network, roomState: room }); - }, [version, tokenAddress, requiredTokens, room]); + }, [version, tokenAddress, requiredTokens, network, room]); useEffect(() => { return () => { @@ -84,8 +89,12 @@ export function TokenGateTooltip({ return null; } - const baseScanUrl = `https://basescan.org/token/${tokenAddress}`; + const explorerUrl = network === 'polygon' + ? `https://polygonscan.com/token/${tokenAddress}` + : `https://basescan.org/token/${tokenAddress}`; + const tokenDisplay = isLoading ? '...' : symbol || 'tokens'; + const networkDisplay = SUPPORTED_NETWORKS[network].name; return (
Required: {requiredTokens}{' '} {tokenDisplay} + {' '}on{' '} + {networkDisplay}
{isOwner && onManageGate && (