Close realm on map click (#864)

Resolves #859 

## What has been done
User can now close the realm panel by clicking on the map / outside of
panel

## Testing
- [x] Open and close panel by clicking on "Close button"
- [x] Open and close panel by clicking on map
- [x] Open and close panel by clicking above it
- [x] Open and close panel by clicking below it
- [x] Clicking on panel itself does not trigger realm panel close

src/shared/components/Dialogs/Panel.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, CSSProperties } from "react"
 import classNames from "classnames"
 import { animated } from "@react-spring/web"
-import { useRealmPanelTransition } from "shared/hooks"
+import { usePanelRealmClose, useRealmPanelTransition } from "shared/hooks"
 import Portal from "../Interface/Portal"
 
 type PortalSectionProps = {
@@ -36,12 +36,17 @@ function Container({
   style,
 }: PanelContainerProps) {
   const containerTransitionStyles = useRealmPanelTransition(position)
+  const closePanel = usePanelRealmClose()
 
   return (
     <Portal>
       <animated.div
         style={{ ...style, ...containerTransitionStyles }}
         className="no_scrollbar"
+        onClick={(e) => {
+          if (e.target !== e.currentTarget) return
+          closePanel()
+        }}
       >
         <div
           className={classNames("panel column", {

src/shared/hooks/realm.ts

@@ -1,6 +1,12 @@
 import { easings, useSpring } from "@react-spring/web"
-import { useMemo } from "react"
-import { selectRealmPanelVisible, useDappSelector } from "redux-state"
+import { useCallback, useMemo } from "react"
+import {
+  selectRealmPanelVisible,
+  setDisplayedRealmId,
+  setRealmPanelVisible,
+  useDappDispatch,
+  useDappSelector,
+} from "redux-state"
 import { REALM_PANEL_ANIMATION_TIME } from "shared/constants"
 import { useTabletScreen } from "./helpers"
 
@@ -71,3 +77,20 @@ export function useRealmCloseButtonTransition() {
 
   return buttonTransition
 }
+
+export function usePanelRealmClose() {
+  const dispatch = useDappDispatch()
+
+  const handlePanelClose = useCallback(() => {
+    dispatch(setRealmPanelVisible(false))
+
+    const timeout = setTimeout(
+      () => dispatch(setDisplayedRealmId(null)),
+      REALM_PANEL_ANIMATION_TIME
+    )
+
+    return () => clearTimeout(timeout)
+  }, [dispatch])
+
+  return handlePanelClose
+}

src/ui/Island/RealmPanel/RealmPanelCloseButton.tsx

@@ -3,6 +3,7 @@ import closeIcon from "shared/assets/icons/s/close-black.svg"
 import { animated } from "@react-spring/web"
 import { useRealmCloseButtonTransition } from "shared/hooks"
 import Button from "../../../shared/components/Interface/Button"
+import Portal from "shared/components/Interface/Portal"
 
 export default function RealmPanelCloseButton({
   onClose,
@@ -12,16 +13,18 @@ export default function RealmPanelCloseButton({
   const buttonTransition = useRealmCloseButtonTransition()
 
   return (
-    <animated.div style={{ ...buttonTransition, position: "absolute" }}>
-      <Button
-        size="medium"
-        type="close"
-        iconSrc={closeIcon}
-        iconPosition="left"
-        onClick={onClose}
-      >
-        Close view
-      </Button>
-    </animated.div>
+    <Portal>
+      <animated.div style={{ ...buttonTransition, position: "absolute" }}>
+        <Button
+          size="medium"
+          type="close"
+          iconSrc={closeIcon}
+          iconPosition="left"
+          onClick={onClose}
+        >
+          Close view
+        </Button>
+      </animated.div>
+    </Portal>
   )
 }

src/ui/Island/RealmPanel/index.tsx

@@ -2,9 +2,12 @@ import React, { useEffect } from "react"
 import {
   useAssistant,
   useLocalStorageChange,
+  usePanelRealmClose,
   useTabletScreen,
 } from "shared/hooks"
 import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
+import { selectRealmPanelVisible, useDappSelector } from "redux-state"
+import ClickableModalOverlay from "shared/components/Dialogs/ClickableModalOverlay"
 import RealmDetailsPanel from "./RealmDetailsPanel"
 import RealmLeaderboardPanel from "./RealmLeaderboardPanel"
 import RealmPanelCountdown from "./RealmPanelCountdown"
@@ -18,6 +21,9 @@ export default function RealmPanel({ onClose }: { onClose: () => void }) {
     LOCAL_STORAGE_VISITED_REALM
   )
 
+  const realmPanelVisible = useDappSelector(selectRealmPanelVisible)
+  const handlePanelClose = usePanelRealmClose()
+
   useEffect(() => {
     if (value) return
     updateStorage(true)
@@ -37,6 +43,7 @@ export default function RealmPanel({ onClose }: { onClose: () => void }) {
         </Panel.Container>
       )}
       <RealmPanelCountdown />
+      {realmPanelVisible && <ClickableModalOverlay close={handlePanelClose} />}
     </>
   )
 }

src/ui/Island/index.tsx

@@ -1,10 +1,11 @@
-import React, { memo, useCallback, useEffect } from "react"
+import React, { memo, useEffect } from "react"
 import backgroundImg from "public/dapp_island_bg.webp"
 import {
   useValueRef,
   IslandContext,
   useAssistant,
   useAssets,
+  usePanelRealmClose,
 } from "shared/hooks"
 import {
   selectDisplayedRealmId,
@@ -17,7 +18,6 @@ import {
 import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import { usePostHog } from "posthog-js/react"
 import RealmPanel from "ui/Island/RealmPanel"
-import { REALM_PANEL_ANIMATION_TIME } from "shared/constants"
 import InteractiveIsland from "./Background/InteractiveIsland"
 import IslandPresence from "./Reflect/IslandPresence"
 
@@ -52,16 +52,7 @@ function IslandWrapper() {
     },
   }))
 
-  const handleClose = useCallback(() => {
-    dispatch(setRealmPanelVisible(false))
-
-    const timeout = setTimeout(
-      () => dispatch(setDisplayedRealmId(null)),
-      REALM_PANEL_ANIMATION_TIME
-    )
-
-    return () => clearTimeout(timeout)
-  }, [dispatch])
+  const handlePanelClose = usePanelRealmClose()
 
   return (
     <>
@@ -80,7 +71,7 @@ function IslandWrapper() {
         <IslandContext.Provider value={contextRef}>
           <InteractiveIsland />
           {process.env.DISABLE_REFLECT === "true" ? null : <IslandPresence />}
-          <RealmPanel onClose={handleClose} />
+          <RealmPanel onClose={handlePanelClose} />
         </IslandContext.Provider>
       </div>
     </>