From f38c0dc28075a6285eb4451606f8ebf414adf02d Mon Sep 17 00:00:00 2001
From: bush1D3v <victor.jose.lopes.navarro@gmail.com>
Date: Sun, 29 Sep 2024 15:28:28 -0300
Subject: [PATCH] bomb commit

---
 api/src/config/cors.ts                        |  24 +-
 api/src/helpers/HttpClient.ts                 |  32 +-
 api/src/proxy/CoinMarketCap.ts                |  40 +-
 api/src/routes/CoinMarketCap.ts               |   2 +-
 api/src/types/CoinMarketCap/CryptoCurrency.ts |  44 +-
 api/src/types/CoinMarketCap/Quote.ts          |  28 +-
 app/components/EntityCard.vue                 |  54 ++
 app/components/LineCryptoChat.vue             | 524 +++++++++---------
 app/components/ui/card/Card.vue               |   8 +-
 app/components/ui/card/CardContent.vue        |   8 +-
 app/components/ui/card/CardDescription.vue    |   8 +-
 app/components/ui/card/CardFooter.vue         |   8 +-
 app/components/ui/card/CardHeader.vue         |   8 +-
 app/components/ui/card/CardTitle.vue          |   8 +-
 app/components/ui/card/index.ts               |  12 +-
 app/components/ui/chart-line/LineChart.vue    |  89 +--
 app/components/ui/chart-line/index.ts         | 122 ++--
 app/components/ui/chart/ChartCrosshair.vue    |  62 ++-
 app/components/ui/chart/ChartLegend.vue       |  67 ++-
 .../ui/chart/ChartSingleTooltip.vue           | 103 ++--
 app/components/ui/chart/ChartTooltip.vue      |  16 +-
 app/components/ui/chart/index.ts              |  30 +-
 app/components/ui/chart/interface.ts          | 120 ++--
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  22 +-
 app/server/HttpClient.ts                      |  32 +-
 app/services/CoinMarketCap.ts                 |  24 +-
 app/stores/useCryptoCurrencyStore.ts          |  49 +-
 app/types/CoinMarketCap/CryptoCurrency.ts     |  44 +-
 app/types/CoinMarketCap/Quote.ts              |  28 +-
 app/utils/numberFormatter.ts                  |  38 +-
 app/views/CookiePolicy.vue                    |   2 +-
 app/views/CryptoDetail.vue                    |  12 +-
 app/views/Cryptos.vue                         |  46 +-
 app/views/PrivacyPolicy.vue                   |   2 +-
 package.json                                  |   4 +-
 35 files changed, 891 insertions(+), 829 deletions(-)
 create mode 100644 app/components/EntityCard.vue

diff --git a/api/src/config/cors.ts b/api/src/config/cors.ts
index b2d7110..d30ec92 100644
--- a/api/src/config/cors.ts
+++ b/api/src/config/cors.ts
@@ -1,18 +1,18 @@
 import cors from "cors";
 
 const corsOptions = {
-    origin: [ "http://localhost:5173" ],
-    methods: [ "GET", "POST", "PUT", "PATCH", "DELETE" ],
-    allowedHeaders: [
-        "Content-Type",
-        "Authorization",
-        "X-CMC_PRO_API_KEY",
-        "Accept-Encoding",
-        "Accept",
-        "referrer-policy",
-    ],
-    credentials: true,
-    optionsSuccessStatus: 200,
+	origin: ["http://localhost:5173"],
+	methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+	allowedHeaders: [
+		"Content-Type",
+		"Authorization",
+		"X-CMC_PRO_API_KEY",
+		"Accept-Encoding",
+		"Accept",
+		"referrer-policy",
+	],
+	credentials: true,
+	optionsSuccessStatus: 200,
 };
 
 export default cors(corsOptions);
diff --git a/api/src/helpers/HttpClient.ts b/api/src/helpers/HttpClient.ts
index f1b7167..2b760e8 100644
--- a/api/src/helpers/HttpClient.ts
+++ b/api/src/helpers/HttpClient.ts
@@ -1,42 +1,42 @@
 const DEFAULT_HEADERS = {
-    "Content-Type": "application/json; charset=utf-8",
-    "Accept": "application/json",
+	"Content-Type": "application/json; charset=utf-8",
+	Accept: "application/json",
 };
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
 interface HttpRequestOptions {
-    method: HttpMethod;
-    headers?: HeadersInit;
-    body?: undefined;
+	method: HttpMethod;
+	headers?: HeadersInit;
+	body?: undefined;
 }
 
 async function httpRequest(url: string, options: HttpRequestOptions): Promise<Response> {
-    const headers = { ...DEFAULT_HEADERS, ...options.headers };
+	const headers = {...DEFAULT_HEADERS, ...options.headers};
 
-    return await fetch(url, {
-        method: options.method,
-        headers: headers,
-        body: options.body ? JSON.stringify(options.body) : null,
-    });
+	return await fetch(url, {
+		method: options.method,
+		headers: headers,
+		body: options.body ? JSON.stringify(options.body) : null,
+	});
 }
 
 export async function get(endpoint: string, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "GET", headers });
+	return httpRequest(endpoint, {method: "GET", headers});
 }
 
 export async function post<T>(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "POST", headers, body });
+	return httpRequest(endpoint, {method: "POST", headers, body});
 }
 
 export async function put(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "PUT", headers, body });
+	return httpRequest(endpoint, {method: "PUT", headers, body});
 }
 
 export async function patch(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "PATCH", headers, body });
+	return httpRequest(endpoint, {method: "PATCH", headers, body});
 }
 
 export async function del(endpoint: string, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "DELETE", headers });
+	return httpRequest(endpoint, {method: "DELETE", headers});
 }
diff --git a/api/src/proxy/CoinMarketCap.ts b/api/src/proxy/CoinMarketCap.ts
index cbb1397..db31c06 100644
--- a/api/src/proxy/CoinMarketCap.ts
+++ b/api/src/proxy/CoinMarketCap.ts
@@ -1,20 +1,20 @@
-import type { Request, Response } from "express";
-import { get } from "../helpers/HttpClient.ts";
+import type {Request, Response} from "express";
+import {get} from "../helpers/HttpClient.ts";
 import dotenv from "dotenv";
-import type { CryptoCurrency } from "../types/CoinMarketCap/CryptoCurrency.ts";
+import type {CryptoCurrency} from "../types/CoinMarketCap/CryptoCurrency.ts";
 dotenv.config();
 
 const BASE_API_URL = process.env.COINMARKETCAP_HOST as string;
 const API_KEY = process.env.COINMARKETCAP_KEY as string;
 
 const defaultHeaders = {
-    "Accept-Encoding": "deflate, gzip",
-    "referrer-policy": "origin-when-cross-origin",
-    "X-CMC_PRO_API_KEY": API_KEY,
+	"Accept-Encoding": "deflate, gzip",
+	"referrer-policy": "origin-when-cross-origin",
+	"X-CMC_PRO_API_KEY": API_KEY,
 };
 
 interface ResponseData {
-    data: CryptoCurrency[];
+	data: CryptoCurrency[];
 }
 
 /**
@@ -26,20 +26,20 @@ interface ResponseData {
  * @throws {Error} If the request to the external API fails
  */
 export async function listingsLatest(req: Request, res: Response): Promise<void> {
-    const { limit = 12, start = 1 } = req.query;
-    try {
-        const response = await get(
-            `${BASE_API_URL}/v1/cryptocurrency/listings/latest?limit=${limit}&start=${start}`,
-            defaultHeaders,
-        );
+	const {limit = 12, start = 1} = req.query;
+	try {
+		const response = await get(
+			`${BASE_API_URL}/v1/cryptocurrency/listings/latest?limit=${limit}&start=${start}`,
+			defaultHeaders,
+		);
 
-        if (!response.ok) throw new Error(await response.json());
+		if (!response.ok) throw new Error(await response.json());
 
-        const data: ResponseData = await response.json();
+		const data: ResponseData = await response.json();
 
-        res.json(data.data);
-    } catch (error) {
-        console.error(error);
-        res.status(500).json({ error: error });
-    }
+		res.json(data.data);
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({error: error});
+	}
 }
