refactor: enhance transaction display logic with new helper functions

Author: F-OBrien

src/layouts/SecondaryKeys/components/SecondaryKeyItem/index.tsx

@@ -10,7 +10,11 @@ import { Button } from '~/components/UiKit';
 import { AccountContext } from '~/context/AccountContext';
 import { AssetContext } from '~/context/AssetContext';
 import { PortfolioContext } from '~/context/PortfolioContext';
-import { formatBalance, formatDid } from '~/helpers/formatters';
+import {
+  capitalizeFirstLetter,
+  formatBalance,
+  formatDid,
+} from '~/helpers/formatters';
 import { PermissionScopeType } from '../../types';
 import { deduplicateAssetsByID, formatAssetDisplay } from '../../utils';
 import {
@@ -333,6 +337,41 @@ export const SecondaryKeyItem = ({
     return detailsExpanded ? 'Hide details' : 'Show details';
   };
 
+  const getTransactionType = (
+    extrinsics: string[] | undefined,
+  ): { hasSpecific: boolean; isAll: boolean; isNone: boolean } => {
+    return {
+      hasSpecific: !!(extrinsics && extrinsics.length > 0),
+      isAll: extrinsics === undefined,
+      isNone: extrinsics !== undefined && extrinsics.length === 0,
+    };
+  };
+
+  const renderTransactionDisplay = (
+    pallet: string,
+    extrinsics: string[] | undefined,
+  ): React.ReactNode => {
+    const type = getTransactionType(extrinsics);
+    const extrinsicsText = extrinsics?.join(', ') || '';
+    const shouldBreak = type.hasSpecific && extrinsicsText.length > 25;
+
+    if (type.hasSpecific) {
+      return (
+        <>
+          {capitalizeFirstLetter(pallet)} - {shouldBreak && <br />}
+          {extrinsicsText}
+        </>
+      );
+    }
+    if (type.isAll) {
+      return `${capitalizeFirstLetter(pallet)} (all)`;
+    }
+    if (type.isNone) {
+      return `${capitalizeFirstLetter(pallet)} (none)`;
+    }
+    return null;
+  };
+
   return (
     <StyledSecondaryKeyItem>
       <StyledInfoWrapper>
@@ -401,16 +440,15 @@ export const SecondaryKeyItem = ({
               <PermissionDetailLabel>Included Functions:</PermissionDetailLabel>
               <PermissionDetailList>
                 {transactionsPermission.values.map((tx) => {
-                  const extrinsicsText = tx.extrinsics?.join(', ') || '';
-                  const fullText = `${tx.pallet}.${extrinsicsText}`;
-                  const shouldBreak = fullText.length > 35;
-                  const txKey = `${tx.pallet}-${
-                    tx.extrinsics?.join('-') || 'all'
-                  }`;
+                  const txKey = `${tx.pallet}-${tx.extrinsics?.join('-') || 'all'}`;
+                  const displayContent = renderTransactionDisplay(
+                    tx.pallet,
+                    tx.extrinsics,
+                  );
+
                   return (
                     <PermissionDetailValue key={txKey}>
-                      {tx.pallet}.{extrinsicsText && shouldBreak && <br />}
-                      {extrinsicsText}
+                      {displayContent}
                     </PermissionDetailValue>
                   );
                 })}