[Issue-3843-webapp] refactor

Author: dungnguyen-art

packages/extension-web-ui/src/Popup/Home/Tokens/UpperBlock.tsx

@@ -8,8 +8,7 @@ import { ThemeProps } from '@subwallet/extension-web-ui/types';
 import { Button, Icon, Number, SwNumberProps, Tag, Tooltip } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { ArrowsClockwise, ArrowsLeftRight, CopySimple, Eye, EyeSlash, PaperPlaneTilt, PlusMinus } from 'phosphor-react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 type Props = ThemeProps & {
@@ -43,9 +42,6 @@ function Component (
   const { isShowBalance } = useSelector((state) => state.settings);
   const [reloading, setReloading] = useState(false);
   const { currencyData } = useSelector((state) => state.price);
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const openBuyTokens = searchParams.get('openBuyTokens') || '';
 
   const onChangeShowBalance = useCallback(() => {
     saveShowBalance(!isShowBalance).catch(console.error);
@@ -60,13 +56,6 @@ function Component (
       });
   }, []);
 
-  useEffect(() => {
-    if (openBuyTokens === 'true') {
-      searchParams.delete('openBuyTokens');
-      navigate('/buy-tokens', { replace: true });
-    }
-  }, [openBuyTokens, onOpenBuyTokens, searchParams, navigate, setSearchParams]);
-
   return (
     <div className={`tokens-upper-block ${className} ${isShrink ? '-shrink' : ''}`}>
       <div className='__total-balance-value-container'>

packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx

@@ -28,7 +28,7 @@ import { Coins, FadersHorizontal, SlidersHorizontal } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import { useNavigate, useOutletContext, useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { useLocalStorage } from 'usehooks-ts';
 
@@ -192,6 +192,9 @@ const Component = (): React.ReactElement => {
     }));
   }, [accountProxies]);
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const openBuyTokens = searchParams.get('openBuyTokens') || '';
+
   const onCloseAccountSelector = useCallback(() => {
     setIsShowTonWarning(false);
     inactiveModal(tonAccountSelectorModalId);
@@ -363,6 +366,13 @@ const Component = (): React.ReactElement => {
     setShowSearchInput?.(true);
   }, [setSearchPlaceholder, setShowSearchInput, t]);
 
+  useEffect(() => {
+    if (openBuyTokens === 'true' && isSupportBuyTokens && !isWebUI) {
+      searchParams.delete('openBuyTokens');
+      onOpenBuyTokens();
+    }
+  }, [openBuyTokens, onOpenBuyTokens, searchParams, navigate, setSearchParams, isSupportBuyTokens, isWebUI]);
+
   useEffect(() => {
     window.addEventListener('resize', handleResize);