refactor(web): fix-code-smells

web/src/components/DisputePreview/Alias.tsx

@@ -25,8 +25,8 @@ interface IAlias {
   alias: Alias;
 }
 
-const Alias: React.FC<IAlias> = ({ alias }) => {
-  let address: string | `0x${string}`;
+const AliasDisplay: React.FC<IAlias> = ({ alias }) => {
+  let address: string;
 
   const { data: addressFromENS, isLoading } = useEnsAddress({
     enabled: !isAddress(alias.address), //if alias.address is not an Address, we treat it as ENS and try to fetch address from there
@@ -49,4 +49,4 @@ const Alias: React.FC<IAlias> = ({ alias }) => {
   );
 };
 
-export default Alias;
+export default AliasDisplay;

web/src/components/DisputePreview/DisputeContext.tsx

@@ -3,8 +3,8 @@ import ReactMarkdown from "components/ReactMarkdown";
 import styled from "styled-components";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
-import { Answer, IDisputeTemplate } from "context/NewDisputeContext";
-import Alias from "./Alias";
+import { Answer as IAnswer, IDisputeTemplate } from "context/NewDisputeContext";
+import AliasDisplay from "./Alias";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -81,8 +81,8 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
       <VotingOptions>
         {isUndefined(disputeTemplate) ? null : <h3>Voting Options</h3>}
         <AnswersContainer>
-          {disputeTemplate?.answers?.map((answer: Answer, i: number) => (
-            <Answer key={i}>
+          {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
+            <Answer key={`${answer.title}-${i}`}>
               <small>Option {i + 1}:</small>
               <label>{answer.title}</label>
             </Answer>
@@ -95,7 +95,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
           <Divider />
           <AliasesContainer>
             {disputeTemplate.aliases.map((alias, index) => (
-              <Alias alias={alias} key={index} />
+              <AliasDisplay alias={alias} key={`${alias.address}-${index}`} />
             ))}
           </AliasesContainer>
         </>

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

@@ -17,7 +17,7 @@ const StyledButton = styled(Button)``;
 const SubmitDisputeButton: React.FC = () => {
   const publicClient = usePublicClient();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
-  const [disputeId, setDisputeID] = useState<number>();
+  const [disputeId, setDisputeId] = useState<number>();
 
   const { disputeTemplate, disputeData, resetDisputeData, isSubmittingCase, setIsSubmittingCase } =
     useNewDisputeContext();
@@ -54,7 +54,7 @@ const SubmitDisputeButton: React.FC = () => {
                 if (res.status === "success") {
                   //TODO: better way or maybe log decoding to get the disputeID
                   const id = parseInt(res.logs[0].topics[1], 16);
-                  setDisputeID(id);
+                  setDisputeId(id);
                   setIsPopupOpen(true);
                 }
 

web/src/pages/Resolver/Preview/index.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import DisputeInfo from "components/DisputeCard/DisputeInfo";
 import { responsiveSize } from "styles/responsiveSize";
 import { DisputeContext } from "components/DisputePreview/DisputeContext";
 import { Policies } from "components/DisputePreview/Policies";
 import { Card } from "@kleros/ui-components-library";
 import { landscapeStyle } from "styles/landscapeStyle";
-import { css } from "styled-components";
 import NavigationButtons from "../NavigationButtons";
 import { useNewDisputeContext } from "context/NewDisputeContext";