updated code based on latest suggestions

Author: CsB-Polymesh

src/constants/routes/index.ts

@@ -48,7 +48,7 @@ export const PATHS = {
   TRANSFERS: '/transfers',
   MULTISIG: '/multisig',
   AUTHORIZATIONS: '/authorizations',
-  SECONDARY_KEYS: '/secondary-key-permissions',
+  SECONDARY_KEYS: '/secondary-keys',
   CLAIMS: '/claims',
   DISTRIBUTIONS: '/distributions',
   SETTINGS: '/settings',
@@ -81,7 +81,7 @@ export const ROUTES = [
   },
   {
     path: PATHS.SECONDARY_KEYS,
-    label: 'Secondary Key Permissions',
+    label: 'Secondary Keys',
     component: SecondaryKeys,
   },
   { path: PATHS.SETTINGS, label: 'Settings', component: Settings },
@@ -165,7 +165,7 @@ export const NAV_LINKS = [
   },
   {
     path: PATHS.SECONDARY_KEYS,
-    label: 'Secondary Key Permissions',
+    label: 'Secondary Keys',
     icon: 'KeyIcon',
   },
   { path: PATHS.CLAIMS, label: 'Claims', icon: 'ClaimsIcon' },

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

@@ -31,6 +31,11 @@ const ASSET_RADIO_OPTIONS = [
     title: 'Access to all except specific assets',
     description: 'The key can access all assets except the ones you specify',
   },
+  {
+    type: 'None' as PermissionType,
+    title: 'No access to any assets',
+    description: 'The key cannot interact with any assets',
+  },
 ] as const;
 
 const AssetSelectorWrapper = ({

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

@@ -33,6 +33,11 @@ const PORTFOLIO_RADIO_OPTIONS = [
     description:
       'The key can access all portfolios except the ones you specify',
   },
+  {
+    type: 'None' as PermissionType,
+    title: 'No access to any portfolios',
+    description: 'The key cannot access any portfolios',
+  },
 ] as const;
 
 const PortfolioSelectorWrapper = ({

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

@@ -1,7 +1,17 @@
 import { useState, useCallback, useMemo } from 'react';
 import { EPermissionStep, EPermissionTab } from '../../constants';
 import { IPermissionFormData, initialPermissionState } from './constants';
-import { VALIDATION_MESSAGES } from '../../uiConstants';
+
+const VALIDATION_MESSAGES = {
+  ASSET_EXCLUDE_REQUIRED:
+    'At least one asset must be selected when using "Exclude" permission type',
+  EXTRINSIC_THESE_REQUIRED:
+    '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 useAddPermissionModal = (
   initialData?: IPermissionFormData,

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

@@ -7,6 +7,7 @@ import {
   StyledInfo,
   StyledLink,
   StyledLinkGroup,
+  StyledNavLink,
 } from './styles';
 
 export const NoSecondaryKeysView = () => (
@@ -16,11 +17,15 @@ export const NoSecondaryKeysView = () => (
     </StyledIcon>
     <StyledTitle>No secondary keys attached</StyledTitle>
     <StyledInfo>
-      No secondary keys are currently associated with this identity. Add
-      secondary keys and set their permissions from the Authorizations page.
+      No secondary keys are currently associated with this identity.
+      <br />
+      First, add a secondary key from the Authorizations page. Then return here
+      to set its permissions.
     </StyledInfo>
     <StyledLinkGroup>
-      <StyledLink href={PATHS.AUTHORIZATIONS}>Go to Authorizations</StyledLink>
+      <StyledNavLink to={PATHS.AUTHORIZATIONS}>
+        Go to Authorizations
+      </StyledNavLink>
       <StyledLink
         href="https://developers.polymesh.network/identity/advanced/secondary-keys/"
         target="_blank"

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

@@ -1,3 +1,4 @@
+import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const StyledContainer = styled.section`
@@ -70,3 +71,19 @@ export const StyledLinkGroup = styled.div`
   width: 100%;
   align-items: center;
 `;
+
+export const StyledNavLink = styled(NavLink)`
+  font-size: 16px;
+  line-height: 150%;
+  color: ${({ theme }) => theme.colors.textPink};
+  text-decoration: underline;
+  text-align: center;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @media screen and (max-width: 767px) {
+    font-size: 15px;
+  }
+`;

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

@@ -5,7 +5,6 @@ import { AccountContext } from '~/context/AccountContext';
 import { PortfolioContext } from '~/context/PortfolioContext';
 import { AssetContext } from '~/context/AssetContext';
 import { formatBalance } from '~/helpers/formatters';
-import { UI_CONSTANTS } from '../../uiConstants';
 import { formatAssetDisplay, deduplicateAssetsByID } from '../../utils';
 import {
   StyledSecondaryKeyItem,
@@ -261,9 +260,7 @@ export const SecondaryKeyItem = ({
                   {data.permissions.transactions.values.map((tx) => {
                     const extrinsicsText = tx.extrinsics?.join(', ') || '';
                     const fullText = `${tx.pallet}.${extrinsicsText}`;
-                    const shouldBreak =
-                      fullText.length >
-                      UI_CONSTANTS.EXTRINSIC_TEXT_BREAK_LENGTH;
+                    const shouldBreak = fullText.length > 35;
                     const txKey = `${tx.pallet}-${
                       tx.extrinsics?.join('-') || 'all'
                     }`;

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

@@ -13,9 +13,9 @@ import {
   ModalTitle,
   ModalDescription,
   ButtonGroup,
-} from './components/ConfirmationModal/styles';
+  StyledSecondaryKeysList,
+} from './styles';
 import { UI_CONSTANTS } from './uiConstants';
-import { StyledSecondaryKeysList } from './styles';
 import { ISecondaryKeyData } from './components/SecondaryKeyItem/helpers';
 import {
   convertSdkPermissionsToKeyData,

src/layouts/SecondaryKeys/index.tsx

@@ -1,5 +1,29 @@
 import styled from 'styled-components';
 
+export const ModalContent = styled.div`
+  padding: 24px;
+`;
+
+export const ModalTitle = styled.h2`
+  margin: 0 0 24px 0;
+  font-size: 18px;
+  font-weight: 500;
+`;
+
+export const ModalDescription = styled.p`
+  margin: 0 0 24px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: inherit;
+`;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+`;
+
 export const StyledSecondaryKeysList = styled.ul`
   display: flex;
   flex-direction: column;