Feat/instantiate info

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#46](https://github.com/alleslabs/celatone-frontend/pull/46) Wireup instantiate info
 - [#55](https://github.com/alleslabs/celatone-frontend/pull/55) Add "Add To List / Edit" button to edit offchain details on query and execute pages
 - [#44](https://github.com/alleslabs/celatone-frontend/pull/44) Render query cmds shortcut in contract detail page
 - [#38](https://github.com/alleslabs/celatone-frontend/pull/38) Show execute msg cmds when wallet is not connected

src/lib/components/LabelText.tsx

@@ -3,10 +3,16 @@ import { Flex, Text } from "@chakra-ui/react";
 interface LabelTextProps {
   label: string;
   children: string | JSX.Element;
-  helperText?: string;
+  helperText1?: string;
+  helperText2?: string;
 }
 
-export const LabelText = ({ label, children, helperText }: LabelTextProps) => {
+export const LabelText = ({
+  label,
+  children,
+  helperText1,
+  helperText2,
+}: LabelTextProps) => {
   return (
     <Flex direction="column" gap={1}>
       <Text variant="body2" color="text.dark" fontWeight={500}>
@@ -17,9 +23,14 @@ export const LabelText = ({ label, children, helperText }: LabelTextProps) => {
       ) : (
         children
       )}
-      {helperText && (
+      {helperText1 && (
         <Text variant="body3" color="text.dark">
-          {helperText}
+          {helperText1}
+        </Text>
+      )}
+      {helperText2 && (
+        <Text variant="body3" color="text.dark">
+          {helperText2}
         </Text>
       )}
     </Flex>

src/lib/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./useToast";
 export * from "./useEndpoint";
 export * from "./useUserKey";
 export * from "./useDummyWallet";
+export * from "./useAddressType";

src/lib/hooks/useAddressType.ts

@@ -0,0 +1,29 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+
+export type AddressReturnType =
+  | "user_address"
+  | "contract_address"
+  | "invalid_address";
+
+const addressLengthMap: {
+  [key: string]: { [length: number]: AddressReturnType };
+} = {
+  osmosis: {
+    43: "user_address",
+    63: "contract_address",
+  },
+  osmosistestnet: {
+    43: "user_address",
+    63: "contract_address",
+  },
+};
+
+export const useGetAddressType = () => {
+  const { currentChainName } = useWallet();
+  return useCallback(
+    (address: string): AddressReturnType =>
+      addressLengthMap[currentChainName]?.[address.length] ?? "invalid_address",
+    [currentChainName]
+  );
+};

src/lib/model/contract.ts

@@ -25,17 +25,17 @@ import type { ContractInfo, ContractListInfo } from "lib/stores/contract";
 import type { ContractAddr, HumanAddr } from "lib/types";
 import { formatSlugName } from "lib/utils";
 
-interface ContractDetail {
+export interface ContractDetail {
   chainId: string;
   codeInfo: CodeLocalInfo | undefined;
   contractInfo: ContractInfo | undefined;
   instantiateInfo: InstantiateInfo | undefined;
   publicInfo: PublicInfo | undefined;
   balances: Coin[];
   initMsg: string;
-  initTxHash?: string;
-  initProposalTitle?: string;
-  initProposalId?: number;
+  initTxHash: string | undefined;
+  initProposalTitle: string | undefined;
+  initProposalId: number | undefined;
 }
 
 export const useInstantiatedByMe = (enable: boolean): ContractListInfo => {

src/lib/pages/contract-details/components/InstantiateInfo.tsx

@@ -1,30 +1,132 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
+import type { AddressReturnType } from "lib/hooks";
+import { useGetAddressType } from "lib/hooks";
+import type { ContractDetail } from "lib/model/contract";
+import { formatUTC, dateFromNow } from "lib/utils";
+
+const getAddressTypeText = (addressType: AddressReturnType) => {
+  switch (addressType) {
+    case "contract_address":
+      return "(Contract Address)";
+    case "user_address":
+      return "(Wallet Address)";
+    default:
+      return "(Invalid Address)";
+  }
+};
+
+interface InstantiateInfoProps {
+  contractDetail: ContractDetail;
+}
+
+export const InstantiateInfo = ({ contractDetail }: InstantiateInfoProps) => {
+  const getAddressType = useGetAddressType();
+
+  const renderDataFound = () => {
+    if (contractDetail?.instantiateInfo) {
+      const instantiatorType = getAddressType(
+        contractDetail.instantiateInfo.instantiator
+      );
+      return (
+        <>
+          <LabelText label="Network">{contractDetail.chainId}</LabelText>
+
+          {contractDetail.instantiateInfo &&
+            (contractDetail.instantiateInfo.createdHeight !== -1 ? (
+              <LabelText
+                label="Instantiated Block Height"
+                helperText1={formatUTC(
+                  contractDetail.instantiateInfo.createdTime.toString()
+                )}
+                helperText2={dateFromNow(
+                  contractDetail.instantiateInfo.createdTime.toString()
+                )}
+              >
+                <ExplorerLink
+                  value={contractDetail.instantiateInfo.createdHeight.toString()}
+                  canCopyWithHover
+                />
+              </LabelText>
+            ) : (
+              <LabelText label="Instantiated Block Height">N/A</LabelText>
+            ))}
+
+          <LabelText
+            label="Instantiated by"
+            helperText1={getAddressTypeText(instantiatorType)}
+          >
+            <ExplorerLink
+              type="user_address"
+              value={contractDetail.instantiateInfo.instantiator}
+              canCopyWithHover
+            />
+          </LabelText>
+
+          <LabelText
+            label="From Code"
+            helperText1={contractDetail.codeInfo?.description}
+          >
+            <ExplorerLink
+              value={contractDetail.instantiateInfo.codeId}
+              canCopyWithHover
+            />
+          </LabelText>
+
+          {contractDetail.initProposalId ? (
+            <LabelText
+              label="Instantiate Proposal ID"
+              helperText1={contractDetail.initProposalTitle}
+            >
+              <ExplorerLink
+                value={`#${contractDetail.initProposalId.toString()}`}
+                canCopyWithHover
+              />
+            </LabelText>
+          ) : (
+            <LabelText label="Instantiate Transaction">
+              <ExplorerLink
+                type="tx_hash"
+                value={contractDetail.initTxHash?.toUpperCase() ?? "Genesis"}
+                canCopyWithHover
+                isReadOnly={!contractDetail.initTxHash}
+              />
+            </LabelText>
+          )}
+
+          {contractDetail.instantiateInfo.admin && (
+            <LabelText label="Admin Address">
+              <ExplorerLink
+                type="user_address"
+                value={contractDetail.instantiateInfo.admin}
+              />
+            </LabelText>
+          )}
+
+          {contractDetail.instantiateInfo.ibcPortId && (
+            <LabelText label="IBC Port ID">
+              {contractDetail.instantiateInfo.ibcPortId}
+            </LabelText>
+          )}
+        </>
+      );
+    }
+
+    return (
+      <Text variant="body2" color="text.dark">
+        Error fetching data
+      </Text>
+    );
+  };
 
-export const InstantiateInfo = () => {
-  /**
-   * @todos
-   * - Make an interface
-   * - All these are mockups, Wireup with real data and map render LabelText
-   */
   return (
-    <Flex direction="column" gap={6} w="160px">
+    <Flex direction="column" gap={6} w="180px">
       <Heading as="h6" variant="h6">
         Instantiate Info
       </Heading>
-      <LabelText label="Network">phoenix-1</LabelText>
-      <LabelText label="Instantiated by" helperText="(Wallet Address)">
-        <ExplorerLink
-          type="user_address"
-          value="osmo1wke7j8f5kgnnacs3avchcj6fvvdtvrsalzmddx"
-          canCopyWithHover
-        />
-      </LabelText>
-      <LabelText label="IBC Port ID">
-        wasm.terra1te47jv6pg272n8unq490nvhh5m43v5n5kxfgrztly2tmkmqxzw8qphrjx2
-      </LabelText>
+      {renderDataFound()}
     </Flex>
   );
 };

src/lib/pages/contract-details/index.tsx

@@ -17,6 +17,8 @@ import { BackButton } from "lib/components/button/BackButton";
 import { CustomTab } from "lib/components/CustomTab";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import PageContainer from "lib/components/PageContainer";
+import { useContractDetail } from "lib/model/contract";
+import type { ContractAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { CommandSection } from "./components/CommandSection";
@@ -30,6 +32,10 @@ const ContractDetails = () => {
    * @todos add contract address validation function here
    */
   const contractAddress = getFirstQueryParam(router.query.contractAddress);
+  const contractDetail = useContractDetail(contractAddress as ContractAddr);
+
+  // TODO - Wait for design
+  if (!contractDetail) return null;
 
   return (
     <PageContainer>
@@ -103,7 +109,7 @@ const ContractDetails = () => {
       {/* Instantiate/Contract Info Section */}
       <Flex my={12} justify="space-between">
         {/* Instantiate Info */}
-        <InstantiateInfo />
+        <InstantiateInfo contractDetail={contractDetail} />
         {/* Contract Info (Expand) */}
         <Flex direction="column" flex={0.8} gap={6}>
           <JsonInfo header="Contract Info" />

src/lib/services/contract.ts

@@ -97,7 +97,7 @@ export const queryInstantiateInfo = async (
     createdTime = new Date(data.block.header.time);
   } else {
     // TODO: revisit default value
-    createdHeight = 0;
+    createdHeight = -1;
     createdTime = new Date(0);
   }
 

src/lib/utils/date.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+
+export const formatUTC = (timestamp: string) => {
+  const localDate = timestamp.concat("Z");
+  return dayjs(localDate).utc().format("MMM DD, YYYY, h:mm:ss A [(UTC)]");
+};
+
+export const dateFromNow = (timestamp: string) => {
+  const localDate = timestamp.concat("Z");
+  return dayjs(localDate).fromNow();
+};

src/lib/utils/index.ts

@@ -10,3 +10,4 @@ export * from "./isDecimalNumber";
 export * from "./extractMsgType";
 export * from "./redo";
 export * from "./scrollTop";
+export * from "./date";