updated code based on suggestions

Author: CsB-Polymesh

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

@@ -330,9 +330,9 @@ 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 isTickerFormat =
-      trimmedValue.length <= 12 && /^[A-Z0-9_\-./]+$/i.test(trimmedValue);
+      trimmedValue.length <= 12 && /^[A-Z0-9]+$/.test(trimmedValue);
 
     if (isTickerFormat) {
       // Try to fetch asset by ticker

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

@@ -309,6 +309,8 @@ export const ExtrinsicPermissionSelector = ({
                     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;
                       }

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,11 @@ 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],
+  );
 
   const formatPermissionType = (
     type: 'Whole' | 'These' | 'Except' | 'None',

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]);

src/layouts/SecondaryKeys/components/NoSecondaryKeysView/styles.ts

@@ -21,7 +21,7 @@ export const StyledIcon = styled.div`
   margin-bottom: 16px;
 
   & .icon {
-    color: #ff2e72;
+    color: ${({ theme }) => theme.colors.textPink};
   }
 `;
 

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

@@ -6,7 +6,7 @@ import { PortfolioContext } from '~/context/PortfolioContext';
 import { AssetContext } from '~/context/AssetContext';
 import { formatBalance } from '~/helpers/formatters';
 import { UI_CONSTANTS } from '../../uiConstants';
-import { formatAssetDisplay } from '../../utils';
+import { formatAssetDisplay, deduplicateAssetsByID } from '../../utils';
 import {
   StyledSecondaryKeyItem,
   StyledInfoWrapper,
@@ -88,15 +88,11 @@ export const SecondaryKeyItem = ({
   const { ownedAssets, managedAssets } = useContext(AssetContext);
   const [detailsExpanded, setDetailsExpanded] = useState(false);
 
-  // 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],
+  );
 
   // Memoize key metadata lookups
   const keyMeta = useMemo(

src/layouts/SecondaryKeys/index.tsx

@@ -79,7 +79,15 @@ const SecondaryKeys = () => {
         );
         setSecondaryKeys(keysWithPermissions);
       } catch (error) {
-        // Error is already handled by the transaction context
+        // Error is already handled by the transaction context, but log here for debugging
+        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 load secondary accounts in SecondaryKeys:',
+            error,
+          );
+        }
         setSecondaryKeys([]);
       } finally {
         setLoading(false);
@@ -156,6 +164,11 @@ const SecondaryKeys = () => {
         );
       } catch (error) {
         // Error is already handled by the transaction context
+        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);
+        }
       }
     },
     [identity, sdk, executeTransaction, refreshSecondaryKeys],

src/layouts/SecondaryKeys/uiConstants.ts

@@ -9,6 +9,8 @@ export const VALIDATION_MESSAGES = {
     'At least one extrinsic must be selected when using "Specific modules and/or methods" permission type',
   PORTFOLIO_EXCLUDE_REQUIRED:
     'At least one portfolio must be selected when using "Exclude" permission type',
+  PORTFOLIO_THESE_REQUIRED:
+    'At least one portfolio must be selected when using "Specific portfolios only" permission type',
 } as const;
 
 export const UI_CONSTANTS = {
@@ -31,10 +33,10 @@ export const UI_CONSTANTS = {
 export const ERROR_STYLING = {
   padding: '12px',
   marginTop: '12px',
-  backgroundColor: 'rgba(220, 53, 69, 0.1)',
-  border: '1px solid rgba(220, 53, 69, 0.3)',
+  backgroundColor: 'var(--error-background-color, rgba(220, 53, 69, 0.1))',
+  border: 'var(--error-border-color, 1px solid rgba(220, 53, 69, 0.3))',
   borderRadius: '4px',
-  color: '#dc3545',
+  color: 'var(--error-text-color, #dc3545)',
   fontSize: '14px',
 } as const;
 

src/layouts/SecondaryKeys/utils.ts

@@ -12,6 +12,22 @@ export interface AssetDetails {
   ticker?: string;
 }
 
+/**
+ * Deduplicates assets by ID, keeping the first occurrence.
+ * Useful when assets come from multiple sources (owned and managed).
+ */
+export const deduplicateAssetsByID = (
+  ownedAssets: AssetDetails[] = [],
+  managedAssets: AssetDetails[] = [],
+): 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),
+  );
+};
+
 /**
  * Formats an asset for display with priority: Name > Ticker > ID (Abbreviated)
  */
@@ -258,6 +274,21 @@ export const createEmptyPermissions = () => ({
   },
 });
 
+/**
+ * Type guard for portfolio value validation
+ */
+const isPortfolioValueObject = (
+  value: unknown,
+): value is { id: string; name?: string } => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const candidate = value as { id?: unknown; name?: unknown };
+
+  return typeof candidate.id === 'string';
+};
+
 /**
  * Converts SecondaryKeyData to PermissionFormData
  */
@@ -266,35 +297,37 @@ export const convertKeyDataToFormData = (
 ): IPermissionFormData => {
   // Handle portfolio values - convert from string array to object array if needed
   let portfolioValues: Array<{ id: string; name?: string }> = [];
-  if (key.permissions.portfolios.values) {
-    portfolioValues = key.permissions.portfolios.values.map((value) => {
-      if (typeof value === 'object' && 'id' in value) {
-        return value as { id: string; name?: string };
+
+  const portfolios = key.permissions?.portfolios;
+  const rawPortfolioValues = portfolios?.values;
+
+  if (Array.isArray(rawPortfolioValues)) {
+    portfolioValues = rawPortfolioValues.reduce<
+      Array<{ id: string; name?: string }>
+    >((acc, value) => {
+      if (isPortfolioValueObject(value)) {
+        acc.push({ id: value.id, name: value.name });
+      } else if (typeof value === 'string') {
+        // Legacy string format
+        acc.push({ id: value, name: undefined });
       }
-      // Legacy string format
-      return { id: value as string, name: undefined };
-    });
+
+      // Ignore any unexpected/invalid value types
+      return acc;
+    }, []);
   }
 
   return {
     assets: {
-      type: key.permissions.assets.type as
-        | 'Whole'
-        | 'These'
-        | 'Except'
-        | 'None',
+      type: key.permissions.assets.type as EPermissionType,
       values: (key.permissions.assets.values as string[]) || [],
     },
     transactions: {
       type: key.permissions.transactions.type as 'Whole' | 'These' | 'None',
       values: key.permissions.transactions.values || [],
     },
     portfolios: {
-      type: key.permissions.portfolios.type as
-        | 'Whole'
-        | 'These'
-        | 'Except'
-        | 'None',
+      type: key.permissions.portfolios.type as EPermissionType,
       values: portfolioValues,
     },
   };