From bd577de506cb1b4a7550cab3f7f06f65a5c921c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 12 Dec 2023 13:20:16 +0100
Subject: [PATCH 1/4] Auto update ENS name on `storage` event

---
 src/shared/utils/names.ts  |  1 +
 src/ui/Nav/AccountInfo.tsx |  8 ++++++--
 src/ui/Nav/index.tsx       | 27 +++++++++++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts
index d2d6ad90e..d45b28719 100644
--- a/src/shared/utils/names.ts
+++ b/src/shared/utils/names.ts
@@ -42,6 +42,7 @@ const addCachedName = ({ name, avatar, address, type }: NameWithProvider) => {
   })
 
   localStorage.setItem(NAMES_CACHE_STRORAGE_KEY, newCache)
+  window.dispatchEvent(new Event("storage"))
 }
 
 const resolveENSPromise = (address: string) =>
diff --git a/src/ui/Nav/AccountInfo.tsx b/src/ui/Nav/AccountInfo.tsx
index 6ea0ff9bb..37133a261 100644
--- a/src/ui/Nav/AccountInfo.tsx
+++ b/src/ui/Nav/AccountInfo.tsx
@@ -10,7 +10,11 @@ import { getRealmColor } from "shared/constants"
 import Avatar from "shared/components/Media/Avatar"
 import AccountDropdown from "./AccountDropdown"
 
