Skip to content

Commit

Permalink
Merge pull request #52 from DarkFlorist/optsignal
Browse files Browse the repository at this point in the history 
use optional signal
  • Loading branch information
@KillariDev
KillariDev authored Sep 17, 2024
2 parents ee5de16 + a4c9fd0 commit 42b4816
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 44 deletions.
36 changes: 18 additions & 18 deletions app/ts/components/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { Signal, useSignal } from '@preact/signals'
import { useSignal } from '@preact/signals'
import { useEffect, useRef } from 'preact/hooks'
import { requestAccounts, isValidEnsSubDomain, isChildOwnershipOwnedByOpenRenewManager, getAccounts, getDomainInfos, isPetalLockAndOpenRenewalManagerDeployed, getOpenRenewalManagerAddress, areRequiredFusesBurnt } from '../utils/ensUtils.js'
import { BigSpinner } from './Spinner.js'
import { ensureError } from '../utils/utilities.js'
import { AccountAddress, CheckBoxes, DomainInfo, FinalChildChecks, ParentChecks } from '../types/types.js'
import { Create, Immutable, Requirements } from './requirements.js'
import { useOptionalSignal } from '../utils/OptionalSignal.js'
import { OptionalSignal, useOptionalSignal } from '../utils/OptionalSignal.js'
import { getChainId } from '../utils/ensUtils.js'

interface WalletComponentProps {
accountAddress: Signal<AccountAddress | undefined>
maybeAccountAddress: OptionalSignal<AccountAddress>
}

