feat: add code description for public code

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#239](https://github.com/alleslabs/celatone-frontend/pull/239) Add code description and code name for public code in code details page
 - [#237](https://github.com/alleslabs/celatone-frontend/pull/237) Change unsupported tokens layout and style
 
 ### Bug fixes

src/lib/pages/contract-details/components/contract-description/PublicContractDesc.tsx → src/lib/components/PublicDescription.tsx

@@ -1,32 +1,30 @@
 import { Flex, Text } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { useState } from "react";
 import Linkify from "react-linkify";
-import { useClampText } from "use-clamp-text";
+import { useClampText } from "use-clamp-text/lib";
 
-import { ShowMoreButton } from "lib/components/button";
-import { CustomIcon } from "lib/components/icon";
-import type { ContractData } from "lib/types";
-import { textLine } from "lib/utils";
+import { ShowMoreButton } from "./button";
 
-interface PublicContractDescProps {
-  contractData: ContractData;
+interface PublicDescriptionProps {
+  description: string;
+  title: string;
+  textLine: number;
+  icon?: ReactNode;
 }
-export const PublicContractDesc = ({
-  contractData,
-}: PublicContractDescProps) => {
-  const [showMore, setShowMore] = useState(false);
 
-  const description = useMemo(
-    () =>
-      contractData.publicProject.publicInfo?.description ||
-      "No public contract description",
-    [contractData.publicProject.publicInfo?.description]
-  );
+export const PublicDescription = ({
+  description,
+  title,
+  textLine,
+  icon,
+}: PublicDescriptionProps) => {
+  const [showMore, setShowMore] = useState(false);
 
   const [ref, { noClamp, clampedText, key }] = useClampText({
     text: description,
     ellipsis: "...",
-    lines: textLine(!contractData.contractLocalInfo?.description, showMore),
+    lines: textLine,
   });
 
   return (
@@ -39,17 +37,17 @@ export const PublicContractDesc = ({
       my={6}
       flex="1"
     >
-      <Flex gap={2} alignItems="center" h="32px" mb="1">
-        <CustomIcon name="website" />
+      <Flex align="center" gap={1} h="32px">
+        {icon}
         <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
-          Public Contract Description
+          {title}
         </Text>
       </Flex>
       <Text
         variant="body2"
         whiteSpace="pre-wrap"
-        ref={ref as React.MutableRefObject<HTMLParagraphElement>}
         key={key}
+        ref={ref as React.MutableRefObject<HTMLParagraphElement>}
       >
         <Linkify>{showMore ? description : clampedText}</Linkify>
       </Text>

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

@@ -5,8 +5,10 @@ import { useEffect } from "react";
 
 import { BackButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import { PublicDescription } from "lib/components/PublicDescription";
 import { InvalidState } from "lib/components/state";
 import type { CodeDataState } from "lib/model/code";
 import { useCodeData } from "lib/model/code";
@@ -56,6 +58,14 @@ const CodeDetailsBody = observer(
                   codeId}
               </Heading>
             </Flex>
+            {publicProject.publicCodeData?.name && (
+              <Flex gap={2}>
+                <Text fontWeight={500} color="text.dark" variant="body2">
+                  Public Code Name:
+                </Text>
+                <Text variant="body2">{publicProject.publicCodeData.name}</Text>
+              </Flex>
+            )}
             <Flex gap={2}>
               <Text fontWeight={500} color="text.dark" variant="body2">
                 Code ID:
@@ -88,6 +98,14 @@ const CodeDetailsBody = observer(
             cw2Version={undefined}
           />
         </Flex>
+        {publicProject.publicCodeData?.description && (
+          <PublicDescription
+            title="Public Code Description"
+            description={publicProject.publicCodeData.description}
+            textLine={2}
+            icon={<CustomIcon name="website" ml="0" my="0" />}
+          />
+        )}
         <Divider borderColor="pebble.700" my={12} />
         <CodeInfoSection codeData={codeData} chainId={chainId} />
         <CodeContractsTable codeId={codeId} />

src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx

@@ -7,7 +7,6 @@ import { ShowMoreButton } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
 import { EditContractDetailsModal } from "lib/components/modal";
 import type { ContractData } from "lib/types";
-import { textLine } from "lib/utils";
 
 interface UserContractDescProps {
   contractData: ContractData;
@@ -20,10 +19,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
   const [ref, { noClamp, clampedText, key }] = useClampText({
     text: description || "No Contract description",
     ellipsis: "...",
-    lines: textLine(
-      !contractData.publicProject.publicInfo?.description,
-      showMore
-    ),
+    lines: contractData.publicProject.publicInfo?.description ? 4 : 2,
   });
 
   const renderEditContractButton = () => {
@@ -71,7 +67,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
       flex="1"
       role="group"
     >
-      <Flex justify="space-between" align="center" h="32px" mb="1">
+      <Flex justify="space-between" align="center" h="32px">
         <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
           Your Contract Description
         </Text>

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

@@ -1,8 +1,9 @@
 import { Flex } from "@chakra-ui/react";
 
+import { CustomIcon } from "lib/components/icon";
+import { PublicDescription } from "lib/components/PublicDescription";
 import type { ContractData } from "lib/types";
 
-import { PublicContractDesc } from "./PublicContractDesc";
 import { UserContractDesc } from "./UserContractDesc";
 
 interface ContractDescProps {
@@ -11,7 +12,12 @@ interface ContractDescProps {
 export const ContractDesc = ({ contractData }: ContractDescProps) => (
   <Flex gap={6}>
     {contractData.publicProject.publicInfo?.description && (
-      <PublicContractDesc contractData={contractData} />
+      <PublicDescription
+        title="Public Contract Description"
+        description={contractData.publicProject.publicInfo.description}
+        textLine={contractData.contractLocalInfo?.description ? 4 : 2}
+        icon={<CustomIcon name="website" ml="0" my="0" />}
+      />
     )}
     <UserContractDesc contractData={contractData} />
   </Flex>

src/lib/utils/index.ts

@@ -10,7 +10,6 @@ export * from "./number";
 export * from "./isDecimalNumber";
 export * from "./extractMsgType";
 export * from "./scroll";
-export * from "./textLine";
 export * from "./date";
 export * from "./validate";
 export * from "./txHash";