fix: include ordinal-detail and nft-detail screens in reset user flow…

… config
secretkeylabs · Jul 6, 2023 · a3bf8be · a3bf8be
1 parent c0fec13
commit a3bf8be
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts
@@ -7,8 +7,10 @@ const userFlowConfig: Record<string, { resetTo: string }> = {
   '/confirm-btc-tx': { resetTo: '/send-btc' },
   '/send-brc20': { resetTo: '/send-brc20' },
   '/confirm-inscription-request': { resetTo: '/send-brc20' },
+  '/ordinal-detail': { resetTo: '/nft-dashboard' },
   '/send-ordinal': { resetTo: '/nft-dashboard' },
   '/confirm-ordinal-tx': { resetTo: '/nft-dashboard' },
+  '/nft-detail': { resetTo: '/nft-dashboard' },
   '/send-nft': { resetTo: '/nft-dashboard' },
   '/confirm-nft-tx': { resetTo: '/nft-dashboard' },
 };

diff --git a/src/app/screens/nftDetail/index.tsx b/src/app/screens/nftDetail/index.tsx
@@ -26,6 +26,7 @@ import AccountHeaderComponent from '@components/accountHeader';
 import SmallActionButton from '@components/smallActionButton';
 import NftAttribute from './nftAttribute';
 import DescriptionTile from './descriptionTile';
+import {useResetUserFlow} from '@hooks/useResetUserFlow';
 
 const Container = styled.div`
 display: flex;
@@ -247,7 +248,7 @@ const LoaderContainer = styled.div({
 function NftDetailScreen() {
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' });
   const navigate = useNavigate();
-  const { stxAddress, selectedAccount } = useWalletSelector();
+  const { stxAddress, selectedAccount, shouldResetUserFlow } = useWalletSelector();
   const { id } = useParams();
   const nftIdDetails = id!.split('::');
   const { nftData } = useNftDataSelector();
@@ -272,6 +273,13 @@ function NftDetailScreen() {
   const [showShareNftOptions, setShowNftOptions] = useState<boolean>(false);
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
 
+  const resetUserFlow = useResetUserFlow();
+  useEffect(() => {
+    if (shouldResetUserFlow) {
+      resetUserFlow('/nft-detail');
+    }
+  }, [shouldResetUserFlow]);
+
   useEffect(() => {
     const data = nftData.find((nftItem) => Number(nftItem?.token_id) === Number(nftIdDetails[2].slice(1)));
     if (!data) {

diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
@@ -23,6 +23,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
+import { useResetUserFlow } from '@hooks/useResetUserFlow';
 import OrdinalAttributeComponent from './ordinalAttributeComponent';
 
 const Container = styled.div`
@@ -270,7 +271,7 @@ const DetailSection = styled.div<DetailSectionProps>((props) => ({
 function OrdinalDetailScreen() {
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' });
   const navigate = useNavigate();
-  const { ordinalsAddress, network, selectedAccount } = useWalletSelector();
+  const { ordinalsAddress, network, selectedAccount, shouldResetUserFlow } = useWalletSelector();
   const { selectedOrdinal } = useNftDataSelector();
   const { setSelectedOrdinalDetails } = useOrdinalDataReducer();
   const { isPending, pendingTxHash } = usePendingOrdinalTxs(selectedOrdinal?.tx_id);
@@ -286,6 +287,13 @@ function OrdinalDetailScreen() {
     [selectedOrdinal],
   );
 
+  const resetUserFlow = useResetUserFlow();
+  useEffect(() => {
+    if (shouldResetUserFlow) {
+      resetUserFlow('/ordinal-detail');
+    }
+  }, [shouldResetUserFlow]);
+
   useEffect(() => {
     if (selectedOrdinal) {
       if (

diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx
@@ -21,8 +21,6 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector';
 import useBtcClient from '@hooks/useBtcClient';
 import useTextOrdinalContent from '@hooks/useTextOrdinalContent';
 import { isLedgerAccount } from '@utils/helper';
-import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators';
-import { useDispatch } from 'react-redux';
 import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api';
 import { useResetUserFlow } from '@hooks/useResetUserFlow';
 
@@ -106,7 +104,6 @@ function SendOrdinal() {
   const { selectedOrdinal } = useNftDataSelector();
   const btcClient = useBtcClient();
   const location = useLocation();
-  const dispatch = useDispatch();
   const {
     network, ordinalsAddress, btcAddress, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow
   } = useWalletSelector();