chore: rm redesign flag in WalletModal (#4957)

src/components/WalletModal/Option.tsx

@@ -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 }>`
+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;
   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 }) => 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)`
@@ -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};
+    background-color: ${({ theme }) => theme.hoverState};
-    border: ${({ clickable, redesignFlag, theme }) =>
-      clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`};
   }
   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};
   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-size: 16px;
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+  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,17 +120,15 @@ 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}>
+          <HeaderText color={color}>
             <IconWrapper size={size}>
               <img src={icon} alt={'Icon'} />
             </IconWrapper>
@@ -185,33 +138,6 @@ export default function Option({
         </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>
-      )}
     </TraceEvent>
   )
   if (link) {

src/components/WalletModal/index.tsx

@@ -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};
+  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;
   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')};
+  font-weight: 600;
-  size: ${({ redesignFlag }) => redesignFlag && '16px'};
+  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 }>`
+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;
   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
+    <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>
   )
 }