From 75822040c98fe8da46dd9f16944340896f125429 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 27 Dec 2022 15:46:37 +0700 Subject: [PATCH 1/6] feat: add disconnected state --- .../modal/select-contract/SelectContract.tsx | 6 +++- .../components/state/DisconnectedState.tsx | 35 +++++++++++++++++++ src/lib/components/state/ZeroState.tsx | 25 +++---------- src/lib/pages/codes/components/CodesTable.tsx | 7 ++-- src/lib/pages/pastTxs/index.tsx | 23 +++--------- 5 files changed, 52 insertions(+), 44 deletions(-) create mode 100644 src/lib/components/state/DisconnectedState.tsx diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx index 48843bdf3..b873946c5 100644 --- a/src/lib/components/modal/select-contract/SelectContract.tsx +++ b/src/lib/components/modal/select-contract/SelectContract.tsx @@ -21,11 +21,12 @@ import { IoList } from "react-icons/io5"; import { MdChevronLeft } from "react-icons/md"; import { useCelatoneApp } from "lib/app-provider"; -import { DEFAULT_RPC_ERROR } from "lib/data"; +import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME } from "lib/data"; import { useContractStore, useEndpoint } from "lib/hooks"; import { useInstantiatedByMe } from "lib/model/contract"; import { queryContract } from "lib/services/contract"; import type { ContractAddr, RpcContractError } from "lib/types"; +import { formatSlugName } from "lib/utils"; import { AllContractLists } from "./AllContractLists"; import { ListDetail } from "./ListDetail"; @@ -176,6 +177,9 @@ export const SelectContract = ({ contractListInfo={contractList} isReadOnly onContractSelect={onSelectThenClose} + isInstantiatedByMe={ + contractList.slug === formatSlugName(INSTANTIATED_LIST_NAME) + } /> diff --git a/src/lib/components/state/DisconnectedState.tsx b/src/lib/components/state/DisconnectedState.tsx new file mode 100644 index 000000000..8d0e6fa17 --- /dev/null +++ b/src/lib/components/state/DisconnectedState.tsx @@ -0,0 +1,35 @@ +import { Flex, Text } from "@chakra-ui/react"; + +import { ConnectWalletBtn } from "../button/ConnectWallet"; + +interface DisconnectedStateProps { + text: string; + helperText?: string; +} + +export const DisconnectedState = ({ + text, + helperText, +}: DisconnectedStateProps) => { + return ( + <> + + + + {text} + + + {helperText && ( + + {helperText} + + )} + + ); +}; diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx index 6c565e3a4..4714800c4 100644 --- a/src/lib/components/state/ZeroState.tsx +++ b/src/lib/components/state/ZeroState.tsx @@ -1,16 +1,13 @@ import { Flex, Button, Icon, Text } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; import { useRouter } from "next/router"; -import { - MdOutlineAdd, - MdBookmarkBorder, - MdSearch, - MdLink, -} from "react-icons/md"; +import { MdOutlineAdd, MdBookmarkBorder, MdSearch } from "react-icons/md"; import { SaveNewContract } from "lib/components/modal/contract"; import type { Option } from "lib/types"; +import { DisconnectedState } from "./DisconnectedState"; + interface ZeroStateProps { list: Option; isReadOnly?: boolean; @@ -55,22 +52,10 @@ export const ZeroState = ({ isInstantiatedByMe, }: ZeroStateProps) => { const router = useRouter(); - const { isWalletConnected, connect } = useWallet(); + const { isWalletConnected } = useWallet(); if (!isWalletConnected && isInstantiatedByMe) { - return ( - - - to deploy new contract - - ); + return ; } return ( diff --git a/src/lib/pages/codes/components/CodesTable.tsx b/src/lib/pages/codes/components/CodesTable.tsx index 40a0602a1..f3dcbc8e6 100644 --- a/src/lib/pages/codes/components/CodesTable.tsx +++ b/src/lib/pages/codes/components/CodesTable.tsx @@ -19,9 +19,9 @@ import { useRouter } from "next/router"; import type { ReactNode } from "react"; import { MdSearchOff } from "react-icons/md"; -import { ConnectWalletBtn } from "lib/components/button/ConnectWallet"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { RemoveCode } from "lib/components/modal/code/RemoveCode"; +import { DisconnectedState } from "lib/components/state/DisconnectedState"; import type { CodeInfo } from "lib/types"; import { CodeDescriptionCell } from "./CodeDescriptionCell"; @@ -69,10 +69,7 @@ const NotMatched = () => { const Unconnected = () => { return ( - - Connect your wallet to upload and see your stored Codes. - - + ); }; diff --git a/src/lib/pages/pastTxs/index.tsx b/src/lib/pages/pastTxs/index.tsx index ee42735d7..86d0f1cac 100644 --- a/src/lib/pages/pastTxs/index.tsx +++ b/src/lib/pages/pastTxs/index.tsx @@ -20,10 +20,10 @@ import type { ChangeEvent } from "react"; import { useMemo, useState, useEffect, useCallback } from "react"; import { MdSearch } from "react-icons/md"; -import { ConnectWalletBtn } from "lib/components/button/ConnectWallet"; import { Loading } from "lib/components/Loading"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; +import { DisconnectedState } from "lib/components/state/DisconnectedState"; import type { Transaction } from "lib/types/tx/transaction"; import { FalseState } from "./components/FalseState"; @@ -169,23 +169,10 @@ const PastTxs = () => { ibcButton; if (!address) { return ( - <> - - - - to see your past transactions. - - - - - Past transactions involving the Wasm module will display here - - - such as Instantiate, Execute, or Upload Wasm file will display - here. - - - + ); } // Loading state From 01f49b8476d1040f61b00f06e3325b5bd0b031d7 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 27 Dec 2022 15:51:07 +0700 Subject: [PATCH 2/6] fix: add changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cda7858b1..7cc06d98f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,6 +48,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#52](https://github.com/alleslabs/celatone-frontend/pull/52) Create a component for disconnected State and apply to contract, code, past tx + ### Bug fixes - [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state From f13ca3cb576b4af55560e4a52fcb9ba2e9f07e68 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 28 Dec 2022 11:04:16 +0700 Subject: [PATCH 3/6] fix: add line disconnected state --- src/lib/components/Loading.tsx | 6 +-- src/lib/components/state/ZeroState.tsx | 42 +++++++++++-------- .../pages/pastTxs/components/FalseState.tsx | 6 +-- src/lib/pages/pastTxs/index.tsx | 15 +++++-- 4 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx index 9bda2ac59..2ead497f0 100644 --- a/src/lib/components/Loading.tsx +++ b/src/lib/components/Loading.tsx @@ -1,10 +1,10 @@ -import { Spinner, Text } from "@chakra-ui/react"; +import { Flex, Spinner, Text } from "@chakra-ui/react"; export const Loading = () => { return ( - <> + Loading ... - + ); }; diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx index 4714800c4..e934c2cda 100644 --- a/src/lib/components/state/ZeroState.tsx +++ b/src/lib/components/state/ZeroState.tsx @@ -54,24 +54,32 @@ export const ZeroState = ({ const router = useRouter(); const { isWalletConnected } = useWallet(); - if (!isWalletConnected && isInstantiatedByMe) { - return ; - } - return ( - - - - {isInstantiatedByMe - ? "Your deployed contract through this address will display here" - : "You don’t have any saved contracts."} - - {!isReadOnly && ( - router.push("/deploy")} - /> + + {!isWalletConnected && isInstantiatedByMe ? ( + + ) : ( + + + + {isInstantiatedByMe + ? "Your deployed contract through this address will display here" + : "You don’t have any saved contracts."} + + {!isReadOnly && ( + router.push("/deploy")} + /> + )} + )} ); diff --git a/src/lib/pages/pastTxs/components/FalseState.tsx b/src/lib/pages/pastTxs/components/FalseState.tsx index 16cb25d99..e0ad5319c 100644 --- a/src/lib/pages/pastTxs/components/FalseState.tsx +++ b/src/lib/pages/pastTxs/components/FalseState.tsx @@ -1,4 +1,4 @@ -import { Icon, Text } from "@chakra-ui/react"; +import { Flex, Icon, Text } from "@chakra-ui/react"; import { MdSearch, MdSearchOff } from "react-icons/md"; interface FalseStateProps { @@ -8,7 +8,7 @@ interface FalseStateProps { } export const FalseState = ({ icon, text1, text2 }: FalseStateProps) => { return ( - <> + { {text2} - + ); }; diff --git a/src/lib/pages/pastTxs/index.tsx b/src/lib/pages/pastTxs/index.tsx index 86d0f1cac..f3d49982a 100644 --- a/src/lib/pages/pastTxs/index.tsx +++ b/src/lib/pages/pastTxs/index.tsx @@ -169,10 +169,17 @@ const PastTxs = () => { ibcButton; if (!address) { return ( - + + + ); } // Loading state From bef0ca671ebe0eee50f31988f42714546a5eb36b Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 29 Dec 2022 15:34:29 +0700 Subject: [PATCH 4/6] fix: as commented --- src/lib/components/Loading.tsx | 2 +- src/lib/components/state/DisconnectedState.tsx | 5 +++-- src/lib/components/state/ZeroState.tsx | 3 ++- src/lib/pages/pastTxs/components/FalseState.tsx | 2 +- src/lib/pages/pastTxs/index.tsx | 3 ++- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx index 2ead497f0..bbcbf45b8 100644 --- a/src/lib/components/Loading.tsx +++ b/src/lib/components/Loading.tsx @@ -2,7 +2,7 @@ import { Flex, Spinner, Text } from "@chakra-ui/react"; export const Loading = () => { return ( - + Loading ... diff --git a/src/lib/components/state/DisconnectedState.tsx b/src/lib/components/state/DisconnectedState.tsx index 8d0e6fa17..016e25772 100644 --- a/src/lib/components/state/DisconnectedState.tsx +++ b/src/lib/components/state/DisconnectedState.tsx @@ -15,7 +15,7 @@ export const DisconnectedState = ({ <> - + {text} @@ -25,7 +25,8 @@ export const DisconnectedState = ({ color="text.dark" textAlign="center" mt="16px" - mx="96px" + maxW="520px" + alignSelf="center" > {helperText} diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx index e934c2cda..a9ca2a122 100644 --- a/src/lib/components/state/ZeroState.tsx +++ b/src/lib/components/state/ZeroState.tsx @@ -56,7 +56,8 @@ export const ZeroState = ({ return ( { return ( - + { return ( From fb3b88951476af31378e4f812927f28da88e0bda Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 29 Dec 2022 16:29:10 +0700 Subject: [PATCH 5/6] fix: no isInstantiatedByMe in ContractListDetail --- .../components/modal/select-contract/ContractListDetail.tsx | 6 ++++-- src/lib/components/modal/select-contract/SelectContract.tsx | 6 +----- src/lib/pages/contract-list/slug.tsx | 5 +---- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/lib/components/modal/select-contract/ContractListDetail.tsx b/src/lib/components/modal/select-contract/ContractListDetail.tsx index ec52abf10..a188870d0 100644 --- a/src/lib/components/modal/select-contract/ContractListDetail.tsx +++ b/src/lib/components/modal/select-contract/ContractListDetail.tsx @@ -5,10 +5,12 @@ import { useMemo, useState } from "react"; import { TagSelection, TextInput } from "lib/components/forms"; import { EmptyState } from "lib/components/state/EmptyState"; import { ZeroState } from "lib/components/state/ZeroState"; +import { INSTANTIATED_LIST_NAME } from "lib/data"; import { ContractListReadOnlyTable } from "lib/pages/contract-list/components/ContractListReadOnlyTable"; import { ContractListTable } from "lib/pages/contract-list/components/ContractListTable"; import type { ContractInfo, ContractListInfo } from "lib/stores/contract"; import type { ContractAddr, Option } from "lib/types"; +import { formatSlugName } from "lib/utils"; interface FilteredListDetailProps { contracts: ContractInfo[]; @@ -47,14 +49,12 @@ const FilteredListDetail = ({ interface ContractListDetailProps { contractListInfo: ContractListInfo; isReadOnly?: boolean; - isInstantiatedByMe?: boolean; onContractSelect?: (addr: ContractAddr) => void; } export const ContractListDetail = ({ contractListInfo, isReadOnly, - isInstantiatedByMe = false, onContractSelect, }: ContractListDetailProps) => { const [searchKeyword, setSearchKeyword] = useState(""); @@ -70,6 +70,8 @@ export const ContractListDetail = ({ ), [contractListInfo.contracts, searchKeyword, tagFilter] ); + const isInstantiatedByMe = + contractListInfo.slug === formatSlugName(INSTANTIATED_LIST_NAME); return ( diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx index e39485063..84ee33236 100644 --- a/src/lib/components/modal/select-contract/SelectContract.tsx +++ b/src/lib/components/modal/select-contract/SelectContract.tsx @@ -21,12 +21,11 @@ import { IoList } from "react-icons/io5"; import { MdChevronLeft } from "react-icons/md"; import { useCelatoneApp } from "lib/app-provider"; -import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME } from "lib/data"; +import { DEFAULT_RPC_ERROR } from "lib/data"; import { useContractStore, useEndpoint } from "lib/hooks"; import { useInstantiatedByMe } from "lib/model/contract"; import { queryContract } from "lib/services/contract"; import type { ContractAddr, RpcContractError } from "lib/types"; -import { formatSlugName } from "lib/utils"; import { AllContractLists } from "./AllContractLists"; import { ContractListDetail } from "./ContractListDetail"; @@ -179,9 +178,6 @@ export const SelectContract = ({ contractListInfo={contractList} isReadOnly onContractSelect={onSelectThenClose} - isInstantiatedByMe={ - contractList.slug === formatSlugName(INSTANTIATED_LIST_NAME) - } /> diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index bd6e29d47..19411f2ce 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -168,10 +168,7 @@ const ContractsByList = observer(() => { - + ); }); From 238c949dbb8984a8e35836fc3ba39d34231b5350 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 29 Dec 2022 16:30:21 +0700 Subject: [PATCH 6/6] refactor: remove variable --- .../components/modal/select-contract/ContractListDetail.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/modal/select-contract/ContractListDetail.tsx b/src/lib/components/modal/select-contract/ContractListDetail.tsx index a188870d0..e5f2b171d 100644 --- a/src/lib/components/modal/select-contract/ContractListDetail.tsx +++ b/src/lib/components/modal/select-contract/ContractListDetail.tsx @@ -70,8 +70,6 @@ export const ContractListDetail = ({ ), [contractListInfo.contracts, searchKeyword, tagFilter] ); - const isInstantiatedByMe = - contractListInfo.slug === formatSlugName(INSTANTIATED_LIST_NAME); return ( @@ -100,7 +98,9 @@ export const ContractListDetail = ({ ) : (