fix: Web 1258 token selector remove import from token list functionality (#4726)

* testing

* init

* respond to vm comments and remove dead code

* remove dead code

* update snapshot

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -6,12 +6,6 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   color: #6E727D;
 }
 
-.c0 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,6 +25,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   grid-auto-rows: auto;
 }
 
+.c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
 .c1 {
   width: 100%;
   display: -webkit-box;

src/components/SearchModal/CurrencyList/index.tsx

@@ -3,19 +3,14 @@ import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
-import { LightGreyCard } from 'components/Card'
-import QuestionHelper from 'components/QuestionHelper'
-import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
-import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import styled, { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
-import TokenListLogo from '../../../assets/svg/tokenlist.svg'
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { useCurrencyBalance } from '../../../state/connection/hooks'
 import { useCombinedActiveList } from '../../../state/lists/hooks'
@@ -25,9 +20,8 @@ import { isTokenOnList } from '../../../utils'
 import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../CurrencyLogo'
 import Loader from '../../Loader'
-import Row, { RowBetween, RowFixed } from '../../Row'
+import Row, { RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
-import ImportRow from '../ImportRow'
 import { LoadingRows, MenuItem } from '../styleds'
 
 function currencyKey(currency: Currency): string {
@@ -69,13 +63,6 @@ const Tag = styled.div`
   margin-right: 4px;
 `
 
-const FixedContentRow = styled.div`
-  padding: 4px 20px;
-  height: 56px;
-  display: grid;
-  grid-gap: 16px;
-  align-items: center;
-`
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
   return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
 }
@@ -85,10 +72,6 @@ const TagContainer = styled.div`
   justify-content: flex-end;
 `
 
-const TokenListLogoWrapper = styled.img`
-  height: 20px;
-`
-
 function TokenTags({ currency }: { currency: Currency }) {
   if (!(currency instanceof WrappedTokenInfo)) {
     return null
@@ -118,7 +101,7 @@ function TokenTags({ currency }: { currency: Currency }) {
   )
 }
 
-function CurrencyRow({
+export function CurrencyRow({
   currency,
   onSelect,
   isSelected,
@@ -131,7 +114,7 @@ function CurrencyRow({
   onSelect: (hasWarning: boolean) => void
   isSelected: boolean
   otherSelected: boolean
-  style: CSSProperties
+  style?: CSSProperties
   showCurrencyAmount?: boolean
   eventProperties: Record<string, unknown>
 }) {
@@ -144,7 +127,6 @@ function CurrencyRow({
   const warning = currency.isNative ? null : checkWarning(currency.address)
   const redesignFlag = useRedesignFlag()
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-  const tokenSafetyFlag = useTokenSafetyFlag()
 
   // only show add or remove buttons if not on selected list
   return (
@@ -170,8 +152,6 @@ function CurrencyRow({
         <AutoColumn>
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
-
-            {tokenSafetyFlag === TokenSafetyVariant.Enabled && <TokenSafetyIcon warning={warning} />}
           </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
@@ -204,44 +184,13 @@ function CurrencyRow({
   )
 }
 
-const BREAK_LINE = 'BREAK'
-type BreakLine = typeof BREAK_LINE
-function isBreakLine(x: unknown): x is BreakLine {
-  return x === BREAK_LINE
-}
-
-function BreakLineComponent({ style }: { style: CSSProperties }) {
-  const theme = useTheme()
-  return (
-    <FixedContentRow style={style}>
-      <LightGreyCard padding="8px 12px" $borderRadius="8px">
-        <RowBetween>
-          <RowFixed>
-            <TokenListLogoWrapper src={TokenListLogo} />
-            <ThemedText.DeprecatedMain ml="6px" fontSize="12px" color={theme.deprecated_text1}>
-              <Trans>Expanded results from inactive Token Lists</Trans>
-            </ThemedText.DeprecatedMain>
-          </RowFixed>
-          <QuestionHelper
-            text={
-              <Trans>
-                Tokens from inactive lists. Import specific tokens below or click Manage to activate more lists.
-              </Trans>
-            }
-          />
-        </RowBetween>
-      </LightGreyCard>
-    </FixedContentRow>
-  )
-}
-
 interface TokenRowProps {
-  data: Array<Currency | BreakLine>
+  data: Array<Currency>
   index: number
   style: CSSProperties
 }
 
-const formatAnalyticsEventProperties = (
+export const formatAnalyticsEventProperties = (
   token: Token,
   index: number,
   data: any[],
@@ -268,8 +217,6 @@ export default function CurrencyList({
   onCurrencySelect,
   otherCurrency,
   fixedListRef,
-  showImportView,
-  setImportToken,
   showCurrencyAmount,
   isLoading,
   searchQuery,
@@ -282,27 +229,21 @@ export default function CurrencyList({
   onCurrencySelect: (currency: Currency, hasWarning?: boolean) => void
   otherCurrency?: Currency | null
   fixedListRef?: MutableRefObject<FixedSizeList | undefined>
-  showImportView: () => void
-  setImportToken: (token: Token) => void
   showCurrencyAmount?: boolean
   isLoading: boolean
   searchQuery: string
   isAddressSearch: string | false
 }) {
-  const itemData: (Currency | BreakLine)[] = useMemo(() => {
+  const itemData: Currency[] = useMemo(() => {
     if (otherListTokens && otherListTokens?.length > 0) {
-      return [...currencies, BREAK_LINE, ...otherListTokens]
+      return [...currencies, ...otherListTokens]
     }
     return currencies
   }, [currencies, otherListTokens])
 
   const Row = useCallback(
     function TokenRow({ data, index, style }: TokenRowProps) {
-      const row: Currency | BreakLine = data[index]
-
-      if (isBreakLine(row)) {
-        return <BreakLineComponent style={style} />
-      }
+      const row: Currency = data[index]
 
       const currency = row
 
@@ -312,8 +253,6 @@ export default function CurrencyList({
 
       const token = currency?.wrapped
 
-      const showImport = index > currencies.length
-
       if (isLoading) {
         return (
           <LoadingRows>
@@ -322,10 +261,6 @@ export default function CurrencyList({
             <div />
           </LoadingRows>
         )
-      } else if (showImport && token) {
-        return (
-          <ImportRow style={style} token={token} showImportView={showImportView} setImportToken={setImportToken} dim />
-        )
       } else if (currency) {
         return (
           <CurrencyRow
@@ -342,23 +277,11 @@ export default function CurrencyList({
         return null
       }
     },
-    [
-      currencies.length,
-      onCurrencySelect,
-      otherCurrency,
-      selectedCurrency,
-      setImportToken,
-      showImportView,
-      showCurrencyAmount,
-      isLoading,
-      isAddressSearch,
-      searchQuery,
-    ]
+    [onCurrencySelect, otherCurrency, selectedCurrency, showCurrencyAmount, isLoading, isAddressSearch, searchQuery]
   )
 
   const itemKey = useCallback((index: number, data: typeof itemData) => {
     const currency = data[index]
-    if (isBreakLine(currency)) return BREAK_LINE
     return currencyKey(currency)
   }, [])
 

src/components/SearchModal/CurrencySearch.tsx

@@ -26,8 +26,8 @@ import { isAddress } from '../../utils'
 import Column from '../Column'
 import Row, { RowBetween, RowFixed } from '../Row'
 import CommonBases from './CommonBases'
+import { CurrencyRow, formatAnalyticsEventProperties } from './CurrencyList'
 import CurrencyList from './CurrencyList'
-import ImportRow from './ImportRow'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 
 const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
@@ -57,8 +57,6 @@ interface CurrencySearchProps {
   showCurrencyAmount?: boolean
   disableNonToken?: boolean
   showManageView: () => void
-  showImportView: () => void
-  setImportToken: (token: Token) => void
 }
 
 export function CurrencySearch({
@@ -71,8 +69,6 @@ export function CurrencySearch({
   onDismiss,
   isOpen,
   showManageView,
-  showImportView,
-  setImportToken,
 }: CurrencySearchProps) {
   const redesignFlag = useRedesignFlag()
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
@@ -230,7 +226,20 @@ export function CurrencySearch({
         <Separator redesignFlag={redesignFlagEnabled} />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
-            <ImportRow token={searchToken} showImportView={showImportView} setImportToken={setImportToken} />
+            <CurrencyRow
+              currency={searchToken}
+              isSelected={Boolean(searchToken && selectedCurrency && selectedCurrency.equals(searchToken))}
+              onSelect={(hasWarning: boolean) => searchToken && handleCurrencySelect(searchToken, hasWarning)}
+              otherSelected={Boolean(searchToken && otherSelectedCurrency && otherSelectedCurrency.equals(searchToken))}
+              showCurrencyAmount={showCurrencyAmount}
+              eventProperties={formatAnalyticsEventProperties(
+                searchToken,
+                0,
+                [searchToken],
+                searchQuery,
+                isAddressSearch
+              )}
+            />
           </Column>
         ) : filteredSortedTokens?.length > 0 || filteredInactiveTokens?.length > 0 ? (
           <div style={{ flex: '1' }}>
@@ -244,8 +253,6 @@ export function CurrencySearch({
                   otherCurrency={otherSelectedCurrency}
                   selectedCurrency={selectedCurrency}
                   fixedListRef={fixedList}
-                  showImportView={showImportView}
-                  setImportToken={setImportToken}
                   showCurrencyAmount={showCurrencyAmount}
                   isLoading={balancesIsLoading && !tokenLoaderTimerElapsed}
                   searchQuery={searchQuery}

src/components/SearchModal/CurrencySearchModal.tsx

@@ -91,7 +91,6 @@ export default memo(function CurrencySearchModal({
   // used for token safety
   const [warningToken, setWarningToken] = useState<Token | undefined>()
 
-  const showImportView = useCallback(() => setModalView(CurrencyModalView.importToken), [setModalView])
   const showManageView = useCallback(() => setModalView(CurrencyModalView.manage), [setModalView])
   const handleBackImport = useCallback(
     () => setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
@@ -118,8 +117,6 @@ export default memo(function CurrencySearchModal({
           showCommonBases={showCommonBases}
           showCurrencyAmount={showCurrencyAmount}
           disableNonToken={disableNonToken}
-          showImportView={showImportView}
-          setImportToken={setImportToken}
           showManageView={showManageView}
         />
       )

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -168,8 +168,6 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
   )
 
   function tickFormat(
-    startTimestamp: number,
-    endTimestamp: number,
     timePeriod: TimePeriod,
     locale: string
   ): [TickFormatter<NumberValue>, (v: number) => string, NumberValue[]] {
@@ -255,12 +253,7 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
     return null
   }
 
-  const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(
-    startingPrice.timestamp,
-    endingPrice.timestamp,
-    timePeriod,
-    locale
-  )
+  const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale)
   const delta = calculateDelta(startingPrice.value, displayPrice.value)
   const formattedDelta = formatDelta(delta)
   const arrow = getDeltaArrow(delta)