diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx index 6248a3b10..e12c7e091 100644 --- a/apps/web/src/components/sendTransaction.tsx +++ b/apps/web/src/components/sendTransaction.tsx @@ -8,11 +8,13 @@ import { GenericInputForm, GenericInputFormSpecification, TransactionFormSuccessData, + type RollupVersion as RollupVersionUI, } from "@cartesi/rollups-explorer-ui"; import { Select } from "@mantine/core"; import { useDebouncedValue } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { FC, useCallback, useState } from "react"; +import { RollupVersion } from "../graphql/explorer/types"; import { useSearchApplications } from "../hooks/useSearchApplications"; import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens"; import { useSearchTokens } from "../hooks/useSearchTokens"; @@ -36,28 +38,42 @@ interface DepositProps { const DEBOUNCE_TIME = 400 as const; +type ApplicationSearchableParams = { + address: string; + rollupVersion?: RollupVersion; +}; + const SendTransaction: FC = ({ initialDepositType = "ether", }) => { const [depositType, setDepositType] = useState(initialDepositType); + const [applicationSearchableParams, setApplicationSearchableParams] = + useState({ address: "" }); + + // TODO: Replace this by the above one in every form. const [applicationId, setApplicationId] = useState(""); const [multiTokenId, setMultiTokenId] = useState(""); const [tokenId, setTokenId] = useState(""); - const [debouncedApplicationId] = useDebouncedValue( - applicationId, + + const [debouncedApplicationSearchableParams] = useDebouncedValue( + applicationSearchableParams, DEBOUNCE_TIME, ); + const [debouncedTokenId] = useDebouncedValue(tokenId, DEBOUNCE_TIME); const [debouncedMultiTokenId] = useDebouncedValue( multiTokenId, DEBOUNCE_TIME, ); + const chainId = getConfiguredChainId(); const { applications, fetching } = useSearchApplications({ - address: debouncedApplicationId, + address: debouncedApplicationSearchableParams.address, + rollupVersion: debouncedApplicationSearchableParams.rollupVersion, chainId, }); + const { tokens } = useSearchTokens({ address: debouncedTokenId, chainId, @@ -97,6 +113,24 @@ const SendTransaction: FC = ({ [], ); + const applicationAddressList = applications.map((a) => a.address); + + const updateApplicationSearchParams = useCallback( + (address: string, rollupVersion?: RollupVersionUI) => + setApplicationSearchableParams({ + address, + rollupVersion: rollupVersion as RollupVersion, + }), + [], + ); + + // TODO: Fixup and remove after upgrading last form + const setOldApplicationCB = useCallback((address: string) => { + setApplicationSearchableParams({ + address, + }); + }, []); + return ( <>