ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: render components on first frame (#2404)

Browse Source 
* fix(nav): render Vote link while awaiting connection

Minimizes layout shift in the normal case.

* perf: inline logo svg

* perf: display connect button for web3 initial state
This commit is contained in:
Zach Pomerantz 2021-09-20 16:03:57 -07:00 committed by GitHub
parent 1a73f513dc
commit e242faca86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Header/index.tsx
View File

@ -11,8 +11,8 @@ import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
import { useDarkModeManager } from 'state/user/hooks'
import { useETHBalances } from 'state/wallet/hooks'
import styled from 'styled-components/macro'
import Logo from '../../assets/svg/logo.svg'
import LogoDark from '../../assets/svg/logo_white.svg'
import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
import { ReactComponent as LogoDark } from '../../assets/svg/logo_white.svg'
import { useActiveWeb3React } from '../../hooks/web3'
import { ExternalLink, TYPE } from '../../theme'
import ClaimModal from '../claim/ClaimModal'
@ -264,7 +264,11 @@ export default function Header() {
</Modal>
<Title href=".">
<UniIcon>
<img width={'24px'} src={darkMode ? LogoDark : Logo} alt="logo" />
{darkMode ? (
<LogoDark width="24px" height="100%" title="logo" />
) : (
<Logo width="24px" height="100%" title="logo" />
)}
</UniIcon>
</Title>
<HeaderLinks>
@ -284,7 +288,7 @@ export default function Header() {
>
<Trans>Pool</Trans>
</StyledNavLink>
{chainId && chainId === SupportedChainId.MAINNET && (
{(!chainId || chainId === SupportedChainId.MAINNET) && (
<StyledNavLink id={`vote-nav-link`} to={'/vote'}>
<Trans>Vote</Trans>
</StyledNavLink>

8
src/components/Web3Status/index.tsx
View File

@ -235,14 +235,12 @@ export default function Web3Status() {
const pending = sortedRecentTransactions.filter((tx) => !tx.receipt).map((tx) => tx.hash)
const confirmed = sortedRecentTransactions.filter((tx) => tx.receipt).map((tx) => tx.hash)
if (!contextNetwork.active && !active) {
return null
}
return (
<>
<Web3StatusInner />
<WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
{(contextNetwork.active || active) && (
<WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
)}
</>
)
}