diff --git a/packages/keychain/src/components/DeploymentRequired.tsx b/packages/keychain/src/components/DeploymentRequired.tsx
index c8416c54c..57f2c1ec9 100644
--- a/packages/keychain/src/components/DeploymentRequired.tsx
+++ b/packages/keychain/src/components/DeploymentRequired.tsx
@@ -2,10 +2,11 @@ import { constants } from "starknet";
import { Container, Footer, Content } from "components/layout";
import { useEffect, useState } from "react";
import { Status } from "utils/account";
-import { Loading } from "./Loading";
import { Button, Link, Text } from "@chakra-ui/react";
-import { ExternalIcon } from "@cartridge/ui";
+import { ExternalIcon, PacmanIcon } from "@cartridge/ui";
import { useController } from "hooks/controller";
+import { ErrorAlert } from "./ErrorAlert";
+import NextLink from "next/link"
export function DeploymentRequired({
onClose,
@@ -60,11 +61,11 @@ export function DeploymentRequired({
if (status !== Status.DEPLOYED) {
return (
}
title={"Deploying your account"}
description="This may take a second"
>
-
+
{status === Status.DEPLOYING && (
)}
-
- {error && (
- <>
-
- We encounter an account deployment error: {error.message}
-
- Please come by discord and report this issue.
- >
- )}
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
new file mode 100644
index 000000000..3b866599a
--- /dev/null
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -0,0 +1,49 @@
+import { AlertIcon } from "@cartridge/ui";
+import {
+ Text,
+ Accordion,
+ AccordionItem,
+ AccordionButton,
+ AccordionPanel,
+ AccordionIcon,
+ Spacer,
+ HStack,
+} from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { ReactElement } from "react";
+
+export function ErrorAlert({ title, description }: { title: string; description?: string | ReactElement }) {
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {description && }
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ );
+}