diff --git a/api/src/routes/CoinMarketCap.ts b/api/src/routes/CoinMarketCap.ts
index 932798d..86739eb 100644
--- a/api/src/routes/CoinMarketCap.ts
+++ b/api/src/routes/CoinMarketCap.ts
@@ -1,5 +1,5 @@
 import express from "express";
-import { listingsLatest } from "../proxy/CoinMarketCap.ts";
+import {listingsLatest} from "../proxy/CoinMarketCap.ts";
 
 const coinMarketCapRoutes = express();
 
diff --git a/api/src/types/CoinMarketCap/CryptoCurrency.ts b/api/src/types/CoinMarketCap/CryptoCurrency.ts
index 569e475..cca7f10 100644
--- a/api/src/types/CoinMarketCap/CryptoCurrency.ts
+++ b/api/src/types/CoinMarketCap/CryptoCurrency.ts
@@ -1,28 +1,28 @@
-import type { Platform } from "./Platform";
-import type { Quote } from "./Quote";
+import type {Platform} from "./Platform";
+import type {Quote} from "./Quote";
 
 interface USDQuote {
-    USD: Quote;
+	USD: Quote;
 }
 
 export interface CryptoCurrency {
-    id: number;
-    name: string;
-    symbol: string;
-    slug: string;
-    num_market_pairs: number;
-    date_added: Date;
-    tags: string[];
-    max_supply: number;
-    circulating_supply: number;
-    total_supply: number;
-    infinity_supply: boolean;
-    platform: Platform | null;
-    cmc_rank: number;
-    self_reported_circulating_supply: number | null;
-    self_reported_market_cap: number | null;
-    tvl_ratio: number | null;
-    last_updated: Date;
-    quote: USDQuote;
-    image: string;
+	id: number;
+	name: string;
+	symbol: string;
+	slug: string;
+	num_market_pairs: number;
+	date_added: Date;
+	tags: string[];
+	max_supply: number;
+	circulating_supply: number;
+	total_supply: number;
+	infinity_supply: boolean;
+	platform: Platform | null;
+	cmc_rank: number;
+	self_reported_circulating_supply: number | null;
+	self_reported_market_cap: number | null;
+	tvl_ratio: number | null;
+	last_updated: Date;
+	quote: USDQuote;
+	image: string;
 }
diff --git a/api/src/types/CoinMarketCap/Quote.ts b/api/src/types/CoinMarketCap/Quote.ts
index 6644291..96828bd 100644
--- a/api/src/types/CoinMarketCap/Quote.ts
+++ b/api/src/types/CoinMarketCap/Quote.ts
@@ -1,16 +1,16 @@
 export interface Quote {
-    price: number;
-    volume_24h: number;
-    volume_change_24h: number;
-    percent_change_1h: number;
-    percent_change_24h: number;
-    percent_change_7d: number;
-    percent_change_30d: number;
-    percent_change_60d: number;
-    percent_change_90d: number;
-    market_cap: number;
-    market_cap_dominance: number;
-    fully_diluted_market_cap: number;
-    tvl: number | null;
-    last_updated: Date;
+	price: number;
+	volume_24h: number;
+	volume_change_24h: number;
+	percent_change_1h: number;
+	percent_change_24h: number;
+	percent_change_7d: number;
+	percent_change_30d: number;
+	percent_change_60d: number;
+	percent_change_90d: number;
+	market_cap: number;
+	market_cap_dominance: number;
+	fully_diluted_market_cap: number;
+	tvl: number | null;
+	last_updated: Date;
 }
diff --git a/app/components/EntityCard.vue b/app/components/EntityCard.vue
new file mode 100644
index 0000000..5e60ad1
--- /dev/null
+++ b/app/components/EntityCard.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Image from "@/tags/Image.vue";
+import Button from "@/components/ui/button/Button.vue";
+import numberFormatter from "@/utils/numberFormatter";
+
+export interface EntityCardProps {
+    id: string | number;
+    name: string;
+    symbol: string;
+    image: string;
+    routerLinkTo: string;
+    price: number;
+    market_cap: number;
+    circulating_supply: number;
+}
+
+const props = defineProps<EntityCardProps>();
+</script>
+
+<template>
+    <div class="flex flex-col bg-secondaryDarker gap-4 p-5 rounded-lg min-w-96">
+        <div class="flex gap-4 items-center">
+            <Image :src="props.image" :alt="props.name + ' logo'" width="50" height="50" class="rounded-full" />
+            <div class="flex flex-col">
+                <h3 class="line-clamp-1 max-w-56">{{ props.name }}</h3>
+                <div class="flex gap-[6px]">
+                    <p>Currency</p>
+                    <strong>{{ props.symbol }}</strong>
+                    <p>&nbsp;·&nbsp; Chain ID</p>
+                    <strong>{{ props.id }}</strong>
+                </div>
+            </div>
+        </div>
+        <hr class="h-[1px] w-full" />
+        <h6 v-translate>Estatísticas</h6>
+        <div class="font-semibold flex justify-between">
+            <div>
+                <strong>${{ numberFormatter(props.price) }}</strong>
+                <p>Preço</p>
+            </div>
+            <div>
+                <strong>{{ numberFormatter(props.market_cap) }}</strong>
+                <p>Capitalização de mercado</p>
+            </div>
+            <div>
+                <strong>{{ numberFormatter(props.circulating_supply) }}</strong>
+                <p>Volume</p>
+            </div>
+        </div>
+        <RouterLink :to="props.routerLinkTo">
+            <Button class="w-full">Explore {{ props.name }}</Button>
+        </RouterLink>
+    </div>
+</template>
diff --git a/app/components/LineCryptoChat.vue b/app/components/LineCryptoChat.vue
index 4644b68..6e99f83 100644
--- a/app/components/LineCryptoChat.vue
+++ b/app/components/LineCryptoChat.vue
@@ -1,268 +1,268 @@
 <script setup lang="ts">
