refactor: structure and components

CHANGELOG.md

@@ -54,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#227](https://github.com/alleslabs/celatone-frontend/pull/227) Refactor directory structure and components e.g. various tables
 - [#207](https://github.com/alleslabs/celatone-frontend/pull/207) Add cta to submit public project in list page
 - [#206](https://github.com/alleslabs/celatone-frontend/pull/206) Refactor copy functionality into one component
 

src/lib/app-fns/tx/resend.tsx

@@ -18,6 +18,7 @@ interface ResendTxParams {
   address: HumanAddr;
   client: SigningCosmWasmClient;
   onTxSucceed?: (txHash: string) => void;
+  onTxFailed?: () => void;
   fee: StdFee;
   messages: EncodeObject[];
 }
@@ -26,6 +27,7 @@ export const resendTx = ({
   address,
   client,
   onTxSucceed,
+  onTxFailed,
   fee,
   messages,
 }: ResendTxParams): Observable<TxResultRendering> => {
@@ -69,5 +71,5 @@ export const resendTx = ({
         actionVariant: "resend",
       } as TxResultRendering;
     }
-  )().pipe(catchTxError());
+  )().pipe(catchTxError(onTxFailed));
 };

src/lib/app-provider/contexts/app.tsx

@@ -15,7 +15,7 @@ import {
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
-} from "lib/hooks";
+} from "lib/providers/store";
 import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
 

src/lib/app-provider/hooks/index.ts

@@ -1,11 +1,14 @@
-export * from "./useFabricateFee";
-export * from "./useSimulateFee";
-export * from "./useRestrictedInput";
+export * from "./useAddress";
+export * from "./useAmplitude";
 export * from "./useCelatoneApp";
-export * from "./useQueryCmds";
-export * from "./useExecuteCmds";
-export * from "./useTokensInfo";
+export * from "./useChainId";
+export * from "./useDummyWallet";
+export * from "./useFabricateFee";
 export * from "./useInternalNavigate";
+export * from "./useLCDEndpoint";
+export * from "./useMediaQuery";
 export * from "./useNetworkChange";
-export * from "./useAmplitude";
+export * from "./useRestrictedInput";
 export * from "./useSelectChain";
+export * from "./useSimulateFee";
+export * from "./useTokensInfo";

src/lib/app-provider/queries/simulateFee.ts

