fix: APP-331 close PostFlow modal on sign tx success (#2465)

regen-network · Sep 10, 2024 · 065adcc · 065adcc
1 parent c025948
commit 065adcc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/web-marketplace/src/components/organisms/PostFlow/PostFlow.tsx b/web-marketplace/src/components/organisms/PostFlow/PostFlow.tsx
@@ -137,6 +137,7 @@ export const PostFlow = ({
     projectId,
     offChainProjectId,
     projectName,
+    onModalClose,
   });
 
   useEffect(() => {
@@ -188,6 +189,7 @@ export const PostFlow = ({
     projectId,
     offChainProjectId,
     projectName,
+    onModalClose,
   });
 
   return (

diff --git a/web-marketplace/src/components/organisms/PostFlow/hooks/useFetchMsgAnchor.ts b/web-marketplace/src/components/organisms/PostFlow/hooks/useFetchMsgAnchor.ts
@@ -32,13 +32,15 @@ export type UseFetchMsgAnchorParams = {
   projectName?: string;
   projectSlug?: string | null;
   offChainProjectId?: string;
+  onModalClose: () => void;
 };
 
 export const useFetchMsgAnchor = ({
   projectSlug,
   projectId,
   offChainProjectId,
   projectName,
+  onModalClose,
 }: UseFetchMsgAnchorParams) => {
   const { txClient } = useLedger();
   const { _ } = useLingui();
@@ -97,11 +99,13 @@ export const useFetchMsgAnchor = ({
         atom.buttonTitle = _(VIEW_POST);
         atom.buttonLink = buttonLink;
       });
+      onModalClose();
     },
     [
       _,
       getSuccessModalContent,
       offChainProjectId,
+      onModalClose,
       projectId,
       projectName,
       projectSlug,

diff --git a/web-marketplace/src/components/organisms/PostFlow/hooks/useSign.ts b/web-marketplace/src/components/organisms/PostFlow/hooks/useSign.ts
@@ -45,6 +45,7 @@ export const useSign = ({
   projectId,
   offChainProjectId,
   projectName,
+  onModalClose,
 }: UseSignParams) => {
   const { _ } = useLingui();
   const getSuccessModalContent = useGetSuccessModalContent();
@@ -110,6 +111,7 @@ export const useSign = ({
               atom.buttonLink = buttonLink;
               atom.txHash = undefined;
             });
+            onModalClose();
           },
           onSuccess: async (deliverTxResponse?: DeliverTxResponse) => {
             const { data: anchorTxsData } = await refetch();
@@ -147,6 +149,7 @@ export const useSign = ({
               atom.buttonLink = buttonLink;
               atom.txHash = undefined;
             });
+            onModalClose();
           },
         },
       );
@@ -155,6 +158,7 @@ export const useSign = ({
       _,
       getSuccessModalContent,
       offChainProjectId,
+      onModalClose,
       projectId,
       projectName,
       projectSlug,

diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.TxSuccessfulModal.tsx b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.TxSuccessfulModal.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useAtom } from 'jotai';
 
 import { TxSuccessfulModal } from 'web-components/src/components/modal/TxSuccessfulModal';
@@ -8,15 +10,23 @@ import { getHashUrl } from 'lib/block-explorer';
 import { Link } from 'components/atoms';
 
 export const RegistryLayoutTxSuccessfulModal = (): JSX.Element => {
+  const location = useLocation();
+
   const [
     { cardItems, title, cardTitle, open, txHash, buttonTitle, buttonLink },
     setTxSuccessfulModalAtom,
   ] = useAtom(txSuccessfulModalAtom);
-  const onClose = (): void =>
-    setTxSuccessfulModalAtom(atom => void (atom.open = false));
+  const onClose = useCallback(
+    (): void => setTxSuccessfulModalAtom(atom => void (atom.open = false)),
+    [setTxSuccessfulModalAtom],
+  );
 
   const txHashUrl = getHashUrl(txHash);
 
+  useEffect(() => {
+    onClose();
+  }, [location, onClose]);
+
   return (
     <TxSuccessfulModal
       open={!!open}