Merge pull request #52 from alleslabs/feat/disconnected-state

feat: add disconnected state [Merge #42 first]

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
 

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 (
-    <>
+    <Flex borderY="1px solid" borderColor="divider.main" width="full" py="48px">
       <Spinner size="xl" speed="0.65s" />
       <Text mt="20px">Loading ...</Text>
-    </>
+    </Flex>
   );
 };

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 = ({
         <ZeroState
           list={{ label: contractListInfo.name, value: contractListInfo.slug }}
           isReadOnly={isReadOnly}
-          isInstantiatedByMe={isInstantiatedByMe}
+          isInstantiatedByMe={
+            contractListInfo.slug === formatSlugName(INSTANTIATED_LIST_NAME)
+          }
         />
       ) : (
         <FilteredListDetail

src/lib/components/state/DisconnectedState.tsx

@@ -0,0 +1,36 @@
+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 (
+    <>
+      <Flex align="center" justify="center">
+        <ConnectWalletBtn />
+        <Text variant="body1" color="text.dark" ml="8px">
+          {text}
+        </Text>
+      </Flex>
+      {helperText && (
+        <Text
+          variant="body1"
+          color="text.dark"
+          textAlign="center"
+          mt="16px"
+          maxW="520px"
+          alignSelf="center"
+        >
+          {helperText}
+        </Text>
+      )}
+    </>
+  );
+};

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 (
-      <Flex align="center" color="text.dark" justify="center">
-        <Button
-          variant="outline-primary"
-          rightIcon={<MdLink />}
-          mr={2}
-          onClick={connect}
-        >
-          Connect Wallet
-        </Button>
-        to deploy new contract
-      </Flex>
-    );
-  }
+  const { isWalletConnected } = useWallet();
 
   return (
-    <Flex alignItems="center" flexDir="column" gap="4">
-      <Icon as={MdSearch} color="gray.600" boxSize="16" />
-      <Text color="text.dark">
-        {isInstantiatedByMe
-          ? "Your deployed contract through this address will display here"
-          : "You don’t have any saved contracts."}
-      </Text>
-      {!isReadOnly && (
-        <ActionSection
-          isInstantiatedByMe={isInstantiatedByMe}
-          list={list}
-          handleAction={() => router.push("/deploy")}
-        />
+    <Flex
+      borderY="1px solid"
+      borderColor="divider.main"
+      width="full"
+      py="48px"
+      direction="column"
+      alignContent="center"
+    >
+      {!isWalletConnected && isInstantiatedByMe ? (
+        <DisconnectedState text="to deploy new contracts." />
+      ) : (
+        <Flex alignItems="center" flexDir="column" gap="4">
+          <Icon as={MdSearch} color="gray.600" boxSize="16" />
+          <Text color="text.dark">
+            {isInstantiatedByMe
+              ? "Your deployed contract through this address will display here"
+              : "You don’t have any saved contracts."}
+          </Text>
+          {!isReadOnly && (
+            <ActionSection
+              isInstantiatedByMe={isInstantiatedByMe}
+              list={list}
+              handleAction={() => router.push("/deploy")}
+            />
+          )}
+        </Flex>
       )}
     </Flex>
   );

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 (
     <StateContainer>
-      <Text color="text.dark">
-        Connect your wallet to upload and see your stored Codes.
-      </Text>
-      <ConnectWalletBtn />
+      <DisconnectedState text="to upload and see your stored Codes." />
     </StateContainer>
   );
 };

src/lib/pages/contract-list/slug.tsx

@@ -168,10 +168,7 @@ const ContractsByList = observer(() => {
           </Flex>
         </Flex>
       </Box>
-      <ContractListDetail
-        contractListInfo={contractListInfo}
-        isInstantiatedByMe={isInstantiatedByMe}
-      />
+      <ContractListDetail contractListInfo={contractListInfo} />
     </>
   );
 });

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 (
-    <>
+    <Flex borderY="1px solid" borderColor="divider.main" width="full" py="48px">
       <Icon
         as={icon === "off" ? MdSearchOff : MdSearch}
         mb="26px"
@@ -23,6 +23,6 @@ export const FalseState = ({ icon, text1, text2 }: FalseStateProps) => {
       <Text variant="body1" color="text.dark">
         {text2}
       </Text>
-    </>
+    </Flex>
   );
 };

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 (
-        <>
-          <Flex mb="15px" alignItems="center">
-            <ConnectWalletBtn />
-            <Text variant="body1" color="text.dark" ml="10px">
-              to see your past transactions.
-            </Text>
-          </Flex>
-          <Flex direction="column" align="center">
-            <Text variant="body1" color="text.dark">
-              Past transactions involving the Wasm module will display here
-            </Text>
-            <Text variant="body1" color="text.dark">
-              such as Instantiate, Execute, or Upload Wasm file will display
-              here.
-            </Text>
-          </Flex>
-        </>
+        <Flex
+          direction="column"
+          borderY="1px solid"
+          borderColor="divider.main"
+          width="full"
+          py="48px"
+        >
+          <DisconnectedState
+            text="to see your past transactions."
+            helperText="Past transactions involving the Wasm module such as Instantiate, Execute, or Upload Wasm file will display here."
+          />
+        </Flex>
       );
     }
     // Loading state