added gas notification + withdraw error

ArkProjectNFTs · Apr 9, 2024 · 4feb2dd · 4feb2dd
1 parent 76e2ac6
commit 4feb2dd
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx
@@ -1,5 +1,11 @@
 import clsx from "clsx";
-import { Button, GasIcon, Notification, Typography } from "design-system";
+import {
+  Button,
+  ClockIcon,
+  GasIcon,
+  Notification,
+  Typography,
+} from "design-system";
 
 import useEthereumCollectionApproval from "../_hooks/useEthereumCollectionApproval";
 import useEthereumNftDeposit from "../_hooks/useEthereumNftDeposit";
@@ -103,13 +109,23 @@ function TransferNfts() {
   return (
     <>
       {totalSelectedNfts > 0 && (
-        <Notification
-          className="mt-8"
-          icon={<GasIcon />}
-          variant="mantis_green"
-        >
-          ArkProject will refund gas costs in Stark!
-        </Notification>
+        <>
+          <Notification
+            className="mt-8"
+            icon={<ClockIcon />}
+            variant="space_blue"
+          >
+            <b>Important note: </b>You will have to wait about 4 hours before
+            you can claim your assets on ethereum.
+          </Notification>
+          <Notification
+            className="mt-4"
+            icon={<GasIcon />}
+            variant="mantis_green"
+          >
+            ArkProject will refund gas costs in Stark!
+          </Notification>
+        </>
       )}
       <Button
         className={clsx(
@@ -142,6 +158,8 @@ export default function TransferEthereumNftsAction() {
   const { totalSelectedNfts } = useNftSelection();
   const { isApprovedForAll } = useEthereumCollectionApproval();
 
+  return <TransferNfts />;
+
   return isApprovedForAll || totalSelectedNfts === 0 ? (
     <TransferNfts />
   ) : (

diff --git a/apps/web/src/app/(routes)/lounge/_hooks/useL1Withdraw.ts b/apps/web/src/app/(routes)/lounge/_hooks/useL1Withdraw.ts
@@ -12,10 +12,16 @@ export default function useL1Withdraw({ onSuccess }: UseL1WithdrawProps) {
     writeContract: writeContractWithdraw,
   } = useWriteContract({ mutation: { onSuccess } });
 
-  const { isLoading: isWithdrawLoading, isSuccess: isWithdrawSuccess } =
-    useWaitForTransactionReceipt({
-      hash: withdrawHash,
-    });
+  const {
+    error,
+    isError,
+    isLoading: isWithdrawLoading,
+    isSuccess: isWithdrawSuccess,
+  } = useWaitForTransactionReceipt({
+    hash: withdrawHash,
+  });
+  console.log(error);
+  console.log(isError);
 
   function withdraw(requestContent: Array<string>) {
     writeContractWithdraw({

diff --git a/packages/design-system/src/components/Notification.tsx b/packages/design-system/src/components/Notification.tsx
@@ -6,6 +6,8 @@ const variants = {
     "bg-mantis-green-100 dark:bg-mantis-green-300 dark:text-mantis-green-900 text-mantis-green-800",
   playground_purple:
     "bg-playground-purple-100 text-playground-purple-800 dark:bg-playground-purple-300 dark:text-playground-purple-900",
+  space_blue:
+    "bg-space-blue-100 text-space-blue-800 dark:bg-space-blue-300 dark:text-space-blue-900",
 };
 
 interface NotificationsProps {
@@ -26,10 +28,10 @@ export function Notification({
       className={clsx(
         className,
         variants[variant],
-        "p-3 rounded-xl gap-2.5 flex items-center",
+        "p-3 rounded-xl gap-2.5 flex items-start",
       )}
     >
-      {icon}
+      <span className="flex-shrink-0">{icon}</span>
       <Typography variant="body_text_14" component="p">
         {children}
       </Typography>

diff --git a/packages/design-system/src/icons/ArrowIcon.tsx b/packages/design-system/src/icons/ArrowIcon.tsx
@@ -9,7 +9,6 @@ export function ArrowIcon({ className }: ArrowIconProps) {
       height="24"
       viewBox="0 0 24 24"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
       <path

diff --git a/packages/design-system/src/index.tsx b/packages/design-system/src/index.tsx
@@ -32,3 +32,4 @@ export { GitHubIcon } from "./icons/GitHubIcon";
 export { PlusIcon } from "./icons/PlusIcon";
 export { MinusIcon } from "./icons/MinusIcon";
 export { GasIcon } from "./icons/GasIcon";
+export { ClockIcon } from "./icons/ClockIcon";