Use formatted address on AddressBook

src/components/AddressBook/AddressBookTable.tsx

@@ -11,42 +11,40 @@ import {
 import React, { useEffect, useState } from "react";
 
 import { getChain } from "@/config/chain";
-import { AddressBookInput } from "@/domain/AddressBooks";
+import { AddressBookInput, AddressBookItemUi } from "@/domain/AddressBooks";
 import { useDeleteAddressBook } from "@/hooks/addressBook/useDeleteAddressBook";
-import { useListAddressBook } from "@/hooks/addressBook/useListAddressBook";
 import { useUpdateAddressBook } from "@/hooks/addressBook/useUpdateAddressBook";
 import { ChainId } from "@/services/useink/types";
+import { getExplorerUrl } from "@/utils/blockchain";
 
 import CopyButton from "../common/CopyButton";
 import OpenNewTabButton from "../common/OpenNewTabButton";
 import SvgIconButton from "../common/SvgIconButton";
 import NetworkBadge from "../NetworkBadge";
 
-// TODO:
-// Remove this mock variable, replace with true value
-const mockURL = "https://polkadot.subscan.io/";
-
 type Props = {
   network: ChainId;
+  addressBookItems: AddressBookItemUi[];
 };
 
-const AddressBookTable = ({ network }: Props) => {
-  const { data } = useListAddressBook(network);
+const AddressBookTable = ({ network, addressBookItems }: Props) => {
   const { updateAddressBook, handleChange } = useUpdateAddressBook();
   const { deleteAddressBook } = useDeleteAddressBook();
   const [tempData, setTempData] = useState<AddressBookInput[]>([]);
 
   useEffect(() => {
-    setTempData(data as AddressBookInput[]);
-  }, [data]);
+    setTempData(
+      addressBookItems.map((item) => ({ ...item, isEditing: false }))
+    );
+  }, [addressBookItems]);
 
   const editAddressBook = (address: string) => {
-    const tempData = data as AddressBookInput[];
+    const tempData = addressBookItems as AddressBookInput[];
     const obj = tempData?.map((element) => {
       if (element.address === address) {
         return {
           ...element,
-          isEditable: !element.isEditable,
+          isEditing: !element.isEditing,
         };
       }
       return element;
@@ -70,7 +68,7 @@ const AddressBookTable = ({ network }: Props) => {
             const chain = getChain(addressBook.networkId);
             return (
               <TableRow key={index}>
-                {addressBook.isEditable ? (
+                {addressBook.isEditing ? (
                   <>
                     <TableCell>
                       <TextField
@@ -89,7 +87,7 @@ const AddressBookTable = ({ network }: Props) => {
                         name="address"
                         label="Required"
                         onChange={(e) => handleChange(e)}
-                        defaultValue={addressBook.address}
+                        defaultValue={addressBook.formattedAddress}
                         sx={{ minWidth: "33rem" }}
                       />
                     </TableCell>
@@ -103,10 +101,17 @@ const AddressBookTable = ({ network }: Props) => {
                     </TableCell>
                     <TableCell>
                       <Typography variant="body1" component="span">
-                        {addressBook.address}
+                        {addressBook.formattedAddress}
                       </Typography>{" "}
-                      <CopyButton text={addressBook?.address as string} />
-                      <OpenNewTabButton text={mockURL} />
+                      <CopyButton
+                        text={addressBook?.formattedAddress as string}
+                      />
+                      <OpenNewTabButton
+                        text={getExplorerUrl(
+                          network,
+                          addressBook.formattedAddress
+                        )}
+                      />
                     </TableCell>
                   </>
                 )}
@@ -120,7 +125,7 @@ const AddressBookTable = ({ network }: Props) => {
                   ></NetworkBadge>
                 </TableCell>
                 <TableCell>
-                  {addressBook.isEditable ? (
+                  {addressBook.isEditing ? (
                     <SvgIconButton
                       initialToolTipText="Save"
                       icon={TaskAlt}

src/components/AddressBook/index.tsx

@@ -46,7 +46,7 @@ export const AddressBookContainer = ({ network }: Props) => {
             <NoItems>There are no registered address in this network</NoItems>
           </StyledList>
         ) : (
-          <AddressBookTable network={network} />
+          <AddressBookTable network={network} addressBookItems={data} />
         )}
       </AddressBookWidgetStyled>
       <ModalAddressBook

src/components/AddressBookWidget/AddressBookItem.tsx

@@ -5,7 +5,8 @@ import * as React from "react";
 import CopyButton from "@/components/common/CopyButton";
 import OpenNewTabButton from "@/components/common/OpenNewTabButton";
 import { ChainExtended } from "@/config/chain";
-import { AddressBook } from "@/domain/AddressBooks";
+import { AddressBookItemUi } from "@/domain/AddressBooks";
+import { getExplorerUrl } from "@/utils/blockchain";
 import { shortNameLonger, truncateAddress } from "@/utils/formatString";
 
 import {
@@ -17,27 +18,26 @@ import {
 } from "./styled";
 
 interface Props {
-  addressBook: AddressBook | null;
+  addressBook: AddressBookItemUi;
   network: ChainExtended;
 }
 
 export const AddressBookItem = ({ addressBook, network }: Props) => {
-  // TODO:
-  // Remove this mock variable, replace with true value
-  const mockURL = "https://polkadot.subscan.io/";
   return (
     <ListItemstyled>
       <StyledBox>
         <Avatar>
-          <Identicon value={addressBook?.address} size={32} theme="beachball" />
+          <Identicon value={addressBook.address} size={32} theme="beachball" />
         </Avatar>
         <StyledStack>
-          <span>{shortNameLonger(addressBook?.name as string)}</span>
-          <p>{truncateAddress(addressBook?.address, 12)}</p>
+          <span>{shortNameLonger(addressBook.name)}</span>
+          <p>{truncateAddress(addressBook.formattedAddress, 12)}</p>
         </StyledStack>
         <IconBoxStyled>
-          <CopyButton text={addressBook?.address as string}></CopyButton>
-          <OpenNewTabButton text={mockURL} />
+          <CopyButton text={addressBook.formattedAddress}></CopyButton>
+          <OpenNewTabButton
+            text={getExplorerUrl(network.id, addressBook?.formattedAddress)}
+          />
         </IconBoxStyled>
         <NetworkBoxStyled>
           <Avatar src={network?.logo.src} alt={network?.logo.alt} />

src/domain/AddressBooks.ts

@@ -6,6 +6,10 @@ export interface AddressBook {
   networkId: Chain["id"];
 }
 
-export type AddressBookInput = AddressBook & {
-  isEditable: boolean;
+export interface AddressBookItemUi extends AddressBook {
+  formattedAddress: string;
+}
+
+export type AddressBookInput = AddressBookItemUi & {
+  isEditing: boolean;
 };

src/hooks/addressBook/useListAddressBook.ts

@@ -2,14 +2,22 @@ import { useCallback, useEffect, useState } from "react";
 
 import { useLocalDbContext } from "@/context/uselocalDbContext";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
-import { AddressBook } from "@/domain/AddressBooks";
+import { AddressBookItemUi } from "@/domain/AddressBooks";
 import { AddressBookEvents } from "@/domain/events/AddressBookEvents";
 import { useEventListenerCallback } from "@/hooks/useEventListenerCallback";
 import { formatAddressForNetwork } from "@/utils/blockchain";
 import { customReportError } from "@/utils/error";
 
-export function useListAddressBook(networkId: string | undefined) {
-  const [data, setData] = useState<AddressBook[]>([]);
+export interface UseListAddressBookReturn {
+  data: AddressBookItemUi[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+export function useListAddressBook(
+  networkId: string | undefined
+): UseListAddressBookReturn {
+  const [data, setData] = useState<AddressBookItemUi[]>([]);
   const { network } = usePolkadotContext();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -24,7 +32,8 @@ export function useListAddressBook(networkId: string | undefined) {
       if (!result) return [];
       const newData = result.map((element) => ({
         ...element,
-        address: formatAddressForNetwork(element.address, network),
+        address: element.address,
+        formattedAddress: formatAddressForNetwork(element.address, network),
         isEditable: false,
       }));
       setData(newData);

src/hooks/xsignerSelected/useGetXsignerSelected.ts

@@ -3,14 +3,20 @@ import { useCallback, useEffect, useState } from "react";
 import { useLocalDbContext } from "@/context/uselocalDbContext";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
 import { XsignerAccountEvents } from "@/domain/events/XsignerAccountEvents";
-import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
+import {
+  CrossOwnerWithAddressBook,
+  SignatoriesAccount,
+} from "@/domain/SignatoriesAccount";
 import { createArrayOneOrMore } from "@/domain/utilityTsTypes";
 import { getHexAddress } from "@/utils/blockchain";
 
 import { useEventListenerCallback } from "../useEventListenerCallback";
 
 interface UseGetXsignerSelectedReturn {
-  xSignerSelected: SignatoriesAccount | null | undefined;
+  xSignerSelected:
+    | SignatoriesAccount<CrossOwnerWithAddressBook>
+    | null
+    | undefined;
 }
 
 export function useGetXsignerSelected(): UseGetXsignerSelectedReturn {
@@ -21,7 +27,7 @@ export function useGetXsignerSelected(): UseGetXsignerSelectedReturn {
   } = useLocalDbContext();
   const { network } = usePolkadotContext();
   const [xSignerSelected, setXsignerSelected] = useState<
-    SignatoriesAccount | null | undefined
+    SignatoriesAccount<CrossOwnerWithAddressBook> | null | undefined
   >();
 
   const getAccount = useCallback(async () => {

src/pages/app/settings.tsx

@@ -14,7 +14,11 @@ import { StepProps } from "@/components/StepperSignersAccount/constants";
 import { useManagerActiveStep } from "@/components/StepperSignersAccount/useManagerActiveStep";
 import { useContractTx } from "@/components/TxBuilderStepper/ProposeTxStep/useContractTx";
 import { useLocalDbContext } from "@/context/uselocalDbContext";
-import { Owner, SignatoriesAccount } from "@/domain/SignatoriesAccount";
+import {
+  CrossOwnerWithAddressBook,
+  Owner,
+  SignatoriesAccount,
+} from "@/domain/SignatoriesAccount";
 import { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { useDryRunExecution } from "@/hooks/useDryRunExecution";
 import { useFormSignersAccountState } from "@/hooks/xsignersAccount/useFormSignersAccountState";
@@ -299,7 +303,10 @@ export default function SettingsPage() {
           </Box>
           <Box mt={2} bgcolor={theme.palette.grey.A100} p={3}>
             <ManageOwners
-              selectedMultisig={selectedMultisig ?? undefined}
+              selectedMultisig={
+                (selectedMultisig as SignatoriesAccount<CrossOwnerWithAddressBook>) ??
+                undefined
+              }
               handleAddOwner={handleAddOwner}
               isDeletedLoading={isLoading}
               handleDeleteOwner={handleDeleteOwner}

src/utils/blockchain.ts

@@ -115,7 +115,8 @@ const networkIdToPrefix: Record<string, number> = {
   "rococo-contracts-testnet": 42,
 };
 
-export const getHexAddress = (address: string) => ss58.decode(address).bytes;
+export const getHexAddress = (address: string) =>
+  isHex(address) ? address : ss58.decode(address).bytes;
 
 /**
  * Checks if two Polkadot/Kusama addresses are equal.
@@ -148,7 +149,7 @@ export const areAddressesEqual = (
  * it defaults to using a prefix of 42, commonly used for generic or development purposes.
  */
 export const formatAddressForNetwork = (address: string, networkId: string) => {
-  const rawAddress = isHex(address) ? address : ss58.decode(address).bytes;
+  const rawAddress = getHexAddress(address);
 
   const prefix =
     networkIdToPrefix[networkId] !== undefined