Repository: OneKeyHQ/app-monorepo
Pull request #7043: chore: Optimize critical alert for signature message
Author: login: originalix
Created: 2025-04-05T15:39:21Z | Merged: 2025-04-05T16:22:40Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Enhanced alert messages during the signature confirmation process by introducing additional options that tailor risk warnings and confirmation prompts.
	- Improved real-time alert display behavior to automatically update based on user security and confirmation settings.
	- Introduced a new 'danger' alert type, expanding the variety of alerts available.
	- Added a new `Alert` example in the gallery showcasing the 'danger' alert type.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/packages/components/src/actions/Alert/index.tsx b/packages/components/src/actions/Alert/index.tsx
index 14c5d3f89d82..ce8f63f36900 100644
--- a/packages/components/src/actions/Alert/index.tsx
+++ b/packages/components/src/actions/Alert/index.tsx
@@ -2,7 +2,7 @@ import { cloneElement, useCallback, useContext, useState } from 'react';
 
 import { useIntl } from 'react-intl';
 import { StyleSheet } from 'react-native';
-import { createStyledContext, styled } from 'tamagui';
+import { createStyledContext, styled, useThemeName } from 'tamagui';
 
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 
@@ -24,7 +24,8 @@ export type IAlertType =
   | 'warning'
   | 'critical'
   | 'success'
