Using connected name or addressBook or signers

src/components/AddressAccountSelect/AccountAvatar.tsx

@@ -7,19 +7,33 @@ interface Props {
   address: string;
   truncateLenght?: number;
   name?: string;
+  children?: React.ReactNode;
 }
 
-export function AccountAvatar({ address, name, truncateLenght = 4 }: Props) {
+export function AccountAvatar({
+  address,
+  name,
+  truncateLenght = 4,
+  children,
+}: Props) {
   return (
     <Box display="flex" alignItems="center">
       <Avatar>
         <Identicon value={address} size={32} theme="beachball" />
       </Avatar>
       <Box marginLeft={1}>
-        {name === undefined ? <></> : <span>{shortNameLonger(name)}</span>}
-        <Typography color={name === undefined ? "white" : "#636669"}>
-          {truncateAddress(address, truncateLenght)}
-        </Typography>
+        {children ? (
+          <Typography color={name === undefined ? "white" : "#636669"}>
+            {children}
+          </Typography>
+        ) : (
+          <>
+            {name === undefined ? <></> : <span>{shortNameLonger(name)}</span>}
+            <Typography color={name === undefined ? "white" : "#636669"}>
+              {truncateAddress(address, truncateLenght)}
+            </Typography>
+          </>
+        )}
       </Box>
     </Box>
   );

src/components/Settings/ManageOwners/index.tsx

@@ -1,6 +1,6 @@
 import BookIcon from "@mui/icons-material/Book";
 import CloseIcon from "@mui/icons-material/Close";
-import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
+import EditOutlinedIcon from "@mui/icons-material/CreateOutlined";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import {
   Box,
@@ -24,14 +24,15 @@ import { AccountSigner } from "@/components/StepperSignersAccount/AccountSigner"
 import { getChain } from "@/config/chain";
 import { ROUTES } from "@/config/routes";
 import {
-  CrossOwnerWithAddressBook,
-  Owner,
-  SignatoriesAccount,
-} from "@/domain/SignatoriesAccount";
+  useNameAddressBookContext,
+  YOU_TEXT,
+} from "@/context/NameInAddressBookContext";
+import { usePolkadotContext } from "@/context/usePolkadotContext";
+import { Owner, SignatoriesAccount } from "@/domain/SignatoriesAccount";
 import { useSetXsignerSelected } from "@/hooks/xsignerSelected/useSetXsignerSelected";
 
 interface Props {
-  selectedMultisig?: SignatoriesAccount<CrossOwnerWithAddressBook>;
+  selectedMultisig?: SignatoriesAccount;
   handleAddOwner: () => void;
   handleDeleteOwner: (owner: Owner) => void;
   isDeletedLoading?: boolean;
@@ -43,16 +44,18 @@ export default function ManageOwners({
   handleDeleteOwner,
   isDeletedLoading = false,
 }: Props) {
+  const { accountConnected } = usePolkadotContext();
   const theme = useTheme();
   const [open, setOpen] = React.useState({ edit: false, delete: false });
   const { owners } = selectedMultisig || {};
   const [ownersList, setOwnersList] = React.useState<
-    SignatoriesAccount<CrossOwnerWithAddressBook>["owners"] | undefined
+    SignatoriesAccount["owners"] | undefined
   >(owners);
   const [currentOwner, setCurrentOwner] = React.useState<Owner>({} as Owner);
   const { setXsigner } = useSetXsignerSelected();
   const { addNotification } = useAppNotificationContext();
   const { logo, name: networkName } = getChain(selectedMultisig?.networkId);
+  const { findInAddressBook } = useNameAddressBookContext();
 
   React.useEffect(() => {
     setOwnersList(owners);
@@ -90,9 +93,7 @@ export default function ManageOwners({
       owners: newOwners as SignatoriesAccount["owners"],
     });
 
-    setOwnersList(
-      newOwners as SignatoriesAccount<CrossOwnerWithAddressBook>["owners"]
-    );
+    setOwnersList(newOwners as SignatoriesAccount["owners"]);
     handleClose();
     addNotification({
       message: "Owner name updated successfully",
@@ -277,64 +278,74 @@ export default function ManageOwners({
           {ownersList === undefined && (
             <LoadingSkeleton count={5} width={"100%"} />
           )}
-          {ownersList?.map((owner) => (
-            <Box
-              display="flex"
-              flexDirection="column"
-              key={owner?.address as string}
-            >
+          {ownersList?.map((owner) => {
+            const inAddressBook = findInAddressBook(owner.address);
+            const isYou = accountConnected?.address === owner.address;
+            const signerName = isYou
+              ? `${owner.name} (${YOU_TEXT})`
+              : inAddressBook || owner.name;
+
+            return (
               <Box
                 display="flex"
-                alignItems="center"
-                justifyContent="space-between"
+                flexDirection="column"
+                key={owner?.address as string}
               >
-                <AccountSigner
-                  name={owner?.name as string}
-                  address={owner?.address as string}
-                  truncateAmount={16}
-                />
-                <Box display="flex" gap={0.25}>
-                  {owner.inAddressBook ? (
-                    <Tooltip title="Edit on address book">
-                      <BookIcon
-                        sx={{ cursor: "pointer" }}
-                        onClick={() => router.replace(ROUTES.AddressBook)}
-                      />
-                    </Tooltip>
-                  ) : (
-                    <CreateOutlinedIcon
-                      sx={{ cursor: "pointer" }}
-                      onClick={() => handleEdit(owner)}
-                    />
-                  )}
-                  {isDeletedLoading &&
-                  currentOwner.address === owner.address ? (
-                    <CircularProgress color="secondary" size={20} />
-                  ) : (
-                    <DeleteOutlinedIcon
-                      onClick={() =>
-                        !isDeletedLoading && handleLocalDelete(owner)
-                      }
-                      sx={{
-                        cursor:
+                <Box
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <AccountSigner
+                    name={signerName}
+                    address={owner?.address as string}
+                    truncateAmount={16}
+                  />
+                  <Box display="flex" gap={0.25}>
+                    {inAddressBook ? (
+                      <Tooltip title="Go to address book">
+                        <BookIcon
+                          sx={{ cursor: "pointer" }}
+                          onClick={() => router.replace(ROUTES.AddressBook)}
+                        />
+                      </Tooltip>
+                    ) : (
+                      <Tooltip title="Edit name">
+                        <EditOutlinedIcon
+                          sx={{ cursor: "pointer" }}
+                          onClick={() => handleEdit(owner)}
+                        />
+                      </Tooltip>
+                    )}
+                    {isDeletedLoading &&
+                    currentOwner.address === owner.address ? (
+                      <CircularProgress color="secondary" size={20} />
+                    ) : (
+                      <DeleteOutlinedIcon
+                        onClick={() =>
+                          !isDeletedLoading && handleLocalDelete(owner)
+                        }
+                        sx={{
+                          cursor:
+                            owners?.length === 1 || isDeletedLoading
+                              ? "not-allowed"
+                              : "pointer",
+                        }}
+                        color={
                           owners?.length === 1 || isDeletedLoading
-                            ? "not-allowed"
-                            : "pointer",
-                      }}
-                      color={
-                        owners?.length === 1 || isDeletedLoading
-                          ? "disabled"
-                          : "inherit"
-                      }
-                    />
-                  )}
+                            ? "disabled"
+                            : "inherit"
+                        }
+                      />
+                    )}
+                  </Box>
+                </Box>
+                <Box>
+                  <Divider sx={{ margin: "0.5rem 0" }} />
                 </Box>
               </Box>
-              <Box>
-                <Divider sx={{ margin: "0.5rem 0" }} />
-              </Box>
-            </Box>
-          ))}
+            );
+          })}
         </Box>
         <LoadingButton
           variant="text"

src/components/TxTable/NameInAddressBook.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+import { useNameAddressBookContext } from "@/context/NameInAddressBookContext";
+import { truncateAddress } from "@/utils/formatString";
+
+import { LoadingSkeleton } from "../common/LoadingSkeleton";
+
+interface Props {
+  recipient: string | undefined;
+}
+export function NameInAddressBook({ recipient }: Props) {
+  const [nameInAddressBook, setNameInAddressBook] = useState<
+    string | undefined | null
+  >();
+  const { nameConnectedOrAddressBookOrSigners } = useNameAddressBookContext();
+
+  useEffect(() => {
+    const _name = recipient
+      ? nameConnectedOrAddressBookOrSigners(recipient)
+      : null;
+
+    setNameInAddressBook(_name);
+  }, [recipient, nameConnectedOrAddressBookOrSigners]);
+
+  if (nameInAddressBook === undefined) {
+    return <LoadingSkeleton />;
+  }
+
+  return nameInAddressBook
+    ? `${nameInAddressBook} (${truncateAddress(recipient, 3)})`
+    : truncateAddress(recipient, 9);
+}

src/components/TxTable/TransactionsHistory.tsx

@@ -6,17 +6,16 @@ import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
 import { useListTxHistory } from "@/hooks/transactions/useListTxHistory";
 
 import { LoadingSkeleton } from "../common/LoadingSkeleton";
-import { Props as TxDetailItemProps, TxDetailItem } from "./TxDetailItem";
+import { TxDetailItem } from "./TxDetailItem";
 
-interface Props extends Pick<TxDetailItemProps, "findInAddressBook"> {
+interface Props {
   xsignerAccount: SignatoriesAccount;
   network: ChainId;
 }
 
 export const TransactionHistory: React.FC<Props> = ({
   xsignerAccount,
   network,
-  findInAddressBook,
 }) => {
   const { data } = useListTxHistory(xsignerAccount, network);
 
@@ -37,7 +36,6 @@ export const TransactionHistory: React.FC<Props> = ({
             txData={txData}
             threshold={xsignerAccount.threshold}
             network={network}
-            findInAddressBook={findInAddressBook}
           />
         );
       })}

src/components/TxTable/TransactionsQueueDetail.tsx

@@ -7,17 +7,16 @@ import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
 import { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { useListTxQueue } from "@/hooks/transactions/useListTxQueue";
 
-import { Props as TxDetailItemProps, TxDetailItem } from "./TxDetailItem";
+import { TxDetailItem } from "./TxDetailItem";
 
-interface Props extends Pick<TxDetailItemProps, "findInAddressBook"> {
+interface Props {
   xsignerAccount: SignatoriesAccount;
   network: ChainId;
 }
 
 export const TransactionQueueDetail: React.FC<Props> = ({
   xsignerAccount,
   network,
-  findInAddressBook,
 }) => {
   const { data } = useListTxQueue(xsignerAccount, network);
   const { multisigContractPromise } = useMultisigContractPromise(
@@ -42,7 +41,6 @@ export const TransactionQueueDetail: React.FC<Props> = ({
             threshold={xsignerAccount.threshold}
             network={network}
             multisigContractPromise={multisigContractPromise.contract}
-            findInAddressBook={findInAddressBook}
           />
         );
       })}

src/components/TxTable/TxDetail/SendDetail.tsx

@@ -2,12 +2,12 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Box, Grid } from "@mui/material";
 import { ChainId } from "useink/dist/chains";
 
-import { AccountAvatar } from "@/components/AddressAccountSelect/AccountAvatar";
 import CopyButton from "@/components/common/CopyButton";
 import { ExplorerLink } from "@/components/ExplorerLink";
 import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
 import { formatDate } from "@/utils/formatString";
 
+import { AccountExplorer } from ".";
 import { CustomGridItem } from "./styled";
 
 export const SendDetail = ({
@@ -18,6 +18,7 @@ export const SendDetail = ({
   network: ChainId;
 }) => {
   const date = formatDate(data.creationTimestamp);
+
   return (
     <Grid container>
       <CustomGridItem colType="name">Created at:</CustomGridItem>
@@ -27,22 +28,17 @@ export const SendDetail = ({
         colType="value"
         sx={{ margin: "22px 0px", display: "flex" }}
       >
-        <Box sx={{ display: "flex" }}>
-          <AccountAvatar
-            address={data.proposer}
-            name={""}
-            truncateLenght={8}
-          ></AccountAvatar>
-          <Box sx={{ marginTop: "4px", marginLeft: "8px", display: "flex" }}>
-            <CopyButton text={data.proposer} />
-            <ExplorerLink
-              blockchain={network}
-              path="account"
-              txHash={data.proposer}
-              sx={{ color: "" }}
-            />
-          </Box>
-        </Box>
+        <AccountExplorer
+          address={data.proposer}
+          name=""
+          network={network}
+          containerProps={{ display: "flex" }}
+          boxActionsProps={{
+            marginTop: "4px",
+            marginLeft: "8px",
+            display: "flex",
+          }}
+        />
       </CustomGridItem>
       <CustomGridItem colType="name">Transaction hash:</CustomGridItem>
       <CustomGridItem colType="value">