Revert "add check if network is supported"

This reverts commit 9762c401fe.
2023-11-16 13:23:50 +01:00 · 2023-11-16 13:23:50 +01:00 · faa624b889
parent 38dab59fbd
commit faa624b889
15 changed files with 129 additions and 273 deletions
--- a/packages/DApp/src/components/ConnectButton.tsx
+++ b/packages/DApp/src/components/ConnectButton.tsx
@ -0,0 +1,20 @@
+import React from 'react'
+import { ProposeButton } from './Button'
+import { useEthers } from '@usedapp/core'
+
+export type ConnectButtonProps = {
+  text?: string
+  className?: string
+}
+
+export function ConnectButton({ text, className }: ConnectButtonProps) {
+  const { activateBrowserWallet } = useEthers()
+
+  return (
+    <div>
+      <ProposeButton className={className} onClick={activateBrowserWallet}>
+        {!text ? 'Connect to Vote' : text}
+      </ProposeButton>
+    </div>
+  )
+}
--- a/packages/DApp/src/components/ConnectionNetwork.tsx
+++ b/packages/DApp/src/components/ConnectionNetwork.tsx
@ -1,64 +0,0 @@
-import React from 'react'
-import { ProposeButton } from './Button'
-import { useAccount } from '../hooks/useAccount'
-import { config } from '../config'
-import { Warning } from './votes/VoteWarning'
-import styled from 'styled-components'
-
-export type ConnectionNetworkProps = {
-  buttonText?: string
-  autoWidth?: boolean
-}
-
-export function ConnectionNetwork({ buttonText, autoWidth = false }: ConnectionNetworkProps) {
-  const { activate, account, error, switchNetwork } = useAccount()
-
-  if (account) {
-    return (
-      <>
-        {error?.name === 'ChainIdError' && (
-          <WarningWrapper>
-            <Warning text="You are connected to unsupported network." icon="⚠️" />
-          </WarningWrapper>
-        )}
-        {error?.name === 'ChainIdError' && Boolean(config.daapConfig.readOnlyChainId) && (
-          <ProposeButton onClick={() => switchNetwork(config.daapConfig.readOnlyChainId!)}>
-            Switch Network
-          </ProposeButton>
-        )}
-      </>
-    )
-  }
-
-  return (
-    <ConnectButton autoWidth={autoWidth} onClick={activate}>
-      {!buttonText ? 'Connect to Vote' : buttonText}
-    </ConnectButton>
-  )
-}
-
-const WarningWrapper = styled.div`
-  width: 100%;
-  max-width: 320px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  align-self: center;
-
-  @media (max-width: 600px) {
-    max-width: 100%;
-  }
-`
-
-const ConnectButton = styled(ProposeButton)<{ autoWidth: boolean }>`
-  ${({ autoWidth }) =>
-    autoWidth &&
-    `
-    width: auto;
-    padding: 10px 27px;
-    
-    @media (max-width: 600px) {
-      padding: 7px 27px;
-      margin-top: -9px;
-  }`}
-`
--- a/packages/DApp/src/components/card/CardCommunity.tsx
+++ b/packages/DApp/src/components/card/CardCommunity.tsx
@ -11,7 +11,6 @@ import { CardHeading } from '../Card'
 import { useEthers, getExplorerAddressLink, ChainId } from '@usedapp/core'
 import { useHistory } from 'react-router'
 import { contracts } from '../../constants/contracts'
