From ecb72da19b4cc319f2b3aaf97f1330141767409f Mon Sep 17 00:00:00 2001
From: KillariDev <killari@gmail.com>
Date: Tue, 29 Oct 2024 03:42:09 +0200
Subject: [PATCH 1/4] cleanup, fix invalid ens domain error

---
 app/ts/components/App.tsx | 13 ++++++-------
 app/ts/utils/ensUtils.ts  |  2 --
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/ts/components/App.tsx b/app/ts/components/App.tsx
index e056f5f..726f655 100644
--- a/app/ts/components/App.tsx
+++ b/app/ts/components/App.tsx
@@ -62,7 +62,7 @@ export function App() {
 	const inputValue = useSignal<string>('')
 	const contentHashInput = useSignal<string>('')
 	const resolutionAddressInput = useSignal<string>('')
-	const errorString = useOptionalSignal<string>(undefined)
+	const errorString = useSignal<string>('')
 	const loadingAccount = useSignal<boolean>(false)
 	const isWindowEthereum = useSignal<boolean>(true)
 	const areContractsDeployed = useSignal<boolean | undefined>(undefined)
@@ -79,12 +79,11 @@ export function App() {
 
 	const setError = (error: unknown) => {
 		if (error === undefined) {
-			errorString.value = undefined
+			errorString.value = ''
 			return
 		}
 		const ensured = ensureError(error)
-		console.error(error)
-		errorString.deepValue = ensured.message
+		errorString.value = ensured.message
 	}
 
 	const clear = () => {
@@ -129,7 +128,7 @@ export function App() {
 					openRenewalContractIsApproved: currElement.approved === getOpenRenewalManagerAddress() && currElement.fuses.includes('Cannot Approve')
 				}
 			})
-			errorString.value = undefined
+			errorString.value = ''
 		} catch(e: unknown) {
 			setError(e)
 		} finally {
@@ -146,7 +145,7 @@ export function App() {
 			const ensSubDomain = inputValue.value.toLowerCase()
 			if (!isValidEnsSubDomain(ensSubDomain)) {
 				clear()
-				return setError(`${ ensSubDomain } is not a valid ENS subdomain. The format should be similar to "2.horswap.eth" or "1.lunaria.darkflorist.eth."`)
+				return setError(`${ ensSubDomain } is not a valid ENS subdomain. The format should be similar to "2.horswap.eth" or "1.lunaria.darkflorist.eth".`)
 			}
 			setError(undefined)
 			updateInfos(true)
@@ -219,7 +218,7 @@ export function App() {
 			/>
 
 			<LoadingSpinner loading = { loadingInfos.value === true || loadingAccount.value }/>
-			<ErrorComponent message = { errorString } show = { errorString.deepValue !== undefined } />
+			<ErrorComponent message = { errorString.value } show = { errorString.value !== '' } />
 			<ErrorComponent show = { chainId.value !== undefined && chainId.value !== 1 } message = { 'PetalLock functions only on Ethereum Mainnet. Please switch to Ethereum Mainnet.' }/>
 			<EnsRegistryError checkBoxes = { checkBoxes } />
 			<Immutable checkBoxesArray = { checkBoxes } />
diff --git a/app/ts/utils/ensUtils.ts b/app/ts/utils/ensUtils.ts
index 04bbd55..17c50f1 100644
--- a/app/ts/utils/ensUtils.ts
+++ b/app/ts/utils/ensUtils.ts
@@ -175,8 +175,6 @@ export const getRequiredFusesWithoutApproval = (domainIndex: number, domainInfos
 }
 
 export const getRequiredFusesWithApproval = (domainIndex: number, domainInfos: readonly DomainInfo[]) => {
-	console.log('getRequiredFusesWithApproval')
-	console.log(domainInfos)
 	if (domainInfos.length === 1) return SINGLE_DOMAIN_FUSES
 	if (domainIndex === 0 && domainInfos.length > 1) return TOP_PARENT_FUSES
 	if (domainIndex === domainInfos.length - 1) return FINAL_CHILD_FUSES

From 38b39ea778d8646f85a28ee3abb9234d58420a93 Mon Sep 17 00:00:00 2001
From: KillariDev <killari@gmail.com>
Date: Tue, 5 Nov 2024 02:30:26 +0200
Subject: [PATCH 2/4] fix error component hen using optional signal

---
 app/ts/components/App.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/ts/components/App.tsx b/app/ts/components/App.tsx
index 726f655..0534fff 100644
--- a/app/ts/components/App.tsx
+++ b/app/ts/components/App.tsx
@@ -41,13 +41,21 @@ const LoadingSpinner = ({ loading }: LoadingSpinnerProps) => {
 
 interface ErrorComponentProps {
 	show: boolean
-	message: string | OptionalSignal<string>
+	message: string
 }
 const ErrorComponent = ({ show, message }: ErrorComponentProps) => {
 	if (show === false) return <></>
 	return <p class = 'error-component'> { message } </p>
 }
 
+interface OptionalErrorComponentProps {
+	message: OptionalSignal<string>
+}
+const OptionalErrorErrorComponent = ({ message }: OptionalErrorComponentProps) => {
+	if (message.value === undefined) return <></>
+	return <p class = 'error-component'> { message.deepValue } </p>
+}
+
 interface EnsRegistryErrorProps {
 	checkBoxes: OptionalSignal<CheckBoxes>
 }
@@ -62,7 +70,7 @@ export function App() {
 	const inputValue = useSignal<string>('')
 	const contentHashInput = useSignal<string>('')
 	const resolutionAddressInput = useSignal<string>('')
-	const errorString = useSignal<string>('')
+	const errorString = useOptionalSignal<string>(undefined)
 	const loadingAccount = useSignal<boolean>(false)
 	const isWindowEthereum = useSignal<boolean>(true)
 	const areContractsDeployed = useSignal<boolean | undefined>(undefined)
@@ -79,11 +87,11 @@ export function App() {
 
 	const setError = (error: unknown) => {
 		if (error === undefined) {
-			errorString.value = ''
+			errorString.value = undefined
 			return
 		}
 		const ensured = ensureError(error)
-		errorString.value = ensured.message
+		errorString.deepValue = ensured.message
 	}
 
 	const clear = () => {
@@ -128,7 +136,7 @@ export function App() {
 					openRenewalContractIsApproved: currElement.approved === getOpenRenewalManagerAddress() && currElement.fuses.includes('Cannot Approve')
 				}
 			})
-			errorString.value = ''
+			errorString.value = undefined
 		} catch(e: unknown) {
 			setError(e)
 		} finally {
@@ -218,7 +226,7 @@ export function App() {
 			/>
 
 			<LoadingSpinner loading = { loadingInfos.value === true || loadingAccount.value }/>
-			<ErrorComponent message = { errorString.value } show = { errorString.value !== '' } />
+			<OptionalErrorErrorComponent message = { errorString }/>
 			<ErrorComponent show = { chainId.value !== undefined && chainId.value !== 1 } message = { 'PetalLock functions only on Ethereum Mainnet. Please switch to Ethereum Mainnet.' }/>
 			<EnsRegistryError checkBoxes = { checkBoxes } />
 			<Immutable checkBoxesArray = { checkBoxes } />

From e7b5b6c3d45ff3ccf2d1f23de7964e692de4bc60 Mon Sep 17 00:00:00 2001
From: KillariDev <killari@gmail.com>
Date: Thu, 7 Nov 2024 05:32:06 +0200
Subject: [PATCH 3/4] cleanup display error

---
 app/ts/components/requirements.tsx | 38 ++++++++++++------------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/app/ts/components/requirements.tsx b/app/ts/components/requirements.tsx
index 3b75ab0..5092459 100644
--- a/app/ts/components/requirements.tsx
+++ b/app/ts/components/requirements.tsx
@@ -144,21 +144,14 @@ export const DeployContract = ({ areContractsDeployed, deploy }: DeployProps) =>
 	return <></>
 }
 
-interface DisplayErrorStringIfNotUndefinedProps {
-	maybeString: Signal<string | undefined>
-}
-const DisplayErrorStringIfNotUndefined = ({ maybeString }: DisplayErrorStringIfNotUndefinedProps) => {
-	if (maybeString.value === undefined) return <></>
-	return <p class = 'paragraph' style = 'color: #b43c42'> { maybeString.value } </p>
-}
-
-interface DisplayErrorStringIfVariableTrueProps {
-	displayError: boolean
-	message: string
-}
-const DisplayErrorStringIfVariableTrue = ({ message, displayError }: DisplayErrorStringIfVariableTrueProps) => {
-	if (displayError === false) return <></>
-	return <p class = 'paragraph' style = 'color: #b43c42'> { message } </p>
+type DisplayErrorProps  = { displayError: boolean, message: string } | { message: OptionalSignal<string> | ReadonlySignal<string | undefined> }
+const DisplayError = (props: DisplayErrorProps) => {
+	if (!('displayError' in props)) {
+		if (props.message.value === undefined) return <></>
+		return <p class = 'paragraph' style = 'color: #b43c42'> { props.message.value } </p>
+	}
+	if (props.displayError === false) return <></>
+	return <p class = 'paragraph' style = 'color: #b43c42'> { props.message } </p>
 }
 
 interface ContentHashErrorProps {
@@ -169,11 +162,10 @@ const ContentHashError = ({ contentHashInput, validContenthash }: ContentHashErr
 	if (validContenthash.value === true) return <></>
 	if (contentHashInput.value.length === 0) return <></>
 	const separator = contentHashInput.value.includes('://')
-	if (separator === false) return <DisplayErrorStringIfVariableTrue displayError = { true } message = ' - Content hash needs to include protocol and hash, eg ("ipfs://bafy...")'/>
-	return <DisplayErrorStringIfVariableTrue displayError = { true } message = ' - Content hash is not valid'/>
+	if (separator === false) return <DisplayError displayError = { true } message = ' - Content hash needs to include protocol and hash, eg ("ipfs://bafy...")'/>
+	return <DisplayError displayError = { true } message = ' - Content hash is not valid'/>
 }
 
-
 interface ImmutableDomainProps {
 	checkBoxes: OptionalSignal<CheckBoxes>
 	extendYear: Signal<number>
@@ -333,12 +325,12 @@ const NonImmutableDomain = ({ checkBoxes, maybeAccountAddress, updateInfos, crea
 			</div>
 		</div>
 		<div style = 'padding: 10px; display: block;' key = 'issues'>
-			<DisplayErrorStringIfNotUndefined maybeString = { domainExistIssue } />
+			<DisplayError message = { domainExistIssue } />
 			<ContentHashError validContenthash = { validContenthash } contentHashInput = { contentHashInput }/>
-			<DisplayErrorStringIfVariableTrue displayError = { !(validResolutionAddress.value || resolutionAddressInput.value.length === 0) } message = ' - Resolution address is not a valid address'/>
-			<DisplayErrorStringIfVariableTrue displayError = { !(validContenthash.value || validResolutionAddress.value) } message = ' - Set content hash or resolution address or both'/>
-			<DisplayErrorStringIfNotUndefined maybeString = { wrappedIssues } />
-			<DisplayErrorStringIfNotUndefined maybeString = { ownershipIssues } />
+			<DisplayError displayError = { !(validResolutionAddress.value || resolutionAddressInput.value.length === 0) } message = ' - Resolution address is not a valid address'/>
+			<DisplayError displayError = { !(validContenthash.value || validResolutionAddress.value) } message = ' - Set content hash or resolution address or both'/>
+			<DisplayError message = { wrappedIssues } />
+			<DisplayError message = { ownershipIssues } />
 			<SwitchAddress requirementsMet = { loadingInfos.value } maybeAccountAddress = { maybeAccountAddress } maybeSigningAddress = { maybeSigningAddress }/>
 		</div>
 		<button style = 'font-size: 3em;' class = 'button is-primary' disabled = { ownershipIssues.value !== undefined || wrappedIssues.value !== undefined || areContractsDeployed.value !== true || !contentSetProperly.value || !rightAddress.value || checkBoxes.deepValue === undefined || loadingInfos.value || creating.value } onClick = { makeImmutable }> Make immutable { creating.value ? <Spinner/> : <></> }</button>

From ab99c6f120999a4f736150e245949765468ca22e Mon Sep 17 00:00:00 2001
From: KillariDev <killari@gmail.com>
Date: Thu, 7 Nov 2024 05:41:55 +0200
Subject: [PATCH 4/4] fix component here as well

---
 app/ts/components/App.tsx | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/app/ts/components/App.tsx b/app/ts/components/App.tsx
index 0534fff..97a591c 100644
--- a/app/ts/components/App.tsx
+++ b/app/ts/components/App.tsx
@@ -39,21 +39,14 @@ const LoadingSpinner = ({ loading }: LoadingSpinnerProps) => {
 	</div>
 }
 
-interface ErrorComponentProps {
-	show: boolean
-	message: string
-}
-const ErrorComponent = ({ show, message }: ErrorComponentProps) => {
-	if (show === false) return <></>
-	return <p class = 'error-component'> { message } </p>
-}
-
-interface OptionalErrorComponentProps {
-	message: OptionalSignal<string>
-}
-const OptionalErrorErrorComponent = ({ message }: OptionalErrorComponentProps) => {
-	if (message.value === undefined) return <></>
-	return <p class = 'error-component'> { message.deepValue } </p>
+type ErrorComponentProps  = { displayError: boolean, message: string } | { message: OptionalSignal<string> }
+const ErrorComponent = (props: ErrorComponentProps) => {
+	if (!('displayError' in props)) {
+		if (props.message.value === undefined) return <></>
+		return <p class = 'error-component'> { props.message.value } </p>
+	}
+	if (props.displayError === false) return <></>
+	return <p class = 'error-component'> { props.message } </p>
 }
 
 interface EnsRegistryErrorProps {
@@ -226,8 +219,8 @@ export function App() {
 			/>
 
 			<LoadingSpinner loading = { loadingInfos.value === true || loadingAccount.value }/>
-			<OptionalErrorErrorComponent message = { errorString }/>
-			<ErrorComponent show = { chainId.value !== undefined && chainId.value !== 1 } message = { 'PetalLock functions only on Ethereum Mainnet. Please switch to Ethereum Mainnet.' }/>
+			<ErrorComponent message = { errorString }/>
+			<ErrorComponent displayError = { chainId.value !== undefined && chainId.value !== 1 } message = { 'PetalLock functions only on Ethereum Mainnet. Please switch to Ethereum Mainnet.' }/>
 			<EnsRegistryError checkBoxes = { checkBoxes } />
 			<Immutable checkBoxesArray = { checkBoxes } />
 			<Requirements checkBoxesArray = { checkBoxes }/>