-export default function AccountInfo() {
+type AccountInfoProps = {
+  accountName: string | null
+}
+
+export default function AccountInfo({ accountName }: AccountInfoProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const dropdownTriggerRef = useRef<HTMLButtonElement>(null)
 
@@ -41,7 +45,7 @@ export default function AccountInfo() {
         onClick={() => setIsDropdownOpen((prev) => !prev)}
         ref={dropdownTriggerRef}
       >
-        <span className="account_label ellipsis">{name}</span>
+        <span className="account_label ellipsis">{accountName ?? name}</span>
         <Avatar
           width="42px"
           style={{
diff --git a/src/ui/Nav/index.tsx b/src/ui/Nav/index.tsx
index 200387502..a44020bb6 100644
--- a/src/ui/Nav/index.tsx
+++ b/src/ui/Nav/index.tsx
@@ -1,18 +1,41 @@
-import React from "react"
+import React, { useEffect, useState } 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 Icon from "shared/components/Media/Icon"
+import { selectWalletAddress, useDappSelector } from "redux-state"
 import AccountInfo from "./AccountInfo"
 import NavItems from "./NavItems"
 import NavContainer from "./NavContainer"
 import BraveNav from "./BraveNav"
 
+type CachedNames = {
+  [key: string]: { ens?: { name: string }; uns?: { name: string } }
+}
+
 export default function Nav(): JSX.Element {
   const { isConnected, connect } = useConnect()
   const resetTenderlyFork = useResetTenderlyFork()
 
+  const [accountName, setAccountName] = useState<string | null>(null)
+  const walletAddress = useDappSelector(selectWalletAddress)
+
+  useEffect(() => {
+    window.addEventListener("storage", () => {
+      if (!walletAddress) return
+
+      const cachedNames = localStorage.getItem("taho.cachedNames")
+      if (!cachedNames) return
+
+      const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
+      const { ens, uns } = parsedCachedNames[walletAddress]
+
+      if (ens) setAccountName(ens.name)
+      if (uns) setAccountName(uns.name)
+    })
+  }, [walletAddress])
+
   return (
     <>
       <NavContainer>
@@ -30,7 +53,7 @@ export default function Nav(): JSX.Element {
         <div className="rhs_container row">
           <div className="connect_wallet_btn">
             {isConnected ? (
-              <AccountInfo />
+              <AccountInfo accountName={accountName} />
             ) : (
               <Button
                 type="tertiary"

From 5f977a6597d0881bf0b337438c070c0fcc4770ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 12 Dec 2023 13:33:57 +0100
Subject: [PATCH 2/4] Create `useCachedWalletName` hook

---
 src/shared/constants/local-storage.ts |  1 +
 src/shared/hooks/wallets.ts           | 31 ++++++++++++++++++++++++++
 src/shared/utils/names.ts             |  6 ++---
 src/ui/Nav/index.tsx                  | 32 ++++++---------------------
 4 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/src/shared/constants/local-storage.ts b/src/shared/constants/local-storage.ts
index 3c178adb3..a529455f3 100644
--- a/src/shared/constants/local-storage.ts
+++ b/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"
diff --git a/src/shared/hooks/wallets.ts b/src/shared/hooks/wallets.ts
index fb22b5983..6919f60a4 100644
--- a/src/shared/hooks/wallets.ts
+++ b/src/shared/hooks/wallets.ts
@@ -18,6 +18,7 @@ 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 +28,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
@@ -263,3 +268,29 @@ export function useWalletChange() {
     isStaked,
   ])
 }
+
+export function useCachedWalletName() {
+  const [accountName, setAccountName] = useState<string | null>(null)
+  const walletAddress = useDappSelector(selectWalletAddress)
+
+  useEffect(() => {
+    const handleCachedNamesUpdate = () => {
+      if (!walletAddress) return
+
+      const cachedNames = localStorage.getItem(LOCAL_STORAGE_CACHED_NAMES)
+      if (!cachedNames) return
+
+      const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
+      const { ens, uns } = parsedCachedNames[walletAddress]
+
+      if (ens) setAccountName(ens.name)
+      if (uns) setAccountName(uns.name)
+    }
+
+    window.addEventListener("storage", handleCachedNamesUpdate)
+
+    return () => window.removeEventListener("storage", handleCachedNamesUpdate)
+  }, [walletAddress])
+
+  return accountName
+}
diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts
index d45b28719..d92c94e75 100644
--- a/src/shared/utils/names.ts
+++ b/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,7 @@ 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"))
 }
 
diff --git a/src/ui/Nav/index.tsx b/src/ui/Nav/index.tsx
index a44020bb6..9d8fc5b72 100644
--- a/src/ui/Nav/index.tsx
+++ b/src/ui/Nav/index.tsx
@@ -1,40 +1,22 @@
-import React, { useEffect, useState } from "react"
+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 { selectWalletAddress, useDappSelector } from "redux-state"
 import AccountInfo from "./AccountInfo"
 import NavItems from "./NavItems"
 import NavContainer from "./NavContainer"
 import BraveNav from "./BraveNav"
 
-type CachedNames = {
-  [key: string]: { ens?: { name: string }; uns?: { name: string } }
-}
-
 export default function Nav(): JSX.Element {
   const { isConnected, connect } = useConnect()
   const resetTenderlyFork = useResetTenderlyFork()
-
-  const [accountName, setAccountName] = useState<string | null>(null)
-  const walletAddress = useDappSelector(selectWalletAddress)
-
-  useEffect(() => {
-    window.addEventListener("storage", () => {
-      if (!walletAddress) return
-
-      const cachedNames = localStorage.getItem("taho.cachedNames")
-      if (!cachedNames) return
-
-      const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
-      const { ens, uns } = parsedCachedNames[walletAddress]
-
-      if (ens) setAccountName(ens.name)
-      if (uns) setAccountName(uns.name)
-    })
-  }, [walletAddress])
+  const accountName = useCachedWalletName()
 
   return (
     <>

From d4a4b97f788b64d992ca1e4855e9b6d8a68655fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 13 Dec 2023 10:10:42 +0100
Subject: [PATCH 3/4] Refactor `useCachedWalletName` hook

---
 src/shared/hooks/wallets.ts | 19 +++++++++++++------
 src/ui/Nav/AccountInfo.tsx  | 12 ++++--------
 src/ui/Nav/index.tsx        |  5 +++--
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/shared/hooks/wallets.ts b/src/shared/hooks/wallets.ts
index 76d2e5cad..87d744058 100644
--- a/src/shared/hooks/wallets.ts
+++ b/src/shared/hooks/wallets.ts
@@ -13,6 +13,7 @@ import {
   selectDisplayedRealmId,
   connectArbitrumProviderFallback,
   fetchPopulation,
+  updateConnectedWallet,
 } from "redux-state"
 import {
   ARBITRUM_SEPOLIA,
@@ -277,8 +278,8 @@ export function useWalletChange() {
 }
 
 export function useCachedWalletName() {
-  const [accountName, setAccountName] = useState<string | null>(null)
   const walletAddress = useDappSelector(selectWalletAddress)
+  const dispatch = useDappDispatch()
 
   useEffect(() => {
     const handleCachedNamesUpdate = () => {
@@ -290,14 +291,20 @@ export function useCachedWalletName() {
       const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
       const { ens, uns } = parsedCachedNames[walletAddress]
 
-      if (ens) setAccountName(ens.name)
-      if (uns) setAccountName(uns.name)
+      if (uns)
+        dispatch(
+          updateConnectedWallet({ address: walletAddress, name: uns.name })
+        )
+
+      if (ens)
+        dispatch(
+          updateConnectedWallet({ address: walletAddress, name: ens.name })
+        )
     }
 
+    handleCachedNamesUpdate()
     window.addEventListener("storage", handleCachedNamesUpdate)
 
     return () => window.removeEventListener("storage", handleCachedNamesUpdate)
-  }, [walletAddress])
-
-  return accountName
+  }, [walletAddress, dispatch])
 }
diff --git a/src/ui/Nav/AccountInfo.tsx b/src/ui/Nav/AccountInfo.tsx
index 37133a261..64eebd18e 100644
--- a/src/ui/Nav/AccountInfo.tsx
+++ b/src/ui/Nav/AccountInfo.tsx
@@ -1,24 +1,20 @@
 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"
 import Avatar from "shared/components/Media/Avatar"
 import AccountDropdown from "./AccountDropdown"
 
-type AccountInfoProps = {
-  accountName: string | null
-}
-
-export default function AccountInfo({ accountName }: AccountInfoProps) {
+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)
@@ -45,7 +41,7 @@ export default function AccountInfo({ accountName }: AccountInfoProps) {
         onClick={() => setIsDropdownOpen((prev) => !prev)}
         ref={dropdownTriggerRef}
       >
-        <span className="account_label ellipsis">{accountName ?? name}</span>
+        <span className="account_label ellipsis">{walletName}</span>
         <Avatar
           width="42px"
           style={{
diff --git a/src/ui/Nav/index.tsx b/src/ui/Nav/index.tsx
index 86ac1ee8d..8ea9bf258 100644
--- a/src/ui/Nav/index.tsx
+++ b/src/ui/Nav/index.tsx
@@ -16,7 +16,8 @@ import BraveNav from "./BraveNav"
 export default function Nav(): JSX.Element {
   const { isConnected, connect } = useConnect()
   const resetTenderlyFork = useResetTenderlyFork()
-  const accountName = useCachedWalletName()
+
+  useCachedWalletName()
 
   return (
     <>
@@ -36,7 +37,7 @@ export default function Nav(): JSX.Element {
           {process.env.IS_PORTAL_CLOSED === "false" && (
             <div className="connect_wallet_btn">
               {isConnected ? (
-                <AccountInfo accountName={accountName} />
+                <AccountInfo />
               ) : (
                 <Button
                   type="tertiary"

From d28514c52181397e52602f113588d6fc62b5434b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 13 Dec 2023 10:54:26 +0100
Subject: [PATCH 4/4] Do not update wallet name if is the same as cached one

---
 src/shared/hooks/wallets.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/shared/hooks/wallets.ts b/src/shared/hooks/wallets.ts
index 87d744058..7f2057773 100644
--- a/src/shared/hooks/wallets.ts
+++ b/src/shared/hooks/wallets.ts
@@ -14,6 +14,7 @@ import {
   connectArbitrumProviderFallback,
   fetchPopulation,
   updateConnectedWallet,
+  selectWalletName,
 } from "redux-state"
 import {
   ARBITRUM_SEPOLIA,
@@ -278,33 +279,33 @@ export function useWalletChange() {
 }
 
 export function useCachedWalletName() {
-  const walletAddress = useDappSelector(selectWalletAddress)
+  const address = useDappSelector(selectWalletAddress)
+  const walletName = useDappSelector(selectWalletName)
   const dispatch = useDappDispatch()
 
   useEffect(() => {
     const handleCachedNamesUpdate = () => {
-      if (!walletAddress) return
+      if (!address) return
 
       const cachedNames = localStorage.getItem(LOCAL_STORAGE_CACHED_NAMES)
       if (!cachedNames) return
 
       const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
-      const { ens, uns } = parsedCachedNames[walletAddress]
+      const { ens, uns } = parsedCachedNames[address]
 
-      if (uns)
-        dispatch(
-          updateConnectedWallet({ address: walletAddress, name: uns.name })
-        )
+      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
 
-      if (ens)
         dispatch(
-          updateConnectedWallet({ address: walletAddress, name: ens.name })
+          updateConnectedWallet({ address, name: ens?.name ?? uns?.name })
         )
+      }
     }
 
     handleCachedNamesUpdate()
     window.addEventListener("storage", handleCachedNamesUpdate)
 
     return () => window.removeEventListener("storage", handleCachedNamesUpdate)
-  }, [walletAddress, dispatch])
+  }, [address, walletName, dispatch])
 }