Feat: new attach fund section

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#79](https://github.com/alleslabs/celatone-frontend/pull/79) Add dropdown menu and wireup up json attach funds
 - [#225](https://github.com/alleslabs/celatone-frontend/pull/225) Add assets section in account details page
 - [#220](https://github.com/alleslabs/celatone-frontend/pull/220) Add transactions table for account details page
 - [#222](https://github.com/alleslabs/celatone-frontend/pull/222) Add proposals of an account

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

@@ -53,7 +53,12 @@ export const executeContractTx = ({
         action: Object.keys(msg)[0],
         sender: address,
         contractAddress,
-        msg: encode(JSON.stringify(msg)), // base64
+        msg: encode(
+          JSON.stringify({
+            msg,
+            funds,
+          })
+        ), // base64
         timestamp: getCurrentDate(),
       });
       const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSimulateFeeQuery } from "../queries";
 import { useDummyWallet } from "lib/hooks";
@@ -10,6 +10,10 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => {
   const [execCmds, setExecCmds] = useState<[string, string][]>([]);
   const { dummyAddress } = useDummyWallet();
 
+  useEffect(() => {
+    if (!contractAddress) setExecCmds([]);
+  }, [contractAddress]);
+
   const { isFetching } = useSimulateFeeQuery({
     isDummyUser: true,
     enabled: !!contractAddress && !!dummyAddress,

src/lib/components/ContractSelectSection.tsx

@@ -38,6 +38,32 @@ interface ContractSelectSectionProps {
   onContractSelect: (contract: ContractAddr) => void;
 }
 
+const modeStyle = (mode: string) => {
+  switch (mode) {
+    case "all-lists":
+      return {
+        container: "0px",
+        contractAddrContainer: "70%",
+        contractAddrW: "auto",
+        contractNameContainer: "30%",
+      };
+    case "only-admin":
+      return {
+        container: "12",
+        contractAddrContainer: "40%",
+        contractAddrW: "144px",
+        contractNameContainer: "60%",
+      };
+    default:
+      return {
+        container: "12",
+        contractAddrContainer: "40%",
+        contractAddrW: "auto",
+        contractNameContainer: "60%",
+      };
+  }
+};
+
 const DisplayName = ({
   notSelected,
   isValid,
@@ -74,6 +100,7 @@ const ContractDetailsButton = ({
         <Button
           variant="ghost-gray"
           float="right"
+          size="sm"
           leftIcon={<Icon as={MdMode} boxSize="5" />}
         >
           Edit
@@ -92,6 +119,7 @@ const ContractDetailsButton = ({
         <Button
           variant="outline-gray"
           float="right"
+          size="sm"
           leftIcon={<Icon as={MdOutlineBookmarkBorder} boxSize="5" />}
         >
           Add To List
@@ -162,8 +190,11 @@ export const ContractSelectSection = observer(
 
     const contractState = watch();
     const notSelected = contractAddress.length === 0;
+    const style = modeStyle(mode);
+
     return (
       <Flex
+        mb={style.container}
         borderWidth="thin"
         borderColor="pebble.800"
         p="16px"
@@ -173,8 +204,8 @@ export const ContractSelectSection = observer(
         align="center"
         width="full"
       >
-        <Flex gap="24px" width={mode === "all-lists" ? "70%" : "60%"}>
-          <Flex direction="column" width={mode === "all-lists" ? "70%" : "40%"}>
+        <Flex gap={4} width="100%">
+          <Flex direction="column" width={style.contractAddrContainer}>
             Contract Address
             {!notSelected ? (
               <ExplorerLink
@@ -186,19 +217,16 @@ export const ContractSelectSection = observer(
                   isMobile || mode === "only-admin" ? "truncate" : "normal"
                 }
                 maxWidth="none"
+                minWidth={style.contractAddrW}
+                wordBreak="break-all"
               />
             ) : (
               <Text color="text.disabled" variant="body2">
                 Not Selected
               </Text>
             )}
           </Flex>
-          <Flex
-            direction="column"
-            width={
-              mode === "all-lists" ? "calc(30% - 24px)" : "calc(60% - 24px)"
-            }
-          >
+          <Flex direction="column" width={style.contractNameContainer}>
             Contract Name
             <DisplayName
               notSelected={notSelected}
@@ -207,28 +235,27 @@ export const ContractSelectSection = observer(
               label={contractState.label}
             />
           </Flex>
-        </Flex>
-
-        <Flex gap="8px">
-          {mode === "all-lists" && contractState.isValid && (
-            <ContractDetailsButton
-              contractAddress={contractAddress}
-              contractLocalInfo={contractLocalInfo}
-              instantiator={contractState.instantiator as Addr}
-              label={contractState.label}
-            />
-          )}
-          {mode === "all-lists" ? (
-            <SelectContractInstantiator
-              notSelected={notSelected}
-              onContractSelect={onContractSelect}
-            />
-          ) : (
-            <SelectContractAdmin
-              notSelected={notSelected}
-              onContractSelect={onContractSelect}
-            />
-          )}
+          <Flex gap="8px" alignItems="center">
+            {mode === "all-lists" && contractState.isValid && (
+              <ContractDetailsButton
+                contractAddress={contractAddress}
+                contractLocalInfo={contractLocalInfo}
+                instantiator={contractState.instantiator as Addr}
+                label={contractState.label}
+              />
+            )}
+            {mode === "all-lists" ? (
+              <SelectContractInstantiator
+                notSelected={notSelected}
+                onContractSelect={onContractSelect}
+              />
+            ) : (
+              <SelectContractAdmin
+                notSelected={notSelected}
+                onContractSelect={onContractSelect}
+              />
+            )}
+          </Flex>
         </Flex>
       </Flex>
     );

src/lib/components/WasmPageContainer.tsx

@@ -12,7 +12,7 @@ const WasmPageContainer = ({ children }: WasmPageContainerProps) => {
       align="center"
       width="540px"
       mx="auto"
-      my="48px"
+      py="48px"
       direction="column"
     >
       {children}

src/lib/components/forms/SelectInput.tsx

@@ -33,6 +33,7 @@ interface SelectInputProps<T extends string> {
   placeholder?: string;
   initialSelected: string;
   hasDivider?: boolean;
+  helperTextComponent?: ReactNode;
 }
 
 interface SelectItemProps {
@@ -67,10 +68,11 @@ export const SelectInput = <T extends string>({
   placeholder = "",
   initialSelected,
   hasDivider = false,
+  helperTextComponent,
 }: SelectInputProps<T>) => {
   const optionRef = useRef() as MutableRefObject<HTMLElement>;
-  const { isOpen, onClose, onOpen } = useDisclosure();
   const inputRef = useRef() as MutableRefObject<HTMLInputElement>;
+  const { isOpen, onClose, onOpen } = useDisclosure();
   const [selected, setSelected] = useState(
     () => options.find((item) => item.value === initialSelected)?.label ?? ""
   );
@@ -86,6 +88,16 @@ export const SelectInput = <T extends string>({
       setInputRefWidth(inputRef.current.clientWidth);
     }
   }, [inputRef]);
+
+  useEffect(() => {
+    if (options.every((option) => !option.disabled)) {
+      setSelected(
+        () =>
+          options.find((item) => item.value === initialSelected)?.label ?? ""
+      );
+    }
+  }, [initialSelected, options]);
+
   return (
     <Popover placement="bottom-start" isOpen={isOpen}>
       <PopoverTrigger>
@@ -122,13 +134,13 @@ export const SelectInput = <T extends string>({
             </InputLeftElement>
           )}
           <Input
+            ref={inputRef}
             size="lg"
             textAlign="start"
             type="button"
             value={selected || placeholder}
             fontSize="14px"
             color={selected ? "text.main" : "text.dark"}
-            ref={inputRef}
             pl={selectedOption?.icon ? 9 : 4}
           />
           <InputRightElement pointerEvents="none" h="full">
@@ -168,6 +180,17 @@ export const SelectInput = <T extends string>({
             {label}
           </SelectItem>
         ))}
+        {helperTextComponent && (
+          <Flex
+            px={4}
+            h={`${ITEM_HEIGHT}px`}
+            align="center"
+            borderTop={!hasDivider ? "1px solid" : "none"}
+            borderTopColor="pebble.700"
+          >
+            {helperTextComponent}
+          </Flex>
+        )}
       </PopoverContent>
     </Popover>
   );

src/lib/components/fund/data.ts

@@ -0,0 +1,16 @@
+import type { Coin } from "@cosmjs/stargate";
+
+import { jsonPrettify } from "lib/utils";
+
+/**
+ * @remarks Use as form key
+ */
+export const ASSETS_SELECT = "assetsSelect";
+export const ASSETS_JSON_STR = "assetsJsonStr";
+export const ATTACH_FUNDS_OPTION = "attachFundsOption";
+
+/**
+ * @remarks Default value for assets
+ */
+export const defaultAsset = [{ denom: "", amount: "" }] as Coin[];
+export const defaultAssetJsonStr = jsonPrettify(JSON.stringify(defaultAsset));

src/lib/components/fund/index.tsx

@@ -0,0 +1,99 @@
+import { Flex, Text } from "@chakra-ui/react";
+import type { Control, UseFormSetValue } from "react-hook-form";
+import { useWatch } from "react-hook-form";
+
+import { SelectInput } from "lib/components/forms";
+
+import { ASSETS_JSON_STR, ASSETS_SELECT, ATTACH_FUNDS_OPTION } from "./data";
+import { JsonFund } from "./jsonFund";
+import { SelectFund } from "./selectFund";
+import type { AttachFundsState } from "./types";
+import { AttachFundsType } from "./types";
+
+interface AttachFundContentProps {
+  control: Control<AttachFundsState>;
+  setValue: UseFormSetValue<AttachFundsState>;
+}
+
+const attachFundsOptions = [
+  {
+    label: "No funds attached",
+    value: AttachFundsType.ATTACH_FUNDS_NULL,
+    disabled: false,
+  },
+  {
+    label: "Select asset and fill amount",
+    value: AttachFundsType.ATTACH_FUNDS_SELECT,
+    disabled: false,
+  },
+  {
+    label: "Provide JSON Asset List",
+    value: AttachFundsType.ATTACH_FUNDS_JSON,
+    disabled: false,
+  },
+];
+
+const AttachFundContent = ({ control, setValue }: AttachFundContentProps) => {
+  const [assetsSelect, assetsJson, attachFundsOption] = useWatch({
+    control,
+    name: [ASSETS_SELECT, ASSETS_JSON_STR, ATTACH_FUNDS_OPTION],
+  });
+
+  switch (attachFundsOption) {
+    case AttachFundsType.ATTACH_FUNDS_SELECT:
+      return (
+        <SelectFund
+          assetsSelect={assetsSelect}
+          control={control}
+          setValue={setValue}
+        />
+      );
+    case AttachFundsType.ATTACH_FUNDS_JSON:
+      return (
+        <JsonFund
+          setValue={(value) => setValue(ASSETS_JSON_STR, value)}
+          assetsJson={assetsJson}
+        />
+      );
+    case AttachFundsType.ATTACH_FUNDS_NULL:
+    default:
+      return null;
+  }
+};
+
+interface AttachFundProps {
+  control: Control<AttachFundsState>;
+  attachFundsOption: AttachFundsType;
+  setValue: UseFormSetValue<AttachFundsState>;
+}
+
+export const AttachFund = ({
+  control,
+  setValue,
+  attachFundsOption,
+}: AttachFundProps) => {
+  return (
+    <>
+      <Flex mb={6}>
+        <SelectInput
+          formLabel="Attach Funds"
+          options={attachFundsOptions}
+          onChange={(value: AttachFundsType) =>
+            setValue(ATTACH_FUNDS_OPTION, value)
+          }
+          initialSelected={attachFundsOption}
+          helperTextComponent={
+            <Text variant="body3" color="text.dark">
+              Only the input values in your selected{" "}
+              <span style={{ fontWeight: 700 }}>
+                &#x2018;Attach funds&#x2019;
+              </span>{" "}
+              option will be used.
+            </Text>
+          }
+        />
+      </Flex>
+      <AttachFundContent control={control} setValue={setValue} />
+    </>
+  );
+};

src/lib/components/fund/jsonFund.tsx

@@ -0,0 +1,10 @@
+import JsonInput from "lib/components/json/JsonInput";
+
+interface JsonFundProps {
+  setValue: (value: string) => void;
+
+  assetsJson: string;
+}
+export const JsonFund = ({ setValue, assetsJson }: JsonFundProps) => (
+  <JsonInput text={assetsJson} setText={setValue} height="160px" />
+);