navigate back from token selection when clicking outside

web/src/app/stake/pool/create/select-prime-asset/page.tsx

@@ -20,6 +20,7 @@ import { Hash } from "viem";
 import { usdFormat } from "@/lib/usdFormat";
 import { graphql, useFragment } from "@/gql";
 import { useFeatureFlag } from "@/hooks/useFeatureFlag";
+import { useDetectClickOutside } from "react-detect-click-outside";
 
 const SelectPrimeAssetFragment = graphql(`
   fragment SelectPrimeAssetFragment on SeawaterPool {
@@ -43,6 +44,10 @@ const SelectPrimeAssetFragment = graphql(`
 const SelectPrimeAsset = () => {
   const router = useRouter();
 
+  const ref = useDetectClickOutside({
+    onTriggered: () => router.back(),
+  });
+
   const [boostedPools, setBoostedPools] = useState(false);
   const [myAssets, setMyAssets] = useState(false);
 
@@ -116,6 +121,7 @@ const SelectPrimeAsset = () => {
       <motion.div
         layoutId={"modal"}
         className="flex h-[514px] w-[318px] flex-col rounded-lg bg-black px-[12px] pb-[12px] pt-[9px] text-white md:h-[547px] md:w-[393px]"
+        ref={ref}
       >
         <div className={"flex flex-row items-center justify-between"}>
           <div className={"text-[10px]"}>Select Prime Asset</div>

web/src/app/swap/explore/page.tsx

@@ -23,6 +23,7 @@ import { useAccount } from "wagmi";
 import { config } from "@/config";
 import { getFormattedStringFromTokenAmount } from "@/lib/amounts";
 import { SwapExploreFragmentFragment } from "@/gql/graphql";
+import { useDetectClickOutside } from "react-detect-click-outside";
 
 const SwapExploreFragment = graphql(`
   fragment SwapExploreFragment on SeawaterPool {
@@ -45,6 +46,10 @@ const ExplorePage = () => {
 
   const searchParams = useSearchParams();
 
+  const ref = useDetectClickOutside({
+    onTriggered: () => router.back(),
+  });
+
   const token = searchParams.get("token") as "0" | "1";
 
   const { data, isLoading } = useGraphqlGlobal();
@@ -120,6 +125,7 @@ const ExplorePage = () => {
     <div className={"flex flex-col items-center overflow-y-auto"}>
       <motion.div
         layoutId={"modal"}
+        ref={ref}
         className={
           "h-[509px] w-[325px] rounded-lg bg-black p-[10px] text-white md:h-[559px] md:w-[393px]"
         }