fix: bug + show address name

client/src/components/SettingsComponent.tsx

@@ -13,15 +13,15 @@ import { RangeInput } from "../elements/RangeInput";
 import useUIStore from "../hooks/store/useUIStore";
 import useScreenOrientation from "../hooks/useScreenOrientation";
 import { useDojo } from "../DojoContext";
-import { useRealm } from "../hooks/helpers/useRealm";
+import { useAddressStore } from "../hooks/store/useAddressStore";
 type SettingsComponentProps = {};
 
 export const SettingsComponent = ({}: SettingsComponentProps) => {
   const {
-    account: { accountDisplay, account },
+    account: { accountDisplay },
   } = useDojo();
 
-  const { getAddressName } = useRealm();
+  const addressName = useAddressStore((state) => state.addressName);
   const [showSettings, setShowSettings] = useState(false);
   const musicLevel = useUIStore((state) => state.musicLevel);
   const effectsLevel = useUIStore((state) => state.effectsLevel);
@@ -38,8 +38,6 @@ export const SettingsComponent = ({}: SettingsComponentProps) => {
     toggleFullScreen();
   };
 
-  const addressName = getAddressName(account.address);
-
   return (
     <div className="flex items-center text-white">
       <Crown className="mr-[6px] fill-current" />

client/src/components/SignUpComponent.tsx

@@ -4,13 +4,12 @@ import Button from "../elements/Button";
 import { useEffect, useMemo, useState } from "react";
 import useUIStore from "../hooks/store/useUIStore";
 import { useDojo } from "../DojoContext";
-import { displayAddress, hexToAscii } from "../utils/utils";
+import { displayAddress } from "../utils/utils";
 import ListSelect from "../elements/ListSelect";
-// import { ReactComponent as Danger } from "../assets/icons/common/danger.svg";
 import { ReactComponent as Copy } from "../assets/icons/common/copy.svg";
 import { ReactComponent as Import } from "../assets/icons/common/import.svg";
 import TextInput from "../elements/TextInput";
-import { fetchAddressName } from "../hooks/graphql/useGraphQLQueries";
+import { useAddressStore, useFetchAddressName } from "../hooks/store/useAddressStore";
 
 type SignUpComponentProps = {
   isWorldLive: boolean;
@@ -34,23 +33,23 @@ export const SignUpComponent = ({ isWorldLive, worldLoading, worldProgress }: Si
   // import export account
   const [importMessage, setImportMessage] = useState(null);
   const [copyMessage, setCopyMessage] = useState(null);
-  const [loading, setLoading] = useState(false);
   const [inputName, setInputName] = useState("");
-  const [currentName, setCurrentName] = useState(undefined);
-  const [hasName, setHasName] = useState(true);
 
-  useEffect(() => {
-    const fetchName = async () => {
-      const name = await fetchAddressName(account.address);
-      if (name) {
-        setCurrentName(hexToAscii(name));
-        setHasName(true);
-      } else {
-        setHasName(false);
-      }
-    };
-    fetchName();
-  }, [account.address, loading]);
+  const { loading, setLoading, addressName, setAddressName } = useAddressStore();
+  useFetchAddressName(account.address);
+
+  // useEffect(() => {
+  //   const fetchName = async () => {
+  //     const name = await fetchAddressName(account.address);
+  //     if (name) {
+  //       setCurrentName(hexToAscii(name));
+  //       setHasName(true);
+  //     } else {
+  //       setHasName(false);
+  //     }
+  //   };
+  //   fetchName();
+  // }, [account.address, loading]);
 
   let disableStart = false;
   // let disableStart = true;
@@ -61,6 +60,7 @@ export const SignUpComponent = ({ isWorldLive, worldLoading, worldProgress }: Si
   const onSetName = async () => {
     setLoading(true);
     await set_address_name({ name: inputName, signer: account });
+    setAddressName(inputName);
     setLoading(false);
   };
 
@@ -205,32 +205,39 @@ export const SignUpComponent = ({ isWorldLive, worldLoading, worldProgress }: Si
             onChange={select}
           />
           <div className="flex flex-cols m-2 items-center justify-center">
-            {hasName && (
+            {/* {(loading || addressName) && (
               <TextInput
-                placeholder="Attack Name to Address"
+                placeholder="Attach Name to Address"
                 className={"border !py-1 !my-1 mr-2"}
-                value={currentName || ""}
+                value={addressName || ""}
                 onChange={() => {}}
               ></TextInput>
+            )} */}
+            {(loading || addressName) && (
+              <span className="text-white border-gold border text-xs rounded-lg p-2">
+                {addressName ? `👑 ${addressName}` : ""}
+              </span>
             )}
-            {!hasName && (
+            {!loading && !addressName && (
               <TextInput
-                placeholder="Attack Name to Address"
+                placeholder="Attach Name to Address"
                 className={"border !py-1 !my-1 mr-2"}
                 maxLength={12}
                 value={inputName}
                 onChange={setInputName}
               ></TextInput>
             )}
-            <Button
-              isLoading={loading}
-              onClick={onSetName}
-              className={"!py-2 !my-1"}
-              variant={"primary"}
-              disabled={hasName}
-            >
-              Set Name
-            </Button>
+            {!(loading || addressName) && (
+              <Button
+                isLoading={loading}
+                onClick={onSetName}
+                className={"!py-2 !my-1"}
+                variant={"primary"}
+                disabled={loading || addressName !== undefined}
+              >
+                Set Name
+              </Button>
+            )}
           </div>
           <Button
             // @note: currently disabled for prod, enable back when new version is ready

client/src/components/cityview/realm/combat/defence/AttackHistory.tsx

@@ -11,6 +11,7 @@ import useUIStore from "../../../../../hooks/store/useUIStore";
 import { ResourceCost } from "../../../../../elements/ResourceCost";
 import useBlockchainStore from "../../../../../hooks/store/useBlockchainStore";
 import { formatSecondsLeftInDaysHours } from "../../labor/laborUtils";
+import { useRealm } from "../../../../../hooks/helpers/useRealm";
 
 type AttackHistoryProps = {
   combatResult: CombatResultInterface;
@@ -28,9 +29,11 @@ export const AttackHistory = ({ combatResult, ...props }: AttackHistoryProps) =>
   const nextBlockTimestamp = useBlockchainStore((state) => state.nextBlockTimestamp);
 
   const setTooltip = useUIStore((state) => state.setTooltip);
+  const { getRealmAddressName } = useRealm();
 
   let { realm_id: attackerRealmId } = getComponentValue(Realm, getEntityIdFromKeys([BigInt(attackerRealmEntityId)]));
   let attackerName = attackerRealmId ? getRealmNameById(attackerRealmId) : undefined;
+  let attackerAddressName = getRealmAddressName(attackerRealmEntityId);
 
   const attackerTotalSoldiers = useMemo(() => {
     let total = 0;
@@ -91,8 +94,9 @@ export const AttackHistory = ({ combatResult, ...props }: AttackHistoryProps) =>
         )}
         <div className="flex items-center pt-1 ml-1 -mt-2">
           {stolenResources.length === 0 && attackerRealmId && (
-            <div className="flex items-center ml-1">
+            <div className="flex items-center">
               <div className="flex items-center ml-1 mr-1 text-gold">
+                <span className={"mr-1"}>{attackerAddressName.slice(0, 10)}</span>
                 <OrderIcon order={getRealmOrderNameById(attackerRealmId)} className="mr-1" size="xxs" />
                 {attackerName}
               </div>
@@ -105,8 +109,9 @@ export const AttackHistory = ({ combatResult, ...props }: AttackHistoryProps) =>
             </div>
           )}
           {stolenResources.length > 0 && attackerRealmId && (
-            <div className="flex items-center ml-1">
+            <div className="flex items-center">
               <div className="flex items-center ml-1 mr-1 text-gold">
+                <span className={"mr-1"}>{attackerAddressName.slice(0, 10)}</span>
                 <OrderIcon order={getRealmOrderNameById(attackerRealmId)} className="mr-1" size="xxs" />
                 {attackerName}
               </div>

client/src/components/cityview/realm/combat/defence/EnnemyRaid.tsx

@@ -8,16 +8,19 @@ import { CombatInfo } from "../../../../../hooks/helpers/useCombat";
 import ProgressBar from "../../../../../elements/ProgressBar";
 import { formatSecondsLeftInDaysHours } from "../../labor/laborUtils";
 import useUIStore from "../../../../../hooks/store/useUIStore";
+import { useRealm } from "../../../../../hooks/helpers/useRealm";
 
 type EnemyRaidProps = {
   raider: CombatInfo;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const EnemyRaid = ({ raider, ...props }: EnemyRaidProps) => {
-  const { entityId, health, quantity, attack, defence, originRealmId, arrivalTime } = raider;
+  const { entityOwnerId, entityId, health, quantity, attack, defence, originRealmId, arrivalTime } = raider;
 
   const nextBlockTimestamp = useBlockchainStore((state) => state.nextBlockTimestamp);
   const setTooltip = useUIStore((state) => state.setTooltip);
+  const { getRealmAddressName } = useRealm();
+  const attackerAddressName = getRealmAddressName(entityOwnerId);
 
   const isTraveling = arrivalTime ? arrivalTime > nextBlockTimestamp : false;
   const originRealmName = originRealmId ? getRealmNameById(raider.originRealmId) : undefined;
@@ -51,6 +54,7 @@ export const EnemyRaid = ({ raider, ...props }: EnemyRaidProps) => {
             <div className="flex items-center ml-1">
               <span className="italic text-light-pink">Arrived from</span>
               <div className="flex items-center ml-1 mr-1 text-gold">
+                <span className={"mr-1"}>{attackerAddressName.slice(0, 10)}</span>
                 <OrderIcon order={getRealmOrderNameById(originRealmId)} className="mr-1" size="xxs" />
                 {originRealmName}
               </div>

client/src/components/worldmap/RealmListItem.tsx

@@ -7,14 +7,19 @@ import * as realmsData from "../../geodata/realms.json";
 import clsx from "clsx";
 import useUIStore from "../../hooks/store/useUIStore";
 import { displayAddress, numberToHex } from "../../utils/utils";
+import { RealmExtended, useRealm } from "../../hooks/helpers/useRealm";
 
 type RealmListItemProps = {
-  realm: any;
+  realm: RealmExtended;
 };
 
 export const RealmListItem = ({ realm }: RealmListItemProps) => {
   const moveCameraToRealm = useUIStore((state) => state.moveCameraToRealm);
 
+  const { getRealmAddressName } = useRealm();
+
+  const addressName = getRealmAddressName(realm.entity_id);
+
   return (
     <div className="flex flex-col p-2 border rounded-md border-gray-gold text-xxs text-gray-gold">
       <div className="flex items-center">
@@ -25,7 +30,11 @@ export const RealmListItem = ({ realm }: RealmListItemProps) => {
           </div>
         )}
         <div className="-mt-2 ml-2 italic">
-          owned by <span className="text-gold">{displayAddress(numberToHex(realm?.owner?.address || 0))}</span>
+          owned by
+          {!addressName && (
+            <span className="text-gold ml-1 mr-1">{displayAddress(numberToHex(realm?.owner?.address || 0))}</span>
+          )}
+          {addressName && <span className="text-gold ml-1 mr-1">{addressName}</span>}
         </div>
         <div className=" text-gold flex ml-auto ">
           <Button

client/src/hooks/helpers/useRealm.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { RealmInterface } from "../graphql/useGraphQLQueries";
-import { Has, HasValue, getComponentValue, runQuery } from "@latticexyz/recs";
+import { EntityIndex, Has, HasValue, getComponentValue, runQuery } from "@latticexyz/recs";
 import { useDojo } from "../../DojoContext";
 import { getEntityIdFromKeys, hexToAscii, numberToHex } from "../../utils/utils";
 import { getOrderName } from "@bibliothecadao/eternum";
@@ -9,11 +9,19 @@ import realmsData from "../../geodata/realms.json";
 import { unpackResources } from "../../utils/packedData";
 import { useEntityQuery } from "@dojoengine/react";
 import useBlockchainStore from "../store/useBlockchainStore";
+import { Realm } from "../../types";
+
+export type RealmExtended = Realm & {
+  entity_id: EntityIndex;
+  name: string;
+  owner?: { address: number };
+  resources: number[];
+};
 
 export function useRealm() {
   const {
     setup: {
-      components: { Realm, Level, AddressName },
+      components: { Realm, Level, AddressName, Owner },
     },
   } = useDojo();
 
@@ -88,10 +96,22 @@ export function useRealm() {
     return addressName ? hexToAscii(numberToHex(addressName.name)) : undefined;
   };
 
+  const getRealmAddressName = (realmEntityId: number) => {
+    const owner = getComponentValue(Owner, getEntityIdFromKeys([BigInt(realmEntityId)]));
+    const addressName = owner
+      ? getComponentValue(AddressName, getEntityIdFromKeys([BigInt(owner.address)]))
+      : undefined;
+
+    if (addressName) {
+      return hexToAscii(numberToHex(addressName.name));
+    }
+  };
+
   return {
     getNextRealmIdForOrder,
     getRealmLevel,
     getAddressName,
+    getRealmAddressName,
   };
 }
 
@@ -146,7 +166,7 @@ export function useGetRealm(realmEntityId: number | undefined) {
   };
 }
 
-export function useGetRealms() {
+export function useGetRealms(): { realms: RealmExtended[] } {
   const {
     setup: {
       components: { Realm, Owner },
@@ -155,7 +175,7 @@ export function useGetRealms() {
 
   const realmEntityIds = useEntityQuery([Has(Realm)]);
 
-  const realms: any[] = useMemo(
+  const realms: RealmExtended[] = useMemo(
     () =>
       Array.from(realmEntityIds).map((entityId) => {
         const realm = getComponentValue(Realm, entityId) as any;

client/src/hooks/store/useAddressStore.tsx

@@ -0,0 +1,35 @@
+import { create } from "zustand";
+import { fetchAddressName } from "../graphql/useGraphQLQueries";
+import { useEffect } from "react";
+import { hexToAscii } from "../../utils/utils";
+
+type AddressStore = {
+  loading: boolean;
+  addressName: undefined | string;
+  setAddressName: (addressName: string) => void;
+  setLoading: (loading: boolean) => void;
+};
+
+export const useAddressStore = create<AddressStore>((set) => ({
+  loading: false,
+  addressName: undefined,
+  setAddressName: (addressName: string | undefined) => set({ addressName }),
+  setLoading: (loading: boolean) => set({ loading }),
+}));
+
+export const useFetchAddressName = (address: string) => {
+  const setAddressName = useAddressStore((state) => state.setAddressName);
+  const setLoading = useAddressStore((state) => state.setLoading);
+  useEffect(() => {
+    const syncAddressName = async () => {
+      const addressName = await fetchAddressName(address);
+      if (addressName) {
+        setAddressName(hexToAscii(addressName));
+      } else {
+        setAddressName(undefined);
+      }
+      setLoading(false);
+    };
+    syncAddressName();
+  }, [address]);
+};