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

chore: rm redesign flag in WalletModal (#4957)

Browse Source
This commit is contained in:
vignesh mohankumar 2022-10-18 12:38:57 -04:00 committed by GitHub
parent 5462526f53
commit f2a33b6f6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/WalletModal/Option.tsx
View File

@ -1,26 +1,22 @@
import { ElementName, Event, EventName } from 'analytics/constants' import { ElementName, Event, EventName } from 'analytics/constants'
import { TraceEvent } from 'analytics/TraceEvent' import { TraceEvent } from 'analytics/TraceEvent'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import React from 'react' import React from 'react'
import { Check } from 'react-feather' import { Check } from 'react-feather'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ExternalLink } from '../../theme' import { ExternalLink } from '../../theme'
const InfoCard = styled.button<{ isActive?: boolean; redesignFlag?: boolean }>` const InfoCard = styled.button<{ isActive?: boolean }>`
background-color: ${({ theme, isActive, redesignFlag }) => background-color: ${({ theme }) => theme.backgroundInteractive};
redesignFlag ? theme.backgroundInteractive : isActive ? theme.deprecated_bg3 : theme.deprecated_bg2};
padding: 1rem; padding: 1rem;
outline: none; outline: none;
border: 1px solid; border: 1px solid;
border-radius: 12px; border-radius: 12px;
width: 100% !important; width: 100% !important;
&:focus { &:focus {
box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1px ${theme.deprecated_primary1}`}; background-color: ${({ theme }) => theme.hoverState};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
} }
border-color: ${({ theme, isActive, redesignFlag }) => border-color: ${({ theme, isActive }) => (isActive ? theme.accentActive : 'transparent')};
redesignFlag ? (isActive ? theme.accentActive : 'transparent') : isActive ? 'transparent' : theme.deprecated_bg3};
` `
const CheckIcon = styled(Check)` const CheckIcon = styled(Check)`
@ -53,48 +49,24 @@ const OptionCardLeft = styled.div`
const OptionCardClickable = styled(OptionCard as any)<{ const OptionCardClickable = styled(OptionCard as any)<{
active?: boolean active?: boolean
clickable?: boolean clickable?: boolean
redesignFlag?: boolean
}>` }>`
margin-top: 0; margin-top: 0;
border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`}; border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`};
&:hover { &:hover {
cursor: ${({ clickable }) => clickable && 'pointer'}; cursor: ${({ clickable }) => clickable && 'pointer'};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState}; background-color: ${({ theme }) => theme.hoverState};
border: ${({ clickable, redesignFlag, theme }) =>
clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`};
} }
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')}; opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
` `
const GreenCircle = styled.div` const HeaderText = styled.div`
${({ theme }) => theme.flexRowNoWrap}
justify-content: center;
align-items: center;
&:first-child {
height: 8px;
width: 8px;
margin-right: 8px;
background-color: ${({ theme }) => theme.deprecated_green1};
border-radius: 50%;
}
`
const CircleWrapper = styled.div`
color: ${({ theme }) => theme.deprecated_green1};
display: flex;
justify-content: center;
align-items: center;
`
const HeaderText = styled.div<{ redesignFlag?: boolean }>`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${(props) => color: ${(props) =>
props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1}; props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '1rem')}; font-size: 16px;
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')}; font-weight: 600;
` `
const SubHeader = styled.div` const SubHeader = styled.div`
@ -103,20 +75,6 @@ const SubHeader = styled.div`
font-size: 12px; font-size: 12px;
` `
const IconWrapperDeprecated = styled.div<{ size?: number | null }>`
${({ theme }) => theme.flexColumnNoWrap};
align-items: center;
justify-content: center;
& > img,
span {
height: ${({ size }) => (size ? size + 'px' : '24px')};
width: ${({ size }) => (size ? size + 'px' : '24px')};
}
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: flex-end;
`};
`
const IconWrapper = styled.div<{ size?: number | null }>` const IconWrapper = styled.div<{ size?: number | null }>`
${({ theme }) => theme.flexColumnNoWrap}; ${({ theme }) => theme.flexColumnNoWrap};
align-items: center; align-items: center;
@ -155,9 +113,6 @@ export default function Option({
isActive?: boolean isActive?: boolean
id: string id: string
}) { }) {
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const content = ( const content = (
<TraceEvent <TraceEvent
events={[Event.onClick]} events={[Event.onClick]}
@ -165,53 +120,24 @@ export default function Option({
properties={{ wallet_type: header }} properties={{ wallet_type: header }}
element={ElementName.WALLET_TYPE_OPTION} element={ElementName.WALLET_TYPE_OPTION}
> >
{redesignFlagEnabled ? ( <OptionCardClickable
<OptionCardClickable id={id}
id={id} onClick={onClick}
onClick={onClick} clickable={clickable && !isActive}
clickable={clickable && !isActive} active={isActive}
active={isActive} data-testid="wallet-modal-option"
redesignFlag={true} >
data-testid="wallet-modal-option" <OptionCardLeft>
> <HeaderText color={color}>
<OptionCardLeft> <IconWrapper size={size}>
<HeaderText color={color} redesignFlag={true}> <img src={icon} alt={'Icon'} />
<IconWrapper size={size}> </IconWrapper>
<img src={icon} alt={'Icon'} /> {header}
</IconWrapper> </HeaderText>
{header} {subheader && <SubHeader>{subheader}</SubHeader>}
</HeaderText> </OptionCardLeft>
{subheader && <SubHeader>{subheader}</SubHeader>} {isActive && <CheckIcon />}
</OptionCardLeft> </OptionCardClickable>
{isActive && <CheckIcon />}
</OptionCardClickable>
) : (
<OptionCardClickable
id={id}
onClick={onClick}
clickable={clickable && !isActive}
active={isActive}
redesignFlag={false}
data-testid="wallet-modal-option"
>
<OptionCardLeft>
<HeaderText color={color} redesignFlag={false}>
{isActive && (
<CircleWrapper>
<GreenCircle>
<div />
</GreenCircle>
</CircleWrapper>
)}
{header}
</HeaderText>
{subheader && <SubHeader>{subheader}</SubHeader>}
</OptionCardLeft>
<IconWrapperDeprecated size={size}>
<img src={icon} alt={'Icon'} />
</IconWrapperDeprecated>
</OptionCardClickable>
)}
</TraceEvent> </TraceEvent>
) )
if (link) { if (link) {

37
src/components/WalletModal/index.tsx
View File

@ -8,7 +8,6 @@ import { AutoColumn } from 'components/Column'
import { AutoRow } from 'components/Row' import { AutoRow } from 'components/Row'
import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils' import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
import { NftVariant, useNftFlag } from 'featureFlags/flags/nft' import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import usePrevious from 'hooks/usePrevious' import usePrevious from 'hooks/usePrevious'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { ArrowLeft } from 'react-feather' import { ArrowLeft } from 'react-feather'
@ -47,30 +46,30 @@ const CloseColor = styled(Close)`
} }
` `
const Wrapper = styled.div<{ redesignFlag?: boolean }>` const Wrapper = styled.div`
${({ theme }) => theme.flexColumnNoWrap} ${({ theme }) => theme.flexColumnNoWrap}
background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface}; background-color: ${({ theme }) => theme.backgroundSurface};
outline: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`}; outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
box-shadow: ${({ redesignFlag, theme }) => redesignFlag && theme.deepShadow}; box-shadow: ${({ theme }) => theme.deepShadow};
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
` `
const HeaderRow = styled.div<{ redesignFlag?: boolean }>` const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
padding: 1rem 1rem; padding: 1rem 1rem;
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')}; font-weight: 600;
size: ${({ redesignFlag }) => redesignFlag && '16px'}; size: 16px;
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')}; color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium` ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 1rem; padding: 1rem;
`}; `};
` `
const ContentWrapper = styled.div<{ redesignFlag?: boolean }>` const ContentWrapper = styled.div`
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)}; background-color: ${({ theme }) => theme.backgroundSurface};
border: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`}; border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
padding: 0 1rem 1rem 1rem; padding: 0 1rem 1rem 1rem;
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
@ -155,8 +154,6 @@ export default function WalletModal({
const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets() const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const nftFlagEnabled = useNftFlag() === NftVariant.Enabled const nftFlagEnabled = useNftFlag() === NftVariant.Enabled
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT) const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account) const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
@ -301,7 +298,7 @@ export default function WalletModal({
) )
} else { } else {
headerRow = ( headerRow = (
<HeaderRow redesignFlag={redesignFlagEnabled}> <HeaderRow>
<HoverText> <HoverText>
<Trans>Connect a wallet</Trans> <Trans>Connect a wallet</Trans>
</HoverText> </HoverText>
@ -367,16 +364,8 @@ export default function WalletModal({
} }
return ( return (
<Modal <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
isOpen={walletModalOpen} <Wrapper data-testid="wallet-modal">{getModalContent()}</Wrapper>
onDismiss={toggleWalletModal}
minHeight={false}
maxHeight={90}
redesignFlag={redesignFlagEnabled}
>
<Wrapper data-testid="wallet-modal" redesignFlag={redesignFlagEnabled}>
{getModalContent()}
</Wrapper>
</Modal> </Modal>
) )
} }