diff --git a/CHANGELOG.md b/CHANGELOG.md index c681f332d..84290f875 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,4 +53,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state - [#45](https://github.com/alleslabs/celatone-frontend/pull/45) Add chain ID and code details to contract detail data loader diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts index 27e8fe6d1..d17ae5370 100644 --- a/src/lib/components/forms/index.ts +++ b/src/lib/components/forms/index.ts @@ -5,6 +5,5 @@ export * from "./TagSelection"; export * from "./TextInput"; export * from "./SelectInput"; export * from "./TextAreaInput"; -export * from "./types"; export * from "./ControllerInput"; export * from "./ControllerTextarea"; diff --git a/src/lib/components/forms/types.ts b/src/lib/components/forms/types.ts deleted file mode 100644 index 651b9e894..000000000 --- a/src/lib/components/forms/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type Option = { - label: string; - value: string; -}; diff --git a/src/lib/components/modal/contract/RemoveContract.tsx b/src/lib/components/modal/contract/RemoveContract.tsx index 32ab9b93a..bd4af2a0a 100644 --- a/src/lib/components/modal/contract/RemoveContract.tsx +++ b/src/lib/components/modal/contract/RemoveContract.tsx @@ -10,13 +10,13 @@ import { truncate } from "lib/utils"; interface ModalProps { contractInfo: ContractInfo; - list: Option; + contractRemovalInfo: Option; menuItemProps: MenuItemProps; } export function RemoveContract({ contractInfo, - list, + contractRemovalInfo, menuItemProps, }: ModalProps) { const displayName = contractInfo.name @@ -24,12 +24,14 @@ export function RemoveContract({ : truncate(contractInfo.contractAddress); const handleRemove = useHandleContractSave({ - title: `Removed ${displayName} from ${list.label}`, + title: `Removed ${displayName} from ${contractRemovalInfo.label}`, contractAddress: contractInfo.contractAddress, instantiator: contractInfo.instantiator, label: contractInfo.label, created: contractInfo.created, - lists: contractInfo.lists?.filter((item) => item.value !== list.value), + lists: contractInfo.lists?.filter( + (item) => item.value !== contractRemovalInfo.value + ), }); return ( @@ -44,10 +46,10 @@ export function RemoveContract({ > - {`This action will remove ${displayName} from ${list.label}. + {`This action will remove ${displayName} from ${contractRemovalInfo.label}. The contract’s off-chain detail will be preserved in other lists or when you save this contract again.`} diff --git a/src/lib/components/modal/select-contract/AllContractLists.tsx b/src/lib/components/modal/select-contract/AllContractLists.tsx index 1ea707c53..72a9baf8d 100644 --- a/src/lib/components/modal/select-contract/AllContractLists.tsx +++ b/src/lib/components/modal/select-contract/AllContractLists.tsx @@ -1,57 +1,59 @@ import { Box, SimpleGrid } from "@chakra-ui/react"; -import type { Dispatch, SetStateAction } from "react"; +import { useMemo, useState } from "react"; import { TextInput } from "lib/components/forms"; import { EmptyState } from "lib/components/state/EmptyState"; import type { ContractListInfo } from "lib/stores/contract"; -import { ListCard } from "./ListCard"; +import { ContractListCard } from "./ContractListCard"; interface AllContractListsProps { - search: string; - setSearch: Dispatch>; contractLists: ContractListInfo[]; handleListSelect: (value: string) => void; - isReadOnly: boolean; + isReadOnly?: boolean; formLabelBgColor?: string; } export const AllContractLists = ({ - search, - setSearch, - handleListSelect, contractLists, isReadOnly, formLabelBgColor, + handleListSelect, }: AllContractListsProps) => { - const filteredContractLists = contractLists.filter((item) => - item.name.toLowerCase().includes(search.toLowerCase()) + const [searchKeyword, setSearchKeyword] = useState(""); + + const filteredContractLists = useMemo( + () => + contractLists.filter((item) => + item.name.toLowerCase().includes(searchKeyword.toLowerCase()) + ), + [contractLists, searchKeyword] ); return ( - - - {filteredContractLists.map((item) => ( - - ))} - - {filteredContractLists.length === 0 && ( + {filteredContractLists.length === 0 ? ( + ) : ( + + {filteredContractLists.map((item) => ( + + ))} + )} ); diff --git a/src/lib/components/modal/select-contract/ListCard.tsx b/src/lib/components/modal/select-contract/ContractListCard.tsx similarity index 83% rename from src/lib/components/modal/select-contract/ListCard.tsx rename to src/lib/components/modal/select-contract/ContractListCard.tsx index 0c5819fa2..363f7674c 100644 --- a/src/lib/components/modal/select-contract/ListCard.tsx +++ b/src/lib/components/modal/select-contract/ContractListCard.tsx @@ -10,31 +10,37 @@ import { MenuButton, MenuList, Spacer, + chakra, } from "@chakra-ui/react"; import dayjs from "dayjs"; import { MdMoreHoriz, MdMode, MdDelete } from "react-icons/md"; import { EditList, RemoveList } from "../list"; -import { getListIcon } from "lib/data"; +import { getListIcon, INSTANTIATED_LIST_NAME } from "lib/data"; import type { ContractListInfo } from "lib/stores/contract"; +import { formatSlugName } from "lib/utils"; -interface ListCardProps { +const StyledIcon = chakra(Icon, { + baseStyle: { + boxSize: "4", + display: "flex", + alignItems: "center", + }, +}); + +interface ContractListCardProps { item: ContractListInfo; handleListSelect: (value: string) => void; isReadOnly: boolean; - showLastUpdated: boolean; } -export const ListCard = ({ + +export const ContractListCard = ({ item, handleListSelect, isReadOnly, - showLastUpdated, -}: ListCardProps) => { - const iconProps = { - boxSize: "4", - display: "flex", - alignItems: "center", - }; +}: ContractListCardProps) => { + const showLastUpdated = item.slug !== formatSlugName(INSTANTIATED_LIST_NAME); + return ( , + icon: , children: "Edit list name", }} /> - ), + icon: , children: "Remove list", }} /> diff --git a/src/lib/components/modal/select-contract/ListDetail.tsx b/src/lib/components/modal/select-contract/ContractListDetail.tsx similarity index 52% rename from src/lib/components/modal/select-contract/ListDetail.tsx rename to src/lib/components/modal/select-contract/ContractListDetail.tsx index dfd116b41..ec52abf10 100644 --- a/src/lib/components/modal/select-contract/ListDetail.tsx +++ b/src/lib/components/modal/select-contract/ContractListDetail.tsx @@ -1,90 +1,86 @@ import { Box, Flex } from "@chakra-ui/react"; import { matchSorter } from "match-sorter"; -import type { Dispatch, SetStateAction } from "react"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { TagSelection, TextInput } from "lib/components/forms"; import { EmptyState } from "lib/components/state/EmptyState"; import { ZeroState } from "lib/components/state/ZeroState"; -import { ContractListReadOnlyTable } from "lib/pages/contracts/components/ContractListReadOnlyTable"; -import { ContractListTable } from "lib/pages/contracts/components/ContractListTable"; +import { ContractListReadOnlyTable } from "lib/pages/contract-list/components/ContractListReadOnlyTable"; +import { ContractListTable } from "lib/pages/contract-list/components/ContractListTable"; import type { ContractInfo, ContractListInfo } from "lib/stores/contract"; -import type { Option } from "lib/types"; +import type { ContractAddr, Option } from "lib/types"; interface FilteredListDetailProps { - search: string; - tagFilter: string[]; contracts: ContractInfo[]; - isReadOnly: boolean; - isContractRemovable?: Option; - onContractSelect?: (addr: string) => void; -} - -interface ListDetailProps { - search: string; - setSearch: Dispatch>; - contractListInfo: ContractListInfo; - isReadOnly: boolean; - isContractRemovable?: Option; - onContractSelect?: (addr: string) => void; + isReadOnly?: boolean; + contractRemovalInfo?: Option; + onContractSelect?: (addr: ContractAddr) => void; } const FilteredListDetail = ({ - search, - tagFilter, contracts, isReadOnly, - isContractRemovable, + contractRemovalInfo, onContractSelect = () => {}, }: FilteredListDetailProps) => { - const filteredContracts = matchSorter(contracts, search, { - keys: ["name", "description", "label", "address"], - sorter: (sortedItem) => sortedItem, - }).filter((contract) => - tagFilter.every((tag) => contract.tags?.includes(tag)) - ); - if (filteredContracts.length === 0) + if (contracts.length === 0) return ( ); - if (!isReadOnly) - return ( - - ); - return ( + + return isReadOnly ? ( + ) : ( + ); }; -export const ListDetail = ({ - search, - setSearch, +interface ContractListDetailProps { + contractListInfo: ContractListInfo; + isReadOnly?: boolean; + isInstantiatedByMe?: boolean; + onContractSelect?: (addr: ContractAddr) => void; +} + +export const ContractListDetail = ({ contractListInfo, isReadOnly, - isContractRemovable, + isInstantiatedByMe = false, onContractSelect, -}: ListDetailProps) => { +}: ContractListDetailProps) => { + const [searchKeyword, setSearchKeyword] = useState(""); const [tagFilter, setTagFilter] = useState([]); + const filteredContracts = useMemo( + () => + matchSorter(contractListInfo.contracts, searchKeyword, { + keys: ["name", "description", "label", "address"], + sorter: (sortedItem) => sortedItem, + }).filter((contract) => + tagFilter.every((tag) => contract.tags?.includes(tag)) + ), + [contractListInfo.contracts, searchKeyword, tagFilter] + ); + return ( - + {!isReadOnly && ( ) : ( )} diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx index 843b184b6..84ee33236 100644 --- a/src/lib/components/modal/select-contract/SelectContract.tsx +++ b/src/lib/components/modal/select-contract/SelectContract.tsx @@ -28,11 +28,11 @@ import { queryContract } from "lib/services/contract"; import type { ContractAddr, RpcContractError } from "lib/types"; import { AllContractLists } from "./AllContractLists"; -import { ListDetail } from "./ListDetail"; +import { ContractListDetail } from "./ContractListDetail"; interface SelectContractProps { notSelected: boolean; - onContractSelect: (addr: string) => void; + onContractSelect: (addr: ContractAddr) => void; } export const SelectContract = ({ @@ -45,9 +45,9 @@ export const SelectContract = ({ const { isOpen, onOpen, onClose } = useDisclosure(); const [listSlug, setListSlug] = useState(""); - const [searchManual, setSearchManual] = useState(""); - const [searchList, setSearchList] = useState(""); - const [searchInList, setSearchInList] = useState(""); + const [searchContract, setSearchContract] = useState( + "" as ContractAddr + ); const [invalid, setInvalid] = useState(""); const { getContractLists } = useContractStore(); @@ -58,29 +58,27 @@ export const SelectContract = ({ const resetOnClose = () => { setListSlug(""); - setSearchManual(""); - setSearchList(""); - setSearchInList(""); + setSearchContract("" as ContractAddr); setInvalid(""); onClose(); }; - const onSelectThenClose = (contract: string) => { + const onSelectThenClose = (contract: ContractAddr) => { onContractSelect(contract); resetOnClose(); }; // TODO: Abstract query const { refetch, isFetching, isRefetching } = useQuery( - ["query", "contract", searchManual], - async () => queryContract(endpoint, searchManual as ContractAddr), + ["query", "contract", searchContract], + async () => queryContract(endpoint, searchContract as ContractAddr), { enabled: false, retry: false, cacheTime: 0, refetchOnReconnect: false, onSuccess() { - onSelectThenClose(searchManual); + onSelectThenClose(searchContract); }, onError(err: AxiosError) { setInvalid(err.response?.data.error || DEFAULT_RPC_ERROR); @@ -121,16 +119,16 @@ export const SelectContract = ({ { const inputValue = e.target.value; - setSearchManual(inputValue); + setSearchContract(inputValue as ContractAddr); }} placeholder={`ex. ${exampleContractAddress}`} size="md" /> + ) : ( + + + Save existing contracts to the list with + , + children: "Save Contract", + ml: 2, + }} + /> + + Created contract list and saved contracts are stored in your device only. + + ); +}; + +/** + * + * @todo Will be refactored in the next PR + */ + +export const ZeroState = ({ + list, + isReadOnly, + isInstantiatedByMe, +}: ZeroStateProps) => { const router = useRouter(); + const { isWalletConnected, connect } = useWallet(); + + if (!isWalletConnected && isInstantiatedByMe) { + return ( + + + to deploy new contract + + ); + } + return ( - - You don’t have any deployed or saved contracts. + + {isInstantiatedByMe + ? "Your deployed contract through this address will display here" + : "You don’t have any saved contracts."} {!isReadOnly && ( - <> - - You can - - - - - or save deployed contracts to lists with - - , - children: "Save Contract", - }} - /> - - + router.push("/deploy")} + /> )} ); diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx index 7e55015cd..90bacb458 100644 --- a/src/lib/components/table/EditableCell.tsx +++ b/src/lib/components/table/EditableCell.tsx @@ -1,7 +1,8 @@ +import { InfoIcon } from "@chakra-ui/icons"; import { Flex, Text, Icon, Input, Button, Tooltip } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; import { useState } from "react"; -import { MdMode, MdInfo, MdCheck, MdClose } from "react-icons/md"; +import { MdMode, MdCheck, MdClose } from "react-icons/md"; interface EditableCellProps { initialValue?: string; @@ -124,13 +125,7 @@ export const EditableCell = ({ {!!tooltip && ( - + )} {!!onSave && ( diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx index aed3404d4..4f87c2887 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -1,15 +1,14 @@ import { Flex, - Heading, Menu, MenuButton, MenuList, Text, MenuItem, Icon, - Image, } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; +import Image from "next/image"; import Link from "next/link"; import { FiChevronDown } from "react-icons/fi"; @@ -29,9 +28,12 @@ const Header = () => { px={6} > - - Celatone - + Celatone diff --git a/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx b/src/lib/pages/contract-list/components/ContractListReadOnlyTable.tsx similarity index 95% rename from src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx rename to src/lib/pages/contract-list/components/ContractListReadOnlyTable.tsx index b95f3a570..2cf697089 100644 --- a/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx +++ b/src/lib/pages/contract-list/components/ContractListReadOnlyTable.tsx @@ -10,14 +10,16 @@ import { import { ExplorerLink } from "lib/components/ExplorerLink"; import type { ContractInfo } from "lib/stores/contract"; +import type { ContractAddr } from "lib/types"; import { ContractNameCell } from "./table/ContractNameCell"; import { TagsCell } from "./table/TagsCell"; interface ContractListReadOnlyTableProps { contracts: ContractInfo[]; - onContractSelect: (addr: string) => void; + onContractSelect: (addr: ContractAddr) => void; } + export const ContractListReadOnlyTable = ({ contracts = [], onContractSelect, diff --git a/src/lib/pages/contracts/components/ContractListTable.tsx b/src/lib/pages/contract-list/components/ContractListTable.tsx similarity index 82% rename from src/lib/pages/contracts/components/ContractListTable.tsx rename to src/lib/pages/contract-list/components/ContractListTable.tsx index c25659fd3..ae5cca410 100644 --- a/src/lib/pages/contracts/components/ContractListTable.tsx +++ b/src/lib/pages/contract-list/components/ContractListTable.tsx @@ -13,11 +13,12 @@ import { MenuList, MenuButton, MenuDivider, + chakra, MenuItem, } from "@chakra-ui/react"; import Link from "next/link"; import { - MdMoreVert, + MdMoreHoriz, MdMode, MdOutlineBookmark, MdDelete, @@ -35,27 +36,31 @@ import type { Option } from "lib/types"; import { ContractNameCell } from "./table/ContractNameCell"; import { TagsCell } from "./table/TagsCell"; -const iconProps = { - boxSize: "4", - display: "flex", - alignItems: "center", -}; +const StyledIcon = chakra(Icon, { + baseStyle: { + boxSize: "4", + display: "flex", + alignItems: "center", + }, +}); interface ContractListTableProps { contracts: ContractInfo[]; - isContractRemovable?: Option; + contractRemovalInfo?: Option; } + export const ContractListTable = ({ contracts = [], - isContractRemovable, + contractRemovalInfo, }: ContractListTableProps) => { return ( - +
th": { borderColor: "divider.main" }, }} > @@ -80,6 +85,7 @@ export const ContractListTable = ({ sx={{ "& td:first-of-type": { pl: "48px" }, "& td:last-of-type": { pr: "48px" }, + "> td": { borderColor: "divider.main" }, }} >
Contract Address @@ -122,9 +128,8 @@ export const ContractListTable = ({ focusBorderColor="primary.main" as={Button} > - @@ -134,13 +139,7 @@ export const ContractListTable = ({ contractInfo={item} triggerElement={ - } + icon={} > Edit details @@ -150,28 +149,23 @@ export const ContractListTable = ({ contractInfo={item} menuItemProps={{ icon: ( - ), children: "Add or remove from other lists", }} /> - {isContractRemovable && ( + {!!contractRemovalInfo && ( <> + ), children: "Remove from this list", }} diff --git a/src/lib/pages/contracts/components/table/ContractNameCell.tsx b/src/lib/pages/contract-list/components/table/ContractNameCell.tsx similarity index 100% rename from src/lib/pages/contracts/components/table/ContractNameCell.tsx rename to src/lib/pages/contract-list/components/table/ContractNameCell.tsx diff --git a/src/lib/pages/contracts/components/table/TagsCell.tsx b/src/lib/pages/contract-list/components/table/TagsCell.tsx similarity index 100% rename from src/lib/pages/contracts/components/table/TagsCell.tsx rename to src/lib/pages/contract-list/components/table/TagsCell.tsx diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contract-list/index.tsx similarity index 84% rename from src/lib/pages/contracts/index.tsx rename to src/lib/pages/contract-list/index.tsx index e4c265792..1d87a3506 100644 --- a/src/lib/pages/contracts/index.tsx +++ b/src/lib/pages/contract-list/index.tsx @@ -1,7 +1,6 @@ import { Flex, Heading } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { useState } from "react"; import { MdOutlineAdd } from "react-icons/md"; import { CreateNewList } from "lib/components/modal/list"; @@ -10,17 +9,15 @@ import PageContainer from "lib/components/PageContainer"; import { useContractStore } from "lib/hooks"; import { useInstantiatedMockInfoByMe } from "lib/model/contract"; -const ContractList = observer(() => { +const AllContractListsPage = observer(() => { const router = useRouter(); - const [searchKeyword, setSearchKeyword] = useState(""); + const { getContractLists } = useContractStore(); + const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()]; const handleListSelect = (slug: string) => { router.push({ pathname: `/contract-list/${slug}` }); }; - const { getContractLists } = useContractStore(); - const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()]; - return ( @@ -37,15 +34,12 @@ const ContractList = observer(() => { /> ); }); -export default ContractList; +export default AllContractListsPage; diff --git a/src/lib/pages/contracts/detail.tsx b/src/lib/pages/contract-list/slug.tsx similarity index 66% rename from src/lib/pages/contracts/detail.tsx rename to src/lib/pages/contract-list/slug.tsx index 83b3e565f..bd6e29d47 100644 --- a/src/lib/pages/contracts/detail.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -11,10 +11,11 @@ import { BreadcrumbLink, Box, Text, + chakra, } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { MdOutlineAdd, MdMoreHoriz, @@ -26,26 +27,33 @@ import { import { SaveNewContract } from "lib/components/modal/contract"; import { EditList, RemoveList } from "lib/components/modal/list"; -import { ListDetail } from "lib/components/modal/select-contract"; +import { ContractListDetail } from "lib/components/modal/select-contract"; import { INSTANTIATED_LIST_NAME } from "lib/data"; import { useContractStore } from "lib/hooks"; import { useInstantiatedByMe } from "lib/model/contract"; import { formatSlugName, getFirstQueryParam } from "lib/utils"; -const ContractList = observer(() => { +const StyledIcon = chakra(Icon, { + baseStyle: { + boxSize: "4", + display: "flex", + alignItems: "center", + }, +}); + +const ContractsByList = observer(() => { const router = useRouter(); - const [searchKeyword, setSearchKeyword] = useState(""); const listSlug = getFirstQueryParam(router.query.slug); const { getContractLists, isHydrated } = useContractStore(); - const instantiatedListInfo = useInstantiatedByMe( - listSlug === formatSlugName(INSTANTIATED_LIST_NAME) - ); + const isInstantiatedByMe = + listSlug === formatSlugName(INSTANTIATED_LIST_NAME); + + const instantiatedListInfo = useInstantiatedByMe(isInstantiatedByMe); - const contractListInfo = - listSlug === formatSlugName(INSTANTIATED_LIST_NAME) - ? instantiatedListInfo - : getContractLists().find((item) => item.slug === listSlug); + const contractListInfo = isInstantiatedByMe + ? instantiatedListInfo + : getContractLists().find((item) => item.slug === listSlug); useEffect(() => { if (isHydrated && contractListInfo === undefined) { @@ -53,12 +61,6 @@ const ContractList = observer(() => { } }, [contractListInfo, router, isHydrated]); - const iconProps = { - boxSize: "4", - display: "flex", - alignItems: "center", - }; - if (!contractListInfo) return null; return ( @@ -103,24 +105,27 @@ const ContractList = observer(() => { {contractListInfo.name} - - , - children: "Save Contract", - }} - /> + {isInstantiatedByMe ? ( + + ) : ( + , + children: "Save Contract", + }} + /> + )} {contractListInfo.isInfoEditable && ( { value: contractListInfo.slug, }} menuItemProps={{ - icon: ( - - ), + icon: , children: "Edit list name", }} /> @@ -155,13 +158,7 @@ const ContractList = observer(() => { value: contractListInfo.slug, }} menuItemProps={{ - icon: ( - - ), + icon: , children: "Remove list", }} /> @@ -171,19 +168,12 @@ const ContractList = observer(() => { - ); }); -export default ContractList; +export default ContractsByList; diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx index 99a14cdfe..6eede513c 100644 --- a/src/lib/pages/home/components/RecentlyViewContracts.tsx +++ b/src/lib/pages/home/components/RecentlyViewContracts.tsx @@ -1,6 +1,6 @@ import { Heading, Box, Flex, Text } from "@chakra-ui/react"; -import { ContractListTable } from "lib/pages/contracts/components/ContractListTable"; +import { ContractListTable } from "lib/pages/contract-list/components/ContractListTable"; import type { ContractAddr } from "lib/types"; /* TODO: change data -> recently view contracts */ diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx index e5555ea1d..bafe3ffe5 100644 --- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx +++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx @@ -4,12 +4,11 @@ import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; -import type { Option } from "lib/components/forms"; import { OffChainForm } from "lib/components/OffChainForm"; import type { OffchainDetail } from "lib/components/OffChainForm"; import { useContractStore } from "lib/hooks"; import { useUserKey } from "lib/hooks/useUserKey"; -import type { ContractAddr } from "lib/types"; +import type { ContractAddr, Option } from "lib/types"; interface InstantiateOffChainFormProps { title?: string; diff --git a/src/lib/stores/contract.ts b/src/lib/stores/contract.ts index f54ad0c20..00e7f22ad 100644 --- a/src/lib/stores/contract.ts +++ b/src/lib/stores/contract.ts @@ -25,13 +25,8 @@ interface ContractList { isContractRemovable: boolean; } -export interface ContractListInfo { +export interface ContractListInfo extends Omit { contracts: ContractInfo[]; - name: string; - slug: string; - lastUpdated: Date; - isInfoEditable: boolean; - isContractRemovable: boolean; } export const cmpContractListInfo = ( diff --git a/src/pages/contract-list/[slug].tsx b/src/pages/contract-list/[slug].tsx index f891c6ca8..cf30d4062 100644 --- a/src/pages/contract-list/[slug].tsx +++ b/src/pages/contract-list/[slug].tsx @@ -1,3 +1,3 @@ -import Contract from "lib/pages/contracts/detail"; +import ContractsByList from "lib/pages/contract-list/slug"; -export default Contract; +export default ContractsByList; diff --git a/src/pages/contract-list/index.tsx b/src/pages/contract-list/index.tsx index 457a97656..719d24905 100644 --- a/src/pages/contract-list/index.tsx +++ b/src/pages/contract-list/index.tsx @@ -1,3 +1,3 @@ -import ContractList from "lib/pages/contracts"; +import AllContractListsPage from "lib/pages/contract-list"; -export default ContractList; +export default AllContractListsPage;