Merge branch 'develop' into fix/overview-spacing

CHANGELOG.md

@@ -38,7 +38,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
+
 - [#134](https://github.com/alleslabs/celatone-frontend/pull/134) Fix un-align sub-page with sidebar
+- [#144](https://github.com/alleslabs/celatone-frontend/pull/144) Add `Assign me` for admin address on instantiate form
+- [#131](https://github.com/alleslabs/celatone-frontend/pull/131) Add CW2-related information to contract details page
 - [#120](https://github.com/alleslabs/celatone-frontend/pull/120) Add simulate migrate fee and the final migration step
 - [#108](https://github.com/alleslabs/celatone-frontend/pull/108) Add migrate options on migrate page and upload new code for migration
 - [#130](https://github.com/alleslabs/celatone-frontend/pull/130) Add support for Terra public projects
@@ -102,6 +105,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#140](https://github.com/alleslabs/celatone-frontend/pull/140) Add placeholder texts to upload&instantiate, save code, and save&edit contract
+- [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs
+- [#135](https://github.com/alleslabs/celatone-frontend/pull/135) Invalidate queries after update/clear admin tx
 - [#123](https://github.com/alleslabs/celatone-frontend/pull/123) Refactor tables to use custom components
 - [#128](https://github.com/alleslabs/celatone-frontend/pull/128) Rewrite add to other list state and add default list to save to
 - [#114](https://github.com/alleslabs/celatone-frontend/pull/114) Handle wallet connection cases in instantiate button
@@ -114,6 +120,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#142](https://github.com/alleslabs/celatone-frontend/pull/142) Fix migration table row duplicate and add key to port id render
+- [#138](https://github.com/alleslabs/celatone-frontend/pull/138) Remove execute table in contract details page (due to data issue)
+- [#136](https://github.com/alleslabs/celatone-frontend/pull/136) Fix decode message from query param in execute page
 - [#132](https://github.com/alleslabs/celatone-frontend/pull/132) Fix permission field in upload simulation
 - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#129](https://github.com/alleslabs/celatone-frontend/pull/129) Fix wallet disconnection on network query change

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

@@ -23,7 +23,7 @@ interface ClearAdminTxParams {
   fee: StdFee;
   memo?: string;
   client: SigningCosmWasmClient;
-  onTxSucceed?: (txHash: string) => void;
+  onTxSucceed?: () => void;
 }
 
 export const clearAdminTx = ({
@@ -40,7 +40,7 @@ export const clearAdminTx = ({
       postFn: () => client.clearAdmin(address, contractAddress, fee, memo),
     }),
     ({ value: txInfo }) => {
-      onTxSucceed?.(txInfo.transactionHash);
+      onTxSucceed?.();
       return {
         value: null,
         phase: TxStreamPhase.SUCCEED,

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

@@ -5,6 +5,7 @@ import type {
 } from "@cosmjs/cosmwasm-stargate";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
+import dayjs from "dayjs";
 import { MdCheckCircle } from "react-icons/md";
 import type { Observable } from "rxjs";
 
@@ -52,7 +53,7 @@ export const executeContractTx = ({
         sender: address,
         contractAddress,
         msg: encode(JSON.stringify(msg)), // base64
-        timestamp: new Date(),
+        timestamp: dayjs(),
       });
       return {
         value: null,

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

@@ -1,4 +1,5 @@
 import { useWallet } from "@cosmos-kit/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useFabricateFee } from "../hooks";
@@ -7,11 +8,12 @@ import { CLEAR_ADMIN_GAS } from "lib/data";
 import type { ContractAddr } from "lib/types";
 
 export interface ClearAdminStreamParams {
-  onTxSucceed?: (txHash: string) => void;
+  onTxSucceed?: () => void;
 }
 
 export const useClearAdminTx = (contractAddress: ContractAddr) => {
   const { address, getCosmWasmClient } = useWallet();
+  const queryClient = useQueryClient();
   const fabricateFee = useFabricateFee();
   const clearAdminFee = fabricateFee(CLEAR_ADMIN_GAS);
 
@@ -26,9 +28,19 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
         contractAddress,
         fee: clearAdminFee,
         client,
-        onTxSucceed,
+        onTxSucceed: () => {
+          onTxSucceed?.();
+          Promise.all([
+            queryClient.invalidateQueries({
+              queryKey: ["admin_by_contracts"],
+            }),
+            queryClient.invalidateQueries({
+              queryKey: ["query", "instantiate_info"],
+            }),
+          ]);
+        },
       });
     },
-    [address, clearAdminFee, contractAddress, getCosmWasmClient]
+    [address, clearAdminFee, queryClient, contractAddress, getCosmWasmClient]
   );
 };

src/lib/components/ContractSelectSection.tsx

@@ -123,7 +123,7 @@ export const ContractSelectSection = observer(
     });
 
     const { refetch } = useQuery(
-      ["query", "instantiateInfo", endpoint, contractAddress],
+      ["query", "instantiate_info", endpoint, contractAddress],
       async () =>
         queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
       {

src/lib/components/OffChainForm.tsx

@@ -24,6 +24,7 @@ export interface OffchainDetail {
 
 interface OffChainFormProps<T extends OffchainDetail> {
   state: OffchainDetail;
+  contractLabel: string;
   control: Control<T>;
   setTagsValue: (options: string[]) => void;
   setContractListsValue: (options: LVPair[]) => void;
@@ -33,6 +34,7 @@ interface OffChainFormProps<T extends OffchainDetail> {
 
 export const OffChainForm = <T extends OffchainDetail>({
   state,
+  contractLabel,
   control,
   setTagsValue,
   setContractListsValue,
@@ -45,6 +47,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         name={"name" as FieldPath<T>}
         control={control}
         label="Name"
+        placeholder={contractLabel}
         helperText="Set name for your contract"
         variant="floating"
         rules={{
@@ -57,7 +60,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         name={"description" as FieldPath<T>}
         control={control}
         label="Description"
-        helperText="Help understanding what this contract do and how it works"
+        placeholder="Help understanding what this contract do and how it works ..."
         variant="floating"
         rules={{
           maxLength: MAX_CONTRACT_DESCRIPTION_LENGTH,
@@ -71,13 +74,13 @@ export const OffChainForm = <T extends OffchainDetail>({
       <TagSelection
         result={state.tags}
         setResult={setTagsValue}
-        placeholder="Tags"
+        placeholder="Select tags or create new ones"
         helperText="Add tag to organize and manage your contracts"
         labelBgColor={labelBgColor}
       />
       <ListSelection
         result={state.lists}
-        placeholder="Add to contract lists"
+        placeholder="Not listed"
         helperText="Grouping your contracts by adding to your existing list or create
               a new list"
         setResult={setContractListsValue}

src/lib/components/forms/ControllerInput.tsx

@@ -1,13 +1,14 @@
 import {
+  Flex,
   FormControl,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
   Input,
   InputGroup,
   InputRightElement,
-  Text,
 } from "@chakra-ui/react";
+import type { ReactNode } from "react";
 import type {
   Control,
   FieldPath,
@@ -27,6 +28,7 @@ interface ControllerInputProps<T extends FieldValues>
   rules?: UseControllerProps["rules"];
   status?: FormStatus;
   maxLength?: number;
+  helperAction?: ReactNode;
 }
 
 export const ControllerInput = <T extends FieldValues>({
@@ -42,6 +44,7 @@ export const ControllerInput = <T extends FieldValues>({
   rules = {},
   status,
   maxLength,
+  helperAction,
   ...componentProps
 }: ControllerInputProps<T>) => {
   const watcher = useWatch({
@@ -83,17 +86,16 @@ export const ControllerInput = <T extends FieldValues>({
           {status && getStatusIcon(status.state)}
         </InputRightElement>
       </InputGroup>
-      {isError ? (
-        <FormErrorMessage className="error-text">{error}</FormErrorMessage>
-      ) : (
-        <FormHelperText className="helper-text">
-          {status?.message ? (
-            getResponseMsg(status, helperText)
-          ) : (
-            <Text color="text.dark">{helperText}</Text>
-          )}
-        </FormHelperText>
-      )}
+      <Flex gap={1} alignItems="center" mt={1}>
+        {isError ? (
+          <FormErrorMessage className="error-text">{error}</FormErrorMessage>
+        ) : (
+          <FormHelperText className="helper-text">
+            {status?.message ? getResponseMsg(status, helperText) : helperText}
+          </FormHelperText>
+        )}
+        {helperAction}
+      </Flex>
     </FormControl>
   );
 };

src/lib/components/forms/ListSelection.tsx

@@ -190,7 +190,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               lineHeight="1.2"
               transform="scale(0.75) translateY(-24px)"
             >
-              Add to lists
+              Listed on
             </FormLabel>
           </Flex>
           <FormHelperText ml={3} mt={1} fontSize="12px" color="text.dark">

src/lib/components/modal/code/SaveNewCode.tsx

@@ -25,7 +25,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
   const [codeIdStatus, setCodeIdStatus] = useState<FormStatus>({
     state: "init",
   });
-  const [uploader, setUploader] = useState("No Description");
+  const [uploader, setUploader] = useState("");
   const [uploaderStatus, setUploaderStatus] = useState<FormStatus>({
     state: "init",
   });
@@ -175,20 +175,21 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
       otherBtnTitle="Cancel"
     >
       <FormControl display="flex" flexDir="column" gap="36px">
-        Save other stored Codes to your &quot;Saved Codes&quot; list
+        Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
           variant="floating"
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
           labelBgColor="gray.800"
           status={codeIdStatus}
-          helperText="ex. 1150"
+          placeholder="ex. 1234"
         />
         <TextInput
           value={uploader}
           label="Uploader"
           labelBgColor="gray.800"
+          placeholder="Uploader address will display here"
           setInputState={() => {}}
           status={uploaderStatus}
           isDisabled
@@ -199,6 +200,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
           setInputState={setDescription}
           label="Code Description"
           labelBgColor="gray.800"
+          placeholder="No Description"
           helperText="Fill in code description to define its use as a reminder"
           status={descriptionStatus}
         />

src/lib/components/modal/contract/AddToOtherList.tsx

@@ -68,7 +68,7 @@ export const AddToOtherList = observer(
         <Box my="16px">
           <ListSelection
             result={contractLists}
-            placeholder="Add to contract lists"
+            placeholder="Not listed"
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
             setResult={setContractLists}

src/lib/components/modal/contract/ClearAdminContract.tsx

@@ -20,7 +20,7 @@ export const ClearAdminContract = ({
   const clearAdminTx = useClearAdminTx(contractAddress);
 
   const proceed = useCallback(async () => {
-    const stream = await clearAdminTx({ onTxSucceed: () => {} });
+    const stream = await clearAdminTx({});
     if (stream) broadcast(stream);
   }, [broadcast, clearAdminTx]);
 

src/lib/components/modal/contract/ContractDetailsTemplate.tsx

@@ -102,6 +102,7 @@ export const ContractDetailsTemplate = ({
     >
       <OffChainForm<OffchainDetail>
         state={offchainState}
+        contractLabel={contractLocalInfo.label}
         control={control}
         setTagsValue={setTagsValue}
         setContractListsValue={setContractListsValue}

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -95,7 +95,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
   // TODO: Abstract query
   const { refetch } = useQuery(
-    ["query", "instantiateInfo", endpoint, contractAddressState],
+    ["query", "instantiate_info", endpoint, contractAddressState],
     async () =>
       queryInstantiateInfo(
         endpoint,
@@ -194,7 +194,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
           control={control}
           label="Contract Address"
           variant="floating"
-          helperText={`ex. ${exampleContractAddress}`}
+          placeholder={`ex. ${exampleContractAddress}`}
           status={status}
           labelBgColor="gray.800"
         />
@@ -209,6 +209,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
         <OffChainForm<SaveNewContractDetail>
           state={offchainState}
+          contractLabel={labelState}
           control={control}
           setTagsValue={setTagsValue}
           setContractListsValue={setContractListsValue}

src/lib/components/modal/select-contract/SelectContractAdmin.tsx

@@ -11,6 +11,7 @@ import {
   Heading,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import dayjs from "dayjs";
 import { MdList, MdSwapHoriz } from "react-icons/md";
 
 import { ADMIN_SPECIAL_SLUG } from "lib/data";
@@ -42,7 +43,7 @@ export const SelectContractAdmin = ({
       ...contract,
       ...getContractLocalInfo(contract.contractAddress),
     })),
-    lastUpdated: new Date(),
+    lastUpdated: dayjs(),
     isInfoEditable: false,
     isContractRemovable: false,
   };

src/lib/components/upload/UploadSection.tsx

@@ -132,7 +132,8 @@ export const UploadSection = ({
         name="codeDesc"
         control={control}
         label="Code Description (Optional)"
-        helperText="Short description of your code. You can add or change this later."
+        placeholder="No Description"
+        helperText="Define what your code works on in one sentence which visible to you only. You can add this later."
         rules={{
           maxLength: MAX_CODE_DESCRIPTION_LENGTH,
         }}

src/lib/hooks/useAddress.ts

@@ -65,6 +65,7 @@ const validateAddress = (
   return null;
 };
 
+// TODO: refactor
 export const useValidateAddress = () => {
   const { currentChainRecord } = useWallet();