refactor(tokenselector): 3 - streamline token search results

apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/index.tsx

@@ -3,15 +3,6 @@ import { ReactNode, useCallback, useEffect, useMemo } from 'react'
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { doesTokenMatchSymbolOrAddress } from '@cowprotocol/common-utils'
 import { getTokenSearchFilter, TokenSearchResponse, useSearchToken } from '@cowprotocol/tokens'
-import {
-  BannerOrientation,
-  ExternalLink,
-  InlineBanner,
-  LINK_GUIDE_ADD_CUSTOM_TOKEN,
-  StatusColorVariant,
-} from '@cowprotocol/ui'
-
-import { Trans } from '@lingui/react/macro'
 
 import { useAddTokenImportCallback } from '../../hooks/useAddTokenImportCallback'
 import { useUpdateSelectTokenWidgetState } from '../../hooks/useUpdateSelectTokenWidgetState'
@@ -77,18 +68,6 @@ export function TokenSearchResults({
 
   return (
     <CommonListContainer id="currency-list">
-      <InlineBanner
-        margin={'10px'}
-        width="auto"
-        orientation={BannerOrientation.Horizontal}
-        bannerType={StatusColorVariant.Info}
-      >
-        <p>
-          <Trans>Can't find your token on the list?</Trans>{' '}
-          <Trans><ExternalLink href={LINK_GUIDE_ADD_CUSTOM_TOKEN}>Read our guide</ExternalLink> on how to add custom tokens.</Trans>
-        </p>
-      </InlineBanner>
-
       <TokenSearchContent
         importToken={addTokenImportCallback}
         searchInput={searchInput}

apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/styled.ts

@@ -9,11 +9,11 @@ export const TokenNotFound = styled.div`
   text-align: center;
 `
 
-export const ImportTokenWrapper = styled.div`
-  margin: 20px 0;
-`
-
 export const LoaderWrapper = styled.div`
   text-align: center;
   margin: 20px 0 10px 0;
 `
+
+export const SectionTitleRow = styled.div`
+  margin: 20px 0 8px;
+`

apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenItem/index.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { TokenWithLogo } from '@cowprotocol/common-const'
 
 import { Trans } from '@lingui/react/macro'
@@ -13,14 +15,15 @@ export interface ImportTokenItemProps {
   importToken?(token: TokenWithLogo): void
   existing?: true
   shadowed?: boolean
+  wrapperId?: string
+  isFirstInSection?: boolean
+  isLastInSection?: boolean
 }
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ImportTokenItem(props: ImportTokenItemProps) {
-  const { token, importToken, shadowed, existing } = props
+export function ImportTokenItem(props: ImportTokenItemProps): ReactNode {
+  const { token, importToken, shadowed, existing, wrapperId, isFirstInSection, isLastInSection } = props
   return (
-    <styledEl.Wrapper>
+    <styledEl.Wrapper id={wrapperId} $isFirst={isFirstInSection} $isLast={isLastInSection}>
       <div style={{ opacity: shadowed ? 0.6 : 1 }}>
         <TokenInfo token={token} />
       </div>

apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenItem/styled.ts

@@ -2,20 +2,15 @@ import { Media, UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ $isFirst?: boolean; $isLast?: boolean }>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
-  margin-bottom: 20px;
+  padding: ${({ $isFirst, $isLast }) => `${$isFirst ? '20px' : '0'} 20px ${$isLast ? '0' : '20px'} 20px`};
 
   ${Media.upToSmall()} {
-    padding: 0 14px;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
+    padding: ${({ $isFirst, $isLast }) => `${$isFirst ? '20px' : '0'} 14px ${$isLast ? '0' : '20px'} 14px`};
   }
 `