-import { LineChart } from '@/components/ui/chart-line'
+import {LineChart} from "@/components/ui/chart-line";
 
 const data = [
-    {
-        'year': 1970,
-        'Export Growth Rate': 2.04,
-        'Import Growth Rate': 1.53,
-    },
-    {
-        'year': 1971,
-        'Export Growth Rate': 1.96,
-        'Import Growth Rate': 1.58,
-    },
-    {
-        'year': 1972,
-        'Export Growth Rate': 1.96,
-        'Import Growth Rate': 1.61,
-    },
-    {
-        'year': 1973,
-        'Export Growth Rate': 1.93,
-        'Import Growth Rate': 1.61,
-    },
-    {
-        'year': 1974,
-        'Export Growth Rate': 1.88,
-        'Import Growth Rate': 1.67,
-    },
-    {
-        'year': 1975,
-        'Export Growth Rate': 1.79,
-        'Import Growth Rate': 1.64,
-    },
-    {
-        'year': 1976,
-        'Export Growth Rate': 1.77,
-        'Import Growth Rate': 1.62,
-    },
-    {
-        'year': 1977,
-        'Export Growth Rate': 1.74,
-        'Import Growth Rate': 1.69,
-    },
-    {
-        'year': 1978,
-        'Export Growth Rate': 1.74,
-        'Import Growth Rate': 1.7,
-    },
-    {
-        'year': 1979,
-        'Export Growth Rate': 1.77,
-        'Import Growth Rate': 1.67,
-    },
-    {
-        'year': 1980,
-        'Export Growth Rate': 1.79,
-        'Import Growth Rate': 1.7,
-    },
-    {
-        'year': 1981,
-        'Export Growth Rate': 1.81,
-        'Import Growth Rate': 1.72,
-    },
-    {
-        'year': 1982,
-        'Export Growth Rate': 1.84,
-        'Import Growth Rate': 1.73,
-    },
-    {
-        'year': 1983,
-        'Export Growth Rate': 1.77,
-        'Import Growth Rate': 1.73,
-    },
-    {
-        'year': 1984,
-        'Export Growth Rate': 1.78,
-        'Import Growth Rate': 1.78,
-    },
-    {
-        'year': 1985,
-        'Export Growth Rate': 1.78,
-        'Import Growth Rate': 1.81,
-    },
-    {
-        'year': 1986,
-        'Export Growth Rate': 1.82,
-        'Import Growth Rate': 1.89,
-    },
-    {
-        'year': 1987,
-        'Export Growth Rate': 1.82,
-        'Import Growth Rate': 1.91,
-    },
-    {
-        'year': 1988,
-        'Export Growth Rate': 1.77,
-        'Import Growth Rate': 1.94,
-    },
-    {
-        'year': 1989,
-        'Export Growth Rate': 1.76,
-        'Import Growth Rate': 1.94,
-    },
-    {
-        'year': 1990,
-        'Export Growth Rate': 1.75,
-        'Import Growth Rate': 1.97,
-    },
-    {
-        'year': 1991,
-        'Export Growth Rate': 1.62,
-        'Import Growth Rate': 1.99,
-    },
-    {
-        'year': 1992,
-        'Export Growth Rate': 1.56,
-        'Import Growth Rate': 2.12,
-    },
-    {
-        'year': 1993,
-        'Export Growth Rate': 1.5,
-        'Import Growth Rate': 2.13,
-    },
-    {
-        'year': 1994,
-        'Export Growth Rate': 1.46,
-        'Import Growth Rate': 2.15,
-    },
-    {
-        'year': 1995,
-        'Export Growth Rate': 1.43,
-        'Import Growth Rate': 2.17,
-    },
-    {
-        'year': 1996,
-        'Export Growth Rate': 1.4,
-        'Import Growth Rate': 2.2,
-    },
-    {
-        'year': 1997,
-        'Export Growth Rate': 1.37,
-        'Import Growth Rate': 2.15,
-    },
-    {
-        'year': 1998,
-        'Export Growth Rate': 1.34,
-        'Import Growth Rate': 2.07,
-    },
-    {
-        'year': 1999,
-        'Export Growth Rate': 1.32,
-        'Import Growth Rate': 2.05,
-    },
-    {
-        'year': 2000,
-        'Export Growth Rate': 1.33,
-        'Import Growth Rate': 2.07,
-    },
-    {
-        'year': 2001,
-        'Export Growth Rate': 1.31,
-        'Import Growth Rate': 2.08,
-    },
-    {
-        'year': 2002,
-        'Export Growth Rate': 1.29,
-        'Import Growth Rate': 2.1,
-    },
-    {
-        'year': 2003,
-        'Export Growth Rate': 1.27,
-        'Import Growth Rate': 2.15,
-    },
-    {
-        'year': 2004,
-        'Export Growth Rate': 1.27,
-        'Import Growth Rate': 2.21,
-    },
-    {
-        'year': 2005,
-        'Export Growth Rate': 1.26,
-        'Import Growth Rate': 2.23,
-    },
-    {
-        'year': 2006,
-        'Export Growth Rate': 1.26,
-        'Import Growth Rate': 2.29,
-    },
-    {
-        'year': 2007,
-        'Export Growth Rate': 1.27,
-        'Import Growth Rate': 2.34,
-    },
-    {
-        'year': 2008,
-        'Export Growth Rate': 1.26,
-        'Import Growth Rate': 2.36,
-    },
-    {
-        'year': 2009,
-        'Export Growth Rate': 1.26,
-        'Import Growth Rate': 2.36,
-    },
-    {
-        'year': 2010,
-        'Export Growth Rate': 1.25,
-        'Import Growth Rate': 2.35,
-    },
-    {
-        'year': 2011,
-        'Export Growth Rate': 1.24,
-        'Import Growth Rate': 2.34,
-    },
-    {
-        'year': 2012,
-        'Export Growth Rate': 1.25,
-        'Import Growth Rate': 2.39,
-    },
-    {
-        'year': 2013,
-        'Export Growth Rate': 1.22,
-        'Import Growth Rate': 2.3,
-    },
-    {
-        'year': 2014,
-        'Export Growth Rate': 1.2,
-        'Import Growth Rate': 2.35,
-    },
-    {
-        'year': 2015,
-        'Export Growth Rate': 1.17,
-        'Import Growth Rate': 2.39,
-    },
-    {
-        'year': 2016,
-        'Export Growth Rate': 1.16,
-        'Import Growth Rate': 2.41,
-    },
-    {
-        'year': 2017,
-        'Export Growth Rate': 1.13,
-        'Import Growth Rate': 2.44,
-    },
-    {
-        'year': 2018,
-        'Export Growth Rate': 1.07,
-        'Import Growth Rate': 2.45,
-    },
-    {
-        'year': 2019,
-        'Export Growth Rate': 1.03,
-        'Import Growth Rate': 2.47,
-    },
-    {
-        'year': 2020,
-        'Export Growth Rate': 0.92,
-        'Import Growth Rate': 2.48,
-    },
-    {
-        'year': 2021,
-        'Export Growth Rate': 0.82,
-        'Import Growth Rate': 2.51,
-    },
-]
+	{
+		year: 1970,
+		"Export Growth Rate": 2.04,
+		"Import Growth Rate": 1.53,
+	},
+	{
+		year: 1971,
+		"Export Growth Rate": 1.96,
+		"Import Growth Rate": 1.58,
+	},
+	{
+		year: 1972,
+		"Export Growth Rate": 1.96,
+		"Import Growth Rate": 1.61,
+	},
+	{
+		year: 1973,
+		"Export Growth Rate": 1.93,
+		"Import Growth Rate": 1.61,
+	},
+	{
+		year: 1974,
+		"Export Growth Rate": 1.88,
+		"Import Growth Rate": 1.67,
+	},
+	{
+		year: 1975,
+		"Export Growth Rate": 1.79,
+		"Import Growth Rate": 1.64,
+	},
+	{
+		year: 1976,
+		"Export Growth Rate": 1.77,
+		"Import Growth Rate": 1.62,
+	},
+	{
+		year: 1977,
+		"Export Growth Rate": 1.74,
+		"Import Growth Rate": 1.69,
+	},
+	{
+		year: 1978,
+		"Export Growth Rate": 1.74,
+		"Import Growth Rate": 1.7,
+	},
+	{
+		year: 1979,
+		"Export Growth Rate": 1.77,
+		"Import Growth Rate": 1.67,
+	},
+	{
+		year: 1980,
+		"Export Growth Rate": 1.79,
+		"Import Growth Rate": 1.7,
+	},
+	{
+		year: 1981,
+		"Export Growth Rate": 1.81,
+		"Import Growth Rate": 1.72,
+	},
+	{
+		year: 1982,
+		"Export Growth Rate": 1.84,
+		"Import Growth Rate": 1.73,
+	},
+	{
+		year: 1983,
+		"Export Growth Rate": 1.77,
+		"Import Growth Rate": 1.73,
+	},
+	{
+		year: 1984,
+		"Export Growth Rate": 1.78,
+		"Import Growth Rate": 1.78,
+	},
+	{
+		year: 1985,
+		"Export Growth Rate": 1.78,
+		"Import Growth Rate": 1.81,
+	},
+	{
+		year: 1986,
+		"Export Growth Rate": 1.82,
+		"Import Growth Rate": 1.89,
+	},
+	{
+		year: 1987,
+		"Export Growth Rate": 1.82,
+		"Import Growth Rate": 1.91,
+	},
+	{
+		year: 1988,
+		"Export Growth Rate": 1.77,
+		"Import Growth Rate": 1.94,
+	},
+	{
+		year: 1989,
+		"Export Growth Rate": 1.76,
+		"Import Growth Rate": 1.94,
+	},
+	{
+		year: 1990,
+		"Export Growth Rate": 1.75,
+		"Import Growth Rate": 1.97,
+	},
+	{
+		year: 1991,
+		"Export Growth Rate": 1.62,
+		"Import Growth Rate": 1.99,
+	},
+	{
+		year: 1992,
+		"Export Growth Rate": 1.56,
+		"Import Growth Rate": 2.12,
+	},
+	{
+		year: 1993,
+		"Export Growth Rate": 1.5,
+		"Import Growth Rate": 2.13,
+	},
+	{
+		year: 1994,
+		"Export Growth Rate": 1.46,
+		"Import Growth Rate": 2.15,
+	},
+	{
+		year: 1995,
+		"Export Growth Rate": 1.43,
+		"Import Growth Rate": 2.17,
+	},
+	{
+		year: 1996,
+		"Export Growth Rate": 1.4,
+		"Import Growth Rate": 2.2,
+	},
+	{
+		year: 1997,
+		"Export Growth Rate": 1.37,
+		"Import Growth Rate": 2.15,
+	},
+	{
+		year: 1998,
+		"Export Growth Rate": 1.34,
+		"Import Growth Rate": 2.07,
+	},
+	{
+		year: 1999,
+		"Export Growth Rate": 1.32,
+		"Import Growth Rate": 2.05,
+	},
+	{
+		year: 2000,
+		"Export Growth Rate": 1.33,
+		"Import Growth Rate": 2.07,
+	},
+	{
+		year: 2001,
+		"Export Growth Rate": 1.31,
+		"Import Growth Rate": 2.08,
+	},
+	{
+		year: 2002,
+		"Export Growth Rate": 1.29,
+		"Import Growth Rate": 2.1,
+	},
+	{
+		year: 2003,
+		"Export Growth Rate": 1.27,
+		"Import Growth Rate": 2.15,
+	},
+	{
+		year: 2004,
+		"Export Growth Rate": 1.27,
+		"Import Growth Rate": 2.21,
+	},
+	{
+		year: 2005,
+		"Export Growth Rate": 1.26,
+		"Import Growth Rate": 2.23,
+	},
+	{
+		year: 2006,
+		"Export Growth Rate": 1.26,
+		"Import Growth Rate": 2.29,
+	},
+	{
+		year: 2007,
+		"Export Growth Rate": 1.27,
+		"Import Growth Rate": 2.34,
+	},
+	{
+		year: 2008,
+		"Export Growth Rate": 1.26,
+		"Import Growth Rate": 2.36,
+	},
+	{
+		year: 2009,
+		"Export Growth Rate": 1.26,
+		"Import Growth Rate": 2.36,
+	},
+	{
+		year: 2010,
+		"Export Growth Rate": 1.25,
+		"Import Growth Rate": 2.35,
+	},
+	{
+		year: 2011,
+		"Export Growth Rate": 1.24,
+		"Import Growth Rate": 2.34,
+	},
+	{
+		year: 2012,
+		"Export Growth Rate": 1.25,
+		"Import Growth Rate": 2.39,
+	},
+	{
+		year: 2013,
+		"Export Growth Rate": 1.22,
+		"Import Growth Rate": 2.3,
+	},
+	{
+		year: 2014,
+		"Export Growth Rate": 1.2,
+		"Import Growth Rate": 2.35,
+	},
+	{
+		year: 2015,
+		"Export Growth Rate": 1.17,
+		"Import Growth Rate": 2.39,
+	},
+	{
+		year: 2016,
+		"Export Growth Rate": 1.16,
+		"Import Growth Rate": 2.41,
+	},
+	{
+		year: 2017,
+		"Export Growth Rate": 1.13,
+		"Import Growth Rate": 2.44,
+	},
+	{
+		year: 2018,
+		"Export Growth Rate": 1.07,
+		"Import Growth Rate": 2.45,
+	},
+	{
+		year: 2019,
+		"Export Growth Rate": 1.03,
+		"Import Growth Rate": 2.47,
+	},
+	{
+		year: 2020,
+		"Export Growth Rate": 0.92,
+		"Import Growth Rate": 2.48,
+	},
+	{
+		year: 2021,
+		"Export Growth Rate": 0.82,
+		"Import Growth Rate": 2.51,
+	},
+];
 </script>
 
 <template>
