wip

Author: viktormarinho

apps/web/src/components/settings/billing.tsx

@@ -15,13 +15,13 @@ import { getWalletAccount } from "@deco/sdk";
 import { useQuery } from "@tanstack/react-query";
 
 
-function AccountValue() {
+function AccountBalance({ workspace }: { workspace: string }) {
   const { data, isLoading, error } = useQuery({
     queryKey: ["wallet"],
-    queryFn: () => getWalletAccount("/shared/deco.cx"),
+    queryFn: () => getWalletAccount(workspace),
   });
 
-  if (isLoading) return <Skeleton className="w-24 h-8" />;
+  if (isLoading) return <Skeleton className="w-32 h-12" />;
   if (error) return <p>Error loading wallet</p>;
 
   return <p className="text-5xl font-bold">{data?.balance}</p>;
@@ -30,11 +30,10 @@ function AccountValue() {
 function BalanceCard() {
   const team = useCurrentTeam();
 
-
   return (
     <Card className="w-full max-w-xl p-4 flex flex-col items-center rounded-md min-h-[340px] border border-slate-200">
       <div className="w-full text-sm mb-8">
-        Wallet
+        AI Usage Wallet
       </div>
       <CardContent className="flex flex-col items-center justify-center gap-2 p-0">
         <div className="flex items-center gap-1 text-base mb-1">
@@ -46,7 +45,7 @@ function BalanceCard() {
           />
         </div>
         <div className="mb-6">
-          <AccountValue />
+          <AccountBalance workspace="/shared/deco.cx" />
         </div>
         <DepositDialog />
       </CardContent>

apps/web/src/components/wallet/DepositDialog.tsx

@@ -64,13 +64,12 @@ export function DepositDialog() {
       <DialogTrigger asChild>
         <Button
           className="py-4 px-10"
-          variant="outline"
           size="lg"
           onClick={() =>
             trackEvent("wallet_add_credits_click", { userId: user?.id })}
         >
-          <Icon name="arrow_upward" size={16} className="mr-2" />
-          Deposit
+          <Icon name="add" size={16} className="mr-2" />
+          Add credits
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">

packages/sdk/src/crud/wallet.ts

@@ -1,9 +1,11 @@
-// deno-lint-ignore-file no-explicit-any
-import { callToolFor, fetchAPI } from "../fetcher.ts";
+import { MCPClient } from "../fetcher.ts";
 
 export const getWalletAccount = async (workspace: string) => {
-  const response = await callToolFor(workspace, "GET_WALLET_ACCOUNT", {});
-  return response.json<any>();
+  const { status, data, error } = await MCPClient.forWorkspace(workspace).GET_WALLET_ACCOUNT({});
+  if (status !== 200 || error) {
+    throw new Error(error?.message);
+  }
+  return data;
 };
 
 interface WalletStatement {
@@ -18,21 +20,22 @@ interface WalletStatement {
   metadata?: Record<string, string>;
 }
 
-export const getWalletStatements = async (cursor?: string) => {
-  const response = await fetchAPI({
-    path: `/wallet/statements${cursor ? `?cursor=${cursor}` : ""}`,
-  });
-  return response.json() as Promise<{
-    items: WalletStatement[];
-    nextCursor: string;
-  }>;
-};
+// export const getWalletStatements = async (cursor?: string) => {
+//   const response = await fetchAPI({
+//     path: `/wallet/statements${cursor ? `?cursor=${cursor}` : ""}`,
+//   });
+//   return response.json() as Promise<{
+//     items: WalletStatement[];
+//     nextCursor: string;
+//   }>;
+// };
 
 export const createWalletCheckoutSession = async (amountInCents: number) => {
-  const response = await fetchAPI({
-    segments: ["wallet", "checkout"],
-    method: "POST",
-    body: JSON.stringify({ amountInCents }),
-  });
-  return response.json() as Promise<{ checkoutUrl: string }>;
+  // const response = await fetchAPI({
+  //   segments: ["wallet", "checkout"],
+  //   method: "POST",
+  //   body: JSON.stringify({ amountInCents }),
+  // });
+  // return response.json() as Promise<{ checkoutUrl: string }>;
+  return { checkoutUrl: "https://checkout.stripe.com/c/pay/test" };
 };

packages/sdk/src/mcp/context.ts

@@ -19,6 +19,7 @@ export interface Vars {
   db: Client;
   user: SupaUser;
   cf: Cloudflare;
+  walletBinding?: { fetch: typeof fetch }
   immutableRes?: boolean;
   stub: <
     Constructor extends
@@ -40,6 +41,8 @@ export interface EnvVars {
   CF_ACCOUNT_ID: string;
   CF_API_TOKEN: string;
   CF_DISPATCH_NAMESPACE: string;
+  WALLET_API_KEY: string;
+  STRIPE_SECRET_KEY: string;
 }
 
 export type AppContext = Vars & { envVars: EnvVars };
@@ -63,44 +66,28 @@ export const serializeError = (error: unknown): string => {
   }
 };
 
-export const getEnv = (ctx: AppContext) => {
-  const {
-    CF_DISPATCH_NAMESPACE,
-    CF_ACCOUNT_ID,
-    CF_API_TOKEN,
-    VITE_USE_LOCAL_BACKEND,
-    SUPABASE_URL,
-    SUPABASE_SERVER_TOKEN,
-    TURSO_GROUP_DATABASE_TOKEN,
-    TURSO_ORGANIZATION,
-    RESEND_API_KEY,
-    OPENROUTER_API_KEY,
-  } = ctx.envVars;
+const REQUIRED_LOCAL_ENV_VARS = [
+  "OPENROUTER_API_KEY",
+  "CF_ACCOUNT_ID",
+  "SUPABASE_URL",
+  "SUPABASE_SERVER_TOKEN",
+  "CF_API_TOKEN",
+  "CF_DISPATCH_NAMESPACE",
+  "TURSO_GROUP_DATABASE_TOKEN",
+  "TURSO_ORGANIZATION",
+] as const;
 
+export const getEnv = (ctx: AppContext) => {
   if (
-    typeof OPENROUTER_API_KEY !== "string" ||
-    typeof CF_ACCOUNT_ID !== "string" ||
-    typeof SUPABASE_URL !== "string" ||
-    typeof SUPABASE_SERVER_TOKEN !== "string" ||
-    typeof CF_API_TOKEN !== "string" ||
-    typeof CF_DISPATCH_NAMESPACE !== "string" ||
-    typeof TURSO_GROUP_DATABASE_TOKEN !== "string" ||
-    typeof TURSO_ORGANIZATION !== "string"
+    !REQUIRED_LOCAL_ENV_VARS.every((v) => typeof ctx.envVars[v] === "string")
   ) {
-    throw new Error("Missing environment variables");
+    const missing = REQUIRED_LOCAL_ENV_VARS.filter(
+      (v) => typeof ctx.envVars[v] !== "string",
+    );
+    throw new Error(`Missing environment variables: ${missing.join(", ")}`);
   }
 
-  return {
-    CF_ACCOUNT_ID,
-    CF_API_TOKEN,
-    CF_DISPATCH_NAMESPACE,
-    VITE_USE_LOCAL_BACKEND,
-    SUPABASE_URL,
-    SUPABASE_SERVER_TOKEN,
-    TURSO_GROUP_DATABASE_TOKEN,
-    TURSO_ORGANIZATION,
-    RESEND_API_KEY,
-  };
+  return ctx.envVars;
 };
 
 export const AUTH_URL = (ctx: AppContext) =>

packages/sdk/src/mcp/index.ts

@@ -9,6 +9,7 @@ import * as profilesAPI from "./profiles/api.ts";
 import * as teamsAPI from "./teams/api.ts";
 import * as threadsAPI from "./threads/api.ts";
 import * as triggersAPI from "./triggers/api.ts";
+import * as walletAPI from "./wallet/api.ts";
 
 // Register tools for each API handler
 export const GLOBAL_TOOLS = [
@@ -57,6 +58,7 @@ export const WORKSPACE_TOOLS = [
   triggersAPI.createWebhookTrigger,
   triggersAPI.deleteTrigger,
   triggersAPI.getWebhookTriggerUrl,
+  walletAPI.getWalletAccount,
 ] as const;
 
 export type WorkspaceTools = typeof WORKSPACE_TOOLS;

apps/api/src/api/wallet/api.ts renamed to packages/sdk/src/mcp/wallet/api.ts

@@ -1,19 +1,13 @@
 import { z } from "zod";
-import { AppContext, createApiHandler, getEnv } from "../../utils/context.ts";
+import { createApiHandler, getEnv } from "../context.ts";
 import {
   createWalletClient,
   MicroDollar,
   WalletAPI,
   WellKnownWallets,
 } from "@deco/sdk/wallet";
 import { ClientOf } from "@deco/sdk/http";
-
-function getWorkspace(c: AppContext) {
-  const root = c.req.param("root");
-  const wksSlug = c.req.param("slug");
-  const workspace = `${root}/${wksSlug}`;
-  return { root, wksSlug, workspace };
-}
+import { assertHasWorkspace } from "../assertions.ts";
 
 const Account = {
   fetch: async (wallet: ClientOf<WalletAPI>, id: string) => {
@@ -46,13 +40,13 @@ export const getWalletAccount = createApiHandler({
   description: "Get the wallet account for the current tenant",
   schema: z.object({}),
   handler: async (_, c) => {
-    const { workspace } = getWorkspace(c);
+    assertHasWorkspace(c);
+
     const envVars = getEnv(c);
-    // @ts-expect-error todo: type the worker binding
-    const wallet = createWalletClient(envVars.WALLET_API_KEY, c.var?.WALLET);
+    const wallet = createWalletClient(envVars.WALLET_API_KEY, c.walletBinding);
 
     const workspaceWalletId = WellKnownWallets.build(
-      ...WellKnownWallets.workspace(workspace),
+      ...WellKnownWallets.workspace(c.workspace.value),
     );
     const data = await Account.fetch(wallet, workspaceWalletId);
 
@@ -74,7 +68,11 @@ export const createCheckoutSession = createApiHandler({
   description: "Create a checkout session for the current tenant's wallet",
   schema: z.object({}),
   handler: async (_, c) => {
-    const { workspace } = getWorkspace(c);
+    assertHasWorkspace(c);
+    const workspace = c.workspace.value;
+
     const envVars = getEnv(c);
+    
+    
   },
 });

packages/sdk/src/mcp/wallet/stripe.ts

@@ -0,0 +1,4 @@
+/**
+ * 
+ */
+