feat: track Brave and UA (#4699)

* fix: track Brave from UA

* feat: track UA

src/analytics/constants.ts

@@ -33,6 +33,7 @@ export enum EventName {
 export enum CUSTOM_USER_PROPERTIES {
   ALL_WALLET_ADDRESSES_CONNECTED = 'all_wallet_addresses_connected',
   ALL_WALLET_CHAIN_IDS = 'all_wallet_chain_ids',
+  USER_AGENT = 'user_agent',
   BROWSER = 'browser',
   DARK_MODE = 'is_dark_mode',
   EXPERT_MODE = 'is_expert_mode',
@@ -51,6 +52,7 @@ export enum BROWSER {
   EDGE_CHROMIUM = 'Microsoft Edge (Chromium)',
   CHROME = 'Google Chrome or Chromium',
   SAFARI = 'Apple Safari',
+  BRAVE = 'Brave',
   UNKNOWN = 'unknown',
 }
 

src/pages/App.tsx

@@ -130,6 +130,7 @@ export default function App() {
 
   useEffect(() => {
     sendAnalyticsEvent(EventName.APP_LOADED)
+    user.set(CUSTOM_USER_PROPERTIES.USER_AGENT, navigator.userAgent)
     user.set(CUSTOM_USER_PROPERTIES.BROWSER, getBrowser())
     user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_HEIGHT, window.screen.height)
     user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_WIDTH, window.screen.width)

src/utils/browser.ts

@@ -15,6 +15,8 @@ export function getBrowser(): string {
     // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
   } else if (sUsrAg.indexOf('Trident') > -1) {
     return BROWSER.INTERNET_EXPLORER
+  } else if (sUsrAg.indexOf('Brave') > -1) {
+    return BROWSER.BRAVE
     // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
   } else if (sUsrAg.indexOf('Edge') > -1) {
     return BROWSER.EDGE