diff --git a/packages/DApp/src/components/ConnectButton.tsx b/packages/DApp/src/components/ConnectButton.tsx new file mode 100644 index 0000000..85f3e76 --- /dev/null +++ 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 ( +
+ + {!text ? 'Connect to Vote' : text} + +
+ ) +} diff --git a/packages/DApp/src/components/ConnectionNetwork.tsx b/packages/DApp/src/components/ConnectionNetwork.tsx deleted file mode 100644 index 076533c..0000000 --- a/packages/DApp/src/components/ConnectionNetwork.tsx +++ /dev/null @@ -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' && ( - - - - )} - {error?.name === 'ChainIdError' && Boolean(config.daapConfig.readOnlyChainId) && ( - switchNetwork(config.daapConfig.readOnlyChainId!)}> - Switch Network - - )} - - ) - } - - return ( - - {!buttonText ? 'Connect to Vote' : buttonText} - - ) -} - -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; - }`} -` diff --git a/packages/DApp/src/components/card/CardCommunity.tsx b/packages/DApp/src/components/card/CardCommunity.tsx index ec9acde..e63fc11 100644 --- 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.icon && } - {showRemoveButton && !currentVoting && } + {showRemoveButton && !currentVoting && } {customHeading ? customHeading : community.name} {showRemoveButton && !currentVoting && ( - setShowRemoveModal(true)} disabled={!isActive} /> + setShowRemoveModal(true)} disabled={!account} /> )} {community.description} diff --git a/packages/DApp/src/components/card/CardFeature.tsx b/packages/DApp/src/components/card/CardFeature.tsx index ed80e0e..1dd57a2 100644 --- 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.from(0)) @@ -119,7 +118,6 @@ export const CardFeature = ({ community, featured }: CardFeatureProps) => { { - 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 && ( finalizeVoting.send(room.roomNumber, finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)} - disabled={!isActive} + disabled={!account} > <> Finalize the vote ✍️ @@ -214,7 +214,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => { {!verificationPeriod && !finalizationPeriod && ( { setSelectedVoted(voteConstants.against) setShowVoteModal(true) @@ -223,7 +223,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => { {voteConstants.against.text} {voteConstants.against.icon} { setSelectedVoted(voteConstants.for) setShowVoteModal(true) diff --git a/packages/DApp/src/components/directory/DirectoryInfo.tsx b/packages/DApp/src/components/directory/DirectoryInfo.tsx index 72961e0..923f896 100644 --- 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" /> - - ) } @@ -53,8 +50,8 @@ export function DirectoryInfo() { Weekly Featured Communities" /> - - {isActive && featuredVotingState === 'verification' && ( + {!account && } + {account && featuredVotingState === 'verification' && ( { setLoading(true) @@ -84,7 +81,7 @@ export function DirectoryInfo() { )} )} - {isActive && featuredVotingState === 'ended' && ( + {account && featuredVotingState === 'ended' && ( { finalizeVoting.send(finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit) diff --git a/packages/DApp/src/components/top/TopBar.tsx b/packages/DApp/src/components/top/TopBar.tsx index 518e3a2..fb0a8b3 100644 --- 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)} - - {!isActive && ( - <> - ⚠️ Unsupported network - switchNetwork(config.daapConfig.readOnlyChainId!)} - > - Switch network - - - )} - - deactivate()}> - Disconnect - - + deactivate()}> + Disconnect + ) : ( - + )} @@ -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,63 +229,39 @@ export const Account = styled.button<{ isActive: boolean }>` border: 1px solid ${Colors.Violet}; } - ${({ isActive }) => - isActive && - css` - padding: 11px 16px 11px 28px; - - &::before { - content: ''; - width: 6px; - height: 6px; - position: absolute; - top: 50%; - left: 17px; - transform: translate(-50%, -50%); - background-color: ${Colors.Green}; - bacground-position: center; - border-radius: 50%; - } - `} + &::before { + content: ''; + width: 6px; + height: 6px; + position: absolute; + top: 50%; + left: 17px; + transform: translate(-50%, -50%); + background-color: ${Colors.Green}; + 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; + } ` diff --git a/packages/DApp/src/components/votes/VotesInfo.tsx b/packages/DApp/src/components/votes/VotesInfo.tsx index 5821c07..be3233c 100644 --- 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) @@ -44,8 +44,11 @@ export function VotesInfo() { )} - {isActive && setShowProposeModal(true)}>Propose community} - + {account ? ( + setShowProposeModal(true)}>Propose community + ) : ( + + )} ) } diff --git a/packages/DApp/src/components/votes/VotingEmpty.tsx b/packages/DApp/src/components/votes/VotingEmpty.tsx index 153f799..cca4308 100644 --- 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) @@ -67,10 +67,13 @@ export function VotingEmpty() { {!mobileVersion && ( - <> - {isActive && setShowProposeModal(true)}>Propose community} - - +
+ {account ? ( + setShowProposeModal(true)}>Propose community + ) : ( + + )} +
)} diff --git a/packages/DApp/src/componentsMobile/CardVoteMobile.tsx b/packages/DApp/src/componentsMobile/CardVoteMobile.tsx index eb8166b..a445da6 100644 --- 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 @@ -149,7 +148,7 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => { {finalizationPeriod && ( finalizeVoting.send(room.roomNumber, finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit)} - disabled={!isActive} + disabled={!account} > Finalize the vote ✍️ diff --git a/packages/DApp/src/componentsMobile/ConnectMobile.tsx b/packages/DApp/src/componentsMobile/ConnectMobile.tsx index 40c458b..2cbc64a 100644 --- 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)} - - {!isActive && ( - <> - ⚠️ Unsupported network - switchNetwork(config.daapConfig.readOnlyChainId!)} - > - Switch network - - - )} - - deactivate()}> - Disconnect - - + deactivate()}> + Disconnect + ) : ( - + )} ) diff --git a/packages/DApp/src/componentsMobile/FeatureMobile.tsx b/packages/DApp/src/componentsMobile/FeatureMobile.tsx index e0ddf2a..3188cff 100644 --- 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() { { if (!activeVoting) { diff --git a/packages/DApp/src/hooks/useAccount.ts b/packages/DApp/src/hooks/useAccount.ts deleted file mode 100644 index cea8b6b..0000000 --- a/packages/DApp/src/hooks/useAccount.ts +++ /dev/null @@ -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(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 } -} diff --git a/packages/DApp/src/pagesMobile/DirectoryMobile.tsx b/packages/DApp/src/pagesMobile/DirectoryMobile.tsx index e47e8ec..fbfd0e9 100644 --- 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() { {renderCommunities()} <> - - {isActive && featuredVotingState === 'verification' && ( + {!account && } + {account && featuredVotingState === 'verification' && ( { const { votesToSend } = await receiveWakuFeature( @@ -119,7 +118,7 @@ export function DirectoryMobile() { )} )} - {isActive && featuredVotingState === 'ended' && ( + {account && featuredVotingState === 'ended' && ( { finalizeVoting.send(finalizeVotingLimit < 1 ? 1 : finalizeVotingLimit) diff --git a/packages/DApp/src/pagesMobile/VotesMobile.tsx b/packages/DApp/src/pagesMobile/VotesMobile.tsx index 16e0379..b01febd 100644 --- 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() { {renderCommunities()} - {isActive && history.push('/propose')}>Propose community} - + {account ? ( + history.push('/propose')}>Propose community + ) : ( + + )} )