From 411071cd8c706411779b1bfb2dae3712f43e7792 Mon Sep 17 00:00:00 2001
From: eli-d <64763513+eli-d@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:32:25 +0930
Subject: [PATCH] navigate back from token selection when clicking outside

---
 web/src/app/stake/pool/create/select-prime-asset/page.tsx | 6 ++++++
 web/src/app/swap/explore/page.tsx                         | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/web/src/app/stake/pool/create/select-prime-asset/page.tsx b/web/src/app/stake/pool/create/select-prime-asset/page.tsx
index cf9eb29f..77563aea 100644
--- a/web/src/app/stake/pool/create/select-prime-asset/page.tsx
+++ b/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>
diff --git a/web/src/app/swap/explore/page.tsx b/web/src/app/swap/explore/page.tsx
index 78999150..11eac9b7 100644
--- a/web/src/app/swap/explore/page.tsx
+++ b/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]"
         }