ENS Names used in Zones page and Account panel

frontend/src/components/panels/nav-panel.tsx

@@ -1,4 +1,4 @@
-import { decodeString } from '@app/helpers';
+import { decodeString, lookupENSName } from '@app/helpers';
 import { usePlayer, useWallet } from '@app/hooks/use-game-state';
 import { useSession } from '@app/hooks/use-session';
 import { GlobalUnityContext } from '@app/hooks/use-unity-instance';
@@ -77,10 +77,26 @@ export const NavPanel = ({
     const [zoneName, setZoneName] = useState(decodeString(zone?.name?.value ?? '') || '');
     const [zoneDescription, setZoneDescription] = useState(zone?.description?.value || '');
     const [zoneUrl, setZoneUrl] = useState(zone?.url?.value || '');
+    const [ensNames, setEnsNames] = useState<{ [key: string]: string | null }>({});
 
     const hasConnection = player || wallet;
     const address = player?.addr || wallet?.address || '';
 
+    useEffect(() => {
+        if (showAccountDialog) {
+            if (address) {
+                lookupENSName(address)
+                    .then((n) =>
+                        setEnsNames((prevNames) => ({
+                            ...prevNames,
+                            [address]: n,
+                        }))
+                    )
+                    .catch(console.error);
+            }
+        }
+    }, [address, showAccountDialog]);
+
     const isZoneOwner = address === zone?.owner?.addr;
 
     const closeAccountDialog = useCallback(() => {
@@ -190,9 +206,7 @@ export const NavPanel = ({
                 <Dialog onClose={closeAccountDialog} width="304px" height="">
                     <div style={{ padding: 0 }}>
                         <h3>SETTINGS</h3>
-                        <p>
-                            {address.slice(0, 9)}...{address.slice(-9)}
-                        </p>
+                        <p>{ensNames[address] || `${address.slice(0, 9)}...${address.slice(-9)}`}</p>
                         <br />
 
                         {isZoneOwner && (

frontend/src/helpers/index.ts

@@ -39,6 +39,37 @@ export const decodeString = (value: string): string => {
     }
 };
 
+const ensCache: { [address: string]: string | null } = {};
+let ensActiveChecks = 0;
+
+export async function lookupENSName(address: string): Promise<string | null> {
+    // Check if the address is already in the ensCache
+    if (ensCache.hasOwnProperty(address)) {
+        return ensCache[address];
+    }
+
+    // Lookup max 5 addresses at a time
+    if (ensActiveChecks >= 5) {
+        return null;
+    }
+
+    const ensProvider = ethers.getDefaultProvider('mainnet');
+    try {
+        ensActiveChecks++;
+        ensCache[address] = null;
+        const name = await ensProvider.lookupAddress(address);
+        // Cache the result, even if it's null
+        ensCache[address] = name;
+        return name;
+    } catch (error) {
+        console.error('ENS lookup failed', error);
+        ensCache[address] = null;
+        return null;
+    } finally {
+        ensActiveChecks--;
+    }
+}
+
 export const getItemStructure = (itemId: string) => {
     return [...itemId]
         .slice(2)

frontend/src/pages/index.tsx

@@ -1,4 +1,5 @@
 import { ethers } from 'ethers';
+import { lookupENSName } from '@app/helpers';
 import {
     DownstreamLogo,
     EmbossedBottomPanel,
@@ -22,7 +23,7 @@ import { GameStateProvider, useCogClient, useGlobal, usePlayer, useWallet } from
 import { SessionProvider } from '@app/hooks/use-session';
 import { WalletProviderProvider, useWalletProvider } from '@app/hooks/use-wallet-provider';
 import Image from 'next/image';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { useRouter } from 'next/router';
 import iconUnit from '@app/assets/icon-unit.svg';
 import { pipe, subscribe } from 'wonka';
@@ -162,20 +163,75 @@ const ZoneList = ({
     unitZoneLimit: number;
     onClickEnter: (id: number) => void;
 }) => {
+    const [ensNames, setEnsNames] = useState<{ [key: string]: string | null }>({});
+
+    const zoneRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const observer = useRef<IntersectionObserver | null>(null);
+
+    useEffect(() => {
+        const handleVisibilityChange = async (ownerAddress: string) => {
+            //console.log('a zone is on screen');
+            if (ownerAddress && !ensNames[ownerAddress]) {
+                const ensName = await lookupENSName(ownerAddress);
+                setEnsNames((prevNames) => ({
+                    ...prevNames,
+                    [ownerAddress]: ensName,
+                }));
+            }
+        };
+
+        observer.current = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const ownerAddress = entry.target.getAttribute('data-owner-address');
+                        if (ownerAddress) {
+                            handleVisibilityChange(ownerAddress)
+                                .then(() => {})
+                                .catch((err) => console.error(err));
+                        }
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        const currentRefs = zoneRefs.current;
+        currentRefs.forEach((ref) => {
+            if (ref) {
+                observer.current?.observe(ref);
+            }
+        });
+
+        return () => {
+            currentRefs.forEach((ref) => {
+                if (ref) {
+                    observer.current?.unobserve(ref);
+                }
+            });
+            observer.current?.disconnect();
+        };
+    }, [ensNames, zones]);
+
     return (
         <div>
-            {zones.map((zone) => (
-                <ZoneRow
-                    key={zone.key}
-                    id={zone.id}
-                    name={zone.name}
-                    description={zone.description?.value || `Unknown zone #${zone.id}`}
-                    activeUnits={zone.activeUnits.length}
-                    maxUnits={zone.maxUnits}
-                    imageURL={zone.url?.value ? zone.url.value : 'https://assets.downstream.game/tile.png'}
-                    onClickEnter={onClickEnter}
-                    ownerAddress={zone.owner?.addr || '0x0'}
-                />
+            {zones.map((zone, index) => (
+                <div
+                    key={zone.id}
+                    ref={(el) => (zoneRefs.current[index] = el)}
+                    data-owner-address={zone.owner?.addr || '0x0'}
+                >
+                    <ZoneRow
+                        id={zone.id}
+                        name={zone.name}
+                        description={zone.description?.value || `Unknown zone #${zone.id}`}
+                        activeUnits={zone.activeUnits.length}
+                        maxUnits={zone.maxUnits}
+                        imageURL={zone.url?.value ? zone.url.value : 'https://assets.downstream.game/tile.png'}
+                        onClickEnter={onClickEnter}
+                        ownerAddress={ensNames[zone.owner?.addr] || zone.owner?.addr || '0x0'}
+                    />
+                </div>
             ))}
         </div>
     );