diff --git a/app/components/ui/card/Card.vue b/app/components/ui/card/Card.vue
index e5ec5c4..b019530 100644
--- a/app/components/ui/card/Card.vue
+++ b/app/components/ui/card/Card.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-    class?: HTMLAttributes[ 'class' ]
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/CardContent.vue b/app/components/ui/card/CardContent.vue
index 785913a..134e736 100644
--- a/app/components/ui/card/CardContent.vue
+++ b/app/components/ui/card/CardContent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/CardDescription.vue b/app/components/ui/card/CardDescription.vue
index f34f2e0..f458fe9 100644
--- a/app/components/ui/card/CardDescription.vue
+++ b/app/components/ui/card/CardDescription.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-    class?: HTMLAttributes[ 'class' ]
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/CardFooter.vue b/app/components/ui/card/CardFooter.vue
index 1ed2efe..9e6d5e5 100644
--- a/app/components/ui/card/CardFooter.vue
+++ b/app/components/ui/card/CardFooter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/CardHeader.vue b/app/components/ui/card/CardHeader.vue
index 951d227..6e0499d 100644
--- a/app/components/ui/card/CardHeader.vue
+++ b/app/components/ui/card/CardHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/CardTitle.vue b/app/components/ui/card/CardTitle.vue
index fc302e2..aa024eb 100644
--- a/app/components/ui/card/CardTitle.vue
+++ b/app/components/ui/card/CardTitle.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type {HTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/card/index.ts b/app/components/ui/card/index.ts
index 8170483..6a522d0 100644
--- a/app/components/ui/card/index.ts
+++ b/app/components/ui/card/index.ts
@@ -1,6 +1,6 @@
-export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
+export {default as Card} from "./Card.vue";
+export {default as CardHeader} from "./CardHeader.vue";
+export {default as CardTitle} from "./CardTitle.vue";
+export {default as CardDescription} from "./CardDescription.vue";
+export {default as CardContent} from "./CardContent.vue";
+export {default as CardFooter} from "./CardFooter.vue";
diff --git a/app/components/ui/chart-line/LineChart.vue b/app/components/ui/chart-line/LineChart.vue
index c4f3781..5a21956 100644
--- a/app/components/ui/chart-line/LineChart.vue
+++ b/app/components/ui/chart-line/LineChart.vue
@@ -1,53 +1,62 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
-import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Axis, Line } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
-import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/components/ui/chart'
-import { cn } from '@/lib/utils'
+import {type BulletLegendItemInterface, CurveType} from "@unovis/ts";
+import {VisAxis, VisLine, VisXYContainer} from "@unovis/vue";
+import {Axis, Line} from "@unovis/ts";
+import {type Component, computed, ref} from "vue";
+import {useMounted} from "@vueuse/core";
+import type {BaseChartProps} from ".";
+import {ChartCrosshair, ChartLegend, defaultColors} from "@/components/ui/chart";
+import {cn} from "@/lib/utils";
 
-const props = withDefaults(defineProps<BaseChartProps<T> & {
-    /**
-     * Render custom tooltip component.
-     */
-    customTooltip?: Component
-    /**
-     * Type of curve
-     */
-    curveType?: CurveType
-}>(), {
-    curveType: CurveType.MonotoneX,
-    filterOpacity: 0.2,
-    margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-    showXAxis: true,
-    showYAxis: true,
-    showTooltip: true,
-    showLegend: true,
-    showGridLine: true,
-})
+const props = withDefaults(
+	defineProps<
+		BaseChartProps<T> & {
+			/**
+			 * Render custom tooltip component.
+			 */
+			customTooltip?: Component;
+			/**
+			 * Type of curve
+			 */
+			curveType?: CurveType;
+		}
+	>(),
+	{
+		curveType: CurveType.MonotoneX,
+		filterOpacity: 0.2,
+		margin: () => ({top: 0, bottom: 0, left: 0, right: 0}),
+		showXAxis: true,
+		showYAxis: true,
+		showTooltip: true,
+		showLegend: true,
+		showGridLine: true,
+	},
+);
 
 const emits = defineEmits<{
-    legendItemClick: [ d: BulletLegendItemInterface, i: number ]
-}>()
+	legendItemClick: [d: BulletLegendItemInterface, i: number];
+}>();
 
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[ number ]
+type KeyOfT = Extract<keyof T, string>;
+type Data = (typeof props.data)[number];
 
-const index = computed(() => props.index as KeyOfT)
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+const index = computed(() => props.index as KeyOfT);
+const colors = computed(() =>
+	props.colors?.length ? props.colors : defaultColors(props.categories.length),
+);
 
-const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
-    name: category,
-    color: colors.value[ i ],
-    inactive: false,
-})))
+const legendItems = ref<BulletLegendItemInterface[]>(
+	props.categories.map((category, i) => ({
+		name: category,
+		color: colors.value[i],
+		inactive: false,
+	})),
+);
 
