From 51c29054feb3cdd16f02be909f31fd13deffe255 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Mon, 29 Jan 2024 19:05:57 -0300 Subject: [PATCH] Use formatted address on AddressBook --- .../AddressBook/AddressBookTable.tsx | 41 +++++++++++-------- src/components/AddressBook/index.tsx | 2 +- .../AddressBookWidget/AddressBookItem.tsx | 20 ++++----- src/domain/AddressBooks.ts | 8 +++- src/hooks/addressBook/useListAddressBook.ts | 17 ++++++-- .../xsignerSelected/useGetXsignerSelected.ts | 12 ++++-- src/pages/app/settings.tsx | 11 ++++- src/utils/blockchain.ts | 5 ++- 8 files changed, 74 insertions(+), 42 deletions(-) diff --git a/src/components/AddressBook/AddressBookTable.tsx b/src/components/AddressBook/AddressBookTable.tsx index bf1536da..90ea0222 100644 --- a/src/components/AddressBook/AddressBookTable.tsx +++ b/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([]); 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 ( - {addressBook.isEditable ? ( + {addressBook.isEditing ? ( <> { name="address" label="Required" onChange={(e) => handleChange(e)} - defaultValue={addressBook.address} + defaultValue={addressBook.formattedAddress} sx={{ minWidth: "33rem" }} /> @@ -103,10 +101,17 @@ const AddressBookTable = ({ network }: Props) => { - {addressBook.address} + {addressBook.formattedAddress} {" "} - - + + )} @@ -120,7 +125,7 @@ const AddressBookTable = ({ network }: Props) => { > - {addressBook.isEditable ? ( + {addressBook.isEditing ? ( { There are no registered address in this network ) : ( - + )} { - // TODO: - // Remove this mock variable, replace with true value - const mockURL = "https://polkadot.subscan.io/"; return ( - + - {shortNameLonger(addressBook?.name as string)} -

{truncateAddress(addressBook?.address, 12)}

+ {shortNameLonger(addressBook.name)} +

{truncateAddress(addressBook.formattedAddress, 12)}

 - - + + diff --git a/src/domain/AddressBooks.ts b/src/domain/AddressBooks.ts index 434ad1f6..f699b5f3 100644 --- a/src/domain/AddressBooks.ts +++ b/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; }; diff --git a/src/hooks/addressBook/useListAddressBook.ts b/src/hooks/addressBook/useListAddressBook.ts index 356aa78a..f7aef139 100644 --- a/src/hooks/addressBook/useListAddressBook.ts +++ b/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([]); +export interface UseListAddressBookReturn { + data: AddressBookItemUi[]; + isLoading: boolean; + error: string | null; +} + +export function useListAddressBook( + networkId: string | undefined +): UseListAddressBookReturn { + const [data, setData] = useState([]); const { network } = usePolkadotContext(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(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); diff --git a/src/hooks/xsignerSelected/useGetXsignerSelected.ts b/src/hooks/xsignerSelected/useGetXsignerSelected.ts index 1b572f23..85d51c94 100644 --- a/src/hooks/xsignerSelected/useGetXsignerSelected.ts +++ b/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 + | 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 | null | undefined >(); const getAccount = useCallback(async () => { diff --git a/src/pages/app/settings.tsx b/src/pages/app/settings.tsx index 8db48bfc..f1dd9651 100644 --- a/src/pages/app/settings.tsx +++ b/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() { ) ?? + undefined + } handleAddOwner={handleAddOwner} isDeletedLoading={isLoading} handleDeleteOwner={handleDeleteOwner} diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts index 87c1727e..1e41d5b9 100644 --- a/src/utils/blockchain.ts +++ b/src/utils/blockchain.ts @@ -115,7 +115,8 @@ const networkIdToPrefix: Record = { "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