Skip to content

Commit 42e50d3

Browse files
add error message
1 parent 6237cf7 commit 42e50d3

File tree

2 files changed

+31
-9
lines changed

2 files changed

+31
-9
lines changed

src/swap/components/FundSwap.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@ import { FundSwapButton } from './FundSwapButton';
66
import { FundSwapDropdown } from './FundSwapDropdown';
77
import { FundSwapInput } from './FundSwapInput';
88
import { FundSwapProvider, useFundSwapContext } from './FundSwapProvider';
9-
//
9+
import { FundSwapMessage } from './FundSwapMessage';
10+
1011
export function FundSwapContent({ className }: { className?: string }) {
1112
const { isDropdownOpen, setIsDropdownOpen } = useFundSwapContext();
12-
const walletContainerRef = useRef<HTMLDivElement>(null);
13+
const fundSwapContainerRef = useRef<HTMLDivElement>(null);
1314

1415
// Handle clicking outside the wallet component to close the dropdown.
1516
useEffect(() => {
1617
const handleClickOutsideComponent = (event: MouseEvent) => {
1718
if (
18-
walletContainerRef.current &&
19-
!walletContainerRef.current.contains(event.target as Node) &&
19+
fundSwapContainerRef.current &&
20+
!fundSwapContainerRef.current.contains(event.target as Node) &&
2021
isDropdownOpen
2122
) {
2223
setIsDropdownOpen(false);
@@ -30,12 +31,15 @@ export function FundSwapContent({ className }: { className?: string }) {
3031

3132
return (
3233
<div
33-
ref={walletContainerRef}
34-
className={cn('relative flex items-center gap-4', className)}
34+
ref={fundSwapContainerRef}
35+
className={cn('relative flex flex-col gap-2', className)}
3536
>
36-
<FundSwapInput />
37-
<FundSwapButton />
38-
{isDropdownOpen && <FundSwapDropdown />}
37+
<div className={cn('flex items-center gap-4', className)}>
38+
<FundSwapInput />
39+
<FundSwapButton />
40+
{isDropdownOpen && <FundSwapDropdown />}
41+
</div>
42+
<FundSwapMessage />
3943
</div>
4044
);
4145
}
+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { cn, color } from '../../styles/theme';
2+
import { useFundSwapContext } from './FundSwapProvider';
3+
4+
export function FundSwapMessage() {
5+
const {
6+
lifecycleStatus: { statusName },
7+
} = useFundSwapContext();
8+
9+
if (statusName !== 'error') {
10+
return null;
11+
}
12+
13+
return (
14+
<div className={cn(color.error, 'text-sm')}>
15+
Something went wrong. Please try again.
16+
</div>
17+
);
18+
}

0 commit comments

Comments
 (0)