Show policy target as well as description (#383)

cartridge-gg · Jun 18, 2024 · fdafcb7 · fdafcb7
1 parent 0c51d1c
commit fdafcb7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/packages/keychain/src/Policies.tsx b/packages/keychain/src/Policies.tsx
@@ -9,7 +9,11 @@ import {
   AccordionPanel,
   Box,
 } from "@chakra-ui/react";
-import { CodeUtilIcon, WedgeRightIcon } from "@cartridge/ui";
+import {
+  CodeUtilIcon,
+  CopyHash,
+  WedgeRightIcon,
+} from "@cartridge/ui";
 import { Policy } from "@cartridge/controller";
 
 export function Policies({
@@ -47,7 +51,6 @@ export function Policies({
             // set the bottom radius for the last item here because for certain
             // browsers' scrolling behaviour (eg Firefox) just to make it look nicer.
             borderBottomRadius={i === policies.length - 1 ? "md" : "none"}
-            isDisabled={!p.description}
           >
             {({ isExpanded }) => (
               <>
@@ -64,19 +67,24 @@ export function Policies({
 
                   <Spacer />
 
-                  {p.description && (
-                    <WedgeRightIcon
-                      fontSize="2xl"
-                      transform={isExpanded ? "rotate(90deg)" : undefined}
-                      transition="all 0.2s ease"
-                      color="text.secondary"
-                    />
-                  )}
+                  <WedgeRightIcon
+                    fontSize="2xl"
+                    transform={isExpanded ? "rotate(90deg)" : undefined}
+                    transition="all 0.2s ease"
+                    color="text.secondary"
+                  />
                 </AccordionButton>
 
-                {p.description && (
-                  <AccordionPanel>{p.description}</AccordionPanel>
-                )}
+                <AccordionPanel>
+                  <VStack align="flex-start" w="full">
+                    <CopyHash hash={p.target} />
+                    {p.description && (
+                      <Text w="full" color="inherit">
+                        {p.description}
+                      </Text>
+                    )}
+                  </VStack>
+                </AccordionPanel>
               </>
             )}
           </AccordionItem>

diff --git a/packages/ui/src/utils/contract.ts b/packages/ui/src/utils/contract.ts
@@ -1,5 +1,5 @@
 export function truncateHash(hash: string) {
-  return `${hash.substring(0, 4)}...${hash.substring(
+  return `${hash.substring(0, 6)}...${hash.substring(
     hash.length - 4,
     hash.length,
   )}`;