refactor: Replace Mantines Autocomplete by rollups-explorer-ui Applic…

…ationAutocomplete.
cartesi · Dec 13, 2024 · cb4503a · cb4503a
1 parent be9b438
commit cb4503a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/apps/web/src/components/connection/connectionForm.tsx b/apps/web/src/components/connection/connectionForm.tsx
@@ -1,7 +1,7 @@
 "use client";
+import { ApplicationAutocomplete } from "@cartesi/rollups-explorer-ui";
 import {
     Alert,
-    Autocomplete,
     Button,
     Flex,
     List,
@@ -145,8 +145,6 @@ const AppConnectionForm: FC<AppConnectionFormProps> = ({
         chainId,
     });
 
-    const applicationAddressList = applications.map((a) => a.address);
-
     const showLoader = !isEmpty(debouncedAddress) && fetching;
 
     const { validURL } = React.useMemo(
@@ -215,15 +213,18 @@ const AppConnectionForm: FC<AppConnectionFormProps> = ({
             })}
         >
             <Flex direction="column" gap="sm">
-                <Autocomplete
+                <ApplicationAutocomplete
                     withAsterisk
                     label="Address"
                     description="The application smart contract address."
                     rightSection={showLoader ? <Loader size="sm" /> : ""}
                     placeholder="0x"
-                    data={applicationAddressList}
+                    applications={applications}
                     data-testid="connection-address"
                     {...form.getInputProps("address")}
+                    onApplicationSelected={(app) => {
+                        form.setFieldValue("address", app.address);
+                    }}
                 />
 
                 {isAddress(address) && !applications.length && !fetching && (

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -1,4 +1,5 @@
 export { AddressRelayForm } from "./AddressRelayForm";
+export { default as ApplicationAutocomplete } from "./ApplicationAutocomplete";
 export { type TransactionFormSuccessData } from "./DepositFormTypes";
 export { ERC1155DepositForm } from "./ERC1155DepositForm";
 export { ERC20DepositForm } from "./ERC20DepositForm";