-  | 'default';
+  | 'default'
+  | 'danger';
 
 type IAlertActionProps = {
   primary: string;
@@ -81,6 +82,10 @@ const AlertFrame = styled(XStack, {
         backgroundColor: '$bgCriticalSubdued',
         borderColor: '$borderCriticalSubdued',
       },
+      danger: {
+        backgroundColor: '$bgCritical',
+        borderColor: '$borderCritical',
+      },
       success: {
         backgroundColor: '$bgSuccessSubdued',
         borderColor: '$borderSuccessSubdued',
@@ -108,6 +113,7 @@ const AlertIcon = (props: { children: any }) => {
     info: '$iconInfo',
     warning: '$iconCaution',
     critical: '$iconCritical',
+    danger: '$iconCritical',
     success: '$iconSuccess',
   };
   return cloneElement(props.children, {
@@ -136,6 +142,10 @@ export const Alert = AlertFrame.styleable<IAlertProps>((props, ref) => {
   }, [onCloseProp]);
 
   const intl = useIntl();
+  const isDanger = type === 'danger';
+  const themeName = useThemeName() as 'light' | 'dark';
+  const dangerTextColor =
+    themeName === 'light' ? '$textOnBrightColor' : '$textOnColor';
 
   if (!show) return null;
 
@@ -149,9 +159,19 @@ export const Alert = AlertFrame.styleable<IAlertProps>((props, ref) => {
         </Stack>
       ) : null}
       <YStack flex={1} gap="$1">
-        {title ? <SizableText size="$bodyMdMedium">{title}</SizableText> : null}
+        {title ? (
+          <SizableText
+            size="$bodyMdMedium"
+            color={isDanger ? dangerTextColor : undefined}
+          >
+            {title}
+          </SizableText>
+        ) : null}
         {description ? (
-          <SizableText size="$bodyMd" color="$textSubdued">
+          <SizableText
+            size="$bodyMd"
+            color={isDanger ? dangerTextColor : '$textSubdued'}
+          >
             {description}
           </SizableText>
         ) : null}
diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx
index 34681fd3349b..0c6e5675733d 100644
--- a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx
+++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx
@@ -38,6 +38,12 @@ const AlertGallery = () => (
               description="Description here..."
               icon="PlaceholderOutline"
             />
+            <Alert
+              type="danger"
+              title="Title"
+              description="Description here..."
+              icon="PlaceholderOutline"
+            />
             <Alert
               type="info"
               title="Title"
diff --git a/packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx b/packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx
index a055e2424909..c91d6ee1ea9a 100644
--- a/packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx
+++ b/packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
 import { isEmpty } from 'lodash';
 import { useIntl } from 'react-intl';
@@ -12,6 +12,8 @@ import {
   isPrimaryTypeOrderSign,
   isPrimaryTypePermitSign,
 } from '@onekeyhq/shared/src/signMessage';
+import { EHostSecurityLevel } from '@onekeyhq/shared/types/discovery';
+import type { IHostSecurity } from '@onekeyhq/shared/types/discovery';
 import { EMessageTypesEth } from '@onekeyhq/shared/types/message';
 import type { ISignatureConfirmDisplay } from '@onekeyhq/shared/types/signatureConfirm';
 
@@ -19,14 +21,66 @@ interface IProps {
   unsignedMessage: IUnsignedMessage;
   isRiskSignMethod: boolean;
   messageDisplay: ISignatureConfirmDisplay | undefined;
+
+  // temporary props
+  walletInternalSign?: boolean;
+  urlSecurityInfo?: IHostSecurity;
+  isConfirmationRequired?: boolean;
+  showContinueOperateLocal?: boolean;
 }
 
 function MessageConfirmAlert(props: IProps) {
-  const { messageDisplay, unsignedMessage, isRiskSignMethod } = props;
+  const {
+    messageDisplay,
+    unsignedMessage,
+    isRiskSignMethod,
+
+    // temporary props
+    walletInternalSign,
+    urlSecurityInfo,
+    isConfirmationRequired,
+    showContinueOperateLocal,
+  } = props;
+
   const intl = useIntl();
   const [devSettings] = useDevSettingsPersistAtom();
   const isStrictSignatureAlert = devSettings.settings?.strictSignatureAlert;
 
+  const showTakeRiskAlert = useMemo(() => {
+    if (!isStrictSignatureAlert) {
+      return false;
+    }
+
+    if (walletInternalSign) {
+      return false;
+    }
+
+    if (urlSecurityInfo?.level === EHostSecurityLevel.Security) {
+      return false;
+    }
+
+    if (isConfirmationRequired) {
+      return true;
+    }
+
+    if (!isEmpty(messageDisplay?.alerts)) {
+      return true;
+    }
+
+    if (showContinueOperateLocal) {
+      return true;
+    }
+
+    return false;
+  }, [
+    isStrictSignatureAlert,
+    messageDisplay?.alerts,
+    showContinueOperateLocal,
+    urlSecurityInfo?.level,
+    walletInternalSign,
+    isConfirmationRequired,
+  ]);
+
   const isSignTypedDataV3orV4Method =
     unsignedMessage.type === EMessageTypesEth.TYPED_DATA_V3 ||
     unsignedMessage.type === EMessageTypesEth.TYPED_DATA_V4;
@@ -36,13 +90,11 @@ function MessageConfirmAlert(props: IProps) {
 
   const renderLocalParsedMessageAlert = useCallback(() => {
     if (isSignTypedDataV3orV4Method) {
-      let type: IAlertProps['type'] = isStrictSignatureAlert
-        ? 'critical'
-        : 'default';
+      let type: IAlertProps['type'] = showTakeRiskAlert ? 'danger' : 'default';
       let messageType = 'signTypedData';
 
       if (isPermitSignMethod || isOrderSignMethod) {
-        type = isStrictSignatureAlert ? 'critical' : 'warning';
+        type = showTakeRiskAlert ? 'danger' : 'warning';
         messageType = isPermitSignMethod ? 'permit' : 'order';
       }
 
@@ -79,7 +131,7 @@ function MessageConfirmAlert(props: IProps) {
     isPermitSignMethod,
     isOrderSignMethod,
     intl,
-    isStrictSignatureAlert,
+    showTakeRiskAlert,
   ]);
 
   const renderMessageAlerts = useCallback(() => {
@@ -94,7 +146,7 @@ function MessageConfirmAlert(props: IProps) {
           <Alert
             key={alert}
             description={alert}
-            type={isStrictSignatureAlert ? 'critical' : 'warning'}
+            type={showTakeRiskAlert ? 'danger' : 'warning'}
             icon="InfoSquareOutline"
           />
         ))}
@@ -103,7 +155,7 @@ function MessageConfirmAlert(props: IProps) {
   }, [
     messageDisplay?.alerts,
     renderLocalParsedMessageAlert,
-    isStrictSignatureAlert,
+    showTakeRiskAlert,
   ]);
 
   return renderMessageAlerts();
diff --git a/packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx b/packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx
index 2d4dca5d1557..29830bd2e2cc 100644
--- a/packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx
+++ b/packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx
@@ -256,6 +256,10 @@ function MessageConfirm() {
                 messageDisplay={parsedMessage}
                 unsignedMessage={unsignedMessage}
                 isRiskSignMethod={isRiskSignMethod}
+                showContinueOperateLocal={showContinueOperate}
+                urlSecurityInfo={urlSecurityInfo}
+                isConfirmationRequired={isConfirmationRequired}
+                walletInternalSign={walletInternalSign}
               />
             ) : null}
             {showDAppSiteMark ? (
@@ -291,6 +295,9 @@ function MessageConfirm() {
     accountId,
     networkId,
     swapInfo,
+    showContinueOperate,
+    isConfirmationRequired,
+    walletInternalSign,
   ]);
 
   const handleOnClose = useCallback(


Reviews:
user: login: revan-zhang
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-05T15:41:00Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between bd9e65f2146e8a0ab1169aff88ba1c6a06cb5f1a and 55b84f149ddd1c123d9903b1c1e0806aebc28b30.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx` (6 hunks)
* `packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (1)</summary>

<details>
<summary>packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx (1)</summary><blockquote>

<details>
<summary>packages/shared/types/signatureConfirm.ts (1)</summary>

* `ISignatureConfirmDisplay` (170-178)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: lint (20.x)
* GitHub Check: unittest (20.x)
* GitHub Check: Analyze (javascript-typescript)

</details>

<details>
<summary>🔇 Additional comments (7)</summary><blockquote>

<details>
<summary>packages/kit/src/views/SignatureConfirm/pages/MessageConfirm/MessageConfirm.tsx (2)</summary>

`259-262`: **Good addition of new props to MessageConfirmAlert**

These props enhance alert display logic and ensure proper conditional rendering.

---

`298-300`: **Properly updated callback dependencies**

Adding these variables to the dependencies array ensures proper re-rendering when values change.

</details>
<details>
<summary>packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx (5)</summary>

`15-16`: **Necessary imports for new functionality**

Clean addition of required types for the new security-related features.

---

`33-43`: **Clean props destructuring pattern**

Good organization with temporary props separated by whitespace and a comment.

---

`93-94`: **Improved alert type determination**

Using `showTakeRiskAlert` here provides consistent alert styling based on security conditions.



Also applies to: 99-100

---

`151-152`: **Consistent alert styling**

Using the same `showTakeRiskAlert` condition here maintains visual consistency.

---

`160-161`: **Updated dependency array correctly**

Adding `showTakeRiskAlert` to the dependencies ensures the callback updates when conditions change.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-05T15:44:18Z
user: login: huhuanming
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-05T15:52:24Z

Review comments:
diff_hunk: @@ -12,21 +12,75 @@ import {
   isPrimaryTypeOrderSign,
   isPrimaryTypePermitSign,
 } from '@onekeyhq/shared/src/signMessage';
+import { EHostSecurityLevel } from '@onekeyhq/shared/types/discovery';
+import type { IHostSecurity } from '@onekeyhq/shared/types/discovery';
 import { EMessageTypesEth } from '@onekeyhq/shared/types/message';
 import type { ISignatureConfirmDisplay } from '@onekeyhq/shared/types/signatureConfirm';
 
 interface IProps {
   unsignedMessage: IUnsignedMessage;
   isRiskSignMethod: boolean;
   messageDisplay: ISignatureConfirmDisplay | undefined;
+
+  // temporary props
+  walletInternalSign?: boolean;
+  urlSecurityInfo?: IHostSecurity;
+  isConfirmationRequired?: boolean;
+  showContinueOperateLocal?: boolean;
path: packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Good structure for new interface properties**

The comment "temporary props" suggests these might be refactored later. Consider planning for that transition.


Add more specific documentation for each prop to clarify their purpose and expected values.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-05T15:44:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,21 +12,75 @@ import {
   isPrimaryTypeOrderSign,
   isPrimaryTypePermitSign,
 } from '@onekeyhq/shared/src/signMessage';
+import { EHostSecurityLevel } from '@onekeyhq/shared/types/discovery';
+import type { IHostSecurity } from '@onekeyhq/shared/types/discovery';
 import { EMessageTypesEth } from '@onekeyhq/shared/types/message';
 import type { ISignatureConfirmDisplay } from '@onekeyhq/shared/types/signatureConfirm';
 
 interface IProps {
   unsignedMessage: IUnsignedMessage;
   isRiskSignMethod: boolean;
   messageDisplay: ISignatureConfirmDisplay | undefined;
+
+  // temporary props
+  walletInternalSign?: boolean;
+  urlSecurityInfo?: IHostSecurity;
+  isConfirmationRequired?: boolean;
+  showContinueOperateLocal?: boolean;
 }
 
 function MessageConfirmAlert(props: IProps) {
-  const { messageDisplay, unsignedMessage, isRiskSignMethod } = props;
+  const {
+    messageDisplay,
+    unsignedMessage,
+    isRiskSignMethod,
+
+    // temporary props
+    walletInternalSign,
+    urlSecurityInfo,
+    isConfirmationRequired,
+    showContinueOperateLocal,
+  } = props;
+
   const intl = useIntl();
   const [devSettings] = useDevSettingsPersistAtom();
   const isStrictSignatureAlert = devSettings.settings?.strictSignatureAlert;
 
+  const showTakeRiskAlert = useMemo(() => {
+    if (!isStrictSignatureAlert) {
+      return false;
+    }
+
+    if (walletInternalSign) {
+      return false;
+    }
+
+    if (urlSecurityInfo?.level === EHostSecurityLevel.Security) {
+      return false;
+    }
+
+    if (isConfirmationRequired) {
+      return true;
+    }
+
+    if (!isEmpty(messageDisplay?.alerts)) {
+      return true;
+    }
+
+    if (showContinueOperateLocal) {
+      return true;
+    }
+
+    return false;
+  }, [
+    isStrictSignatureAlert,
+    messageDisplay?.alerts,
+    showContinueOperateLocal,
+    urlSecurityInfo?.level,
+    walletInternalSign,
+    isConfirmationRequired,
+  ]);
path: packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Well-structured alert display logic**

The new `showTakeRiskAlert` calculation centralizes the alert display logic in one place, making it easier to maintain.


Add a brief comment explaining the overall purpose of this complex conditional logic to help future developers understand the intent.

```diff
 const showTakeRiskAlert = useMemo(() => {
+  // Determine if we should show a critical alert based on security conditions
   if (!isStrictSignatureAlert) {
     return false;
   }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const showTakeRiskAlert = useMemo(() => {
    // Determine if we should show a critical alert based on security conditions
    if (!isStrictSignatureAlert) {
      return false;
    }

    if (walletInternalSign) {
      return false;
    }

    if (urlSecurityInfo?.level === EHostSecurityLevel.Security) {
      return false;
    }

    if (isConfirmationRequired) {
      return true;
    }

    if (!isEmpty(messageDisplay?.alerts)) {
      return true;
    }

    if (showContinueOperateLocal) {
      return true;
    }

    return false;
  }, [
    isStrictSignatureAlert,
    messageDisplay?.alerts,
    showContinueOperateLocal,
    urlSecurityInfo?.level,
    walletInternalSign,
    isConfirmationRequired,
  ]);
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-05T15:44:17Z
author_association: CONTRIBUTOR

PR comments:
user: login: codesandbox[bot]
created_at: 2025-04-05T15:39:24Z
body: #### Review or Edit in CodeSandbox

Open the branch in <a href="https://codesandbox.io/p/github/OneKeyHQ/app-monorepo/chore/risk-alert?mode=review&utm_source=gh_app">Web Editor</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=OneKeyHQ&repo=app-monorepo&branch=chore/risk-alert&utm_source=gh_app">VS Code</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=OneKeyHQ&repo=app-monorepo&branch=chore/risk-alert&insiders=true&utm_source=gh_app">Insiders</a><br>
Open <a href="https://codesandbox.io/p/devtool/preview/OneKeyHQ/app-monorepo/chore/risk-alert?task=preview&port=51423&redirect=true&utm_source=gh_app">Preview</a>

<!-- open-in-codesandbox:complete -->

author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-05T15:39:28Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

The changes enhance the signature confirmation alert components. The `MessageConfirmAlert` component now accepts four new optional properties and computes a memoized value to determine alert rendering. The `MessageConfirm` component passes these new props, improving conditional rendering logic. Additionally, a new alert type 'danger' is introduced, expanding the alert functionality across components.

## Changes

| File                                          | Summary                                                                                                                                                                 |
|-----------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| packages/kit/.../MessageConfirmAlert.tsx      | Updated the `IProps` interface to include new properties: `walletInternalSign`, `urlSecurityInfo`, `isConfirmationRequired`, and `showContinueOperateLocal`. Added a memoized value (`showTakeRiskAlert`) to control alert rendering and updated render functions accordingly. |
| packages/kit/.../MessageConfirm.tsx           | Passed the new alert-related properties to the `MessageConfirmAlert` component. Updated dependency lists in callbacks to trigger re-renders based on the new props.    |
| packages/components/.../Alert/index.tsx       | Introduced a new alert type 'danger' to `IAlertType`. Updated `AlertFrame` for 'danger' styling, modified `AlertIcon` color mapping, and adjusted rendering logic for title and description based on alert type. |
| packages/kit/.../Gallery/Components/stories/Alert.tsx | Added a new `Alert` component of type 'danger' in the `AlertGallery`, showcasing its properties alongside existing alert types. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
  participant MC as MessageConfirm
  participant MA as MessageConfirmAlert
  participant UM as useMemo

  MC->>MA: Pass new props (walletInternalSign, urlSecurityInfo, isConfirmationRequired, showContinueOperateLocal)
  MA->>UM: Compute showTakeRiskAlert based on props and conditions
  UM-->>MA: Return computed showTakeRiskAlert value
  alt showTakeRiskAlert is true
    MA->>MA: Render risk alert conditions via renderLocalParsedMessageAlert and renderMessageAlerts
  else
    MA->>MA: Render standard alert display
  end
```

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro (Legacy)**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 55b84f149ddd1c123d9903b1c1e0806aebc28b30 and 0c870b15a8555d3b2bf5ff0f24bab1d01b2e94b9.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `packages/components/src/actions/Alert/index.tsx` (6 hunks)
* `packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx` (1 hunks)
* `packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx` (6 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (2)</summary>

<details>
<summary>packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx (1)</summary><blockquote>

<details>
<summary>packages/components/src/actions/Alert/index.tsx (1)</summary>

* `Alert` (124-212)

</details>

</blockquote></details>
<details>
<summary>packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx (2)</summary><blockquote>

<details>
<summary>packages/shared/types/signatureConfirm.ts (1)</summary>

* `ISignatureConfirmDisplay` (170-178)

</details>
<details>
<summary>packages/components/src/actions/Alert/index.tsx (1)</summary>

* `IAlertProps` (47-57)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: lint (20.x)
* GitHub Check: unittest (20.x)
* GitHub Check: Analyze (javascript-typescript)

</details>

<details>
<summary>🔇 Additional comments (15)</summary><blockquote>

<details>
<summary>packages/kit/src/views/Developer/pages/Gallery/Components/stories/Alert.tsx (1)</summary>

`41-46`: **Good addition of a "danger" alert example**

The new danger alert type expands the showcase of alert states in the gallery. This helps developers understand how this alert type appears in the UI.

</details>
<details>
<summary>packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAlert/MessageConfirmAlert.tsx (7)</summary>

`15-17`: **Good imports for security types**

Clean addition of the required types for the security features.

---

`33-43`: **Clean props destructuring**

Good organization separating the temporary props with a comment for clarity.

---

`93-93`: **Good conditional alert type selection**

Using the memoized value to determine alert type improves consistency.

---

`97-97`: **Good conditional alert type selection for permits and orders**

Consistent use of the memoized value for special message types.

---

`134-134`: **Proper dependency update**

Good addition of `showTakeRiskAlert` to the dependency array ensures component updates when alert conditions change.

---

`149-149`: **Good conditional alert type for message alerts**

Consistent application of the danger type based on risk assessment.

---

`158-158`: **Proper dependency update**

Good addition of `showTakeRiskAlert` to the dependency array ensures correct re-rendering.

</details>
<details>
<summary>packages/components/src/actions/Alert/index.tsx (7)</summary>

`5-5`: **Good import addition**

Added `useThemeName` for theme-aware styling of the new alert type.

---

`27-28`: **Good type expansion**

Clean addition of 'danger' to the alert types union.

---

`85-88`: **Good styling for danger variant**

The new danger variant uses appropriate critical background and border colors for high visibility.

---

`116-116`: **Good icon color mapping**

Appropriate reuse of critical icon color for the danger alert type.

---

`145-148`: **Good theme-aware text color implementation**

Using theme detection to pick the appropriate text color ensures readability in both light and dark modes.

---

`162-169`: **Good conditional text styling for title**

Proper application of the theme-aware text color for the title in danger alerts.

---

`171-174`: **Good conditional text styling for description**

Consistent application of theme-aware text color for the description in danger alerts.

</details>

</blockquote></details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=OneKeyHQ/app-monorepo&utm_content=7043):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai plan` to trigger planning for file edits and PR creation.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` or `Summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR