From 46e0c0cdeb4defd8c53e38406e8883950b7c235f Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 26 Jun 2024 19:35:52 +0530 Subject: [PATCH 1/3] fix(web): update-alias-to-object --- web/src/components/DisputePreview/Alias.tsx | 17 +++++----- .../DisputePreview/DisputeContext.tsx | 4 +-- web/src/context/NewDisputeContext.tsx | 27 ++++++++++----- .../Resolver/NavigationButtons/NextButton.tsx | 4 ++- .../NotablePersons/PersonFields.tsx | 14 ++++---- .../Parameters/NotablePersons/index.tsx | 12 +++---- web/src/pages/Resolver/index.tsx | 34 +++++++++---------- 7 files changed, 63 insertions(+), 49 deletions(-) diff --git a/web/src/components/DisputePreview/Alias.tsx b/web/src/components/DisputePreview/Alias.tsx index cbf420c87..2cda69f1c 100644 --- a/web/src/components/DisputePreview/Alias.tsx +++ b/web/src/components/DisputePreview/Alias.tsx @@ -26,28 +26,29 @@ const TextContainer = styled.div` `; interface IAlias { - alias: Alias; + name: string; + address: `0x${string}`; } -const AliasDisplay: React.FC = ({ alias }) => { +const AliasDisplay: React.FC = ({ 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 ( - {isLoading ? : } + {isLoading ? : } - {isLoading ? : }  - {!isUndefined(alias.name) && alias.name !== "" ? : null} + {isLoading ? : }  + ); diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 647666d56..2a381484e 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -103,8 +103,8 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp <> - {disputeDetails.aliases.map((alias) => ( - + {Object.keys(disputeDetails.aliases).map((key) => ( + ))} diff --git a/web/src/context/NewDisputeContext.tsx b/web/src/context/NewDisputeContext.tsx index c614039db..1c5606a4d 100644 --- a/web/src/context/NewDisputeContext.tsx +++ b/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; 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; }; diff --git a/web/src/pages/Resolver/NavigationButtons/NextButton.tsx b/web/src/pages/Resolver/NavigationButtons/NextButton.tsx index ee09f2a49..21ba5737a 100644 --- a/web/src/pages/Resolver/NavigationButtons/NextButton.tsx +++ b/web/src/pages/Resolver/NavigationButtons/NextButton.tsx @@ -20,7 +20,9 @@ const NextButton: React.FC = ({ 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) || diff --git a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx index 3ae4ddf79..65cf5ebac 100644 --- a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx +++ b/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"; @@ -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) => { 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 ( - {disputeData.aliases?.map((alias, index) => ( + {disputeData.aliasesArray?.map((alias, index) => ( { //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 ( @@ -41,7 +41,7 @@ const NotablePersons: React.FC = () => {
diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 7a25d2495..36e55b4ce 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -76,24 +76,24 @@ const DisputeResolver: React.FC = () => { {isConnected && !isPreviewPage ? Start a case : null} {isConnected ? ( - - - {isConnected && !isPreviewPage ? : null} - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - + // + + {isConnected && !isPreviewPage ? : null} + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ) : ( + // To create a new dispute, connect first
From d08ca07c78c217e23d8ad01d984c80974660b6fa Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 26 Jun 2024 20:15:00 +0530 Subject: [PATCH 2/3] refactor(web): remove-unused-imports --- web/src/components/DisputePreview/Alias.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/web/src/components/DisputePreview/Alias.tsx b/web/src/components/DisputePreview/Alias.tsx index 2cda69f1c..60823df03 100644 --- a/web/src/components/DisputePreview/Alias.tsx +++ b/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` From 2abad9ff3f7609416b834a69da2c7ec1d0526e55 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 26 Jun 2024 21:01:36 +0530 Subject: [PATCH 3/3] fix(web): fix-bugs-with-ens-resolving --- .../NotablePersons/PersonFields.tsx | 2 +- web/src/pages/Resolver/index.tsx | 34 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx index 65cf5ebac..ad7ec4e74 100644 --- a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx +++ b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx @@ -41,7 +41,7 @@ const AliasContainer = styled.div` const PersonFields: React.FC = () => { const { disputeData, setDisputeData } = useNewDisputeContext(); const validationTimerRef = useRef(null); - const publicClient = usePublicClient(); + const publicClient = usePublicClient({ chainId: 1 }); const debounceValidateAddress = (address: string, key: number) => { // Clear the existing timer diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 36e55b4ce..7a25d2495 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -76,24 +76,24 @@ const DisputeResolver: React.FC = () => { {isConnected && !isPreviewPage ? Start a case : null} {isConnected ? ( - // - - {isConnected && !isPreviewPage ? : null} - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + + + {isConnected && !isPreviewPage ? : null} + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ) : ( - // To create a new dispute, connect first