chore: enhance umami tracking for additional user interactions in various components

Author: bigint

src/components/Account/CreatorCoin/Trade.tsx

@@ -119,6 +119,7 @@ const Trade = ({ coin, onClose }: TradeModalProps) => {
 
     try {
       setLoading(true);
+      umami.track("trade_creator_coin", { mode });
       await handleWrongNetwork({ chainId: base.id });
       const client =
         (await getWalletClient(config, { chainId: base.id })) || walletClient;

src/components/Account/CreatorCoin/index.tsx

@@ -43,7 +43,10 @@ const CreatorCoin = ({ account }: CreatorCoinProps) => {
     <>
       <button
         className="rounded-full bg-gray-200 px-2 dark:bg-gray-700"
-        onClick={() => setShowModal(true)}
+        onClick={() => {
+          umami.track("open_creator_coin");
+          setShowModal(true);
+        }}
         type="button"
       >
         <MetaDetails

src/components/Account/Followerings.tsx

@@ -67,15 +67,21 @@ const Followerings = ({ account }: FolloweringsProps) => {
     <div className="flex gap-8">
       <button
         className="flex gap-x-1"
-        onClick={() => setShowFollowingModal(true)}
+        onClick={() => {
+          umami.track("open_following");
+          setShowFollowingModal(true);
+        }}
         type="button"
       >
         <b>{humanize(stats?.following)}</b>
         <span className="text-gray-500 dark:text-gray-200">Following</span>
       </button>
       <button
         className="flex gap-x-1"
-        onClick={() => setShowFollowersModal(true)}
+        onClick={() => {
+          umami.track("open_followers");
+          setShowFollowersModal(true);
+        }}
         type="button"
       >
         <b>{humanize(stats?.followers)}</b>

src/components/Account/Menu/Report.tsx

@@ -20,7 +20,10 @@ const Report = ({ account }: ReportProps) => {
           "m-2 flex cursor-pointer items-center space-x-2 rounded-lg px-2 py-1.5 text-sm"
         )
       }
-      onClick={() => setShowReportAccountModal(true, account)}
+      onClick={() => {
+        umami.track("open_report_account");
+        setShowReportAccountModal(true, account);
+      }}
     >
       <FlagIcon className="size-4" />
       <div>Report account</div>

src/components/Composer/Actions/Attachment.tsx

@@ -65,6 +65,7 @@ const Attachment = () => {
       return toast.error("File format not allowed.");
     }
     try {
+      umami.track("upload_attachment");
       await handleUploadAttachments(files);
       evt.target.value = "";
     } catch {

src/components/Composer/Actions/Gif/index.tsx

@@ -28,7 +28,10 @@ const Gif = ({ setGifAttachment }: GifProps) => {
             "opacity-50": disable
           })}
           disabled={disable}
-          onClick={() => setShowModal(!showModal)}
+          onClick={() => {
+            umami.track("open_gif_picker");
+            setShowModal(!showModal);
+          }}
           type="button"
         >
           <GifIcon className="size-5" />

src/components/Post/Actions/Menu/index.tsx

@@ -31,7 +31,10 @@ const PostMenu = ({ post }: PostMenuProps) => {
         <button
           aria-label="More"
           className="rounded-full p-1.5 hover:bg-gray-300/20"
-          onClick={stopEventPropagation}
+          onClick={(e) => {
+            stopEventPropagation(e);
+            umami.track("open_post_menu");
+          }}
           type="button"
         >
           <EllipsisHorizontalIcon

src/components/Post/Actions/Share/index.tsx

@@ -54,7 +54,10 @@ const ShareMenu = ({ post, showCount }: ShareMenuProps) => {
               : "text-gray-500 hover:bg-gray-300/20 dark:text-gray-200",
             "rounded-full p-1.5 outline-offset-2"
           )}
-          onClick={stopEventPropagation}
+          onClick={(e) => {
+            stopEventPropagation(e);
+            umami.track("open_share_menu");
+          }}
         >
           {isSubmitting ? (
             <Spinner className="mr-0.5" size="xs" />