fix: use currency icons in public balances

src/app/(site)/shop/page.tsx

@@ -4,6 +4,7 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { buyShopArticle } from "@/actions/shop";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { auth } from "@/lib/auth";
 import { db, WebsiteShopArticles, WebsiteShopCategories } from "@/lib/db";
 import { excerpt } from "@/lib/format";
@@ -277,19 +278,19 @@ export default async function ShopPage({
 								>
 									{a.credits ? (
 										<span className="currency">
-											<span className="coin credits">cr</span>
+											<CurrencyIcon kind="credits" size={22} alt="" />
 											{a.credits.toLocaleString()}
 										</span>
 									) : null}
 									{a.duckets ? (
 										<span className="currency">
-											<span className="coin duckets">du</span>
+											<CurrencyIcon kind="duckets" size={22} alt="" />
 											{a.duckets.toLocaleString()}
 										</span>
 									) : null}
 									{a.diamonds ? (
 										<span className="currency">
-											<span className="coin diamonds">di</span>
+											<CurrencyIcon kind="diamonds" size={22} alt="" />
 											{a.diamonds.toLocaleString()}
 										</span>
 									) : null}