diff --git a/packages/ui/src/ERC20DepositForm.tsx b/packages/ui/src/ERC20DepositForm.tsx index faa80523..2a40da54 100644 --- a/packages/ui/src/ERC20DepositForm.tsx +++ b/packages/ui/src/ERC20DepositForm.tsx @@ -44,6 +44,7 @@ import { import { useAccount, useContractReads, useWaitForTransaction } from "wagmi"; import { TransactionProgress } from "./TransactionProgress"; import { TransactionStageStatus } from "./TransactionStatus"; +import useUndeployedApplication from "./hooks/useUndeployedApplication"; export const transactionButtonState = ( prepare: TransactionStageStatus, @@ -241,6 +242,10 @@ export const ERC20DepositForm: FC = (props) => { deposit.write, true, ); + const isUndeployedApp = useUndeployedApplication( + applicationAddress, + applications, + ); useEffect(() => { if (depositWait.status === "success") { @@ -268,17 +273,15 @@ export const ERC20DepositForm: FC = (props) => { }} /> - {isAddress(applicationAddress) && - applicationAddress !== zeroAddress && - !applications.length && ( - } - > - This is a deposit to an undeployed application. - - )} + {!form.errors.application && isUndeployedApp && ( + } + > + This is a deposit to an undeployed application. + + )} = (props) => { approveWait.status !== "success"; const isApproveDisabled = approveDisabled || !needApproval || !isDepositDisabled; + const isUndeployedApp = useUndeployedApplication( + applicationAddress, + applications, + ); useEffect(() => { if (tokensOfOwnerByIndex.tokenIds.length === 0) { @@ -256,21 +261,15 @@ export const ERC721DepositForm: FC = (props) => { }} /> - {!form.errors.application && - applicationAddress !== zeroAddress && - !applications.some( - (a) => - a.toLowerCase() === - applicationAddress.toLowerCase(), - ) && ( - } - > - This is a deposit to an undeployed application. - - )} + {!form.errors.application && isUndeployedApp && ( + } + > + This is a deposit to an undeployed application. + + )} = (props) => { const canSubmit = form.isValid() && !prepare.isLoading && prepare.error === null; const loading = execute.status === "loading" || wait.status === "loading"; + const isUndeployedApp = useUndeployedApplication(address, applications); useEffect(() => { if (wait.status === "success") { @@ -121,19 +123,15 @@ export const EtherDepositForm: FC = (props) => { }} /> - {!form.errors.application && - address !== zeroAddress && - !applications.some( - (a) => a.toLowerCase() === address.toLowerCase(), - ) && ( - } - > - This is a deposit to an undeployed application. - - )} + {!form.errors.application && isUndeployedApp && ( + } + > + This is a deposit to an undeployed application. + + )} = (props) => { const wait = useWaitForTransaction(execute.data); const loading = execute.status === "loading" || wait.status === "loading"; const canSubmit = form.isValid() && prepare.error === null; + const isUndeployedApp = useUndeployedApplication(address, applications); useEffect(() => { if (wait.status === "success") { @@ -99,17 +101,15 @@ export const RawInputForm: FC = (props) => { }} /> - {!form.errors.application && - address !== zeroAddress && - !addresses.includes(address) && ( - } - > - This is an undeployed application. - - )} + {!form.errors.application && isUndeployedApp && ( + } + > + This is an undeployed application. + + )}