chore: address bar test fix

ChainSafe · Oct 30, 2024 · 63bc469 · 63bc469
1 parent e228675
commit 63bc469
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 39 deletions.
diff --git a/packages/ui/src/components/ConnectCreateOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx
@@ -8,7 +8,8 @@ import { useNetwork } from '../contexts/NetworkContext'
 import { useAccounts } from '../contexts/AccountsContext'
 
 export const ConnectOrWatch = () => {
-  const { setIsConnectionDialogOpen } = useAccounts()
+  const { setIsConnectionDialogOpen, isAllowedToConnectToExtension, allowConnectionToExtension } =
+    useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
@@ -32,7 +33,7 @@ export const ConnectOrWatch = () => {
         </>
       )}
       <ButtonWrapperStyled>
-        {/* {isAllowedToConnectToExtension ? (
+        {isAllowedToConnectToExtension ? (
           <Button
             variant="primary"
             onClick={() => {
@@ -45,14 +46,18 @@ export const ConnectOrWatch = () => {
           >
             Create one
           </Button>
-        ) : ( */}
-        <Button
-          variant="primary"
-          onClick={() => setIsConnectionDialogOpen(true)}
-          data-cy="button-connect-wallet"
-        >
-          Connect Wallet
-        </Button>
+        ) : (
+          <Button
+            variant="primary"
+            onClick={() => {
+              setIsConnectionDialogOpen(true)
+              allowConnectionToExtension()
+            }}
+            data-cy="button-connect-wallet"
+          >
+            Connect Wallet
+          </Button>
+        )}
         or
         <Button
           onClick={() => {

diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -8,8 +8,6 @@ import { styled } from '@mui/material/styles'
 import NetworkSelection from '../select/NetworkSelection'
 import MultiProxySelection from '../select/MultiProxySelection'
 import { ROUTES } from '../../pages/routes'
-import { isEmptyArray } from '../../utils/arrayUtils'
-import { useMemo } from 'react'
 import { Button, NavLink } from '../library'
 import { createSearchParams, useSearchParams } from 'react-router-dom'
 
@@ -18,7 +16,7 @@ interface DrawerMenuProps {
 }
 
 function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
-  const { ownAccountList, setIsConnectionDialogOpen } = useAccounts()
+  const { ownAccountList, setIsConnectionDialogOpen, allowConnectionToExtension } = useAccounts()
   const [params] = useSearchParams()
 
   return (
@@ -33,7 +31,10 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
           <ListItemStyled disablePadding>
             <ButtonStyled
               variant="primary"
-              onClick={() => setIsConnectionDialogOpen(true)}
+              onClick={() => {
+                setIsConnectionDialogOpen(true)
+                allowConnectionToExtension()
+              }}
             >
               Connect
             </ButtonStyled>

diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
@@ -25,7 +25,8 @@ const Header = ({ handleDrawerOpen }: Props) => {
     ownAccountList,
     selectAccount,
     isConnectionDialogOpen,
-    setIsConnectionDialogOpen
+    setIsConnectionDialogOpen,
+    allowConnectionToExtension
   } = useAccounts()
   const isAccountConnected = useMemo(() => !isEmptyArray(ownAccountList), [ownAccountList])
   const [params] = useSearchParams()
@@ -72,7 +73,10 @@ const Header = ({ handleDrawerOpen }: Props) => {
               {ownAccountList.length === 0 && (
                 <ConnectButtonStyled
                   data-cy="button-menu-connect"
-                  onClick={() => setIsConnectionDialogOpen(true)}
+                  onClick={() => {
+                    setIsConnectionDialogOpen(true)
+                    allowConnectionToExtension()
+                  }}
                   variant="primary"
                 >
                   Connect

diff --git a/packages/ui/src/contexts/AccountsContext.tsx b/packages/ui/src/contexts/AccountsContext.tsx
@@ -5,7 +5,8 @@ import React, {
   useCallback,
   useMemo,
   Dispatch,
-  SetStateAction
+  SetStateAction,
+  useEffect
 } from 'react'
 // import { PolkadotSigner } from 'polkadot-api'
 import { useAccounts as useRedotAccounts } from '@reactive-dot/react'
@@ -14,7 +15,7 @@ import { encodeAccounts } from '../utils/encodeAccounts'
 import { InjectedPolkadotAccount } from 'polkadot-api/pjs-signer'
 
 const LOCALSTORAGE_SELECTED_ACCOUNT_KEY = 'multix.selectedAccount'
-// const LOCALSTORAGE_ALLOWED_CONNECTION_KEY = 'multix.canConnectToExtension'
+const LOCALSTORAGE_ALLOWED_CONNECTION_KEY = 'multix.canConnectToExtension'
 
 type AccountContextProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -29,8 +30,8 @@ export interface IAccountContext {
   // isAccountLoading: boolean
   // isExtensionError: boolean
   // selectedSigner?: PolkadotSigner
-  // allowConnectionToExtension: () => void
-  // isAllowedToConnectToExtension: boolean
+  allowConnectionToExtension: () => void
+  isAllowedToConnectToExtension: boolean
   // isLocalStorageSetupDone: boolean
   isConnectionDialogOpen: boolean
   setIsConnectionDialogOpen: Dispatch<SetStateAction<boolean>>
@@ -52,7 +53,7 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
   // const [isAccountLoading, setIsAccountLoading] = useState(false)
   // const [isExtensionError, setIsExtensionError] = useState(false)
   // const [selectedSigner, setSelectedSigner] = useState<PolkadotSigner | undefined>()
-  // const [isAllowedToConnectToExtension, setIsAllowedToConnectToExtension] = useState(false)
+  const [isAllowedToConnectToExtension, setIsAllowedToConnectToExtension] = useState(false)
   const ownAddressList = useMemo(
     () => (ownAccountList || []).map((a) => a.address),
     [ownAccountList]
@@ -76,10 +77,10 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
     [ownAccountList]
   )
 
-  // const allowConnectionToExtension = useCallback(() => {
-  //   localStorage.setItem(LOCALSTORAGE_ALLOWED_CONNECTION_KEY, 'true')
-  //   setIsAllowedToConnectToExtension(true)
-  // }, [])
+  const allowConnectionToExtension = useCallback(() => {
+    localStorage.setItem(LOCALSTORAGE_ALLOWED_CONNECTION_KEY, 'true')
+    setIsAllowedToConnectToExtension(true)
+  }, [])
 
   const selectAccount = useCallback((account: InjectedPolkadotAccount) => {
     localStorage.setItem(LOCALSTORAGE_SELECTED_ACCOUNT_KEY, account.address)
@@ -162,15 +163,15 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
   //   accountGotRequested
   // ])
 
-  // useEffect(() => {
-  //   if (!isAllowedToConnectToExtension) {
-  //     const previouslyAllowed = localStorage.getItem(LOCALSTORAGE_ALLOWED_CONNECTION_KEY)
-  //     if (previouslyAllowed === 'true') {
-  //       setIsAllowedToConnectToExtension(true)
-  //     }
-  //     setIsLocalStorageSetupDone(true)
-  //   }
-  // }, [isAllowedToConnectToExtension])
+  useEffect(() => {
+    if (!isAllowedToConnectToExtension) {
+      const previouslyAllowed = localStorage.getItem(LOCALSTORAGE_ALLOWED_CONNECTION_KEY)
+      if (previouslyAllowed === 'true') {
+        setIsAllowedToConnectToExtension(true)
+      }
+      // setIsLocalStorageSetupDone(true)
+    }
+  }, [isAllowedToConnectToExtension])
 
   // useEffect(() => {
   //   if (!selectedAccount) return
@@ -196,10 +197,10 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
         // isExtensionError,
         getAccountByAddress,
         isConnectionDialogOpen,
-        setIsConnectionDialogOpen
+        setIsConnectionDialogOpen,
         // selectedSigner,
-        // allowConnectionToExtension,
-        // isAllowedToConnectToExtension,
+        allowConnectionToExtension,
+        isAllowedToConnectToExtension
         // isLocalStorageSetupDone
       }}
     >

diff --git a/packages/ui/src/hooks/useDisplayError.tsx b/packages/ui/src/hooks/useDisplayError.tsx
@@ -13,13 +13,17 @@ import { useSearchParams } from 'react-router-dom'
 import { useNetwork } from '../contexts/NetworkContext'
 
 export const useDisplayError = () => {
-  const { ownAccountList } = useAccounts()
+  const { ownAccountList, isAllowedToConnectToExtension } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const { error: multisigQueryError, refetch, canFindMultiProxyFromUrl } = useMultiProxy()
   const [, setSearchParams] = useSearchParams()
   const { selectedNetwork } = useNetwork()
 
-  if (watchedAddresses.length === 0 && ownAccountList.length === 0) {
+  if (
+    watchedAddresses.length === 0 &&
+    ownAccountList.length === 0 &&
+    isAllowedToConnectToExtension
+  ) {
     return (
       <CenterStyled>
         <div data-cy="label-no-account-found">