Nuxt 4 & Cloudflare Workers

README.md

@@ -8,8 +8,8 @@
 Clone the repository and run on the root folder:
 
 ```
-pnpm i
-pnpm dev
+bun i
+bun dev
 ```
 
 ### Node.js Server

app.vue → app/app.vue

@@ -1,29 +1,28 @@
 <script setup>
 /** Services */
-import Socket from "@/services/api/socket"
-import amp from "@/services/amp"
-import { watchForUpdate } from "@/services/version"
-import { DEFAULT_SETTINGS } from "@/services/constants/settings.js"
-import { isPrefersDarkScheme, getNetworkName } from "@/services/utils"
+import Socket from "~/services/api/socket.js"
+import { watchForUpdate } from "~/services/version.js"
+import { DEFAULT_SETTINGS } from "~/services/constants/settings.js"
+import { isPrefersDarkScheme, getNetworkName } from "~/services/utils/index.js"
 
 /** Components */
-import ModalsManager from "@/components/modals/ModalsManager.vue"
-import CommandMenu from "@/components/cmd/CommandMenu.vue"
+import ModalsManager from "~/components/modals/ModalsManager.vue"
+import CommandMenu from "~/components/cmd/CommandMenu.vue"
 
 /** API */
-import { fetchGasPrice } from "@/services/api/gas"
-import { fetchHead } from "@/services/api/main"
-import { fetchLatestBlocks } from "@/services/api/block"
-import { fetchBlobsState } from "@/services/api/main"
+import { fetchGasPrice } from "~/services/api/gas.js"
+import { fetchHead } from "~/services/api/main.js"
+import { fetchLatestBlocks } from "~/services/api/block.js"
+import { fetchBlobsState } from "~/services/api/main.js"
 
 /** Store */
