feat: pool header and pool assets for pool details page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data

src/lib/app-provider/hooks/useAddress.ts

@@ -38,7 +38,7 @@ const addressLengthMap: {
 
 export const getAddressTypeByLength = (
   chainName: string,
-  address: Option<string>
+  address: Option<string | null>
 ): AddressReturnType =>
   address
     ? addressLengthMap[chainName]?.[address.length] ?? "invalid_address"
@@ -75,7 +75,7 @@ const validateAddress = (
 export const useGetAddressType = () => {
   const { currentChainName, currentChainRecord } = useWallet();
   return useCallback(
-    (address: Option<string>): AddressReturnType => {
+    (address: Option<string | null>): AddressReturnType => {
       const addressType = getAddressTypeByLength(currentChainName, address);
       if (
         !address ||

src/lib/components/CopyLink.tsx

@@ -1,21 +1,40 @@
+import type { FlexProps, IconProps } from "@chakra-ui/react";
 import { Flex, Text, Tooltip, useClipboard } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { AmpTrackCopier } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
-interface CopyLinkProps {
+interface CopyLinkProps extends FlexProps {
   value: string;
   amptrackSection?: string;
   type: string;
+  showCopyOnHover?: boolean;
 }
 
-export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
+export const CopyLink = ({
+  value,
+  amptrackSection,
+  type,
+  showCopyOnHover = false,
+  ...flexProps
+}: CopyLinkProps) => {
   const { address } = useWallet();
   const { onCopy, hasCopied } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
+
+  const displayIcon = useMemo<IconProps["display"]>(() => {
+    if (showCopyOnHover) {
+      if (isHover) {
+        return "flex";
+      }
+      return "none";
+    }
+    return undefined;
+  }, [showCopyOnHover, isHover]);
+
   return (
     <Tooltip
       hasArrow
@@ -40,6 +59,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         cursor="pointer"
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
+        {...flexProps}
       >
         <Text
           variant="body2"
@@ -48,7 +68,13 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         >
           {value === address ? `${value} (Me)` : value}
         </Text>
-        <CustomIcon cursor="pointer" marginLeft={2} name="copy" boxSize={3} />
+        <CustomIcon
+          display={displayIcon}
+          cursor="pointer"
+          marginLeft={2}
+          name="copy"
+          boxSize={3}
+        />
       </Flex>
     </Tooltip>
   );

src/lib/components/ExplorerLink.tsx

@@ -185,7 +185,9 @@ export const ExplorerLink = ({
       {...componentProps}
     >
       {readOnly ? (
-        <Text variant="body2">{textValue}</Text>
+        <Text variant="body2" color="text.disabled">
+          {textValue}
+        </Text>
       ) : (
         <>
           <LinkRender

src/lib/components/LabelText.tsx

@@ -1,24 +1,31 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
+import { TooltipInfo } from "./TooltipComponent";
+
 interface LabelTextProps extends FlexProps {
   label: string;
+  tooltipText?: string;
   children: string | JSX.Element;
   helperText1?: string;
   helperText2?: string;
 }
 
 export const LabelText = ({
   label,
+  tooltipText,
   children,
   helperText1,
   helperText2,
   ...flexProps
 }: LabelTextProps) => (
   <Flex direction="column" gap={1} {...flexProps}>
-    <Text variant="body2" color="text.dark" fontWeight={500}>
-      {label}
-    </Text>
+    <Flex align="center" gap={1}>
+      <Text variant="body2" color="text.dark" fontWeight={500}>
+        {label}
+      </Text>
+      {tooltipText && <TooltipInfo label={tooltipText} />}
+    </Flex>
     {typeof children === "string" ? (
       <Text variant="body2">{children}</Text>
     ) : (

src/lib/components/TooltipComponent.tsx

@@ -1,6 +1,8 @@
 import type { TooltipProps } from "@chakra-ui/react";
 import { Tooltip } from "@chakra-ui/react";
 
+import { CustomIcon } from "./icon";
+
 export const TooltipComponent = ({
   placement,
   ...tooltipProps
@@ -13,3 +15,22 @@ export const TooltipComponent = ({
     {...tooltipProps}
   />
 );
+
+interface TooltipInfoProps extends Omit<TooltipProps, "children"> {
+  iconVariant?: "default" | "solid";
+}
+
+export const TooltipInfo = ({
+  iconVariant = "default",
+  ...tooltipProps
+}: TooltipInfoProps) => (
+  <TooltipComponent {...tooltipProps}>
+    <div style={{ cursor: "pointer" }}>
+      <CustomIcon
+        name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
+        boxSize={3}
+        m={0}
+      />
+    </div>
+  </TooltipComponent>
+);

src/lib/components/copy/Copier.tsx

@@ -1,4 +1,4 @@
-import type { LayoutProps } from "@chakra-ui/react";
+import type { IconProps, LayoutProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
 import { AmpTrackCopier } from "lib/services/amplitude";
@@ -10,7 +10,7 @@ interface CopierProps {
   value: string;
   copyLabel?: string;
   display?: LayoutProps["display"];
-  ml?: string;
+  ml?: IconProps["ml"];
   amptrackSection?: string;
 }
 
@@ -31,10 +31,11 @@ export const Copier = ({
         className="copier"
         display={display}
         cursor="pointer"
+        m={0}
         marginLeft={ml}
         onClick={() => AmpTrackCopier(amptrackSection, type)}
         name="copy"
-        boxSize="12px"
+        boxSize={4}
       />
     }
   />

src/lib/pages/pools/components/PoolDetailHeader.tsx

@@ -17,16 +17,14 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import Big from "big.js";
 
 import { getAddressTypeByLength } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import type { PoolDetail } from "lib/types/pool";
-import { jsonPrettify, truncate } from "lib/utils";
-import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
+import { formatRatio, jsonPrettify, truncate } from "lib/utils";
 
 import { PoolHeader } from "./PoolHeader";
 
@@ -148,9 +146,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
               </Flex>
             </Tooltip>
           </Flex>
-          <StyledTextContent>
-            {formatPercentValue(Big(pool.swapFee).times(100))}
-          </StyledTextContent>
+          <StyledTextContent>{formatRatio(pool.swapFee)}</StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <Flex alignItems="center" gap={1}>
@@ -167,9 +163,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
               </Flex>
             </Tooltip>
           </Flex>
-          <StyledTextContent>
-            {formatPercentValue(Big(pool.exitFee).times(100))}
-          </StyledTextContent>
+          <StyledTextContent>{formatRatio(pool.exitFee)}</StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <StyledTextLabel>Future Governor</StyledTextLabel>