feat: team wallet

.github/workflows/deploy-api.yaml

@@ -48,6 +48,9 @@ jobs:
             AWS_SECRET_ACCESS_KEY
             AWS_REGION
             DECO_CHAT_DATA_BUCKET_NAME
+            STRIPE_SECRET_KEY
+            STRIPE_WEBHOOK_SECRET
+            CURRENCY_API_KEY
             ISSUER_JWT_SECRET
         env:
           SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
@@ -73,4 +76,7 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_REGION: ${{ secrets.AWS_REGION }}
           DECO_CHAT_DATA_BUCKET_NAME: ${{ secrets.DECO_CHAT_DATA_BUCKET_NAME }}
+          STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+          CURRENCY_API_KEY: ${{ secrets.CURRENCY_API_KEY }}
           ISSUER_JWT_SECRET: ${{ secrets.ISSUER_JWT_SECRET }}

apps/api/main.ts

@@ -10,7 +10,10 @@ import { default as app } from "./src/app.ts";
 const instrumentedApp = getRuntimeKey() === "deno" ? app : instrument(app);
 
 // Domains we consider "self"
-const SELF_DOMAINS: string[] = [Hosts.API, "localhost"];
+const SELF_DOMAINS: string[] = [
+  Hosts.API,
+  `localhost:${Deno.env.get("PORT") || 3001}`,
+];
 
 // Patch fetch globally
 const originalFetch = globalThis.fetch;
