fix: show no admin and correctly handle explorer link by address type

[poomthiti]

Describe your changes

(Contract Details Page) show no admin and correctly handle explorer link by address type

Demo Link

(Contract as admin) https://osmosis-celatone-frontend-staging-git-fix-sho-247e4f-alles-labs.vercel.app/testnet/contract/osmo1v7w4c84c3mn5y84alrk7ae34pqk9fxf0l8q5zlehwpcc8jlx8xrsv7kx3q
(No admin)
https://osmosis-celatone-frontend-staging-git-fix-sho-247e4f-alles-labs.vercel.app/testnet/contract/osmo1qqn0dp79xnack2p393tl63nfgf4s906r0tdnjuzjvsapfmwsevkq304yc3

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
celatone-frontend-initial-demo	🔄 Building (Inspect)			Jan 24, 2023 at 4:30AM (UTC)
celatone-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 4:30AM (UTC)
osmosis-celatone-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 4:30AM (UTC)
terra-celatone-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 4:30AM (UTC)
terra-network-celatone-test	🔄 Building (Inspect)			Jan 24, 2023 at 4:30AM (UTC)

4 Ignored Deployments

Name	Status	Preview	Comments	Updated
celatone-custom-chain-temp	⬜️ Ignored (Inspect)			Jan 24, 2023 at 4:30AM (UTC)
celatone-frontend	⬜️ Ignored (Inspect)			Jan 24, 2023 at 4:30AM (UTC)
osmosis-celatone-frontend	⬜️ Ignored (Inspect)			Jan 24, 2023 at 4:30AM (UTC)
terra-celatone-frontend	⬜️ Ignored (Inspect)			Jan 24, 2023 at 4:30AM (UTC)

[evilpeach]

Refactor to this

import { chakra, Divider, Flex, Text } from "@chakra-ui/react";

import { ExplorerLink } from "lib/components/ExplorerLink";
import { LabelText } from "lib/components/LabelText";
import { useGetAddressType } from "lib/hooks";
import type { ContractData } from "lib/model/contract";
import { formatUTC, dateFromNow } from "lib/utils";
import { getAddressTypeText } from "lib/utils/address";

interface InstantiateInfoProps {
  contractData: ContractData;
}

const Container = chakra(Flex, {
  baseStyle: {
    direction: "column",
    gap: 6,
    w: "250px",
  },
});

export const InstantiateInfo = ({
  contractData: {
    instantiateInfo,
    chainId,
    codeInfo,
    initTxHash,
    initProposalId,
    initProposalTitle,
  },
}: InstantiateInfoProps) => {
  const getAddressType = useGetAddressType();

  if (!instantiateInfo) {
    return (
      <Container>
        <Text variant="body2" color="text.dark">
          Error fetching data
        </Text>
      </Container>
    );
  }

  const instantiatorType = getAddressType(instantiateInfo.instantiator);
  const adminTypeOpt = instantiateInfo.admin
    ? getAddressType(instantiateInfo.admin)
    : undefined;

  return (
    <Container>
      <LabelText label="Network">{chainId}</LabelText>

      <LabelText label="From Code" helperText1={codeInfo?.description}>
        <ExplorerLink
          type="code_id"
          value={instantiateInfo.codeId}
          canCopyWithHover
        />
      </LabelText>

      <LabelText
        label="Admin Address"
        helperText1={
          adminTypeOpt ? getAddressTypeText(adminTypeOpt) : undefined
        }
      >
        {instantiateInfo.admin ? (
          <ExplorerLink
            type={adminTypeOpt}
            value={instantiateInfo.admin}
            canCopyWithHover
          />
        ) : (
          <Text variant="body2" color="text.dark">
            No Admin
          </Text>
        )}
      </LabelText>

      <Divider border="1px solid" borderColor="divider.main" />

      {instantiateInfo &&
        (instantiateInfo.createdHeight !== -1 ? (
          <LabelText
            label="Instantiated Block Height"
            helperText1={
              instantiateInfo.createdTime
                ? formatUTC(instantiateInfo.createdTime)
                : undefined
            }
            helperText2={
              instantiateInfo.createdTime
                ? dateFromNow(instantiateInfo.createdTime)
                : undefined
            }
          >
            <ExplorerLink
              type="block_height"
              value={instantiateInfo.createdHeight.toString()}
              canCopyWithHover
            />
          </LabelText>
        ) : (
          <LabelText label="Instantiated Block Height">N/A</LabelText>
        ))}

      <LabelText
        label="Instantiated by"
        helperText1={getAddressTypeText(instantiatorType)}
      >
        <ExplorerLink
          type={instantiatorType}
          value={instantiateInfo.instantiator}
          canCopyWithHover
        />
      </LabelText>

      {initTxHash ? (
        <LabelText label="Instantiate Transaction">
          <ExplorerLink
            type="tx_hash"
            value={initTxHash.toUpperCase()}
            canCopyWithHover
          />
        </LabelText>
      ) : (
        <LabelText
          label="Instantiate Proposal ID"
          helperText1={initProposalTitle}
        >
          <ExplorerLink
            value={initProposalId ? `#${initProposalId}` : "Genesis"}
            canCopyWithHover
            isReadOnly={!initProposalId}
          />
        </LabelText>
      )}

      {instantiateInfo.ibcPortId && (
        <LabelText label="IBC Port ID">{instantiateInfo.ibcPortId}</LabelText>
      )}
    </Container>
  );
};