feat: add freeze/unfreeze and remove key functionality

Author: F-OBrien

src/context/AccountContext/constants.ts

@@ -69,6 +69,7 @@ export interface IAccountContext {
   identityHasValidCdd: boolean;
   accountIsMultisigSigner: boolean;
   refreshAccountIdentity: () => void;
+  refreshSecondaryKeys: () => void;
   keyIdentityRelationships: Record<string, AccountIdentityRelation>;
   multiSigAccount: MultiSig | null;
   selectedAccountBalance: IAccountBalance;
@@ -102,6 +103,7 @@ export const initialState = {
   identityHasValidCdd: false,
   accountIsMultisigSigner: false,
   refreshAccountIdentity: () => {},
+  refreshSecondaryKeys: () => {},
   keyIdentityRelationships: {},
   multiSigAccount: null,
   selectedAccountBalance: { free: '', locked: '', total: '' },

src/context/AccountContext/provider.tsx

@@ -101,6 +101,21 @@ const AccountProvider = ({ children }: IProviderProps) => {
     setShouldRefreshIdentity(true);
   }, [setShouldRefreshIdentity]);
 
+  const refreshSecondaryKeys = useCallback(async () => {
+    if (!identity) return;
+
+    setSecondaryKeysLoading(true);
+
+    try {
+      const { data } = await identity.getSecondaryAccounts();
+      setSecondaryKeys(data);
+    } catch (error) {
+      notifyGlobalError((error as Error).message);
+    } finally {
+      setSecondaryKeysLoading(false);
+    }
+  }, [identity]);
+
   const blockWalletAddress = useCallback(
     (address: string) => {
       setBlockedWallets((prev) => {
@@ -531,6 +546,7 @@ const AccountProvider = ({ children }: IProviderProps) => {
       identityHasValidCdd,
       accountIsMultisigSigner,
       refreshAccountIdentity,
+      refreshSecondaryKeys,
       keyIdentityRelationships,
       multiSigAccount,
       selectedAccountBalance,
@@ -562,6 +578,7 @@ const AccountProvider = ({ children }: IProviderProps) => {
       multiSigAccount,
       primaryKey,
       refreshAccountIdentity,
+      refreshSecondaryKeys,
       rememberSelectedAccount,
       secondaryKeys,
       secondaryKeysLoading,

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

@@ -43,7 +43,9 @@ import {
 interface ISecondaryKeyItemProps {
   data: PermissionedAccount;
   onEdit: () => void;
-  onRemove: () => void;
+  onRemovePermissions: () => void;
+  onRemoveKey: () => void;
+  isTransactionInProgress?: boolean;
 }
 
 type NormalizedPermission<T> = {
@@ -100,7 +102,9 @@ const formatPermissionDisplay = (
 export const SecondaryKeyItem = ({
   data,
   onEdit,
-  onRemove,
+  onRemovePermissions,
+  onRemoveKey,
+  isTransactionInProgress = false,
 }: ISecondaryKeyItemProps) => {
   const { allAccountsWithMeta, allKeyInfo, identity } =
     useContext(AccountContext);
@@ -445,24 +449,37 @@ export const SecondaryKeyItem = ({
         <Button
           variant="outline"
           onClick={onEdit}
+          disabled={isTransactionInProgress}
           title="Edit permissions"
           aria-label="Edit permissions"
         >
           <Icon name="Edit" size="24px" />
           Edit permissions
         </Button>
         <Button
-          onClick={onRemove}
-          title="Remove permissions"
-          aria-label="Remove all permissions for this secondary key"
+          variant="primary"
+          onClick={onRemovePermissions}
+          disabled={isTransactionInProgress}
+          title="Revoke all permissions from this secondary key"
+          aria-label="Revoke permissions"
         >
           <Icon name="CloseIcon" size="24px" />
-          Remove permissions
+          Revoke Permissions
+        </Button>
+        <Button
+          variant="primary"
+          onClick={onRemoveKey}
+          disabled={isTransactionInProgress}
+          title="Completely remove this secondary key from your identity"
+          aria-label="Remove secondary key"
+        >
+          <Icon name="CloseIcon" size="24px" />
+          Remove Key
         </Button>
         <Button
           variant="secondary"
           onClick={toggleDetails}
-          disabled={!hasDetails}
+          disabled={!hasDetails || isTransactionInProgress}
           title={getDetailsButtonLabel()}
           aria-label={getDetailsButtonLabel()}
           aria-expanded={detailsExpanded}

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

@@ -239,15 +239,17 @@ export const StyledButtonsWrapper = styled.div<{ $expanded: boolean }>`
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 
   & button {
-    flex-grow: 1;
+    flex: 1;
+    min-width: 100px;
   }
+
   & button:last-child {
-    width: 100%;
     @media screen and (min-width: 1024px) {
+      flex: 0 0 auto;
       width: initial;
-      flex-grow: 0;
     }
     & .expand-icon {
       transform: ${({ $expanded }) =>
@@ -256,6 +258,24 @@ export const StyledButtonsWrapper = styled.div<{ $expanded: boolean }>`
   }
 
   @media screen and (max-width: 1023px) {
-    flex-wrap: wrap-reverse;
+    & button {
+      flex: 1 1 calc(50% - 6px);
+    }
+    & button:last-child {
+      flex: 0 1 auto;
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    gap: 10px;
+    & button {
+      flex: 1 1 calc(50% - 5px);
+      font-size: 13px;
+      padding: 8px 10px;
+    }
+    & button:last-child {
+      flex: 0 1 100%;
+    }
   }
 `;