fix: use currency icons in public balances

src/components/shared/public-currency-contract.test.tsx

@@ -0,0 +1,42 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { CurrencyIcon } from "./currency-icon";
+
+const publicCurrencyFiles = [
+	"src/app/(site)/rankings/page.tsx",
+	"src/app/(site)/leaderboard/page.tsx",
+	"src/app/(site)/shop/page.tsx",
+	"src/app/(site)/draw-badge/page.tsx",
+];
+
+function source(path: string): string {
+	return readFileSync(resolve(process.cwd(), path), "utf8");
+}
+
+describe("public currency presentation contract", () => {
+	it.each([
+		["credits", "/assets/images/icons/currency/credits.png"],
+		["duckets", "/assets/images/icons/currency/duckets.png"],
+		["diamonds", "/assets/images/icons/currency/diamonds.png"],
+	] as const)("renders the %s asset", (kind, expectedSrc) => {
+		const html = renderToStaticMarkup(
+			<CurrencyIcon kind={kind} size={22} alt="" />,
+		);
+		expect(html).toContain(expectedSrc);
+		expect(html).toContain('width="22"');
+		expect(html).toContain('height="22"');
+		expect(html).toContain('alt=""');
+	});
+
+	it.each(publicCurrencyFiles)("removes placeholder coins from %s", (path) => {
+		const contents = source(path);
+		expect(contents).not.toMatch(/className=(?:"coin|\{`coin)/);
+		expect(contents).toContain("<CurrencyIcon");
+	});
+
+	it("removes the obsolete coin CSS contract", () => {
+		expect(source("src/app/globals.css")).not.toContain(".currency .coin");
+	});
+});