-import { useAccount } from '../../hooks/useAccount'

 interface CardCommunityProps {
  community: CommunityDetail
@ -28,8 +27,7 @@ export const CardCommunity = ({
  customStyle,
  currentVoting,
 }: CardCommunityProps) => {
-  const { chainId } = useEthers()
-  const { isActive } = useAccount()
+  const { account, chainId } = useEthers()

  const [showHistoryModal, setShowHistoryModal] = useState(false)
  const [showRemoveModal, setShowRemoveModal] = useState(false)
@ -93,14 +91,14 @@ export const CardCommunity = ({
      <Community>
        <CardLogoWrap>
          {community.icon && <CardLogo src={community.icon} alt={`${community.name} logo`} />}
-          {showRemoveButton && !currentVoting && <RemoveBtnMobile onClick={handleMobileRemove} disabled={!isActive} />}
+          {showRemoveButton && !currentVoting && <RemoveBtnMobile onClick={handleMobileRemove} disabled={!account} />}
        </CardLogoWrap>

        <CommunityInfo>
          <CardTop>
            <CardHeading>{customHeading ? customHeading : community.name}</CardHeading>
            {showRemoveButton && !currentVoting && (
-              <RemoveBtn onClick={() => setShowRemoveModal(true)} disabled={!isActive} />
+              <RemoveBtn onClick={() => setShowRemoveModal(true)} disabled={!account} />
            )}
          </CardTop>
          <CardText>{community.description}</CardText>
--- a/packages/DApp/src/components/card/CardFeature.tsx
+++ b/packages/DApp/src/components/card/CardFeature.tsx
@ -7,13 +7,12 @@ import { CommunityDetail } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
 import { VoteConfirmModal } from './VoteConfirmModal'
-import { useContractCall } from '@usedapp/core'
+import { useContractCall, useEthers } from '@usedapp/core'
 import { VoteBtn } from '../Button'
 import { useFeaturedVotes } from '../../hooks/useFeaturedVotes'
 import { useFeaturedVotingState } from '../../hooks/useFeaturedVotingState'
 import { useContracts } from '../../hooks/useContracts'
 import { BigNumber } from 'ethers'
-import { useAccount } from '../../hooks/useAccount'

 interface CardFeatureProps {
  community: CommunityDetail
@ -30,7 +29,7 @@ export const CardFeature = ({ community, featured }: CardFeatureProps) => {
      args: [community.publicKey],
    }) ?? []

-  const { account, isActive } = useAccount()
+  const { account } = useEthers()
  const [showFeatureModal, setShowFeatureModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [verifiedVotes, setVerifiedVotes] = useState<BigNumber>(BigNumber.from(0))
@ -119,7 +118,6 @@ export const CardFeature = ({ community, featured }: CardFeatureProps) => {
        <FeatureBtn
          disabled={
            !account ||
-            !isActive ||
            inFeatured ||
            featuredVotingState === 'verification' ||
            featuredVotingState === 'ended' ||
--- a/packages/DApp/src/components/card/CardVote/CardVote.tsx
+++ b/packages/DApp/src/components/card/CardVote/CardVote.tsx
@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { VoteModal } from './../VoteModal'
 import { VoteChart } from './../../votes/VoteChart'
 import { voteTypes } from './../../../constants/voteTypes'
+import { useEthers } from '@usedapp/core'
 import { useContractFunction } from '@usedapp/core'
 import { useContracts } from '../../../hooks/useContracts'
 import { getVotingWinner } from '../../../helpers/voting'
@ -16,7 +17,6 @@ import { VoteBtn, VotesBtns } from '../../Button'
 import { CardHeading, CardVoteBlock } from '../../Card'
 import { useUnverifiedVotes } from '../../../hooks/useUnverifiedVotes'
 import { useVotingBatches } from '../../../hooks/useVotingBatches'
-import { useAccount } from '../../../hooks/useAccount'

 interface CardVoteProps {
  room: DetailedVotingRoom
@ -24,7 +24,7 @@ interface CardVoteProps {
 }

 export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
-  const { account, isActive } = useAccount()
+  const { account } = useEthers()
  const [showVoteModal, setShowVoteModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [proposingAmount, setProposingAmount] = useState(0)
@ -197,7 +197,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
        {finalizationPeriod && (
          <VoteBtnFinal
            onClick={() => finalizeVoting.send(room.roomNumber, finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)}
-            disabled={!isActive}
+            disabled={!account}
          >
            <>
              Finalize the vote <span>✍️</span>
@ -214,7 +214,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
        {!verificationPeriod && !finalizationPeriod && (
          <VotesBtns>
            <VoteBtn
-              disabled={!canVote || !isActive}
+              disabled={!canVote}
              onClick={() => {
                setSelectedVoted(voteConstants.against)
                setShowVoteModal(true)
@ -223,7 +223,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
              {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
            </VoteBtn>
            <VoteBtn
-              disabled={!canVote || !isActive}
+              disabled={!canVote}
              onClick={() => {
                setSelectedVoted(voteConstants.for)
                setShowVoteModal(true)
--- a/packages/DApp/src/components/directory/DirectoryInfo.tsx
+++ b/packages/DApp/src/components/directory/DirectoryInfo.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { InfoWrap, PageInfo } from '../PageInfo'
-import { useContractFunction } from '@usedapp/core'
-import { ConnectionNetwork } from '../ConnectionNetwork'
+import { useContractFunction, useEthers } from '@usedapp/core'
+import { ConnectButton } from '../ConnectButton'
 import { ProposeButton } from '../Button'
 import { useFeaturedVotes } from '../../hooks/useFeaturedVotes'
 import { useFeaturedVotingState } from '../../hooks/useFeaturedVotingState'
@ -11,10 +11,9 @@ import { mapFeaturesVotes, receiveWakuFeature } from '../../helpers/receiveWakuF
 import { config } from '../../config'
 import { useTypedFeatureVote } from '../../hooks/useTypedFeatureVote'
 import { useFeaturedBatches } from '../../hooks/useFeaturedBatches'
-import { useAccount } from '../../hooks/useAccount'

 export function DirectoryInfo() {
-  const { account, isActive } = useAccount()
+  const { account } = useEthers()
  const { featuredVotingContract } = useContracts()
  const { getTypedFeatureVote } = useTypedFeatureVote()
  const { waku } = useWaku()
@ -39,8 +38,6 @@ export function DirectoryInfo() {
          text="Vote on your favourite communities being included in
      Weekly Featured Communities"
        />
-
-        <ConnectionNetwork />
      </InfoWrap>
    )
  }
@ -53,8 +50,8 @@ export function DirectoryInfo() {
      Weekly Featured Communities"
      />

-      <ConnectionNetwork />
-      {isActive && featuredVotingState === 'verification' && (
+      {!account && <ConnectButton />}
+      {account && featuredVotingState === 'verification' && (
        <ProposeButton
          onClick={async () => {
            setLoading(true)
@ -84,7 +81,7 @@ export function DirectoryInfo() {
          )}
        </ProposeButton>
      )}
-      {isActive && featuredVotingState === 'ended' && (
+      {account && featuredVotingState === 'ended' && (
        <ProposeButton
          onClick={() => {
            finalizeVoting.send(finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)
--- a/packages/DApp/src/components/top/TopBar.tsx
+++ b/packages/DApp/src/components/top/TopBar.tsx
@ -1,16 +1,14 @@
 import React, { useEffect, useState } from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
-import { shortenAddress } from '@usedapp/core'
+import { useEthers, shortenAddress } from '@usedapp/core'
 import logo from '../../assets/images/logo.svg'
 import { Colors } from '../../constants/styles'
 import { Animation } from '../../constants/animation'
-import { ConnectionNetwork } from '../ConnectionNetwork'
-import { useAccount } from '../../hooks/useAccount'
-import { config } from '../../config'
+import { ConnectButton } from '../ConnectButton'

 export function TopBar() {
-  const { isActive, account, switchNetwork, deactivate } = useAccount()
+  const { account, deactivate } = useEthers()
  const [isOpened, setIsOpened] = useState(false)

  useEffect(() => {
@ -57,31 +55,15 @@ export function TopBar() {
                  e.stopPropagation()
                  setIsOpened(!isOpened)
                }}
-                isActive={isActive}
              >
-                {!isActive && '⚠️ '}
                {shortenAddress(account)}
              </Account>
-              <Subnav className={isOpened ? 'opened' : undefined}>
-                {!isActive && (
-                  <>
-                    <Warning>⚠️ Unsupported network</Warning>
-                    <ButtonDisconnect
-                      className={isOpened ? 'opened' : undefined}
-                      onClick={() => switchNetwork(config.daapConfig.readOnlyChainId!)}
-                    >
-                      Switch network
-                    </ButtonDisconnect>
-                  </>
-                )}
-
              <ButtonDisconnect className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
                Disconnect
              </ButtonDisconnect>
-              </Subnav>
            </AccountWrap>
          ) : (
-            <ConnectionNetwork autoWidth buttonText={'Connect'} />
+            <ButtonConnect text={'Connect'} />
          )}
        </MenuContent>
      </HeaderWrapper>
@ -211,17 +193,27 @@ export const StyledNavLink = styled(NavLink)`
  }
 `

+export const ButtonConnect = styled(ConnectButton)`
+  padding: 10px 27px;
+  width: auto;
+
+  @media (max-width: 600px) {
+    padding: 7px 27px;
+    margin-top: -9px;
+  }
+`
+
 export const AccountWrap = styled.div`
  position: relative;
 `

-export const Account = styled.button<{ isActive: boolean }>`
+export const Account = styled.button`
  position: relative;
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  color: ${Colors.Black};
-  padding: 11px 16px;
+  padding: 11px 12px 11px 28px;
  background: ${Colors.White};
  border: 1px solid ${Colors.GrayBorder};
  border-radius: 21px;
@ -237,11 +229,6 @@ export const Account = styled.button<{ isActive: boolean }>`
    border: 1px solid ${Colors.Violet};
  }

-  ${({ isActive }) =>
-    isActive &&
-    css`
-      padding: 11px 16px 11px 28px;
-
  &::before {
    content: '';
    width: 6px;
@ -254,46 +241,27 @@ export const Account = styled.button<{ isActive: boolean }>`
    bacground-position: center;
    border-radius: 50%;
  }
-    `}
 `
-
-export const Subnav = styled.div`
+export const ButtonDisconnect = styled.button`
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  padding: 15px 32px;
+  cursor: pointer;
+  color: ${Colors.VioletDark};
  background: ${Colors.White};
  border: 1px solid ${Colors.GrayBorder};
-  border-radius: 16px;
+  border-radius: 16px 4px 16px 16px;
  box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12);
  transition: all 0.3s;
  outline: none;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &.opened {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-    z-index: 10;
-  }
-`
-
-export const ButtonDisconnect = styled.button`
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 21px;
-  text-align: center;
-  cursor: pointer;
-  padding: 8px 16px;
-  color: ${Colors.VioletDark};
-  width: 100%;
-  display: flex;
-  justify-content: center;

  &:hover {
    background: ${Colors.VioletSecondaryDark};
@ -302,9 +270,11 @@ export const ButtonDisconnect = styled.button`
  &:active {
    background: ${Colors.VioletSecondaryLight};
  }
-`

-export const Warning = styled.div`
-  font-size: 10px;
-  padding: 16px 8px 6px;
+  &.opened {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    z-index: 10;
+  }
 `
--- a/packages/DApp/src/components/votes/VotesInfo.tsx
+++ b/packages/DApp/src/components/votes/VotesInfo.tsx
@ -1,15 +1,15 @@
 import React, { useState } from 'react'
 import { InfoWrap, PageInfo } from '../PageInfo'
+import { useEthers } from '@usedapp/core'
 import { Modal } from '../Modal'
 import { ProposeModal } from '../card/ProposeModal'
 import { VoteConfirmModal } from '../card/VoteConfirmModal'
 import { CommunityDetail } from '../../models/community'
 import { ProposeButton } from '../Button'
-import { ConnectionNetwork } from '../ConnectionNetwork'
-import { useAccount } from '../../hooks/useAccount'
+import { ConnectButton } from '../ConnectButton'

 export function VotesInfo() {
-  const { isActive } = useAccount()
+  const { account } = useEthers()
  const [showProposeModal, setShowProposeModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [communityFound, setCommunityFound] = useState<undefined | CommunityDetail>(undefined)
@ -44,8 +44,11 @@ export function VotesInfo() {
        </Modal>
      )}

-      {isActive && <ProposeButton onClick={() => setShowProposeModal(true)}>Propose community</ProposeButton>}
-      <ConnectionNetwork />
+      {account ? (
+        <ProposeButton onClick={() => setShowProposeModal(true)}>Propose community</ProposeButton>
+      ) : (
+        <ConnectButton />
+      )}
    </InfoWrap>
  )
 }
--- a/packages/DApp/src/components/votes/VotingEmpty.tsx
+++ b/packages/DApp/src/components/votes/VotingEmpty.tsx
@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react'
 import { InfoHeading, InfoText } from '../PageInfo'
+import { useEthers } from '@usedapp/core'
 import { Modal } from '../Modal'
 import { ProposeModal } from '../card/ProposeModal'
 import { VoteConfirmModal } from '../card/VoteConfirmModal'
 import { CommunityDetail } from '../../models/community'
 import { ProposeButton } from '../Button'
-import { ConnectionNetwork } from '../ConnectionNetwork'
+import { ConnectButton } from '../ConnectButton'
 import styled from 'styled-components'
 import { Colors, ColumnFlexDiv } from '../../constants/styles'
-import { useAccount } from '../../hooks/useAccount'

 export function VotingEmpty() {
-  const { isActive } = useAccount()
+  const { account } = useEthers()
  const [showProposeModal, setShowProposeModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [communityFound, setCommunityFound] = useState<undefined | CommunityDetail>(undefined)
@ -67,10 +67,13 @@ export function VotingEmpty() {
        </ColumnFlexDiv>

        {!mobileVersion && (
-          <>
-            {isActive && <ProposeButton onClick={() => setShowProposeModal(true)}>Propose community</ProposeButton>}
-            <ConnectionNetwork />
-          </>
+          <div>
+            {account ? (
+              <ProposeButton onClick={() => setShowProposeModal(true)}>Propose community</ProposeButton>
+            ) : (
+              <ConnectButton />
+            )}
+          </div>
        )}
      </VotingEmptyWrap>
    </div>
--- a/packages/DApp/src/componentsMobile/CardVoteMobile.tsx
+++ b/packages/DApp/src/componentsMobile/CardVoteMobile.tsx
@ -1,4 +1,4 @@
-import { useContractFunction } from '@usedapp/core'
+import { useContractFunction, useEthers } from '@usedapp/core'
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { VotesBtns, VoteBtn } from '../components/Button'
@ -22,14 +22,13 @@ import { useSendWakuVote } from '../hooks/useSendWakuVote'
 import { WrapperBottom, WrapperTop } from '../constants/styles'
 import { useUnverifiedVotes } from '../hooks/useUnverifiedVotes'
 import { useVotingBatches } from '../hooks/useVotingBatches'
-import { useAccount } from '../hooks/useAccount'

 interface CardVoteMobileProps {
  room: DetailedVotingRoom
 }

 export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
-  const { isActive, account } = useAccount()
+  const { account } = useEthers()
  const selectedVoted = voteTypes['Add'].for
  const [sentVotesFor, setSentVotesFor] = useState(0)
  const [sentVotesAgainst, setSentVotesAgainst] = useState(0)
@ -141,7 +140,7 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
              setSentVotesFor(0)
              setSentVotesAgainst(0)
            }}
-            disabled={!isActive}
+            disabled={!account}
          >
            Verify votes
          </VoteBtnFinal>
@ -149,7 +148,7 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
        {finalizationPeriod && (
          <VoteBtnFinal
            onClick={() => finalizeVoting.send(room.roomNumber, finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)}
-            disabled={!isActive}
+            disabled={!account}
          >
            Finalize the vote <span>✍️</span>
          </VoteBtnFinal>
--- a/packages/DApp/src/componentsMobile/ConnectMobile.tsx
+++ b/packages/DApp/src/componentsMobile/ConnectMobile.tsx
@ -1,15 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { shortenAddress } from '@usedapp/core'
+import { useEthers, shortenAddress } from '@usedapp/core'
 import infoIcon from '../assets/images/info.svg'
 import { Colors } from '../constants/styles'
-import { AccountWrap, Account, ButtonDisconnect, StyledNavLink, Subnav, Warning } from '../components/top/TopBar'
-import { ConnectionNetwork } from '../components/ConnectionNetwork'
-import { useAccount } from '../hooks/useAccount'
-import { config } from '../config'
+import { AccountWrap, Account, ButtonDisconnect, ButtonConnect, StyledNavLink } from '../components/top/TopBar'

 export const ConnectMobile = () => {
-  const { account, isActive, deactivate, switchNetwork } = useAccount()
+  const { account, deactivate } = useEthers()
  const [isOpened, setIsOpened] = useState(false)

  useEffect(() => {
@ -29,31 +26,15 @@ export const ConnectMobile = () => {
              e.stopPropagation()
              setIsOpened(!isOpened)
            }}
-            isActive={isActive}
          >
-            {!isActive && '⚠️ '}
            {shortenAddress(account)}
          </Account>
-          <Subnav className={isOpened ? 'opened' : undefined}>
-            {!isActive && (
-              <>
-                <Warning>⚠️ Unsupported network</Warning>
-                <ButtonDisconnect
-                  className={isOpened ? 'opened' : undefined}
-                  onClick={() => switchNetwork(config.daapConfig.readOnlyChainId!)}
-                >
-                  Switch network
-                </ButtonDisconnect>
-              </>
-            )}
-
          <ButtonDisconnect className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
            Disconnect
          </ButtonDisconnect>
-          </Subnav>
        </AccountWrap>
      ) : (
-        <ConnectionNetwork autoWidth buttonText={'Connect'} />
+        <ButtonConnect text={'Connect'} />
      )}
    </MenuContentMobile>
  )
--- a/packages/DApp/src/componentsMobile/FeatureMobile.tsx
+++ b/packages/DApp/src/componentsMobile/FeatureMobile.tsx
@ -15,20 +15,19 @@ import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
 import { HeaderVotingMobile } from './VotingMobile'
 import { ConnectMobile } from './ConnectMobile'
 import { HistoryLink } from './CardVoteMobile'
-import { useContractCall, useContractFunction } from '@usedapp/core'
+import { useContractCall, useContractFunction, useEthers } from '@usedapp/core'
 import { useGetCurrentVoting } from '../hooks/useGetCurrentVoting'
 import { MobileHeading, MobileBlock, MobileTop, MobileWrap, ColumnFlexDiv } from '../constants/styles'
 import { useFeaturedVotes } from '../hooks/useFeaturedVotes'
 import { useContracts } from '../hooks/useContracts'
 import { useSendWakuFeature } from '../hooks/useSendWakuFeature'
 import { useFeaturedVotingState } from '../hooks/useFeaturedVotingState'
-import { useAccount } from '../hooks/useAccount'

 export function FeatureMobile() {
  const { publicKey } = useParams<{ publicKey: string }>()
  const [community] = useCommunities([publicKey])
  const [proposingAmount, setProposingAmount] = useState(0)
-  const { account, isActive } = useAccount()
+  const { account } = useEthers()
  const sendWaku = useSendWakuFeature()
  const { activeVoting } = useFeaturedVotes()
  const { featuredVotingContract } = useContracts()
@ -66,11 +65,7 @@ export function FeatureMobile() {
          <VotePropose setProposingAmount={setProposingAmount} proposingAmount={proposingAmount} />
          <FeatureBtn
            disabled={
-              !account ||
-              !isActive ||
-              inFeatured ||
-              featuredVotingState === 'verification' ||
-              featuredVotingState === 'ended'
+              !account || inFeatured || featuredVotingState === 'verification' || featuredVotingState === 'ended'
            }
            onClick={async () => {
              if (!activeVoting) {
--- a/packages/DApp/src/hooks/useAccount.ts
+++ b/packages/DApp/src/hooks/useAccount.ts
@ -1,46 +0,0 @@
-import { useEthers } from '@usedapp/core'
-import { useEffect, useState } from 'react'
-
-type Error = {
-  name: string
-  message: string
-  stack?: string
-}
-
-export function useAccount() {
-  const {
-    error,
-    isLoading,
-    active,
-    switchNetwork,
-    activateBrowserWallet,
-    deactivate: deactivateBrowserWallet,
-    account,
-  } = useEthers()
-  const [activateError, setActivateError] = useState<Error | undefined>(undefined)
-  const [isActive, setIsActive] = useState(false)
-
-  useEffect(() => {
-    if (active && error && !isLoading) {
-      setActivateError(error)
-    } else if (!error) {
-      setActivateError(undefined)
-    }
-  }, [active, error, isLoading])
-
-  useEffect(() => {
-    setIsActive(Boolean(account && !activateError))
-  }, [account, activateError])
-
-  const activate = async () => {
-    setActivateError(undefined)
-    activateBrowserWallet()
-  }
-
-  const deactivate = async () => {
-    setActivateError(undefined)
-    deactivateBrowserWallet()
-  }
-
-  return { activate, deactivate, account, isActive, error: activateError, switchNetwork }
-}
--- a/packages/DApp/src/pagesMobile/DirectoryMobile.tsx
+++ b/packages/DApp/src/pagesMobile/DirectoryMobile.tsx
@ -11,21 +11,20 @@ import { WeeklyFeature } from '../components/WeeklyFeature'
 import { FilterList } from '../components/Filter'
 import { useHistory } from 'react-router'
 import { DirectorySkeletonMobile } from '../componentsMobile/DirectorySkeletonMobile'
-import { useContractFunction } from '@usedapp/core'
+import { useContractFunction, useEthers } from '@usedapp/core'
 import { useContracts } from '../hooks/useContracts'
 import { useFeaturedVotes } from '../hooks/useFeaturedVotes'
 import { useFeaturedVotingState } from '../hooks/useFeaturedVotingState'
 import { config } from '../config'
-import { ConnectionNetwork } from '../components/ConnectionNetwork'
+import { ConnectButton } from '../components/ConnectButton'
 import { ProposeButton } from './VotesMobile'
 import { useFeaturedBatches } from '../hooks/useFeaturedBatches'
 import { mapFeaturesVotes, receiveWakuFeature } from '../helpers/receiveWakuFeature'
 import { useTypedFeatureVote } from '../hooks/useTypedFeatureVote'
 import { useWaku } from '../providers/waku/provider'
-import { useAccount } from '../hooks/useAccount'

 export function DirectoryMobile() {
-  const { account, isActive } = useAccount()
+  const { account } = useEthers()
  const { featuredVotingContract } = useContracts()
  const { getTypedFeatureVote } = useTypedFeatureVote()
  const { waku } = useWaku()
@ -92,8 +91,8 @@ export function DirectoryMobile() {
        <WeeklyFeature />
        {renderCommunities()}
        <>
-          <ConnectionNetwork />
-          {isActive && featuredVotingState === 'verification' && (
+          {!account && <ConnectButton />}
+          {account && featuredVotingState === 'verification' && (
            <ProposeButton
              onClick={async () => {
                const { votesToSend } = await receiveWakuFeature(
@ -119,7 +118,7 @@ export function DirectoryMobile() {
              )}
            </ProposeButton>
          )}
-          {isActive && featuredVotingState === 'ended' && (
+          {account && featuredVotingState === 'ended' && (
            <ProposeButton
              onClick={() => {
                finalizeVoting.send(finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)
--- a/packages/DApp/src/pagesMobile/VotesMobile.tsx
+++ b/packages/DApp/src/pagesMobile/VotesMobile.tsx
@ -12,13 +12,13 @@ import { VotingSortingOptions } from '../constants/SortingOptions'
 import { VotingCardCover } from '../componentsMobile/VotingCardCover'
 import { ButtonPrimary } from '../components/Button'
 import { useHistory } from 'react-router'
-import { ConnectionNetwork } from '../components/ConnectionNetwork'
+import { useEthers } from '@usedapp/core'
+import { ConnectButton } from '../components/ConnectButton'
 import { VotingSkeletonMobile } from '../componentsMobile/VotingSkeletonMobile'
 import { DetailedVotingRoom } from '../models/smartContract'
-import { useAccount } from '../hooks/useAccount'

 export function VotesMobile() {
-  const { isActive } = useAccount()
+  const { account } = useEthers()
  const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
  const [voteType, setVoteType] = useState('')
  const [filterKeyword, setFilterKeyword] = useState('')
@ -62,8 +62,11 @@ export function VotesMobile() {
      <VotingCardsWrapper>{renderCommunities()}</VotingCardsWrapper>

      <ProposeButtonWrapper>
-        {isActive && <ProposeButton onClick={() => history.push('/propose')}>Propose community</ProposeButton>}
-        <ConnectionNetwork />
+        {account ? (
+          <ProposeButton onClick={() => history.push('/propose')}>Propose community</ProposeButton>
+        ) : (
+          <ConnectButton />
+        )}
      </ProposeButtonWrapper>
    </div>
  )