@@ -2,7 +2,7 @@ import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
-import { useDummyWallet } from "lib/hooks";
+import { useDummyWallet } from "../hooks";
 import type { ComposedMsg, Gas } from "lib/types";
 
 interface SimulateQueryParams {

src/lib/app-provider/tx/resend.ts

@@ -8,6 +8,7 @@ import type { HumanAddr } from "lib/types";
 
 export interface ResendStreamParams {
   onTxSucceed?: (txHash: string) => void;
+  onTxFailed?: () => void;
   estimatedFee?: StdFee;
   messages: EncodeObject[];
 }
@@ -16,7 +17,12 @@ export const useResendTx = () => {
   const { address, getCosmWasmClient } = useWallet();
 
   return useCallback(
-    async ({ onTxSucceed, estimatedFee, messages }: ResendStreamParams) => {
+    async ({
+      onTxSucceed,
+      onTxFailed,
+      estimatedFee,
+      messages,
+    }: ResendStreamParams) => {
       const client = await getCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
@@ -25,6 +31,7 @@ export const useResendTx = () => {
         address: address as HumanAddr,
         client,
         onTxSucceed,
+        onTxFailed,
         fee: estimatedFee,
         messages,
       });

src/lib/components/Chakra.tsx

@@ -7,6 +7,6 @@ interface ChakraProps {
   children: ReactNode;
 }
 
-export const Chakra = ({ children }: ChakraProps) => {
-  return <ChakraProvider theme={customTheme}>{children}</ChakraProvider>;
-};
+export const Chakra = ({ children }: ChakraProps) => (
+  <ChakraProvider theme={customTheme}>{children}</ChakraProvider>
+);

src/lib/components/ContractCmdButton.tsx

@@ -7,18 +7,16 @@ interface ContractCmdButtonProps {
 export const ContractCmdButton = ({
   cmd,
   onClickCmd,
-}: ContractCmdButtonProps) => {
-  return (
-    <Button
-      variant="command-button"
-      fontSize="12px"
-      height="24px"
-      px="10px"
-      borderRadius="16px"
-      fontWeight="400"
-      onClick={onClickCmd}
-    >
-      {cmd}
-    </Button>
-  );
-};
+}: ContractCmdButtonProps) => (
+  <Button
+    variant="command-button"
+    fontSize="12px"
+    height="24px"
+    px="10px"
+    borderRadius="16px"
+    fontWeight="400"
+    onClick={onClickCmd}
+  >
+    {cmd}
+  </Button>
+);

src/lib/components/ContractSelectSection.tsx

@@ -5,8 +5,8 @@ import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { MdMode, MdOutlineBookmarkBorder } from "react-icons/md";
 
-import { useCelatoneApp } from "lib/app-provider";
-import { useContractStore, useLCDEndpoint, useMobile } from "lib/hooks";
+import { useCelatoneApp, useLCDEndpoint, useMobile } from "lib/app-provider";
+import { useContractStore } from "lib/providers/store";
 import { queryInstantiateInfo } from "lib/services/contract";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { Addr, ContractAddr, Option } from "lib/types";
@@ -16,7 +16,7 @@ import { EditContractDetailsModal, SaveContractDetailsModal } from "./modal";
 import {
   SelectContractAdmin,
   SelectContractInstantiator,
-} from "./modal/select-contract";
+} from "./select-contract";
 
 interface DisplayNameProps {
   notSelected: boolean;

src/lib/components/ErrorMessageRender.tsx

@@ -9,13 +9,11 @@ interface ErrorMessageRenderProps extends FlexProps {
 export const ErrorMessageRender = ({
   error,
   ...restProps
-}: ErrorMessageRenderProps) => {
-  return (
-    <Flex gap={2} {...restProps}>
-      <Icon as={IoIosWarning} boxSize={4} color="error.main" />
-      <Text variant="body3" color="error.main">
-        {error}
-      </Text>
-    </Flex>
-  );
-};
+}: ErrorMessageRenderProps) => (
+  <Flex gap={2} {...restProps}>
+    <Icon as={IoIosWarning} boxSize={4} color="error.main" />
+    <Text variant="body3" color="error.main">
+      {error}
+    </Text>
+  </Flex>
+);

src/lib/components/ExplorerLink.tsx

@@ -7,7 +7,7 @@ import {
   getExplorerTxUrl,
   getProposalUrl,
 } from "lib/app-fns/explorer";
-import type { AddressReturnType } from "lib/hooks";
+import type { AddressReturnType } from "lib/app-provider";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import { truncate } from "lib/utils";
 

src/lib/components/InputWithIcon.tsx

@@ -15,20 +15,18 @@ const InputWithIcon = ({
   value,
   size,
   onChange,
-}: InputWithIconProps) => {
-  return (
-    <InputGroup>
-      <Input
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        size={size}
-      />
-      <InputRightElement h="56px" alignItems="center">
-        <SearchIcon color="gray.600" />
-      </InputRightElement>
-    </InputGroup>
-  );
-};
+}: InputWithIconProps) => (
+  <InputGroup>
+    <Input
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      size={size}
+    />
+    <InputRightElement h="56px" alignItems="center">
+      <SearchIcon color="gray.600" />
+    </InputRightElement>
+  </InputGroup>
+);
 
 export default InputWithIcon;

src/lib/components/LabelText.tsx

