Feat: Add walletType to event data (#640)

* add walletType to event data * changed walletType property to connector name * removed console logs * add walletType to base-docs wallet_connected event data * sanitized connector name strings * created helper function for string sanitation
base-org · Jul 18, 2024 · e33e190 · e33e190
1 parent aa59cbd
commit e33e190
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/apps/base-docs/src/theme/NavbarItem/ComponentTypes.js b/apps/base-docs/src/theme/NavbarItem/ComponentTypes.js
@@ -14,15 +14,21 @@ import { ConnectButton } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import styles from './styles.module.css';
 import { WalletAvatar } from '../../components/WalletAvatar';
-import logEvent, { ActionType, AnalyticsEventImportance, ComponentType,  identify } from "base-ui/utils/logEvent";
+import logEvent, {
+  ActionType,
+  AnalyticsEventImportance,
+  ComponentType,
+  identify,
+} from 'base-ui/utils/logEvent';
+import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 
 export const CustomConnectButton = ({ className }) => {
   return (
     <ConnectButton.Custom>
       {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
         const ready = mounted;
         const connected = ready && account && chain;
-        const { address } = useAccount();
+        const { address, connector } = useAccount();
 
         useEffect(() => {
           if (address) {
@@ -32,6 +38,7 @@ export const CustomConnectButton = ({ className }) => {
                 action: ActionType.change,
                 context: 'navbar',
                 address,
+                walletType: sanitizeEventString(connector?.name),
               },
               AnalyticsEventImportance.low,
             );
@@ -144,8 +151,8 @@ export const CustomNavbarLink = (props) => {
     <a
       href={props.to}
       target={props.target ?? '_self'}
-      className='navbar__item navbar__link'
-      style={{ cursor: 'pointer'}}
+      className="navbar__item navbar__link"
+      style={{ cursor: 'pointer' }}
       onClick={() => {
         logEvent(
           props.eventLabel,
@@ -154,23 +161,23 @@ export const CustomNavbarLink = (props) => {
             componentType: ComponentType.link,
             context: props.eventContext,
           },
-          AnalyticsEventImportance.high
-        )
+          AnalyticsEventImportance.high,
+        );
       }}
     >
       {props.label}
     </a>
-  )
-}
+  );
+};
 
 export const CustomDropdownLink = (props) => {
   return (
     <li>
       <a
         href={props.to}
         target={props.target ?? '_self'}
-        className='dropdown__link'
-        style={{ cursor: 'pointer'}}
+        className="dropdown__link"
+        style={{ cursor: 'pointer' }}
         onClick={() => {
           logEvent(
             props.eventLabel,
@@ -179,15 +186,15 @@ export const CustomDropdownLink = (props) => {
               componentType: ComponentType.link,
               context: props.eventContext,
             },
-            AnalyticsEventImportance.high
-          )
+            AnalyticsEventImportance.high,
+          );
         }}
       >
         {props.label}
       </a>
     </li>
-  )
-}
+  );
+};
 
 const ComponentTypes = {
   default: DefaultNavbarItem,

diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -4,6 +4,7 @@ import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
 
 import { UserAvatar } from 'apps/web/src/components/ConnectWalletButton/UserAvatar';
 import { ShinyButton } from 'apps/web/src/components/ShinyButton/ShinyButton';
+import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 import logEvent, {
   ActionType,
   AnalyticsEventImportance,
@@ -23,19 +24,20 @@ const colorVariant: Record<'white' | 'black', 'white' | 'black'> = {
 
 export function ConnectWalletButton({ color, className }: ConnectWalletButtonProps) {
   const { openConnectModal } = useConnectModal();
-  const { address } = useAccount();
+  const { address, connector } = useAccount();
 
   useEffect(() => {
     if (address) {
       logEvent(
         'wallet_connected',
-         {
+        {
           action: ActionType.change,
           context: 'navbar',
-          address
-         },
-         AnalyticsEventImportance.low
-        );
+          address,
+          walletType: sanitizeEventString(connector?.name),
+        },
+        AnalyticsEventImportance.low,
+      );
       identify({ userId: address });
     }
   }, [address]);
@@ -47,9 +49,9 @@ export function ConnectWalletButton({ color, className }: ConnectWalletButtonPro
       {
         action: ActionType.click,
         componentType: ComponentType.button,
-        context: 'navbar'
+        context: 'navbar',
       },
-      AnalyticsEventImportance.low
+      AnalyticsEventImportance.low,
     );
   }, [openConnectModal]);
 

diff --git a/libs/base-ui/utils/logEvent.ts b/libs/base-ui/utils/logEvent.ts
@@ -64,6 +64,7 @@ type CCAEventData = {
   address?: string;
   context?: string;
   userId?: string;
+  walletType?: string;
 };
 
 type AnalyticsEventData = {

diff --git a/libs/base-ui/utils/sanitizeEventString.ts b/libs/base-ui/utils/sanitizeEventString.ts
@@ -0,0 +1,7 @@
+export default function sanitizeEventString(str: string | undefined) {
+    if (!str) {
+        return '';
+    }
+
+    return str.toLowerCase().replace(/[ \-\/\.]/g, '_');
+};