From 0d5bc753caf44a57cd4a673728a940d7e187e662 Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Wed, 12 Oct 2022 17:22:15 -0400
Subject: [PATCH] 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                    |  2 +
 src/components/Tokens/TokenTable/TokenRow.tsx |  2 +-
 src/components/Tokens/TokensBanner.tsx        | 44 ++++++++++---------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/analytics/constants.ts b/src/analytics/constants.ts
index 7e1b861d17..5e68554390 100644
--- a/src/analytics/constants.ts
+++ b/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',
diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx
index 05e8b1e96e..f5d79a41bb 100644
--- a/src/components/Tokens/TokenTable/TokenRow.tsx
+++ b/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 />}
diff --git a/src/components/Tokens/TokensBanner.tsx b/src/components/Tokens/TokensBanner.tsx
index a20eedb5c1..8dd939a2ff 100644
--- a/src/components/Tokens/TokensBanner.tsx
+++ b/src/components/Tokens/TokensBanner.tsx
@@ -1,4 +1,6 @@
 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>
   )
 }