Merge pull request #1629 from kleros/refactor/update-aliases-to-an-object

fix(web): update-alias-to-object

Author: jaybuidl

web/src/components/DisputePreview/Alias.tsx

@@ -5,9 +5,6 @@ import Skeleton from "react-loading-skeleton";
 import { isAddress } from "viem";
 import { useEnsAddress } from "wagmi";
 
-import { Alias } from "context/NewDisputeContext";
-import { isUndefined } from "utils/index";
-
 import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
 
 const AliasContainer = styled.div`
@@ -26,28 +23,29 @@ const TextContainer = styled.div`
 `;
 
 interface IAlias {
-  alias: Alias;
+  name: string;
+  address: `0x${string}`;
 }
 
-const AliasDisplay: React.FC<IAlias> = ({ alias }) => {
+const AliasDisplay: React.FC<IAlias> = ({ name, address }) => {
   const { data: addressFromENS, isLoading } = useEnsAddress({
     query: {
       // if alias.address is not an Address, we treat it as ENS and try to fetch address from there
-      enabled: !isAddress(alias.address),
+      enabled: !isAddress(address),
     },
-    name: alias.address,
+    name: address,
     chainId: 1,
   });
 
   // try fetching ens name, else go with address
-  const address = addressFromENS ?? (alias.address as `0x${string}`);
+  const resolvedAddress = addressFromENS ?? (address as `0x${string}`);
 
   return (
     <AliasContainer>
-      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={address} size="24" />}
+      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={resolvedAddress} size="24" />}
       <TextContainer>
-        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={address} />}&nbsp;
-        {!isUndefined(alias.name) && alias.name !== "" ? <label>({alias.name})</label> : null}
+        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={resolvedAddress} />}&nbsp;
+        <label>({name})</label>
       </TextContainer>
     </AliasContainer>
   );

web/src/components/DisputePreview/DisputeContext.tsx

@@ -103,8 +103,8 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         <>
           <Divider />
           <AliasesContainer>
-            {disputeDetails.aliases.map((alias) => (
-              <AliasDisplay alias={alias} key={alias.address} />
+            {Object.keys(disputeDetails.aliases).map((key) => (
+              <AliasDisplay name={key} key={key} address={disputeDetails.aliases[key]} />
             ))}
           </AliasesContainer>
         </>

web/src/context/NewDisputeContext.tsx

@@ -12,16 +12,16 @@ export type Answer = {
   reserved?: boolean;
 };
 
-export type Alias = {
+export type AliasArray = {
   id?: string;
   name: string;
   address: string | Address;
   isValid?: boolean;
 };
 
+export type Alias = Record<string, string>;
 export interface IDisputeTemplate {
   answers: Answer[];
-  aliases?: Alias[];
   arbitrableAddress?: string;
   arbitrableChainID?: string;
   arbitratorAddress?: string;
@@ -34,6 +34,7 @@ export interface IDisputeTemplate {
   question: string;
   specification?: string;
   title: string;
+  aliases?: Alias;
   // attachment: Attachment;
   // type: string;
 }
@@ -42,6 +43,7 @@ interface IDisputeData extends IDisputeTemplate {
   courtId?: string;
   numberOfJurors: number;
   arbitrationCost?: string;
+  aliasesArray?: AliasArray[];
 }
 
 interface INewDisputeContext {
@@ -64,7 +66,7 @@ const initialDisputeData: IDisputeData = {
     { title: "", id: "1" },
     { title: "", id: "2" },
   ],
-  aliases: [
+  aliasesArray: [
     { name: "", address: "", id: "1" },
     { name: "", address: "", id: "2" },
   ],
@@ -113,13 +115,22 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 };
 
 const constructDisputeTemplate = (disputeData: IDisputeData) => {
-  const baseTemplate = { ...disputeData } as IDisputeTemplate;
+  const baseTemplate = { ...disputeData };
 
-  if (!isUndefined(baseTemplate.aliases)) {
-    baseTemplate.aliases = baseTemplate.aliases.filter((item) => item.address !== "" && item.isValid);
-    if (baseTemplate.aliases.length === 0) delete baseTemplate.aliases;
+  if (!isUndefined(baseTemplate.aliasesArray)) {
+    baseTemplate.aliasesArray = baseTemplate.aliasesArray.filter((item) => item.address !== "" && item.isValid);
+    if (baseTemplate.aliasesArray.length === 0) delete baseTemplate.aliasesArray;
+    else {
+      const aliases: Alias = {};
+
+      for (const alias of baseTemplate.aliasesArray) {
+        aliases[alias.name] = alias.address;
+      }
+
+      baseTemplate.aliases = aliases;
+    }
   }
   if (!isUndefined(baseTemplate.policyURI) && baseTemplate.policyURI === "") delete baseTemplate.policyURI;
 
-  return baseTemplate;
+  return baseTemplate as IDisputeTemplate;
 };

web/src/pages/Resolver/NavigationButtons/NextButton.tsx

@@ -20,7 +20,9 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
     disputeData.question !== "" && disputeData.answers.every((answer) => answer.title !== "");
 
   //check if any filled address or ens is invalid
-  const areFilledAddressesValid = disputeData?.aliases?.every((alias) => alias.address === "" || alias.isValid);
+  const areFilledAddressesValid = disputeData?.aliasesArray?.every(
+    (alias) => alias.address !== "" && alias.isValid && alias.name !== ""
+  );
 
   const isButtonDisabled =
     (location.pathname.includes("/resolver/title") && !disputeData.title) ||

web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 
 import { usePublicClient } from "wagmi";
 
-import { Alias, useNewDisputeContext } from "context/NewDisputeContext";
+import { AliasArray, useNewDisputeContext } from "context/NewDisputeContext";
 import { isUndefined } from "utils/index";
 import { validateAddress } from "utils/validateAddressOrEns";
 
@@ -41,7 +41,7 @@ const AliasContainer = styled.div`
 const PersonFields: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
   const validationTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const publicClient = usePublicClient();
