Replace Error component with ErrorAlert (#367)

* Set text color to background * Replace all old Error component with ErrorAlert
cartridge-gg · Jun 14, 2024 · d1f5250 · d1f5250
1 parent c2c4c39
commit d1f5250
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 70 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -72,6 +72,7 @@ export function Footer({
       as={motion.div}
       layout="position"
       animate={{ height, transition: { bounce: 0 } }}
+      overflow="hidden"
       ref={ref}
     >
       <VStack