From 3c22b6bfb334277718b1a3bed0c6e1d5bf8736c0 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Tue, 20 Dec 2022 16:13:37 +0700 Subject: [PATCH 1/9] feat(pages): contract details page skeleton --- .../codes => }/components/CustomTab.tsx | 11 +- src/lib/components/Json/JsonInput.tsx | 2 +- .../modal/contract/EditContract.tsx | 2 +- .../modal/contract/SaveNewContract.tsx | 2 +- src/lib/pages/codes/index.tsx | 8 +- .../components/CommandSection.tsx | 32 ++++ .../components/InstantiateInfo.tsx | 26 ++++ .../contract-details/components/JsonInfo.tsx | 17 +++ .../contract-details/components/LabelText.tsx | 27 ++++ .../components/TokenSection.tsx | 27 ++++ src/lib/pages/contract-details/index.tsx | 140 ++++++++++++++++++ .../pages/execute/components/ExecuteArea.tsx | 2 +- src/lib/pages/instantiate/instantiate.tsx | 2 +- .../pages/query/components/JsonReadOnly.tsx | 2 +- src/lib/pages/query/components/QueryArea.tsx | 2 +- src/pages/contract-details.ts | 3 + 16 files changed, 288 insertions(+), 17 deletions(-) rename src/lib/{pages/codes => }/components/CustomTab.tsx (84%) create mode 100644 src/lib/pages/contract-details/components/CommandSection.tsx create mode 100644 src/lib/pages/contract-details/components/InstantiateInfo.tsx create mode 100644 src/lib/pages/contract-details/components/JsonInfo.tsx create mode 100644 src/lib/pages/contract-details/components/LabelText.tsx create mode 100644 src/lib/pages/contract-details/components/TokenSection.tsx create mode 100644 src/lib/pages/contract-details/index.tsx create mode 100644 src/pages/contract-details.ts diff --git a/src/lib/pages/codes/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx similarity index 84% rename from src/lib/pages/codes/components/CustomTab.tsx rename to src/lib/components/CustomTab.tsx index 508534e52..0b16c58a6 100644 --- a/src/lib/pages/codes/components/CustomTab.tsx +++ b/src/lib/components/CustomTab.tsx @@ -2,10 +2,10 @@ import type { TabProps } from "@chakra-ui/react"; import { Button, useTab, Badge, useMultiStyleConfig } from "@chakra-ui/react"; interface CustomTabProps extends TabProps { - codeCount: number; + count: number; } -const CustomTab = ({ codeCount, ...restProps }: CustomTabProps) => { +export const CustomTab = ({ count, ...restProps }: CustomTabProps) => { const tabProps = useTab({ ...restProps }); const isSelected = tabProps["aria-selected"]; const styles = useMultiStyleConfig("Tabs", tabProps); @@ -13,7 +13,7 @@ const CustomTab = ({ codeCount, ...restProps }: CustomTabProps) => { return ( ); }; - -export default CustomTab; diff --git a/src/lib/components/Json/JsonInput.tsx b/src/lib/components/Json/JsonInput.tsx index 52b0e7b7f..56759c56e 100644 --- a/src/lib/components/Json/JsonInput.tsx +++ b/src/lib/components/Json/JsonInput.tsx @@ -6,7 +6,7 @@ import { useState, useEffect } from "react"; import { jsonPrettify, jsonValidate } from "lib/utils"; -const JsonEditor = dynamic(() => import("lib/components/Json/JsonEditor"), { +const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), { ssr: false, }); diff --git a/src/lib/components/modal/contract/EditContract.tsx b/src/lib/components/modal/contract/EditContract.tsx index 82ab15329..ec282a350 100644 --- a/src/lib/components/modal/contract/EditContract.tsx +++ b/src/lib/components/modal/contract/EditContract.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainForm } from "lib/components/OffChain/OffChainForm"; +import { OffChainForm } from "lib/components/offchain/OffChainForm"; import { MAX_CONTRACT_DESCRIPTION_LENGTH, MAX_CONTRACT_NAME_LENGTH, diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx index 6537864a2..c5714bb62 100644 --- a/src/lib/components/modal/contract/SaveNewContract.tsx +++ b/src/lib/components/modal/contract/SaveNewContract.tsx @@ -9,7 +9,7 @@ import { useCelatoneApp } from "lib/app-provider"; import type { FormStatus } from "lib/components/forms"; import { TextInput } from "lib/components/forms"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainDetail } from "lib/components/OffChain/OffChainDetail"; +import { OffChainDetail } from "lib/components/offchain/OffChainDetail"; import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME, diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx index 2f9076958..d5ffd8f5e 100644 --- a/src/lib/pages/codes/index.tsx +++ b/src/lib/pages/codes/index.tsx @@ -3,10 +3,10 @@ import { observer } from "mobx-react-lite"; import type { ChangeEvent } from "react"; import { useState } from "react"; +import { CustomTab } from "lib/components/CustomTab"; import InputWithIcon from "lib/components/InputWithIcon"; import PageContainer from "lib/components/PageContainer"; import CodesTable from "lib/pages/codes/components/CodesTable"; -import CustomTab from "lib/pages/codes/components/CustomTab"; import SaveCodeButton from "./components/SaveCodeButton"; import UploadButton from "./components/UploadButton"; @@ -36,9 +36,9 @@ const Codes = observer(() => { - All Codes - My Stored Codes - My Saved Codes + All Codes + My Stored Codes + My Saved Codes { + return ( + + + + Query Shortcuts + + {/* Query Contract Commands */} + + + + Execute Shortcuts + + {/* Execute Contract Commands */} + + + ); +}; diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx new file mode 100644 index 000000000..fc62e08e9 --- /dev/null +++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx @@ -0,0 +1,26 @@ +import { Flex, Heading } from "@chakra-ui/react"; + +import { ExplorerLink } from "lib/components/ExplorerLink"; + +import { LabelText } from "./LabelText"; + +export const InstantiateInfo = () => { + return ( + + + Instantiate Info + + phoenix-1 + + + + + wasm.terra1te47jv6pg272n8unq490nvhh5m43v5n5kxfgrztly2tmkmqxzw8qphrjx2 + + + ); +}; diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx new file mode 100644 index 000000000..5afa435ef --- /dev/null +++ b/src/lib/pages/contract-details/components/JsonInfo.tsx @@ -0,0 +1,17 @@ +import { Flex, Heading, Icon } from "@chakra-ui/react"; +import { FiChevronDown } from "react-icons/fi"; + +interface JsonInfoProps { + header: string; +} + +export const JsonInfo = ({ header }: JsonInfoProps) => { + return ( + + + {header} + + + + ); +}; diff --git a/src/lib/pages/contract-details/components/LabelText.tsx b/src/lib/pages/contract-details/components/LabelText.tsx new file mode 100644 index 000000000..d67f2c0fc --- /dev/null +++ b/src/lib/pages/contract-details/components/LabelText.tsx @@ -0,0 +1,27 @@ +import { Flex, Text } from "@chakra-ui/react"; + +interface LabelTextProps { + label: string; + children: string | JSX.Element; + helperText?: string; +} + +export const LabelText = ({ label, children, helperText }: LabelTextProps) => { + return ( + + + {label} + + {typeof children === "string" ? ( + {children} + ) : ( + children + )} + {helperText && ( + + {helperText} + + )} + + ); +}; diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx new file mode 100644 index 000000000..255f6ada6 --- /dev/null +++ b/src/lib/pages/contract-details/components/TokenSection.tsx @@ -0,0 +1,27 @@ +import { Flex, Text } from "@chakra-ui/react"; + +const TokenCard = () => { + return ( + + + 1.00 LUNA + + + ); +}; + +export const TokenSection = () => { + return ( + + + Tokens + + + + + + + + + ); +}; diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx new file mode 100644 index 000000000..7b4042cfd --- /dev/null +++ b/src/lib/pages/contract-details/index.tsx @@ -0,0 +1,140 @@ +import { ArrowBackIcon, SearchIcon } from "@chakra-ui/icons"; +import { + Button, + Flex, + Heading, + Icon, + Text, + TabList, + Tabs, + TabPanels, + TabPanel, +} from "@chakra-ui/react"; +import { useRouter } from "next/router"; +import { MdBookmark, MdInput } from "react-icons/md"; + +import { CustomTab } from "lib/components/CustomTab"; +import { ExplorerLink } from "lib/components/ExplorerLink"; +import PageContainer from "lib/components/PageContainer"; + +import { CommandSection } from "./components/CommandSection"; +import { InstantiateInfo } from "./components/InstantiateInfo"; +import { JsonInfo } from "./components/JsonInfo"; +import { TokenSection } from "./components/TokenSection"; + +const ContractDetails = () => { + const router = useRouter(); + return ( + + + + + + Contract Name Section Goes Hereeeee + + + + Contract Address: + + + + + + Label: + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit ... + + + + + + + + + + + + + Your Contract Description + + + Save contract to lists to add your own contract description ... + + + + + + + + + + + + History + + + + All + Executes + Migration + Related Proposals + + + + + All Table + + + + + Executes Table + + + + + Migration Table + + + + + Related Proposals Table + + + + + + ); +}; + +export default ContractDetails; diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx index af5d4daf0..ae7c5b0ea 100644 --- a/src/lib/pages/execute/components/ExecuteArea.tsx +++ b/src/lib/pages/execute/components/ExecuteArea.tsx @@ -11,7 +11,7 @@ import { useExecuteContractTx } from "lib/app-provider/tx/execute"; import ContractCmdButton from "lib/components/ContractCmdButton"; import CopyButton from "lib/components/CopyButton"; import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender"; -import JsonInput from "lib/components/Json/JsonInput"; +import JsonInput from "lib/components/json/JsonInput"; import { useContractStore } from "lib/hooks"; import { useTxBroadcast } from "lib/providers/tx-broadcast"; import type { Activity } from "lib/stores/contract"; diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx index c46e49102..a5f86badb 100644 --- a/src/lib/pages/instantiate/instantiate.tsx +++ b/src/lib/pages/instantiate/instantiate.tsx @@ -16,7 +16,7 @@ import { useFieldArray, useForm } from "react-hook-form"; import { useFabricateFee, useSimulateFee } from "lib/app-provider"; import { useInstantiateTx } from "lib/app-provider/tx/instantiate"; import { ControllerInput, TextInput } from "lib/components/forms"; -import JsonInput from "lib/components/Json/JsonInput"; +import JsonInput from "lib/components/json/JsonInput"; import { Stepper } from "lib/components/stepper"; import WasmPageContainer from "lib/components/WasmPageContainer"; import { useTxBroadcast } from "lib/providers/tx-broadcast"; diff --git a/src/lib/pages/query/components/JsonReadOnly.tsx b/src/lib/pages/query/components/JsonReadOnly.tsx index a58caa1fb..e9cea88d7 100644 --- a/src/lib/pages/query/components/JsonReadOnly.tsx +++ b/src/lib/pages/query/components/JsonReadOnly.tsx @@ -5,7 +5,7 @@ import { useMemo } from "react"; import { jsonValidate } from "lib/utils"; -const JsonEditor = dynamic(() => import("lib/components/Json/JsonEditor"), { +const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), { ssr: false, }); diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 2f02b1665..11ff291fb 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/src/lib/pages/query/components/QueryArea.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from "react"; import ContractCmdButton from "lib/components/ContractCmdButton"; import CopyButton from "lib/components/CopyButton"; -import JsonInput from "lib/components/Json/JsonInput"; +import JsonInput from "lib/components/json/JsonInput"; import { DEFAULT_RPC_ERROR } from "lib/data"; import { useContractStore, useEndpoint, useUserKey } from "lib/hooks"; import { queryData } from "lib/services/contract"; diff --git a/src/pages/contract-details.ts b/src/pages/contract-details.ts new file mode 100644 index 000000000..5776fddfd --- /dev/null +++ b/src/pages/contract-details.ts @@ -0,0 +1,3 @@ +import ContractDetails from "lib/pages/contract-details"; + +export default ContractDetails; From ef60da9a771e03f8d8f016242e031a84b656afd7 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Tue, 20 Dec 2022 16:23:57 +0700 Subject: [PATCH 2/9] fix: edit jsoneditor import --- src/lib/components/Json/JsonInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Json/JsonInput.tsx b/src/lib/components/Json/JsonInput.tsx index 56759c56e..c7b2ab979 100644 --- a/src/lib/components/Json/JsonInput.tsx +++ b/src/lib/components/Json/JsonInput.tsx @@ -6,7 +6,7 @@ import { useState, useEffect } from "react"; import { jsonPrettify, jsonValidate } from "lib/utils"; -const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), { +const JsonEditor = dynamic(() => import("./JsonEditor"), { ssr: false, }); From e54e401af51312d5b47e060c4b92ea7c602ebf31 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Tue, 20 Dec 2022 16:37:01 +0700 Subject: [PATCH 3/9] fix: renaming --- src/lib/components/modal/contract/EditContract.tsx | 2 +- src/lib/components/modal/contract/SaveNewContract.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/modal/contract/EditContract.tsx b/src/lib/components/modal/contract/EditContract.tsx index ec282a350..38c3ebb29 100644 --- a/src/lib/components/modal/contract/EditContract.tsx +++ b/src/lib/components/modal/contract/EditContract.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainForm } from "lib/components/offchain/OffChainForm"; +import { OffChainForm } from "lib/components/Offchain/OffChainForm"; import { MAX_CONTRACT_DESCRIPTION_LENGTH, MAX_CONTRACT_NAME_LENGTH, diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx index c5714bb62..3c8b1a65e 100644 --- a/src/lib/components/modal/contract/SaveNewContract.tsx +++ b/src/lib/components/modal/contract/SaveNewContract.tsx @@ -9,7 +9,7 @@ import { useCelatoneApp } from "lib/app-provider"; import type { FormStatus } from "lib/components/forms"; import { TextInput } from "lib/components/forms"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainDetail } from "lib/components/offchain/OffChainDetail"; +import { OffChainDetail } from "lib/components/Offchain/OffChainDetail"; import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME, From 56952883a84ba916ec63dc80ed5629f91b60b571 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Tue, 20 Dec 2022 16:39:46 +0700 Subject: [PATCH 4/9] fix: rename folder --- src/lib/components/{Json => json}/JsonEditor.tsx | 0 src/lib/components/{Json => json}/JsonInput.tsx | 0 src/lib/components/modal/contract/EditContract.tsx | 2 +- src/lib/components/modal/contract/SaveNewContract.tsx | 2 +- src/lib/components/{OffChain => offchain}/OffChainDetail.tsx | 0 src/lib/components/{OffChain => offchain}/OffChainForm.tsx | 0 6 files changed, 2 insertions(+), 2 deletions(-) rename src/lib/components/{Json => json}/JsonEditor.tsx (100%) rename src/lib/components/{Json => json}/JsonInput.tsx (100%) rename src/lib/components/{OffChain => offchain}/OffChainDetail.tsx (100%) rename src/lib/components/{OffChain => offchain}/OffChainForm.tsx (100%) diff --git a/src/lib/components/Json/JsonEditor.tsx b/src/lib/components/json/JsonEditor.tsx similarity index 100% rename from src/lib/components/Json/JsonEditor.tsx rename to src/lib/components/json/JsonEditor.tsx diff --git a/src/lib/components/Json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx similarity index 100% rename from src/lib/components/Json/JsonInput.tsx rename to src/lib/components/json/JsonInput.tsx diff --git a/src/lib/components/modal/contract/EditContract.tsx b/src/lib/components/modal/contract/EditContract.tsx index 38c3ebb29..ec282a350 100644 --- a/src/lib/components/modal/contract/EditContract.tsx +++ b/src/lib/components/modal/contract/EditContract.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainForm } from "lib/components/Offchain/OffChainForm"; +import { OffChainForm } from "lib/components/offchain/OffChainForm"; import { MAX_CONTRACT_DESCRIPTION_LENGTH, MAX_CONTRACT_NAME_LENGTH, diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx index 3c8b1a65e..c5714bb62 100644 --- a/src/lib/components/modal/contract/SaveNewContract.tsx +++ b/src/lib/components/modal/contract/SaveNewContract.tsx @@ -9,7 +9,7 @@ import { useCelatoneApp } from "lib/app-provider"; import type { FormStatus } from "lib/components/forms"; import { TextInput } from "lib/components/forms"; import { ActionModal } from "lib/components/modal/ActionModal"; -import { OffChainDetail } from "lib/components/Offchain/OffChainDetail"; +import { OffChainDetail } from "lib/components/offchain/OffChainDetail"; import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME, diff --git a/src/lib/components/OffChain/OffChainDetail.tsx b/src/lib/components/offchain/OffChainDetail.tsx similarity index 100% rename from src/lib/components/OffChain/OffChainDetail.tsx rename to src/lib/components/offchain/OffChainDetail.tsx diff --git a/src/lib/components/OffChain/OffChainForm.tsx b/src/lib/components/offchain/OffChainForm.tsx similarity index 100% rename from src/lib/components/OffChain/OffChainForm.tsx rename to src/lib/components/offchain/OffChainForm.tsx From 2b3d1e163c43f931e0f290a1093831b647cd490f Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 21 Dec 2022 17:42:25 +0700 Subject: [PATCH 5/9] fix: change route name --- src/lib/components/InstantiateOffchainDetail.tsx | 4 ++-- src/lib/components/modal/list/RemoveList.tsx | 4 ++-- src/lib/layout/Navbar.tsx | 8 ++++---- src/lib/pages/contracts/detail.tsx | 4 ++-- src/lib/pages/contracts/index.tsx | 2 +- src/pages/{contracts => contract-list}/[slug].tsx | 0 src/pages/{contracts => contract-list}/index.tsx | 0 src/pages/{contract-details.ts => contract/[address].ts} | 0 8 files changed, 11 insertions(+), 11 deletions(-) rename src/pages/{contracts => contract-list}/[slug].tsx (100%) rename src/pages/{contracts => contract-list}/index.tsx (100%) rename src/pages/{contract-details.ts => contract/[address].ts} (100%) diff --git a/src/lib/components/InstantiateOffchainDetail.tsx b/src/lib/components/InstantiateOffchainDetail.tsx index 04ec81485..695269eae 100644 --- a/src/lib/components/InstantiateOffchainDetail.tsx +++ b/src/lib/components/InstantiateOffchainDetail.tsx @@ -73,7 +73,7 @@ export const InstantiateOffChainDetail = observer( data.tags, data.contractLists ); - router.push("/contracts/instantiated-by-me"); + router.push("/contract-list/instantiated-by-me"); })(); }; @@ -146,7 +146,7 @@ export const InstantiateOffChainDetail = observer( diff --git a/src/lib/components/modal/list/RemoveList.tsx b/src/lib/components/modal/list/RemoveList.tsx index 4e975709b..81506a689 100644 --- a/src/lib/components/modal/list/RemoveList.tsx +++ b/src/lib/components/modal/list/RemoveList.tsx @@ -21,8 +21,8 @@ export function RemoveList({ list, menuItemProps }: ModalProps) { const router = useRouter(); const handleRemove = () => { removeList(userKey, list.value); - router.push("/contracts"); - // TODO: show toast after removed and redirect to /contracts + router.push("/contract-list"); + // TODO: show toast after removed and redirect to /contract-list setTimeout(() => { toast({ title: `Removed ${shortenName(list.label)}`, diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 4e2ecd799..fdedc3440 100644 --- a/src/lib/layout/Navbar.tsx +++ b/src/lib/layout/Navbar.tsx @@ -52,12 +52,12 @@ const Navbar = observer(() => { submenu: [ { name: INSTANTIATED_LIST_NAME, - slug: `/contracts/${formatSlugName(INSTANTIATED_LIST_NAME)}`, + slug: `/contract-list/${formatSlugName(INSTANTIATED_LIST_NAME)}`, icon: getListIcon(INSTANTIATED_LIST_NAME), }, { name: SAVED_LIST_NAME, - slug: `/contracts/${formatSlugName(SAVED_LIST_NAME)}`, + slug: `/contract-list/${formatSlugName(SAVED_LIST_NAME)}`, icon: getListIcon(SAVED_LIST_NAME), }, ...getContractLists() @@ -67,11 +67,11 @@ const Navbar = observer(() => { .map((list) => { return { name: list.name, - slug: `/contracts/${list.slug}`, + slug: `/contract-list/${list.slug}`, icon: getListIcon(list.name), }; }), - { name: "View All", slug: "/contracts", icon: MdMoreHoriz }, + { name: "View All", slug: "/contract-list", icon: MdMoreHoriz }, ], }, // { diff --git a/src/lib/pages/contracts/detail.tsx b/src/lib/pages/contracts/detail.tsx index a4162edd7..83b3e565f 100644 --- a/src/lib/pages/contracts/detail.tsx +++ b/src/lib/pages/contracts/detail.tsx @@ -49,7 +49,7 @@ const ContractList = observer(() => { useEffect(() => { if (isHydrated && contractListInfo === undefined) { - router.push("/contracts"); + router.push("/contract-list"); } }, [contractListInfo, router, isHydrated]); @@ -70,7 +70,7 @@ const ContractList = observer(() => { separator={} > - + Contract Lists diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx index 3ab509156..e4c265792 100644 --- a/src/lib/pages/contracts/index.tsx +++ b/src/lib/pages/contracts/index.tsx @@ -15,7 +15,7 @@ const ContractList = observer(() => { const [searchKeyword, setSearchKeyword] = useState(""); const handleListSelect = (slug: string) => { - router.push({ pathname: `/contracts/${slug}` }); + router.push({ pathname: `/contract-list/${slug}` }); }; const { getContractLists } = useContractStore(); diff --git a/src/pages/contracts/[slug].tsx b/src/pages/contract-list/[slug].tsx similarity index 100% rename from src/pages/contracts/[slug].tsx rename to src/pages/contract-list/[slug].tsx diff --git a/src/pages/contracts/index.tsx b/src/pages/contract-list/index.tsx similarity index 100% rename from src/pages/contracts/index.tsx rename to src/pages/contract-list/index.tsx diff --git a/src/pages/contract-details.ts b/src/pages/contract/[address].ts similarity index 100% rename from src/pages/contract-details.ts rename to src/pages/contract/[address].ts From 8ebb97a2c5e78c041d2a4c46cf6f29b868ba0889 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 21 Dec 2022 18:02:18 +0700 Subject: [PATCH 6/9] fix: add todos --- .../components/CommandSection.tsx | 5 +++++ .../components/InstantiateInfo.tsx | 5 +++++ .../contract-details/components/JsonInfo.tsx | 7 +++++++ .../contract-details/components/TokenSection.tsx | 6 ++++++ src/lib/pages/contract-details/index.tsx | 16 +++++++++++++++- .../{[address].ts => [contractAddress].ts} | 0 6 files changed, 38 insertions(+), 1 deletion(-) rename src/pages/contract/{[address].ts => [contractAddress].ts} (100%) diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index daa2cf069..c5aa00384 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -1,6 +1,11 @@ import { Flex, Text } from "@chakra-ui/react"; export const CommandSection = () => { + /** + * @todos + * - Make an interface + * - Wireup with real query/execute commands data + */ return ( { + /** + * @todos + * - Make an interface + * - All these are mockups, Wireup with real data and map render LabelText + */ return ( diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx index 5afa435ef..bb6d87156 100644 --- a/src/lib/pages/contract-details/components/JsonInfo.tsx +++ b/src/lib/pages/contract-details/components/JsonInfo.tsx @@ -6,6 +6,13 @@ interface JsonInfoProps { } export const JsonInfo = ({ header }: JsonInfoProps) => { + /** + * @todos + * - Configure interface + * - Make this component collapsible + * - Wireup with real data + * - Render the data in JSON Readonly Editor + */ return ( diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx index 255f6ada6..cec66df32 100644 --- a/src/lib/pages/contract-details/components/TokenSection.tsx +++ b/src/lib/pages/contract-details/components/TokenSection.tsx @@ -1,5 +1,11 @@ import { Flex, Text } from "@chakra-ui/react"; +/** + * @todos + * - Make an interface for TokenSection and TokenCard + * - Wireup with real data + * - Token icon + */ const TokenCard = () => { return ( diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx index 7b4042cfd..450751858 100644 --- a/src/lib/pages/contract-details/index.tsx +++ b/src/lib/pages/contract-details/index.tsx @@ -16,6 +16,7 @@ import { MdBookmark, MdInput } from "react-icons/md"; import { CustomTab } from "lib/components/CustomTab"; import { ExplorerLink } from "lib/components/ExplorerLink"; import PageContainer from "lib/components/PageContainer"; +import { getFirstQueryParam } from "lib/utils"; import { CommandSection } from "./components/CommandSection"; import { InstantiateInfo } from "./components/InstantiateInfo"; @@ -24,6 +25,8 @@ import { TokenSection } from "./components/TokenSection"; const ContractDetails = () => { const router = useRouter(); + const contractAddress = getFirstQueryParam(router.query.contractAddress); + return ( + {/* Contract name/address/label Section */} + {/* TODO: Wireup data and buttons functionality */} @@ -44,7 +49,7 @@ const ContractDetails = () => { @@ -76,7 +81,10 @@ const ContractDetails = () => { + {/* Tokens Section */} + {/* Contract Description Section */} + {/* TODO: Show real description, show View Full Description when the desc is too long */} { Save contract to lists to add your own contract description ... + {/* Query/Execute commands section */} + {/* Instantiate/Contract Info Section */} + {/* Instantiate Info */} + {/* Contract Info (Expand) */} + {/* History Table section */} History @@ -110,6 +123,7 @@ const ContractDetails = () => { Migration Related Proposals + {/* TODOs: Wireup with real table data, Make table component, and render each table with different data under each TabPanel */} diff --git a/src/pages/contract/[address].ts b/src/pages/contract/[contractAddress].ts similarity index 100% rename from src/pages/contract/[address].ts rename to src/pages/contract/[contractAddress].ts From 6f8d568c75c98a43d49a8bb773803138e385230e Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 22 Dec 2022 11:12:01 +0700 Subject: [PATCH 7/9] chore: add todo --- src/lib/pages/contract-details/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx index 450751858..3cea6ce61 100644 --- a/src/lib/pages/contract-details/index.tsx +++ b/src/lib/pages/contract-details/index.tsx @@ -25,6 +25,9 @@ import { TokenSection } from "./components/TokenSection"; const ContractDetails = () => { const router = useRouter(); + /** + * @todos add contract address validation function here + */ const contractAddress = getFirstQueryParam(router.query.contractAddress); return ( From 9bbd50a999689d85fcdbdf0567b261eea432b4f7 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 22 Dec 2022 16:18:29 +0700 Subject: [PATCH 8/9] ci: add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index df54d0ff8..8e6562041 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#31](https://github.com/alleslabs/celatone-frontend/pull/31) Feat: add contract details page ui skeleton - [#41](https://github.com/alleslabs/celatone-frontend/pull/41) Add Github action for tracking CHANGELOG.md for changes ### Improvements From 3115a5124eed711fba75be5826430c61ce6edd76 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 22 Dec 2022 16:25:21 +0700 Subject: [PATCH 9/9] ci: change Changelog text --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e6562041..d28feaf42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features -- [#31](https://github.com/alleslabs/celatone-frontend/pull/31) Feat: add contract details page ui skeleton +- [#31](https://github.com/alleslabs/celatone-frontend/pull/31) Add contract details page ui skeleton - [#41](https://github.com/alleslabs/celatone-frontend/pull/41) Add Github action for tracking CHANGELOG.md for changes ### Improvements