updated code based on suggestions

Author: CsB-Polymesh

src/layouts/SecondaryKeys/components/AddPermission/components/AssetPermissionSelector.tsx

@@ -330,14 +330,15 @@ export const AssetPermissionSelector = ({
       return { error: '', assetId: trimmedValue };
     }
 
-    // Check if it could be a ticker (12 characters or less, alphanumeric with allowed symbols)
+    // Check if it could be a ticker (12 characters or less, uppercase alphanumeric - Polymesh ticker format)
+    const uppercasedValue = trimmedValue.toUpperCase();
     const isTickerFormat =
-      trimmedValue.length <= 12 && /^[A-Z0-9_\-./]+$/i.test(trimmedValue);
+      uppercasedValue.length <= 12 && /^[A-Z0-9]+$/.test(uppercasedValue);
 
     if (isTickerFormat) {
       // Try to fetch asset by ticker
       try {
-        const asset = await fetchAsset(trimmedValue);
+        const asset = await fetchAsset(uppercasedValue);
         if (asset) {
           return { error: '', assetId: asset.id };
         }

src/layouts/SecondaryKeys/components/AddPermission/components/ExtrinsicPermissionSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { TxGroup, TxTag } from '@polymeshassociation/polymesh-sdk/types';
 import { txGroupToTxTags } from '@polymeshassociation/polymesh-sdk/utils';
@@ -92,7 +92,7 @@ const GroupCheckbox = styled.input.attrs({ type: 'checkbox' })`
   }
 `;
 
-const GroupLabel = styled.div`
+const GroupLabel = styled.label`
   font-weight: 500;
   font-size: 14px;
   color: ${({ theme }) => theme.colors.textPrimary};
@@ -145,6 +145,13 @@ const TransactionLabel = styled.span`
   word-break: break-word;
 `;
 
+const TransactionCheckboxLabel = styled.label`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+`;
+
 export const ExtrinsicPermissionSelector = ({
   selectedExtrinsics,
   onChange,
@@ -162,45 +169,56 @@ export const ExtrinsicPermissionSelector = ({
       initial[group] = new Set();
     });
 
-    // Initialize from selectedExtrinsics
-    selectedExtrinsics.forEach(({ pallet, extrinsics }) => {
+    // If selectedExtrinsics is empty, it means "Whole" (all permissions)
+    // In this case, select all transactions for all groups
+    if (selectedExtrinsics.length === 0) {
       ALL_TX_GROUPS.forEach((group) => {
         const allTransactions = txGroupToTxTags(group as TxGroup) || [];
-        if (extrinsics && extrinsics.length > 0) {
-          extrinsics.forEach((ext) => {
-            const txTag = `${pallet}.${ext}` as TxTag;
-            if (allTransactions.includes(txTag)) {
-              initial[group].add(txTag);
-            }
-          });
-        } else {
-          allTransactions.forEach((tx) => {
-            if (tx.startsWith(`${pallet}.`)) {
-              initial[group].add(tx);
-            }
-          });
-        }
+        allTransactions.forEach((tx) => {
+          initial[group].add(tx);
+        });
       });
-    });
+    } else {
+      // Initialize from selectedExtrinsics
+      selectedExtrinsics.forEach(({ pallet, extrinsics }) => {
+        ALL_TX_GROUPS.forEach((group) => {
+          const allTransactions = txGroupToTxTags(group as TxGroup) || [];
+          if (extrinsics && extrinsics.length > 0) {
+            extrinsics.forEach((ext) => {
+              const txTag = `${pallet}.${ext}` as TxTag;
+              if (allTransactions.includes(txTag)) {
+                initial[group].add(txTag);
+              }
+            });
+          } else {
+            allTransactions.forEach((tx) => {
+              if (tx.startsWith(`${pallet}.`)) {
+                initial[group].add(tx);
+              }
+            });
+          }
+        });
+      });
+    }
 
     return initial;
   });
 
   const emitSelection = useCallback(
     (updated: Record<TxGroup, Set<string>>) => {
       // Get all selected transactions across all groups
-      const allSelectedTxTags = new Set<string>();
+      const allSelectedTxTagsSet = new Set<string>();
 
       ALL_TX_GROUPS.forEach((group) => {
         updated[group].forEach((tx) => {
-          allSelectedTxTags.add(tx);
+          allSelectedTxTagsSet.add(tx);
         });
       });
 
       // Group transactions by pallet
       const palletMap = new Map<string, Set<string>>();
 
-      allSelectedTxTags.forEach((txTag) => {
+      allSelectedTxTagsSet.forEach((txTag) => {
         const [pallet, extrinsic] = txTag.split('.');
         if (!palletMap.has(pallet)) {
           palletMap.set(pallet, new Set());
@@ -220,6 +238,18 @@ export const ExtrinsicPermissionSelector = ({
     [onChange],
   );
 
+  // When selectedExtrinsics is empty on mount (meaning "Whole" is being shown as "These")
+  // emit the current state which should have all transactions selected
+  useEffect(() => {
+    if (
+      selectedExtrinsics.length === 0 &&
+      Object.keys(selectedByGroup).length > 0
+    ) {
+      // Emit current selection which has everything selected
+      emitSelection(selectedByGroup);
+    }
+  }, [selectedExtrinsics.length, selectedByGroup, emitSelection]);
+
   const toggleGroupExpansion = useCallback((group: TxGroup) => {
     setExpandedGroups((prev) => {
       const newSet = new Set(prev);
@@ -306,16 +336,21 @@ export const ExtrinsicPermissionSelector = ({
               <GroupHeader>
                 <GroupHeaderLeft>
                   <GroupCheckbox
+                    id={`group-${group}`}
                     checked={checked}
                     ref={(checkboxInput: HTMLInputElement | null) => {
                       if (checkboxInput) {
+                        // HTML checkbox `indeterminate` is not exposed as a React prop,
+                        // so we must set it directly on the DOM node in the ref callback.
                         // eslint-disable-next-line no-param-reassign
                         checkboxInput.indeterminate = indeterminate;
                       }
                     }}
                     onChange={() => toggleGroup(group)}
                   />
-                  <GroupLabel>{TX_GROUP_LABELS[group]}</GroupLabel>
+                  <GroupLabel htmlFor={`group-${group}`}>
+                    {TX_GROUP_LABELS[group]}
+                  </GroupLabel>
                 </GroupHeaderLeft>
 
                 <ExpandButton
@@ -336,11 +371,18 @@ export const ExtrinsicPermissionSelector = ({
 
                     return (
                       <TransactionItem key={`${group}-${transaction}`}>
-                        <TransactionCheckbox
-                          checked={isTransactionSelected || false}
-                          onChange={() => toggleTransaction(group, transaction)}
-                        />
-                        <TransactionLabel>{transaction}</TransactionLabel>
+                        <TransactionCheckboxLabel
+                          htmlFor={`tx-${group}-${transaction}`}
+                        >
+                          <TransactionCheckbox
+                            id={`tx-${group}-${transaction}`}
+                            checked={isTransactionSelected || false}
+                            onChange={() =>
+                              toggleTransaction(group, transaction)
+                            }
+                          />
+                          <TransactionLabel>{transaction}</TransactionLabel>
+                        </TransactionCheckboxLabel>
                       </TransactionItem>
                     );
                   })}

src/layouts/SecondaryKeys/components/AddPermission/components/PermissionSummary.tsx

@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { AssetContext } from '~/context/AssetContext';
+import { deduplicateAssetsByID, formatAssetDisplay } from '../../../utils';
 import {
   SummarySection,
   SummaryCard,
@@ -8,7 +9,6 @@ import {
   SelectedItemsList,
   SelectedItem,
 } from '../styles';
-import { formatAssetDisplay } from '../../../utils';
 
 interface IPermissionSummaryProps {
   secondaryKey: string;
@@ -34,15 +34,26 @@ export const PermissionSummary = ({
 }: IPermissionSummaryProps) => {
   const { ownedAssets, managedAssets } = useContext(AssetContext);
 
-  // Combine all available assets
-  const allAssets = useMemo(() => {
-    const combined = [...ownedAssets, ...managedAssets];
-    // Remove duplicates by ID
-    return combined.filter(
-      (asset, index, self) =>
-        index === self.findIndex((a) => a.id === asset.id),
-    );
-  }, [ownedAssets, managedAssets]);
+  // Combine all available assets and deduplicate
+  const allAssets = useMemo(
+    () => deduplicateAssetsByID(ownedAssets, managedAssets),
+    [ownedAssets, managedAssets],
+  );
+
+  // Calculate the number of extrinsics for truncation
+  const totalExtrinsics = useMemo(() => {
+    return permissions.transactions.values.reduce((count, item) => {
+      if (item.extrinsics && item.extrinsics.length > 0) {
+        return count + item.extrinsics.length;
+      }
+      return count + 1; // Count pallets with "all methods"
+    }, 0);
+  }, [permissions.transactions.values]);
+
+  const MAX_DISPLAY_ITEMS = 5;
+  const shouldTruncateExtrinsics =
+    totalExtrinsics > MAX_DISPLAY_ITEMS &&
+    permissions.transactions.type === 'These';
 
   const formatPermissionType = (
     type: 'Whole' | 'These' | 'Except' | 'None',
@@ -91,18 +102,41 @@ export const PermissionSummary = ({
         </SummaryText>
         {permissions.transactions.values.length > 0 && (
           <SelectedItemsList>
-            {permissions.transactions.values.flatMap((item) =>
-              item.extrinsics && item.extrinsics.length > 0 ? (
-                item.extrinsics.map((extrinsic) => (
-                  <SelectedItem key={`${item.pallet}.${extrinsic}`}>
-                    {item.pallet}.{extrinsic}
-                  </SelectedItem>
-                ))
-              ) : (
-                <SelectedItem key={item.pallet}>
-                  {item.pallet} (all methods)
+            {shouldTruncateExtrinsics ? (
+              <>
+                {permissions.transactions.values
+                  .slice(0, MAX_DISPLAY_ITEMS)
+                  .flatMap((item) =>
+                    item.extrinsics && item.extrinsics.length > 0 ? (
+                      item.extrinsics.map((extrinsic) => (
+                        <SelectedItem key={`${item.pallet}.${extrinsic}`}>
+                          {item.pallet}.{extrinsic}
+                        </SelectedItem>
+                      ))
+                    ) : (
+                      <SelectedItem key={item.pallet}>
+                        {item.pallet} (all methods)
+                      </SelectedItem>
+                    ),
+                  )}
+                <SelectedItem style={{ fontStyle: 'italic', opacity: 0.7 }}>
+                  + {totalExtrinsics - MAX_DISPLAY_ITEMS} more
                 </SelectedItem>
-              ),
+              </>
+            ) : (
+              permissions.transactions.values.flatMap((item) =>
+                item.extrinsics && item.extrinsics.length > 0 ? (
+                  item.extrinsics.map((extrinsic) => (
+                    <SelectedItem key={`${item.pallet}.${extrinsic}`}>
+                      {item.pallet}.{extrinsic}
+                    </SelectedItem>
+                  ))
+                ) : (
+                  <SelectedItem key={item.pallet}>
+                    {item.pallet} (all methods)
+                  </SelectedItem>
+                ),
+              )
             )}
           </SelectedItemsList>
         )}

src/layouts/SecondaryKeys/components/AddPermission/components/PortfolioPermissionSelector.tsx

@@ -49,6 +49,14 @@ const DropdownMenu = styled.div<{ $isOpen: boolean }>`
   z-index: 1000;
 `;
 
+const SearchInputLabel = styled.label`
+  display: block;
+  padding: 8px 16px 4px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.textSecondary};
+`;
+
 const SearchInput = styled.input`
   width: 100%;
   padding: 12px 16px;
@@ -68,6 +76,13 @@ const SearchInput = styled.input`
   }
 `;
 
+const PortfolioCheckboxLabel = styled.label`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+`;
+
 const PortfolioOption = styled.div<{ $isSelected: boolean }>`
   display: flex;
   align-items: center;
@@ -195,7 +210,11 @@ export const PortfolioPermissionSelector = ({
       </SelectedPortfoliosDisplay>
 
       <DropdownMenu $isOpen={isOpen}>
+        <SearchInputLabel htmlFor="portfolioSearch">
+          Search Portfolios
+        </SearchInputLabel>
         <SearchInput
+          id="portfolioSearch"
           type="text"
           placeholder="Search by ID or name..."
           value={searchTerm}
@@ -212,21 +231,24 @@ export const PortfolioPermissionSelector = ({
               $isSelected={isPortfolioSelected(portfolio.id)}
               onClick={() => handleTogglePortfolio(portfolio)}
             >
-              <Checkbox
-                type="checkbox"
-                checked={isPortfolioSelected(portfolio.id)}
-                readOnly
-              />
-              <PortfolioInfo>
-                <PortfolioId>
-                  {portfolio.id === 'default'
-                    ? 'Default Portfolio'
-                    : `Portfolio ${portfolio.id}`}
-                </PortfolioId>
-                {portfolio.name && portfolio.id !== 'default' && (
-                  <PortfolioName>{portfolio.name}</PortfolioName>
-                )}
-              </PortfolioInfo>
+              <PortfolioCheckboxLabel htmlFor={`portfolio-${portfolio.id}`}>
+                <Checkbox
+                  id={`portfolio-${portfolio.id}`}
+                  type="checkbox"
+                  checked={isPortfolioSelected(portfolio.id)}
+                  readOnly
+                />
+                <PortfolioInfo>
+                  <PortfolioId>
+                    {portfolio.id === 'default'
+                      ? 'Default Portfolio'
+                      : `Portfolio ${portfolio.id}`}
+                  </PortfolioId>
+                  {portfolio.name && (
+                    <PortfolioName>{portfolio.name}</PortfolioName>
+                  )}
+                </PortfolioInfo>
+              </PortfolioCheckboxLabel>
             </PortfolioOption>
           ))
         )}

src/layouts/SecondaryKeys/components/AddPermission/components/ValidationError.ts

@@ -1,5 +1,10 @@
 import styled from 'styled-components';
 
+/**
+ * ValidationError component for displaying validation errors.
+ * Uses hardcoded colors for now, but could be updated to use theme colors
+ * if styled-components theme is passed through the component hierarchy.
+ */
 export const ValidationError = styled.div`
   padding: 12px;
   margin-top: 12px;

src/layouts/SecondaryKeys/components/AddPermission/hooks.tsx

@@ -40,7 +40,7 @@ export const useAddPermissionModal = (
       permissions.portfolios.type === 'These' &&
       permissions.portfolios.values.length === 0
     ) {
-      return 'At least one portfolio must be selected when using "Specific portfolios only" permission type';
+      return VALIDATION_MESSAGES.PORTFOLIO_THESE_REQUIRED;
     }
     return '';
   }, [permissions.assets, permissions.transactions, permissions.portfolios]);