my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	import { CreditCard, Wallet } from "lucide-react";
#2	import type { DashboardState } from "../types";
#3	import { toPaymentQuote } from "../lib/payments";
#4
#5	interface BillingPageProps {
#6	state: DashboardState;
#7	}
#8
#9	export function BillingPage({ state }: BillingPageProps) {
#10	return (
#11	<section className="page-grid">
#12	<div className="billing-top">
#13	<article className="card balance-card">
#14	<div>
#15	<div className="balance-card__label">Credit Balance</div>
#16	<div className="balance-card__value">${state.billing.creditBalanceUsd.toFixed(2)}</div>
#17	<div className="balance-card__sub">{state.identity.walletAddress}</div>
#18	</div>
#19	<div className="balance-card__icon"><CreditCard size={28} /></div>
#20	</article>
#21
#22	<article className="card balance-card">
#23	<div>
#24	<div className="balance-card__label">Wallet Reserves</div>
#25	<div className="balance-card__value">
#26	${state.billing.walletUsdc.toFixed(2)} USDC
#27	</div>
#28	<div className="balance-card__sub">{state.billing.walletClawd.toLocaleString()} $CLAWD available</div>
#29	</div>
#30	<div className="balance-card__icon alt"><Wallet size={28} /></div>
#31	</article>
#32	</div>
#33
#34	<div className="billing-grid">
#35	<article className="card">
#36	<div className="section-header">
#37	<div>
#38	<h2>VM Pricing</h2>
#39	<p>Predictable trench pricing for sandbox compute.</p>
#40	</div>
#41	</div>
#42	<table className="pricing-table">
#43	<thead>
#44	<tr>
#45	<th>Tier</th>
#46	<th>Resources</th>
#47	<th>Price</th>
#48	</tr>
#49	</thead>
#50	<tbody>
#51	{state.billing.prices.map((tier) => (
#52	<tr key={tier.name}>
#53	<td>{tier.name}</td>
#54	<td>{tier.vcpu} vCPU · {tier.memoryGb} GB · {tier.diskGb} GB</td>
#55	<td>${tier.monthlyPriceUsd.toFixed(2)}/mo</td>
#56	</tr>
#57	))}
#58	</tbody>
#59	</table>
#60	</article>
#61
#62	<article className="card">
#63	<div className="section-header">
#64	<div>
#65	<h2>Buy Credits</h2>
#66	<p>Pay with USDC on pay.sh or route through the CLAWD token commerce rail.</p>
#67	</div>
#68	</div>
#69
#70	<div className="notice-panel">{state.billing.note}</div>
#71
#72	<div className="billing-packs">
#73	{state.billing.packs.map((pack) => {
#74	const quote = toPaymentQuote(pack);
#75	return (
#76	<button
#77	key={`${pack.token}-${pack.amountUsd}`}
#78	className={`billing-pack ${quote.status === "insufficient" ? "is-disabled" : ""}`}
#79	type="button"
#80	>
#81	<strong>${pack.amountUsd}</strong>
#82	<span>{quote.token} via {quote.rail}</span>
#83	<small>{quote.cta}</small>
#84	</button>
#85	);
#86	})}
#87	</div>
#88	</article>
#89	</div>
#90	</section>
#91	);
#92	}
#93

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public