feat: Session management (#1722)

Depends on https://github.com/cartridge-gg/internal/pull/3080

Author: edisontim

.github/workflows/e2e.yml

@@ -5,16 +5,6 @@ on:
     types:
       - 'vercel.deployment.success'
 jobs:
-  debug-event:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Debug Event Information
-        run: |
-          echo "Event name: ${{ github.event_name }}"
-          echo "Event action: ${{ github.event.action }}"
-          echo "Client payload: ${{ toJson(github.event.client_payload) }}"
-          echo "Full event: ${{ toJson(github.event) }}"
-  
   run-e2es:
     permissions:
       contents: read
@@ -30,14 +20,14 @@ jobs:
       - name: Install dependencies
         run: npm install -g pnpm && pnpm install
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: npx playwright install --with-deps
       - name: Run Playwright tests
-        run: pnpm exec playwright test
+        run: npx playwright test
         env:
           BASE_URL: ${{ github.event.client_payload.url }}
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 30

packages/keychain/src/components/settings/index.tsx

@@ -15,12 +15,8 @@ import {
   SheetFooter,
   SheetTrigger,
   SignOutIcon,
-  Skeleton,
 } from "@cartridge/ui";
-import {
-  CredentialMetadata,
-  useControllerQuery,
-} from "@cartridge/ui/utils/api/cartridge";
+import { useControllerQuery } from "@cartridge/ui/utils/api/cartridge";
 import { useCallback, useMemo, useState } from "react";
 import { constants } from "starknet";
 import CurrencySelect from "./currency-select";
@@ -31,8 +27,8 @@ import {
   RegisteredAccountCard,
 } from "./registered-account-card";
 import { SectionHeader } from "./section-header";
-import { Session, SessionCard } from "./session-card";
-import { SignerCard } from "./signer-card";
+import { SessionsSection } from "./sessions/sessions-section";
+import { SignersSection } from "./signers/signers-section";
 
 enum State {
   SETTINGS,
@@ -42,23 +38,11 @@ enum State {
 
 // Feature flag configuration
 interface FeatureFlags {
-  sessions: boolean;
   signers: boolean;
   registeredAccounts: boolean;
   currency: boolean;
 }
 
-// MOCK DATA
-const sessions: Session[] = [
-  {
-    sessionName: "Session 1",
-    expiresAt: BigInt(14400), // 4 hours in seconds
-  },
-  {
-    sessionName: "Session 2",
-    expiresAt: BigInt(7200), // 2 hours in seconds
-  },
-];
 const registeredAccounts: RegisteredAccount[] = [
   {
     accountName: "clicksave.stark",
@@ -74,18 +58,20 @@ export function Settings() {
   // Feature flags - can be moved to environment variables or API config later
   const featureFlags = useMemo<FeatureFlags>(
     () => ({
-      sessions: false,
       signers: true,
       registeredAccounts: false,
       currency: false,
     }),
     [],
   );
 
-  const data = useControllerQuery({
-    username: controller?.username() ?? "",
-    chainId: constants.NetworkName.SN_MAIN,
-  });
+  const controllerQuery = useControllerQuery(
+    {
+      username: controller?.username() ?? "",
+      chainId: constants.NetworkName.SN_MAIN,
+    },
+    { refetchOnMount: "always" },
+  );
 
   const handleLogout = useCallback(() => {
     try {
@@ -114,76 +100,10 @@ export function Settings() {
         />
 
         <LayoutContent className="gap-6">
-          {/* SESSION */}
-          {featureFlags.sessions && (
-            <section className="space-y-4">
-              <SectionHeader
-                title="Session Key(s)"
-                description="Sessions grant permission to your Controller to perform certain game actions on your behalf"
-                showStatus={true}
-              />
-              <div className="space-y-3">
-                {sessions.map((i, index) => (
-                  <SessionCard
-                    key={index}
-                    sessionName={i.sessionName}
-                    expiresAt={i.expiresAt}
-                  />
-                ))}
-              </div>
-              <Button
-                type="button"
-                variant="outline"
-                className="py-2.5 px-3 text-foreground-300 gap-1"
-              >
-                <PlusIcon size="sm" variant="line" />
-                <span className="normal-case font-normal font-sans text-sm">
-                  Create Session
-                </span>
-              </Button>
-            </section>
-          )}
-
-          {/* SIGNER */}
           {featureFlags.signers && (
-            <section className="space-y-4">
-              <SectionHeader
-                title="Signer(s)"
-                description="Information associated with registered accounts can be made available to games and applications."
-              />
-              <div className="space-y-3">
-                {data.isLoading ? (
-                  <Skeleton className="w-full h-10 bg-background-200" />
-                ) : data.isError ? (
-                  <div>Error</div>
-                ) : data.isSuccess && data.data ? (
-                  data.data?.controller?.signers?.map((i, signerIndex) => {
-                    return (
-                      <SignerCard
-                        key={`${signerIndex}`}
-                        signer={i.metadata as CredentialMetadata}
-                      />
-                    );
-                  })
-                ) : (
-                  <div>No data</div>
-                )}
-              </div>
-              {/* disabled until add signer functionality is implemented */}
-              {/* <Button */}
-              {/*   type="button" */}
-              {/*   variant="outline" */}
-              {/*   className="py-2.5 px-3 text-foreground-300 gap-1" */}
-              {/* > */}
-              {/*   <PlusIcon size="sm" variant="line" /> */}
-              {/*   <span className="normal-case font-normal font-sans text-sm"> */}
-              {/*     Add Signer */}
-              {/*   </span> */}
-              {/* </Button> */}
-            </section>
+            <SignersSection controllerQuery={controllerQuery} />
           )}
 
-          {/* REGISTERED ACCOUNT */}
           {featureFlags.registeredAccounts && (
             <section className="space-y-4">
               <SectionHeader
@@ -212,7 +132,6 @@ export function Settings() {
             </section>
           )}
 
-          {/* CURRENCY */}
           {featureFlags.currency && (
             <section className="space-y-4">
               <SectionHeader
@@ -222,6 +141,8 @@ export function Settings() {
               <CurrencySelect />
             </section>
           )}
+
+          <SessionsSection controllerQuery={controllerQuery} />
         </LayoutContent>
 
         <LayoutFooter>

packages/keychain/src/components/settings/section-header.tsx

@@ -1,26 +1,42 @@
+import { cn } from "@cartridge/ui/utils";
 import React from "react";
 import { Status } from "./status";
-import { cn } from "@cartridge/ui/utils";
 
 export interface SectionHeaderProps {
   title: string;
   description: string;
   showStatus?: boolean;
+  isActive?: boolean;
+  extraContent?: React.ReactNode;
 }
 
 export const SectionHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & SectionHeaderProps
->(({ className, title, description, showStatus = false, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn("space-y-2", className)} {...props}>
-      <div className="flex flex-row items-center justify-between">
-        <h1 className="text-foreground-200 text-sm font-medium">{title}</h1>
-        {showStatus && <Status isActive={false} />}
+>(
+  (
+    {
+      className,
+      title,
+      description,
+      showStatus = false,
+      isActive = false,
+      extraContent,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div ref={ref} className={cn("space-y-2", className)} {...props}>
+        <div className="flex flex-row items-center justify-between">
+          <h1 className="text-foreground-200 text-sm font-medium">{title}</h1>
+          {showStatus && <Status isActive={isActive} />}
+          {extraContent}
+        </div>
+        <p className="text-foreground-300 text-xs font-normal">{description}</p>
       </div>
-      <p className="text-foreground-300 text-xs font-normal">{description}</p>
-    </div>
-  );
-});
+    );
+  },
+);
 
 SectionHeader.displayName = "SectionHeader";