@@ -6,17 +6,18 @@ import { FundSwapButton } from './FundSwapButton';
6
6
import { FundSwapDropdown } from './FundSwapDropdown' ;
7
7
import { FundSwapInput } from './FundSwapInput' ;
8
8
import { FundSwapProvider , useFundSwapContext } from './FundSwapProvider' ;
9
- //
9
+ import { FundSwapMessage } from './FundSwapMessage' ;
10
+
10
11
export function FundSwapContent ( { className } : { className ?: string } ) {
11
12
const { isDropdownOpen, setIsDropdownOpen } = useFundSwapContext ( ) ;
12
- const walletContainerRef = useRef < HTMLDivElement > ( null ) ;
13
+ const fundSwapContainerRef = useRef < HTMLDivElement > ( null ) ;
13
14
14
15
// Handle clicking outside the wallet component to close the dropdown.
15
16
useEffect ( ( ) => {
16
17
const handleClickOutsideComponent = ( event : MouseEvent ) => {
17
18
if (
18
- walletContainerRef . current &&
19
- ! walletContainerRef . current . contains ( event . target as Node ) &&
19
+ fundSwapContainerRef . current &&
20
+ ! fundSwapContainerRef . current . contains ( event . target as Node ) &&
20
21
isDropdownOpen
21
22
) {
22
23
setIsDropdownOpen ( false ) ;
@@ -30,12 +31,15 @@ export function FundSwapContent({ className }: { className?: string }) {
30
31
31
32
return (
32
33
< 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 ) }
35
36
>
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 />
39
43
</ div >
40
44
) ;
41
45
}
0 commit comments