Fix ENS and UNS names not visible in UI (#879)

## Issues connected

Resolves #823 

## What has been done

- Fixed ENS and UNS names not updated automatically (without reload)
- Added `useCachedWalletName` hook

## Testing

- [x] Clear `localStorage`
- [x] Connect wallet
- [x] After a short interval, account name is automatically updated
- [x] Reload the page, the name is still visible

src/shared/constants/local-storage.ts

@@ -5,3 +5,4 @@ export const LOCAL_STORAGE_BRAVE = "taho.brave"
 export const LOCAL_STORAGE_COOKIES = "taho.cookies"
 export const LOCAL_STORAGE_DISPLAYED_REALMS = "taho.displayedRealm"
 export const LOCAL_STORAGE_DISPLAYED_CHALLENGES = "taho.displayedChallenges"
+export const LOCAL_STORAGE_CACHED_NAMES = "taho.cachedNames"

src/shared/hooks/wallets.ts

@@ -13,11 +13,14 @@ import {
   selectDisplayedRealmId,
   connectArbitrumProviderFallback,
   fetchPopulation,
+  updateConnectedWallet,
+  selectWalletName,
 } from "redux-state"
 import {
   ARBITRUM_SEPOLIA,
   ARBITRUM_SEPOLIA_RPC_FALLBACK,
   BALANCE_UPDATE_INTERVAL,
+  LOCAL_STORAGE_CACHED_NAMES,
   LOCAL_STORAGE_WALLET,
   POPULATION_FETCH_INTERVAL,
 } from "shared/constants"
@@ -27,6 +30,10 @@ import { usePostHog } from "posthog-js/react"
 import { useAssistant } from "./assistant"
 import { useInterval, useLocalStorageChange } from "./helpers"
 
+type CachedNames = {
+  [key: string]: { ens?: { name: string }; uns?: { name: string } }
+}
+
 class StaticJsonBatchRpcProvider extends ethers.providers.JsonRpcBatchProvider {
   override async detectNetwork(): Promise<Network> {
     let { network } = this
@@ -270,3 +277,35 @@ export function useWalletChange() {
     isStaked,
   ])
 }
+
+export function useCachedWalletName() {
+  const address = useDappSelector(selectWalletAddress)
+  const walletName = useDappSelector(selectWalletName)
+  const dispatch = useDappDispatch()
+
+  useEffect(() => {
+    const handleCachedNamesUpdate = () => {
+      if (!address) return
+
+      const cachedNames = localStorage.getItem(LOCAL_STORAGE_CACHED_NAMES)
+      if (!cachedNames) return
+
+      const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
+      const { ens, uns } = parsedCachedNames[address]
+
+      if (ens || uns) {
+        // If cached name and redux wallet name are the same do not dispatch wallet update action
+        if (walletName === ens?.name || walletName === uns?.name) return
+
+        dispatch(
+          updateConnectedWallet({ address, name: ens?.name ?? uns?.name })
+        )
+      }
+    }
+
+    handleCachedNamesUpdate()
+    window.addEventListener("storage", handleCachedNamesUpdate)
+
+    return () => window.removeEventListener("storage", handleCachedNamesUpdate)
+  }, [address, walletName, dispatch])
+}

src/shared/utils/names.ts

@@ -1,3 +1,4 @@
+import { LOCAL_STORAGE_CACHED_NAMES } from "shared/constants"
 import { isProbablyEVMAddress, normalizeAddress } from "./address"
 import { isValidENSDomainName, resolveENS, resolveAddressToENS } from "./ens"
 import { isValidUNSDomainName, resolveAddressToUNS, resolveUNS } from "./uns"
@@ -13,7 +14,6 @@ type NameWithProvider = WalletData & {
   type: "ens" | "uns"
 }
 
-const NAMES_CACHE_STRORAGE_KEY = "taho.cachedNames"
 const MAX_CACHE_AGE = 1000 * 60 * 60 * 24 * 7 // 1 week
 
 const resolveAddressPromiseCache: {
@@ -22,7 +22,7 @@ const resolveAddressPromiseCache: {
 
 const getCachedNames = () => {
   const cachedNamesUnparsed =
-    localStorage.getItem(NAMES_CACHE_STRORAGE_KEY) ?? "{}"
+    localStorage.getItem(LOCAL_STORAGE_CACHED_NAMES) ?? "{}"
 
   return JSON.parse(cachedNamesUnparsed)
 }
@@ -41,7 +41,8 @@ const addCachedName = ({ name, avatar, address, type }: NameWithProvider) => {
     },
   })
 
-  localStorage.setItem(NAMES_CACHE_STRORAGE_KEY, newCache)
+  localStorage.setItem(LOCAL_STORAGE_CACHED_NAMES, newCache)
+  window.dispatchEvent(new Event("storage"))
 }
 
 const resolveENSPromise = (address: string) =>

src/ui/Nav/AccountInfo.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useState } from "react"
 import {
   useDappSelector,
-  selectWalletName,
   selectStakingRealmId,
   selectRealmById,
+  selectWalletName,
 } from "redux-state"
 import RealmIcon from "ui/Island/Realms/RealmIcon"
 import { getRealmColor } from "shared/constants"
@@ -14,7 +14,7 @@ export default function AccountInfo() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const dropdownTriggerRef = useRef<HTMLButtonElement>(null)
 
-  const name = useDappSelector(selectWalletName)
+  const walletName = useDappSelector(selectWalletName)
   const realmId = useDappSelector(selectStakingRealmId)
   const realm = useDappSelector((state) => selectRealmById(state, realmId))
   const color = realmId && getRealmColor(realmId)
@@ -41,7 +41,7 @@ export default function AccountInfo() {
         onClick={() => setIsDropdownOpen((prev) => !prev)}
         ref={dropdownTriggerRef}
       >
-        <span className="account_label ellipsis">{name}</span>
+        <span className="account_label ellipsis">{walletName}</span>
         <Avatar
           width="42px"
           style={{

src/ui/Nav/index.tsx

@@ -2,7 +2,11 @@ import React from "react"
 import Button from "shared/components/Interface/Button"
 import logoIcon from "shared/assets/nav_logo.svg"
 import walletIcon from "shared/assets/icons/wallet.svg"
-import { useConnect, useResetTenderlyFork } from "shared/hooks"
+import {
+  useCachedWalletName,
+  useConnect,
+  useResetTenderlyFork,
+} from "shared/hooks"
 import Icon from "shared/components/Media/Icon"
 import AccountInfo from "./AccountInfo"
 import NavItems from "./NavItems"
@@ -13,6 +17,8 @@ export default function Nav(): JSX.Element {
   const { isConnected, connect } = useConnect()
   const resetTenderlyFork = useResetTenderlyFork()
 
+  useCachedWalletName()
+
   return (
     <>
       <NavContainer>