-const isMounted = useMounted()
+const isMounted = useMounted();
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-    emits('legendItemClick', d, i)
+	emits("legendItemClick", d, i);
 }
 </script>
 
diff --git a/app/components/ui/chart-line/index.ts b/app/components/ui/chart-line/index.ts
index bb0a26f..d15d19d 100644
--- a/app/components/ui/chart-line/index.ts
+++ b/app/components/ui/chart-line/index.ts
@@ -1,66 +1,66 @@
-export { default as LineChart } from './LineChart.vue'
+export {default as LineChart} from "./LineChart.vue";
 
-import type { Spacing } from '@unovis/ts'
+import type {Spacing} from "@unovis/ts";
 
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
 
 export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
+	/**
+	 * The source data, in which each entry is a dictionary.
+	 */
+	data: T[];
+	/**
+	 * Select the categories from your data. Used to populate the legend and toolip.
+	 */
+	categories: KeyOf<T>[];
+	/**
+	 * Sets the key to map the data to the axis.
+	 */
+	index: KeyOf<T>;
+	/**
+	 * Change the default colors.
+	 */
+	colors?: string[];
+	/**
+	 * Margin of each the container
+	 */
+	margin?: Spacing;
+	/**
+	 * Change the opacity of the non-selected field
+	 * @default 0.2
+	 */
+	filterOpacity?: number;
+	/**
+	 * Function to format X label
+	 */
+	xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+	/**
+	 * Function to format Y label
+	 */
+	yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+	/**
+	 * Controls the visibility of the X axis.
+	 * @default true
+	 */
+	showXAxis?: boolean;
+	/**
+	 * Controls the visibility of the Y axis.
+	 * @default true
+	 */
+	showYAxis?: boolean;
+	/**
+	 * Controls the visibility of tooltip.
+	 * @default true
+	 */
+	showTooltip?: boolean;
+	/**
+	 * Controls the visibility of legend.
+	 * @default true
+	 */
+	showLegend?: boolean;
+	/**
+	 * Controls the visibility of gridline.
+	 * @default true
+	 */
+	showGridLine?: boolean;
 }
diff --git a/app/components/ui/chart/ChartCrosshair.vue b/app/components/ui/chart/ChartCrosshair.vue
index 4c47149..f80401d 100644
--- a/app/components/ui/chart/ChartCrosshair.vue
+++ b/app/components/ui/chart/ChartCrosshair.vue
@@ -1,40 +1,44 @@
 <script setup lang="ts">
-import { VisCrosshair, VisTooltip } from '@unovis/vue'
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { omit } from '@unovis/ts'
-import { type Component, createApp } from 'vue'
-import { ChartTooltip } from '.'
+import {VisCrosshair, VisTooltip} from "@unovis/vue";
+import type {BulletLegendItemInterface} from "@unovis/ts";
+import {omit} from "@unovis/ts";
+import {type Component, createApp} from "vue";
+import {ChartTooltip} from ".";
 
-const props = withDefaults(defineProps<{
-  colors: string[]
-  index: string
-  items: BulletLegendItemInterface[]
-  customTooltip?: Component
-}>(), {
-  colors: () => [],
-})
+const props = withDefaults(
+	defineProps<{
+		colors: string[];
+		index: string;
+		items: BulletLegendItemInterface[];
+		customTooltip?: Component;
+	}>(),
+	{
+		colors: () => [],
+	},
+);
 
 // Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap()
+const wm = new WeakMap();
 function template(d: any) {
-  if (wm.has(d)) {
-    return wm.get(d)
-  }
-  else {
-    const componentDiv = document.createElement('div')
-    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
-      const legendReference = props.items.find(i => i.name === key)
-      return { ...legendReference, value }
-    })
-    const TooltipComponent = props.customTooltip ?? ChartTooltip
-    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
-    wm.set(d, componentDiv.innerHTML)
-    return componentDiv.innerHTML
-  }
+	if (wm.has(d)) {
+		return wm.get(d);
+	} else {
+		const componentDiv = document.createElement("div");
+		const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+			const legendReference = props.items.find((i) => i.name === key);
+			return {...legendReference, value};
+		});
+		const TooltipComponent = props.customTooltip ?? ChartTooltip;
+		createApp(TooltipComponent, {title: d[props.index].toString(), data: omittedData}).mount(
+			componentDiv,
+		);
+		wm.set(d, componentDiv.innerHTML);
+		return componentDiv.innerHTML;
+	}
 }
 
 function color(d: unknown, i: number) {
-  return props.colors[i] ?? 'transparent'
+	return props.colors[i] ?? "transparent";
 }
 </script>
 
diff --git a/app/components/ui/chart/ChartLegend.vue b/app/components/ui/chart/ChartLegend.vue
index f2f50c7..57a32d5 100644
--- a/app/components/ui/chart/ChartLegend.vue
+++ b/app/components/ui/chart/ChartLegend.vue
@@ -1,43 +1,50 @@
 <script setup lang="ts">
-import { VisBulletLegend } from '@unovis/vue'
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { BulletLegend } from '@unovis/ts'
-import { nextTick, onMounted, ref } from 'vue'
-import { buttonVariants } from '@/components/ui/button'
+import {VisBulletLegend} from "@unovis/vue";
+import type {BulletLegendItemInterface} from "@unovis/ts";
+import {BulletLegend} from "@unovis/ts";
+import {nextTick, onMounted, ref} from "vue";
+import {buttonVariants} from "@/components/ui/button";
 
-const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
-  items: () => [],
-})
+const props = withDefaults(defineProps<{items: BulletLegendItemInterface[]}>(), {
+	items: () => [],
+});
 
 const emits = defineEmits<{
-  'legendItemClick': [d: BulletLegendItemInterface, i: number]
-  'update:items': [payload: BulletLegendItemInterface[]]
-}>()
+	legendItemClick: [d: BulletLegendItemInterface, i: number];
+	"update:items": [payload: BulletLegendItemInterface[]];
+}>();
 
-const elRef = ref<HTMLElement>()
+const elRef = ref<HTMLElement>();
 
 onMounted(() => {
-  const selector = `.${BulletLegend.selectors.item}`
-  nextTick(() => {
-    const elements = elRef.value?.querySelectorAll(selector)
-    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+	const selector = `.${BulletLegend.selectors.item}`;
+	nextTick(() => {
+		const elements = elRef.value?.querySelectorAll(selector);
+		const classes = buttonVariants({variant: "ghost", size: "xs"}).split(" ");
 
-    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
-  })
-})
+		elements?.forEach((el) => el.classList.add(...classes, "!inline-flex", "!mr-2"));
+	});
+});
 
 function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
-  const isBulletActive = !props.items[i].inactive
-  const isFilterApplied = props.items.some(i => i.inactive)
-  if (isFilterApplied && isBulletActive) {
-    // reset filter
-    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
-  }
-  else {
-    // apply selection, set other item as inactive
-    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
-  }
+	emits("legendItemClick", d, i);
+	const isBulletActive = !props.items[i].inactive;
+	const isFilterApplied = props.items.some((i) => i.inactive);
+	if (isFilterApplied && isBulletActive) {
+		// reset filter
+		emits(
+			"update:items",
+			props.items.map((item) => ({...item, inactive: false})),
+		);
+	} else {
+		// apply selection, set other item as inactive
+		emits(
+			"update:items",
+			props.items.map((item) =>
+				item.name === d.name ? {...d, inactive: false} : {...item, inactive: true},
+			),
+		);
+	}
 }
 </script>
 
diff --git a/app/components/ui/chart/ChartSingleTooltip.vue b/app/components/ui/chart/ChartSingleTooltip.vue
index 49ca011..dcc0ac0 100644
--- a/app/components/ui/chart/ChartSingleTooltip.vue
+++ b/app/components/ui/chart/ChartSingleTooltip.vue
@@ -1,56 +1,65 @@
 <script setup lang="ts">
-import { VisTooltip } from '@unovis/vue'
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { omit } from '@unovis/ts'
-import { type Component, createApp } from 'vue'
-import { ChartTooltip } from '.'
+import {VisTooltip} from "@unovis/vue";
+import type {BulletLegendItemInterface} from "@unovis/ts";
+import {omit} from "@unovis/ts";
+import {type Component, createApp} from "vue";
+import {ChartTooltip} from ".";
 
