fix: connect status is always connected

packages/extension-chrome/__tests__/helpers/mockPlatformService.ts

@@ -3,7 +3,10 @@ import { PlatformService } from '@nexus-wallet/types';
 export const MOCK_PLATFORM_URL = 'internal://nexus-wallet.io';
 export const MOCK_PLATFORM_PASSWORD = '12345678';
 
+// TODO: move it to @nexus-wallet/testkit
 export const mockPlatformService: PlatformService = /* istanbul ignore next */ {
+  /* istanbul ignore next */
+  getActiveSiteInfo: async () => undefined,
   getRequesterAppInfo: async () => ({ url: MOCK_PLATFORM_URL }),
   requestGrant: async () => {},
   requestSignData: async () => ({ password: MOCK_PLATFORM_PASSWORD }),

packages/extension-chrome/src/pages/Components/ConnectStatusCard.tsx

@@ -3,6 +3,7 @@ import { Flex, Icon, Box, FlexProps } from '@chakra-ui/react';
 import { CheckCircleIcon } from '@chakra-ui/icons';
 import { WhiteAlphaBox } from './WhiteAlphaBox';
 import AvatarIcon from './icons/Avatar.svg';
+import MinusCircle from '../Components/icons/MinusCircle.svg';
 
 export type ConnectStatusCardProps = {
   name: string;
@@ -30,7 +31,11 @@ export const ConnectStatusCard: FC<ConnectStatusCardProps> = ({ name, connected,
       <Flex alignItems="center">
         {connected !== undefined && (
           <>
-            <CheckCircleIcon mr="4px" data-test-id="connectedStatusIndicator" w="16px" h="16px" color={'green.300'} />
+            {connected ? (
+              <CheckCircleIcon mr="4px" data-test-id="connectedStatusIndicator" w="16px" h="16px" color={'green.300'} />
+            ) : (
+              <Icon as={MinusCircle} w="16px" h="16px" mr="4px" />
+            )}
             <Box fontSize="sm" data-test-id="connectedStatusText">
               {connected ? 'Connected' : 'Disconnected'}
             </Box>

packages/extension-chrome/src/pages/Popup/containers/Home.tsx

@@ -7,6 +7,8 @@ import NetworkIcon from '../../Components/icons/Network.svg';
 import { WhiteAlphaBox } from '../../Components/WhiteAlphaBox';
 import { ConnectStatusCard } from '../../Components/ConnectStatusCard';
 import { useConfigQuery } from '../../hooks/useConfigQuery';
+import { useService } from '../../hooks/useService';
+import { useQuery } from '@tanstack/react-query';
 
 const FeedbackButton: FC<ButtonProps> = (props) => {
   return (
@@ -16,9 +18,32 @@ const FeedbackButton: FC<ButtonProps> = (props) => {
   );
 };
 
+const useConnectedStatus = () => {
+  const configService = useService('configService');
+  const platformService = useService('platformService');
+
+  const hasGrantedQuery = useQuery({
+    queryKey: ['hasGranted'],
+    queryFn: async () => {
+      // TODO: use GrantService to check if the current site is granted
+      const whitelist = await configService.getWhitelist();
+      const activeSite = await platformService.getActiveSiteInfo();
+      if (!activeSite?.url) {
+        return false;
+      }
+
+      const siteHost = new URL(activeSite.url).host;
+      return whitelist.some((item) => item.host === siteHost);
+    },
+  });
+
+  return hasGrantedQuery.data;
+};
+
 export const Home: FC = () => {
   const navigate = useNavigate();
   const { data: config } = useConfigQuery();
+  const connectedStatus = useConnectedStatus();
 
   const entries = [
     {
@@ -41,7 +66,7 @@ export const Home: FC = () => {
 
   return (
     <Flex flexDir="column" h="100%">
-      <ConnectStatusCard name={config?.nickname!} connected />
+      <ConnectStatusCard name={config?.nickname!} connected={connectedStatus} />
 
       <WhiteAlphaBox direction="column" mt="20px">
         {entries.map(({ title, icon, onClick, testId }) => (

packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx

@@ -51,7 +51,7 @@ export const WhitelistSites: FC = () => {
   return (
     <Skeleton isLoaded={!!filteredSites}>
       <Text as={Box} fontSize="md" mb="20px" w="100%">
-        Yan is connected to these sites. They can view your account address
+        {configQuery.data?.nickname} is connected to these sites. They can view your account address
       </Text>
       <InputGroup alignItems="center" h="60px" mb="20px">
         <InputLeftElement

packages/extension-chrome/src/pages/hooks/useService.ts

@@ -1,7 +1,7 @@
 import { createGlobalState } from 'react-use';
-import { createServicesFactory, Modules } from '../../services';
+import { makeBrowserExtensionModulesFactory, Modules } from '../../services';
 
-const useServiceFactory = createGlobalState(createServicesFactory());
+const useServiceFactory = createGlobalState(makeBrowserExtensionModulesFactory());
 
 export function useService<T extends keyof Modules>(name: T): Modules[T] {
   const [serviceFactory] = useServiceFactory();

packages/extension-chrome/src/services/notification.ts

@@ -150,6 +150,15 @@ export function createBrowserExtensionPlatformService(): PlatformService<Endpoin
       }
       return { url: tab.url };
     },
+    getActiveSiteInfo: async () => {
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+      return (
+        tab && {
+          faviconUrl: tab.favIconUrl,
+          url: tab.url,
+        }
+      );
+    },
   };
 }
 

packages/types/src/services/NotificationService.ts

@@ -1,6 +1,6 @@
 import { TransactionSkeletonObject } from '@ckb-lumos/helpers';
 import { HexString } from '@ckb-lumos/lumos';
-
+import { Tabs } from 'webextension-polyfill';
 export interface PlatformService<Sender = unknown> {
   /**
    * request user to approve for signing a transaction,
@@ -30,6 +30,12 @@ export interface PlatformService<Sender = unknown> {
    * @throws if the Chrome extension permission is not granted, e.g. favicon
    */
   getRequesterAppInfo(sender: Sender): Promise<{ url: string }>;
+
+  /**
+   * get the active site(the active tab) information
+   * @throws if the Chrome extension permission is not granted
+   */
+  getActiveSiteInfo(): Promise<Pick<Tabs.Tab, 'favIconUrl' | 'url'> | undefined>;
 }
 
 /**