feat(billing): add provider-agnostic billing/subscription management UX

.gitignore

@@ -30,4 +30,7 @@ bun.lock
 test-results/
 playwright-report/
 blob-report/
-playwright/.cache/
+playwright/.cache/
+
+# TS build info
+tsconfig.tsbuildinfo

app/[communitySlug]/admin/members/page.tsx

@@ -767,7 +767,7 @@ export default function MembersPage() {
                        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                          <span>Tier: {m.tier}</span>
                          <div className="flex flex-wrap gap-1">
-                           {m.roles.map((r) => (
+                           {m.roles.map((r: string) => (
                              <button
                                key={r}
                                type="button"

app/[communitySlug]/dashboard/page.tsx

@@ -302,6 +302,11 @@ export default function DashboardPage() {
                   <MembershipExpiryBadge expiresAt={membership.expiresAt} />
                 ) : null}
               </div>
+              <div className="pt-3">
+                <Link href="/billing" className={buttonVariants({ variant: "outline", size: "sm" })}>
+                  Manage Billing
+                </Link>
+              </div>
             </div>
           )}
         </Section>

app/layout.tsx

@@ -4,7 +4,7 @@ import { RootProviders } from '@/lib/wallet/providers'
 import { Nav } from '@/components/nav'
 import { SwRegistrar } from '@/components/sw-registrar'
 import { BackendHealthCheck } from '@/components/backend-health-check'
-import SyncStatusBanner from '@/components/ui/sync-status-banner'
+import { SyncStatusBanner } from '@/components/ui/sync-status-banner'
 
 export const metadata: Metadata = {
   title: {

components/nav.tsx

@@ -177,6 +177,7 @@ export function Nav() {
       enabled: features.resources,
     },
     { href: `${prefix}/events/demo` as Route, label: "Event", enabled: features.events },
+    { href: `/billing` as Route, label: "Billing", enabled: true },
     {
       href: `${prefix}/developer` as Route,
       label: "Dev",

lib/billing/index.ts

@@ -0,0 +1,19 @@
+import { config } from '../config'
+import { MockBillingApi } from './mock'
+import { BillingApi } from './types'
+
+/**
+ * Returns the appropriate Billing API client based on the environment.
+ *
+ * @param address     Connected wallet address (used for billing state queries)
+ * @param token       SIWE session token — pass this to authenticate mutations if needed.
+ * @param communityId Scoped community ID or slug
+ */
+export function getBillingApi(address?: string, token?: string, communityId?: string): BillingApi {
+  // Currently, we only target the mock provider as live integrations are out of scope.
+  // When adding support for a live billing client (e.g. Stripe, Paddle), branch here based on environment:
+  // if (config.apiMode === 'live') return new LiveBillingApi(address, token, communityId)
+  return new MockBillingApi(address, communityId)
+}
+
+export * from './types'