-const props = withDefaults(defineProps<{
-  selector: string
-  index: string
-  items?: BulletLegendItemInterface[]
-  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
-  customTooltip?: Component
-}>(), {
-  valueFormatter: (tick: number) => `${tick}`,
-})
+const props = withDefaults(
+	defineProps<{
+		selector: string;
+		index: string;
+		items?: BulletLegendItemInterface[];
+		valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;
+		customTooltip?: Component;
+	}>(),
+	{
+		valueFormatter: (tick: number) => `${tick}`,
+	},
+);
 
 // Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap()
+const wm = new WeakMap();
 function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
-  if (props.index in d) {
-    if (wm.has(d)) {
-      return wm.get(d)
-    }
-    else {
-      const componentDiv = document.createElement('div')
-      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
-        const legendReference = props.items?.find(i => i.name === key)
-        return { ...legendReference, value: props.valueFormatter(value) }
-      })
-      const TooltipComponent = props.customTooltip ?? ChartTooltip
-      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
-      wm.set(d, componentDiv.innerHTML)
-      return componentDiv.innerHTML
-    }
-  }
+	if (props.index in d) {
+		if (wm.has(d)) {
+			return wm.get(d);
+		} else {
+			const componentDiv = document.createElement("div");
+			const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+				const legendReference = props.items?.find((i) => i.name === key);
+				return {...legendReference, value: props.valueFormatter(value)};
+			});
+			const TooltipComponent = props.customTooltip ?? ChartTooltip;
+			createApp(TooltipComponent, {title: d[props.index], data: omittedData}).mount(
+				componentDiv,
+			);
+			wm.set(d, componentDiv.innerHTML);
+			return componentDiv.innerHTML;
+		}
+	} else {
+		const data = d.data;
 
-  else {
-    const data = d.data
-
-    if (wm.has(data)) {
-      return wm.get(data)
-    }
-    else {
-      const style = getComputedStyle(elements[i])
-      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
-      const componentDiv = document.createElement('div')
-      const TooltipComponent = props.customTooltip ?? ChartTooltip
-      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
-      wm.set(d, componentDiv.innerHTML)
-      return componentDiv.innerHTML
-    }
-  }
+		if (wm.has(data)) {
+			return wm.get(data);
+		} else {
+			const style = getComputedStyle(elements[i]);
+			const omittedData = [
+				{
+					name: data.name,
+					value: props.valueFormatter(data[props.index]),
+					color: style.fill,
+				},
+			];
+			const componentDiv = document.createElement("div");
+			const TooltipComponent = props.customTooltip ?? ChartTooltip;
+			createApp(TooltipComponent, {title: d[props.index], data: omittedData}).mount(
+				componentDiv,
+			);
+			wm.set(d, componentDiv.innerHTML);
+			return componentDiv.innerHTML;
+		}
+	}
 }
 </script>
 
diff --git a/app/components/ui/chart/ChartTooltip.vue b/app/components/ui/chart/ChartTooltip.vue
index 71b8f30..d48d87f 100644
--- a/app/components/ui/chart/ChartTooltip.vue
+++ b/app/components/ui/chart/ChartTooltip.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 
 defineProps<{
-    title?: string
-    data: {
-        name: string
-        color: string
-        value: any
-    }[]
-}>()
+	title?: string;
+	data: {
+		name: string;
+		color: string;
+		value: any;
+	}[];
+}>();
 </script>
 
 <template>
diff --git a/app/components/ui/chart/index.ts b/app/components/ui/chart/index.ts
index e2d64c1..c0d77bd 100644
--- a/app/components/ui/chart/index.ts
+++ b/app/components/ui/chart/index.ts
@@ -1,18 +1,22 @@
-export { default as ChartTooltip } from './ChartTooltip.vue'
-export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
-export { default as ChartLegend } from './ChartLegend.vue'
-export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export {default as ChartTooltip} from "./ChartTooltip.vue";
+export {default as ChartSingleTooltip} from "./ChartSingleTooltip.vue";
+export {default as ChartLegend} from "./ChartLegend.vue";
+export {default as ChartCrosshair} from "./ChartCrosshair.vue";
 
 export function defaultColors(count: number = 3) {
-  const quotient = Math.floor(count / 2)
-  const remainder = count % 2
+	const quotient = Math.floor(count / 2);
+	const remainder = count % 2;
 
-  const primaryCount = quotient + remainder
-  const secondaryCount = quotient
-  return [
-    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
-    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
-  ]
+	const primaryCount = quotient + remainder;
+	const secondaryCount = quotient;
+	return [
+		...Array.from(Array(primaryCount).keys()).map(
+			(i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`,
+		),
+		...Array.from(Array(secondaryCount).keys()).map(
+			(i) => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`,
+		),
+	];
 }
 
-export * from './interface'
+export * from "./interface";
diff --git a/app/components/ui/chart/interface.ts b/app/components/ui/chart/interface.ts
index c3838af..22e7bb0 100644
--- a/app/components/ui/chart/interface.ts
+++ b/app/components/ui/chart/interface.ts
@@ -1,64 +1,64 @@
-import type { Spacing } from '@unovis/ts'
+import type {Spacing} from "@unovis/ts";
 
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
 
 export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
+	/**
+	 * The source data, in which each entry is a dictionary.
+	 */
+	data: T[];
+	/**
+	 * Select the categories from your data. Used to populate the legend and toolip.
+	 */
+	categories: KeyOf<T>[];
+	/**
+	 * Sets the key to map the data to the axis.
+	 */
+	index: KeyOf<T>;
+	/**
+	 * Change the default colors.
+	 */
+	colors?: string[];
+	/**
+	 * Margin of each the container
+	 */
+	margin?: Spacing;
+	/**
+	 * Change the opacity of the non-selected field
+	 * @default 0.2
+	 */
+	filterOpacity?: number;
+	/**
+	 * Function to format X label
+	 */
+	xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+	/**
+	 * Function to format Y label
+	 */
+	yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+	/**
+	 * Controls the visibility of the X axis.
+	 * @default true
+	 */
+	showXAxis?: boolean;
+	/**
+	 * Controls the visibility of the Y axis.
+	 * @default true
+	 */
+	showYAxis?: boolean;
+	/**
+	 * Controls the visibility of tooltip.
+	 * @default true
+	 */
+	showTooltip?: boolean;
+	/**
+	 * Controls the visibility of legend.
+	 * @default true
+	 */
+	showLegend?: boolean;
+	/**
+	 * Controls the visibility of gridline.
+	 * @default true
+	 */
+	showGridLine?: boolean;
 }
diff --git a/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index a5e0d34..931deec 100644
--- a/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
+import {type HTMLAttributes, computed} from "vue";
 import {
-    DropdownMenuItemIndicator,
-    DropdownMenuRadioItem,
-    type DropdownMenuRadioItemEmits,
-    type DropdownMenuRadioItemProps,
-    useForwardPropsEmits,
+	DropdownMenuItemIndicator,
+	DropdownMenuRadioItem,
+	type DropdownMenuRadioItemEmits,
+	type DropdownMenuRadioItemProps,
+	useForwardPropsEmits,
 } from "radix-vue";
-import { DotFilledIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import {DotFilledIcon} from "@radix-icons/vue";
+import {cn} from "@/lib/utils";
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes[ "class" ] }>();
+const props = defineProps<DropdownMenuRadioItemProps & {class?: HTMLAttributes["class"]}>();
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+	const {class: _, ...delegated} = props;
 
