feat: Added plausible custom events (#389)

Author: lempira

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>
           }
         >

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>

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>
       }
     >

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,15 +402,20 @@ 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}
               >
                 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>