const WalletComponent = ({ accountAddress }: WalletComponentProps) => {
const WalletComponent = ({ maybeAccountAddress }: WalletComponentProps) => {
const connect = async () => {
accountAddress.value = await requestAccounts()
maybeAccountAddress.deepValue = await requestAccounts()
}
return accountAddress.value !== undefined ? (
<p style = 'color: gray; justify-self: right;'>{ `Connected with ${ accountAddress.value }` }</p>
return maybeAccountAddress.value !== undefined ? (
<p style = 'color: gray; justify-self: right;'>{ `Connected with ${ maybeAccountAddress.value }` }</p>
) : (
<button class = 'button is-primary' style = 'justify-self: right;' onClick = { connect }>
{ `Connect wallet` }
Expand All @@ -33,7 +33,7 @@ export function App() {
const loadingAccount = useSignal<boolean>(false)
const isWindowEthereum = useSignal<boolean>(true)
const areContractsDeployed = useSignal<boolean | undefined>(undefined)
const accountAddress = useSignal<AccountAddress | undefined>(undefined)
const maybeAccountAddress = useOptionalSignal<AccountAddress>(undefined)
const chainId = useSignal<number | undefined>(undefined)
const pathInfo = useOptionalSignal<DomainInfo[]>(undefined)
const immutable = useSignal<boolean>(false)
Expand Down Expand Up @@ -66,7 +66,7 @@ export function App() {
const ensSubDomain = inputValue.value.toLowerCase()
if (!isValidEnsSubDomain(ensSubDomain)) return
if (showLoading) loadingInfos.value = true
const newPathInfo = await getDomainInfos(accountAddress.value, ensSubDomain)
const newPathInfo = await getDomainInfos(maybeAccountAddress.deepValue, ensSubDomain)
pathInfo.deepValue = newPathInfo
immutable.value = false
checkBoxes.deepValue = newPathInfo.map((currElement, index): FinalChildChecks | ParentChecks => {
Expand Down Expand Up @@ -125,9 +125,9 @@ export function App() {
}

const updateChainId = async () => {
const acc = accountAddress.peek()
if (acc === undefined) return
chainId.value = await getChainId(acc)
const account = maybeAccountAddress.deepPeek()
if (account === undefined) return
chainId.value = await getChainId(account)
}

useEffect(() => {
Expand All @@ -136,19 +136,19 @@ export function App() {
return
}
isWindowEthereum.value = true
window.ethereum.on('accountsChanged', function (accounts) { accountAddress.value = accounts[0] })
window.ethereum.on('accountsChanged', function (accounts) { maybeAccountAddress.deepValue = accounts[0] })
window.ethereum.on('chainChanged', async () => { updateChainId() })
const fetchAccount = async () => {
try {
loadingAccount.value = true
const fetchedAccount = await getAccounts()
if (fetchedAccount) accountAddress.value = fetchedAccount
if (fetchedAccount) maybeAccountAddress.deepValue = fetchedAccount
updateChainId()
} catch(e) {
setError(e)
} finally {
loadingAccount.value = false
areContractsDeployed.value = await isPetalLockAndOpenRenewalManagerDeployed(accountAddress.value)
areContractsDeployed.value = await isPetalLockAndOpenRenewalManagerDeployed(maybeAccountAddress.deepValue)
}
}
fetchAccount()
Expand All @@ -162,13 +162,13 @@ export function App() {
useEffect(() => {
updateInfos(true)
updateChainId()
}, [accountAddress.value])
}, [maybeAccountAddress.value])

return <main>
<div class = 'app'>
{ !isWindowEthereum.value ? <p class = 'paragraph'> An Ethereum enabled wallet is required to make immutable domains.</p> : <></> }

{ !loadingAccount.value && isWindowEthereum.value ? <WalletComponent accountAddress = { accountAddress } /> : <></> }
{ !loadingAccount.value && isWindowEthereum.value ? <WalletComponent maybeAccountAddress = { maybeAccountAddress } /> : <></> }

<div style = 'display: block'>
<div class = 'petal-lock'>
Expand Down Expand Up @@ -204,7 +204,7 @@ export function App() {
handleResolutionAddressInput = { handleResolutionAddressInput }
loadingInfos = { loadingInfos }
immutable = { immutable }
accountAddress = { accountAddress }
maybeAccountAddress = { maybeAccountAddress }
checkBoxes = { checkBoxes }
updateInfos = { updateInfos }
creating = { creating }
Expand Down
48 changes: 24 additions & 24 deletions app/ts/components/requirements.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ import { isAddress } from 'viem'
import { YearPicker } from './YearPicker.js'

interface SwitchAddressProps {
accountAddress: Signal<AccountAddress | undefined>
signingAddress: Signal<AccountAddress| undefined>
maybeAccountAddress: OptionalSignal<AccountAddress>
maybeSigningAddress: Signal<AccountAddress | undefined>
requirementsMet: boolean
}

export const SwitchAddress = ({ signingAddress, accountAddress, requirementsMet }: SwitchAddressProps) => {
export const SwitchAddress = ({ maybeSigningAddress, maybeAccountAddress, requirementsMet }: SwitchAddressProps) => {
if (requirementsMet) return <></>
if (signingAddress.value === undefined) return <></>
if (BigInt(signingAddress.value) === 0n) return <></>
if (isSameAddress(accountAddress.value, signingAddress.value) ) return <></>
return <p class = 'paragraph' style = 'color: #b43c42'> { ` - Switch to ${ signingAddress } to sign` } </p>
if (maybeSigningAddress.value === undefined) return <></>
if (BigInt(maybeSigningAddress.value) === 0n) return <></>
if (isSameAddress(maybeAccountAddress.deepValue, maybeSigningAddress.value) ) return <></>
return <p class = 'paragraph' style = 'color: #b43c42'> { ` - Switch to ${ maybeSigningAddress } to sign` } </p>
}


Expand Down Expand Up @@ -101,7 +101,7 @@ interface CreateProps {
handleResolutionAddressInput: (input: string) => void
loadingInfos: Signal<boolean>
immutable: Signal<boolean>
accountAddress: Signal<AccountAddress | undefined>
maybeAccountAddress: OptionalSignal<AccountAddress>
checkBoxes: OptionalSignal<CheckBoxes>
updateInfos: (showLoading: boolean) => Promise<void>
creating: Signal<boolean>
Expand All @@ -110,19 +110,19 @@ interface CreateProps {
extending: Signal<boolean>
}

export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos, immutable, handleContentHashInput, handleResolutionAddressInput, accountAddress, checkBoxes, updateInfos, creating, areContractsDeployed, extendYear, extending }: CreateProps) => {
export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos, immutable, handleContentHashInput, handleResolutionAddressInput, maybeAccountAddress, checkBoxes, updateInfos, creating, areContractsDeployed, extendYear, extending }: CreateProps) => {
const isYearValid = useSignal<boolean>(true)

if (checkBoxes.deepValue === undefined) return <></>
const subDomain = checkBoxes.deepValue[checkBoxes.deepValue.length -1]?.domainInfo.subDomain
if (subDomain === undefined) throw new Error('missing subdomain')
const makeImmutable = async () => {
const acc = accountAddress.peek()
if (acc === undefined) throw new Error('missing accountAddress')
const account = maybeAccountAddress.peek()
if (account === undefined) throw new Error('missing maybeAccountAddress')
if (checkBoxes.deepValue === undefined) return
try {
creating.value = true
await callPetalLock(acc, checkBoxes.deepValue.map((value) => value.domainInfo), contentHashInput.value.trim(), resolutionAddressInput.value.trim())
await callPetalLock(account.value, checkBoxes.deepValue.map((value) => value.domainInfo), contentHashInput.value.trim(), resolutionAddressInput.value.trim())
await updateInfos(false)
} catch(e) {
throw e
Expand All @@ -132,45 +132,45 @@ export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos
}

const deploy = async () => {
const acc = accountAddress.peek()
if (acc === undefined) throw new Error('missing accountAddress')
await deployPetalLockAndRenewalManager(acc)
const account = maybeAccountAddress.peek()
if (account === undefined) throw new Error('missing maybeAccountAddress')
await deployPetalLockAndRenewalManager(account.value)
await updateInfos(false)
areContractsDeployed.value = true
}

const renewByYear = async () => {
const acc = accountAddress.peek()
if (acc === undefined) throw new Error('missing accountAddress')
const account = maybeAccountAddress.peek()
if (account === undefined) throw new Error('missing maybeAccountAddress')
if (checkBoxes.deepValue === undefined) return
try {
extending.value = true
await renewDomainByYear(acc, extendYear.value, checkBoxes.deepValue.map((value) => value.domainInfo))
await renewDomainByYear(account.value, extendYear.value, checkBoxes.deepValue.map((value) => value.domainInfo))
await updateInfos(false)
} finally {
extending.value = false
}
}

const renewToMax = async () => {
const acc = accountAddress.peek()
if (acc === undefined) throw new Error('missing accountAddress')
const account = maybeAccountAddress.peek()
if (account === undefined) throw new Error('missing maybeAccountAddress')
if (checkBoxes.deepValue === undefined) return
try {
extending.value = true
await renewDomainToMax(acc, checkBoxes.deepValue.map((value) => value.domainInfo))
await renewDomainToMax(account.value, checkBoxes.deepValue.map((value) => value.domainInfo))
await updateInfos(false)
} finally {
extending.value = false
}
}

const signingAddress = computed(() => {
const maybeSigningAddress = computed(() => {
if (checkBoxes.deepValue === undefined) return undefined
return checkBoxes.deepValue[0]?.domainInfo.owner
})

const rightAddress = computed(() => isSameAddress(signingAddress.value, accountAddress.value))
const rightAddress = computed(() => isSameAddress(maybeSigningAddress.value, maybeAccountAddress.deepValue))
const validContenthash = computed(() => isValidContentHashString(contentHashInput.value.trim()))
const validResolutionAddress = computed(() => isAddress(resolutionAddressInput.value.trim()))
const wrappedIssues = computed(() => {
Expand Down Expand Up @@ -257,7 +257,7 @@ export const Create = ( { contentHashInput, resolutionAddressInput, loadingInfos
</div> : <>
<div style = 'padding: 10px; display: block;'>
{ domainExistIssue.value === undefined ? <></> : <p class = 'paragraph' style = 'color: #b43c42'> { domainExistIssue.value } </p> }
<SwitchAddress requirementsMet = { loadingInfos.value } accountAddress = { accountAddress } signingAddress = { signingAddress }/>
<SwitchAddress requirementsMet = { loadingInfos.value } maybeAccountAddress = { maybeAccountAddress } maybeSigningAddress = { maybeSigningAddress }/>
{ validContenthash.value || contentHashInput.value.length == 0 ? <></> : <p class = 'paragraph' style = 'color: #b43c42'> { ` - Content hash is not valid` } </p> }
{ validResolutionAddress.value || resolutionAddressInput.value.length == 0 ? <></> : <p class = 'paragraph' style = 'color: #b43c42'> { ` - Resolution address is not a valid address` } </p> }
{ validContenthash.value || validResolutionAddress.value ? <></> : <p class = 'paragraph' style = 'color: #b43c42'> { ` - Set content hash or resolution address or both` } </p> }
Expand Down
2 changes: 0 additions & 2 deletions app/ts/types/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


export type DomainInfo = {
isWrapped: boolean,
nameHash: `0x${ string }`
Expand Down

0 comments on commit 42b4816

Please sign in to comment.