fix(app): auto show wallet dialog

apps/app/components/BasePool/DetailPage.tsx

@@ -92,7 +92,7 @@ const DetailPage: FC<{basePool: BasePoolCommonFragment}> = ({basePool}) => {
         }`,
       },
       {
-        enabled: selectedVaultState != null || account !== null,
+        enabled: selectedVaultState != null || account != null,
         select: (data) => data.delegationById,
       },
     )

apps/app/components/DashboardAccount.tsx

@@ -122,7 +122,7 @@ const DashboardAccount: FC = () => {
                   ? trimAddress(account.address)
                   : 'To host, connect, and gain in the world of Web3'}
               </Typography>
-              {account !== null && (
+              {account != null && (
                 <ContentCopy sx={{ml: 1, width: 16}} color="disabled" />
               )}
             </Stack>

apps/app/components/DashboardAssetList.tsx

@@ -7,7 +7,7 @@ import useAssetsMetadata, {
 } from '@/hooks/useAssetsMetadata'
 import useWrapAsset from '@/hooks/useWrapAsset'
 import {chainAtom} from '@/store/common'
-import {hideSmallBalanceAtom} from '@/store/ui'
+import {hideSmallBalanceAtom, walletDialogOpenAtom} from '@/store/ui'
 import {
   Box,
   Button,
@@ -217,7 +217,9 @@ const Assets: FC<{
 const DashboardAssetList: FC = () => {
   const [chain] = useAtom(chainAtom)
   const assetsMetadata = useAssetsMetadata()
+  const [polkadotAccount] = useAtom(polkadotAccountAtom)
   const [hideSmallBalance, setHideSmallBalance] = useAtom(hideSmallBalanceAtom)
+  const [, setWalletDialogOpen] = useAtom(walletDialogOpenAtom)
 
   return (
     <>
@@ -237,13 +239,25 @@ const DashboardAssetList: FC = () => {
           />
         </NoSsr>
       </SectionHeader>
-      <Paper sx={{background: 'transparent', overflow: 'hidden'}}>
-        {assetsMetadata != null ? (
-          <Assets assetsMetadata={assetsMetadata} key={chain} />
-        ) : (
-          <Skeleton variant="rectangular" height={240} />
-        )}
-      </Paper>
+      {polkadotAccount == null ? (
+        <Stack alignItems="center" py={4}>
+          <Button
+            onClick={() => {
+              setWalletDialogOpen(true)
+            }}
+          >
+            Connect Wallet
+          </Button>
+        </Stack>
+      ) : (
+        <Paper sx={{background: 'transparent', overflow: 'hidden'}}>
+          {assetsMetadata != null ? (
+            <Assets assetsMetadata={assetsMetadata} key={chain} />
+          ) : (
+            <Skeleton variant="rectangular" height={240} />
+          )}
+        </Paper>
+      )}
     </>
   )
 }

apps/app/components/DashboardNftList.tsx

@@ -5,8 +5,10 @@ import {
   useNftsConnectionQuery,
 } from '@/lib/subsquidQuery'
 import {chainAtom, subsquidClientAtom} from '@/store/common'
+import {walletDialogOpenAtom} from '@/store/ui'
 import {
   Box,
+  Button,
   Chip,
   Unstable_Grid2 as Grid,
   Pagination,
@@ -121,6 +123,8 @@ const DashboardNftList: FC = () => {
   const [page, setPage] = useState(1)
   const [account] = useAtom(polkadotAccountAtom)
   const [subsquidClient] = useAtom(subsquidClientAtom)
+  const [, setWalletDialogOpen] = useAtom(walletDialogOpenAtom)
+  const [polkadotAccount] = useAtom(polkadotAccountAtom)
   const {data} = useNftsConnectionQuery(
     subsquidClient,
     {
@@ -135,8 +139,8 @@ const DashboardNftList: FC = () => {
       },
     },
     {
-      enabled: account !== null,
-      placeholderData: keepPreviousData,
+      enabled: account != null,
+      placeholderData: account != null ? keepPreviousData : undefined,
     },
   )
   const isEmpty = data?.nftsConnection.totalCount === 0
@@ -153,6 +157,18 @@ const DashboardNftList: FC = () => {
         )}
       </SectionHeader>
 
+      {polkadotAccount == null && (
+        <Stack alignItems="center" py={4}>
+          <Button
+            onClick={() => {
+              setWalletDialogOpen(true)
+            }}
+          >
+            Connect Wallet
+          </Button>
+        </Stack>
+      )}
+
       <Grid container spacing={{xs: 1, sm: 2, md: 3}}>
         {data?.nftsConnection.edges.map((edge) => {
           return (

apps/app/components/Delegation/List.tsx

@@ -242,7 +242,7 @@ const DelegationList: FC<{
               value={showNftCard}
               exclusive
               onChange={(_, value: boolean) => {
-                if (value !== null) {
+                if (value != null) {
                   setShowNftCard(value)
                 }
               }}

apps/app/components/Layout.tsx

@@ -1,5 +1,6 @@
 import useListenBlockHeight from '@/hooks/useListenBlockHeight'
 import useResetVault from '@/hooks/useResetVault'
+import useShowWalletDialog from '@/hooks/useShowWalletDialog'
 import useSyncPath from '@/hooks/useSyncPath'
 import {Container, useMediaQuery, useTheme} from '@mui/material'
 import {useConnectPolkadotWallet} from '@phala/lib'
@@ -18,6 +19,7 @@ const Layout: FC<{children: ReactNode}> = ({children}) => {
   useListenBlockHeight()
   useResetVault()
   useSyncPath()
+  useShowWalletDialog()
 
   return (
     <SnackbarProvider

apps/app/components/TopBar/Account.tsx

@@ -10,7 +10,7 @@ const Account: FC = () => {
   const [wallet] = useAtom(walletAtom)
   const [polkadotAccount] = useAtom(polkadotAccountAtom)
   const [, setWalletDialogOpen] = useAtom(walletDialogOpenAtom)
-  const isConnected = wallet !== null && polkadotAccount !== null
+  const isConnected = wallet != null && polkadotAccount != null
   return (
     <Button
       color={polkadotAccount != null ? 'inherit' : 'primary'}

apps/app/components/WalletDialog.tsx

@@ -35,7 +35,7 @@ const WalletDialog: FC = () => {
   const [wallets, setWallets] = useState<Wallet[]>([])
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
-  const connected = polkadotAccounts !== null
+  const connected = polkadotAccounts != null
 
   useEffect(() => {
     let unmounted = false

apps/app/hooks/useAccountQuery.ts

@@ -13,7 +13,7 @@ const useAccountQuery = (): UseQueryResult<
   const query = useAccountByIdQuery(
     subsquidClient,
     {accountId: account?.address as unknown as string},
-    {enabled: account !== null, select: (data) => data.accountById},
+    {enabled: account != null, select: (data) => data.accountById},
   )
   return query
 }

apps/app/hooks/useShowWalletDialog.ts

@@ -0,0 +1,20 @@
+import {walletDialogOpenAtom} from '@/store/ui'
+import {useTimeout} from '@phala/lib'
+import {polkadotAccountAtom} from '@phala/store'
+import {useAtom} from 'jotai'
+import {usePathname} from 'next/navigation'
+
+const whiteListPathnames = ['/phala', '/khala', '/wiki']
+
+const useShowWalletDialog = (): void => {
+  const pathname = usePathname()
+  const [polkadotAccount] = useAtom(polkadotAccountAtom)
+  const [, setWalletDialogOpen] = useAtom(walletDialogOpenAtom)
+  useTimeout(() => {
+    if (!whiteListPathnames.includes(pathname) && !polkadotAccount) {
+      setWalletDialogOpen(true)
+    }
+  }, 5000)
+}
+
+export default useShowWalletDialog

apps/app/package.json

@@ -51,7 +51,7 @@
     "react-intersection-observer": "^9.13.0",
     "react-markdown": "^9.0.1",
     "react-snap-carousel": "^0.4.0",
-    "recharts": "^2.12.7",
+    "recharts": "2.13.0-alpha.4",
     "sharp": "^0.33.4",
     "swr": "^2.2.5"
   },

apps/app/pages/[chain]/delegate/my-delegation.tsx

@@ -39,7 +39,7 @@ const MyDelegation: FC = () => {
       <Box mt={{xs: 2, md: 5}} component="section">
         <DelegationList
           isOwner
-          isVault={selectedVaultState !== null}
+          isVault={selectedVaultState != null}
           address={
             selectedVaultState === null
               ? polkadotAccount?.address

apps/app/pages/[chain]/farm/stake-pool.tsx

@@ -29,7 +29,7 @@ const MyStakePools: FC = () => {
     subsquidClient,
     {accountId: account?.address, gt: '0'},
     {
-      enabled: account !== null,
+      enabled: account != null,
       select: (data) => data.basePoolsConnection.edges,
     },
   )

apps/app/pages/[chain]/farm/vault.tsx

@@ -40,7 +40,7 @@ const MyVaults: FC = () => {
     subsquidClient,
     {accountId: account?.address},
     {
-      enabled: account !== null,
+      enabled: account != null,
       select: (data) => data.basePoolsConnection.edges,
     },
   )

apps/app/pages/[chain]/subsidy.tsx

@@ -294,7 +294,7 @@ const Subsidy: NextPage = () => {
         </Typography>
       </Paper>
 
-      {account !== null && (
+      {account != null && (
         <Stack spacing={2} direction="row" alignItems="center" mt={4}>
           <Typography variant="h6" component="h2" color="text.secondary">
             Total Rewards
@@ -323,7 +323,7 @@ const Subsidy: NextPage = () => {
 
       {rowData != null && rowData.length === 0 && <Empty sx={{mt: 6}} />}
 
-      {account !== null && legacyRewardsData == null && (
+      {account != null && legacyRewardsData == null && (
         <Box
           display="flex"
           alignItems="center"

apps/subbridge/hooks/useBridgeFee.ts

@@ -30,7 +30,7 @@ export const useBridgeFee = (): Decimal | undefined => {
   const {data: evmSygmaFee} = useSWR(
     bridge.kind === 'evmSygma' &&
       provider != null &&
-      evmAccount !== null && [
+      evmAccount != null && [
         provider,
         evmAccount,
         fromChain,

packages/lib/src/index.ts

@@ -10,6 +10,7 @@ export {default as transformSs58Format} from './transformSs58Format'
 export {default as trimAddress} from './trimAddress'
 export {useConnectPolkadotWallet} from './useConnectPolkadotWallet'
 export {useInterval} from './useInterval'
+export {useTimeout} from './useTimeout'
 export * from './validateAddress'
 export * from './weightedAverage'
 export {default as JotaiDevTools} from './JotaiDevTools'

packages/lib/src/useTimeout.ts

@@ -0,0 +1,21 @@
+'use client'
+import {useEffect, useRef} from 'react'
+
+export const useTimeout = (
+  callback: () => void,
+  delay: number | null,
+): void => {
+  const savedCallback = useRef(callback)
+  savedCallback.current = callback
+  useEffect(() => {
+    if (delay == null) {
+      return
+    }
+    const id = setTimeout(() => {
+      savedCallback.current()
+    }, delay)
+    return () => {
+      clearTimeout(id)
+    }
+  }, [delay])
+}