refactor: implement 9 Copilot review suggestions

- Optimize deduplicateAssetsByID O(n²) → O(n) using Set
- Add input validation to convertKeyDataToFormData
- Fix misleading error message in permissions handler
- Add case-insensitive ticker validation
- Add semantic labels to search input and checkboxes
- Rename variable for clarity (allSelectedTxTags → allSelectedTxTagsSet)

All changes follow the webapp's accessibility pattern using <label htmlFor>
instead of aria-label attributes for better semantic HTML consistency.

Author: CsB-Polymesh

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

@@ -331,13 +331,14 @@ export const AssetPermissionSelector = ({
     }
 
     // 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]+$/.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

@@ -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,
@@ -189,18 +196,18 @@ export const ExtrinsicPermissionSelector = ({
   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());
@@ -306,6 +313,7 @@ export const ExtrinsicPermissionSelector = ({
               <GroupHeader>
                 <GroupHeaderLeft>
                   <GroupCheckbox
+                    id={`group-${group}`}
                     checked={checked}
                     ref={(checkboxInput: HTMLInputElement | null) => {
                       if (checkboxInput) {
@@ -317,7 +325,9 @@ export const ExtrinsicPermissionSelector = ({
                     }}
                     onChange={() => toggleGroup(group)}
                   />
-                  <GroupLabel>{TX_GROUP_LABELS[group]}</GroupLabel>
+                  <GroupLabel htmlFor={`group-${group}`}>
+                    {TX_GROUP_LABELS[group]}
+                  </GroupLabel>
                 </GroupHeaderLeft>
 
                 <ExpandButton
@@ -338,11 +348,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/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/index.tsx

@@ -167,7 +167,7 @@ const SecondaryKeys = () => {
         if (process.env.NODE_ENV === 'development') {
           // Log error in development to aid debugging while keeping production behavior unchanged
           // eslint-disable-next-line no-console
-          console.error('Failed to remove secondary key permissions', error);
+          console.error('Failed to modify secondary key permissions', error);
         }
       }
     },

src/layouts/SecondaryKeys/utils.ts

@@ -22,9 +22,15 @@ export const deduplicateAssetsByID = (
 ): AssetDetails[] => {
   const combined = [...ownedAssets, ...managedAssets];
   // Remove duplicates by ID, keeping first occurrence
-  return combined.filter(
-    (asset, index, self) => index === self.findIndex((a) => a.id === asset.id),
-  );
+  const seenIds = new Set<string>();
+  const deduplicated: AssetDetails[] = [];
+  combined.forEach((asset) => {
+    if (!seenIds.has(asset.id)) {
+      seenIds.add(asset.id);
+      deduplicated.push(asset);
+    }
+  });
+  return deduplicated;
 };
 
 /**
@@ -294,6 +300,13 @@ const isPortfolioValueObject = (
 export const convertKeyDataToFormData = (
   key: ISecondaryKeyData,
 ): IPermissionFormData => {
+  // Validate input
+  if (!key || !key.address || !key.permissions) {
+    throw new Error(
+      'Invalid secondary key data: missing address or permissions',
+    );
+  }
+
   // Handle portfolio values - convert from string array to object array if needed
   let portfolioValues: Array<{ id: string; name?: string }> = [];