diff --git a/CHANGELOG.md b/CHANGELOG.md
index c32f565be..8fb07f475 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@ 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
- [#56](https://github.com/alleslabs/celatone-frontend/pull/56) Refactor offchain form component by not receiving nameField and descriptionField
- [#50](https://github.com/alleslabs/celatone-frontend/pull/50) Refactor offchain component to use react-form and remove redundant offchain components, and refactor edit contract details modal
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index 9bda2ac59..bbcbf45b8 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/modal/select-contract/ContractListDetail.tsx b/src/lib/components/modal/select-contract/ContractListDetail.tsx
index ec52abf10..e5f2b171d 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("");
@@ -98,7 +98,9 @@ export const ContractListDetail = ({
) : (
{
+ return (
+ <>
+
+
+
+ {text}
+
+
+ {helperText && (
+
+ {helperText}
+
+ )}
+ >
+ );
+};
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 01b450dc6..d2826672e 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;
@@ -60,38 +57,35 @@ export const ZeroState = ({
isInstantiatedByMe,
}: ZeroStateProps) => {
const router = useRouter();
- const { isWalletConnected, connect } = useWallet();
-
- if (!isWalletConnected && isInstantiatedByMe) {
- return (
-
- }
- mr={2}
- onClick={connect}
- >
- Connect Wallet
-
- to deploy new contract
-
- );
- }
+ const { isWalletConnected } = useWallet();
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/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/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(() => {
-
+
>
);
});
diff --git a/src/lib/pages/pastTxs/components/FalseState.tsx b/src/lib/pages/pastTxs/components/FalseState.tsx
index 16cb25d99..a86c05ebb 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 ee42735d7..6f8571494 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,18 @@ 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