feat: add Plausible telemetry (#62)

* feat: add plausible analytics

* fix: settings

* feat: add click events

* feat: remove domain

* feat: encapsulate telemetry in composable

* fix: composable

* feat: replace v-plausible for plausible package

* feat: add plausible API

* chore: remove istanbul

src/components/popups/ProposalDeposit.vue

@@ -14,6 +14,8 @@ import CommonButton from "@/components/ui/CommonButton.vue";
 import { useWallet } from "@/composables/useWallet";
 import { useClipboard } from "@vueuse/core";
 import { useProposals } from "@/composables/useProposals";
+import { useTelemetry } from "@/composables/useTelemetry";
+
 import { formatAmount } from "@/utility";
 
 interface Props {
@@ -49,6 +51,7 @@ const toggleModal = (dir: boolean) => {
   resetDeposit();
 };
 
+const { logEvent } = useTelemetry();
 const { depositProposal } = useProposals();
 const { address } = useWallet();
 
@@ -72,6 +75,10 @@ const signDeposit = async (isCLI = false) => {
 
   cliDepositInput.value = (isCLI ? depot : "") as string;
   displayState.value = isCLI ? "CLI" : "deposited";
+
+  logEvent("Sign Popup ProposalDeposit", {
+    signOption: isCLI ? "CLI" : "GUI",
+  });
 };
 
 const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
@@ -82,7 +89,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
     <div>
       <div
         class="justify-center px-6 py-4 rounded link-gradient text-dark text-300 text-center cursor-pointer"
-        @click="toggleModal(true)"
+        @click="() => (logEvent('Click Popup ProposalDeposit'), toggleModal(true))"
       >
         {{ $t("components.ProposalDeposit.cta") }}
       </div>

src/components/popups/ProposalVote.vue

@@ -17,6 +17,7 @@ import UiInfo from "@/components/ui/UiInfo.vue";
 import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 import { useClipboard } from "@vueuse/core";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 interface Props {
   proposalId?: number;
@@ -70,6 +71,7 @@ const checkVoteWeighted = computed(
 
 const { voteProposal, voteWeightedProposal } = useProposals();
 const { address } = useWallet();
+const { logEvent } = useTelemetry();
 
 const signVote = async (isCLI = false) => {
   if (!props.proposalId) return;
@@ -121,6 +123,8 @@ const signVote = async (isCLI = false) => {
 
   cliVoteInput.value = (isCLI ? vote : "") as string;
   displayState.value = isCLI ? "CLI" : "voted";
+
+  logEvent("Sign Popup ProposalVote", { signOption: isCLI ? "CLI" : "GUI" });
 };
 
 const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
@@ -131,7 +135,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
     <div>
       <div
         class="justify-center px-6 py-4 rounded link-gradient hover: text-dark text-300 text-center cursor-pointer"
-        @click="toogleModal(true)"
+        @click="() => (logEvent('Click Popup ProposalVote'), toogleModal(true))"
       >
         {{ $t("components.ProposalVote.cta") }}
       </div>

src/components/popups/WalletConnect.vue

@@ -5,6 +5,7 @@ import { Ref, computed, ref } from "vue";
 import { shorten } from "@/utility";
 import UserBalance from "@/components/helper/UserBalance.vue";
 import { bus } from "@/bus";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 const isOpen = ref(false);
 const isConnecting = ref(false);
@@ -64,6 +65,8 @@ const cancelConnect = () => {
 bus.on("open", () => {
   isOpen.value = true;
 });
+
+const { logEvent } = useTelemetry();
 </script>
 
 <template>
@@ -72,7 +75,12 @@ bus.on("open", () => {
     <template v-if="connectState">
       <button
         class="justify-center px-6 py-4 rounded bg-grey-400 text-300 text-center hover:bg-light hover:text-dark duration-200"
-        @click="isOpen = true"
+        @click="
+          () => {
+            isOpen = true;
+            logEvent('Click Header ConnectWallet');
+          }
+        "
       >
         {{ $t("components.WalletConnect.button") }}
       </button>

src/components/proposals/ProposalWrapper.vue

@@ -25,6 +25,8 @@ import * as Utility from "@/utility/index";
 import CommonButton from "../ui/CommonButton.vue";
 import Breakdown from "@/components/proposals/Breakdown.vue";
 import ValidatorBreakdown from "./ValidatorBreakdown.vue";
+import { useTelemetry } from "@/composables/useTelemetry";
+
 import MarkdownParser from "@/components/common/MarkdownParser.vue";
 import ModalBox from "@/components/common/ModalBox.vue";
 import { VCodeBlock } from "@wdns/vue-code-block";
@@ -374,9 +376,13 @@ function isTabSelected(tabName: TabNames) {
   return tabSelected.value.toLowerCase() == tabName.toLowerCase();
 }
 
+const { logEvent } = useTelemetry();
+
 function showBreakdown(type: BreakdownType) {
   breakdownType.value = type;
   breakdownOffset.value = 0;
+  if (type === null) return;
+  logEvent(type === "voters" ? "Click Voters Breakdown" : "Click Validators Breakdown");
 }
 </script>
 
@@ -781,6 +787,7 @@ function showBreakdown(type: BreakdownType) {
         </div>
       </Transition>
     </div>
+
     <ModalBox v-model="showJsonModal" title="JSON" @close="showJsonModal = false">
       <div v-if="proposal" class="p-4">
         <VCodeBlock :code="JSON.stringify(proposal, null, '\t')" prismjs />

src/components/ui/UiTabs.vue

@@ -1,5 +1,16 @@
 <template>
-  <DropDown v-model="tabIdx" :values="options" class="md:hidden" v-bind="$attrs" @select="changeTab" />
+  <DropDown
+    v-model="tabIdx"
+    :values="options"
+    class="md:hidden"
+    v-bind="$attrs"
+    @select="
+      (id: number) => {
+        changeTab(id);
+        logEvent('Click Tab', { tabOption: options[id] });
+      }
+    "
+  />
 
   <div class="hidden md:flex flex-col w-full pt-12 relative" v-bind="$attrs">
     <div
@@ -30,6 +41,7 @@
           ref="togglerOption"
           :for="id + option"
           class="flex text-grey-50 py-1.5 text-500 cursor-pointer peer-checked:text-light ease-in-out duration-300"
+          @click="logEvent('Click Tab', { tabOption: option })"
         >
           {{ $t("ui.tabs." + option) }}
         </label>
@@ -45,6 +57,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import DropDown from "./DropDown.vue";
+import { useTelemetry } from "@/composables/useTelemetry";
 
 type Props = {
   modelValue?: string | number;
@@ -75,5 +88,7 @@ function changeTab(idx: number = 0, isClicked = true) {
   line.value.style.width = `${el.getBoundingClientRect().width}px`;
 }
 
+const { logEvent } = useTelemetry();
+
 onMounted(changeTab);
 </script>