From 845b75255b53051de052b02d1050d7728355ece5 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 21 Dec 2022 17:30:48 +0700 Subject: [PATCH 1/5] fix: correctly render zerostate --- .../select-contract/AllContractLists.tsx | 22 ++-- .../modal/select-contract/ListDetail.tsx | 33 +++--- .../modal/select-contract/SelectContract.tsx | 10 +- src/lib/components/state/ZeroState.tsx | 100 +++++++++++++----- src/lib/components/table/EditableCell.tsx | 11 +- 5 files changed, 104 insertions(+), 72 deletions(-) diff --git a/src/lib/components/modal/select-contract/AllContractLists.tsx b/src/lib/components/modal/select-contract/AllContractLists.tsx index 1ea707c53..9b162e30a 100644 --- a/src/lib/components/modal/select-contract/AllContractLists.tsx +++ b/src/lib/components/modal/select-contract/AllContractLists.tsx @@ -1,5 +1,5 @@ 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"; @@ -8,8 +8,6 @@ import type { ContractListInfo } from "lib/stores/contract"; import { ListCard } from "./ListCard"; interface AllContractListsProps { - search: string; - setSearch: Dispatch>; contractLists: ContractListInfo[]; handleListSelect: (value: string) => void; isReadOnly: boolean; @@ -17,23 +15,27 @@ interface AllContractListsProps { } 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 ( void; } -interface ListDetailProps { - search: string; - setSearch: Dispatch>; - contractListInfo: ContractListInfo; - isReadOnly: boolean; - isContractRemovable?: Option; - onContractSelect?: (addr: string) => void; -} - const FilteredListDetail = ({ search, tagFilter, @@ -66,29 +56,37 @@ const FilteredListDetail = ({ ); }; +interface ListDetailProps { + contractListInfo: ContractListInfo; + isReadOnly: boolean; + isContractRemovable?: Option; + isInstantiatedByMe?: boolean; + onContractSelect?: (addr: string) => void; +} + export const ListDetail = ({ - search, - setSearch, contractListInfo, isReadOnly, isContractRemovable, + isInstantiatedByMe = false, onContractSelect, }: ListDetailProps) => { const userKey = useUserKey(); const { getAllTags } = useContractStore(); const [tagFilter, setTagFilter] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(""); return ( - + {!isReadOnly && ( ) : ( { setListSlug(""); setSearchManual(""); - setSearchList(""); - setSearchInList(""); setInvalid(""); onClose(); }; @@ -147,12 +143,10 @@ export const SelectContract = ({ - + Select from your Contract List { +const ActionSection = ({ + isInstantiatedByMe, + handleAction, + list, +}: { + isInstantiatedByMe: boolean; + handleAction?: () => void; + list: Option; +}) => { + return isInstantiatedByMe ? ( + + ) : ( + + + Save existing contracts to the list with + , + children: "Save Contract", + ml: 2, + }} + /> + + Created contract list and saved contracts are stored in your device only. + + ); +}; + +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 deploy 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 contract to the list 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 && ( From ebbb13e2b0461a21f552770ebf6a6acdb9934ea0 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 21 Dec 2022 17:32:17 +0700 Subject: [PATCH 2/5] fix: correctly render zero state --- public/celatone-logo.svg | 13 ++++ src/lib/layout/Header.tsx | 11 ++-- .../components/ContractListTable.tsx | 2 + src/lib/pages/contracts/index.tsx | 15 ++--- .../pages/contracts/{detail.tsx => slug.tsx} | 63 ++++++++++--------- src/pages/contracts/[slug].tsx | 4 +- src/pages/contracts/index.tsx | 4 +- 7 files changed, 63 insertions(+), 49 deletions(-) create mode 100644 public/celatone-logo.svg rename src/lib/pages/contracts/{detail.tsx => slug.tsx} (79%) diff --git a/public/celatone-logo.svg b/public/celatone-logo.svg new file mode 100644 index 000000000..a405a4cba --- /dev/null +++ b/public/celatone-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx index 736d742fd..f5f734020 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -1,6 +1,5 @@ import { Flex, - Heading, Menu, MenuButton, MenuList, @@ -9,6 +8,7 @@ import { Icon, } 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"; @@ -28,9 +28,12 @@ const Header = () => { px={6} > - - Celatone - + celatone-logo diff --git a/src/lib/pages/contracts/components/ContractListTable.tsx b/src/lib/pages/contracts/components/ContractListTable.tsx index ffb3cd7e3..600becd32 100644 --- a/src/lib/pages/contracts/components/ContractListTable.tsx +++ b/src/lib/pages/contracts/components/ContractListTable.tsx @@ -55,6 +55,7 @@ export const ContractListTable = ({ th": { borderColor: "divider.main" }, }} > Contract Address @@ -79,6 +80,7 @@ export const ContractListTable = ({ sx={{ "& td:first-of-type": { pl: "48px" }, "& td:last-of-type": { pr: "48px" }, + "> td": { borderColor: "divider.main" }, }} > diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx index 3ab509156..f7ca87ce8 100644 --- a/src/lib/pages/contracts/index.tsx +++ b/src/lib/pages/contracts/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: `/contracts/${slug}` }); }; - const { getContractLists } = useContractStore(); - const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()]; - return ( @@ -37,15 +34,13 @@ const ContractList = observer(() => { /> ); }); -export default ContractList; +export default AllContractListsPage; diff --git a/src/lib/pages/contracts/detail.tsx b/src/lib/pages/contracts/slug.tsx similarity index 79% rename from src/lib/pages/contracts/detail.tsx rename to src/lib/pages/contracts/slug.tsx index a4162edd7..0a966d3a3 100644 --- a/src/lib/pages/contracts/detail.tsx +++ b/src/lib/pages/contracts/slug.tsx @@ -14,7 +14,7 @@ import { } 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, @@ -32,20 +32,19 @@ import { useContractStore } from "lib/hooks"; import { useInstantiatedByMe } from "lib/model/contract"; import { formatSlugName, getFirstQueryParam } from "lib/utils"; -const ContractList = observer(() => { +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) { @@ -103,24 +102,27 @@ const ContractList = observer(() => { {contractListInfo.name} - - , - children: "Save Contract", - }} - /> + {isInstantiatedByMe ? ( + + ) : ( + , + children: "Save Contract", + }} + /> + )} {contractListInfo.isInfoEditable && ( { { ? { label: contractListInfo.name, value: contractListInfo.slug } : undefined } + isInstantiatedByMe={isInstantiatedByMe} /> ); }); -export default ContractList; +export default ContractsByList; diff --git a/src/pages/contracts/[slug].tsx b/src/pages/contracts/[slug].tsx index f891c6ca8..04b4659e1 100644 --- a/src/pages/contracts/[slug].tsx +++ b/src/pages/contracts/[slug].tsx @@ -1,3 +1,3 @@ -import Contract from "lib/pages/contracts/detail"; +import ContractsByList from "lib/pages/contracts/slug"; -export default Contract; +export default ContractsByList; diff --git a/src/pages/contracts/index.tsx b/src/pages/contracts/index.tsx index 457a97656..ca27a1747 100644 --- a/src/pages/contracts/index.tsx +++ b/src/pages/contracts/index.tsx @@ -1,3 +1,3 @@ -import ContractList from "lib/pages/contracts"; +import AllContractListsPage from "lib/pages/contracts"; -export default ContractList; +export default AllContractListsPage; From bef14f42fa6fb94538dc6c1489289e5759364b8f Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 22 Dec 2022 17:08:14 +0700 Subject: [PATCH 3/5] refactor(components): contract list table component/interface refactor --- .../select-contract/AllContractLists.tsx | 28 ++++---- .../modal/select-contract/ListCard.tsx | 19 +++--- .../modal/select-contract/ListDetail.tsx | 64 +++++++++---------- .../modal/select-contract/SelectContract.tsx | 5 -- src/lib/components/state/ZeroState.tsx | 2 +- .../components/ContractListReadOnlyTable.tsx | 1 + .../components/ContractListTable.tsx | 11 ++-- src/lib/pages/contracts/index.tsx | 1 - src/lib/pages/contracts/slug.tsx | 18 ++---- src/lib/stores/contract.ts | 9 +-- 10 files changed, 73 insertions(+), 85 deletions(-) diff --git a/src/lib/components/modal/select-contract/AllContractLists.tsx b/src/lib/components/modal/select-contract/AllContractLists.tsx index 9b162e30a..7cb7ddc36 100644 --- a/src/lib/components/modal/select-contract/AllContractLists.tsx +++ b/src/lib/components/modal/select-contract/AllContractLists.tsx @@ -10,7 +10,7 @@ import { ListCard } from "./ListCard"; interface AllContractListsProps { contractLists: ContractListInfo[]; handleListSelect: (value: string) => void; - isReadOnly: boolean; + isReadOnly?: boolean; formLabelBgColor?: string; } @@ -39,21 +39,21 @@ export const AllContractLists = ({ label="Search for your lists" labelBgColor={formLabelBgColor} size="md" + mb={isReadOnly ? 4 : 12} /> - - - {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/ListCard.tsx index 0c5819fa2..340be0fde 100644 --- a/src/lib/components/modal/select-contract/ListCard.tsx +++ b/src/lib/components/modal/select-contract/ListCard.tsx @@ -15,26 +15,29 @@ 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"; + +const iconProps = { + boxSize: "4", + display: "flex", + alignItems: "center", +}; interface ListCardProps { item: ContractListInfo; handleListSelect: (value: string) => void; isReadOnly: boolean; - showLastUpdated: boolean; } + export const ListCard = ({ item, handleListSelect, isReadOnly, - showLastUpdated, }: ListCardProps) => { - const iconProps = { - boxSize: "4", - display: "flex", - alignItems: "center", - }; + const showLastUpdated = item.slug !== formatSlugName(INSTANTIATED_LIST_NAME); + return ( 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 ? ( + ) : ( + ); }; interface ListDetailProps { contractListInfo: ContractListInfo; - isReadOnly: boolean; - isContractRemovable?: Option; + isReadOnly?: boolean; isInstantiatedByMe?: boolean; onContractSelect?: (addr: string) => void; } @@ -67,15 +55,25 @@ interface ListDetailProps { export const ListDetail = ({ contractListInfo, isReadOnly, - isContractRemovable, isInstantiatedByMe = false, onContractSelect, }: ListDetailProps) => { const userKey = useUserKey(); const { getAllTags } = useContractStore(); - const [tagFilter, setTagFilter] = useState([]); 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 ( @@ -110,11 +108,13 @@ export const ListDetail = ({ /> ) : ( )} diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx index 94e6c1da3..4c8731ac3 100644 --- a/src/lib/components/modal/select-contract/SelectContract.tsx +++ b/src/lib/components/modal/select-contract/SelectContract.tsx @@ -173,11 +173,6 @@ export const SelectContract = ({ diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx index d0e9015d0..6c565e3a4 100644 --- a/src/lib/components/state/ZeroState.tsx +++ b/src/lib/components/state/ZeroState.tsx @@ -13,7 +13,7 @@ import type { Option } from "lib/types"; interface ZeroStateProps { list: Option; - isReadOnly: boolean; + isReadOnly?: boolean; isInstantiatedByMe: boolean; } diff --git a/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx b/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx index 8726fcb39..e31ced1c4 100644 --- a/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx +++ b/src/lib/pages/contracts/components/ContractListReadOnlyTable.tsx @@ -19,6 +19,7 @@ interface ContractListReadOnlyTableProps { contracts: ContractInfo[]; onContractSelect: (addr: string) => void; } + export const ContractListReadOnlyTable = ({ contracts = [], onContractSelect, diff --git a/src/lib/pages/contracts/components/ContractListTable.tsx b/src/lib/pages/contracts/components/ContractListTable.tsx index 600becd32..5cc332e64 100644 --- a/src/lib/pages/contracts/components/ContractListTable.tsx +++ b/src/lib/pages/contracts/components/ContractListTable.tsx @@ -42,15 +42,16 @@ const iconProps = { interface ContractListTableProps { contracts: ContractInfo[]; - isContractRemovable?: Option; + contractRemovalInfo?: Option; } + export const ContractListTable = ({ contracts = [], - isContractRemovable, + contractRemovalInfo, }: ContractListTableProps) => { return ( - +
- {isContractRemovable && ( + {!!contractRemovalInfo && ( <> { diff --git a/src/lib/pages/contracts/slug.tsx b/src/lib/pages/contracts/slug.tsx index 0a966d3a3..77c83393c 100644 --- a/src/lib/pages/contracts/slug.tsx +++ b/src/lib/pages/contracts/slug.tsx @@ -32,6 +32,12 @@ import { useContractStore } from "lib/hooks"; import { useInstantiatedByMe } from "lib/model/contract"; import { formatSlugName, getFirstQueryParam } from "lib/utils"; +const iconProps = { + boxSize: "4", + display: "flex", + alignItems: "center", +}; + const ContractsByList = observer(() => { const router = useRouter(); const listSlug = getFirstQueryParam(router.query.slug); @@ -52,12 +58,6 @@ const ContractsByList = observer(() => { } }, [contractListInfo, router, isHydrated]); - const iconProps = { - boxSize: "4", - display: "flex", - alignItems: "center", - }; - if (!contractListInfo) return null; return ( @@ -175,12 +175,6 @@ const ContractsByList = observer(() => { diff --git a/src/lib/stores/contract.ts b/src/lib/stores/contract.ts index d8ae85eef..2aaccefa6 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 = ( @@ -62,7 +57,7 @@ export class ContractStore { contracts: [], lastUpdated: new Date(), isInfoEditable: false, - isContractRemovable: true, + isContractRemovable: false, }, ]; From 3234b1a7994c4fe0cdf9f96078e9aecac6354353 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 22 Dec 2022 17:22:00 +0700 Subject: [PATCH 4/5] fix: add changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d28feaf42..60555dfb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,3 +45,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements ### Bug fixes + +- [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state From 141856d6c1a55c084735b20bad028a52230ed200 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 28 Dec 2022 11:36:45 +0700 Subject: [PATCH 5/5] fix: as commented --- .../components/InstantiateOffchainDetail.tsx | 3 +- src/lib/components/forms/index.ts | 1 - src/lib/components/forms/types.ts | 4 -- .../modal/contract/RemoveContract.tsx | 14 ++++--- .../select-contract/AllContractLists.tsx | 4 +- .../{ListCard.tsx => ContractListCard.tsx} | 25 ++++++------ ...{ListDetail.tsx => ContractListDetail.tsx} | 18 ++++----- .../modal/select-contract/SelectContract.tsx | 26 +++++++------ .../components/modal/select-contract/index.ts | 4 +- src/lib/components/state/ZeroState.tsx | 5 +++ .../components/ContractListReadOnlyTable.tsx | 3 +- .../components/ContractListTable.tsx | 39 +++++++------------ .../components/table/ContractNameCell.tsx | 0 .../components/table/TagsCell.tsx | 0 .../{contracts => contract-list}/index.tsx | 0 .../{contracts => contract-list}/slug.tsx | 29 ++++++-------- .../home/components/RecentlyViewContracts.tsx | 2 +- src/lib/stores/contract.ts | 2 +- src/pages/contract-list/[slug].tsx | 2 +- src/pages/contract-list/index.tsx | 2 +- 20 files changed, 87 insertions(+), 96 deletions(-) delete mode 100644 src/lib/components/forms/types.ts rename src/lib/components/modal/select-contract/{ListCard.tsx => ContractListCard.tsx} (87%) rename src/lib/components/modal/select-contract/{ListDetail.tsx => ContractListDetail.tsx} (87%) rename src/lib/pages/{contracts => contract-list}/components/ContractListReadOnlyTable.tsx (95%) rename src/lib/pages/{contracts => contract-list}/components/ContractListTable.tsx (85%) rename src/lib/pages/{contracts => contract-list}/components/table/ContractNameCell.tsx (100%) rename src/lib/pages/{contracts => contract-list}/components/table/TagsCell.tsx (100%) rename src/lib/pages/{contracts => contract-list}/index.tsx (100%) rename src/lib/pages/{contracts => contract-list}/slug.tsx (89%) diff --git a/src/lib/components/InstantiateOffchainDetail.tsx b/src/lib/components/InstantiateOffchainDetail.tsx index 5cc2551fb..3f51c1846 100644 --- a/src/lib/components/InstantiateOffchainDetail.tsx +++ b/src/lib/components/InstantiateOffchainDetail.tsx @@ -4,7 +4,6 @@ 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 { ControllerInput, ControllerTextarea } from "lib/components/forms"; import { getMaxContractDescriptionLengthError, @@ -14,7 +13,7 @@ import { } from "lib/data"; import { useContractStore } from "lib/hooks"; import { useUserKey } from "lib/hooks/useUserKey"; -import type { ContractAddr } from "lib/types"; +import type { ContractAddr, Option } from "lib/types"; import { ListSelection } from "./forms/ListSelection"; import { TagSelection } from "./forms/TagSelection"; 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 7cb7ddc36..72a9baf8d 100644 --- a/src/lib/components/modal/select-contract/AllContractLists.tsx +++ b/src/lib/components/modal/select-contract/AllContractLists.tsx @@ -5,7 +5,7 @@ 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 { contractLists: ContractListInfo[]; @@ -46,7 +46,7 @@ export const AllContractLists = ({ ) : ( {filteredContractLists.map((item) => ( - void; isReadOnly: boolean; } -export const ListCard = ({ +export const ContractListCard = ({ item, handleListSelect, isReadOnly, -}: ListCardProps) => { +}: ContractListCardProps) => { const showLastUpdated = item.slug !== formatSlugName(INSTANTIATED_LIST_NAME); return ( @@ -98,16 +101,14 @@ export const ListCard = ({ , + 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 87% rename from src/lib/components/modal/select-contract/ListDetail.tsx rename to src/lib/components/modal/select-contract/ContractListDetail.tsx index d317afd34..d989bab3a 100644 --- a/src/lib/components/modal/select-contract/ListDetail.tsx +++ b/src/lib/components/modal/select-contract/ContractListDetail.tsx @@ -6,16 +6,16 @@ import { TagSelection, TextInput } from "lib/components/forms"; import { EmptyState } from "lib/components/state/EmptyState"; import { ZeroState } from "lib/components/state/ZeroState"; import { useContractStore, useUserKey } from "lib/hooks"; -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 { contracts: ContractInfo[]; isReadOnly?: boolean; - contractRemovalInfo: Option | undefined; - onContractSelect?: (addr: string) => void; + contractRemovalInfo?: Option; + onContractSelect?: (addr: ContractAddr) => void; } const FilteredListDetail = ({ @@ -45,19 +45,19 @@ const FilteredListDetail = ({ ); }; -interface ListDetailProps { +interface ContractListDetailProps { contractListInfo: ContractListInfo; isReadOnly?: boolean; isInstantiatedByMe?: boolean; - onContractSelect?: (addr: string) => void; + onContractSelect?: (addr: ContractAddr) => void; } -export const ListDetail = ({ +export const ContractListDetail = ({ contractListInfo, isReadOnly, isInstantiatedByMe = false, onContractSelect, -}: ListDetailProps) => { +}: ContractListDetailProps) => { const userKey = useUserKey(); const { getAllTags } = useContractStore(); diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx index 48843bdf3..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,7 +45,9 @@ export const SelectContract = ({ const { isOpen, onOpen, onClose } = useDisclosure(); const [listSlug, setListSlug] = useState(""); - const [searchManual, setSearchManual] = useState(""); + const [searchContract, setSearchContract] = useState( + "" as ContractAddr + ); const [invalid, setInvalid] = useState(""); const { getContractLists } = useContractStore(); @@ -56,27 +58,27 @@ export const SelectContract = ({ const resetOnClose = () => { setListSlug(""); - setSearchManual(""); + 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); @@ -117,16 +119,16 @@ export const SelectContract = ({ { const inputValue = e.target.value; - setSearchManual(inputValue); + setSearchContract(inputValue as ContractAddr); }} placeholder={`ex. ${exampleContractAddress}`} size="md" />