Merge pull request #401 from alleslabs/feat/code-box-permission

feat: permission in code select

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#401](https://github.com/alleslabs/celatone-frontend/pull/401) Add permission chip to code selection box
 - [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
 - [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page

src/lib/components/select-code/CodeSelect.tsx

@@ -1,10 +1,13 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
+import { DotSeparator } from "../DotSeparator";
+import { PermissionChip } from "../PermissionChip";
 import type { FormStatus } from "lib/components/forms";
 import { UploadIcon } from "lib/components/icon";
-import { useUserKey } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
+import { useCodeDataByCodeId } from "lib/services/codeService";
+import { AccessConfigPermission } from "lib/types";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
@@ -20,9 +23,9 @@ export const CodeSelect = ({
   status,
   ...componentProps
 }: CodeSelectProps) => {
-  const { codeInfo } = useCodeStore();
-  const userKey = useUserKey();
-  const name = codeInfo?.[userKey]?.[Number(codeId)]?.name;
+  const { getCodeLocalInfo } = useCodeStore();
+  const name = getCodeLocalInfo(Number(codeId))?.name;
+  const { data: codeInfo } = useCodeDataByCodeId(Number(codeId));
 
   const isError = status.state === "error";
   return (
@@ -49,9 +52,19 @@ export const CodeSelect = ({
             >
               {name ?? "Untitled Name"}
             </Text>
-            <Text variant="body2" color="text.dark">
-              Code ID {codeId}
-            </Text>
+            <Flex alignItems="center" gap={2}>
+              <Text variant="body2" color="text.dark">
+                Code ID {codeId}
+              </Text>
+              <DotSeparator />
+              <PermissionChip
+                instantiatePermission={
+                  codeInfo?.instantiatePermission ??
+                  AccessConfigPermission.UNKNOWN
+                }
+                permissionAddresses={codeInfo?.permissionAddresses ?? []}
+              />
+            </Flex>
           </Flex>
         ) : (
           <Text variant="body1" fontWeight={500}>
@@ -63,6 +76,7 @@ export const CodeSelect = ({
           buttonText={codeId ? "Change Code" : "Select Code"}
         />
       </Flex>
+
       {isError && (
         <Text variant="body3" color="error.main" mt={1} ml={3}>
           {status.message}