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 { TraceEvent } from 'analytics/TraceEvent'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import React from 'react'
import { Check } from 'react-feather'
import styled from 'styled-components/macro'
import { ExternalLink } from '../../theme'
const InfoCard = styled.button<{ isActive?: boolean; redesignFlag?: boolean }>`
background-color: ${({ theme, isActive, redesignFlag }) =>
redesignFlag ? theme.backgroundInteractive : isActive ? theme.deprecated_bg3 : theme.deprecated_bg2};
const InfoCard = styled.button<{ isActive?: boolean }>`
background-color: ${({ theme }) => theme.backgroundInteractive};
padding: 1rem;
outline: none;
border: 1px solid;
border-radius: 12px;
width: 100% !important;
&:focus {
box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1px ${theme.deprecated_primary1}`};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
background-color: ${({ theme }) => theme.hoverState};
}
border-color: ${({ theme, isActive, redesignFlag }) =>
redesignFlag ? (isActive ? theme.accentActive : 'transparent') : isActive ? 'transparent' : theme.deprecated_bg3};
border-color: ${({ theme, isActive }) => (isActive ? theme.accentActive : 'transparent')};
`
const CheckIcon = styled(Check)`
@ -53,48 +49,24 @@ const OptionCardLeft = styled.div`
const OptionCardClickable = styled(OptionCard as any)<{
active?: boolean
clickable?: boolean
redesignFlag?: boolean
}>`
margin-top: 0;
border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`};
&:hover {
cursor: ${({ clickable }) => clickable && 'pointer'};
background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
border: ${({ clickable, redesignFlag, theme }) =>
clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`};
background-color: ${({ theme }) => theme.hoverState};
}
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
`
const GreenCircle = 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 }>`
const HeaderText = styled.div`
${({ theme }) => theme.flexRowNoWrap};
align-items: center;
justify-content: center;
color: ${(props) =>
props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '1rem')};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
font-size: 16px;
font-weight: 600;
`
const SubHeader = styled.div`
@ -103,20 +75,6 @@ const SubHeader = styled.div`
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 }>`
${({ theme }) => theme.flexColumnNoWrap};
align-items: center;
@ -155,9 +113,6 @@ export default function Option({
isActive?: boolean
id: string
}) {
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const content = (
<TraceEvent
events={[Event.onClick]}
@ -165,53 +120,24 @@ export default function Option({
properties={{ wallet_type: header }}
element={ElementName.WALLET_TYPE_OPTION}
>
{redesignFlagEnabled ? (
<OptionCardClickable
id={id}
onClick={onClick}
clickable={clickable && !isActive}
active={isActive}
redesignFlag={true}
data-testid="wallet-modal-option"
>
<OptionCardLeft>
<HeaderText color={color} redesignFlag={true}>
<IconWrapper size={size}>
<img src={icon} alt={'Icon'} />
</IconWrapper>
{header}
</HeaderText>
{subheader && <SubHeader>{subheader}</SubHeader>}
</OptionCardLeft>
{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>
)}
<OptionCardClickable
id={id}
onClick={onClick}
clickable={clickable && !isActive}
active={isActive}
data-testid="wallet-modal-option"
>
<OptionCardLeft>
<HeaderText color={color}>
<IconWrapper size={size}>
<img src={icon} alt={'Icon'} />
</IconWrapper>
{header}
</HeaderText>
{subheader && <SubHeader>{subheader}</SubHeader>}
</OptionCardLeft>
{isActive && <CheckIcon />}
</OptionCardClickable>
</TraceEvent>
)
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 { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import usePrevious from 'hooks/usePrevious'
import { useCallback, useEffect, useState } from 'react'
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}
background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface};
outline: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
box-shadow: ${({ redesignFlag, theme }) => redesignFlag && theme.deepShadow};
background-color: ${({ theme }) => theme.backgroundSurface};
outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
box-shadow: ${({ theme }) => theme.deepShadow};
margin: 0;
padding: 0;
width: 100%;
`
const HeaderRow = styled.div<{ redesignFlag?: boolean }>`
const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap};
padding: 1rem 1rem;
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
size: ${({ redesignFlag }) => redesignFlag && '16px'};
font-weight: 600;
size: 16px;
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 1rem;
`};
`
const ContentWrapper = styled.div<{ redesignFlag?: boolean }>`
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
border: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
const ContentWrapper = styled.div`
background-color: ${({ theme }) => theme.backgroundSurface};
border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
padding: 0 1rem 1rem 1rem;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
@ -155,8 +154,6 @@ export default function WalletModal({
const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets()
const redesignFlag = useRedesignFlag()
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const nftFlagEnabled = useNftFlag() === NftVariant.Enabled
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
@ -301,7 +298,7 @@ export default function WalletModal({
)
} else {
headerRow = (
<HeaderRow redesignFlag={redesignFlagEnabled}>
<HeaderRow>
<HoverText>
<Trans>Connect a wallet</Trans>
</HoverText>
@ -367,16 +364,8 @@ export default function WalletModal({
}
return (
<Modal
isOpen={walletModalOpen}
onDismiss={toggleWalletModal}
minHeight={false}
maxHeight={90}
redesignFlag={redesignFlagEnabled}
>
<Wrapper data-testid="wallet-modal" redesignFlag={redesignFlagEnabled}>
{getModalContent()}
</Wrapper>
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper data-testid="wallet-modal">{getModalContent()}</Wrapper>
</Modal>
)
}