diff --git a/frontend/src/Indexer/Edit/EditIndexerModal.js b/frontend/src/Indexer/Edit/EditIndexerModal.js index 6a2222d96..2920ba7b6 100644 --- a/frontend/src/Indexer/Edit/EditIndexerModal.js +++ b/frontend/src/Indexer/Edit/EditIndexerModal.js @@ -7,7 +7,7 @@ import EditIndexerModalContentConnector from './EditIndexerModalContentConnector function EditIndexerModal({ isOpen, onModalClose, ...otherProps }) { return ( diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.css b/frontend/src/Indexer/Info/IndexerInfoModalContent.css index 383f08afd..84fe0a573 100644 --- a/frontend/src/Indexer/Info/IndexerInfoModalContent.css +++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.css @@ -3,3 +3,9 @@ overflow-wrap: break-word; } + +.deleteButton { + composes: button from '~Components/Link/Button.css'; + + margin-right: auto; +} diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts b/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts index ff7055b0f..48f09127f 100644 --- a/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts +++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts @@ -1,6 +1,7 @@ // This file is automatically generated. // Please do not change this file! interface CssExports { + 'deleteButton': string; 'description': string; } export const cssExports: CssExports; diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx index 620234bad..662cb7934 100644 --- a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx +++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; import { createSelector } from 'reselect'; import DescriptionList from 'Components/DescriptionList/DescriptionList'; @@ -14,6 +14,8 @@ import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import { kinds } from 'Helpers/Props'; +import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal'; +import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector'; import Indexer from 'Indexer/Indexer'; import createIndexerSelector from 'Store/Selectors/createIndexerSelector'; import translate from 'Utilities/String/translate'; @@ -58,6 +60,28 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { fields.find((field) => field.name === 'baseUrl')?.value ?? (Array.isArray(indexerUrls) ? indexerUrls[0] : undefined); + const [isEditIndexerModalOpen, setIsEditIndexerModalOpen] = useState(false); + const [isDeleteIndexerModalOpen, setIsDeleteIndexerModalOpen] = + useState(false); + + const onEditIndexerPress = useCallback(() => { + setIsEditIndexerModalOpen(true); + }, [setIsEditIndexerModalOpen]); + + const onEditIndexerModalClose = useCallback(() => { + setIsEditIndexerModalOpen(false); + }, [setIsEditIndexerModalOpen]); + + const onDeleteIndexerPress = useCallback(() => { + setIsEditIndexerModalOpen(false); + setIsDeleteIndexerModalOpen(true); + }, [setIsDeleteIndexerModalOpen]); + + const onDeleteIndexerModalClose = useCallback(() => { + setIsDeleteIndexerModalOpen(false); + onModalClose(); + }, [setIsDeleteIndexerModalOpen, onModalClose]); + return ( {`${name}`} @@ -191,8 +215,29 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { + + + + + + ); }