diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01ff173cf..c5341069b 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
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 93f722ee2..0a107dd68 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 (
<>
+ ) : (
+
-
-
- )}
-
+ ),
+ children: "Save Contract",
+ }}
+ />
+ )}
+ {contractListInfo.isInfoEditable && (
+
+ )}
-
+
- >
+
);
});
diff --git a/src/lib/pages/home/components/RecentlyViewContracts.tsx b/src/lib/pages/home/components/RecentlyViewContracts.tsx
deleted file mode 100644
index cb10875fc..000000000
--- a/src/lib/pages/home/components/RecentlyViewContracts.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Heading, Box, Flex, Text } from "@chakra-ui/react";
-
-import { ContractListTable } from "lib/components/select-contract";
-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(),
- },
- {
- 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(),
- },
- {
- contractAddress:
- "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as ContractAddr,
- name: "",
- tags: ["deposit", "lending", "borrow", "margin"],
- instantiator: "terra18kw0z0nmpk9drz4qxq8y7xvh05tr7spyzja3rq" as Addr,
- description: "",
- label: "label3",
- created: getCurrentDate(),
- },
- {
- 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(),
- },
-];
-export const RecentlyViewContracts = () => (
-
-
- Recently Viewed Contracts
-
- {contracts && contracts.length ? (
-
- ) : (
-
-
- Your recently viewed smart contracts will display here
-
-
- )}
-
-);
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}
/>
)}
- >
+
);
};
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
index 93459cbea..d5d33e32a 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
@@ -1,4 +1,4 @@
-import { HStack, Grid, Text, Flex } from "@chakra-ui/react";
+import { HStack, Grid, Text } from "@chakra-ui/react";
import { useWallet } from "@cosmos-kit/react";
import { useInternalNavigate, getAddressTypeByLength } from "lib/app-provider";
@@ -6,19 +6,19 @@ import { InstantiateButton } from "lib/components/button";
import { ExplorerLink } from "lib/components/ExplorerLink";
import { SaveOrRemoveCodeModal } from "lib/components/modal";
import { PermissionChip } from "lib/components/PermissionChip";
-import { TableRowNoBorder } from "lib/components/table";
+import { TableRow } from "lib/components/table";
import { getCw2Info } from "lib/utils";
import type { PublicCodeInfo } from "./PublicProjectCodeTable";
interface CodeTableRowProps {
publicCodeInfo: PublicCodeInfo;
- templateColumn: string;
+ templateColumns: string;
}
export const PublicProjectCodeRow = ({
publicCodeInfo: { publicInfo, localInfo },
- templateColumn,
+ templateColumns,
}: CodeTableRowProps) => {
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 99c18859e..e4eff6c83 100644
--- a/src/lib/pages/recent-codes/index.tsx
+++ b/src/lib/pages/recent-codes/index.tsx
@@ -5,10 +5,13 @@ import type { ChangeEvent } from "react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
+import { useInternalNavigate } from "lib/app-provider";
import { FilterByPermission } from "lib/components/forms";
import InputWithIcon from "lib/components/InputWithIcon";
+import PageContainer from "lib/components/PageContainer";
+import { EmptyState } from "lib/components/state";
+import { CodesTable } from "lib/components/table";
import type { PermissionFilterValue } from "lib/hooks";
-import CodesTable from "lib/pages/codes/components/CodesTable";
import { AmpEvent, AmpTrack } from "lib/services/amplitude";
import { useRecentCodesData } from "./data";
@@ -20,6 +23,13 @@ interface RecentCodesState {
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",
@@ -36,9 +46,11 @@ const RecentCodes = observer(() => {
if (router.isReady) AmpTrack(AmpEvent.TO_RECENT_CODES);
}, [router.isReady]);
+ const isSearching = !!keyword || permissionValue !== "all";
+
return (
-
-
+
+
Recent Codes
@@ -61,13 +73,22 @@ const RecentCodes = observer(() => {
+ }
+ 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,
}
);
};