Empty table state component, remove search banner (#1252)

## High Level Overview of Change

Minor cosmetic changes:
- AMM TVL now shows -- when there are no AMMs found
- When there are no dex trades or transfers found, empty state looks
consistent with explorer design
- empty state separated into reusable component
- remove search banner ahead of token page launch

before:
<img width="1281" height="171" alt="Screenshot 2025-10-24 at 11 28
53 AM"
src="https://github.com/user-attachments/assets/c8c6728d-3316-4a4b-b1d5-12302bbc9201"
/>

after:
<img width="1226" height="427" alt="Screenshot 2025-10-24 at 11 28
18 AM"
src="https://github.com/user-attachments/assets/7323848f-ae90-481a-a848-bcdf90bff74f"
/>


<!--
Please include a summary/list of the changes.
If too broad, please consider splitting into multiple PRs.
-->

### Context of Change

<!--
Please include the context of a change.
If a bug fix, when was the bug introduced? What was the behavior?
If a new feature, why was this architecture chosen? What were the
alternatives?
If a refactor, how is this better than the previous implementation?

If there is a design document for this feature, please link it here.
-->

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Refactor (non-breaking change that only restructures code)
- [ ] Tests (You added tests for code that already exists, or your new
feature included in this PR)
- [ ] Documentation Updates
- [ ] Translation Updates
- [ ] Release

### Codebase Modernization

<!--
In an effort to modernize the codebase, you should convert the files
that you work with to React Hooks and TypeScript,
and update tests to use the React Testing Library instead of Enzyme. If
this is not possible (e.g. it's too many
changes, touching too many files, etc.) please explain why here.
-->

- [ ] Updated files to React Hooks
- [ ] Updated files to TypeScript
- [ ] Updated tests to React Testing Library

## Before / After

<!--
If just refactoring / back-end changes, this can be just an in-English
description of the change at a technical level.
If a UI change, screenshots should be included.
-->

## Test Plan

<!--
Please describe the tests that you ran to verify your changes and
provide instructions so that others can reproduce.
-->

<!--
## Future Tasks
For future tasks related to PR.
-->

Author: achowdhry-ripple

public/locales/ca-CA/translations.json

@@ -561,7 +561,6 @@
   "can_trade": null,
   "can_transfer": null,
   "can_clawback": null,
-  "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,

public/locales/en-US/translations.json

@@ -562,7 +562,6 @@
   "can_trade": "Can Trade",
   "can_transfer": "Can Transfer",
   "can_clawback": "Can Clawback",
-  "search_results_banner": "Token search by name and account is now available! Try searching for USD",
   "enable_amendment_name": "Amendment Name",
   "amendment_status": "Amendment Status",
   "expected_date": "Expected Date",

public/locales/es-ES/translations.json

@@ -549,7 +549,6 @@
   "can_trade": "Puede Comerciar",
   "can_transfer": "Puede Transferir",
   "can_clawback": "Puede Recuperar",
-  "search_results_banner": "¡La búsqueda de tokens por nombre y cuenta ya está disponible! Intenta buscar USD",
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
   "transaction_type_name_MPTokenIssuanceDestroy": null,

public/locales/fr-FR/translations.json

@@ -558,7 +558,6 @@
   "can_trade": null,
   "can_transfer": null,
   "can_clawback": null,
-  "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,

public/locales/ja-JP/translations.json

@@ -557,7 +557,6 @@
   "can_trade": null,
   "can_transfer": null,
   "can_clawback": null,
-  "search_results_banner": "トークン名とアカウントで検索が可能になりました! USDと検索してみてください",
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,

public/locales/ko-KR/translations.json

@@ -555,7 +555,6 @@
   "can_trade": null,
   "can_transfer": null,
   "can_clawback": null,
-  "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
   "expected_date": null,

public/locales/my-MM/translations.json

@@ -564,7 +564,6 @@
   "can_trade": "ရောင်းဝယ်နိုင်",
   "can_transfer": "လွှဲပြောင်းနိုင်",
   "can_clawback": "ပြန်လည်ရယူနိုင်",
-  "search_results_banner": "Token ကို အမည်နှင့် အကောင့်ဖြင့် ရှာဖွေခြင်း ယခု ရရှိနိုင်ပါပြီ! USD ဖြင့် ရှာကြည့်ပါ",
   "enable_amendment_name": "ပြင်ဆင်ချက် အမည်",
   "amendment_status": "ပြင်ဆင်ချက် အခြေအနေ",
   "expected_date": "မျှော်မှန်းရက်စွဲ",

src/containers/Header/Search.tsx

@@ -1,10 +1,4 @@
-import {
-  FC,
-  KeyboardEventHandler,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
+import { KeyboardEventHandler, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { XrplClient } from 'xrpl-client'
@@ -13,7 +7,6 @@ import {
   isValidXAddress,
   classicAddressToXAddress,
 } from 'ripple-address-codec'
-import CloseIcon from '../shared/images/close.png'
 
 import { useAnalytics } from '../shared/analytics'
 import SocketContext from '../shared/SocketContext'
@@ -148,26 +141,6 @@ const normalizeAccount = (id: string) => {
   return id
 }
 
-const SearchBanner: FC<{ setIsBannerVisible: (visible: boolean) => void }> = ({
-  setIsBannerVisible,
-}) => {
-  const { t } = useTranslation()
-  return (
-    <div className="banner-search">
-      <div className="banner-content">
-        <div>{t('search_results_banner')}</div>
-        <button
-          className="banner-button"
-          type="button"
-          onClick={() => setIsBannerVisible(false)}
-        >
-          <img src={CloseIcon} alt="close-icon" width={10} height={10} />
-        </button>
-      </div>
-    </div>
-  )
-}
-
 export interface SearchProps {
   callback?: Function
 }
@@ -199,36 +172,21 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
     }
   }
 
-  const [isBannerVisible, setIsBannerVisible] = useState(true)
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setIsBannerVisible(false)
-    }, 10000) // Disappear after 10 seconds
-
-    return () => clearTimeout(timeoutId)
-  }, [])
-
   return (
-    <>
-      {process.env.VITE_ENVIRONMENT === 'mainnet' && isBannerVisible && (
-        <SearchBanner setIsBannerVisible={setIsBannerVisible} />
-      )}
-      <div className="search">
-        <input
-          type="text"
-          placeholder={t('header.search.placeholder')}
-          onKeyDown={onKeyDown}
-          value={currentSearchInput}
-          onChange={(e) => setCurrentSearchInput(e.target.value)}
+    <div className="search">
+      <input
+        type="text"
+        placeholder={t('header.search.placeholder')}
+        onKeyDown={onKeyDown}
+        value={currentSearchInput}
+        onChange={(e) => setCurrentSearchInput(e.target.value)}
+      />
+      {process.env.VITE_ENVIRONMENT === 'mainnet' && (
+        <TokenSearchResults
+          setCurrentSearchInput={setCurrentSearchInput}
+          currentSearchValue={currentSearchInput}
         />
-        {process.env.VITE_ENVIRONMENT === 'mainnet' && (
-          <TokenSearchResults
-            setCurrentSearchInput={setCurrentSearchInput}
-            currentSearchValue={currentSearchInput}
-          />
-        )}
-      </div>
-    </>
+      )}
+    </div>
   )
 }

