Merge branch 'fix/metamask-mode' into tmp/20250117

Author: cs1707

src/ui/assets/metamask-mode-circle-cc.svg

@@ -24,6 +24,8 @@ import RuleDrawer from '../SecurityEngine/RuleDrawer';
 import RuleResult from './RuleResult';
 import UserListDrawer from './UserListDrawer';
 import { EIP6963ProviderInfo, SelectWallet } from './SelectWallet';
+import { ConnectedSite } from '@/background/service/permission';
+import { ReactComponent as RcIconMetamask } from 'ui/assets/metamask-mode-circle-cc.svg';
 
 interface ConnectProps {
   params: any;
@@ -230,6 +232,8 @@ const Connect = (props: ConnectProps) => {
     null
   );
 
+  const [currentSite, setCurrentSite] = useState<ConnectedSite>();
+
   const userListResult = useMemo(() => {
     const originBlacklist = engineResults.find(
       (result) => result.id === '1006'
@@ -466,6 +470,7 @@ const Connect = (props: ConnectProps) => {
   const init = async () => {
     const account = await wallet.getCurrentAccount();
     const site = await wallet.getSite(origin);
+    setCurrentSite(site);
     let level: 'very_low' | 'low' | 'medium' | 'high' = 'low';
     let collectList: { name: string; logo_url: string }[] = [];
     let defaultChain = CHAINS_ENUM.ETH;
@@ -653,7 +658,18 @@ const Connect = (props: ConnectProps) => {
               />
             </div>
             <div className="connect-card">
-              <FallbackSiteLogo url={icon} origin={origin} width="40px" />
+              <div className="relative">
+                <FallbackSiteLogo url={icon} origin={origin} width="40px" />
+                {currentSite?.isMetamaskMode ? (
+                  <div className="absolute top-[-4px] right-[-4px] text-r-neutral-title-2">
+                    <RcIconMetamask
+                      width={20}
+                      height={20}
+                      viewBox="0 0 16 16"
+                    />
+                  </div>
+                ) : null}
+              </div>
               <p className="connect-origin">{origin}</p>
             </div>
           </div>

src/ui/views/Approval/components/Connect/index.tsx

@@ -13,6 +13,7 @@ import { ReactComponent as RCIconQuestionCC } from 'ui/assets/dashboard/question
 import { ChainSelector, FallbackSiteLogo } from 'ui/component';
 import { getCurrentTab, useWallet } from 'ui/utils';
 import { MetamaskModePopup } from '../MetamaskModePopup';
+import { ReactComponent as RcIconMetamask } from 'ui/assets/metamask-mode-circle-cc.svg';
 import './style.less';
 import { ga4 } from '@/utils/ga4';
 
@@ -92,12 +93,19 @@ export const CurrentConnection = memo((props: CurrentConnectionProps) => {
             setIsShowTooltip(false);
           }}
         >
-          <FallbackSiteLogo
-            url={site.icon}
-            origin={site.origin}
-            width="28px"
-            className="site-icon"
-          ></FallbackSiteLogo>
+          <div className="relative">
+            <FallbackSiteLogo
+              url={site.icon}
+              origin={site.origin}
+              width="28px"
+              className="site-icon"
+            ></FallbackSiteLogo>
+            {site.isMetamaskMode ? (
+              <div className="absolute top-[-4px] right-[-4px] text-r-neutral-title-2">
+                <RcIconMetamask />
+              </div>
+            ) : null}
+          </div>
           <div className="site-content">
             <div className="site-name" title={site?.origin}>
               {site?.origin}