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 (
-
- }
- mr={2}
- onClick={connect}
- >
- Connect Wallet
-
- 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 = ({
) : (