feat: modify the desktop page entry position & fix some bugs (#3277)

* fix: some bugs

* feat: update dashboard

* feat: revert block token btn

* feat: revert assetlist popup dapp action

* feat: condition show block token

* chore

* fix: desktop hidden block btn in token detail

* feat: change popup height

* feat: change open in tab button style

---------

Co-authored-by: kim12322222 <[email protected]>
Co-authored-by: hz002 <[email protected]>

Author: 3 people

_raw/locales/en/messages.json

@@ -1865,7 +1865,8 @@
           "addTestnet": "Network"
         },
         "noTestnetAssets": "No Custom Network Assets",
-        "addTokenEntryText": "Token"
+        "addTokenEntryText": "Token",
+        "openInTab": "Open in tab"
       },
       "hd": {
         "howToConnectLedger": "How to Connect Ledger",

src/background/controller/wallet.ts

@@ -1629,6 +1629,9 @@ export class WalletController extends BaseController {
         active: true,
         url: url,
       });
+      eventBus.emit(EVENTS.broadcastToUI, {
+        method: EVENTS.DESKTOP.FOCUSED,
+      });
       const currentWindow = await Browser.windows.getLastFocused();
       if (tab.windowId && tab.windowId !== currentWindow.id) {
         Browser.windows.update(tab.windowId, {

src/constant/index.ts

@@ -562,6 +562,10 @@ export const EVENTS = {
   PERSIST_KEYRING: 'PERSIST_KEYRING',
 
   RELOAD_ACCOUNT_LIST: 'RELOAD_ACCOUNT_LIST',
+
+  DESKTOP: {
+    FOCUSED: 'DESKTOP_FOCUSED',
+  },
 };
 
 export const EVENTS_IN_BG = {

src/ui/component/DesktopSelectAccountList/styles.less

@@ -3,6 +3,9 @@
     background-color: transparent;
     width: 4px;
   }
+  ::-webkit-scrollbar-track {
+    margin: 10px 0; /* 模拟上下 padding */
+  }
   ::-webkit-scrollbar-thumb {
     background-color: var(--rb-neutral-line, #e0e5ec);
     border-radius: 1000px;

src/ui/component/ExternalSwapBridgeDappPopup/index.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as RcIconLink } from '@/ui/assets/link-cc.svg';
 import { ReactComponent as RcIconMatchCC } from '@/ui/assets/match-cc.svg';
 
 import { Popup } from '@/ui/component';
-import { Skeleton } from 'antd';
+import { DrawerProps, Skeleton } from 'antd';
 
 const isTab = getUiType().isTab;
 const getContainer = isTab ? '.js-rabby-popup-container' : undefined;
@@ -171,11 +171,13 @@ export const SwapBridgeDappPopup = ({
   onClose,
   dappList,
   loading,
+  getContainer,
 }: {
   visible: boolean;
   onClose: () => void;
   dappList: SwapBridgeExternalDappInfo[];
   loading?: boolean;
+  getContainer?: DrawerProps['getContainer'];
 }) => {
   const { t } = useTranslation();
   return (

src/ui/utils/portfolio/index.ts

@@ -13,7 +13,8 @@ export const useQueryProjects = (
   withHistory = false,
   visible: boolean,
   isTestnet = false,
-  isAll = false
+  isAll = false,
+  showBlocked = false
 ) => {
   const [time, setTime] = useSafeState(dayjs().subtract(1, 'day'));
 
@@ -37,7 +38,16 @@ export const useQueryProjects = (
     walletProject,
     customizeTokens,
     blockedTokens,
-  } = useTokens(userAddr, historyTime, visible, 0, undefined, isTestnet, isAll);
+  } = useTokens(
+    userAddr,
+    historyTime,
+    visible,
+    0,
+    undefined,
+    isTestnet,
+    isAll,
+    showBlocked
+  );
 
   const {
     data: portfolios,

src/ui/utils/portfolio/token.ts

@@ -59,7 +59,8 @@ export const useTokens = (
   isTestnet: boolean = chainServerId
     ? !!findChain({ serverId: chainServerId })?.isTestnet
     : false,
-  showAll = false
+  showAll = false,
+  showBlocked = false
 ) => {
   const abortProcess = useRef<AbortController>();
   const [data, setData] = useSafeState(walletProject);
@@ -162,6 +163,16 @@ export const useTokens = (
     setData(_data);
     const snapshot = await queryTokensCache(userAddr, wallet, isTestnet);
 
+    const blocked = showBlocked
+      ? []
+      : (await wallet.getBlockedToken()).filter((token) => {
+          if (isTestnet) {
+            return checkIsTestnet(token.chain);
+          } else {
+            return !checkIsTestnet(token.chain);
+          }
+        });
+
     if (!snapshot) {
       log('--Terminate-tokens-snapshot-', userAddr);
       setLoading(false);
@@ -188,9 +199,11 @@ export const useTokens = (
       setData(_data);
       _tokens = sortWalletTokens(_data);
       if (isTestnet) {
-        dispatch.account.setTestnetTokenList(filterDisplayToken(_tokens, []));
+        dispatch.account.setTestnetTokenList(
+          filterDisplayToken(_tokens, blocked)
+        );
       } else {
-        dispatch.account.setTokenList(filterDisplayToken(_tokens, []));
+        dispatch.account.setTokenList(filterDisplayToken(_tokens, blocked));
       }
       setLoading(false);
       // setTokens(filterDisplayToken(_tokens, blocked));
@@ -239,9 +252,23 @@ export const useTokens = (
         // customize with balance
         customTokenList.push(token);
       }
+      if (
+        blocked.find(
+          (t) =>
+            isSameAddress(token.id, t.address) &&
+            token.chain === t.chain &&
+            token.is_core
+        )
+      ) {
+        blockedTokenList.push(token);
+      }
     });
     const apiProvider = isTestnet ? wallet.testnetOpenapi : wallet.openapi;
-
+    const noBalanceBlockedTokens = blocked.filter((token) => {
+      return !blockedTokenList.find(
+        (t) => isSameAddress(token.address, t.id) && token.chain === t.chain
+      );
+    });
     const noBalanceCustomizeTokens = customizeTokens.filter((token) => {
       return !customTokenList.find(
         (t) => isSameAddress(token.address, t.id) && token.chain === t.chain
@@ -256,6 +283,13 @@ export const useTokens = (
         ...noBalanceCustomTokens.filter((token) => !token.is_core)
       );
     }
+    if (noBalanceBlockedTokens.length > 0) {
+      const blockedTokens = await apiProvider.customListToken(
+        noBalanceBlockedTokens.map((item) => `${item.chain}:${item.address}`),
+        userAddr
+      );
+      blockedTokenList.push(...blockedTokens.filter((token) => token.is_core));
+    }
     const formattedCustomTokenList = customTokenList.map(
       (token) => new DisplayedToken(token) as AbstractPortfolioToken
     );
@@ -286,12 +320,12 @@ export const useTokens = (
     _tokens = sortWalletTokens(_data);
     if (isTestnet) {
       dispatch.account.setTestnetTokenList([
-        ...filterDisplayToken(_tokens, []),
+        ...filterDisplayToken(_tokens, blocked),
         ...formattedCustomTokenList,
       ]);
     } else {
       dispatch.account.setTokenList([
-        ...filterDisplayToken(_tokens, []),
+        ...filterDisplayToken(_tokens, blocked),
         ...formattedCustomTokenList,
       ]);
     }

src/ui/views/Bridge/Component/BridgeContent.tsx

@@ -676,6 +676,7 @@ export const BridgeContent = () => {
               }}
               dappList={externalDapps}
               loading={externalDappsLoading}
+              getContainer={getContainer}
             />
           </div>
         ) : null}

src/ui/views/CommonPopup/AssetList/AssetList.tsx

@@ -1,4 +1,4 @@
-import { useCommonPopupView } from '@/ui/utils';
+import { useCommonPopupView, useWallet } from '@/ui/utils';
 import React, { useState, useRef, useEffect } from 'react';
 import { ChainList } from './ChainList';
 import { AssetListContainer } from './AssetListContainer';
@@ -14,6 +14,7 @@ import { Button } from 'antd';
 import { SpecialTokenListPopup } from './components/TokenButton';
 import { TestnetChainList } from './TestnetChainList';
 import { useFilteredTokens } from './useFilteredTokens';
+import { RcIconExternal1CC, RcIconExternalCC } from '@/ui/assets/dashboard';
 
 export const AssetList = ({
   visible,
@@ -40,7 +41,7 @@ export const AssetList = ({
   const { isShowTestnet, selectedTab, onTabChange } = useSwitchNetTab();
 
   React.useEffect(() => {
-    setHeight(488);
+    setHeight(500);
   }, []);
 
   React.useEffect(() => {
@@ -60,6 +61,7 @@ export const AssetList = ({
 
   const { sortedCustomize: tokens } = useFilteredTokens(selectChainId, false);
   const [showCustomizedTokens, setShowCustomizedTokens] = React.useState(false);
+  const wallet = useWallet();
 
   return (
     <div ref={containerRef}>
@@ -135,6 +137,34 @@ export const AssetList = ({
           onClose={onClose}
         />
       </div>
+      <footer className="h-[72px]">
+        <div
+          className={clsx(
+            'fixed bottom-0 left-0 right-0 px-[20px] py-[14px]',
+            'border-t-[0.5px] border-solid border-rabby-neutral-line',
+            'bg-r-neutral-bg-2'
+          )}
+        >
+          <button
+            type="button"
+            className={clsx(
+              'w-full h-[44px] text-r-blue-default text-[15px] leading-[18px] font-medium',
+              'rounded-[8px]',
+              'border-[1px] border-solid border-rabby-blue-default',
+              'bg-r-neutral-bg-2 hover:bg-r-blue-light1'
+            )}
+            onClick={() => {
+              wallet.openInDesktop('/desktop/profile');
+              window.close();
+            }}
+          >
+            <div className="flex items-center justify-center gap-[4px]">
+              {t('page.dashboard.assets.openInTab')}
+              <RcIconExternalCC />
+            </div>
+          </button>
+        </div>
+      </footer>
     </div>
   );
 };

src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx

@@ -255,7 +255,7 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
       <Popup
         visible={visible}
         closable={false}
-        height={494}
+        height={500}
         onClose={onClose}
         className="add-custom-token-popup"
         push={false}