dismiss deposit status

latticexyz · Apr 30, 2024 · 65df37f · 65df37f
1 parent 0a300ec
commit 65df37f
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 20 deletions.
diff --git a/packages/account-kit/src/steps/deposit/BridgeDepositStatus.tsx b/packages/account-kit/src/steps/deposit/BridgeDepositStatus.tsx
@@ -4,7 +4,7 @@ import { formatBalance } from "./formatBalance";
 import { useChains } from "wagmi";
 import { BridgeDeposit } from "./useDeposits";
 
-export type Props = BridgeDeposit;
+export type Props = BridgeDeposit & { onDismiss: () => void };
 
 export function BridgeDepositStatus({
   amount,
@@ -15,6 +15,7 @@ export function BridgeDepositStatus({
   receiptL2: receiptL2Promise,
   start,
   estimatedTime,
+  onDismiss,
 }: Props) {
   const chains = useChains();
   const chainL1 = chains.find((chain) => chain.id === chainL1Id)!;
@@ -37,6 +38,7 @@ export function BridgeDepositStatus({
         duration: estimatedTime,
         elapsed: Math.min(estimatedTime, Date.now() - start.getTime()),
       }}
+      onDismiss={onDismiss}
     >
       {(() => {
         const blockExplorerL1 = chainL1.blockExplorers?.default.url;

diff --git a/packages/account-kit/src/steps/deposit/ChainSelect.tsx b/packages/account-kit/src/steps/deposit/ChainSelect.tsx
@@ -1,7 +1,7 @@
 import { twMerge } from "tailwind-merge";
 import * as Select from "@radix-ui/react-select";
 import { useFrame } from "../../ui/FrameProvider";
-import { useAccount, useChains } from "wagmi";
+import { useAccount } from "wagmi";
 import { useTheme } from "../../useTheme";
 import { ChevronUpIcon } from "../../icons/ChevronUpIcon";
 import { ChevronDownIcon } from "../../icons/ChevronDownIcon";
@@ -18,7 +18,6 @@ export type Props = {
 export function ChainSelect({ value, onChange }: Props) {
   const theme = useTheme();
   const { frame } = useFrame();
-  const chains = useChains();
   const userAccount = useAccount();
 
   const sourceChains = useSourceChains();
@@ -30,7 +29,7 @@ export function ChainSelect({ value, onChange }: Props) {
       onValueChange={(value) => {
         // TODO: figure out why onValueChange triggers twice, once with value and once without
         if (value) {
-          const chain = chains.find((chain) => chain.id.toString() === value);
+          const chain = sourceChains.find((chain) => chain.id.toString() === value);
           if (!chain) throw new Error(`Unknown chain selected: ${value}`);
           onChange(chain.id);
         }
@@ -59,7 +58,7 @@ export function ChainSelect({ value, onChange }: Props) {
 
       {frame.contentDocument ? (
         <Select.Portal container={frame.contentDocument.body}>
-          <Select.Content position="popper" className="w-80 mt-1">
+          <Select.Content position="popper" className="w-80 mt-1 animate-in fade-in slide-in-from-top-2">
             <Select.Viewport>
               <Select.Group
                 className={twMerge(

diff --git a/packages/account-kit/src/steps/deposit/DepositContent.tsx b/packages/account-kit/src/steps/deposit/DepositContent.tsx
@@ -29,7 +29,7 @@ export function DepositContent() {
     ? selectedDepositMethod
     : sourceChain.depositMethods[0];
 
-  const { deposits } = useDeposits();
+  const { deposits, removeDeposit } = useDeposits();
 
   return (
     <>
@@ -57,9 +57,17 @@ export function DepositContent() {
               {deposits.map((deposit) => {
                 switch (deposit.type) {
                   case "bridge":
-                    return <BridgeDepositStatus key={deposit.uid} {...deposit} />;
+                    return (
+                      <BridgeDepositStatus
+                        key={deposit.uid}
+                        {...deposit}
+                        onDismiss={() => removeDeposit(deposit.uid)}
+                      />
+                    );
                   case "relay":
-                    return <RelayDepositStatus key={deposit.uid} {...deposit} />;
+                    return (
+                      <RelayDepositStatus key={deposit.uid} {...deposit} onDismiss={() => removeDeposit(deposit.uid)} />
+                    );
                   default:
                     // TODO: wtf TS y u no narrow
                     assertExhaustive(deposit.type);

diff --git a/packages/account-kit/src/steps/deposit/DepositStatus.tsx b/packages/account-kit/src/steps/deposit/DepositStatus.tsx
@@ -3,33 +3,53 @@ import { ReactNode, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { CheckIcon } from "../../icons/CheckIcon";
 import { WarningIcon } from "../../icons/WarningIcon";
+import { CloseIcon } from "../../icons/CloseIcon";
 
 export type Props = {
   status: "pending" | "success" | "error";
   progress: {
     duration: number;
     elapsed: number;
   };
+  onDismiss: () => void;
   children: ReactNode;
 };
 
-export function DepositStatus({ status, progress, children }: Props) {
+export function DepositStatus({ status, progress, children, onDismiss }: Props) {
   const [appear, setAppear] = useState(false);
   useEffect(() => {
     setAppear(true);
   }, []);
 
   return (
-    <div className="bg-white dark:bg-neutral-900 flex flex-col">
+    <div className="group bg-white dark:bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out">
       <div className="p-2 text-sm flex items-center gap-2">
         <div className="flex-grow">{children}</div>
-        {status === "success" ? (
-          <CheckIcon className="flex-shrink-0 text-green-600" />
-        ) : status === "error" ? (
-          <WarningIcon className="flex-shrink-0 text-amber-500" />
-        ) : (
-          <PendingIcon className="flex-shrink-0 text-neutral-400 dark:text-neutral-500 transition" />
-        )}
+        <div className="flex-shrink-0 grid">
+          <span className="col-start-1 row-start-1 transition opacity-100 group-hover:opacity-0 group-hover:pointer-events-none">
+            {status === "success" ? (
+              <CheckIcon className="text-green-600" />
+            ) : status === "error" ? (
+              <WarningIcon className="text-amber-500" />
+            ) : (
+              <PendingIcon className="text-neutral-400 dark:text-neutral-500 transition" />
+            )}
+          </span>
+          <button
+            type="button"
+            className={twMerge(
+              "col-start-1 row-start-1 flex items-center justify-center transition",
+              "opacity-0 pointer-events-none",
+              "group-hover:opacity-100 group-hover:pointer-events-auto",
+              "text-neutral-400 hover:text-black",
+              "dark:text-neutral-500 hover:text-white",
+            )}
+            title="Dismiss"
+            onClick={onDismiss}
+          >
+            <CloseIcon />
+          </button>
+        </div>
       </div>
 
       <div className="w-full h-[2px] -mt-full overflow-clip">

diff --git a/packages/account-kit/src/steps/deposit/RelayDepositStatus.tsx b/packages/account-kit/src/steps/deposit/RelayDepositStatus.tsx
@@ -4,9 +4,17 @@ import { formatBalance } from "./formatBalance";
 import { useChains } from "wagmi";
 import { RelayDeposit } from "./useDeposits";
 
-export type Props = RelayDeposit;
+export type Props = RelayDeposit & { onDismiss: () => void };
 
-export function RelayDepositStatus({ amount, chainL1Id, chainL2Id, start, estimatedTime, depositPromise }: Props) {
+export function RelayDepositStatus({
+  amount,
+  chainL1Id,
+  chainL2Id,
+  start,
+  estimatedTime,
+  depositPromise,
+  onDismiss,
+}: Props) {
   const chains = useChains();
   const chainL1 = chains.find((chain) => chain.id === chainL1Id)!;
   const chainL2 = chains.find((chain) => chain.id === chainL2Id)!;
@@ -23,6 +31,7 @@ export function RelayDepositStatus({ amount, chainL1Id, chainL2Id, start, estima
         duration: estimatedTime,
         elapsed: Math.min(estimatedTime, Date.now() - start.getTime()),
       }}
+      onDismiss={onDismiss}
     >
       {(() => {
         // const blockExplorerL1 = chainL1.blockExplorers?.default.url;

diff --git a/packages/account-kit/src/steps/deposit/useDeposits.ts b/packages/account-kit/src/steps/deposit/useDeposits.ts
@@ -67,11 +67,18 @@ export function useDeposits() {
     }));
   }, []);
 
+  const removeDeposit = useCallback((uid: string) => {
+    store.setState((state) => ({
+      deposits: state.deposits.filter((deposit) => deposit.uid !== uid),
+    }));
+  }, []);
+
   return useMemo(
     () => ({
       deposits,
       addDeposit,
+      removeDeposit,
     }),
-    [addDeposit, deposits],
+    [addDeposit, deposits, removeDeposit],
   );
 }