From 12c2655b3f05752b4510393bf6cba68199b00434 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:36:29 +0700 Subject: [PATCH 1/5] refactor: code tables --- .../select-code/CodeSelectDrawerButton.tsx | 29 +- .../select-code/CodesReadOnlyTable.tsx | 101 ------- .../select-code/MySavedCodeContent.tsx | 27 -- .../select-code/MyStoredCodeContent.tsx | 45 ---- src/lib/components/table/EditableCell.tsx | 2 +- .../components/table/codes/CodeNameCell.tsx | 4 +- src/lib/components/table/codes/CodesTable.tsx | 16 +- .../table/codes/CodesTableHeader.tsx | 8 +- .../components/table/codes/CodesTableRow.tsx | 49 ++-- .../table/codes/CodesTableWithWallet.tsx | 45 ++++ .../table/codes/MySavedCodesTable.tsx | 35 +++ .../table/codes/MyStoredCodesTable.tsx | 38 +++ src/lib/components/table/codes/index.ts | 5 +- src/lib/components/table/tableComponents.ts | 1 + .../components/tables/StoredCodesTable.tsx | 15 ++ src/lib/pages/codes/components/CodesTable.tsx | 250 ------------------ .../codes/components/MySavedCodesSection.tsx | 36 +++ .../codes/components/MyStoredCodesSection.tsx | 39 +++ .../pages/codes/components/SaveCodeButton.tsx | 2 +- .../pages/codes/components/UploadButton.tsx | 2 +- src/lib/pages/codes/index.tsx | 130 ++++----- src/lib/pages/recent-codes/index.tsx | 43 ++- 22 files changed, 383 insertions(+), 539 deletions(-) delete mode 100644 src/lib/components/select-code/CodesReadOnlyTable.tsx delete mode 100644 src/lib/components/select-code/MySavedCodeContent.tsx delete mode 100644 src/lib/components/select-code/MyStoredCodeContent.tsx create mode 100644 src/lib/components/table/codes/CodesTableWithWallet.tsx create mode 100644 src/lib/components/table/codes/MySavedCodesTable.tsx create mode 100644 src/lib/components/table/codes/MyStoredCodesTable.tsx delete mode 100644 src/lib/pages/codes/components/CodesTable.tsx create mode 100644 src/lib/pages/codes/components/MySavedCodesSection.tsx create mode 100644 src/lib/pages/codes/components/MyStoredCodesSection.tsx diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx index 93f722ee2..edc0416c0 100644 --- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx +++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx @@ -21,13 +21,11 @@ import { CustomTab } from "../CustomTab"; import { FilterByPermission } from "../forms"; import { CustomIcon } from "../icon"; import InputWithIcon from "../InputWithIcon"; +import { MySavedCodesTable, MyStoredCodesTable } from "../table"; import type { PermissionFilterValue } from "lib/hooks"; import { useMyCodesData } from "lib/model/code"; import { AmpEvent, AmpTrack } from "lib/services/amplitude"; -import { MySavedCodeContent } from "./MySavedCodeContent"; -import { MyStoredCodeContent } from "./MyStoredCodeContent"; - interface CodeFilterState { keyword: string; permissionValue: PermissionFilterValue; @@ -66,11 +64,13 @@ export const CodeSelectDrawerButton = ({ isSavedCodesLoading, } = useMyCodesData(keyword, permissionValue); - const handleSelect = (code: string) => { - onCodeSelect(code); + const handleSelect = (codeId: number) => { + onCodeSelect(codeId.toString()); onClose(); }; + const isSearching = !!keyword || permissionValue !== "all"; + return ( <> - - - - - - - - - - - - - } - > - Edit details - - } - /> - } - > - Add or remove from other lists - - } - /> - } - onClick={() => { - navigate({ - pathname: "/admin", - query: { contract: item.contractAddress }, - }); - }} - isDisabled={!isAdmin} - > - Update Admin - - - } - isDisabled={!isAdmin} - > - Clear Admin - - } - /> - {!!contractRemovalInfo && ( - <> - - - ), - children: "Remove from this list", - }} - /> - - )} - - - - - - - ); - })} - - ); -}; diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx index 26715a902..d4bbc9136 100644 --- a/src/lib/components/select-contract/SelectContractAdmin.tsx +++ b/src/lib/components/select-contract/SelectContractAdmin.tsx @@ -35,7 +35,9 @@ export const SelectContractAdmin = ({ const { address } = useWallet(); const { getContractLocalInfo } = useContractStore(); - const { data: contracts = [] } = useContractListByAdmin(address as HumanAddr); + const { data: contracts = [], isLoading } = useContractListByAdmin( + address as HumanAddr + ); const contractList: ContractListInfo = { name: ADMIN_SPECIAL_SLUG, slug: ADMIN_SPECIAL_SLUG, @@ -87,6 +89,7 @@ export const SelectContractAdmin = ({ diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx index 33361227a..0186ff05b 100644 --- a/src/lib/components/select-contract/SelectContractInstantiator.tsx +++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx @@ -57,10 +57,8 @@ export const SelectContractInstantiator = ({ const { getContractLists } = useContractStore(); // TODO - Revisit false case - const contractLists = [ - useInstantiatedByMe(true).instantiatedListInfo, - ...getContractLists(), - ]; + const { instantiatedListInfo, isLoading } = useInstantiatedByMe(true); + const contractLists = [instantiatedListInfo, ...getContractLists()]; const contractList = contractLists.find((item) => item.slug === listSlug); const endpoint = useLCDEndpoint(); @@ -201,6 +199,7 @@ export const SelectContractInstantiator = ({ diff --git a/src/lib/components/select-contract/index.ts b/src/lib/components/select-contract/index.ts index a8df86c5c..896d9c9ad 100644 --- a/src/lib/components/select-contract/index.ts +++ b/src/lib/components/select-contract/index.ts @@ -1,7 +1,5 @@ export * from "./AllContractLists"; export * from "./ContractListCard"; export * from "./ContractListDetail"; -export * from "./ContractListReadOnlyTable"; -export * from "./ContractListTable"; export * from "./SelectContractAdmin"; export * from "./SelectContractInstantiator"; diff --git a/src/lib/components/state/DisconnectedState.tsx b/src/lib/components/state/DisconnectedState.tsx index 157405abd..3f9430fe0 100644 --- a/src/lib/components/state/DisconnectedState.tsx +++ b/src/lib/components/state/DisconnectedState.tsx @@ -2,6 +2,8 @@ import { Flex, Text } from "@chakra-ui/react"; import { ConnectWalletBtn } from "../button/ConnectWallet"; +import { StateImage } from "./StateImage"; + interface DisconnectedStateProps { text: string; helperText?: string; @@ -11,7 +13,8 @@ export const DisconnectedState = ({ text, helperText, }: DisconnectedStateProps) => ( - <> + + @@ -30,5 +33,5 @@ export const DisconnectedState = ({ {helperText} )} - + ); diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx index 46ef82042..ef4e1c695 100644 --- a/src/lib/components/state/EmptyState.tsx +++ b/src/lib/components/state/EmptyState.tsx @@ -1,6 +1,7 @@ -import { Flex, Text, Image, Heading } from "@chakra-ui/react"; +import { Flex, Text, Heading } from "@chakra-ui/react"; -type ImageVariant = "empty" | "not-found"; +import type { ImageVariant } from "./StateImage"; +import { StateImage } from "./StateImage"; interface EmptyStateProps { imageVariant?: ImageVariant; @@ -9,11 +10,6 @@ interface EmptyStateProps { withBorder?: boolean; } -const imageSourceMap: Record = { - empty: "https://assets.alleslabs.dev/illustration/search-empty.svg", - "not-found": "https://assets.alleslabs.dev/illustration/search-not-found.svg", -}; - export const EmptyState = ({ message, imageVariant, @@ -27,13 +23,7 @@ export const EmptyState = ({ borderColor="pebble.700" > - {imageVariant && ( - result not found - )} + {imageVariant && } {heading && ( {heading} diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx index 946ecd3b0..96316729e 100644 --- a/src/lib/components/state/InvalidState.tsx +++ b/src/lib/components/state/InvalidState.tsx @@ -1,9 +1,11 @@ -import { Flex, Heading, Image, Text } from "@chakra-ui/react"; +import { Flex, Heading, Text } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; import { AmpTrackInvalidState } from "lib/services/amplitude"; +import { StateImage } from "./StateImage"; + interface InvalidStateProps { title: string; } @@ -24,11 +26,7 @@ export const InvalidState = ({ title }: InvalidStateProps) => { my="24px" py="24px" > - result not found + {title} diff --git a/src/lib/components/state/StateImage.tsx b/src/lib/components/state/StateImage.tsx new file mode 100644 index 000000000..62702317f --- /dev/null +++ b/src/lib/components/state/StateImage.tsx @@ -0,0 +1,21 @@ +import { Image } from "@chakra-ui/react"; + +export type ImageVariant = "empty" | "not-found" | "disconnected"; + +const imageSourceMap: Record = { + empty: "https://assets.alleslabs.dev/illustration/search-empty.svg", + "not-found": "https://assets.alleslabs.dev/illustration/search-not-found.svg", + disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg", +}; + +interface StateImageProps { + imageVariant: ImageVariant; +} + +export const StateImage = ({ imageVariant }: StateImageProps) => ( + result not found +); diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx index 5e9f50a8c..903328963 100644 --- a/src/lib/components/state/ZeroState.tsx +++ b/src/lib/components/state/ZeroState.tsx @@ -1,4 +1,4 @@ -import { Flex, Button, Image, Text } from "@chakra-ui/react"; +import { Flex, Button, Text } from "@chakra-ui/react"; import { CustomIcon } from "../icon"; import { useInternalNavigate } from "lib/app-provider"; @@ -7,6 +7,8 @@ import { ADMIN_SPECIAL_SLUG, INSTANTIATED_LIST_NAME } from "lib/data"; import type { LVPair } from "lib/types"; import { formatSlugName } from "lib/utils"; +import { StateImage } from "./StateImage"; + interface ZeroStateProps { list: LVPair; isReadOnly?: boolean; @@ -72,11 +74,7 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => { alignContent="center" > - result not found + {renderText(list.value)} {!isReadOnly && ( diff --git a/src/lib/components/table/codes/MyStoredCodesTable.tsx b/src/lib/components/table/codes/MyStoredCodesTable.tsx index c55ba2650..5a8b04e14 100644 --- a/src/lib/components/table/codes/MyStoredCodesTable.tsx +++ b/src/lib/components/table/codes/MyStoredCodesTable.tsx @@ -27,6 +27,7 @@ export const MyStoredCodesTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx index 56476bdba..3391a9070 100644 --- a/src/lib/components/table/contracts/ContractsTable.tsx +++ b/src/lib/components/table/contracts/ContractsTable.tsx @@ -1,30 +1,42 @@ import { TableContainer } from "../tableComponents"; import { Loading } from "lib/components/Loading"; -import type { ContractInfo, Option } from "lib/types"; +import type { ContractAddr, ContractInfo, Option } from "lib/types"; import { ContractsTableHeader } from "./ContractsTableHeader"; import { ContractsTableRow } from "./ContractsTableRow"; +import type { CTAInfo } from "./ContractsTableRowCTA"; interface ContractsTableProps { contracts: Option; isLoading: boolean; emptyState: JSX.Element; + onRowSelect: (contract: ContractAddr) => void; + isReadOnly?: boolean; + withCTA?: CTAInfo; } export const ContractsTable = ({ contracts, isLoading, emptyState, + onRowSelect, + isReadOnly = false, + withCTA, }: ContractsTableProps) => { if (isLoading) return ; if (!contracts?.length) return emptyState; - const templateColumns = - "150px minmax(250px, 1fr) 200px 150px minmax(250px, 300px) 70px"; + const templateColumns = isReadOnly + ? "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr" + : "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 250px 60px"; return ( - + {contracts.map((contractInfo) => ( ))} diff --git a/src/lib/components/table/contracts/ContractsTableHeader.tsx b/src/lib/components/table/contracts/ContractsTableHeader.tsx index 145d0b828..1e35fd5f4 100644 --- a/src/lib/components/table/contracts/ContractsTableHeader.tsx +++ b/src/lib/components/table/contracts/ContractsTableHeader.tsx @@ -3,17 +3,27 @@ import { Grid } from "@chakra-ui/react"; import { TableHeader } from "../tableComponents"; +import type { CTAInfo } from "./ContractsTableRowCTA"; + export const ContractsTableHeader = ({ templateColumns, + isReadOnly, + withCTA, }: { templateColumns: GridProps["templateColumns"]; + isReadOnly: boolean; + withCTA?: CTAInfo; }) => ( - Contract Address + Contract Address Contract Name Tags Instantiator - Timestamp - + {!isReadOnly && ( + <> + {withCTA ? : Timestamp} + + + )} ); diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx index eb1e4b04b..3a0c913ed 100644 --- a/src/lib/components/table/contracts/ContractsTableRow.tsx +++ b/src/lib/components/table/contracts/ContractsTableRow.tsx @@ -1,44 +1,45 @@ -import { Flex, Text, Grid, IconButton, Box, chakra } from "@chakra-ui/react"; +import { Flex, Text, Grid } from "@chakra-ui/react"; import { TableRow } from "../tableComponents"; -import { useInternalNavigate, useGetAddressType } from "lib/app-provider"; +import { useGetAddressType } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; -import { CustomIcon } from "lib/components/icon"; -import { - AddToOtherListModal, - SaveContractDetailsModal, -} from "lib/components/modal"; -import type { ContractInfo } from "lib/types"; +import type { ContractAddr, ContractInfo } from "lib/types"; import { RemarkOperation } from "lib/types"; -import { dateFromNow, formatUTC } from "lib/utils"; import { ContractNameCell } from "./ContractNameCell"; +import type { CTAInfo } from "./ContractsTableRowCTA"; +import { ContractsTableRowCTA } from "./ContractsTableRowCTA"; import { TagsCell } from "./TagsCell"; -const StyledIconButton = chakra(IconButton, { - baseStyle: { - display: "flex", - alignItems: "center", - fontSize: "22px", - borderRadius: "36px", - }, -}); - interface ContractsTableRowProps { contractInfo: ContractInfo; templateColumns: string; + onRowSelect: (contract: ContractAddr) => void; + isReadOnly: boolean; + withCTA?: CTAInfo; } const InstantiatorRender = ({ - contractInfo: { remark, latestUpdater }, -}: Pick) => { + contractInfo: { instantiator, remark, latestUpdater }, + isReadOnly, +}: { + contractInfo: ContractInfo; + isReadOnly: boolean; +}) => { const getAddressType = useGetAddressType(); /** * @remarks handle the case where the data is too old and cannot be found */ if (!latestUpdater) - return ( + return instantiator ? ( + + ) : ( N/A @@ -63,6 +64,7 @@ const InstantiatorRender = ({ value={latestUpdater} type={updaterType} showCopyOnHover + isReadOnly={isReadOnly} /> ); @@ -72,6 +74,7 @@ const InstantiatorRender = ({ value={latestUpdater} type={updaterType} showCopyOnHover + isReadOnly={isReadOnly} /> ); default: @@ -86,93 +89,44 @@ const InstantiatorRender = ({ export const ContractsTableRow = ({ contractInfo, templateColumns, -}: ContractsTableRowProps) => { - const navigate = useInternalNavigate(); + onRowSelect, + isReadOnly, + withCTA, +}: ContractsTableRowProps) => ( + onRowSelect(contractInfo.contractAddress)} + _hover={{ bg: "pebble.900" }} + transition="all .25s ease-in-out" + cursor="pointer" + minW="min-content" + > + + + - return ( - - navigate({ - pathname: `/contract/${contractInfo.contractAddress}`, - }) - } - _hover={{ bg: "pebble.900" }} - transition="all .25s ease-in-out" - cursor="pointer" - minW="min-content" - > - - - + + + - - - + + + - - - + + + - - - - - - e.stopPropagation()} - cursor="text" - > - {contractInfo.latestUpdated ? ( - <> - - {formatUTC(contractInfo.latestUpdated)} - - - {`(${dateFromNow(contractInfo.latestUpdated)})`} - - - ) : ( - - N/A - - )} - - - - - e.stopPropagation()}> - {contractInfo.lists ? ( - - } - variant="ghost-gray" - /> - } - /> - ) : ( - } - variant="ghost-gray" - /> - } - /> - )} - - - - ); -}; + {!isReadOnly && ( + + )} + +); diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx new file mode 100644 index 000000000..d652aade5 --- /dev/null +++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx @@ -0,0 +1,209 @@ +import { + Box, + Button, + chakra, + Flex, + IconButton, + Menu, + MenuButton, + MenuDivider, + MenuItem, + MenuList, + Text, +} from "@chakra-ui/react"; +import { useWallet } from "@cosmos-kit/react"; + +import { TableRow } from "../tableComponents"; +import { useInternalNavigate } from "lib/app-provider"; +import { AppLink } from "lib/components/AppLink"; +import { CustomIcon } from "lib/components/icon"; +import { + AddToOtherListModal, + ClearAdminModal, + EditContractDetailsModal, + RemoveContractModal, + SaveContractDetailsModal, +} from "lib/components/modal"; +import type { ContractInfo, LVPair, Option } from "lib/types"; +import { dateFromNow, formatUTC } from "lib/utils"; + +const StyledMenuItem = chakra(MenuItem, { + baseStyle: { + fontSize: "14px", + }, +}); + +const StyledIconButton = chakra(IconButton, { + baseStyle: { + display: "flex", + alignItems: "center", + fontSize: "22px", + borderRadius: "36px", + }, +}); + +export interface CTAInfo { + contractRemovalInfo: Option; +} + +interface ContractsTableRowCTAProps { + contractInfo: ContractInfo; + withCTA?: CTAInfo; +} + +export const ContractsTableRowCTA = ({ + contractInfo, + withCTA, +}: ContractsTableRowCTAProps) => { + const { address } = useWallet(); + const navigate = useInternalNavigate(); + + const isAdmin = !!address && address === contractInfo.admin; + return withCTA ? ( + <> + + e.stopPropagation()} + > + + + + + + + + + + + + + + + + + + + } + > + Edit details + + } + /> + } + > + Add or remove from other lists + + } + /> + } + onClick={() => { + navigate({ + pathname: "/admin", + query: { contract: contractInfo.contractAddress }, + }); + }} + isDisabled={!isAdmin} + > + Update Admin + + } + isDisabled={!isAdmin} + > + Clear Admin + + } + /> + {!!withCTA.contractRemovalInfo && ( + <> + + , + children: "Remove from this list", + }} + /> + + )} + + + + + ) : ( + <> + + e.stopPropagation()} + cursor="text" + > + {contractInfo.latestUpdated ? ( + <> + + {formatUTC(contractInfo.latestUpdated)} + + + {`(${dateFromNow(contractInfo.latestUpdated)})`} + + + ) : ( + + N/A + + )} + + + + + e.stopPropagation()}> + {contractInfo.lists ? ( + + } + variant="ghost-gray" + /> + } + /> + ) : ( + } + variant="ghost-gray" + /> + } + /> + )} + + + + ); +}; diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts index f2afddea7..04d2fcbb9 100644 --- a/src/lib/components/table/tableComponents.ts +++ b/src/lib/components/table/tableComponents.ts @@ -22,16 +22,6 @@ export const TableHeader = chakra(GridItem, { }, }); -export const TableHeaderNoBorder = chakra(GridItem, { - baseStyle: { - color: "text.main", - fontSize: "12px", - fontWeight: 700, - py: 6, - px: 4, - }, -}); - export const TableRow = chakra(GridItem, { baseStyle: { color: "text.main", @@ -45,14 +35,3 @@ export const TableRow = chakra(GridItem, { borderColor: "pebble.700", }, }); - -export const TableRowNoBorder = chakra(GridItem, { - baseStyle: { - color: "text.main", - fontSize: "14px", - fontWeight: 400, - p: 4, - display: "flex", - alignItems: "center", - }, -}); diff --git a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx index 6a73793b8..25eea1568 100644 --- a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx +++ b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx @@ -1,12 +1,26 @@ import { Box } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; +import { useCallback } from "react"; +import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { EmptyState } from "lib/components/state"; import { ContractsTable, TableTitle, ViewMore } from "lib/components/table"; import { useAccountAdminContracts } from "lib/pages/account-details/data"; -import type { HumanAddr, Option } from "lib/types"; +import type { ContractAddr, HumanAddr, Option } from "lib/types"; + +const useOnRowSelect = () => { + const navigate = useInternalNavigate(); + return useCallback( + (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }), + [navigate] + ); +}; interface AdminContractsTableProps { walletAddress: HumanAddr; @@ -68,10 +82,12 @@ export const AdminContractsTable = ({ isLoading={isLoading} emptyState={ } + onRowSelect={useOnRowSelect()} /> {!!totalData && (onViewMore diff --git a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx index b772ce915..f067427bc 100644 --- a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx +++ b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx @@ -1,12 +1,26 @@ import { Box } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; +import { useCallback } from "react"; +import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { EmptyState } from "lib/components/state"; import { ContractsTable, TableTitle, ViewMore } from "lib/components/table"; import { useAccountContracts } from "lib/pages/account-details/data"; -import type { HumanAddr, Option } from "lib/types"; +import type { ContractAddr, HumanAddr, Option } from "lib/types"; + +const useOnRowSelect = () => { + const navigate = useInternalNavigate(); + return useCallback( + (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }), + [navigate] + ); +}; interface InstantiatedContractsTableProps { walletAddress: HumanAddr; @@ -68,10 +82,12 @@ export const InstantiatedContractsTable = ({ isLoading={isLoading} emptyState={ } + onRowSelect={useOnRowSelect()} /> {!!totalData && (onViewMore diff --git a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx index 21a33eee2..b6788b538 100644 --- a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx +++ b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx @@ -63,6 +63,7 @@ export const OpenedProposalsTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx index dac488531..425dff2ce 100644 --- a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx +++ b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx @@ -82,6 +82,7 @@ export const StoredCodesTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/pages/account-details/components/tables/TxsTable.tsx b/src/lib/pages/account-details/components/tables/TxsTable.tsx index 41e418926..c6136aab9 100644 --- a/src/lib/pages/account-details/components/tables/TxsTable.tsx +++ b/src/lib/pages/account-details/components/tables/TxsTable.tsx @@ -82,12 +82,13 @@ const TxsTableBody = ({ emptyState={ !filterSelected.length ? ( ) : ( diff --git a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx index ce0e15b9b..87fcdb10a 100644 --- a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx +++ b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx @@ -1,15 +1,29 @@ import { observer } from "mobx-react-lite"; import type { ChangeEvent } from "react"; -import { useEffect } from "react"; +import { useCallback, useEffect } from "react"; +import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { ContractsTable, TableTitle } from "lib/components/table"; import { useContractsByCodeId } from "lib/model/contract"; import { useContractListCountByCodeId } from "lib/services/contractService"; +import type { ContractAddr } from "lib/types"; import { NoContracts } from "./NoContracts"; +const useOnRowSelect = () => { + const navigate = useInternalNavigate(); + return useCallback( + (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }), + [navigate] + ); +}; + interface CodeContractsTableProps { codeId: number; } @@ -67,6 +81,7 @@ export const CodeContractsTable = observer( contracts={contracts} isLoading={isLoading} emptyState={} + onRowSelect={useOnRowSelect()} /> {!!totalData && totalData > 10 && ( ( - + + No contract instances from this code. @@ -17,17 +26,15 @@ const DisconnectedState = () => ( ); -const EmptyState = () => ( - - No contract instances from this code. - -); - export const NoContracts = () => { const { isWalletConnected } = useWallet(); - return ( - - {!isWalletConnected ? : } - + return !isWalletConnected ? ( + + ) : ( + ); }; diff --git a/src/lib/pages/contract-details/components/tables/ExecuteTxsTable.tsx b/src/lib/pages/contract-details/components/tables/ExecuteTxsTable.tsx index 2bcdca920..22e942177 100644 --- a/src/lib/pages/contract-details/components/tables/ExecuteTxsTable.tsx +++ b/src/lib/pages/contract-details/components/tables/ExecuteTxsTable.tsx @@ -58,6 +58,7 @@ export const ExecuteTxsTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx index a839feb6f..346ca1593 100644 --- a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx +++ b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx @@ -62,6 +62,7 @@ export const RelatedProposalsTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx index b4752137e..d3d05402f 100644 --- a/src/lib/pages/contract-details/components/tables/TxsTable.tsx +++ b/src/lib/pages/contract-details/components/tables/TxsTable.tsx @@ -61,6 +61,7 @@ export const TxsTable = ({ isLoading={isLoading} emptyState={ diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx index 65907c52f..cee6f7b62 100644 --- a/src/lib/pages/contract-details/components/tables/migration/index.tsx +++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx @@ -60,6 +60,7 @@ export const MigrationTable = ({ if (!migrationHistories?.length) return ( diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 5c9cf4e61..a2f11f6da 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -7,12 +7,11 @@ import { MenuList, Breadcrumb, BreadcrumbItem, - Box, Text, } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { useEffect } from "react"; +import { useCallback, useEffect } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { AppLink } from "lib/components/AppLink"; @@ -22,11 +21,13 @@ import { RemoveListModal, SaveNewContractModal, } from "lib/components/modal"; +import PageContainer from "lib/components/PageContainer"; import { ContractListDetail } from "lib/components/select-contract"; import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data"; import { useInstantiatedByMe } from "lib/model/contract"; import { useContractStore } from "lib/providers/store"; import { AmpEvent, AmpTrack } from "lib/services/amplitude"; +import type { ContractAddr } from "lib/types"; import { formatSlugName, getFirstQueryParam } from "lib/utils"; const ContractsByList = observer(() => { @@ -45,6 +46,15 @@ const ContractsByList = observer(() => { ? instantiatedListInfo : getContractLists().find((item) => item.slug === listSlug); + const onContractSelect = useCallback( + (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }), + [navigate] + ); + useEffect(() => { // TODO: find a better approach? const timeoutId = setTimeout(() => { @@ -72,111 +82,110 @@ const ContractsByList = observer(() => { if (!contractListInfo) return null; return ( - <> - - } + + } + > + - + Contract Lists + + + + - - Contract Lists - - - - - {contractListInfo.name} - - - - - {contractListInfo.name} - - - {isInstantiatedByMe ? ( - - ) : ( - - ), - children: "Save Contract", - }} - /> - )} - {contractListInfo.isInfoEditable && ( - - - - - - , - children: "Edit list name", - }} - reroute - /> - , - children: "Remove list", - }} + + + + + + {contractListInfo.name} + + + {isInstantiatedByMe ? ( + + ) : ( + - - - )} - + ), + children: "Save Contract", + }} + /> + )} + {contractListInfo.isInfoEditable && ( + + + + + + , + children: "Edit list name", + }} + reroute + /> + , + children: "Remove list", + }} + /> + + + )} - + - + ); }); diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx index cb10875fc..d5f85ab21 100644 --- a/src/lib/pages/home/components/RecentlyViewContracts.tsx +++ b/src/lib/pages/home/components/RecentlyViewContracts.tsx @@ -1,6 +1,7 @@ import { Heading, Box, Flex, Text } from "@chakra-ui/react"; -import { ContractListTable } from "lib/components/select-contract"; +import { EmptyState } from "lib/components/state"; +import { ContractsTable } from "lib/components/table"; import type { Addr, ContractAddr } from "lib/types"; import { getCurrentDate } from "lib/utils"; @@ -16,6 +17,10 @@ const contracts = [ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed facilisis facilisis risus. Ut volutpat accumsan massa eget consequat, id egestas nulla.", label: "label1", created: getCurrentDate(), + admin: undefined, + latestUpdater: undefined, + latestUpdated: undefined, + remark: undefined, }, { contractAddress: @@ -26,6 +31,10 @@ const contracts = [ description: "Lorem ipsum dolor id egestas nulla.", label: "label2", created: getCurrentDate(), + admin: undefined, + latestUpdater: undefined, + latestUpdated: undefined, + remark: undefined, }, { contractAddress: @@ -36,6 +45,10 @@ const contracts = [ description: "", label: "label3", created: getCurrentDate(), + admin: undefined, + latestUpdater: undefined, + latestUpdated: undefined, + remark: undefined, }, { contractAddress: @@ -47,6 +60,10 @@ const contracts = [ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. id egestas nulla.", label: "label4", created: getCurrentDate(), + admin: undefined, + latestUpdater: undefined, + latestUpdated: undefined, + remark: undefined, }, ]; export const RecentlyViewContracts = () => ( @@ -55,7 +72,17 @@ export const RecentlyViewContracts = () => ( Recently Viewed Contracts {contracts && contracts.length ? ( - + + } + onRowSelect={() => {}} + /> ) : ( { const navigate = useInternalNavigate(); const { currentChainName } = useWallet(); @@ -32,26 +32,24 @@ export const PublicProjectCodeRow = ({ return ( - + - - + + {publicInfo.name} - - + + {cw2Info ?? "N/A"} - - + + {publicInfo.contractCount} - - + + - - - - + + + + + e.stopPropagation()}> + - e.stopPropagation()}> - - - - - + + + ); }; diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx index 864c4d206..e8f81b170 100644 --- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx +++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx @@ -22,16 +22,17 @@ interface PublicProjectCodeTableProps { } const TEMPLATE_COLUMNS = - "max(80px) minmax(300px, 1fr) minmax(220px, 1fr) max(120px) max(160px) minmax(320px, 0.75fr)"; + "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px 180px"; const CodeTableHeader = () => ( - + Code ID Code Name CW2 Info - Contracts + Contracts Uploader Permission + ); @@ -95,7 +96,7 @@ export const PublicProjectCodeTable = observer( ))} diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx index 2202dc654..38330ede3 100644 --- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx +++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx @@ -18,13 +18,13 @@ import { AddToOtherListModal, SaveContractDetailsModal, } from "lib/components/modal"; -import { TableRowNoBorder } from "lib/components/table"; +import { TableRow } from "lib/components/table"; import type { PublicContractInfo } from "./PublicProjectContractTable"; interface ContractTableRowProps { publicContractInfo: PublicContractInfo; - templateColumn: string; + templateColumns: string; } // TODO - Revisit this style (exist in multiple places) @@ -39,7 +39,7 @@ const StyledIconButton = chakra(IconButton, { export const PublicProjectContractRow = ({ publicContractInfo, - templateColumn, + templateColumns, }: ContractTableRowProps) => { const navigate = useInternalNavigate(); const { currentChainName } = useWallet(); @@ -52,16 +52,14 @@ export const PublicProjectContractRow = ({ return ( - + - - + + {publicContractInfo.publicInfo.name} {publicContractInfo.publicInfo.description && ( )} - - + + - - + + - + ); }; diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx index 1448a81e3..8a2cb97cb 100644 --- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx +++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx @@ -86,7 +86,7 @@ export const PublicProjectContractTable = observer( ))} diff --git a/src/lib/pages/recent-codes/index.tsx b/src/lib/pages/recent-codes/index.tsx index b16636c35..bfc6a656e 100644 --- a/src/lib/pages/recent-codes/index.tsx +++ b/src/lib/pages/recent-codes/index.tsx @@ -82,6 +82,7 @@ const RecentCodes = observer(() => { isLoading={isLoading} emptyState={ Date: Thu, 23 Mar 2023 00:28:11 +0700 Subject: [PATCH 3/5] fix: add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb5c632e6..1f2a78fcd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#251](https://github.com/alleslabs/celatone-frontend/pull/251) Refactor Code and Contract tables into general components - [#252](https://github.com/alleslabs/celatone-frontend/pull/252) Refactor Empty State image source logic - [#249](https://github.com/alleslabs/celatone-frontend/pull/249) Change code table format in select code draw and add CW2 info - [#247](https://github.com/alleslabs/celatone-frontend/pull/247) Refactor hover logic of copier icon From 6fa41351c2a83d8e635daab5cd592a0e21e23732 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 23 Mar 2023 11:09:51 +0700 Subject: [PATCH 4/5] fix: past tx table --- .../pages/past-txs/components/PastTxRow.tsx | 2 +- .../components/PastTxsTableHeader.tsx | 2 +- src/lib/pages/past-txs/index.tsx | 54 +++++++++---------- 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/src/lib/pages/past-txs/components/PastTxRow.tsx b/src/lib/pages/past-txs/components/PastTxRow.tsx index 0b2b68ea7..db8772dd8 100644 --- a/src/lib/pages/past-txs/components/PastTxRow.tsx +++ b/src/lib/pages/past-txs/components/PastTxRow.tsx @@ -31,7 +31,7 @@ export const PastTxRow = ({ transition="all .25s ease-in-out" cursor={isAccordion ? "pointer" : "default"} > - + ( - Transaction Hash + Transaction Hash Messages Timestamp diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx index 7bb7f7c16..9081a8044 100644 --- a/src/lib/pages/past-txs/index.tsx +++ b/src/lib/pages/past-txs/index.tsx @@ -1,5 +1,4 @@ import { - Box, Flex, Heading, Input, @@ -13,6 +12,7 @@ import { useEffect, useMemo } from "react"; import { useForm } from "react-hook-form"; import { CustomIcon } from "lib/components/icon"; +import PageContainer from "lib/components/PageContainer"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { TxFilterSelection } from "lib/components/TxFilterSelection"; @@ -106,34 +106,32 @@ const PastTxs = () => { }, [router.isReady]); return ( - <> - - - Past Transactions - - - - - - setValue("search", e.target.value)} - placeholder="Search with transaction hash or contract address" - h="full" - /> - - - - - + + Past Transactions + + + + + + setValue("search", e.target.value)} + placeholder="Search with transaction hash or contract address" + h="full" /> - + + + + + - + { onPageSizeChange={onPageSizeChange} /> )} - + ); }; From dd1315b110dce80202cd50133f3af51ac4bf4324 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 23 Mar 2023 14:31:48 +0700 Subject: [PATCH 5/5] fix: comments --- .../select-code/CodeSelectDrawerButton.tsx | 6 +- .../select-contract/ContractListDetail.tsx | 2 +- .../components/table/codes/CodeNameCell.tsx | 5 +- .../table/codes/CodesTableWithWallet.tsx | 6 +- .../table/codes/MySavedCodesTable.tsx | 6 +- .../table/codes/MyStoredCodesTable.tsx | 12 +-- .../table/contracts/ContractsTable.tsx | 2 +- .../table/contracts/ContractsTableRowCTA.tsx | 6 +- .../components/tables/AdminContractsTable.tsx | 22 ++-- .../tables/InstantiatedContractsTable.tsx | 22 ++-- .../components/tables/StoredCodesTable.tsx | 22 ++-- .../components/table/CodeContractsTable.tsx | 23 ++-- .../codes/components/MySavedCodesSection.tsx | 2 +- .../codes/components/MyStoredCodesSection.tsx | 8 +- src/lib/pages/codes/index.tsx | 26 ++--- src/lib/pages/contract-list/slug.tsx | 15 ++- .../home/components/RecentlyViewContracts.tsx | 102 ------------------ src/lib/pages/recent-codes/index.tsx | 23 ++-- src/lib/services/contractService.ts | 40 +++---- 19 files changed, 107 insertions(+), 243 deletions(-) delete mode 100644 src/lib/pages/home/components/RecentlyViewContracts.tsx diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx index edc0416c0..0a107dd68 100644 --- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx +++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx @@ -126,8 +126,8 @@ export const CodeSelectDrawerButton = ({ codes={stored} isLoading={isStoredCodesLoading} onRowSelect={handleSelect} - empty="You don’t have any stored codes in this device." - disconnected="to see your stored code." + emptyMessage="You don’t have any stored codes in this device." + disconnectedMessage="to see your stored code." isSearching={isSearching} isReadOnly /> @@ -137,7 +137,7 @@ export const CodeSelectDrawerButton = ({ codes={saved} isLoading={isSavedCodesLoading} onRowSelect={handleSelect} - empty="You don’t have any saved codes in this device." + emptyMessage="You don’t have any saved codes in this device." isSearching={isSearching} isReadOnly /> diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx index 8bd59e93e..a27999a0b 100644 --- a/src/lib/components/select-contract/ContractListDetail.tsx +++ b/src/lib/components/select-contract/ContractListDetail.tsx @@ -65,7 +65,7 @@ const ContractListContent = ({ isReadOnly ? undefined : { - contractRemovalInfo: contractListInfo.isContractRemovable + removingContractList: contractListInfo.isContractRemovable ? { label: contractListInfo.name, value: contractListInfo.slug } : undefined, } diff --git a/src/lib/components/table/codes/CodeNameCell.tsx b/src/lib/components/table/codes/CodeNameCell.tsx index 2a930d89b..f4bb1f295 100644 --- a/src/lib/components/table/codes/CodeNameCell.tsx +++ b/src/lib/components/table/codes/CodeNameCell.tsx @@ -12,7 +12,10 @@ interface CodeNameCellProps { isReadOnly?: boolean; } -export const CodeNameCell = ({ code, isReadOnly }: CodeNameCellProps) => { +export const CodeNameCell = ({ + code, + isReadOnly = false, +}: CodeNameCellProps) => { const toast = useToast(); const { updateCodeInfo } = useCodeStore(); diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx index 721c16051..75d394e14 100644 --- a/src/lib/components/table/codes/CodesTableWithWallet.tsx +++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx @@ -11,7 +11,7 @@ interface CodesTableWithWalletProps { isLoading: boolean; emptyState: JSX.Element; onRowSelect: (codeId: number) => void; - disconnected: string; + disconnectedMessage: string; isReadOnly?: boolean; } @@ -20,7 +20,7 @@ export const CodesTableWithWallet = ({ isLoading, emptyState, onRowSelect, - disconnected, + disconnectedMessage, isReadOnly = false, }: CodesTableWithWalletProps) => { const { address } = useWallet(); @@ -31,7 +31,7 @@ export const CodesTableWithWallet = ({ borderY="1px solid" borderColor="pebble.700" > - + ) : ( void; - empty: string; + emptyMessage: string; isSearching: boolean; isReadOnly?: boolean; } @@ -16,7 +16,7 @@ export const MySavedCodesTable = ({ codes, isLoading, onRowSelect, - empty, + emptyMessage, isSearching, isReadOnly = false, }: MySavedCodesTableProps) => ( @@ -26,7 +26,7 @@ export const MySavedCodesTable = ({ emptyState={ } diff --git a/src/lib/components/table/codes/MyStoredCodesTable.tsx b/src/lib/components/table/codes/MyStoredCodesTable.tsx index 5a8b04e14..9af08c23c 100644 --- a/src/lib/components/table/codes/MyStoredCodesTable.tsx +++ b/src/lib/components/table/codes/MyStoredCodesTable.tsx @@ -7,8 +7,8 @@ interface MyStoredCodesTableProps { codes: CodeInfo[]; isLoading: boolean; onRowSelect: (codeId: number) => void; - empty: string; - disconnected: string; + emptyMessage: string; + disconnectedMessage: string; isSearching: boolean; isReadOnly?: boolean; } @@ -17,8 +17,8 @@ export const MyStoredCodesTable = ({ codes, isLoading, onRowSelect, - empty, - disconnected, + emptyMessage, + disconnectedMessage, isSearching, isReadOnly = false, }: MyStoredCodesTableProps) => ( @@ -28,12 +28,12 @@ export const MyStoredCodesTable = ({ emptyState={ } onRowSelect={onRowSelect} - disconnected={disconnected} + disconnectedMessage={disconnectedMessage} isReadOnly={isReadOnly} /> ); diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx index 3391a9070..30433eb18 100644 --- a/src/lib/components/table/contracts/ContractsTable.tsx +++ b/src/lib/components/table/contracts/ContractsTable.tsx @@ -28,7 +28,7 @@ export const ContractsTable = ({ const templateColumns = isReadOnly ? "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr" - : "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 250px 60px"; + : "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 250px 80px"; return ( diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx index d652aade5..aef7eb2a9 100644 --- a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx +++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx @@ -43,7 +43,7 @@ const StyledIconButton = chakra(IconButton, { }); export interface CTAInfo { - contractRemovalInfo: Option; + removingContractList: Option; } interface ContractsTableRowCTAProps { @@ -134,12 +134,12 @@ export const ContractsTableRowCTA = ({ } /> - {!!withCTA.contractRemovalInfo && ( + {!!withCTA.removingContractList && ( <> , children: "Remove from this list", diff --git a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx index 25eea1568..febc7a8d7 100644 --- a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx +++ b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx @@ -1,6 +1,5 @@ import { Box } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; -import { useCallback } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; @@ -10,18 +9,6 @@ import { ContractsTable, TableTitle, ViewMore } from "lib/components/table"; import { useAccountAdminContracts } from "lib/pages/account-details/data"; import type { ContractAddr, HumanAddr, Option } from "lib/types"; -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (contract: ContractAddr) => - navigate({ - pathname: "/contract/[contract]", - query: { contract }, - }), - [navigate] - ); -}; - interface AdminContractsTableProps { walletAddress: HumanAddr; scrollComponentId: string; @@ -37,6 +24,13 @@ export const AdminContractsTable = ({ refetchCount, onViewMore, }: AdminContractsTableProps) => { + const navigate = useInternalNavigate(); + const onRowSelect = (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }); + const { pagesQuantity, currentPage, @@ -87,7 +81,7 @@ export const AdminContractsTable = ({ withBorder /> } - onRowSelect={useOnRowSelect()} + onRowSelect={onRowSelect} /> {!!totalData && (onViewMore diff --git a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx index f067427bc..ac328f9fd 100644 --- a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx +++ b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx @@ -1,6 +1,5 @@ import { Box } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; -import { useCallback } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; @@ -10,18 +9,6 @@ import { ContractsTable, TableTitle, ViewMore } from "lib/components/table"; import { useAccountContracts } from "lib/pages/account-details/data"; import type { ContractAddr, HumanAddr, Option } from "lib/types"; -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (contract: ContractAddr) => - navigate({ - pathname: "/contract/[contract]", - query: { contract }, - }), - [navigate] - ); -}; - interface InstantiatedContractsTableProps { walletAddress: HumanAddr; scrollComponentId: string; @@ -37,6 +24,13 @@ export const InstantiatedContractsTable = ({ refetchCount, onViewMore, }: InstantiatedContractsTableProps) => { + const navigate = useInternalNavigate(); + const onRowSelect = (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }); + const { pagesQuantity, currentPage, @@ -87,7 +81,7 @@ export const InstantiatedContractsTable = ({ withBorder /> } - onRowSelect={useOnRowSelect()} + onRowSelect={onRowSelect} /> {!!totalData && (onViewMore diff --git a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx index 425dff2ce..494ceda8a 100644 --- a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx +++ b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx @@ -1,6 +1,5 @@ import { Box } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; -import { useCallback } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; @@ -18,18 +17,6 @@ interface StoredCodesTableProps { onViewMore?: () => void; } -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (codeId: number) => - navigate({ - pathname: "/code/[codeId]", - query: { codeId }, - }), - [navigate] - ); -}; - export const StoredCodesTable = ({ walletAddress, scrollComponentId, @@ -37,6 +24,13 @@ export const StoredCodesTable = ({ refetchCount, onViewMore, }: StoredCodesTableProps) => { + const navigate = useInternalNavigate(); + const onRowSelect = (codeId: number) => + navigate({ + pathname: "/code/[codeId]", + query: { codeId }, + }); + const { pagesQuantity, currentPage, @@ -87,7 +81,7 @@ export const StoredCodesTable = ({ withBorder /> } - onRowSelect={useOnRowSelect()} + onRowSelect={onRowSelect} /> {!!totalData && (onViewMore diff --git a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx index 87fcdb10a..bc015fde5 100644 --- a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx +++ b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx @@ -1,6 +1,6 @@ import { observer } from "mobx-react-lite"; import type { ChangeEvent } from "react"; -import { useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; @@ -12,24 +12,19 @@ import type { ContractAddr } from "lib/types"; import { NoContracts } from "./NoContracts"; -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (contract: ContractAddr) => - navigate({ - pathname: "/contract/[contract]", - query: { contract }, - }), - [navigate] - ); -}; - interface CodeContractsTableProps { codeId: number; } export const CodeContractsTable = observer( ({ codeId }: CodeContractsTableProps) => { + const navigate = useInternalNavigate(); + const onRowSelect = (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }); + const { data: totalData, refetch } = useContractListCountByCodeId(codeId); const { pagesQuantity, @@ -81,7 +76,7 @@ export const CodeContractsTable = observer( contracts={contracts} isLoading={isLoading} emptyState={} - onRowSelect={useOnRowSelect()} + onRowSelect={onRowSelect} /> {!!totalData && totalData > 10 && ( diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx index c3aa48bdc..51c9ccf5c 100644 --- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx +++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx @@ -9,7 +9,7 @@ interface MyStoredCodesSectionProps { codes: CodeInfo[]; isLoading: boolean; onRowSelect: (codeId: number) => void; - disconnected: string; + disconnectedMessage: string; isSearching: boolean; } @@ -17,7 +17,7 @@ export const MyStoredCodesSection = ({ codes, isLoading, onRowSelect, - disconnected, + disconnectedMessage, isSearching, }: MyStoredCodesSectionProps) => ( @@ -31,8 +31,8 @@ export const MyStoredCodesSection = ({ codes={codes} isLoading={isLoading} onRowSelect={onRowSelect} - empty="Your uploaded Wasm files will display as My Stored Codes." - disconnected={disconnected} + emptyMessage="Your uploaded Wasm files will display as My Stored Codes." + disconnectedMessage={disconnectedMessage} isSearching={isSearching} /> diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx index 27148ed0e..4fa0f8b9a 100644 --- a/src/lib/pages/codes/index.tsx +++ b/src/lib/pages/codes/index.tsx @@ -9,7 +9,7 @@ import { import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import type { ChangeEvent } from "react"; -import { useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { useInternalNavigate } from "lib/app-provider"; @@ -29,20 +29,15 @@ interface CodeFilterState { permissionValue: PermissionFilterValue; } -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (codeId: number) => - navigate({ - pathname: "/code/[codeId]", - query: { codeId }, - }), - [navigate] - ); -}; - const Codes = observer(() => { const router = useRouter(); + const navigate = useInternalNavigate(); + const onRowSelect = (codeId: number) => + navigate({ + pathname: "/code/[codeId]", + query: { codeId }, + }); + const { watch, setValue } = useForm({ defaultValues: { permissionValue: "all", @@ -61,7 +56,6 @@ const Codes = observer(() => { isSavedCodesLoading, } = useMyCodesData(keyword, permissionValue); - const onRowSelect = useOnRowSelect(); const isSearching = !!keyword || permissionValue !== "all"; useEffect(() => { @@ -102,7 +96,7 @@ const Codes = observer(() => { codes={stored} isLoading={isStoredCodesLoading} onRowSelect={onRowSelect} - disconnected="to see your previously uploaded and stored codes." + disconnectedMessage="to see your previously uploaded and stored codes." isSearching={isSearching} /> { codes={stored} isLoading={isStoredCodesLoading} onRowSelect={onRowSelect} - disconnected="to see your previously uploaded and stored codes." + disconnectedMessage="to see your previously uploaded and stored codes." isSearching={isSearching} /> diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index a2f11f6da..a6ae43a94 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -11,7 +11,7 @@ import { } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { AppLink } from "lib/components/AppLink"; @@ -46,14 +46,11 @@ const ContractsByList = observer(() => { ? instantiatedListInfo : getContractLists().find((item) => item.slug === listSlug); - const onContractSelect = useCallback( - (contract: ContractAddr) => - navigate({ - pathname: "/contract/[contract]", - query: { contract }, - }), - [navigate] - ); + const onContractSelect = (contract: ContractAddr) => + navigate({ + pathname: "/contract/[contract]", + query: { contract }, + }); useEffect(() => { // TODO: find a better approach? diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx deleted file mode 100644 index d5f85ab21..000000000 --- a/src/lib/pages/home/components/RecentlyViewContracts.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Heading, Box, Flex, Text } from "@chakra-ui/react"; - -import { EmptyState } from "lib/components/state"; -import { ContractsTable } from "lib/components/table"; -import type { Addr, ContractAddr } from "lib/types"; -import { getCurrentDate } from "lib/utils"; - -/* TODO: change data -> recently view contracts */ -const contracts = [ - { - contractAddress: - "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as ContractAddr, - name: "Deposit asset", - tags: ["deposit", "lending"], - instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as Addr, - description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed facilisis facilisis risus. Ut volutpat accumsan massa eget consequat, id egestas nulla.", - label: "label1", - created: getCurrentDate(), - admin: undefined, - latestUpdater: undefined, - latestUpdated: undefined, - remark: undefined, - }, - { - contractAddress: - "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as ContractAddr, - name: "Borrow asset", - tags: ["deposit", "lending", "borrow", "beeb", "margin"], - instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as Addr, - description: "Lorem ipsum dolor id egestas nulla.", - label: "label2", - created: getCurrentDate(), - admin: undefined, - latestUpdater: undefined, - latestUpdated: undefined, - remark: undefined, - }, - { - contractAddress: - "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as ContractAddr, - name: "", - tags: ["deposit", "lending", "borrow", "margin"], - instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as Addr, - description: "", - label: "label3", - created: getCurrentDate(), - admin: undefined, - latestUpdater: undefined, - latestUpdated: undefined, - remark: undefined, - }, - { - contractAddress: - "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as ContractAddr, - name: "Deposit asset to Lorem", - tags: [], - instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as Addr, - description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. id egestas nulla.", - label: "label4", - created: getCurrentDate(), - admin: undefined, - latestUpdater: undefined, - latestUpdated: undefined, - remark: undefined, - }, -]; -export const RecentlyViewContracts = () => ( - - - Recently Viewed Contracts - - {contracts && contracts.length ? ( - - } - onRowSelect={() => {}} - /> - ) : ( - - - Your recently viewed smart contracts will display here - - - )} - -); diff --git a/src/lib/pages/recent-codes/index.tsx b/src/lib/pages/recent-codes/index.tsx index bfc6a656e..e4eff6c83 100644 --- a/src/lib/pages/recent-codes/index.tsx +++ b/src/lib/pages/recent-codes/index.tsx @@ -2,7 +2,7 @@ import { Heading, Box, Flex } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import type { ChangeEvent } from "react"; -import { useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { useInternalNavigate } from "lib/app-provider"; @@ -21,20 +21,15 @@ interface RecentCodesState { permissionValue: PermissionFilterValue; } -const useOnRowSelect = () => { - const navigate = useInternalNavigate(); - return useCallback( - (codeId: number) => - navigate({ - pathname: "/code/[codeId]", - query: { codeId }, - }), - [navigate] - ); -}; - const RecentCodes = observer(() => { const router = useRouter(); + const navigate = useInternalNavigate(); + const onRowSelect = (codeId: number) => + navigate({ + pathname: "/code/[codeId]", + query: { codeId }, + }); + const { watch, setValue } = useForm({ defaultValues: { permissionValue: "all", @@ -91,7 +86,7 @@ const RecentCodes = observer(() => { withBorder /> } - onRowSelect={useOnRowSelect()} + onRowSelect={onRowSelect} /> ); diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts index da464030b..3c5e361c8 100644 --- a/src/lib/services/contractService.ts +++ b/src/lib/services/contractService.ts @@ -154,35 +154,35 @@ export const useInstantiateDetailByContractQuery = ( }; export const useAdminByContractAddresses = ( - contractAddresses: Option + contractAddresses: ContractAddr[] ): UseQueryResult> => { const { indexerGraphClient } = useCelatoneApp(); - const queryFn = useCallback(async () => { - if (!contractAddresses) - throw new Error("No contract selected (useAdminByContractAddresses)"); - - return indexerGraphClient - .request(getAdminByContractAddressesQueryDocument, { - contractAddresses, - }) - .then(({ contracts }) => - contracts.reduce>( - (prev, contract) => ({ - ...prev, - [contract.address as ContractAddr]: contract.admin?.address as Addr, - }), - {} - ) - ); - }, [contractAddresses, indexerGraphClient]); + const queryFn = useCallback( + async () => + indexerGraphClient + .request(getAdminByContractAddressesQueryDocument, { + contractAddresses, + }) + .then(({ contracts }) => + contracts.reduce>( + (prev, contract) => ({ + ...prev, + [contract.address as ContractAddr]: contract.admin + ?.address as Addr, + }), + {} + ) + ), + [contractAddresses, indexerGraphClient] + ); return useQuery( ["admin_by_contracts", contractAddresses, indexerGraphClient], queryFn, { keepPreviousData: true, - enabled: !!contractAddresses, + enabled: contractAddresses.length > 0, } ); };