bomb commit

.env.example

@@ -2,5 +2,3 @@ GIT_USER_EMAIL=your_email
 GIT_USER_NAME=your_name
 VUE_APP_HOST=your_host
 VUE_APP_PORT=your_port
-VUE_APP_BITCOIN_API_HOST=your_bitcoin_host
-VUE_APP_BITCOIN_API_KEY=your_bitcoin_key

api/src/proxy/CoinMarketCap.ts

@@ -13,7 +13,7 @@ const defaultHeaders = {
     "X-CMC_PRO_API_KEY": API_KEY,
 };
 
-interface ResponseData {
+interface ResponseListingLatestData {
     data: CryptoCurrency[];
 }
 
@@ -35,7 +35,38 @@ export async function listingsLatest(req: Request, res: Response): Promise<void>
 
         if (!response.ok) throw new Error(await response.json());
 
-        const data: ResponseData = await response.json();
+        const data: ResponseListingLatestData = await response.json();
+
+        res.json(data.data);
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ error: error });
+    }
+}
+
+interface ResponseDetailData {
+    data: CryptoCurrency;
+}
+
+/**
+ * Handles the request to get the latest cryptocurrency listings.
+ *
+ * @param {Request} req - The request object
+ * @param {Response} res - The response object
+ * @returns {void}
+ * @throws {Error} If the request to the external API fails
+ */
+export async function detail(req: Request, res: Response): Promise<void> {
+    try {
+        const { slug } = req.query;
+        const response = await get(
+            `${BASE_API_URL}/v2/cryptocurrency/info?slug=${slug}`,
+            defaultHeaders,
+        );
+
+        if (!response.ok) throw new Error(await response.json());
+
+        const data: ResponseDetailData = await response.json();
 
         res.json(data.data);
     } catch (error) {

api/src/routes/CoinMarketCap.ts

@@ -1,8 +1,9 @@
 import express from "express";
-import {listingsLatest} from "../proxy/CoinMarketCap.ts";
+import { listingsLatest, detail } from "../proxy/CoinMarketCap.ts";
 
 const coinMarketCapRoutes = express();
 
 coinMarketCapRoutes.get("/v1/cryptocurrency/listings/latest", listingsLatest);
+coinMarketCapRoutes.get("/v2/cryptocurrency/info", detail);
 
 export default coinMarketCapRoutes;

app/components/Accordion.vue

@@ -1,29 +1,29 @@
 <script lang="ts" setup>
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
 } from "@/components/ui/accordion";
-import type {HTMLAttributes} from "vue";
+import type { HTMLAttributes } from "vue";
 
 export interface Item {
-	value: string;
-	title: string;
-	content: string;
+    value: string;
+    title: string;
+    content: string;
 }
 
 export interface AccordionProps {
-	items: Item[];
-	type?: "single" | "multiple" | undefined;
-	collapsible?: boolean;
-	class?: HTMLAttributes["class"];
+    items: Item[];
+    type?: "single" | "multiple" | undefined;
+    collapsible?: boolean;
+    class?: HTMLAttributes[ "class" ];
 }
 
 const props = withDefaults(defineProps<AccordionProps>(), {
-	type: "single",
-	collapsible: true,
-	class: "w-full",
+    type: "single",
+    collapsible: true,
+    class: "w-full",
 });
 </script>
 

app/components/Dto/DropdownDto.ts

@@ -1,4 +1,4 @@
-import type {Menu} from "../Dropdown.vue";
+import type { Menu } from "../Dropdown.vue";
 import Ethereum from "@/assets/images/ethereum.png";
 import Bitcoin from "@/assets/images/bitcoin.png";
 import Dogecoin from "@/assets/images/dogecoin.png";
@@ -7,70 +7,70 @@ import Euro from "@/assets/images/euro.png";
 import Real from "@/assets/images/real.png";
 
 export const DropdownDto: Menu[] = [
-	{
-		emoji: "🪙",
-		title: "Cripto moedas",
-		link: "/cryptos",
-		subContent: [
-			{
-				title: "Bitcoin",
-				link: "/cryptos/bitcoin",
-				logo: Bitcoin,
-			},
-			{
-				title: "Ethereum",
-				link: "/cryptos/ethereum",
-				logo: Ethereum,
-			},
-			{
-				title: "Dogecoin",
-				link: "/cryptos/dogecoin",
-				logo: Dogecoin,
-			},
-		],
-	},
-	{
-		emoji: "💵",
-		title: "Moedas globais",
-		link: "/coins",
-		subContent: [
-			{
-				title: "Dollar",
-				link: "/coins/dollar",
-				logo: Dollar,
-			},
-			{
-				title: "Real",
-				link: "/coins/real",
-				logo: Real,
-			},
-			{
-				title: "Euro",
-				link: "/coins/euro",
-				logo: Euro,
-			},
-		],
-	},
-	// {
-	//     emoji: "🔫",
-	//     title: "Skins CS2",
-	//     link: "/skins",
-	//     subContent: [
-	//         {
-	//             title: "Dragon Lore",
-	//             link: "/skins?skin=dragon-lore",
-	//             logo: "csgo",
-	//         },
-	//         {
-	//             title: "Butterfly",
-	//             link: "/skins?skin=butterfly",
-	//             logo: "csgo",
-	//         },
-	//         {
-	//             title: "Ak blue-gem",
-	//             link: "/skins?skin=ak-blue-gem",
-	//             logo: "csgo",
-	//         },
-	//     ],
-	// },
+    {
+        emoji: "🪙",
+        title: "Cripto moedas",
+        link: "/cryptos",
+        subContent: [
+            {
+                title: "Bitcoin",
+                link: "/cryptos/Bitcoin",
+                logo: Bitcoin,
+            },
+            {
+                title: "Ethereum",
+                link: "/cryptos/Ethereum",
+                logo: Ethereum,
+            },
+            {
+                title: "Dogecoin",
+                link: "/cryptos/Dogecoin",
+                logo: Dogecoin,
+            },
+        ],
+    },
+    {
+        emoji: "💵",
+        title: "Moedas globais",
+        link: "/coins",
+        subContent: [
+            {
+                title: "Dollar",
+                link: "/coins/dollar",
+                logo: Dollar,
+            },
+            {
+                title: "Real",
+                link: "/coins/real",
+                logo: Real,
+            },
+            {
+                title: "Euro",
+                link: "/coins/euro",
+                logo: Euro,
+            },
+        ],
+    },
+    // {
+    //     emoji: "🔫",
+    //     title: "Skins CS2",
+    //     link: "/skins",
+    //     subContent: [
+    //         {
+    //             title: "Dragon Lore",
+    //             link: "/skins?skin=dragon-lore",
+    //             logo: "csgo",
+    //         },
+    //         {
+    //             title: "Butterfly",
+    //             link: "/skins?skin=butterfly",
+    //             logo: "csgo",
+    //         },
+    //         {
+    //             title: "Ak blue-gem",
+    //             link: "/skins?skin=ak-blue-gem",
+    //             logo: "csgo",
+    //         },
+    //     ],
+    // },
 ];

app/services/CoinMarketCap.ts

@@ -1,18 +1,34 @@
-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);
+    }
+}
+
+export async function detailBitcoin(slug: string): Promise<CryptoCurrency | undefined> {
+    try {
+        const response = await get(
+            `/v2/cryptocurrency/info?slug=${slug}`,
+        );
+
+        if (!response.ok) throw new Error(await response.json());
+
+        const jsonData: CryptoCurrency = await response.json();
+
+        return jsonData;
+    } catch (error) {
+        console.error(error);
+    }
 }

app/views/CryptoDetail.vue

@@ -1,29 +1,42 @@
 <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 { detailBitcoin } from "@/services/CoinMarketCap";
 import LineCryptoChat from "@/components/LineCryptoChat.vue";
 
 const route = useRoute();
 const crypto = String(route.params.crypto);
 const cryptoCurrencyStore = useCryptoCurrencyStore();
 const cryptoData = ref<CryptoCurrency | null>(null);
 const error = ref<boolean>(false);
+const loading = ref<boolean>(true);
 
 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);
+
+    if (!cryptoData.value) {
+        loading.value = false;
+        try {
+            cryptoData.value = await detailBitcoin(crypto.toLowerCase()) as CryptoCurrency;
+        } catch (err) {
+            error.value = true;
+        }
+    }
+
+    loading.value = false;
 });
 </script>
 
 <template>
-    <main class="container justify-center">
+    <main v-if="!loading" class="container justify-center">
         <LineCryptoChat />
         <ul v-if="!error">
             <li v-for="(data, index) in cryptoData" :key="index">
@@ -35,4 +48,5 @@ onMounted(async () => {
             <p>The requested cryptocurrency could not be found.</p>
         </div>
     </main>
+
 </template>