init amp

Author: xdeq

app.vue

@@ -1,7 +1,8 @@
 <script setup>
-/** API */
+/** Services */
 import Socket from "@/services/api/socket"
 import { fetchHead } from "@/services/api/main"
+import amp from "@/services/amp"
 
 /** Store */
 import { useAppStore } from "@/store/app"
@@ -11,6 +12,9 @@ const { data } = await fetchHead()
 if (data.value) appStore.head = data.value
 
 onMounted(() => {
+	const runtimeConfig = useRuntimeConfig()
+	amp.init(runtimeConfig.public.AMP)
+
 	Socket.init()
 
 	window.onbeforeunload = function () {

components/SearchBar.vue

@@ -5,7 +5,7 @@ import { search } from "@/services/api/search"
 /**
  * Composable
  */
-import { useOutside } from "@/composable/outside"
+import { useOutside } from "@/composables/outside"
 
 /**
  * Store

components/TheFooter.vue

@@ -58,9 +58,6 @@ const handleChangeTheme = () => {
 						<a href="https://github.com/celenium-io" target="_blank">
 							<Icon name="github" size="14" color="secondary" :class="$style.btn" />
 						</a>
-						<a href="https://twitter.com/celenium_io" target="_blank">
-							<Icon name="discord" size="14" color="secondary" :class="$style.btn" />
-						</a>
 					</Flex>
 				</Flex>
 

components/modules/tx/TxOverview.vue

@@ -12,6 +12,7 @@ import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 /** Services */
 import { comma, tia, splitAddress } from "@/services/utils"
 import { MessageIconMap } from "@/services/constants/mapping"
+import amp from "@/services/amp"
 
 /** API */
 import { fetchTxEvents } from "@/services/api/tx"
@@ -33,8 +34,14 @@ const props = defineProps({
 	},
 })
 
-const events = ref([])
 const showAll = ref(false)
+const handleShowAll = () => {
+	showAll.value = !showAll.value
+
+	amp.log("toggleShowAll")
+}
+
+const events = ref([])
 const filteredEvents = computed(() => (showAll.value ? events.value : events.value.slice(0, 10)))
 
 const { data: rawEvents } = await fetchTxEvents(props.tx.hash)
@@ -440,7 +447,7 @@ events.value = rawEvents.value.sort((a, b) => a.position - b.position)
 					</Flex>
 				</Flex>
 
-				<Button v-if="events.length > 10" @click="showAll = !showAll" type="secondary" size="mini">
+				<Button v-if="events.length > 10" @click="handleShowAll" type="secondary" size="mini">
 					{{ !showAll ? "View More" : "Hide" }}
 				</Button>
 			</Flex>

components/ui/Modal.vue

@@ -7,7 +7,7 @@ import * as focusTrap from "focus-trap"
 /**
  * Composable
  */
-import { useOutside } from "@/composable/outside"
+import { useOutside } from "@/composables/outside"
 
 const emit = defineEmits(["onClose"])
 const props = defineProps({

components/widgets/BlockWidget.vue

@@ -1,7 +1,4 @@
 <script setup>
-/** Vendor */
-import { DateTime } from "luxon"
-
 /** Services */
 import { comma } from "@/services/utils"
 

composable/outside.js composables/outside.jscomposable/outside.js renamed to composables/outside.js

@@ -1,6 +1,12 @@
 export default defineNuxtConfig({
 	modules: ["@pinia/nuxt", "nuxt-og-image"],
 
+	runtimeConfig: {
+		public: {
+			AMP: process.env.AMP,
+		},
+	},
+
 	app: {
 		head: {
 			htmlAttrs: {

nuxt.config.ts

@@ -20,6 +20,7 @@
 		"sitemap": "7.1.1"
 	},
 	"dependencies": {
+		"@amplitude/analytics-browser": "^2.3.3",
 		"@pinia/nuxt": "0.4.11",
 		"focus-trap": "7.5.2",
 		"luxon": "3.4.3",