-import { useNodeStore } from "@/store/node.store"
-import { useAppStore } from "@/store/app.store"
-import { useBookmarksStore } from "@/store/bookmarks.store"
-import { useSettingsStore } from "@/store/settings.store"
-import { useEnumStore } from "@/store/enums.store"
-import { useLegalStore } from "@/store/legal.store"
-import { useNotificationsStore } from "@/store/notifications.store"
+import { useNodeStore } from "~/store/node.store.js"
+import { useAppStore } from "~/store/app.store.js"
+import { useBookmarksStore } from "~/store/bookmarks.store.js"
+import { useSettingsStore } from "~/store/settings.store.js"
+import { useEnumStore } from "~/store/enums.store.js"
+import { useLegalStore } from "~/store/legal.store.js"
+import { useNotificationsStore } from "~/store/notifications.store.js"
 
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
@@ -141,9 +140,6 @@ onMounted(async () => {
 
 	appStore.initGlobalUpdates()
 
-	const runtimeConfig = useRuntimeConfig()
-	amp.init(runtimeConfig.public.AMP)
-
 	const data = await fetchLatestBlocks({ limit: 100 })
 	appStore.latestBlocks = data
 	appStore.isLatestBlocksLoaded = true

assets/styles/base.scss → app/assets/styles/base.scss

@@ -214,11 +214,6 @@ $grayscale: (
 	--geo-map: #8b8c8d;
 }
 
-@font-face {
-	font-family: "DS";
-	src: local("DS"), url(~/assets/fonts/DS-DIGI.TTF) format("truetype");
-}
-
 *,
 *::before,
 *::after {
@@ -267,8 +262,7 @@ body {
 
 	background: var(--app-background);
 
-	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-		"Helvetica Neue", sans-serif;
+	font-family: 'Inter', sans-serif;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

components/ActionBar.vue → app/components/ActionBar.vue

@@ -2,16 +2,16 @@
 /**
  * UI
  */
-import Button from "@/components/ui/Button.vue"
+import Button from "~/components/ui/Button.vue"
 
 /** Components */
-import Search from "@/components/modules/navigation/Search.vue"
+import Search from "~/components/modules/navigation/Search.vue"
 
 /** Utils */
-import { isMobile } from "@/services/utils"
+import { isMobile } from "~/services/utils/index.js"
 
 /** Store */
-import { useAppStore } from "@/store/app.store"
+import { useAppStore } from "~/store/app.store.js"
 
 const appStore = useAppStore()
 </script>

components/AmountInCurrency.vue → app/components/AmountInCurrency.vue

@@ -1,12 +1,12 @@
 <script setup>
 /** Services */
-import { amountToString } from "@/services/utils"
+import { amountToString } from "~/services/utils/index.js"
 
 /** UI */
-import Tooltip from "@/components/ui/Tooltip.vue"
+import Tooltip from "~/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app.store"
+import { useAppStore } from "~/store/app.store.js"
 const appStore = useAppStore()
 
 const currentPrice = computed(() => appStore.currentPrice)

components/Auth.vue → app/components/Auth.vue

@@ -1,11 +1,11 @@
 <script setup>
 /** UI */
-import Button from "@/components/ui/Button.vue"
-import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+import Button from "~/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "~/components/ui/Dropdown/index.js"
 
 /** Store */
-import { useAuthStore } from "@/store/auth.store.js"
-import { useModalsStore } from "@/store/modals.store.js"
+import { useAuthStore } from "~/store/auth.store.js"
+import { useModalsStore } from "~/store/modals.store.js"
 
 const authStore = useAuthStore()
 const modalsStore = useModalsStore()
@@ -32,15 +32,11 @@ onMounted(() => {
 		</Button>
 
 		<template #popup>
-			<DropdownItem @click="modalsStore.open('settings')">
-				Settings
-			</DropdownItem>
-			<DropdownItem @click="logout">
-				Logout
-			</DropdownItem>
+			<DropdownItem @click="modalsStore.open('settings')"> Settings </DropdownItem>
+			<DropdownItem @click="logout"> Logout </DropdownItem>
 		</template>
 	</Dropdown>
 
 	<Button v-else @click="login" type="white" size="mini">Login</Button>
 </template>
->
+>

components/BadgeValue.vue → app/components/BadgeValue.vue

@@ -2,10 +2,10 @@
 /**
  * Services
  */
-import { space } from "@/services/utils"
+import { space } from "~/services/utils/index.js"
 
 /** Store */
-import { useNotificationsStore } from "@/store/notifications.store"
+import { useNotificationsStore } from "~/store/notifications.store.js"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({

components/BookmarkButton.vue → app/components/BookmarkButton.vue

@@ -1,15 +1,15 @@
 <script setup>
 /** UI */
-import Button from "@/components/ui/Button.vue"
+import Button from "~/components/ui/Button.vue"
 
 /** Services */
-import { capitilize } from "@/services/utils"
+import { capitilize } from "~/services/utils/index.js"
 
 /** Store */
-import { useBookmarksStore } from "@/store/bookmarks.store"
-import { useCacheStore } from "@/store/cache.store"
-import { useModalsStore } from "@/store/modals.store"
-import { useNotificationsStore } from "@/store/notifications.store"
+import { useBookmarksStore } from "~/store/bookmarks.store.js"
+import { useCacheStore } from "~/store/cache.store.js"
+import { useModalsStore } from "~/store/modals.store.js"
+import { useNotificationsStore } from "~/store/notifications.store.js"
 const bookmarksStore = useBookmarksStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()

components/Connection.vue → app/components/Connection.vue

@@ -1,24 +1,25 @@
 <script setup>
 /** UI */
-import Button from "@/components/ui/Button.vue"
-import { Dropdown, DropdownTitle, DropdownItem, DropdownDivider } from "@/components/ui/Dropdown"
+import Button from "~/components/ui/Button.vue"
+import { Dropdown, DropdownTitle, DropdownItem, DropdownDivider } from "~/components/ui/Dropdown/index.js"
 
 /** Services */
-import amp from "@/services/amp"
 import { disconnect } from "@/services/wallet"
 import { mainnet, mocha } from "@/services/chains"
 
 /** Store */
-import { useAppStore } from "@/store/app.store"
-import { useModalsStore } from "@/store/modals.store"
-import { useNotificationsStore } from "@/store/notifications.store"
+import { useAppStore } from "~/store/app.store.js"
+import { useModalsStore } from "~/store/modals.store.js"
+import { useNotificationsStore } from "~/store/notifications.store.js"
 
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const notificationsStore = useNotificationsStore()
 
 const router = useRouter()
 
+const ph = usePostHog()
+
 const { hostname } = useRequestURL()
 
 switch (hostname) {
@@ -64,7 +65,7 @@ const handleChangeWallet = () => {
 const handleDisconnect = () => {
 	disconnect()
 
-	amp.log("disconnect")
+	ph.capture("wallet_disconnect")
 
 	appStore.address = ""
 	appStore.balance = 0

components/CopyButton.vue → app/components/CopyButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 /** Store */
-import { useNotificationsStore } from "@/store/notifications.store"
+import { useNotificationsStore } from "~/store/notifications.store.js"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({

components/DatePicker.vue → app/components/DatePicker.vue

@@ -3,14 +3,14 @@
 import { DateTime, Info } from "luxon"
 
 /** Stats Constants */
-import { STATS_PERIODS } from "@/services/constants/stats.js"
+import { STATS_PERIODS } from "~/services/constants/stats.js"
 
 /** UI */
-import Button from "@/components/ui/Button.vue"
-import Popover from "@/components/ui/Popover.vue"
+import Button from "~/components/ui/Button.vue"
+import Popover from "~/components/ui/Popover.vue"
 
 /** Utils */
-import { isMobile } from "@/services/utils"
+import { isMobile } from "~/services/utils/index.js"
 
 const props = defineProps({
 	period: {

components/Feed.vue → app/components/Feed.vue

@@ -3,19 +3,19 @@
 import { DateTime } from "luxon"
 
 /** Services */
-import { abbreviate, capitilize, comma, formatBytes, isMainnet, roundTo } from "@/services/utils"
-import { getRankCategory } from "@/services/constants/rollups"
-import { quoteServiceURL, rollupRankingServiceURL } from "@/services/config"
+import { abbreviate, capitilize, comma, formatBytes, isMainnet, roundTo } from "~/services/utils/index.js"
+import { getRankCategory } from "~/services/constants/rollups.js"
+import { quoteServiceURL, rollupRankingServiceURL } from "~/services/config.js"
 
 /** UI */
-import Tooltip from "@/components/ui/Tooltip.vue"
+import Tooltip from "~/components/ui/Tooltip.vue"
 
 /** API */
-import { fetchRollupsRanking } from "@/services/api/rollup"
-import { fetchPriceSeries, fetchSummary, fetchTVS } from "@/services/api/stats"
+import { fetchRollupsRanking } from "~/services/api/rollup.js"
+import { fetchPriceSeries, fetchSummary, fetchTVS } from "~/services/api/stats.js"
 
 /** Store */
-import { useAppStore } from "@/store/app.store"
+import { useAppStore } from "~/store/app.store.js"
 const appStore = useAppStore()
 
 const head = computed(() => appStore.lastHead)
@@ -63,11 +63,14 @@ onMounted(async () => {
 			topRollup.value = {
 				..._r,
 				category: getRankCategory(roundTo(_r.rank / 10, 0)),
-				name: _r.slug.split("-").map(el => capitilize(el)).join(" "),
+				name: _r.slug
+					.split("-")
+					.map((el) => capitilize(el))
+					.join(" "),
 			}
 		}
 	}
-	
+
 	const _tvs = await fetchTVS({ period: null })
 	if (_tvs.value) {
 		appStore.tvs = _tvs.value
@@ -116,7 +119,9 @@ onMounted(async () => {
 								<Flex direction="column" gap="8">
 									<Flex align="center" justify="between" gap="8">
 										<Text size="12" weight="500" color="tertiary">Rank:</Text>
-										<Text size="12" weight="600" :color="topRollup?.category?.color"> {{ topRollup?.category?.name }} </Text>
+										<Text size="12" weight="600" :color="topRollup?.category?.color">
+											{{ topRollup?.category?.name }}
+										</Text>
 									</Flex>
 									<Flex align="center" justify="between" gap="8">
 										<Text size="12" weight="500" color="tertiary">Score:</Text>
@@ -129,7 +134,7 @@ onMounted(async () => {
 
 					<div :class="$style.dot" />
 				</template>
-				
+
 				<Tooltip>
 					<Flex align="center" gap="6" :class="$style.stat">
 						<Icon name="coins" size="12" color="secondary" :class="$style.icon" />
@@ -159,9 +164,7 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Txs:</Text>
 
-							<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">{{
-								abbreviate(txCount24h)
-							}}</Text>
+							<Text v-if="!isLoading" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(txCount24h) }}</Text>
 							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>

components/Icon.vue → app/components/Icon.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from "vue"
 
-import icons from "@/assets/icons.json"
+import icons from "~/assets/icons.json"
 
 const props = defineProps({
 	name: { type: String, required: true, default: "" },

components/LeftSidebar.vue → app/components/LeftSidebar.vue

@@ -1,25 +1,25 @@
 <script setup>
 /** UI */
-import Button from "@/components/ui/Button.vue"
-import { Dropdown, DropdownItem, DropdownTitle, DropdownDivider } from "@/components/ui/Dropdown"
+import Button from "~/components/ui/Button.vue"
+import { Dropdown, DropdownItem, DropdownTitle, DropdownDivider } from "~/components/ui/Dropdown/index.js"
 
 /** Components */
-import AdvBanner from "@/components/shared/AdvBanner.vue"
-import NavLink from "@/components/modules/navigation/NavLink.vue"
+import AdvBanner from "~/components/shared/AdvBanner.vue"
+import NavLink from "~/components/modules/navigation/NavLink.vue"
 
 /** Utils */
-import { getNetworkName } from "@/services/utils/general"
-import { StatusMap } from "@/services/constants/node"
-import { isMainnet, isMobile } from "@/services/utils"
-import { nodeStatsURL } from "@/services/config"
-import { isSelfhosted } from "@/services/config.js"
-import { DEFAULT_SETTINGS } from "@/services/constants/settings.js"
+import { getNetworkName } from "~/services/utils/general.js"
+import { StatusMap } from "~/services/constants/node.js"
+import { isMainnet, isMobile } from "~/services/utils/index.js"
+import { nodeStatsURL } from "~/services/config.js"
+import { isSelfhosted } from "~/services/config.js"
+import { DEFAULT_SETTINGS } from "~/services/constants/settings.js"
 
 /** Store */
-import { useAppStore } from "@/store/app.store"
+import { useAppStore } from "~/store/app.store.js"
 import { useAuthStore } from "~/store/auth.store.js"
-import { useNodeStore } from "@/store/node.store"
-import { useModalsStore } from "@/store/modals.store"
+import { useNodeStore } from "~/store/node.store.js"
+import { useModalsStore } from "~/store/modals.store.js"
 
 const appStore = useAppStore()
 const nodeStore = useNodeStore()