fix: show common bases on mobile (#7365)

* fix: show common bases on mobile

* test: add unit tests

src/components/SearchModal/CommonBases.test.tsx

@@ -0,0 +1,33 @@
+import { ChainId } from '@uniswap/sdk-core'
+import { render } from 'test-utils/render'
+
+import CommonBases from './CommonBases'
+
+const mockOnSelect = jest.fn()
+
+describe('CommonBases', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <CommonBases chainId={ChainId.MAINNET} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders correct number of common bases', () => {
+    const { getAllByTestId } = render(
+      <CommonBases chainId={1} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
+    )
+    const items = getAllByTestId(/common-base-/)
+    expect(items.length).toBe(6)
+  })
+
+  it('renders common bases on mobile', () => {
+    window.innerWidth = 400
+    window.dispatchEvent(new Event('resize'))
+    const { getAllByTestId } = render(
+      <CommonBases chainId={1} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
+    )
+    const items = getAllByTestId(/common-base-/)
+    expect(items.length).toBe(6)
+  })
+})

src/components/SearchModal/CommonBases.tsx

@@ -1,7 +1,6 @@
 import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { Currency } from '@uniswap/sdk-core'
 import { TraceEvent } from 'analytics'
-import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
@@ -11,12 +10,6 @@ import { Text } from 'rebass'
 import styled from 'styled-components'
 import { currencyId } from 'utils/currencyId'
 
-const MobileWrapper = styled(AutoColumn)`
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    display: none;
-  `};
-`
-
 const BaseWrapper = styled.div<{ disable?: boolean }>`
   border: 1px solid ${({ theme }) => theme.surface3};
   border-radius: 18px;
@@ -65,37 +58,35 @@ export default function CommonBases({
   const bases = chainId !== undefined ? COMMON_BASES[chainId] ?? [] : []
 
   return bases.length > 0 ? (
-    <MobileWrapper gap="md">
+    <AutoRow gap="4px">
-      <AutoRow gap="4px">
+      {bases.map((currency: Currency) => {
-        {bases.map((currency: Currency) => {
+        const isSelected = selectedCurrency?.equals(currency)
-          const isSelected = selectedCurrency?.equals(currency)
 
-          return (
+        return (
-            <TraceEvent
+          <TraceEvent
-              events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
+            events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
-              name={InterfaceEventName.TOKEN_SELECTED}
+            name={InterfaceEventName.TOKEN_SELECTED}
-              properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
+            properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
-              element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON}
+            element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON}
+            key={currencyId(currency)}
+          >
+            <BaseWrapper
+              tabIndex={0}
+              onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
+              onClick={() => !isSelected && onSelect(currency)}
+              disable={isSelected}
               key={currencyId(currency)}
+              data-testid={`common-base-${currency.symbol}`}
             >
-              <BaseWrapper
+              <CurrencyLogoFromList currency={currency} />
-                tabIndex={0}
+              <Text fontWeight={535} fontSize={16} lineHeight="16px">
-                onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
+                {currency.symbol}
-                onClick={() => !isSelected && onSelect(currency)}
+              </Text>
-                disable={isSelected}
+            </BaseWrapper>
-                key={currencyId(currency)}
+          </TraceEvent>
-                data-testid={`common-base-${currency.symbol}`}
+        )
-              >
+      })}
-                <CurrencyLogoFromList currency={currency} />
+    </AutoRow>
-                <Text fontWeight={535} fontSize={16} lineHeight="16px">
-                  {currency.symbol}
-                </Text>
-              </BaseWrapper>
-            </TraceEvent>
-          )
-        })}
-      </AutoRow>
-    </MobileWrapper>
   ) : null
 }
 

src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap

@@ -0,0 +1,245 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommonBases renders without crashing 1`] = `
+.c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+.c1 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
+.c2 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: -4px;
+}
+
+.c2 > * {
+  margin: 4px !important;
+}
+
+.c6 {
+  opacity: 0;
+  -webkit-transition: opacity 250ms ease-in;
+  transition: opacity 250ms ease-in;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.c5 {
+  width: 24px;
+  height: 24px;
+  background: #22222212;
+  -webkit-transition: background-color 250ms ease-in;
+  transition: background-color 250ms ease-in;
+  box-shadow: 0 0 1px white;
+  border-radius: 50%;
+}
+
+.c4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  border: 1px solid #22222212;
+  border-radius: 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 6px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 12px;
+  line-height: 0px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c3:hover {
+  cursor: pointer;
+  background-color: #98A1C014;
+}
+
+<div>
+  <div
+    class="c0 c1 c2"
+  >
+    <div
+      class="c3"
+      data-testid="common-base-ETH"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="ETH logo"
+            class="c6"
+            src="ethereum-logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        ETH
+      </div>
+    </div>
+    <div
+      class="c3"
+      data-testid="common-base-DAI"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="DAI logo"
+            class="c6"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        DAI
+      </div>
+    </div>
+    <div
+      class="c3"
+      data-testid="common-base-USDC"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="USDC logo"
+            class="c6"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        USDC
+      </div>
+    </div>
+    <div
+      class="c3"
+      data-testid="common-base-USDT"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="USDT logo"
+            class="c6"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        USDT
+      </div>
+    </div>
+    <div
+      class="c3"
+      data-testid="common-base-WBTC"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="WBTC logo"
+            class="c6"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        WBTC
+      </div>
+    </div>
+    <div
+      class="c3"
+      data-testid="common-base-WETH"
+      tabindex="0"
+    >
+      <div
+        class="c4"
+        style="height: 24px; width: 24px; margin-right: 8px;"
+      >
+        <div
+          class="c5"
+        >
+          <img
+            alt="WETH logo"
+            class="c6"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
+          />
+        </div>
+      </div>
+      <div
+        class="css-1qnq88a"
+      >
+        WETH
+      </div>
+    </div>
+  </div>
+</div>
+`;