th": { borderColor: "divider.main" },
}}
>
Contract Address |
@@ -80,6 +85,7 @@ export const ContractListTable = ({
sx={{
"& td:first-of-type": { pl: "48px" },
"& td:last-of-type": { pr: "48px" },
+ "> td": { borderColor: "divider.main" },
}}
>
@@ -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}
- }
- onClick={() => router.push("/deploy")}
- >
- Deploy New Contract
-
- ,
- children: "Save Contract",
- }}
- />
+ {isInstantiatedByMe ? (
+ }
+ onClick={() => router.push("/deploy")}
+ >
+ Deploy New Contract
+
+ ) : (
+ ,
+ children: "Save Contract",
+ }}
+ />
+ )}
{contractListInfo.isInfoEditable && (
-
>
);
});
-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;
|