@@ -43,7 +46,7 @@ globalThis.fetch = async function patchedFetch(
 
   const context = contextStorage.getStore();
 
-  if (SELF_DOMAINS.includes(url.hostname)) {
+  if (SELF_DOMAINS.includes(url.host)) {
     if (!context) {
       throw new Error("Missing context for internal self-invocation");
     }

apps/api/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "deno serve -A --port 3001 --unstable-hmr --unstable-kv --env-file=../web/.env main.ts",
-    "dev:wrangler": "wrangler dev --port 3001"
+    "dev:wrangler": "wrangler dev --port 3001",
+    "stripe:test": "stripe fixtures testing/stripe/fixtures/workspace-wallet-deposit.json"
   },
   "dependencies": {
     "@deco/actors": "npm:@jsr/[email protected]",

apps/api/src/api.ts

@@ -22,6 +22,7 @@ import { withActorsStubMiddleware } from "./middlewares/actorsStub.ts";
 import { withContextMiddleware } from "./middlewares/context.ts";
 import { setUserMiddleware } from "./middlewares/user.ts";
 import { AppContext, AppEnv, State } from "./utils/context.ts";
+import { handleStripeWebhook } from "./webhooks/stripe.ts";
 
 export const app = new Hono<AppEnv>();
 export const honoCtxToAppCtx = (c: Context<AppEnv>): AppContext => {
@@ -227,6 +228,9 @@ Object.entries(loginRoutes).forEach(([route, honoApp]) => {
   app.route(route, honoApp);
 });
 
+// External webhooks
+app.post("/webhooks/stripe", handleStripeWebhook);
+
 // Health check endpoint
 app.get("/health", (c: Context) => c.json({ status: "ok" }));
 

apps/api/src/webhooks/stripe.ts

@@ -0,0 +1,67 @@
+import type { Context } from "hono";
+import {
+  createTransactionFromStripeEvent,
+  serializeError,
+  verifyAndParseStripeEvent,
+  WebhookEventIgnoredError,
+} from "@deco/sdk/mcp";
+import { honoCtxToAppCtx } from "../api.ts";
+import { createWalletClient } from "@deco/sdk/mcp/wallet";
+
+export const handleStripeWebhook = async (c: Context) => {
+  try {
+    const signature = c.req.header("stripe-signature");
+    if (!signature) {
+      throw new Error("Stripe signature header not found");
+    }
+
+    const appContext = honoCtxToAppCtx(c);
+
+    const payload = await c.req.text();
+    const event = await verifyAndParseStripeEvent(
+      payload,
+      signature,
+      appContext,
+    );
+    const { transaction, idempotentId } =
+      await createTransactionFromStripeEvent(
+        appContext,
+        event,
+      );
+
+    if (!appContext.envVars.WALLET_API_KEY) {
+      throw new Error("WALLET_API_KEY is not set");
+    }
+
+    const wallet = createWalletClient(
+      appContext.envVars.WALLET_API_KEY,
+      appContext.walletBinding,
+    );
+
+    const response = await wallet["PUT /transactions/:id"]({
+      id: idempotentId,
+    }, {
+      body: transaction,
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(`Failed to create transaction: ${error}`);
+    }
+
+    return c.json({
+      message: "Transaction created",
+    }, 200);
+  } catch (error) {
+    if (error instanceof WebhookEventIgnoredError) {
+      return c.json({
+        message: error.message,
+      }, 400);
+    }
+
+    console.error("[Stripe Webhook] Error", serializeError(error));
+    return c.json({
+      message: "Internal server error",
+    }, 500);
+  }
+};

apps/api/testing/stripe/fixtures/workspace-wallet-deposit.json

@@ -0,0 +1,47 @@
+{
+  "_meta": {
+    "template_version": 0
+  },
+  "fixtures": [
+    {
+      "name": "customer",
+      "path": "/v1/customers",
+      "method": "post",
+      "params": {
+        "name": "Viktor Marinho",
+        "email": "[email protected]",
+        "metadata": {
+          "product": "deco.chat",
+          "workspace": "/users/c40e818c-9a67-4dc6-ac3b-2bb6361663c2"
+        }
+      }
+    },
+    {
+      "name": "payment_intent",
+      "path": "/v1/payment_intents",
+      "method": "post",
+      "params": {
+        "amount": 1418,
+        "confirm": "true",
+        "metadata": {
+          "test": "123"
+        },
+        "customer": "${customer:id}",
+        "currency": "brl",
+        "description": "(created by Stripe CLI)",
+        "payment_method": "pm_card_visa",
+        "payment_method_types": ["card"],
+        "shipping": {
+          "name": "Jenny Rosen",
+          "address": {
+            "line1": "510 Townsend St",
+            "postal_code": "94103",
+            "city": "San Francisco",
+            "state": "CA",
+            "country": "US"
+          }
+        }
+      }
+    }
+  ]
+}

apps/web/package.json

@@ -35,6 +35,7 @@
     "remark-gfm": "^4.0.1",
     "tiptap-markdown": "^0.8.10",
     "prismjs": "1.30.0",
+    "recharts": "^2.15.1",
     "react-syntax-highlighter": "15.6.1",
     "sonner": "^2.0.3",
     "zod": "3.24.3",

apps/web/src/components/about/Hero.tsx

@@ -52,7 +52,6 @@ export function Hero({
   };
 
   const handleSecondaryButtonClick = () => {
-    console.log("secondary button clicked");
     trackEvent("deco_chat_landing_learn_more_click", {
       buttonText: secondaryButtonText,
       buttonLink: secondaryButtonLink,

apps/web/src/components/chat/ChatError.tsx

@@ -10,16 +10,21 @@ import {
   TooltipTrigger,
 } from "@deco/ui/components/tooltip.tsx";
 import { useState } from "react";
+import { useWorkspaceLink } from "../../hooks/useNavigateWorkspace.ts";
+import { Protect } from "../wallet/plan.tsx";
+import { useContactUsUrl } from "../../hooks/useContactUs.ts";
 
 const WELL_KNOWN_ERROR_MESSAGES = {
   InsufficientFunds: "Insufficient funds",
 };
 
 export function ChatError() {
+  const workspaceLink = useWorkspaceLink();
   const { chat: { error }, retry, correlationIdRef } = useChatContext();
   const insufficientFunds = error?.message.includes(
     WELL_KNOWN_ERROR_MESSAGES.InsufficientFunds,
   );
+  const contactUsUrl = useContactUsUrl();
 
   useEffect(() => {
     if (insufficientFunds) {
@@ -41,20 +46,53 @@ export function ChatError() {
         <div className="flex w-full justify-between p-4 bg-destructive/5 text-destructive rounded-xl text-sm">
           <div className="flex items-center gap-4">
             <Icon name="info" />
-            <p>Insufficient funds</p>
+            <div className="flex flex-col">
+              <p>Insufficient funds</p>
+              <Protect
+                feature="ai-wallet-deposit"
+                fallback={
+                  <p className="text-xs text-slate-700 pr-2">
+                    This workspace has reached its usage limit. Upgrade your
+                    plan to continue using AI.
+                  </p>
+                }
+              >
+                <p className="text-xs text-slate-700 pr-2">
+                  Your workspace wallet has reached its limit. Add more funds to
+                  continue using AI.
+                </p>
+              </Protect>
+            </div>
           </div>
           <div className="flex items-center justify-end">
-            <Button
-              size="sm"
-              variant="secondary"
-              className="bg-background hover:bg-background/80 shadow-none border border-input py-3 px-4 h-10"
-              asChild
+            <Protect
+              feature="ai-wallet-deposit"
+              fallback={
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  className="bg-background hover:bg-background/80 shadow-none border border-input py-3 px-4 h-10"
+                  asChild
+                >
+                  <Link to={contactUsUrl}>
+                    <Icon name="mail" className="mr-2" />
+                    Contact Us
+                  </Link>
+                </Button>
+              }
             >
-              <Link to="/wallet">
-                <Icon name="wallet" className="mr-2" />
-                Add funds to your wallet
-              </Link>
-            </Button>
+              <Button
+                size="sm"
+                variant="secondary"
+                className="bg-background hover:bg-background/80 shadow-none border border-input py-3 px-4 h-10"
+                asChild
+              >
+                <Link to={workspaceLink("/settings")}>
+                  <Icon name="wallet" className="mr-2" />
+                  Add credits
+                </Link>
+              </Button>
+            </Protect>
           </div>
         </div>
       </div>