[Issue 3062] [fix] Extension - Unable to back screen in case open General settings to Marketing campaign #9

Author: Thiendekaco

packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx

@@ -33,8 +33,8 @@ const subHeaderRightButton = <Icon
 />;
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
-  const location = useLocation();
-  const { collectionInfo, nftList } = location.state as INftCollectionDetail;
+  const state = useLocation().state as INftCollectionDetail;
+  const { collectionInfo, nftList } = state;
 
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -67,8 +67,8 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, []);
 
   const handleOnClickNft = useCallback((state: INftItemDetail) => {
-    navigate('/home/nfts/item-detail', { state });
-  }, [navigate]);
+    navigate('/home/nfts/item-detail', { state: { ...state, nftList } });
+  }, [navigate, nftList]);
 
   const renderNft = useCallback((nftItem: NftItem) => {
     const routingParams = { collectionInfo, nftItem } as INftItemDetail;

packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx

@@ -38,10 +38,11 @@ const modalCloseButton = <Icon
   type='phosphor'
   weight={'light'}
 />;
+const collectionNFTUrl = '/home/nfts/collection-detail';
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
-  const location = useLocation();
-  const { collectionInfo, nftItem } = location.state as INftItemDetail;
+  const state = useLocation().state as INftItemDetail;
+  const { collectionInfo, nftItem } = state;
 
   const { t } = useTranslation();
   const notify = useNotification();
@@ -183,6 +184,10 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     }
   }, [nftItem.externalUrl]);
 
+  const goBackToNFTCollection = useCallback(() => {
+    goBack(collectionNFTUrl, state);
+  }, [goBack, state]);
+
   const show3DModel = SHOW_3D_MODELS_CHAIN.includes(nftItem.chain);
 
   return (
@@ -191,7 +196,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['nft', 'accountState', 'chainStore'])}
     >
       <Layout.Base
-        onBack={goBack}
+        onBack={goBackToNFTCollection}
         showBackButton={true}
         showSubHeader={true}
         subHeaderBackground={'transparent'}

packages/extension-koni-ui/src/Popup/Settings/Tokens/TokenDetail.tsx

@@ -179,14 +179,18 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       });
   }, [goBack, priceId, showNotification, t, tokenInfo]);
 
+  const goBackToSettingList = useCallback(() => {
+    goBack();
+  }, [goBack]);
+
   const leftFooterButtonProps = useCallback(() => {
     return _isCustomAsset(tokenInfo.slug)
       ? {
-        onClick: goBack,
+        onClick: goBackToSettingList,
         children: t('Cancel')
       }
       : undefined;
-  }, [goBack, tokenInfo.slug, t]);
+  }, [goBackToSettingList, tokenInfo.slug, t]);
 
   const rightFooterButtonProps = useCallback(() => {
     return _isCustomAsset(tokenInfo.slug)

packages/extension-koni-ui/src/hooks/router/useDefaultNavigate.tsx

@@ -21,8 +21,8 @@ export default function useDefaultNavigate () {
   );
 
   const goBack = useCallback(
-    () => {
-      navigate(RouteState.prevDifferentPathNum);
+    (urlToBack?: string, state?: unknown) => {
+      typeof urlToBack === 'string' ? navigate(urlToBack, { state }) : navigate(RouteState.prevDifferentPathNum);
     },
     [navigate]
   );