-    return delegated;
+	return delegated;
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
diff --git a/app/server/HttpClient.ts b/app/server/HttpClient.ts
index c623b18..179bd7d 100644
--- a/app/server/HttpClient.ts
+++ b/app/server/HttpClient.ts
@@ -1,42 +1,42 @@
 const DEFAULT_HEADERS = {
-    "Content-Type": "application/json; charset=utf-8",
-    "Accept": "application/json",
+	"Content-Type": "application/json; charset=utf-8",
+	Accept: "application/json",
 };
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
 interface HttpRequestOptions {
-    method: HttpMethod;
-    headers?: HeadersInit;
-    body?: undefined;
+	method: HttpMethod;
+	headers?: HeadersInit;
+	body?: undefined;
 }
 
 async function httpRequest(url: string, options: HttpRequestOptions): Promise<Response> {
-    const headers = { ...DEFAULT_HEADERS, ...options.headers };
+	const headers = {...DEFAULT_HEADERS, ...options.headers};
 
-    return await fetch(`http://localhost:3000${url}`, {
-        method: options.method,
-        headers: headers,
-        body: options.body ? JSON.stringify(options.body) : null,
-    });
+	return await fetch(`http://localhost:3000${url}`, {
+		method: options.method,
+		headers: headers,
+		body: options.body ? JSON.stringify(options.body) : null,
+	});
 }
 
 export async function get(endpoint: string, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "GET", headers });
+	return httpRequest(endpoint, {method: "GET", headers});
 }
 
 export async function post<T>(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "POST", headers, body });
+	return httpRequest(endpoint, {method: "POST", headers, body});
 }
 
 export async function put(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "PUT", headers, body });
+	return httpRequest(endpoint, {method: "PUT", headers, body});
 }
 
 export async function patch(endpoint: string, body: undefined, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "PATCH", headers, body });
+	return httpRequest(endpoint, {method: "PATCH", headers, body});
 }
 
 export async function del(endpoint: string, headers?: HeadersInit) {
-    return httpRequest(endpoint, { method: "DELETE", headers });
+	return httpRequest(endpoint, {method: "DELETE", headers});
 }
diff --git a/app/services/CoinMarketCap.ts b/app/services/CoinMarketCap.ts
index 7c9da0b..d832408 100644
--- a/app/services/CoinMarketCap.ts
+++ b/app/services/CoinMarketCap.ts
@@ -1,18 +1,18 @@
-import { get } from "@/server/HttpClient";
-import type { CryptoCurrency } from "@/types/CoinMarketCap/CryptoCurrency";
+import {get} from "@/server/HttpClient";
+import type {CryptoCurrency} from "@/types/CoinMarketCap/CryptoCurrency";
 
 export async function listBitcoin(limit = 12, start = 1): Promise<CryptoCurrency[] | undefined> {
-    try {
-        const response = await get(
-            `/v1/cryptocurrency/listings/latest?limit=${limit}&start=${start}`,
-        );
+	try {
+		const response = await get(
+			`/v1/cryptocurrency/listings/latest?limit=${limit}&start=${start}`,
+		);
 
-        if (!response.ok) throw new Error(await response.json());
+		if (!response.ok) throw new Error(await response.json());
 
-        const jsonData: CryptoCurrency[] = await response.json();
+		const jsonData: CryptoCurrency[] = await response.json();
 
-        return jsonData;
-    } catch (error) {
-        console.error(error);
-    }
+		return jsonData;
+	} catch (error) {
+		console.error(error);
+	}
 }
diff --git a/app/stores/useCryptoCurrencyStore.ts b/app/stores/useCryptoCurrencyStore.ts
index 53c3ec2..35d0ec2 100644
--- a/app/stores/useCryptoCurrencyStore.ts
+++ b/app/stores/useCryptoCurrencyStore.ts
@@ -1,30 +1,35 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
+import {ref} from "vue";
+import {defineStore} from "pinia";
 
-import type { CryptoCurrency } from "@/types/CoinMarketCap/CryptoCurrency";
+import type {CryptoCurrency} from "@/types/CoinMarketCap/CryptoCurrency";
 
 export const useCryptoCurrencyStore = defineStore("cryptoCurrency", () => {
-    const cryptoCurrencies = ref<CryptoCurrency[]>([]);
+	const cryptoCurrencies = ref<CryptoCurrency[]>([]);
 
-    function addCryptoCurrencies(cryptoCurrencyArray: CryptoCurrency[]): void {
-        cryptoCurrencies.value.push(...cryptoCurrencyArray);
-    }
+	function addCryptoCurrencies(cryptoCurrencyArray: CryptoCurrency[]): void {
+		cryptoCurrencies.value.push(...cryptoCurrencyArray);
+	}
 
-    function removeCryptoCurrency(id: string): void {
-        cryptoCurrencies.value = cryptoCurrencies.value.filter(
-            (cryptoCurrency) => cryptoCurrency.id.toString() !== id,
-        );
-    }
+	function removeCryptoCurrency(id: string): void {
+		cryptoCurrencies.value = cryptoCurrencies.value.filter(
+			(cryptoCurrency) => cryptoCurrency.id.toString() !== id,
+		);
+	}
 
-    function detailCryptoCurrencyByName(name: string): CryptoCurrency | null {
-        const cryptoCurrency = cryptoCurrencies.value.find(
-            (cryptoCurrency) => cryptoCurrency.name !== name,
-        );
-        if (!cryptoCurrency) {
-            return null;
-        }
-        return cryptoCurrency;
-    }
+	function detailCryptoCurrencyByName(name: string): CryptoCurrency | null {
+		const cryptoCurrency = cryptoCurrencies.value.find(
+			(cryptoCurrency) => cryptoCurrency.name !== name,
+		);
+		if (!cryptoCurrency) {
+			return null;
+		}
+		return cryptoCurrency;
+	}
 
-    return { cryptoCurrencies, addCryptoCurrencies, removeCryptoCurrency, detailCryptoCurrencyByName };
+	return {
+		cryptoCurrencies,
+		addCryptoCurrencies,
+		removeCryptoCurrency,
+		detailCryptoCurrencyByName,
+	};
 });
diff --git a/app/types/CoinMarketCap/CryptoCurrency.ts b/app/types/CoinMarketCap/CryptoCurrency.ts
index 569e475..cca7f10 100644
--- a/app/types/CoinMarketCap/CryptoCurrency.ts
+++ b/app/types/CoinMarketCap/CryptoCurrency.ts
@@ -1,28 +1,28 @@
-import type { Platform } from "./Platform";
-import type { Quote } from "./Quote";
+import type {Platform} from "./Platform";
+import type {Quote} from "./Quote";
 
 interface USDQuote {
-    USD: Quote;
+	USD: Quote;
 }
 
 export interface CryptoCurrency {
-    id: number;
-    name: string;
-    symbol: string;
-    slug: string;
-    num_market_pairs: number;
-    date_added: Date;
-    tags: string[];
-    max_supply: number;
-    circulating_supply: number;
-    total_supply: number;
-    infinity_supply: boolean;
-    platform: Platform | null;
-    cmc_rank: number;
-    self_reported_circulating_supply: number | null;
-    self_reported_market_cap: number | null;
-    tvl_ratio: number | null;
-    last_updated: Date;
-    quote: USDQuote;
-    image: string;
+	id: number;
+	name: string;
+	symbol: string;
+	slug: string;
+	num_market_pairs: number;
+	date_added: Date;
+	tags: string[];
+	max_supply: number;
+	circulating_supply: number;
+	total_supply: number;
+	infinity_supply: boolean;
+	platform: Platform | null;
+	cmc_rank: number;
+	self_reported_circulating_supply: number | null;
+	self_reported_market_cap: number | null;
+	tvl_ratio: number | null;
+	last_updated: Date;
+	quote: USDQuote;
+	image: string;
 }
diff --git a/app/types/CoinMarketCap/Quote.ts b/app/types/CoinMarketCap/Quote.ts
index 6644291..96828bd 100644
--- a/app/types/CoinMarketCap/Quote.ts
+++ b/app/types/CoinMarketCap/Quote.ts
@@ -1,16 +1,16 @@
 export interface Quote {
-    price: number;
-    volume_24h: number;
-    volume_change_24h: number;
-    percent_change_1h: number;
-    percent_change_24h: number;
-    percent_change_7d: number;
-    percent_change_30d: number;
-    percent_change_60d: number;
-    percent_change_90d: number;
-    market_cap: number;
-    market_cap_dominance: number;
-    fully_diluted_market_cap: number;
-    tvl: number | null;
-    last_updated: Date;
+	price: number;
+	volume_24h: number;
+	volume_change_24h: number;
+	percent_change_1h: number;
+	percent_change_24h: number;
+	percent_change_7d: number;
+	percent_change_30d: number;
+	percent_change_60d: number;
+	percent_change_90d: number;
+	market_cap: number;
+	market_cap_dominance: number;
+	fully_diluted_market_cap: number;
+	tvl: number | null;
+	last_updated: Date;
 }
