Merge pull request #126 from alleslabs/feat/port-id-copier

feat: add port id copier for IBC port id

CHANGELOG.md

@@ -38,6 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
+
+- [#126](https://github.com/alleslabs/celatone-frontend/pull/126) Add port id copier for IBC port id
 - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#76](https://github.com/alleslabs/celatone-frontend/pull/76) Add Public projects page
 - [#116](https://github.com/alleslabs/celatone-frontend/pull/116) Support Terra2.0 mainnet and testnet

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

@@ -1,5 +1,6 @@
-import { chakra, Divider, Flex, Text } from "@chakra-ui/react";
+import { Box, chakra, Divider, Flex, Text } from "@chakra-ui/react";
 
+import { Copier } from "lib/components/Copier";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import { useGetAddressType } from "lib/hooks";
@@ -19,6 +20,32 @@ const Container = chakra(Flex, {
   },
 });
 
+const RenderPortId = ({ portId }: { portId: string }) => {
+  const charArray = portId.match(/.{1,28}/g);
+
+  return (
+    <Box
+      fontSize="14px"
+      _hover={{
+        "& .ibc-port-copy": {
+          display: "flex",
+        },
+      }}
+    >
+      {charArray?.map((line, idx) =>
+        idx === charArray.length - 1 ? (
+          <Flex align="center">
+            {line}
+            <Copier value={portId} className="ibc-port-copy" display="none" />
+          </Flex>
+        ) : (
+          line
+        )
+      )}
+    </Box>
+  );
+};
+
 export const InstantiateInfo = ({
   contractData: {
     instantiateInfo,
@@ -136,7 +163,9 @@ export const InstantiateInfo = ({
       )}
 
       {instantiateInfo.ibcPortId && (
-        <LabelText label="IBC Port ID">{instantiateInfo.ibcPortId}</LabelText>
+        <LabelText label="IBC Port ID">
+          <RenderPortId portId={instantiateInfo.ibcPortId} />
+        </LabelText>
       )}
     </Container>
   );