fix: Web 1561 logging event for clicking on explore banner toast + WEB-1543 ...

fix: Web 1561 logging event for clicking on explore banner toast +  WEB-1543  [Explore Banner] String should be sentence case (#4899)

* explore banner changes

* remove console log

* oops

src/analytics/constants.ts

@@ -8,6 +8,7 @@ export enum EventName {
   APP_LOADED = 'Application Loaded',
   APPROVE_TOKEN_TXN_SUBMITTED = 'Approve Token Transaction Submitted',
   CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
+  EXPLORE_BANNER_CLICKED = 'Explore Banner Clicked',
   EXPLORE_SEARCH_SELECTED = 'Explore Search Selected',
   EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
   PAGE_VIEWED = 'Page Viewed',
@@ -107,6 +108,7 @@ export enum ElementName {
   COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
   CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
   CONNECT_WALLET_BUTTON = 'connect-wallet-button',
+  EXPLORE_BANNER = 'explore-banner',
   EXPLORE_SEARCH_INPUT = 'explore_search_input',
   IMPORT_TOKEN_BUTTON = 'import-token-button',
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -430,7 +430,7 @@ export function HeaderRow() {
       header={true}
       favorited={null}
       listNumber="#"
-      tokenInfo={<Trans>Token Name</Trans>}
+      tokenInfo={<Trans>Token name</Trans>}
       price={<HeaderCell category={TokenSortMethod.PRICE} sortable />}
       percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} sortable />}
       marketCap={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} sortable />}

src/components/Tokens/TokensBanner.tsx

 import { Trans } from '@lingui/macro'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { X } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { useShowTokensPromoBanner } from 'state/user/hooks'
@@ -64,26 +66,28 @@ export default function TokensBanner() {
   }
 
   return (
-    <PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}>
-      <Header>
-        <HeaderText>
-          <Trans>Explore Top Tokens on Uniswap</Trans>
-        </HeaderText>
-        <X
-          size={20}
-          color={theme.textSecondary}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            closeBanner()
-          }}
-          style={{ cursor: 'pointer' }}
-        />
-      </Header>
+    <TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
+      <PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}>
+        <Header>
+          <HeaderText>
+            <Trans>Explore top tokens on Uniswap</Trans>
+          </HeaderText>
+          <X
+            size={20}
+            color={theme.textSecondary}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              closeBanner()
+            }}
+            style={{ cursor: 'pointer' }}
+          />
+        </Header>
 
-      <Description>
-        <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
-      </Description>
-    </PopupContainer>
+        <Description>
+          <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
+        </Description>
+      </PopupContainer>
+    </TraceEvent>
   )
 }