diff --git a/app/utils/numberFormatter.ts b/app/utils/numberFormatter.ts
index 0ceb6f1..427e553 100644
--- a/app/utils/numberFormatter.ts
+++ b/app/utils/numberFormatter.ts
@@ -1,23 +1,23 @@
 export default function numberFormatter(num: number): string {
-    if (num >= 1e12) {
-        return `${(num / 1e12).toFixed(2)}T`;
-    }
-    if (num >= 1e9) {
-        return `${(num / 1e9).toFixed(2)}B`;
-    }
-    if (num >= 1e6) {
-        return `${(num / 1e6).toFixed(2)}M`;
-    }
-    if (num >= 1e3) {
-        return `${(num / 1e3).toFixed(2)}K`;
-    }
-    let fixed = 2;
-    let numStr = num.toFixed(fixed);
+	if (num >= 1e12) {
+		return `${(num / 1e12).toFixed(2)}T`;
+	}
+	if (num >= 1e9) {
+		return `${(num / 1e9).toFixed(2)}B`;
+	}
+	if (num >= 1e6) {
+		return `${(num / 1e6).toFixed(2)}M`;
+	}
+	if (num >= 1e3) {
+		return `${(num / 1e3).toFixed(2)}K`;
+	}
+	let fixed = 2;
+	let numStr = num.toFixed(fixed);
 
-    while (numStr.endsWith('0') && fixed < 20) {
-        fixed++;
-        numStr = num.toFixed(fixed);
-    }
+	while (numStr.endsWith("0") && fixed < 20) {
+		fixed++;
+		numStr = num.toFixed(fixed);
+	}
 
-    return numStr;
+	return numStr;
 }
diff --git a/app/views/CookiePolicy.vue b/app/views/CookiePolicy.vue
index eaaf782..4d8ace3 100644
--- a/app/views/CookiePolicy.vue
+++ b/app/views/CookiePolicy.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Link from "@/tags/Link.vue";
-import { useTranslation } from "@/config/composable/translate";
+import {useTranslation} from "@/config/composable/translate";
 
 useTranslation();
 </script>
diff --git a/app/views/CryptoDetail.vue b/app/views/CryptoDetail.vue
index 8903b1c..5dcac2f 100644
--- a/app/views/CryptoDetail.vue
+++ b/app/views/CryptoDetail.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { useCryptoCurrencyStore } from "@/stores/useCryptoCurrencyStore";
-import type { CryptoCurrency } from "@/types/CoinMarketCap/CryptoCurrency";
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {useCryptoCurrencyStore} from "@/stores/useCryptoCurrencyStore";
+import type {CryptoCurrency} from "@/types/CoinMarketCap/CryptoCurrency";
 import LineCryptoChat from "@/components/LineCryptoChat.vue";
 
 const route = useRoute();
@@ -12,13 +12,13 @@ const cryptoData = ref<CryptoCurrency | null>(null);
 const error = ref<boolean>(false);
 
 const capitalizeFirstLetter = (string: string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+	return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
 document.title = `${capitalizeFirstLetter(crypto)} | NEI Market Analytics`;
 
 onMounted(async () => {
-    cryptoData.value = cryptoCurrencyStore.detailCryptoCurrencyByName(crypto);
+	cryptoData.value = cryptoCurrencyStore.detailCryptoCurrencyByName(crypto);
 });
 </script>
 
diff --git a/app/views/Cryptos.vue b/app/views/Cryptos.vue
index 3c12653..f2d9f66 100644
--- a/app/views/Cryptos.vue
+++ b/app/views/Cryptos.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import Image from "@/tags/Image.vue";
 import Button from "@/components/ui/button/Button.vue";
+import Skeleton from "@/components/Skeletons/views/Cryptos.vue";
+import EntityCard from "@/components/EntityCard.vue";
 import { ref, onMounted } from "vue";
 import { listBitcoin } from "@/services/CoinMarketCap";
 import { useTranslation } from "@/config/composable/translate";
-import Skeleton from "@/components/Skeletons/views/Cryptos.vue";
 import { useCryptoCurrencyStore } from "@/stores/useCryptoCurrencyStore";
-import numberFormatter from "@/utils/numberFormatter";
 
 useTranslation();
 
@@ -16,7 +15,7 @@ const isLoadingMore = ref<boolean>(false);
 const start = ref<number>(1);
 
 async function loadCryptos() {
-    return await listBitcoin(12, start.value) ?? [];
+    return (await listBitcoin(12, start.value)) ?? [];
 }
 
 async function loadMore() {
@@ -39,39 +38,12 @@ onMounted(async () => {
     <main class="container justify-center my-4">
         <ul class="grid grid-cols-3 gap-4">
             <li v-if="!isLoading" v-for="cryptoCurrency in cryptoCurrencyStore.cryptoCurrencies"
-                :key="cryptoCurrency.id" class="flex flex-col bg-secondaryDarker gap-4 p-5 rounded-lg min-w-96">
-                <div class="flex gap-4 items-center">
-                    <Image :src="`https://s2.coinmarketcap.com/static/img/coins/64x64/${cryptoCurrency.id}.png`"
-                        :alt="cryptoCurrency.name + ' logo'" width="50" height="50" class="rounded-full" />
-                    <div class="flex flex-col">
-                        <h3 class="line-clamp-1 max-w-56">{{ cryptoCurrency.name }}</h3>
-                        <div class="flex gap-[6px]">
-                            <p>Currency</p>
-                            <strong>{{ cryptoCurrency.symbol }}</strong>
-                            <p>&nbsp;·&nbsp; Chain ID</p>
-                            <strong>{{ cryptoCurrency.id }}</strong>
-                        </div>
-                    </div>
-                </div>
-                <hr class="h-[1px] w-full" />
-                <h6 v-translate>Estatísticas</h6>
-                <div class="font-semibold flex justify-between">
-                    <div>
-                        <strong>${{ numberFormatter(cryptoCurrency.quote.USD.price) }}</strong>
-                        <p>Preço</p>
-                    </div>
-                    <div>
-                        <strong>{{ numberFormatter(cryptoCurrency.quote.USD.market_cap) }}</strong>
-                        <p>Capitalização de mercado</p>
-                    </div>
-                    <div>
-                        <strong>{{ numberFormatter(cryptoCurrency.circulating_supply) }}</strong>
-                        <p>Volume</p>
-                    </div>
-                </div>
-                <RouterLink :to="`/cryptos/${cryptoCurrency.name}`">
-                    <Button class="w-full">Explore {{ cryptoCurrency.name }}</Button>
-                </RouterLink>
+                :key="cryptoCurrency.id">
+                <EntityCard :image="`https://s2.coinmarketcap.com/static/img/coins/64x64/${cryptoCurrency.id}.png`"
+                    :name="cryptoCurrency.name" :symbol="cryptoCurrency.symbol" :id="cryptoCurrency.id"
+                    :circulating_supply="cryptoCurrency.circulating_supply" :price="cryptoCurrency.quote.USD.price"
+                    :market_cap="cryptoCurrency.quote.USD.market_cap"
+                    :router-link-to="`/cryptos/${cryptoCurrency.name}`" />
             </li>
             <Skeleton v-else v-for="i in 12" :key="i" />
         </ul>
diff --git a/app/views/PrivacyPolicy.vue b/app/views/PrivacyPolicy.vue
index 33573ad..a57c5d8 100644
--- a/app/views/PrivacyPolicy.vue
+++ b/app/views/PrivacyPolicy.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Link from "@/tags/Link.vue";
-import { useTranslation } from "@/config/composable/translate";
+import {useTranslation} from "@/config/composable/translate";
 
 useTranslation();
 </script>
diff --git a/package.json b/package.json
index b58285c..b0c44cc 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,5 @@
 		"vitest": "^2.0.5",
 		"vue-tsc": "^2.0.21"
 	},
-	"trustedDependencies": [
-		"@biomejs/biome"
-	]
+	"trustedDependencies": ["@biomejs/biome"]
 }