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/pages/contract-details/components/InstantiateInfo.tsx

@@ -1,30 +1,115 @@
 import { Flex, Heading } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import router from "next/router";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
+import { useContractDetail } from "lib/model/contract";
+import type { ContractAddr } from "lib/types";
+import { addressType, date, dateFromNow, getFirstQueryParam } from "lib/utils";
 
 export const InstantiateInfo = () => {
-  /**
-   * @todos
-   * - Make an interface
-   * - All these are mockups, Wireup with real data and map render LabelText
-   */
+  const contractAddress = getFirstQueryParam(router.query.contractAddress);
+  const { currentChainName } = useWallet();
+  const contractDetail = useContractDetail(contractAddress as ContractAddr);
+
+  if (!contractDetail || !contractDetail.instantiateInfo) return null;
+
+  const renderAddressType = (address: string) => {
+    switch (addressType(address, currentChainName)) {
+      case "contract_address":
+        return "(Contract Address)";
+      case "user_address":
+        return "(Wallet Address)";
+      default:
+        break;
+    }
+    return "";
+  };
+
   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)">
+
+      <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(
+          contractDetail.instantiateInfo.instantiator
+        )}
+      >
         <ExplorerLink
           type="user_address"
-          value="osmo1wke7j8f5kgnnacs3avchcj6fvvdtvrsalzmddx"
+          value={contractDetail.instantiateInfo.instantiator}
           canCopyWithHover
         />
       </LabelText>
-      <LabelText label="IBC Port ID">
-        wasm.terra1te47jv6pg272n8unq490nvhh5m43v5n5kxfgrztly2tmkmqxzw8qphrjx2
+
+      <LabelText
+        label="From Code"
+        helperText={contractDetail.codeInfo?.description}
+      >
+        <ExplorerLink
+          value={contractDetail.instantiateInfo?.codeId}
+          canCopyWithHover
+        />
       </LabelText>
+
+      {contractDetail.initTxHash && (
+        <LabelText label="Instantiate Transaction">
+          <ExplorerLink
+            type="tx_hash"
+            value={contractDetail.initTxHash.toUpperCase()}
+            canCopyWithHover
+          />
+        </LabelText>
+      )}
+
+      {contractDetail.initProposalId && (
+        <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>
+      )}
     </Flex>
   );
 };

src/lib/utils/addressType.ts

@@ -0,0 +1,13 @@
+export const addressType = (address: string, chainName: string) => {
+  if (chainName === "osmosis" || chainName === "osmosistestnet") {
+    switch (address.length) {
+      case 43:
+        return "user_address";
+      case 63:
+        return "contract_address";
+      default:
+        break;
+    }
+  }
+  return undefined;
+};

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,5 @@ export * from "./isDecimalNumber";
 export * from "./extractMsgType";
 export * from "./redo";
 export * from "./scrollTop";
+export * from "./date";
+export * from "./addressType";