refactor: funds filtering and sorting logic, make the whole contract …

CHANGELOG.md

@@ -114,6 +114,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#181](https://github.com/alleslabs/celatone-frontend/pull/181) Refactor funds filtering logic and sort by denom, enable clicking the whole row of contract list when its readOnly
 - [#171](https://github.com/alleslabs/celatone-frontend/pull/171) Change gql query for better speed, remove unwrap and default values, and better handle data rendering
 - [#177](https://github.com/alleslabs/celatone-frontend/pull/177) Handle instantiate render: tx hash, proposal, genesis, and data not available case
 - [#176](https://github.com/alleslabs/celatone-frontend/pull/176) Adjust contract table fraction, limit tag render, full ellipsis contract desc/name length

src/lib/components/table/EditableCell.tsx

@@ -1,4 +1,5 @@
 import { InfoIcon } from "@chakra-ui/icons";
+import type { TextProps } from "@chakra-ui/react";
 import {
   Flex,
   Text,
@@ -17,13 +18,27 @@ interface EditableCellProps {
   defaultValue: string;
   maxLength: number;
   tooltip?: string;
+  isReadOnly?: boolean;
   onSave?: (value?: string) => void;
 }
+
+const getInputValueTextProps = (
+  isShowInputValue: boolean,
+  inputValue: string,
+  defaultValue: string
+): Pick<TextProps, "fontWeight" | "color" | "children"> => {
+  if (isShowInputValue) {
+    return { fontWeight: 600, color: "text.main", children: inputValue };
+  }
+  return { fontWeight: 400, color: "text.dark", children: defaultValue };
+};
+
 export const EditableCell = ({
   initialValue = "",
   defaultValue,
   maxLength,
   tooltip,
+  isReadOnly,
   onSave,
 }: EditableCellProps) => {
   const [inputValue, setInputValue] = useState(initialValue);
@@ -141,26 +156,29 @@ export const EditableCell = ({
             maxW="full"
             align="center"
             gap={2}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              if (!isReadOnly) e.stopPropagation();
+            }}
           >
             <Text
               variant="body2"
               className="ellipsis"
               maxW="full"
-              fontWeight={isShowInputValue ? "600" : "400"}
-              color={isShowInputValue ? "text.main" : "text.dark"}
               onMouseOver={handleMouseEnterText}
               ref={textRef}
-            >
-              {isShowInputValue ? inputValue : defaultValue}
-            </Text>
+              {...getInputValueTextProps(
+                isShowInputValue,
+                inputValue,
+                defaultValue
+              )}
+            />
             {showName && (
               <Text
                 variant="body2"
                 top="-16px"
                 left="-16px"
                 borderRadius="8px"
-                bg="pebble.800"
+                bg={isReadOnly ? "pebble.700" : "pebble.800"}
                 whiteSpace="nowrap"
                 p={4}
                 position="absolute"

src/lib/pages/contract-list/components/ContractListReadOnlyTable.tsx

@@ -13,7 +13,7 @@ interface ContractListReadOnlyTableProps {
   onContractSelect: (addr: ContractAddr) => void;
 }
 
-const TEMPLATE_COLUMNS = "160px 1fr 220px 160px";
+const TEMPLATE_COLUMNS = "160px 280px 260px 1fr";
 
 export const ContractListReadOnlyTable = ({
   contracts = [],

src/lib/pages/contract-list/components/table/ContractNameCell.tsx

@@ -24,6 +24,7 @@ export const ContractNameCell = ({
       defaultValue={contractLocalInfo.label}
       maxLength={MAX_CONTRACT_NAME_LENGTH}
       tooltip={contractLocalInfo.description}
+      isReadOnly={isReadOnly}
       onSave={!isReadOnly ? onSave : undefined}
     />
   );

src/lib/pages/contract-list/components/table/TagsCell.tsx

@@ -34,7 +34,9 @@ export const TagsCell = ({
         gap={1}
         color="text.dark"
         opacity={isHover ? "0" : "1"}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          if (!isReadOnly) e.stopPropagation();
+        }}
       >
         {tags.length ? (
           <Tag
@@ -69,7 +71,9 @@ export const TagsCell = ({
           w="340px"
           top="-16px"
           left="-16px"
-          onClick={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            if (!isReadOnly) e.stopPropagation();
+          }}
           zIndex="dropdown"
         >
           <Flex

src/lib/pages/execute/components/ExecuteArea.tsx

@@ -23,9 +23,14 @@ import JsonInput from "lib/components/json/JsonInput";
 import { useContractStore } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { Activity } from "lib/stores/contract";
-import type { ComposedMsg, ContractAddr, HumanAddr, Token } from "lib/types";
+import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
 import { MsgType } from "lib/types";
-import { composeMsg, jsonPrettify, jsonValidate, microfy } from "lib/utils";
+import {
+  composeMsg,
+  fabricateFunds,
+  jsonPrettify,
+  jsonValidate,
+} from "lib/utils";
 
 const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
   ssr: false,
@@ -96,12 +101,7 @@ export const ExecuteArea = ({ control, setValue, cmds }: ExecuteAreaProps) => {
   });
 
   const proceed = useCallback(async () => {
-    const funds = assets
-      .filter((asset) => asset.amount && asset.denom)
-      .map((asset) => ({
-        ...asset,
-        amount: microfy(asset.amount as Token).toFixed(0),
-      }));
+    const funds = fabricateFunds(assets);
 
     const stream = await executeTx({
       onTxSucceed: (userKey: string, activity: Activity) => {
@@ -126,13 +126,7 @@ export const ExecuteArea = ({ control, setValue, cmds }: ExecuteAreaProps) => {
     if (enableExecute) {
       setError(undefined);
 
-      const funds = assets
-        .filter((asset) => asset.amount && asset.denom)
-        .map((asset) => ({
-          ...asset,
-          amount: microfy(asset.amount as Token).toFixed(0),
-        }))
-        .filter((asset) => asset.amount !== "0");
+      const funds = fabricateFunds(assets);
 
       const composedMsg = composeMsg(MsgType.EXECUTE, {
         sender: address as HumanAddr,
@@ -218,6 +212,9 @@ export const ExecuteArea = ({ control, setValue, cmds }: ExecuteAreaProps) => {
               assetOptions={assetOptions}
               initialSelected={field.denom}
               amountInput={
+                /**
+                 * @remarks refactor along with instantiate page
+                 */
                 <ControllerInput
                   name={`assets.${idx}.amount`}
                   control={control}

src/lib/pages/execute/types.ts

@@ -1,7 +1,9 @@
+import type { Coin } from "@cosmjs/stargate";
+
 import type { ContractAddr } from "lib/types";
 
 export interface ExecutePageState {
   contractAddress: ContractAddr;
   initialMsg: string;
-  assets: { denom: string; amount: string }[];
+  assets: Coin[];
 }

src/lib/pages/instantiate/instantiate.tsx

@@ -1,5 +1,6 @@
 import { Button, Heading, Text } from "@chakra-ui/react";
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
+import type { Coin } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import Long from "long";
@@ -30,9 +31,9 @@ import { MsgType } from "lib/types";
 import {
   composeMsg,
   demicrofy,
+  fabricateFunds,
   jsonValidate,
   libDecode,
-  microfy,
 } from "lib/utils";
 
 import { FailedModal, Footer } from "./component";
@@ -65,6 +66,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   // ------------------STATES------------------//
   // ------------------------------------------//
   const [simulating, setSimulating] = useState(false);
+  const [status, setStatus] = useState<FormStatus>({ state: "init" });
 
   // ------------------------------------------//
   // ----------------FORM HOOKS----------------//
@@ -83,7 +85,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       label: "",
       adminAddress: "",
       initMsg: "",
-      assets: [{ denom: "", amount: "" }],
+      assets: [{ denom: "", amount: "" }] as Coin[],
       simulateError: "",
     },
   });
@@ -98,7 +100,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     initMsg: watchInitMsg,
     simulateError,
   } = watch();
-  const [status, setStatus] = useState<FormStatus>({ state: "init" });
 
   const selectedAssets = watchAssets.map((asset) => asset.denom);
 
@@ -107,10 +108,12 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       !codeId ||
       !address ||
       !!jsonValidate(watchInitMsg) ||
-      !!formErrors.label ||
+      Object.keys(formErrors).length > 0 ||
       status.state !== "success"
     );
-  }, [codeId, address, watchInitMsg, formErrors.label, status.state]);
+    // formErrors change doesnt trigger this effect
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [codeId, address, watchInitMsg, Object.keys(formErrors), status.state]);
 
   const assetOptions = useMemo(
     () =>
@@ -157,12 +160,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const proceed = useCallback(() => {
     handleSubmit(async ({ adminAddress, label, initMsg, assets }) => {
       setSimulating(true);
-      const funds = assets
-        .filter((asset) => asset.amount && asset.denom)
-        .map((asset) => ({
-          ...asset,
-          amount: microfy(asset.amount as Token).toFixed(0),
-        }));
+      const funds = fabricateFunds(assets);
       const msg = composeMsg(MsgType.INSTANTIATE, {
         sender: address as HumanAddr,
         admin: adminAddress as HumanAddr,
@@ -328,12 +326,23 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
               assetOptions={assetOptions}
               initialSelected={field.denom}
               amountInput={
+                /**
+                 * @remarks refactor along with execute page
+                 */
                 <ControllerInput
                   name={`assets.${idx}.amount`}
                   control={control}
                   label="Amount"
                   variant="floating"
                   type="number"
+                  rules={{
+                    pattern: {
+                      // Move to constant
+                      value: /^[0-9]+([.][0-9]{0,6})?$/i,
+                      message: 'Invalid amount. e.g. "100.00"',
+                    },
+                  }}
+                  error={formErrors.assets?.[idx]?.amount?.message}
                 />
               }
             />

src/lib/utils/funds.ts

@@ -0,0 +1,17 @@
+import type { Coin } from "@cosmjs/stargate";
+
+import type { Token } from "lib/types";
+
+import { microfy } from "./formatter/currency";
+
+export const fabricateFunds = (assets: Coin[]): Coin[] => {
+  return assets
+    .filter((asset) => Number(asset.amount) && asset.denom)
+    .sort(({ denom: aDenom }, { denom: bDenom }) =>
+      aDenom.localeCompare(bDenom)
+    )
+    .map((asset) => ({
+      ...asset,
+      amount: microfy(asset.amount as Token).toFixed(0),
+    }));
+};

src/lib/utils/index.ts

@@ -21,3 +21,4 @@ export * from "./countMessages";
 export * from "./msgFurtherAction";
 export * from "./extractActionValue";
 export * from "./mergeRefs";
+export * from "./funds";