From d1f525046e2153832dc1ce551c65c426a75228c6 Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 14 Jun 2024 13:08:25 +0200
Subject: [PATCH] Replace Error component with ErrorAlert (#367)

* Set text color to background

* Replace all old Error component with ErrorAlert
---
 .../src/components/DeploymentRequired.tsx     |  4 +-
 packages/keychain/src/components/Error.tsx    | 50 -------------------
 .../keychain/src/components/ErrorAlert.tsx    | 11 ++--
 .../keychain/src/components/Execute/Fees.tsx  |  2 -
 .../keychain/src/components/Execute/index.tsx |  7 +++
 .../src/components/bridge/BridgeEth.tsx       |  9 +---
 .../keychain/src/components/connect/Login.tsx |  9 ++--
 .../src/components/layout/Footer/index.tsx    |  1 +
 8 files changed, 23 insertions(+), 70 deletions(-)
 delete mode 100644 packages/keychain/src/components/Error.tsx

diff --git a/packages/keychain/src/components/DeploymentRequired.tsx b/packages/keychain/src/components/DeploymentRequired.tsx
index c5f4cdbfe..4004ac385 100644
--- a/packages/keychain/src/components/DeploymentRequired.tsx
+++ b/packages/keychain/src/components/DeploymentRequired.tsx
@@ -88,7 +88,7 @@ export function DeploymentRequired({
             description={
               error ? (
                 <>
-                  <Text mb={4}>
+                  <Text mb={4} color="inherit">
                     Please come by{" "}
                     <Link
                       as={NextLink}
@@ -106,7 +106,7 @@ export function DeploymentRequired({
                     and report this issue.
                   </Text>
 
-                  <Text>{error.message}</Text>
+                  <Text color="text.secondary">{error.message}</Text>
                 </>
               ) : undefined
             }
diff --git a/packages/keychain/src/components/Error.tsx b/packages/keychain/src/components/Error.tsx
deleted file mode 100644
index 740065c5f..000000000
--- a/packages/keychain/src/components/Error.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Text,
-  VStack,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  AccordionIcon,
-  Spacer,
-} from "@chakra-ui/react";
-import { motion } from "framer-motion";
-
-export function Error({ error }: { error?: Error }) {
-  if (!error) return null;
-
-  return (
-    <Accordion
-      as={motion.div}
-      w="full"
-      initial={{ height: 0 }}
-      animate={{ height: "auto" }}
-      allowToggle
-      variant="error"
-      color="red.800"
-      fontSize="sm"
-    >
-      <AccordionItem position="relative">
-        <AccordionButton>
-          <Text fontSize="2xs" color="inherit">
-            Error Expected
-          </Text>
-
-          <Spacer />
-
-          <AccordionIcon boxSize={5} />
-        </AccordionButton>
-
-        <AccordionPanel borderTop="1px solid" borderColor="translucent.soft">
-          <VStack align="flex-start">
-            <Text color="inherit" fontWeight="bold">
-              Error Details
-            </Text>
-
-            <Text color="inherit">{error.message}</Text>
-          </VStack>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
-  );
-}
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
index 8a9ec7746..5ab8c62dc 100644
--- a/packages/keychain/src/components/ErrorAlert.tsx
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -27,11 +27,11 @@ export function ErrorAlert({
       animate={{ height: "auto" }}
       allowToggle
       variant="error"
-      color="text.primary"
+      color="solid.bg"
       fontSize="sm"
     >
       <AccordionItem position="relative">
-        <AccordionButton disabled={!description}>
+        <AccordionButton disabled={!description} color="solid.bg">
           <HStack>
             <AlertIcon />
             <Text
@@ -46,12 +46,13 @@ export function ErrorAlert({
 
           <Spacer />
 
-          {description && <AccordionIcon boxSize={5} />}
+          {/* color does not seems to be applied */}
+          {description && <AccordionIcon boxSize={5} color="solid.bg" />}
         </AccordionButton>
 
         {description && (
-          <AccordionPanel borderTop="1px solid" borderColor="translucent.soft">
-            <Text color="inherit">{description}</Text>
+          <AccordionPanel maxH={200}>
+            <Text color="solid.bg">{description}</Text>
           </AccordionPanel>
         )}
       </AccordionItem>
diff --git a/packages/keychain/src/components/Execute/Fees.tsx b/packages/keychain/src/components/Execute/Fees.tsx
index 81f92c9bf..8f6be53c8 100644
--- a/packages/keychain/src/components/Execute/Fees.tsx
+++ b/packages/keychain/src/components/Execute/Fees.tsx
@@ -10,7 +10,6 @@ import {
 
 import { constants } from "starknet";
 import { formatUnits } from "viem";
-import { Error } from "components/Error";
 import { useChainId } from "hooks/connection";
 
 async function fetchEthPrice() {
@@ -80,7 +79,6 @@ export function Fees({
 
   return (
     <>
-      <Error error={error} />
       <VStack
         w="full"
         overflow="hidden"
diff --git a/packages/keychain/src/components/Execute/index.tsx b/packages/keychain/src/components/Execute/index.tsx
index a2d66ecb9..0c85113e6 100644
--- a/packages/keychain/src/components/Execute/index.tsx
+++ b/packages/keychain/src/components/Execute/index.tsx
@@ -16,6 +16,7 @@ import { Call } from "./Call";
 import { InsufficientFunds } from "./InsufficientFunds";
 import { useChainId, useOrigin } from "hooks/connection";
 import { useController } from "hooks/controller";
+import { ErrorAlert } from "components/ErrorAlert";
 
 export const CONTRACT_ETH =
   "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
@@ -176,6 +177,12 @@ export function Execute({
       </Content>
 
       <Footer>
+        {error && (
+          <ErrorAlert
+            title="Fee estimation failed"
+            description={error.message}
+          />
+        )}
         <Button
           colorScheme="colorful"
           onClick={onSubmit}
diff --git a/packages/keychain/src/components/bridge/BridgeEth.tsx b/packages/keychain/src/components/bridge/BridgeEth.tsx
index a11dc5d9b..1bf0ebbe3 100644
--- a/packages/keychain/src/components/bridge/BridgeEth.tsx
+++ b/packages/keychain/src/components/bridge/BridgeEth.tsx
@@ -26,7 +26,6 @@ import { TransferButton } from "./TransferButton";
 import { TxnTracker } from "./Transactions";
 import { Label } from "./Label";
 import Controller from "utils/controller";
-import { Error } from "components/Error";
 import {
   CheckIcon,
   EthereumDuoIcon,
@@ -35,6 +34,7 @@ import {
   WedgeDownIcon,
 } from "@cartridge/ui";
 import { Container, Content } from "components/layout";
+import { ErrorAlert } from "components/ErrorAlert";
 
 export function BridgeEth({
   chainId,
@@ -213,12 +213,7 @@ export function BridgeEth({
 
           <Flex w="full" gap={2.5} direction="column">
             {errorMessage && !debouncing && (
-              <Error
-                error={{
-                  name: "Wallet error",
-                  message: errorMessage,
-                }}
-              />
+              <ErrorAlert title="Wallet error" description={errorMessage} />
             )}
 
             <TransferButton
diff --git a/packages/keychain/src/components/connect/Login.tsx b/packages/keychain/src/components/connect/Login.tsx
index d9d2693aa..17f69d714 100644
--- a/packages/keychain/src/components/connect/Login.tsx
+++ b/packages/keychain/src/components/connect/Login.tsx
@@ -15,8 +15,8 @@ import { fetchAccount, validateUsernameFor } from "./utils";
 import { RegistrationLink } from "./RegistrationLink";
 import { useControllerTheme } from "hooks/theme";
 import { doLogin } from "hooks/account";
-import { Error as ErrorComp } from "components/Error";
 import { useConnection } from "hooks/connection";
+import { ErrorAlert } from "components/ErrorAlert";
 
 export function Login({
   prefilledName = "",
@@ -30,7 +30,7 @@ export function Login({
   const theme = useControllerTheme();
   const [isLoading, setIsLoading] = useState(false);
   const [expiresAt] = useState<bigint>(3000000000n);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
 
   const onSubmit = useCallback(
     async (values: FormValues) => {
@@ -141,11 +141,12 @@ export function Login({
                   />
                 )}
               </FormikField>
-
-              <ErrorComp error={error} />
             </Content>
 
             <Footer isSlot={isSlot} createSession>
+              {error && (
+                <ErrorAlert title="Login failed" description={error.message} />
+              )}
               <Button
                 type="submit"
                 colorScheme="colorful"
diff --git a/packages/keychain/src/components/layout/Footer/index.tsx b/packages/keychain/src/components/layout/Footer/index.tsx
index 3f963ad84..0925beb8b 100644
--- a/packages/keychain/src/components/layout/Footer/index.tsx
+++ b/packages/keychain/src/components/layout/Footer/index.tsx
@@ -72,6 +72,7 @@ export function Footer({
       as={motion.div}
       layout="position"
       animate={{ height, transition: { bounce: 0 } }}
+      overflow="hidden"
       ref={ref}
     >
       <VStack