+  const publicClient = usePublicClient({ chainId: 1 });
 
   const debounceValidateAddress = (address: string, key: number) => {
     // Clear the existing timer
@@ -52,32 +52,32 @@ const PersonFields: React.FC = () => {
     // Set a new timer for validation after 500 milliseconds
     validationTimerRef.current = setTimeout(async () => {
       const isValid = await validateAddress(address, publicClient);
-      const updatedAliases = disputeData.aliases;
+      const updatedAliases = disputeData.aliasesArray;
       if (isUndefined(updatedAliases) || isUndefined(updatedAliases[key])) return;
       updatedAliases[key].isValid = isValid;
 
-      setDisputeData({ ...disputeData, aliases: updatedAliases });
+      setDisputeData({ ...disputeData, aliasesArray: updatedAliases });
     }, 500);
   };
   const handleAliasesWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     const key = parseInt(event.target.id.replace(/\D/g, ""), 10) - 1;
-    const aliases = disputeData.aliases;
+    const aliases = disputeData.aliasesArray;
     if (isUndefined(aliases)) return;
 
     aliases[key] = { ...aliases[key], [event.target.name]: event.target.value };
-    setDisputeData({ ...disputeData, aliases });
+    setDisputeData({ ...disputeData, aliasesArray: aliases });
 
     //since resolving ens is async, we update asynchronously too with debounce
     event.target.name === "address" && debounceValidateAddress(event.target.value, key);
   };
 
-  const showError = (alias: Alias) => {
+  const showError = (alias: AliasArray) => {
     return alias.address !== "" && !alias.isValid;
   };
 
   return (
     <Container>
-      {disputeData.aliases?.map((alias, index) => (
+      {disputeData.aliasesArray?.map((alias, index) => (
         <AliasContainer key={alias?.id}>
           <LabeledInput
             name="name"

web/src/pages/Resolver/Parameters/NotablePersons/index.tsx

@@ -26,22 +26,22 @@ const NotablePersons: React.FC = () => {
 
   //value here is the total number of fields-
   const updateNumberOfAliases = (value: number) => {
-    let defaultAlias = { name: "", address: "", id: value.toString() };
-    let aliases = disputeData.aliases;
+    const defaultAlias = { name: "", address: "", id: value.toString() };
+    const aliases = disputeData.aliasesArray;
 
     if (isUndefined(aliases)) {
-      return setDisputeData({ ...disputeData, aliases: [defaultAlias] });
+      return setDisputeData({ ...disputeData, aliasesArray: [defaultAlias] });
     }
-    if (value < aliases?.length) return setDisputeData({ ...disputeData, aliases: aliases.splice(0, value) });
-    if (value > aliases?.length) return setDisputeData({ ...disputeData, aliases: [...aliases, defaultAlias] });
+    if (value < aliases?.length) return setDisputeData({ ...disputeData, aliasesArray: aliases.splice(0, value) });
+    if (value > aliases?.length) return setDisputeData({ ...disputeData, aliasesArray: [...aliases, defaultAlias] });
   };
 
   return (
     <Container>
       <Header text="Notable Persons" />
       <PersonFields />
       <StyledPlusMinusField
-        currentValue={disputeData.aliases?.length ?? 2}
+        currentValue={disputeData.aliasesArray?.length ?? 2}
         updateValue={updateNumberOfAliases}
         minValue={2}
       />