04d64fb993
Capture the current CyberLux UI, commerce, messaging, and Tor ops updates so local main can be pushed to the remote. Made-with: Cursor
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useWallet } from "@/contexts/WalletContext";
|
|
import { useCart } from "@/contexts/CartContext";
|
|
import { useAccount } from "@/contexts/AccountContext";
|
|
|
|
export default function MarketCommerceBar() {
|
|
const { usdStoreCredit, luxCredits } = useWallet();
|
|
const { itemCount, hydrated } = useCart();
|
|
const { user, hydrated: accReady } = useAccount();
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-end gap-2 border-b border-[#00ff41]/15 bg-[#040805]/90 px-3 py-2 font-mono text-[10px] text-[#8fccb0]">
|
|
<span className="text-[#5a8f6a]">Spendable</span>
|
|
<span title="Bitcoin-funded USD">
|
|
USD <strong className="text-[#7af598]">${usdStoreCredit.toFixed(2)}</strong>
|
|
</span>
|
|
<span className="text-[#00ff41]/25">|</span>
|
|
<span title="LUX credits">
|
|
LUX <strong className="text-[#b4ffcc]">{luxCredits.toLocaleString()}</strong>
|
|
</span>
|
|
{accReady && !user ? (
|
|
<>
|
|
<span className="text-[#00ff41]/25">|</span>
|
|
<Link href="/sign-in?next=/market" className="text-[#7af598] underline hover:text-white">
|
|
Sign in to pay
|
|
</Link>
|
|
</>
|
|
) : null}
|
|
<span className="text-[#00ff41]/25">|</span>
|
|
<Link
|
|
href="/checkout"
|
|
className="inline-flex items-center gap-1 rounded border border-[#00ff41]/35 px-2 py-1 text-[#c8ffd8] hover:border-[#00ff41]/60"
|
|
>
|
|
🛒 Checkout
|
|
{hydrated && itemCount > 0 ? (
|
|
<span className="rounded bg-[#ff00aa]/90 px-1 text-[9px] font-bold text-black">{itemCount}</span>
|
|
) : null}
|
|
</Link>
|
|
<Link href="/account/add-funds" className="rounded border border-[#00ff41]/20 px-2 py-1 hover:border-[#00ff41]/45">
|
|
+Funds
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|