From 0ec0206bae71f94058925686a3a88c022dd66237 Mon Sep 17 00:00:00 2001
From: David Rojas <lempira@users.noreply.github.com>
Date: Fri, 7 Feb 2025 10:48:45 -0500
Subject: [PATCH] feat: Added plausible custom events (#389)

---
 .../components/create/from-app-id-card.tsx      |  3 ++-
 .../components/create/from-deployment-card.tsx  |  3 ++-
 .../fund/components/fund-account-form.tsx       |  9 ++++++++-
 .../components/transactions-builder.tsx         | 17 ++++++++++++++---
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/features/app-interfaces/components/create/from-app-id-card.tsx b/src/features/app-interfaces/components/create/from-app-id-card.tsx
index 2ebb04ac0..64f192536 100644
--- a/src/features/app-interfaces/components/create/from-app-id-card.tsx
+++ b/src/features/app-interfaces/components/create/from-app-id-card.tsx
@@ -117,7 +117,8 @@ export function FromAppIdCard({ machine }: Props) {
           onSubmit={fromAppIdSelected}
           formAction={
             <FormActions>
-              <SubmitButton>Use existing</SubmitButton>
+              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+              <SubmitButton className="plausible-event-name=app-lab-use-existing-app-id">Use existing</SubmitButton>
             </FormActions>
           }
         >
diff --git a/src/features/app-interfaces/components/create/from-deployment-card.tsx b/src/features/app-interfaces/components/create/from-deployment-card.tsx
index f744fefd6..19979a5be 100644
--- a/src/features/app-interfaces/components/create/from-deployment-card.tsx
+++ b/src/features/app-interfaces/components/create/from-deployment-card.tsx
@@ -32,7 +32,8 @@ export function FromDeploymentCard({ machine }: Props) {
           <span>Deploy a new app and create an app interface.</span>
         </div>
         <div className="flex grow flex-col">
-          <div className="ml-auto mt-auto">
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname  */}
+          <div className="plausible-event-name=app-lab-deploy-new-app ml-auto mt-auto">
             <Button onClick={fromDeploymentSelected} {...disabledProps}>
               {deployAppLabel}
             </Button>
diff --git a/src/features/fund/components/fund-account-form.tsx b/src/features/fund/components/fund-account-form.tsx
index 7c4e78407..9a664035a 100644
--- a/src/features/fund/components/fund-account-form.tsx
+++ b/src/features/fund/components/fund-account-form.tsx
@@ -77,7 +77,14 @@ export function FundAccountForm({ onCreateReceiver, onSubmit, limit, defaultRece
       onSubmit={fundAccount}
       formAction={
         <FormActions>
-          <SubmitButton>{onCreateReceiver ? 'Create and Fund' : 'Fund'}</SubmitButton>
+          <SubmitButton
+            // eslint-disable-next-line tailwindcss/no-custom-classname
+            className={
+              onCreateReceiver ? 'plausible-event-name=fund-account-form-create-and-fund' : 'plausible-event-name=fund-account-form-fund'
+            }
+          >
+            {onCreateReceiver ? 'Create and Fund' : 'Fund'}
+          </SubmitButton>
         </FormActions>
       }
     >
diff --git a/src/features/transaction-wizard/components/transactions-builder.tsx b/src/features/transaction-wizard/components/transactions-builder.tsx
index 34c218cb9..ade00f686 100644
--- a/src/features/transaction-wizard/components/transactions-builder.tsx
+++ b/src/features/transaction-wizard/components/transactions-builder.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-custom-classname */
 import algosdk from 'algosdk'
 import { useCallback, useMemo, useState } from 'react'
 import { DialogBodyProps, useDialogForm } from '@/features/common/hooks/use-dialog-form'
@@ -343,7 +344,12 @@ export function TransactionsBuilder({
         <div className="mb-4 flex items-center gap-2">
           {title}
           {!disableAddTransaction && (
-            <Button variant="outline-secondary" onClick={createTransaction} className="ml-auto" icon={<Plus size={16} />}>
+            <Button
+              variant="outline-secondary"
+              onClick={createTransaction}
+              className="plausible-event-name=txn-wizard-add-txn ml-auto"
+              icon={<Plus size={16} />}
+            >
               {addTransactionLabel}
             </Button>
           )}
@@ -396,7 +402,7 @@ export function TransactionsBuilder({
             </Button>
             {onSimulated && (
               <AsyncActionButton
-                className="w-28"
+                className="plausible-event-name=txn-wizard-simulate-txn w-28"
                 onClick={simulateTransactions}
                 icon={<SquarePlay size={16} />}
                 {...simulateButtonDisabledProps}
@@ -404,7 +410,12 @@ export function TransactionsBuilder({
                 Simulate
               </AsyncActionButton>
             )}
-            <AsyncActionButton className="w-28" onClick={sendTransactions} icon={sendButtonConfig.icon} {...sendButtonDisabledProps}>
+            <AsyncActionButton
+              className="plausible-event-name=txn-wizard-send-txn w-28"
+              onClick={sendTransactions}
+              icon={sendButtonConfig.icon}
+              {...sendButtonDisabledProps}
+            >
               {sendButtonConfig.label}
             </AsyncActionButton>
           </div>