@@ -12,27 +12,25 @@ export const LabelText = ({
   children,
   helperText1,
   helperText2,
-}: LabelTextProps) => {
-  return (
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" color="text.dark" fontWeight={500}>
-        {label}
+}: LabelTextProps) => (
+  <Flex direction="column" gap={1}>
+    <Text variant="body2" color="text.dark" fontWeight={500}>
+      {label}
+    </Text>
+    {typeof children === "string" ? (
+      <Text variant="body2">{children}</Text>
+    ) : (
+      children
+    )}
+    {helperText1 && (
+      <Text variant="body3" color="text.dark">
+        {helperText1}
       </Text>
-      {typeof children === "string" ? (
-        <Text variant="body2">{children}</Text>
-      ) : (
-        children
-      )}
-      {helperText1 && (
-        <Text variant="body3" color="text.dark">
-          {helperText1}
-        </Text>
-      )}
-      {helperText2 && (
-        <Text variant="body3" color="text.dark">
-          {helperText2}
-        </Text>
-      )}
-    </Flex>
-  );
-};
+    )}
+    {helperText2 && (
+      <Text variant="body3" color="text.dark">
+        {helperText2}
+      </Text>
+    )}
+  </Flex>
+);

src/lib/components/forms/ListSelection.tsx → src/lib/components/ListSelection.tsx

@@ -18,11 +18,13 @@ import type { CSSProperties } from "react";
 import { useState, useRef, forwardRef } from "react";
 import { MdCheck, MdClose, MdAdd } from "react-icons/md";
 
-import { CreateNewListModal } from "lib/components/modal/list";
-import { useContractStore, useUserKey } from "lib/hooks";
+import { useUserKey } from "lib/hooks";
+import { useContractStore } from "lib/providers/store";
 import type { LVPair } from "lib/types";
 import { formatSlugName, mergeRefs } from "lib/utils";
 
+import { CreateNewListModal } from "./modal/list";
+
 export interface ListSelectionProps extends InputProps {
   placeholder?: string;
   result: LVPair[];

src/lib/components/Loading.tsx

@@ -1,18 +1,16 @@
 import { Flex, Spinner, Text } from "@chakra-ui/react";
 
-export const Loading = () => {
-  return (
-    <Flex
-      borderY="1px solid"
-      borderColor="pebble.700"
-      width="full"
-      py={12}
-      my={12}
-      flexDirection="column"
-      alignItems="center"
-    >
-      <Spinner size="xl" speed="0.65s" />
-      <Text mt="20px">Loading ...</Text>
-    </Flex>
-  );
-};
+export const Loading = () => (
+  <Flex
+    borderY="1px solid"
+    borderColor="pebble.700"
+    width="full"
+    py={12}
+    my={12}
+    flexDirection="column"
+    alignItems="center"
+  >
+    <Spinner size="xl" speed="0.65s" />
+    <Text mt="20px">Loading ...</Text>
+  </Flex>
+);

src/lib/components/LoadingOverlay.tsx

@@ -1,22 +1,20 @@
 import { Flex, Spinner, Text } from "@chakra-ui/react";
 
-export const LoadingOverlay = () => {
-  return (
-    <Flex
-      w="100vw"
-      h="100vh"
-      justify="center"
-      align="center"
-      direction="column"
-      gap={3}
-      bgColor="background.overlay"
-      position="absolute"
-      top={0}
-      left={0}
-      zIndex="overlay"
-    >
-      <Spinner color="pebble.600" size="xl" />
-      <Text variant="body1">Loading ...</Text>
-    </Flex>
-  );
-};
+export const LoadingOverlay = () => (
+  <Flex
+    w="100vw"
+    h="100vh"
+    justify="center"
+    align="center"
+    direction="column"
+    gap={3}
+    bgColor="background.overlay"
+    position="absolute"
+    top={0}
+    left={0}
+    zIndex="overlay"
+  >
+    <Spinner color="pebble.600" size="xl" />
+    <Text variant="body1">Loading ...</Text>
+  </Flex>
+);

src/lib/components/MobileGuard.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { useMobile } from "lib/hooks";
+import { useMobile } from "lib/app-provider";
 
 import { NoMobile } from "./modal";