From 1d23e5cd9c72db9bad210cceffb9697ede919d86 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 31 Mar 2025 19:07:57 +0000
Subject: [PATCH] Dashboard: Fix AA page alert styles (#6596)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `SmartWalletsBillingAlert` component in the `Alerts.tsx` file. It updates the alert's UI and removes the dismissible functionality, while also changing the import paths for components used in the alert.

### Detailed summary
- Removed unused imports related to `Alert`, `AlertDescription`, `AlertIcon`, `AlertTitle`, `Flex`, and `IconButton`.
- Updated imports for `Alert`, `AlertDescription`, `AlertTitle`, `TrackedUnderlineLink`, and `CircleAlertIcon`.
- Removed the `dismissible` prop and related logic.
- Simplified the alert structure with a new layout.
- Changed the alert icon and styling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/settings/ApiKeys/Alerts.tsx    | 93 ++++---------------
 1 file changed, 17 insertions(+), 76 deletions(-)

diff --git a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
index 793f815044f..e71f635e033 100644
--- a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
+++ b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
@@ -1,81 +1,22 @@
-"use client";
-
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-  IconButton,
-} from "@chakra-ui/react";
-import { useLocalStorage } from "hooks/useLocalStorage";
-import { XIcon } from "lucide-react";
-import { Text, TrackedLink } from "tw-components";
-
-export const SmartWalletsBillingAlert = ({
-  dismissible = false,
-}: {
-  dismissible?: boolean;
-}) => {
-  const [dismissed, setDismissed] = useLocalStorage(
-    "dismissed-smart-wallets-billing-alert",
-    false,
-    true,
-  );
-
-  if (dismissible && dismissed) {
-    return true;
-  }
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
+import { CircleAlertIcon } from "lucide-react";
 
+export const SmartWalletsBillingAlert = () => {
   return (
-    <Alert
-      status="warning"
-      borderRadius="md"
-      as={Flex}
-      alignItems="start"
-      justifyContent="space-between"
-      mb={4}
-      variant="left-accent"
-      bg="backgroundCardHighlight"
-    >
-      <div className="flex flex-row">
-        <AlertIcon boxSize={4} mt={1} ml={1} />
-        <Flex flexDir="column" gap={1} pl={1}>
-          <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
-          <AlertDescription>
-            <Text as="span" pr={1}>
-              You&apos;ve enabled Account Abstraction for one of your API keys.
-              <br />
-              To enable AA on mainnet chains,
-            </Text>{" "}
-            <TrackedLink
-              href="/team/~/~/settings/billing"
-              category="api_keys"
-              label="smart_wallets_missing_billing"
-              fontWeight="medium"
-              color="blue.500"
-            >
-              <Text as="span" color="blue.500">
-                subscribe to a billing plan.
-              </Text>
-            </TrackedLink>
-          </AlertDescription>
-        </Flex>
-      </div>
-
-      {dismissible && (
-        <IconButton
-          size="xs"
-          aria-label="Close notice"
-          icon={<XIcon className="size-4" />}
-          colorScheme="blackAlpha"
-          color="white"
-          variant="ghost"
-          opacity={0.6}
-          _hover={{ opacity: 1 }}
-          onClick={() => setDismissed(true)}
-        />
-      )}
+    <Alert variant="warning">
+      <CircleAlertIcon className="size-5" />
+      <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
+      <AlertDescription>
+        To enable AA on mainnet chains,{" "}
+        <TrackedUnderlineLink
+          href="/team/~/~/settings/billing"
+          category="api_keys"
+          label="smart_wallets_missing_billing"
+        >
+          subscribe to a billing plan.
+        </TrackedUnderlineLink>
+      </AlertDescription>
     </Alert>
   );
 };