Feat/instantiate info

CHANGELOG.md

@@ -38,7 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
-
+- [#46](https://github.com/alleslabs/celatone-frontend/pull/46) Wireup instantiate info
 - [#38](https://github.com/alleslabs/celatone-frontend/pull/38) Show execute msg cmds when wallet is not connected
 - [#49](https://github.com/alleslabs/celatone-frontend/pull/49) Add `develop` branch to `main.yml`
 - [#39](https://github.com/alleslabs/celatone-frontend/pull/39) Render "Me" instead of user address

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,22 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+
+export const useAddressType = (address: string) => {
+  const { currentChainName } = useWallet();
+  return useCallback(() => {
+    if (
+      currentChainName === "osmosis" ||
+      currentChainName === "osmosistestnet"
+    ) {
+      switch (address.length) {
+        case 43:
+          return "user_address";
+        case 63:
+          return "contract_address";
+        default:
+          break;
+      }
+    }
+    return undefined;
+  }, [address.length, currentChainName]);
+};

src/lib/model/contract.ts

@@ -25,7 +25,7 @@ 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;

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

@@ -1,30 +1,119 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import router from "next/router";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
+import { useAddressType } from "lib/hooks";
+import type { ContractDetail } from "lib/model/contract";
+import { date, dateFromNow, getFirstQueryParam } from "lib/utils";
+
+interface InstantiateInfoProps {
+  contractDetail: ContractDetail;
+}
+export const InstantiateInfo = ({ contractDetail }: InstantiateInfoProps) => {
+  const contractAddress = getFirstQueryParam(router.query.contractAddress);
+  const addressType = useAddressType(contractAddress);
+
+  const renderAddressType = () => {
+    switch (addressType()) {
+      case "contract_address":
+        return "(Contract Address)";
+      case "user_address":
+        return "(Wallet Address)";
+      default:
+        break;
+    }
+    return "";
+  };
+
+  const renderDataFound = () => {
+    if (contractDetail?.instantiateInfo) {
+      return (
+        <>
+          <LabelText label="Network">{contractDetail.chainId}</LabelText>
+
+          {contractDetail.instantiateInfo && (
+            <LabelText
+              label="Instantiated Block Height"
+              helperText={`${date(
+                contractDetail.instantiateInfo.createdTime.toString()
+              )} ${"\n"}  (${dateFromNow(
+                contractDetail.instantiateInfo.createdTime.toString()
+              )})`}
+            >
+              <ExplorerLink
+                value={contractDetail.instantiateInfo.createdHeight.toString()}
+                canCopyWithHover
+              />
+            </LabelText>
+          )}
+
+          <LabelText label="Instantiated by" helperText={renderAddressType()}>
+            <ExplorerLink
+              type="user_address"
+              value={contractDetail.instantiateInfo.instantiator}
+              canCopyWithHover
+            />
+          </LabelText>
+
+          <LabelText
+            label="From Code"
+            helperText={contractDetail.codeInfo?.description}
+          >
+            <ExplorerLink
+              value={contractDetail.instantiateInfo.codeId}
+              canCopyWithHover
+            />
+          </LabelText>
+
+          {contractDetail.initTxHash && !contractDetail.initProposalId && (
+            <LabelText label="Instantiate Transaction">
+              <ExplorerLink
+                type="tx_hash"
+                value={contractDetail.initTxHash.toUpperCase()}
+                canCopyWithHover
+              />
+            </LabelText>
+          )}
+
+          {contractDetail.initProposalId && !contractDetail.initTxHash && (
+            <LabelText
+              label="Instantiate Proposal ID"
+              helperText={contractDetail.initProposalTitle}
+            >
+              <ExplorerLink
+                value={`#${contractDetail.initProposalId.toString()}`}
+                canCopyWithHover
+              />
+            </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">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/utils/date.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+
+export const date = (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";