src/containers/Header/search.scss

@@ -46,62 +46,3 @@
 .normal.fade-out {
   opacity: 0;
 }
-
-.banner-search {
-  position: absolute;
-  top: 50px;
-  left: 10%;
-  width: 80%;
-  max-width: 600px;
-  padding: 12px 16px;
-  border-radius: 4px;
-  background-color: $blue-purple-30 !important;
-  color: $black !important;
-
-  .banner-content {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .banner-button {
-    width: 5px;
-    height: 5px;
-    padding: 5px;
-    padding-left: 10px;
-    border: none;
-    margin-top: -5px;
-    background: none;
-    color: inherit;
-  }
-
-  @media (width >= 1350px) {
-    top: -60px;
-  }
-  @media (1000px <= width < 1350px) {
-    top: -70px;
-  }
-  @media (900px <= width < 1000px) {
-    top: -80px;
-  }
-  @media (750px <= width < 900px) {
-    top: 60px;
-  }
-
-  @media (max-width: $tablet-portrait-upper-boundary) {
-    left: 5%;
-    width: 90%;
-  }
-}
-
-.banner-search::after {
-  position: absolute;
-  top: 100%;
-  left: 30%;
-  border-width: 8px;
-  border-style: solid;
-  border-color: $blue-purple-30 transparent transparent transparent;
-  content: '';
-  transform: translateX(-50%);
-}

src/containers/Token/components/DexTradeTable/DexTradeTable.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import { Account } from '../../../shared/components/Account'
 import { Loader } from '../../../shared/components/Loader'
+import { EmptyStateMessage } from '../../../shared/components/EmptyStateMessage'
 import { useTooltip, Tooltip } from '../../../shared/components/Tooltip'
 import HoverIcon from '../../../shared/images/hover.svg'
 import ArrowIcon from '../../../shared/images/down_arrow.svg'
@@ -275,7 +276,7 @@ export const DexTradeTable = ({
       )}
 
       {!isLoading && (!transactions || transactions.length === 0) && (
-        <div>{t('token_page.dex_no_trades')}</div>
+        <EmptyStateMessage message={t('token_page.dex_no_trades')} />
       )}
     </div>
   )