diff --git a/packages/account-kit/src/steps/deposit/BridgeDepositStatus.tsx b/packages/account-kit/src/steps/deposit/BridgeDepositStatus.tsx index de7f1c3008..436f3e01b1 100644 --- 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 index 2014f4a9dd..15bde2fb68 100644 --- 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 ? ( - + @@ -57,9 +57,17 @@ export function DepositContent() { {deposits.map((deposit) => { switch (deposit.type) { case "bridge": - return ; + return ( + removeDeposit(deposit.uid)} + /> + ); case "relay": - return ; + return ( + 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 index ccbb083b9f..cc343133f0 100644 --- a/packages/account-kit/src/steps/deposit/DepositStatus.tsx +++ b/packages/account-kit/src/steps/deposit/DepositStatus.tsx @@ -3,6 +3,7 @@ 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"; @@ -10,26 +11,45 @@ export type Props = { 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 ( -
+
{children}
- {status === "success" ? ( - - ) : status === "error" ? ( - - ) : ( - - )} +
+ + {status === "success" ? ( + + ) : status === "error" ? ( + + ) : ( + + )} + + +
diff --git a/packages/account-kit/src/steps/deposit/RelayDepositStatus.tsx b/packages/account-kit/src/steps/deposit/RelayDepositStatus.tsx index 1ce39fcbeb..a275bb2cf3 100644 --- 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 index 8f37c40ea5..a4527a7423 100644 --- 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], ); }