bomb commit

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);

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});
 }

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});
+	}
 }

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();
 

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;
 }

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;
 }

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>